@charset "utf-8";
/* ==========================================================================
   ZISSHO corporate site
   Layout values are matched to the measured reference rendering.
   Breakpoints: 1140 / 840 / 540 / 320
   ========================================================================== */

/* ---------- design tokens ---------- */
:root{
  /* brand */
  --grad:        linear-gradient(90deg, #2f85f4, #196fdd);
  --grad-deep:   linear-gradient(#0058c9 0%, #2f8aff 100%);
  --grad-soft:   linear-gradient(#ccd4ee 0%, #ffffff 100%);
  --grad-light:  linear-gradient(90deg, #ffffff 0%, #e3e7f4 100%);
  --c-primary:   #247ae9;
  --c-tint:      #f1f3fa;
  --c-ink:       #1a1a1a;
  --c-nav:       #3c3232;
  --c-muted:     #646e81;
  --c-line:      #cfd4e3;
  --c-gray:      #d9d9d9;
  --c-white:     #ffffff;

  /* type */
  --ff-en: "Montserrat", "Zen Kaku Gothic New", system-ui, sans-serif;
  --ff-ja: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --ff-pop:"Poppins", var(--ff-en);

  /* layout */
  --gutter: 40px;
  --radius: 24px;

  /* motion */
  --ease: cubic-bezier(0.4, 0.4, 0, 1);
  --dur: 0.3s;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--ff-ja);
  font-size:16px;
  line-height:1.75;
  color:var(--c-ink);
  background:var(--c-white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,p,figure,address,dl,dt,dd{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
/* fieldset はブラウザ既定で 2px groove の枠線と余白が付く。
   ラジオ群の意味づけのために要素は残しつつ、見た目は div.field と揃える */
fieldset{ margin:0; padding:0; border:0; min-inline-size:0; }
legend{ padding:0; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
address{ font-style:normal; }
/* text-align:inherit - UA stylesheets centre buttons, which would offset the
   stacked JA/EN labels on the submit pill against the <a> pills */
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer;
        text-align:inherit; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  padding:12px 20px; background:var(--c-white); color:var(--c-ink);
  border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2px solid var(--c-primary); outline-offset:3px; border-radius:4px; }

/* gradient text helper */
.h-grad,
/* On the light pill the fill goes on the roll copies themselves, not on their
   parent: they are the elements that move, and a clipped background does not
   follow a transformed descendant (the glyphs would lose their fill mid-roll). */
.pill--light .pill__ja .roll__base,
.pill--light .pill__ja .roll__over,
.pill--light .pill__en .roll__base,
.pill--light .pill__en .roll__over{
  background-image:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ==========================================================================
   roll-up hover label  (two stacked copies, measured on the reference)
   ========================================================================== */
/* Both copies share one grid cell, so the box is as wide as the WIDER of the
   two languages - needed now that the hover copy is the other language. */
.roll{
  display:grid;
  overflow:hidden;
}
.roll__base,
.roll__over{
  grid-area:1 / 1;
  display:block;
  white-space:nowrap;
  transition:transform .45s var(--ease);
}
.roll__over{ transform:translateY(100%); }
/* <button> too: the contact form's submit uses the same roll markup */
:is(a, button):hover .roll__base,
:is(a, button):focus-visible .roll__base{ transform:translateY(-100%); }
:is(a, button):hover .roll__over,
:is(a, button):focus-visible .roll__over{ transform:translateY(0); }

/* ==========================================================================
   HEADER  —  fixed, top:40, h:80, z:5, padding 0 50 0 40
   ========================================================================== */
.header{
  position:fixed;
  /* 上端と左右を gutter に連動させる。カード（.page-hero 等）の余白も gutter なので、
     どの画面幅でもピルがカードの外にはみ出さない。右は +10px して内側に収める */
  inset:var(--gutter) 0 auto 0;
  z-index:5;
  height:80px;
  padding:0 calc(var(--gutter) + 10px) 0 var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  pointer-events:none;
}
.header > *{ pointer-events:auto; }

.header__logo{
  display:flex;
  align-items:center;
  padding:20px;
}
.logo{
  width:auto;
  height:49px;
  aspect-ratio:2172 / 724;   /* supplied wordmark */
  color:var(--c-nav);
  transition:opacity var(--dur) var(--ease);
}
.header__logo:hover .logo{ opacity:.7; }
.logo--footer{ height:44px; color:var(--c-white); }

/* pill nav : bg #fff, radius 128, shadow 0 4px 4px rgba(0,0,0,.03), gap 32 */
.header__nav{
  display:flex;
  align-items:center;
  padding:10px;
  background:var(--c-white);
  border-radius:128px;
  box-shadow:0 4px 4px rgba(0,0,0,.03);
}
.gnav{
  display:flex;
  align-items:center;
  gap:32px;
  padding:10px 15px;
}
.gnav__item{ display:flex; }
.gnav__link{
  font-family:var(--ff-en);
  font-size:16px;
  line-height:1;
  font-weight:700;
  color:var(--c-nav);
}
.gnav__link .roll__over{
  background-image:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* header only: the JA and EN copies are different widths, so centre them
   inside the box (which is sized to the wider of the two) */
.gnav__link .roll__base,
.gnav__link .roll__over,
.btn-head__label .roll__base,
.btn-head__label .roll__over{ text-align:center; }

/* header contact button : 168x60, p 12 12 12 32, radius 128 */
.btn-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-width:168px;
  padding:12px 12px 12px 32px;
  background-image:var(--grad);
  border-radius:128px;
  color:var(--c-white);
  font-family:var(--ff-en);
  font-size:16px;
  line-height:1;
  font-weight:700;
  transition:filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-head:hover{ filter:brightness(1.06); transform:translateY(-1px); }

/* circular arrow : 36px, radius 50%, icon 14px */
.icon-circle{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:50%;
  overflow:hidden;
}
.icon-circle--deep{ background-image:var(--grad-deep); color:var(--c-white); }
.icon-circle--soft{ background-image:var(--grad-soft); color:var(--c-primary); }
.icon-circle--ghost{
  background:var(--c-white);
  color:var(--c-primary);
  border:1px solid var(--c-line);
  transition:background-image var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.icon-circle__inner{ width:14px; height:14px; }
.arrow{ width:14px; height:14px; }

/* burger (SP only) */
.burger{
  display:none;
  width:56px; height:56px;
  border-radius:50%;
  background:var(--c-white);
  box-shadow:0 4px 4px rgba(0,0,0,.03);
  place-items:center;
  align-content:center;
  justify-items:center;
  gap:6px;
}
.burger__bar{
  display:block;
  width:20px; height:2px;
  background:var(--c-nav);
  border-radius:2px;
  transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.burger[aria-expanded="true"] .burger__bar:nth-child(1){ transform:translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }

/* ---------- drawer ---------- */
.drawer{
  position:fixed;
  inset:0;
  z-index:4;
  display:grid;
  place-items:center;
  padding:120px 24px 40px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  opacity:0;
  transition:opacity var(--dur) var(--ease);
}
.drawer[hidden]{ display:none; }
.drawer.is-open{ opacity:1; }
.drawer__list{ display:grid; gap:4px; width:100%; max-width:420px; }
.drawer__list a{
  display:flex;
  align-items:baseline;
  gap:16px;
  padding:18px 8px;
  border-bottom:1px solid var(--c-line);
}
.drawer__en{
  font-family:var(--ff-en);
  font-size:22px;
  font-weight:700;
  background-image:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.drawer__ja{ font-size:13px; font-weight:500; color:var(--c-muted); }

/* ==========================================================================
   HERO NOTCH
   A white block laid over the hero's top-left corner. Only its bottom-right
   corner is rounded, and that curve is what reads as a concave cut in the
   hero panel. The logo then sits on white instead of on the artwork.
   ========================================================================== */
main{ position:relative; }

.hero-notch{
  position:absolute;
  inset:39px auto auto 39px;
  z-index:1;
  width:200px;
  height:82px;
  max-width:100%;
  background:var(--c-white);
  border-radius:0 0 24px 0;
  pointer-events:none;
}
/* 切り欠きはロゴの背後に濃い色（トップの動画・下層の青いカード）が
   来るページでだけ必要。地色が明るいページでは白い板が浮いて見える。 */
.list-main .hero-notch,
.article-main .hero-notch,
.contact-main .hero-notch,
.legal-main .hero-notch{ display:none; }

/* ==========================================================================
   SECTION SHELL  —  wrapper padding 40, card max 1200, content max 1080
   ========================================================================== */
.section{
  display:flex;
  flex-direction:column;
  align-items:center;
  background:var(--c-white);
}
.section__inner{
  width:100%;
  padding:var(--gutter);
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* card : padding 120 60, radius 24 */
.card{
  width:100%;
  padding:120px 60px;
  border-radius:var(--radius);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:48px;
}
.card--plain{ background:var(--c-white); }
.card--tint{ background:var(--c-tint); gap:64px; }

.card__body{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:48px;
}
.card__body--center{ align-items:center; gap:64px; }

.stack{ display:flex; flex-direction:column; align-items:flex-start; width:100%; }
.stack--16{ gap:16px; }
.stack--24{ gap:24px; }

/* section head */
.sec-head{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
}

/* eyebrow : 16px gradient dot + JP label 15/22.5 w700 */
.eyebrow{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--ff-ja);
  font-size:15px;
  line-height:1.5;
  font-weight:700;
  color:var(--c-ink);
}
.eyebrow__dot{
  flex:0 0 auto;
  width:16px; height:16px;
  border-radius:128px;
  background-image:var(--grad);
}

/* headings : 64px / 76.8 / w700, gradient */
.h-grad{
  font-family:var(--ff-en);
  font-size:64px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:0;
}
.h-grad--wide{ font-family:var(--ff-ja); }

/* lead : 24 / 36 / w700 */
.lead{
  font-size:24px;
  line-height:1.5;
  font-weight:700;
  color:var(--c-ink);
}

/* ==========================================================================
   PILL BUTTON  —  258x82, padding 23 23 23 32, radius 80 (hero 128)
   labels column gap 4 : JA 10/10.6 w700, EN 20/22 w700
   ========================================================================== */
.pill{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:258px;
  max-width:100%;
  padding:23px 23px 23px 32px;
  border-radius:80px;
  transition:filter var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pill:hover{ transform:translateY(-2px); }
.pill--grad{
  background-image:var(--grad);
  color:var(--c-white);
  box-shadow:0 6px 18px rgba(36,122,233,.22);
}
.pill--grad:hover{ filter:brightness(1.06); box-shadow:0 10px 26px rgba(36,122,233,.3); }
.pill--light{
  border-radius:128px;
  background-image:var(--grad-light);
  box-shadow:0 6px 18px rgba(16,40,80,.12);
}
.pill--light:hover{ box-shadow:0 10px 26px rgba(16,40,80,.18); }

.pill__labels{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  min-width:0;
}
.pill__ja{
  font-family:var(--ff-ja);
  font-size:10px;
  line-height:1.06;
  font-weight:700;
}
.pill__en{
  font-family:var(--ff-en);
  font-size:20px;
  line-height:1.1;
  font-weight:700;
}

/* ==========================================================================
   HERO  —  the panel fills the viewport: the section wrapper is 100vh and the
   card is height:100% inside it, so only the gutter shows around the artwork.
   ========================================================================== */
.section--hero .section__inner{ height:100vh; height:100dvh; }
.hero{
  position:relative;
  width:100%;
  height:100%;
  padding:60px;
  border-radius:var(--radius);
  overflow:hidden;
  /* clips the viewport-fixed video to this rounded card.
     overflow:hidden alone does not clip a position:fixed descendant. */
  clip-path:inset(0 round var(--radius));
  display:flex;
  flex-direction:column;
  justify-content:center;
  isolation:isolate;
}

/* Swap in a real photograph by setting --hero-image on .hero */
.hero__media{
  position:absolute;
  inset:0;
  z-index:0;
  background-color:#0b2d5c;
  /* poster first: shown before the video starts, and when it cannot play */
  background-image:
    var(--hero-image,
      url("../img/hero-poster.jpg"),
      linear-gradient(120deg, #0a4fa8 0%, #1c6fd8 45%, #0b3a78 100%)
    );
  background-size:cover;
  background-position:center;
}
/* background video: decorative, sits under the scrim */
.hero__video{
  /* fixed to the viewport so the footage stays put while the page scrolls */
  position:fixed;
  inset:0;
  z-index:0;
  width:100vw;
  height:100vh;
  height:100dvh;          /* avoids the mobile toolbar jump */
  object-fit:cover;
  object-position:var(--hero-focus, center);
  display:block;
  border:0;
}

/* 縦長の画面では cover で左右が大きく削られる。既定の中央基準だと
   可視範囲が横 37〜63% になり、横 67% にあるスカイツリーが枠外へ出る。
   そこで基準点をスカイツリーに寄せ、可視範囲を 54〜80% にする。
   3/5(0.6) は、中央基準のままでも 67% が入る限界の縦横比。 */
@media (max-aspect-ratio: 3/5){
  .hero{ --hero-focus:67% center; }
  .hero__media{ background-position:67% center; }
}

.hero__scrim{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(90deg, rgba(4,22,48,.55) 0%, rgba(4,22,48,.18) 55%, rgba(4,22,48,.05) 100%);
}
.hero__body{
  position:relative;
  z-index:2;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
}
.hero__head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  margin:32px 0 64px;   /* FB: ボタンが見出しに近すぎたため下方向を拡張 */
}
.hero__kicker{
  font-family:var(--ff-en);
  font-size:16px;
  line-height:1.5;
  font-weight:600;
  color:var(--c-white);
}
.hero__title{
  font-family:var(--ff-ja);
  font-size:72px;
  line-height:1.3;
  font-weight:600;
  letter-spacing:.05em;
  color:var(--c-white);
}

/* ---------- Pick up ticker : window 243x110, radius 12 ---------- */
.ticker{
  position:absolute;
  right:30px;
  bottom:30px;
  z-index:2;
  width:243px;
  height:110px;
  border-radius:12px;
  overflow:hidden;
}
.ticker__track{
  display:flex;
  height:100%;
  will-change:transform;
  /* the step itself: a quick snap, then it holds (interval set in JS) */
  transition:transform .45s var(--ease);
}
.ticker__slide{
  flex:0 0 100%;
  height:100%;
}
.ticker__card{
  width:100%;
  height:100%;
  padding:20px;
  background:var(--c-white);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.ticker__text{
  font-size:13px;
  line-height:1.5;
  font-weight:500;
  color:var(--c-ink);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.badge{
  align-self:flex-start;
  padding:4px 12px;
  border-radius:20px;
  background-image:var(--grad);
  font-family:var(--ff-en);
  font-size:10px;
  line-height:1.4;
  font-weight:600;
  color:var(--c-white);
}

/* ==========================================================================
   SERVICE BRIEF  (top page)
   One service, so no grid of cards. Name and promise sit on the left, the
   explanation and the action on the right, and the wide concept diagram runs
   the full width underneath. Everything is left-aligned - the section head
   above it is too, and centring the lot read as a dead stack.
   ========================================================================== */
.svc-brief{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:64px;
}
.svc-brief__row{
  display:grid;
  grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  gap:40px 64px;
  align-items:start;
}

/* left: identity + promise */
.svc-brief__lead{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}
.svc-brief__name{
  font-size:48px;
  line-height:1.2;
  font-weight:700;
  background-image:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.svc-brief__en{
  font-family:var(--ff-en);
  font-size:15px;
  line-height:1.5;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--c-muted);
}
.svc-brief__tagline{
  margin-top:22px;
  padding-top:22px;
  border-top:1px solid var(--c-line);
  font-size:28px;
  line-height:1.5;
  font-weight:700;
  color:var(--c-ink);
}

/* right: explanation + action */
.svc-brief__body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:32px;
  padding-top:8px;
}
.svc-brief__desc{
  font-size:16px;
  line-height:2;
  font-weight:500;
  color:var(--c-muted);
}

/* the diagram keeps the full card width */
.svc-brief__media{
  width:100%;
  margin:0;
  border-radius:8px;
  overflow:hidden;
  background:var(--c-white);
}
.svc-brief__media img{
  display:block;
  width:100%;
  height:auto;
}

/* ==========================================================================
   NEWS LIST
   ========================================================================== */
.news{ width:100%; display:flex; flex-direction:column; }
.news__item + .news__item{ border-top:1px solid var(--c-line); }
.news__link{
  display:grid;
  grid-template-columns:auto auto 1fr auto;
  align-items:center;
  gap:24px;
  padding:24px 8px;
}
.news__link:hover .icon-circle--ghost{
  background-image:var(--grad);
  color:var(--c-white);
  border-color:transparent;
}
.news__link:hover .news__title{ color:var(--c-primary); }
.news__date{
  font-family:var(--ff-pop);
  font-size:14px;
  font-weight:600;
  color:var(--c-muted);
}
.news__cat{
  padding:4px 14px;
  border:1px solid var(--c-line);
  border-radius:20px;
  font-size:11px;
  font-weight:700;
  color:var(--c-primary);
  white-space:nowrap;
}
.news__title{
  font-size:16px;
  font-weight:700;
  color:var(--c-ink);
  transition:color var(--dur) var(--ease);
}

/* ==========================================================================
   RECRUIT GALLERY MARQUEE  —  items 384x480, padding 0 12
   ========================================================================== */
.gallery{ width:100%; overflow:hidden; }
.gallery__track{ display:flex; width:max-content; will-change:transform; }
.gallery__item{
  flex:0 0 384px;
  height:480px;
  margin:0 12px;
  border-radius:16px;
  background-color:var(--c-gray);
  background-size:cover;
  background-position:center;
}
.gallery__item--a{ background-image:linear-gradient(160deg,#2f85f4,#0a4fa8); }
.gallery__item--b{ background-image:linear-gradient(160deg,#8ccdff,#1c6fd8); }
.gallery__item--c{ background-image:linear-gradient(160deg,#0b3a78,#5eaaff); }
.gallery__item--d{ background-image:linear-gradient(160deg,#5eaaff,#196fdd); }

/* ==========================================================================
   FOOTER  —  #3c3232 ground, padding 80px, gap 60px.
   Top row holds the logo + a JP(10px)/EN(20px) two-line nav and carries the
   1px rule; bottom row is socials + privacy; the copyright sits centred below.
   ========================================================================== */
.footer{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:60px;
  padding:80px;
  background:var(--c-nav);
  color:var(--c-white);
}
.footer__shell{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0 60px;
}

.footer__top{
  width:100%;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:40px;
  padding:0 0 40px;
  border-bottom:1px solid rgba(255,255,255,.2);
}
.footer__logo{ display:flex; align-items:center; }

.fnav{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:40px 60px;
  padding:10px;
}
.fnav__item{ display:flex; }
.fnav__link{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:4px;
  color:var(--c-white);
}
.fnav__ja{
  font-family:var(--ff-ja);
  font-size:10px;
  line-height:1.1;
  font-weight:700;
}
.fnav__en{
  font-family:var(--ff-en);
  font-size:20px;
  line-height:1.1;
  font-weight:700;
}

/* only the privacy link remains in this row, so it sits to the right */
.footer__bottom{
  width:100%;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-end;
  gap:0;
  padding:40px 0 0;
}

.footer__privacy{
  font-family:var(--ff-en);
  font-size:14px;
  line-height:1.4;
  font-weight:500;
  color:var(--c-white);
  transition:opacity var(--dur) var(--ease);
}
.footer__privacy:hover{ opacity:.65; }

.footer__copy{
  font-family:var(--ff-en);
  font-size:14px;
  line-height:1.4;
  font-weight:500;
  color:var(--c-white);
}

/* ==========================================================================
   PAGE HERO  (sub pages)  —  card padding 188/60/60, title 96px, white eyebrow,
   followed by an in-page anchor nav (JP 12px over EN 12px + down arrow).
   ========================================================================== */
.page-hero{
  position:relative;
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:180px;
  padding:188px 60px 60px;
  border-radius:var(--radius);
  overflow:hidden;
  isolation:isolate;
}
.page-hero__media{
  position:absolute;
  inset:0;
  z-index:0;
  background-color:#0b2d5c;
  background-image:
    var(--page-hero-image,
      radial-gradient(55% 65% at 15% 20%, rgba(94,170,255,.8) 0%, rgba(94,170,255,0) 60%),
      radial-gradient(60% 70% at 85% 85%, rgba(0,70,170,.9) 0%, rgba(0,70,170,0) 60%),
      linear-gradient(120deg, #0a4fa8 0%, #1c6fd8 48%, #0b3a78 100%));
  background-size:cover;
  background-position:center;
}
.page-hero__body{ position:relative; z-index:2; width:100%; }
.page-hero__head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
}
.page-hero__title{
  font-family:var(--ff-en);
  font-size:96px;
  line-height:1.2;
  font-weight:700;
  color:var(--c-white);
}
.eyebrow--light{ color:var(--c-white); }
.eyebrow--light .eyebrow__dot{ background:var(--c-white); background-image:none; }

.anchors{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap:0;
  width:100%;
}
.anchors__item{ flex:1 1 0; display:flex; padding:0 16px; min-width:150px; }
.anchors__link{
  flex:1 1 0;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  height:45px;
  color:var(--c-white);
  transition:opacity var(--dur) var(--ease);
}
.anchors__link:hover{ opacity:.7; }
.anchors__labels{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:4px;
  padding:4px 0;
}
.anchors__ja{ font-family:var(--ff-ja); font-size:12px; line-height:1.5; font-weight:600; }
.anchors__en{ font-family:var(--ff-en); font-size:12px; line-height:1.5; font-weight:700; }
.anchors__link .arrow{ width:16px; height:16px; }

/* ==========================================================================
   DEFINITION TABLE  (Overview)
   ========================================================================== */
.deflist{
  width:100%;
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--c-gray);
}
.deflist__row{
  display:grid;
  grid-template-columns:minmax(0,30%) 1fr;
  gap:64px;
  align-items:center;
  padding:20px 0;
  border-bottom:1px solid var(--c-gray);
}
.deflist__key{
  font-size:16px;
  line-height:1.5;
  font-weight:700;
  color:var(--c-nav);
}
.deflist__val{
  font-size:16px;
  line-height:1.5;
  font-weight:500;
  color:var(--c-nav);
}
/* officer list: role column + name, kept aligned across rows */
.officers{ display:flex; flex-direction:column; gap:6px; }
.officers li{
  display:flex;
  flex-direction:row;
  align-items:baseline;
  gap:20px;
}
.officers__role{
  flex:0 0 auto;
  min-width:7em;
  font-size:14px;
  font-weight:700;
  color:var(--c-muted);
}
.officers__name{
  font-size:16px;
  font-weight:500;
  color:var(--c-nav);
}

.deflist__mail{
  background-image:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  border-bottom:1px solid var(--c-primary);
  transition:opacity var(--dur) var(--ease);
}
.deflist__mail:hover{ opacity:.7; }

/* ==========================================================================
   ACCESS
   ========================================================================== */
.map{
  width:100%;
  height:630px;
  border-radius:8px;
  overflow:hidden;
  background:var(--c-gray);
}
.map iframe{ width:100%; height:100%; border:0; display:block; }
.access__row{
  width:100%;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  gap:64px;
}
.access__text{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:260px;
}
.access__place{ font-size:16px; line-height:1.4; font-weight:700; color:#333; }
.access__routes{ font-size:16px; line-height:1.4; font-weight:600; color:#333; }

/* a shorter pill variant: single EN label, 258x68 */
.pill--compact{
  width:258px;
  min-height:68px;              /* label block is 52 + 8px padding either side */
  padding:8px 8px 8px 32px;
  border-radius:128px;
}
.pill--compact .pill__en{ font-size:20px; line-height:1.1; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-main{
  display:flex;
  flex-direction:column;
  /* News・Privacy と同じ組み方。見出しは幅100%で左揃え、フォームは中央 */
  align-items:center;
  /* 白地に白いフォームだと輪郭が見えないため、地色を敷いてカードとして立たせる */
  background:var(--c-tint);
  justify-content:center;
  gap:60px;
  padding:160px 60px 100px;
}
.contact-main__head{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
}
.contact-main__title{
  font-family:var(--ff-en);
  font-size:96px;
  line-height:1.2;
  font-weight:700;
}

.form{
  width:737px;
  max-width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:40px;
  padding:60px;
  background:var(--c-white);
  /* 枠線は使わない。地色との明度差と柔らかい影だけで面を立たせる */
  box-shadow:0 18px 48px rgba(16,40,80,.08);
  border-radius:var(--radius);
}
.field{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}
.field__label{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
}
.req{
  padding:2px 5px;
  border-radius:2px;
  background-image:var(--grad);
  font-size:12px;
  line-height:1.4;
  font-weight:700;
  color:var(--c-white);
}
.field__name{
  font-size:15px;
  line-height:1.4;
  font-weight:700;
  color:#333;
}
.field__control{
  width:100%;
  height:50px;
  padding:10px 16px;
  background:var(--c-white);
  border:1px solid var(--c-gray);
  border-radius:4px;
  font:inherit;
  font-size:15px;
  color:#333;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
textarea.field__control{
  height:160px;
  padding:10px;
  resize:vertical;
}
.field__control::placeholder{ color:#b5bcc8; }
.field__control:focus{
  outline:none;
  border-color:var(--c-primary);
  box-shadow:0 0 0 3px rgba(36,122,233,.15);
}

.choices{ width:100%; display:flex; flex-direction:column; }
.choice{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  padding:10px;
  cursor:pointer;
}
.choice input{ width:20px; height:20px; accent-color:var(--c-primary); margin:0; }
.choice span{ font-size:15px; line-height:1.4; font-weight:500; color:#333; }

.consent{
  width:100%;
  display:flex;
  flex-direction:column;
  /* 送信ボタンは中央のまま、同意欄だけ左揃えにする */
  align-items:flex-start;
  gap:16px;
}
.consent__row{
  display:flex;
  flex-direction:row;
  /* 狭い画面では文が2行になる。中央揃えだと箱が行間に浮くため1行目に合わせる */
  align-items:flex-start;
  gap:10px;
  cursor:pointer;
}
.consent__row input{ flex:0 0 auto; width:20px; height:20px; accent-color:var(--c-primary); margin:0; }
.consent__row span{ font-size:14px; line-height:1.4; font-weight:500; color:#333; }
/* 文中のリンク。グラデーション文字は行をまたぐと途切れるため、
   本文に混ざるこの位置では単色＋下線にする */
.consent__link{
  font-weight:700;
  color:var(--c-primary);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  transition:text-decoration-thickness var(--dur) var(--ease);
}
.consent__link:hover{ text-decoration-thickness:2px; }

.submit{
  width:258px;
  border-radius:48px;
  cursor:pointer;
}
.form__status{
  width:100%;
  font-size:14px;
  line-height:1.6;
  font-weight:700;
  text-align:center;
  color:var(--c-primary);
}
.form__status:empty{ display:none; }
/* ハニーポット。人間には見せず、自動投稿だけが埋める項目。
   display:none だと埋めないボットがいるため、画面外へ逃がす */
.hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* ==========================================================================
   BREADCRUMB  —  right-aligned, home icon + chevrons
   ========================================================================== */
.crumbs{
  width:100%;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-end;
  gap:0;
}
.crumbs__link,
.crumbs__current{
  display:flex;
  align-items:center;
  font-family:var(--ff-en);
  font-size:14px;
  line-height:1.4;
  font-weight:500;
  color:var(--c-muted);
}
.crumbs__link{ transition:opacity var(--dur) var(--ease); }
.crumbs__link:hover{ opacity:.65; }
.crumbs__home svg{ width:18px; height:18px; }
.crumbs__sep{
  display:flex;
  align-items:center;
  color:var(--c-line);
}
.crumbs__sep svg{ width:24px; height:24px; }
.crumbs__current{
  max-width:240px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:var(--ff-ja);
}

/* ==========================================================================
   LISTING PAGE  (News)
   ========================================================================== */
.list-main{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:60px;
  padding:120px 60px;
}
.list-main__head{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.list-main__title{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
  width:100%;
  padding-top:16px;
}
.page-title{
  font-family:var(--ff-en);
  font-size:96px;
  line-height:1.2;
  font-weight:700;
}

.list-card{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:60px;
  background:var(--c-white);
  border-radius:var(--radius);
}
.posts{
  width:100%;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:100px 40px;
  padding:60px;
}
.post{ display:flex; }
.post__link{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:100%;
}
.post__thumb{
  width:100%;
  aspect-ratio:343 / 219;
  border-radius:8px;
  background-color:var(--c-gray);
  background-size:cover;
  background-position:center;
  overflow:hidden;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.post__link:hover .post__thumb{
  transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(16,40,80,.12);
}
.post__thumb--a{ background-image:linear-gradient(135deg,#2f85f4,#0a4fa8); }
.post__thumb--b{ background-image:linear-gradient(135deg,#5eaaff,#196fdd); }
.post__thumb--c{ background-image:linear-gradient(135deg,#8ccdff,#247ae9); }
.post__thumb--d{ background-image:linear-gradient(135deg,#0a4fa8,#2f8aff); }
.post__thumb--e{ background-image:linear-gradient(135deg,#1c6fd8,#8ccdff); }
.post__thumb--f{ background-image:linear-gradient(135deg,#0b3a78,#5eaaff); }

.post__body{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding-top:12px;
}
.post__date{
  font-family:var(--ff-pop);
  font-size:15px;
  line-height:1.5;
  font-weight:500;
  color:var(--c-muted);
}
.post__title{
  width:100%;
  font-size:18px;
  line-height:1.5;
  font-weight:700;
  color:var(--c-ink);
  transition:color var(--dur) var(--ease);
}
.post__link:hover .post__title{ color:var(--c-primary); }

.tags{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 8px;
  padding-top:12px;
}
.tag{
  padding:6px 12px;
  border:1px solid var(--c-line);
  border-radius:16px;
  font-size:12px;
  line-height:1.5;
  font-weight:500;
  color:var(--c-muted);
}

/* ==========================================================================
   ARTICLE PAGE  (News detail)
   ========================================================================== */
.article-main{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.article-main > .crumbs{ padding:0 40px; }

.article{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:64px;
  padding:120px;
  background:var(--c-white);
  border-radius:var(--radius);
}
.article__head{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:32px;
  padding:0 0 40px;
}
.article__meta{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  gap:5px 20px;
}
.article__date{
  font-family:var(--ff-pop);
  font-size:16px;
  line-height:1.4;
  font-weight:600;
  color:var(--c-muted);
}
.article__meta .tags{ padding-top:0; gap:0 8px; }
.article__title{
  font-size:48px;
  line-height:1.5;
  font-weight:700;
}

.article__body{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:40px;
}
.article__hero{
  width:100%;
  aspect-ratio:1029 / 579;
  border-radius:8px;
  background-color:var(--c-gray);
  background-image:linear-gradient(135deg,#2f85f4,#0a4fa8);
  background-size:cover;
  background-position:center;
}

.prose{ width:100%; }
.prose h2{
  margin:0 0 30px;
  padding:0 0 0 20px;
  border-left:4px solid var(--c-primary);
  font-size:36px;
  line-height:1.4;
  font-weight:700;
  color:var(--c-ink);
}
.prose h3{
  margin:10px 0;
  font-size:28px;
  line-height:1.5;
  font-weight:700;
  color:var(--c-nav);
}
.prose p{
  /* 段落間は行間の2.5倍。1.5倍だと段落の切れ目が行送りに埋もれる */
  margin:25px 0;
  font-size:20px;
  line-height:1.5;
  font-weight:500;
  color:var(--c-nav);
}
.prose h2 + h3{ margin-top:0; }

.article__foot{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:64px 0 0;
  border-top:1px solid var(--c-gray);
}

/* ==========================================================================
   LEGAL PAGE  (privacy policy / terms)
   Reference layout: main padding 160/60, gap 60, no card, h2 28px, body 20px.
   Line-height is opened up from the reference's 28px because this page carries
   a full 16-article document rather than the template's few dummy lines.
   ========================================================================== */
.legal-main{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:60px;
  padding:160px 60px;
}
.legal-main__head{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.legal-main__title{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
  width:100%;
  padding-top:16px;
}

.legal{ width:100%; }
.legal__lead{
  font-size:15px;
  line-height:1.9;
  font-weight:500;
  color:var(--c-nav);
}
.legal__art + .legal__art{ margin-top:56px; }
.legal__art h2{
  margin:0 0 20px;
  font-size:28px;
  line-height:1.5;
  font-weight:700;
  color:var(--c-ink);
}
.legal p{
  margin:0 0 16px;
  font-size:20px;
  line-height:1.9;
  font-weight:500;
  color:var(--c-nav);
}
.legal p:last-child{ margin-bottom:0; }

/* numbered clauses */
.legal__ol{
  margin:0 0 16px;
  padding:0;
  list-style:none;
  counter-reset:clause var(--clause-start, 0);
}
.legal__ol > li{
  counter-increment:clause;
  position:relative;
  padding-left:2.4em;
  margin-bottom:14px;
  font-size:20px;
  line-height:1.9;
  font-weight:500;
  color:var(--c-nav);
}
.legal__ol > li::before{
  content:counter(clause) ".";
  position:absolute;
  left:0;
  top:0;
  width:2em;
  font-family:var(--ff-pop);
  font-weight:600;
  color:var(--c-primary);
}
.legal__ol > li:last-child{ margin-bottom:0; }

/* (1) (2) (3) sub-clauses */
.legal__sub{
  margin:16px 0 0;
  padding:0;
  list-style:none;
  counter-reset:sub;
}
.legal__sub > li{
  counter-increment:sub;
  position:relative;
  padding-left:3em;
  margin-bottom:16px;
}
.legal__sub > li::before{
  content:"(" counter(sub) ")";
  position:absolute;
  left:0;
  top:0;
  font-family:var(--ff-pop);
  font-weight:600;
  color:var(--c-primary);
}
.legal__subhead{
  display:block;
  font-size:20px;
  line-height:1.9;
  font-weight:700;
  color:var(--c-ink);
}
.legal__sub p{ margin:4px 0 0; }

/* plain bullet list */
.legal__ul{ margin:0 0 16px; padding:0; list-style:none; }
.legal__ul > li{
  position:relative;
  padding-left:1.4em;
  margin-bottom:10px;
  font-size:20px;
  line-height:1.9;
  font-weight:500;
  color:var(--c-nav);
}
.legal__ul > li::before{
  content:"";
  position:absolute;
  left:0;
  top:.78em;
  width:8px; height:8px;
  border-radius:50%;
  background-image:var(--grad);
}

/* contact block in the final article */
.legal__contact{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0 0 16px;
  padding:28px 32px;
  background:var(--c-tint);
  border-radius:16px;
}
.legal__contact dt{
  font-size:14px;
  font-weight:700;
  color:var(--c-muted);
}
.legal__contact dd{
  margin:0 0 8px;
  font-size:18px;
  line-height:1.7;
  font-weight:500;
  color:var(--c-nav);
}
.legal__contact dd:last-child{ margin-bottom:0; }
.legal__contact a{
  background-image:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  border-bottom:1px solid var(--c-primary);
}

.legal__date{
  margin-top:56px;
  padding-top:32px;
  border-top:1px solid var(--c-gray);
  font-family:var(--ff-pop);
  font-size:16px;
  font-weight:600;
  color:var(--c-muted);
}

/* ==========================================================================
   SERVICE PAGE
   Reference block: padding 100/30, bg #f1f3fa, br 12, gap 80; name 64px
   gradient over a 16px EN line; two-column row (media 428 + copy) gap 40;
   then a numbered feature grid. Built for a single service, so the
   "Service 01 / 02 ..." counter of the reference is dropped.
   ========================================================================== */
.page-hero--lead{ gap:48px; }
.page-hero__lead{
  position:relative;
  z-index:2;
  width:100%;
  font-size:24px;
  line-height:1.3;
  font-weight:600;
  color:var(--c-white);
}



.svc__head{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
}
.svc__label{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
  font-size:14px;
  line-height:1.5;
  font-weight:700;
  color:var(--c-nav);
}
.svc__label .eyebrow__dot{ width:16px; height:16px; }
.svc__name{
  font-size:64px;
  line-height:1.2;
  font-weight:700;
}
.svc__en{
  font-family:var(--ff-en);
  font-size:16px;
  line-height:1.5;
  font-weight:600;
  color:var(--c-muted);
}

/* full-width concept banner under the service name */
.svc__banner{
  width:100%;
  margin:0;
  border-radius:8px;
  overflow:hidden;
  background:var(--c-white);
}
.svc__banner img{
  display:block;
  width:100%;
  height:auto;
}

/* no column image: the copy spans the block */
.svc__copy{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:40px;
  min-width:0;
}
.svc__tagline{
  font-size:36px;
  line-height:1.5;
  font-weight:700;
  color:var(--c-ink);
}
.svc__desc{
  font-size:18px;
  line-height:1.7;
  font-weight:600;
  color:var(--c-ink);
}

.svc__features{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
}
/* heading sits on the shared .h-grad scale, like every other section head */
.svc__features-title{ font-family:var(--ff-en); }
.feats{
  width:100%;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:40px;
}
.feat{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
}
.feat__head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:0 0 16px;
}
.feat__num{
  font-family:var(--ff-pop);
  font-size:15px;
  line-height:1.5;
  font-weight:600;
  color:var(--c-muted);
}
.feat__title{
  font-size:20px;
  line-height:1.5;
  font-weight:700;
  color:var(--c-ink);
}
.feat__desc{
  font-size:16px;
  line-height:1.5;
  font-weight:600;
  color:#333;
}

/* ---------- Features: numbered mini sections -----------------------------
   Layout reference: oversized index number, two-tone heading, body copy,
   a pair of actions, and a tinted image card on the opposite side.
   ------------------------------------------------------------------------ */
.minis{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:0;
}
.mini{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:72px;
  padding:64px 0;
  border-bottom:1px solid var(--c-line);
}
.mini:first-child{ padding-top:24px; }
.mini:last-child{ border-bottom:0; padding-bottom:0; }

.mini__body{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
}
.mini__num{
  font-family:var(--ff-pop);
  font-size:88px;
  line-height:.9;
  font-weight:700;
  letter-spacing:-.02em;
  background-image:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mini__title{
  font-size:30px;
  line-height:1.45;
  font-weight:700;
  color:var(--c-ink);
}
.mini__title em{
  display:block;
  font-style:normal;
  background-image:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mini__desc{
  font-size:16px;
  line-height:1.75;     /* 行間を詰めて、段落の切れ目を相対的に際立たせる */
  font-weight:500;
  color:var(--c-muted);
}
/* 段落間は行間よりはっきり広く取る。
   行間と同程度だと、まとまりの境目が読み取れなくなる */
.mini__desc p + p{ margin-top:1.1em; }
.svc__desc p + p{ margin-top:1.2em; }

/* compact buttons - kept pill-shaped to match the rest of the site */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:0 28px;
  border-radius:999px;
  font-size:15px;
  font-weight:700;
  transition:filter var(--dur) var(--ease), transform var(--dur) var(--ease),
             background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover{ transform:translateY(-1px); }
.btn--solid{
  background-image:var(--grad);
  color:var(--c-white);
  box-shadow:0 6px 16px rgba(36,122,233,.22);
}
.btn--solid:hover{ filter:brightness(1.06); }

/* image card on the opposite side */
.mini__media{
  flex:0 0 46%;
  max-width:46%;
  aspect-ratio:16 / 11;
  border-radius:16px;
  background-color:var(--c-tint);
  background-image:var(--mini-img, none);
  background-size:cover;
  background-position:center;
  display:grid;
  place-items:center;
}
/* placeholder marker shown until --mini-img is set */
.mini:nth-child(even){ flex-direction:row-reverse; }
.mini__media::after{
  content:"仮素材";
  font-family:var(--ff-pop);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--c-line);
}
.mini__media[style*="--mini-img"]::after{ content:none; }

/* ---------- Flow: bordered step cards ----------------------------------- */
.flow{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:24px;
  counter-reset:step;
  /* 矢印の位置を円とカード余白から算出するため変数化 */
  --flow-icon:128px;
  --flow-pad-x:48px;
  --flow-pad-y:40px;
}
.flow__step{
  counter-increment:step;
  position:relative;
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:48px;
  padding:var(--flow-pad-y) var(--flow-pad-x);
  background:var(--c-white);
  border:1px solid var(--c-line);
  border-radius:12px;
}
/* 次の工程へ続くことを示す三角。カード間ではなくカードの内側、円の真下に置く。
   left は「カード左余白 + 円の半径」で円の中心に正確に合わせる */
.flow__step:not(:last-child)::after{
  content:"";
  position:absolute;
  left:calc(var(--flow-pad-x) + var(--flow-icon) / 2);
  top:calc(var(--flow-pad-y) + var(--flow-icon) + 27px);
  transform:translateX(-50%);
  width:0; height:0;
  border-left:12px solid transparent;
  border-right:12px solid transparent;
  border-top:21px solid var(--c-primary);
}

.flow__icon{
  flex:0 0 auto;
  /* 直径は見出しブロック（STEP〜罫線）の高さに一致させる。
     半端にずれると「揃いそうで揃っていない」状態になり崩れて見える */
  width:var(--flow-icon);
  height:var(--flow-icon);
  border-radius:50%;
  border:8px solid var(--c-primary);
  background:var(--c-white);
  background-image:var(--step-img, none);
  background-size:cover;
  background-position:center;
  display:grid;
  place-items:center;
  font-family:var(--ff-pop);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--c-line);
}
.flow__icon::after{ content:"仮素材"; }
.flow__icon[style*="--step-img"]::after{ content:none; }

.flow__body{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
}
.flow__label{
  font-family:var(--ff-pop);
  font-size:17px;
  font-weight:700;
  letter-spacing:.04em;
  background-image:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.flow__label::before{ content:"STEP " counter(step); }
/* STEP n → 工程名 → 要約 の3階層。工程名を主役にする */
.flow__title{
  margin:4px 0 0;
  width:100%;
  font-size:26px;
  line-height:1.4;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--c-ink);
}
.flow__sub{
  width:100%;
  margin:8px 0 0;
  padding:0 0 25px;
  border-bottom:1px solid var(--c-line);
  font-size:15px;
  line-height:1.6;
  font-weight:600;
  color:var(--c-muted);
}
.flow__desc{
  margin:18px 0 0;
  font-size:16px;
  line-height:1.9;
  font-weight:500;
  color:var(--c-nav);
}
.flow__desc strong{ font-weight:700; color:var(--c-ink); }
.flow__actions{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  padding-top:24px;
}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--reveal-delay, 0ms);
}
[data-reveal].is-visible{ opacity:1; transform:none; }

/* ==========================================================================
   RESPONSIVE  —  breakpoints taken from the reference: 1140 / 840 / 540 / 320
   ========================================================================== */
@media screen and (max-width:1140px){
  /* FB: ヘッダーを詰めた分、切り欠きもロゴに追従させる */
  .hero-notch{ width:180px; height:82px; }
  .gnav{ gap:24px; padding:10px; }
  .gnav__link{ font-size:15px; }
  .hero{ padding:40px; }
  .h-grad{ font-size:72px; }
  .card{ padding:96px 48px; }
  .gallery__item{ flex-basis:320px; height:400px; }


  /* FB: 下層ヒーローの余白が過大 */
  .page-hero{ padding:150px 40px 40px; gap:120px; }

  .svc-brief{ gap:52px; }
  .svc-brief__row{ gap:36px 48px; }
  .svc-brief__name{ font-size:40px; }
  .svc-brief__tagline{ font-size:24px; }

  .page-hero__lead{ font-size:21px; }
  .mini{ gap:48px; padding:52px 0; }
  .mini__num{ font-size:72px; }
  .mini__title{ font-size:26px; }
  .flow{ --flow-icon:120px; --flow-pad-x:32px; --flow-pad-y:32px; }
  .flow__step{ gap:32px; }
  .flow__icon{ border-width:7px; }
  .flow__sub{ padding-bottom:24px; }
  .flow__title{ font-size:22px; }
  .flow__sub{ font-size:14px; }

  .contact-main{ padding:120px 40px 80px; }
  .form{ padding:48px 40px; }

  .legal-main{ padding:120px 40px; }
  .legal__art h2{ font-size:24px; }
  .legal p,.legal__ol > li,.legal__ul > li,.legal__subhead{ font-size:18px; }

  .posts{ gap:72px 32px; padding:48px; }
  .page-title,
  .page-hero__title,
  .contact-main__title{ font-size:80px; }
  .svc__name{ font-size:52px; }
  .article{ padding:80px; }
  .article__title{ font-size:40px; }
  .prose h2{ font-size:32px; }
  .prose h3{ font-size:24px; }

  .footer{ gap:80px; padding:100px 40px; }
  .footer__shell{ padding:0 20px; }
}

@media screen and (max-width:840px){
  /* 地図は高さ固定のままだと幅が狭まるほど縦長になりすぎる */
  .map{ height:420px; }

  :root{ --gutter:30px; }

  /* desktop nav -> burger */
  .header__nav,
  .btn-head{ display:none; }
  .burger{ display:grid; }
  .header{ height:72px; }
  .header__logo{ padding:0; }
  .logo{ height:40px; }

  /* FB: ロゴが左上に寄り、右に78pxの空白が出ていた */
  /* 切り欠きは下端と右端のみ可視（上・左は白余白に接する）。
     画面角まで広げ、ロゴ左端を本文のガターに揃える */
  .hero-notch{ inset:0 auto auto 0; width:166px; height:98px; }
  .hero__title{ font-size:48px; }
  .hero__kicker{ font-size:14px; }
  .hero__head{ margin:24px 0 44px; }

  .card{ padding:80px 32px; gap:40px; }
  .card--tint{ gap:48px; }
  .card__body{ gap:40px; }
  .card__body--center{ gap:48px; }

  .h-grad{ font-size:48px; }
  .svc-brief{ gap:40px; }
  .svc-brief__row{ grid-template-columns:1fr; gap:28px; }
  .svc-brief__name{ font-size:32px; }
  .svc-brief__tagline{ font-size:21px; margin-top:16px; padding-top:16px; }
  .svc-brief__body{ padding-top:0; gap:24px; }
  .svc-brief__desc{ font-size:15px; }


  .news__link{
    grid-template-columns:auto 1fr auto;
    gap:12px 16px;
    padding:20px 4px;
  }
  .news__title{ grid-column:1 / 3; font-size:15px; }

  .gallery__item{ flex-basis:260px; height:320px; margin:0 8px; }

  .page-hero{ padding:120px 32px 32px; gap:72px; }
  .page-hero__lead{ font-size:17px; }
  .feats,.flow{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
  .mini,.mini:nth-child(even){ flex-direction:column; align-items:stretch; gap:28px; padding:40px 0; }
  .mini__media{ flex:0 0 auto; max-width:none; width:100%; aspect-ratio:16/9; order:-1; }
  .mini__num{ font-size:56px; }
  .mini__title{ font-size:22px; }

  .flow{ gap:28px; }
  .flow{ --flow-icon:112px; --flow-pad-x:24px; --flow-pad-y:28px; }
  .flow__step{ flex-direction:column; align-items:flex-start; gap:24px; }
  .flow__icon{ border-width:6px; }
  .flow__sub{ padding-bottom:19px; }
  /* 縦並びでは円の真下に本文が来るため、矢印はカード間の中央に置く */
  .flow__step:not(:last-child)::after{ left:50%; top:auto; bottom:-22px; }
  .flow__title{ font-size:20px; }
  .flow__sub{ font-size:14px; }

  /* FB: 余白だけで左右120pxを占有し、狭幅でフォームが潰れていた */
  .contact-main{ padding:100px 30px 64px; align-items:stretch; gap:48px; }
  .form{ padding:40px 28px; gap:32px; }

  .legal-main{ padding:100px 30px; gap:48px; }
  .legal__art + .legal__art{ margin-top:44px; }
  .legal__art h2{ font-size:21px; }
  .legal p,.legal__ol > li,.legal__ul > li,.legal__subhead{ font-size:16px; }
  .legal__contact{ padding:24px; }

  .deflist__row{ gap:32px; }

  .list-main{ padding:100px 30px; gap:48px; }
  .posts{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:56px 24px; padding:32px; }
  .page-title,
  .page-hero__title,
  .contact-main__title{ font-size:60px; }
  .svc__name{ font-size:40px; }
  .article{ padding:48px 32px; gap:48px; }
  .article__title{ font-size:32px; }
  .prose h2{ font-size:26px; }
  .prose h3{ font-size:20px; }
  .prose p{ font-size:17px; }
  .article-main > .crumbs{ padding:0 30px; }

  .footer{ gap:60px; padding:80px 30px; }
  .footer__shell{ padding:0; }
  .fnav{ gap:32px 40px; padding:0; }
  .fnav__en{ font-size:18px; }
}

@media screen and (max-width:540px){
  /* ここからは高さ固定をやめ、幅に対して 4:3 を保つ */
  .map{ height:auto; aspect-ratio:4 / 3; }

  :root{ --gutter:15px; }

  /* FB: ロゴが切り欠きの右下に寄っていたため両者の基準を揃える */
  .hero-notch{ inset:0 auto auto 0; width:133px; height:80px; }
  .header{ height:72px; }
  .header__logo{ padding:0; }
  /* FB: 86vh では画面下に余白が残るため全高に。
     dvh はツールバーの出入りに追従し、vh のようにバー裏へ潜らない */
  .section--hero .section__inner{ height:100vh; height:100dvh; }
  .hero{ padding:15px; clip-path:inset(0 round 16px); }
  .hero__title{ font-size:40px; }
  .hero__kicker{ font-size:12px; }
  .hero__head{ margin:16px 0 32px; }

  /* ticker spans the card width on mobile */
  .ticker{
    right:24px;
    left:24px;
    bottom:24px;
    width:auto;
  }
  .ticker__card{ flex-basis:100%; }

  .logo{ height:34px; }
  .card{ padding:64px 24px; border-radius:16px; }
  .h-grad{ font-size:36px; }
  .svc-brief{ gap:32px; }
  .svc-brief__name{ font-size:26px; }
  .svc-brief__tagline{ font-size:18px; }
  .lead{ font-size:15px; }
  .eyebrow{ font-size:14px; }


  /* FB: 全幅に伸ばすと間延びするため実寸に戻す */
  .pill{ width:258px; padding:20px 20px 20px 28px; }

  /* FB: タグを日付と同じ行の右端ではなく、日付の下に置く
         1列目に 日付 → タグ → 見出し を積み、矢印は見出しの右 */
  .news__link{
    grid-template-columns:1fr auto;
    gap:8px 12px;
    align-items:center;
    padding:20px 4px;
  }
  .news__date{ grid-area:1 / 1 / 2 / 2; justify-self:start; font-size:13px; }
  .news__cat{  grid-area:2 / 1 / 3 / 2; justify-self:start; }
  .news__title{ grid-area:3 / 1 / 4 / 2; }
  .news__link .icon-circle{ grid-area:3 / 2 / 4 / 3; }

  .gallery__item{ flex-basis:200px; height:250px; }

  /* FB: 切り欠き下端79px と白文字の間が24pxしかなく近すぎた */
  .page-hero{ padding:112px 20px 24px; gap:48px; }
  .page-hero--lead{ gap:28px; }
  .anchors__item{ padding:0 8px; min-width:120px; }
  .page-hero__lead{ font-size:15px; }
  .feats,.flow{ grid-template-columns:1fr; gap:24px; }
  .mini,.mini:nth-child(even){ padding:32px 0; gap:22px; }
  .mini__num{ font-size:46px; }
  .mini__title{ font-size:19px; }
  .mini__desc{ font-size:15px; }

  .flow{ --flow-icon:96px; --flow-pad-x:20px; --flow-pad-y:20px; }
  .flow__icon{ border-width:6px; }
  .flow__title{ font-size:18px; }
  .flow__sub{ font-size:13px; padding-bottom:14px; }
  .flow__desc{ font-size:15px; }
  .flow__actions{ width:100%; }
  .flow__actions .btn{ flex:1 1 100%; justify-content:center; }

  /* FB: 固定ヘッダー下端が79px。上余白80pxでは1pxしか空かず密度過剰だった */
  .contact-main{ padding:112px 15px 56px; gap:32px; }
  /* 枠線付きのカードになったので、左右を 0 にすると入力欄が枠に接する */
  .form{ padding:24px 18px; gap:28px; border-radius:16px; }
  .field__control{ font-size:16px; }   /* iOSの自動ズーム防止 */
  textarea.field__control{ height:140px; }
  .consent__row span{ font-size:13px; }
  .submit{ width:100%; max-width:258px; }

  .legal-main{ padding:112px 15px; gap:40px; }

  /* FB: 中央寄せで上下に余白が溜まり不自然だった */
  .drawer{ place-items:start stretch; padding:96px 15px 40px; }
  .drawer__list{ max-width:none; gap:0; }
  .drawer__list a{ justify-content:space-between; align-items:center; padding:20px 0; }
  .drawer__en{ font-size:26px; }
  .legal__art h2{ font-size:19px; }
  .legal p,.legal__ol > li,.legal__ul > li,.legal__subhead{ font-size:15px; }
  .legal__ol > li{ padding-left:2em; }
  .legal__sub > li{ padding-left:2.6em; }
  .legal__contact{ padding:20px; }
  .legal__contact dd{ font-size:16px; word-break:break-all; }

  /* FB: 列間64pxが狭幅では広すぎ、役員行が293pxまで伸びていた */
  .deflist__row{
    grid-template-columns:1fr;
    gap:6px;
    padding:16px 0;
    align-items:start;
  }
  /* FB: ラベルと値の差が小さく平板だったため、
         サイズ・太さ・濃さの3点で差をつける */
  .deflist__key{
    font-size:12px;
    font-weight:700;
    letter-spacing:.06em;
    color:var(--c-muted);
  }
  .deflist__val{
    font-size:17px;
    font-weight:700;
    line-height:1.7;
    color:var(--c-ink);
  }
  .officers li{
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
  }
  .officers__role{ min-width:0; font-size:11px; letter-spacing:.06em; }
  .officers__name{ font-size:17px; font-weight:700; color:var(--c-ink); }
  .officers{ gap:14px; }

  .list-main{ padding:112px 15px 80px; gap:40px; }
  /* FB: 見出し15px に対しカード内容35px で左端がずれていた */
  .posts{ grid-template-columns:1fr; gap:40px; padding:20px 0; }
  .page-title,
  .page-hero__title,
  .contact-main__title{ font-size:44px; }
  .svc__name{ font-size:30px; }
  .article{ padding:32px 0; gap:40px; border-radius:16px; }
  .article__head{ gap:24px; padding:0 0 24px; }
  .article__title{ font-size:26px; }
  .prose h2{ font-size:22px; margin-bottom:20px; }
  .prose h3{ font-size:18px; }
  .prose p{ font-size:16px; }
  .article__foot{ padding:40px 0 0; }
  .crumbs__current{ max-width:140px; }
  /* FB: パンくずがヘッダーに重なっていた */
  .article-main{ padding-top:136px; }   /* 他ページと同じ 57px のクリアランスに揃える */
  .article-main > .crumbs{ padding:0 15px; }

  .footer{ gap:40px; padding:60px 15px; }
  .footer__top{ gap:32px; }
  .fnav{ gap:24px 32px; }
  .fnav__en{ font-size:17px; }
}

@media screen and (max-width:320px){
  .hero__title{ font-size:32px; }
  .h-grad{ font-size:32px; }
  .page-title,
  .page-hero__title,
  .contact-main__title{ font-size:36px; }
  .svc__name{ font-size:26px; }
  .card{ padding:56px 18px; }
  .pill{ padding:18px; }
}

/* touch devices : no hover roll */
@media (hover:none),(pointer:coarse){
  :is(a, button):hover .roll__base{ transform:none; }
  :is(a, button):hover .roll__over{ transform:translateY(100%); }
  .pill:hover,.btn-head:hover,.post__link:hover .post__thumb{ transform:none; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
  .ticker__track,
  .gallery__track{ transform:none !important; }
  /* no moving footage: the poster frame stands in */
  .hero__video{ display:none; }
}