/* ============================================================
   JIN PROTEC — corporate site styles
   Headings: Mincho (serif) / Body: Gothic (sans)
   ============================================================ */

:root {
  /* greens */
  --primary     : #2f7d6b;
  --primary-dark: #246456;
  --primary-deep: #143f37;
  /* footer */
  --green-text  : #2f8270;
  /* eyebrows / accents on light */
  --mint-1      : #eef5f0;
  /* light section bg */
  --mint-2      : #e6f1ea;
  /* darker mint bg */
  --mint-line   : #d8e7df;
  --warm        : #f4f0ea;
  /* warm neutral bg */
  /* accent */
  --accent      : #e58e3c;
  /* ink / neutrals */
  --ink         : #2b3a37;
  --ink-soft    : #46544f;
  --muted       : #79857f;
  --line        : #e5ebe7;
  --card        : #ffffff;
  --shadow-sm   : 0 2px 10px rgba(20, 63, 55, .06);
  --shadow-md   : 0 14px 40px rgba(20, 63, 55, .10);
  --shadow-lg   : 0 24px 60px rgba(20, 63, 55, .16);
  --radius      : 16px;
  --radius-lg   : 22px;
  --maxw        : 1180px;
  --font-serif  : "Noto Serif JP", serif;
  --font-sans   : "Noto Sans JP", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box
}

html {
  scroll-behavior         : smooth;
  -webkit-text-size-adjust: 100%
}

body {
  margin                : 0;
  font-family           : var(--font-sans);
  color                 : var(--ink);
  background            : #fff;
  line-height           : 1.85;
  font-size             : 15px;
  letter-spacing        : .01em;
  -webkit-font-smoothing: antialiased;
  overflow-x            : hidden;
}

img {
  max-width: 100%;
  display  : block
}

a {
  color          : inherit;
  text-decoration: none
}

button {
  font-family: inherit;
  cursor     : pointer
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.4;
  margin     : 0;
  color      : var(--ink)
}

p {
  margin: 0
}

.wrap {
  max-width     : var(--maxw);
  margin-inline : auto;
  padding-inline: 28px
}

.section {
  padding: 96px 0
}

/* eyebrow label with dashes */
.eyebrow {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 14px;
  font-family    : var(--font-sans);
  font-weight    : 700;
  font-size      : 13px;
  letter-spacing : .22em;
  color          : var(--green-text);
  margin-bottom  : 22px;
}

.eyebrow.en {
  letter-spacing: .28em
}

.eyebrow::before,
.eyebrow::after {
  content   : "";
  width     : 34px;
  height    : 1px;
  background: var(--green-text);
  opacity   : .6
}

.eyebrow.left {
  justify-content: flex-start
}

.eyebrow.left::before {
  display: none
}

.eyebrow.left::after {
  width: 46px
}

.section-head {
  text-align   : center;
  margin-bottom: 54px
}

.section-head h2 {
  font-size     : clamp(26px, 3.4vw, 40px);
  letter-spacing: .04em
}

.section-head .lead {
  margin-top: 20px;
  color     : var(--ink-soft);
  font-size : 15px
}

.section-head .lead span {
  display: block
}

.tx-green {
  color: var(--green-text)
}

/* buttons */
.btn {
  display      : inline-flex;
  align-items  : center;
  gap          : 12px;
  padding      : 16px 26px;
  border-radius: 12px;
  font-weight  : 700;
  font-size    : 15px;
  border       : none;
  transition   : transform .25s ease, box-shadow .25s ease, background .25s ease;
  position     : relative;
}

.btn .ico {
  flex: 0 0 auto
}

.btn-primary {
  background: var(--primary);
  color     : #fff;
  box-shadow: var(--shadow-sm)
}

.btn-primary:hover {
  background: var(--primary-dark);
  transform : translateY(-2px);
  box-shadow: var(--shadow-md)
}

.btn-primary .arrow {
  margin-left: auto
}

.btn-ghost {
  background: #fff;
  color     : var(--primary-dark);
  border    : 1.5px solid var(--mint-line)
}

.btn-ghost:hover {
  transform   : translateY(-2px);
  box-shadow  : var(--shadow-md);
  border-color: var(--primary)
}

.btn-lg {
  padding  : 20px 30px;
  font-size: 16px
}

.arrow-pill {
  width          : 30px;
  height         : 30px;
  border-radius  : 50%;
  background     : var(--primary);
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  color          : #fff;
  flex           : 0 0 auto;
  transition     : transform .25s ease;
}

.card-arrow {
  width          : 28px;
  height         : 28px;
  border-radius  : 50%;
  border         : 1.5px solid var(--accent);
  color          : var(--accent);
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  transition     : background .25s ease, color .25s ease, transform .25s ease;
}

/* image placeholder */
.ph {
  position  : relative;
  background: linear-gradient(135deg, #e9e3d8, #dcd4c6);
  overflow  : hidden;
  isolation : isolate
}

.ph.cool {
  background: linear-gradient(135deg, #e3ece9, #d3e0db)
}

.ph.warmlight {
  background: linear-gradient(135deg, #f0ebe2, #e4dccd)
}

.ph::before {
  content         : "";
  position        : absolute;
  inset           : 0;
  opacity         : .5;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .35) 0 2px, transparent 2px 13px);
}

.ph::after {
  content        : attr(data-label);
  position       : absolute;
  inset          : 0;
  margin         : auto;
  height         : fit-content;
  width          : fit-content;
  font-family    : ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size      : 10.5px;
  letter-spacing : .05em;
  color          : rgba(60, 55, 45, .62);
  background     : rgba(255, 255, 255, .66);
  padding        : 5px 11px;
  border-radius  : 30px;
  white-space    : nowrap;
  backdrop-filter: blur(2px);
}

/* real photo loaded — hide placeholder overlays */
.ph.has-photo {
  background: none
}

.ph.has-photo::before,
.ph.has-photo::after {
  display: none
}

/* reveal animation — gated on .js so content is always visible without JS */
.js .reveal {
  opacity   : 0;
  transform : translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1)
}

.js .reveal.in {
  opacity  : 1;
  transform: none
}

.js .reveal.d1 {
  transition-delay: .08s
}

.js .reveal.d2 {
  transition-delay: .16s
}

.js .reveal.d3 {
  transition-delay: .24s
}

.js .reveal.d4 {
  transition-delay: .32s
}

@media (prefers-reduced-motion:reduce) {
  .js .reveal {
    opacity   : 1;
    transform : none;
    transition: none
  }

  html {
    scroll-behavior: auto
  }
}
/* ============ NEWS SECTION ============ */
.news-section { background: #f8f7f5; }
.news-list-inner { list-style: none; padding: 0; margin: 0; max-width: 760px; margin-inline: auto; }
.news-item { display: flex; align-items: baseline; gap: 20px; padding: 18px 0; border-bottom: 1px solid #e8e4de; }
.news-item:first-child { border-top: 1px solid #e8e4de; }
.news-date { font-size: .85rem; color: #888; white-space: nowrap; min-width: 120px; }
.news-title { font-size: .95rem; color: #333; line-height: 1.6; }

/* ============ SUB PAGE COMMON ============ */
.subpage-hero {
  background: var(--color-dark, #143f37);
  color: #fff;
  padding: 100px 0 40px;
}
.subpage-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  color: rgba(255,255,255,.65);
  margin-bottom: 12px;
}
.subpage-breadcrumb a { color: rgba(255,255,255,.8); text-decoration: none; }
.subpage-breadcrumb a:hover { color: #fff; }
.subpage-hero h1 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.nav .current { color: var(--color-accent, #e58e3c); font-weight: 600; }

/* ============ NEWS LIST ============ */
.news-card-list { list-style: none; padding: 0; margin: 0; }
.news-card-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid #e8e4de;
  text-decoration: none;
  color: inherit;
  transition: opacity .2s;
}
.news-card-list li:first-child .news-card-row { border-top: 1px solid #e8e4de; }
.news-card-row:hover { opacity: .75; }
.news-card-thumb {
  width: 100px;
  height: 70px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: #f0ede8;
}
.news-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-card-thumb--empty { background: #e8e4de; }
.news-card-body { flex: 1; min-width: 0; }
.news-card-date { font-size: .82rem; color: #888; display: block; margin-bottom: 6px; }
.news-card-title { font-size: .95rem; color: #333; line-height: 1.5; font-weight: 500; }
.news-card-arrow { color: #aaa; flex-shrink: 0; margin-left: auto; }

/* ============ PAGINATION ============ */
.subpage-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}
.subpage-pagination .pagination-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border: 1.5px solid #d0ccc5;
  border-radius: 100px;
  background: #fff;
  font-size: .9rem;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.subpage-pagination .pagination-btn:hover:not(:disabled) { border-color: var(--color-dark,#143f37); }
.subpage-pagination .pagination-btn:disabled { opacity: .4; cursor: default; }
.subpage-pagination .pagination-info { font-size: .88rem; color: #888; }

/* ============ ARTICLE DETAIL ============ */
.article-detail { padding: 0; }
.article-header { margin-bottom: 32px; }
.article-date { font-size: .85rem; color: #888; display: block; margin-bottom: 16px; }
.article-thumb { border-radius: 8px; overflow: hidden; margin-bottom: 24px; }
.article-thumb img { width: 100%; height: auto; display: block; }
.article-body { font-size: 1rem; line-height: 1.9; color: #444; }
.article-body p { margin: 0 0 1.4em; }
.article-body strong { font-weight: 700; }
.article-body em { font-style: italic; }
.article-body a { color: var(--color-dark,#143f37); text-decoration: underline; }
.article-body figure { margin: 1.5em 0; }
.article-body figure img { width: 100%; border-radius: 6px; }
.article-body figcaption { font-size: .85rem; color: #888; margin-top: 6px; text-align: center; }

/* ============ CASES FILTER ============ */
.cases-filter-bar { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 36px; }
.filter-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filter-label { font-size: .82rem; color: #888; white-space: nowrap; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip {
  padding: 6px 14px;
  border: 1.5px solid #d0ccc5;
  border-radius: 100px;
  background: #fff;
  font-size: .82rem;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.filter-chip.active,
.filter-chip:hover { border-color: var(--color-dark,#143f37); background: var(--color-dark,#143f37); color: #fff; }

/* ============ CASE DETAIL ============ */
.case-meta-row { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid #e8e4de; border-radius: 8px; overflow: hidden; margin-bottom: 36px; }
.case-meta-item { flex: 1; min-width: 120px; padding: 14px 18px; border-right: 1px solid #e8e4de; }
.case-meta-item:last-child { border-right: none; }
.case-meta-label { display: block; font-size: .75rem; color: #888; margin-bottom: 4px; }
.case-section-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid var(--color-dark,#143f37); }
.case-text-section { margin-bottom: 36px; }
.ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ba-col img { width: 100%; border-radius: 8px; display: block; }
.ba-label { font-size: .8rem; font-weight: 700; color: #888; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .06em; }
.ba-label.after { color: var(--color-dark,#143f37); }
.image-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.image-gallery-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; display: block; }

/* ============ NEWS ITEM THUMBNAIL ============ */
.news-item.has-thumb { align-items: center; }
.news-item-thumb {
  width: 72px;
  height: 52px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}
.news-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-item-body { flex: 1; min-width: 0; }
.news-item:not(.has-thumb) .news-item-body { display: contents; }