@charset "utf-8";

/* =========================================================
   訪問看護ステーションひなた  ―  日だまり × 暮らしを看る
   UI DNA: ハッピーウッド(名張) を忠実土台に世界水準へ翻案
   PC 900px〜 / タブレット 〜899px / モバイル 〜767px
========================================================= */

:root{
  /* 日だまりの生成り */
  --cream:      #FBF7EF;
  --cream-2:    #F4ECDD;
  --cream-3:    #EFE6D3;
  --white:      #FEFCF8;
  /* 墨 */
  --sumi:       #2B2620;
  --sumi-soft:  #6E6558;
  --sumi-faint: #9A9186;
  /* 日だまりの陽（signature） */
  --amber:      #DD8E33;
  --amber-soft: #EBB673;
  --amber-cta:  #A85E12;   /* 白文字でAA */
  --amber-wash: #FBEFDC;
  /* やわらか緑（在宅・安心・信頼） */
  --sage:       #4F9E82;
  --sage-deep:  #2F7D63;
  --sage-wash:  #E8F1EC;
  /* 人の温もり（看取り・こころ / ごく控えめ） */
  --rose:       #DD8578;
  /* 罫 */
  --line:       #E7DFCE;
  --line-2:     #DED4BF;

  --maxw: 1160px;
  --ease:       cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --radius:     14px;
  --header-h:   96px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--sumi);
  font-family:"Noto Sans JP",system-ui,sans-serif;
  font-weight:400;
  line-height:1.95;
  letter-spacing:.02em;
  font-feature-settings:"palt";
  text-wrap:pretty;
  line-break:strict;
  word-break:normal;
  overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
button{ font:inherit; color:inherit; cursor:pointer; border:none; background:none; }
:focus-visible{ outline:2.5px solid var(--sage-deep); outline-offset:3px; border-radius:3px; }

.serif{ font-family:"Noto Serif JP",serif; }
.en{ font-family:"Figtree",sans-serif; }

/* skip link */
.skip{ position:absolute; left:-999px; top:0; z-index:2000;
  background:var(--sumi); color:#fff; padding:10px 18px; border-radius:0 0 8px 0; }
.skip:focus{ left:0; }

/* ---------- layout ---------- */
.container{ width:min(100% - 48px, var(--maxw)); margin-inline:auto; }
.container-narrow{ width:min(100% - 48px, 900px); margin-inline:auto; }
.section{ padding:clamp(64px,9vw,128px) 0; position:relative; }
.section--cream2{ background:var(--cream-2); }
.section--white{ background:var(--white); }
.section--tight{ padding:clamp(48px,6vw,84px) 0; }

/* ---------- section heading ---------- */
.eyebrow{
  font-family:"Figtree",sans-serif;
  font-size:.72rem; font-weight:600; letter-spacing:.28em;
  text-transform:uppercase; color:var(--sage-deep);
  display:inline-flex; align-items:center; gap:12px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--amber); }
.eyebrow--center{ justify-content:center; }
.eyebrow--center::after{ content:""; width:26px; height:1px; background:var(--amber); }
.eyebrow--light{ color:var(--amber-soft); }
.eyebrow--light::before,.eyebrow--light::after{ background:var(--amber-soft); }

.head{
  font-family:"Noto Serif JP",serif; font-weight:600;
  font-size:clamp(1.7rem,3.4vw,2.55rem); line-height:1.5;
  color:var(--sumi); letter-spacing:.02em; margin-top:22px;
}
.head--center{ text-align:center; }
.head .accent{ color:var(--amber-cta); }
.head-line{ margin-top:26px; }
.head-line::after{
  content:""; display:block; width:64px; height:2px;
  background:var(--sage-deep); margin-top:26px;
}
.head--center.head-line::after{ margin-inline:auto; }
.lead-p{
  margin-top:30px; color:var(--sumi-soft); font-size:1.02rem; line-height:2.15;
}
.head--center + .lead-p{ text-align:center; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  font-weight:500; font-size:.98rem; letter-spacing:.06em;
  padding:17px 34px; border-radius:999px; position:relative;
  transition:transform .45s var(--ease), background .3s var(--ease), box-shadow .45s var(--ease), color .3s;
  will-change:transform;
}
.btn i{ transition:transform .45s var(--ease); }
.btn:hover{ transform:translateY(-3px); }
.btn:hover i{ transform:translateX(4px); }
.btn--sun{ background:var(--amber-cta); color:#fff;
  box-shadow:0 10px 24px rgba(168,94,18,.22); }
.btn--sun:hover{ background:#94500F; box-shadow:0 16px 34px rgba(168,94,18,.28); }
.btn--sage{ background:var(--sage-deep); color:#fff;
  box-shadow:0 10px 24px rgba(47,125,99,.22); }
.btn--sage:hover{ background:#256B54; }
.btn--ghost{ border:1.5px solid var(--line-2); color:var(--sumi); background:var(--white); }
.btn--ghost:hover{ border-color:var(--sage); color:var(--sage-deep); }
.btn--on-dark{ border:1.5px solid rgba(255,255,255,.55); color:#fff; }
.btn--on-dark:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.btn-arrow-svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; }

/* arrow icon (inline svg via ::after not possible; use span) */

/* =========================================================
   HEADER
========================================================= */
.header{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  height:var(--header-h); padding:0 clamp(20px,3vw,44px);
  transition:background .4s var(--ease), height .4s var(--ease), box-shadow .4s var(--ease);
}
.header.is-solid{ background:rgba(251,247,239,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  height:74px; box-shadow:0 1px 0 var(--line), 0 10px 30px rgba(43,38,32,.05); }
/* nav展開中はheaderのbackdrop-filterを解除（fixedドロワーの基準枠がheaderに閉じ込められる問題を回避） */
body.nav-open .header{ backdrop-filter:none; -webkit-backdrop-filter:none; }
.logo{ display:flex; flex-direction:column; line-height:1.15; }
.logo .logo-sub{ font-size:.66rem; letter-spacing:.24em; color:var(--sage-deep); font-weight:500; }
.logo .logo-main{ font-family:"Noto Serif JP",serif; font-weight:700;
  font-size:1.5rem; letter-spacing:.16em; color:var(--sumi); display:flex; align-items:baseline; gap:8px; }
.logo .logo-main .en{ font-size:.7rem; letter-spacing:.2em; color:var(--amber); font-weight:600; transform:translateY(-2px); }
.header.is-hero:not(.is-solid) .logo .logo-sub{ color:rgba(255,255,255,.82); }
.header.is-hero:not(.is-solid) .logo .logo-main{ color:#fff; }
.header.is-hero:not(.is-solid) .logo .logo-main .en{ color:var(--amber-soft); }

.gnav{ display:flex; align-items:center; gap:clamp(14px,2vw,30px); }
.gnav a.navlink{ font-size:.92rem; font-weight:500; letter-spacing:.04em; position:relative; padding:6px 2px; color:var(--sumi); }
.gnav a.navlink::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:1.5px;
  background:var(--sage-deep); transition:width .4s var(--ease); }
.gnav a.navlink:hover::after{ width:100%; }
.header.is-hero:not(.is-solid) .gnav a.navlink{ color:rgba(255,255,255,.92); }
.header.is-hero:not(.is-solid) .gnav a.navlink::after{ background:#fff; }

.nav-tel{ display:flex; align-items:center; gap:12px; padding-left:clamp(10px,1.6vw,22px); }
.nav-tel .tel-block{ text-align:right; line-height:1.2; }
.nav-tel .tel-label{ font-size:.6rem; letter-spacing:.16em; color:var(--sage-deep); font-weight:600; }
.nav-tel .tel-num{ font-family:"Figtree",sans-serif; font-weight:600; font-size:1.16rem; letter-spacing:.02em; color:var(--sumi); }
.header.is-hero:not(.is-solid) .nav-tel .tel-label{ color:var(--amber-soft); }
.header.is-hero:not(.is-solid) .nav-tel .tel-num{ color:#fff; }
.nav-cta{ background:var(--amber-cta); color:#fff; font-size:.82rem; font-weight:500; letter-spacing:.06em;
  padding:11px 20px; border-radius:999px; display:inline-flex; align-items:center; gap:8px;
  transition:background .3s, transform .4s var(--ease); }
.nav-cta:hover{ background:#94500F; transform:translateY(-2px); }

.burger{ display:none; width:30px; height:24px; position:relative; z-index:1200; }
.burger span{ position:absolute; left:0; height:2px; width:100%; background:var(--sumi); transition:.35s var(--ease); border-radius:2px; }
.burger span:nth-child(1){ top:2px; } .burger span:nth-child(2){ top:11px; } .burger span:nth-child(3){ top:20px; }
.header.is-hero:not(.is-solid) .burger span{ background:#fff; }
body.nav-open .burger span{ background:var(--sumi); }
body.nav-open .burger span:nth-child(1){ top:11px; transform:rotate(45deg); }
body.nav-open .burger span:nth-child(2){ opacity:0; }
body.nav-open .burger span:nth-child(3){ top:11px; transform:rotate(-45deg); }

/* =========================================================
   HERO  (inset Ken Burns carousel)
========================================================= */
.hero{ position:relative; padding:14px 14px 0; }
.hero-frame{ position:relative; height:min(88vh,760px); min-height:540px; border-radius:26px; overflow:hidden; }
.hero-slides{ position:absolute; inset:0; }
.hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.8s var(--ease); }
.hero-slide.is-active{ opacity:1; }
.hero-slide .bg{ position:absolute; inset:-3%; background-size:cover; background-position:center; }
.hero-slide.is-active .bg{ animation:kenburns 12s linear both; }
@keyframes kenburns{ from{ transform:scale(1);} to{ transform:scale(1.12);} }
.hero-frame::after{ content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(100deg, rgba(43,32,20,.62) 0%, rgba(43,32,20,.32) 42%, rgba(43,32,20,.12) 72%),
             linear-gradient(0deg, rgba(43,32,20,.34), rgba(43,32,20,0) 40%); }

/* placeholder tone until real photos drop in */
.hero-slide.ph1 .bg{ background-color:#6f7c66; background-image:linear-gradient(135deg,#7d8a70,#5a6553); }
.hero-slide.ph2 .bg{ background-color:#b98b57; background-image:linear-gradient(135deg,#caa06a,#9a6d3e); }
.hero-slide.ph3 .bg{ background-color:#7f8a86; background-image:linear-gradient(135deg,#939d98,#68716d); }

.hero-inner{ position:absolute; z-index:3; left:clamp(24px,5vw,74px); bottom:clamp(48px,8vw,96px);
  right:clamp(24px,5vw,74px); color:#fff; }
.hero-eyebrow{ font-family:"Figtree",sans-serif; font-size:.74rem; font-weight:600; letter-spacing:.32em;
  text-transform:uppercase; color:var(--amber-soft); display:inline-flex; align-items:center; gap:12px; }
.hero-eyebrow::before{ content:""; width:34px; height:1px; background:var(--amber-soft); }
.hero-h1{ font-family:"Noto Serif JP",serif; font-weight:600; margin-top:26px;
  font-size:clamp(2.1rem,5.6vw,4rem); line-height:1.42; letter-spacing:.03em;
  text-shadow:0 2px 30px rgba(0,0,0,.28); }
.hero-h1 .soft{ color:var(--amber-soft); }
.hero-sub{ margin-top:24px; max-width:36em; font-size:clamp(.96rem,1.5vw,1.08rem); line-height:2.1;
  color:rgba(255,255,255,.92); text-shadow:0 2px 16px rgba(0,0,0,.3); }
.hero-actions{ margin-top:38px; display:flex; flex-wrap:wrap; gap:16px; }

.hero-dots{ position:absolute; z-index:3; right:clamp(24px,5vw,74px); bottom:clamp(28px,5vw,50px); display:flex; gap:10px; }
.hero-dots button{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.45); transition:.3s; }
.hero-dots button.is-active{ background:#fff; width:26px; border-radius:5px; }

/* wave divider */
.wave{ display:block; width:100%; height:auto; margin-top:-2px; color:var(--cream); position:relative; z-index:4; }
.wave--white{ color:var(--white); }
.wave--cream2{ color:var(--cream-2); }

/* =========================================================
   LEAD / editorial module
========================================================= */
.module{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(36px,5vw,80px); align-items:center; }
.module--rev .module-media{ order:2; }
.module-media{ position:relative; }
.module-media .frame{ border-radius:22px; overflow:hidden; aspect-ratio:5/4; background:var(--cream-3);
  background-size:cover; background-position:center; box-shadow:0 30px 60px rgba(43,38,32,.10); }
.module-media .tag{ position:absolute; left:-14px; bottom:-16px; background:var(--white);
  padding:16px 22px; border-radius:14px; box-shadow:0 18px 40px rgba(43,38,32,.12);
  display:flex; align-items:center; gap:12px; }
.module-media .tag i{ color:var(--sage-deep); font-size:22px; }
.module-media .tag span{ font-family:"Noto Serif JP",serif; font-weight:600; font-size:.98rem; }
.module-body .quote{ font-family:"Noto Serif JP",serif; font-weight:600;
  font-size:clamp(1.3rem,2.4vw,1.8rem); line-height:1.85; margin-top:20px; }
.module-body p{ margin-top:26px; color:var(--sumi-soft); line-height:2.2; }

/* placeholder media tones */
.ph-warm{ background-image:linear-gradient(140deg,#e7cfa6,#cf9f66); }
.ph-sage{ background-image:linear-gradient(140deg,#cfe0d5,#9cc3b1); }
.ph-room{ background-image:linear-gradient(140deg,#e4dcc9,#c3b393); }

/* =========================================================
   STAT block (なぜ今)
========================================================= */
.stat-wrap{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,40px); margin-top:52px; }
.stat{ background:var(--white); border:1px solid var(--line); border-radius:20px; padding:clamp(28px,4vw,44px);
  text-align:center; position:relative; overflow:hidden; }
.stat::before{ content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--amber); }
.stat .num{ font-family:"Figtree",sans-serif; font-weight:700; line-height:1; color:var(--amber-cta);
  font-size:clamp(3rem,8vw,5.2rem); letter-spacing:-.01em; }
.stat .num .unit{ font-size:.4em; margin-left:4px; color:var(--sumi-soft); font-weight:600; }
.stat.is-sage .num{ color:var(--sage-deep); } .stat.is-sage::before{ background:var(--sage); }
.stat .cap{ margin-top:16px; font-size:.98rem; color:var(--sumi-soft); line-height:1.9; }
.stat-note{ margin-top:32px; text-align:center; font-size:.8rem; color:var(--sumi-faint); }

/* =========================================================
   STRENGTH grid  (Happywood dashed grid, elevated)
========================================================= */
.strength{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:56px;
  border:1px solid var(--line-2); border-radius:22px; overflow:hidden; background:var(--white); }
.strength li{ padding:clamp(30px,3.4vw,46px) clamp(24px,2.6vw,38px);
  border-right:1px dashed var(--line-2); border-bottom:1px dashed var(--line-2); position:relative;
  transition:background .4s var(--ease); }
.strength li:nth-child(3n){ border-right:none; }
.strength li:nth-child(n+4){}
.strength li:nth-last-child(-n+3){ border-bottom:none; }
.strength li:hover{ background:var(--amber-wash); }
.strength .no{ font-family:"Figtree",sans-serif; font-weight:600; font-size:.82rem; letter-spacing:.14em; color:var(--amber); }
.strength .ic{ width:52px; height:52px; margin:16px 0 20px; border-radius:14px; background:var(--sage-wash);
  display:flex; align-items:center; justify-content:center; color:var(--sage-deep); font-size:26px;
  transition:.5s var(--ease); }
.strength li:hover .ic{ transform:translateY(-4px); background:var(--sage); color:#fff; }
.strength h3{ font-family:"Noto Serif JP",serif; font-weight:600; font-size:1.18rem; line-height:1.6; }
.strength p{ margin-top:14px; font-size:.92rem; color:var(--sumi-soft); line-height:1.95; }

/* =========================================================
   SERVICE grid
========================================================= */
.svc{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,22px); margin-top:52px; }
.svc li{ background:var(--white); border:1px solid var(--line); border-radius:18px; padding:30px 20px; text-align:center;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s; }
.svc li:hover{ transform:translateY(-6px); box-shadow:0 24px 44px rgba(43,38,32,.09); border-color:var(--amber-soft); }
.svc .ic{ width:56px; height:56px; margin:0 auto 16px; border-radius:50%; background:var(--amber-wash);
  color:var(--amber-cta); display:flex; align-items:center; justify-content:center; font-size:26px; }
.svc h3{ font-size:1rem; font-weight:500; }
.svc p{ margin-top:8px; font-size:.82rem; color:var(--sumi-soft); line-height:1.7; }

/* =========================================================
   TARGET chips
========================================================= */
.target{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:48px; }
.target li{ background:var(--white); border:1px solid var(--line); border-radius:14px;
  padding:22px 26px; display:flex; align-items:center; gap:18px; transition:.4s var(--ease); }
.target li:hover{ border-color:var(--sage); background:var(--sage-wash); }
.target .ic{ flex:0 0 auto; width:40px; height:40px; border-radius:50%; background:var(--sage-wash);
  color:var(--sage-deep); display:flex; align-items:center; justify-content:center; font-size:20px; }
.target li:hover .ic{ background:var(--sage); color:#fff; }
.target p{ font-size:.98rem; line-height:1.7; }
.target-note{ margin-top:34px; text-align:center; font-family:"Noto Serif JP",serif; font-size:1.14rem; color:var(--sumi); }
.target-note .accent{ color:var(--amber-cta); }

/* =========================================================
   REASSURANCE band (24h)
========================================================= */
.band{ background:linear-gradient(120deg,#33564a,#2f7d63); color:#fff; border-radius:26px;
  padding:clamp(40px,5vw,64px); display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; position:relative; overflow:hidden; }
.band::before{ content:""; position:absolute; right:-60px; top:-60px; width:260px; height:260px; border-radius:50%;
  background:rgba(255,255,255,.06); }
.band .b-eyebrow{ color:var(--amber-soft); font-family:"Figtree",sans-serif; font-weight:600; letter-spacing:.28em; font-size:.72rem; text-transform:uppercase; }
.band h2{ font-family:"Noto Serif JP",serif; font-weight:600; font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.6; margin-top:18px; }
.band p{ margin-top:20px; color:rgba(255,255,255,.85); line-height:2; font-size:.98rem; }
.band-tel{ text-align:center; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  border-radius:20px; padding:32px; }
.band-tel .lbl{ font-size:.78rem; letter-spacing:.16em; color:var(--amber-soft); font-weight:600; }
.band-tel .num{ font-family:"Figtree",sans-serif; font-weight:700; font-size:clamp(1.8rem,4vw,2.5rem); margin-top:8px; letter-spacing:.02em; }
.band-tel .sub{ font-size:.82rem; color:rgba(255,255,255,.8); margin-top:6px; }

/* =========================================================
   FLOW steps
========================================================= */
.flow{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:52px; counter-reset:step; }
.flow li{ background:var(--white); border:1px solid var(--line); border-radius:18px; padding:30px 20px; position:relative; }
.flow li .st{ font-family:"Figtree",sans-serif; font-weight:700; font-size:.78rem; letter-spacing:.14em; color:var(--sage-deep); }
.flow li .st::before{ counter-increment:step; content:"STEP " counter(step,decimal-leading-zero); }
.flow li h3{ margin-top:14px; font-size:1rem; font-weight:500; font-family:"Noto Serif JP",serif; line-height:1.6; }
.flow li p{ margin-top:10px; font-size:.84rem; color:var(--sumi-soft); line-height:1.8; }
.flow li:not(:last-child)::after{ content:"\2192"; font-family:"Figtree",sans-serif; font-weight:700; position:absolute; right:-11px; top:50%;
  transform:translateY(-50%); color:var(--amber); font-size:20px; z-index:2; }
.price-note{ margin-top:40px; background:var(--amber-wash); border-radius:18px; padding:28px 32px;
  display:flex; gap:20px; align-items:flex-start; }
.price-note i{ color:var(--amber-cta); font-size:26px; flex:0 0 auto; margin-top:4px; }
.price-note p{ font-size:.94rem; color:var(--sumi); line-height:1.95; }
.price-note b{ font-weight:500; color:var(--amber-cta); }

/* =========================================================
   FULL-BLEED screen (about / recruit)
========================================================= */
.screen{ position:relative; border-radius:0; overflow:hidden; }
.screen-bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.screen-bg.ph-about{ background-image:linear-gradient(135deg,#8a7a5e,#5f5240); }
.screen-bg.ph-recruit{ background-image:linear-gradient(135deg,#4a6b5c,#33564a); }
.screen::after{ content:""; position:absolute; inset:0; background:rgba(35,30,22,.5); }
.screen-inner{ position:relative; z-index:2; color:#fff; text-align:center; padding:clamp(72px,11vw,150px) 24px; }
.screen-inner .head{ color:#fff; }
.screen-inner p{ color:rgba(255,255,255,.9); max-width:40em; margin:28px auto 0; line-height:2.15; }
.screen-inner .btn{ margin-top:40px; }

/* =========================================================
   MESSAGE preview
========================================================= */
.msg{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px,5vw,72px); align-items:center; }
.msg-media .frame{ aspect-ratio:4/5; border-radius:22px; overflow:hidden; background-size:cover; background-position:center;
  box-shadow:0 30px 60px rgba(43,38,32,.12); }
.msg-body .quote{ font-family:"Noto Serif JP",serif; font-weight:600; font-size:clamp(1.4rem,2.6vw,2rem); line-height:1.8; }
.msg-body p{ margin-top:26px; color:var(--sumi-soft); line-height:2.2; }
.msg-sign{ margin-top:30px; display:flex; align-items:baseline; gap:14px; }
.msg-sign .role{ font-size:.82rem; color:var(--sumi-soft); letter-spacing:.08em; }
.msg-sign .name{ font-family:"Noto Serif JP",serif; font-weight:700; font-size:1.3rem; letter-spacing:.06em; }

/* =========================================================
   CONTACT CTA
========================================================= */
.contact-cta{ text-align:center; }
.contact-audience{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:34px; }
.contact-audience span{ background:var(--white); border:1px solid var(--line); border-radius:999px; padding:9px 20px;
  font-size:.86rem; color:var(--sumi-soft); }
.contact-methods{ display:grid; grid-template-columns:repeat(2,minmax(0,340px)); gap:20px; justify-content:center; margin-top:44px; }
.cm{ background:var(--white); border:1px solid var(--line); border-radius:20px; padding:34px; text-align:center; transition:.5s var(--ease); }
.cm:hover{ transform:translateY(-5px); box-shadow:0 24px 44px rgba(43,38,32,.1); }
.cm .ic{ width:60px; height:60px; margin:0 auto 18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:28px; }
.cm.tel .ic{ background:var(--amber-wash); color:var(--amber-cta); }
.cm.mail .ic{ background:var(--sage-wash); color:var(--sage-deep); }
.cm .lbl{ font-size:.76rem; letter-spacing:.14em; color:var(--sumi-faint); font-weight:600; }
.cm .big{ font-family:"Figtree",sans-serif; font-weight:700; font-size:1.7rem; margin-top:6px; color:var(--sumi); }
.cm .sub{ font-size:.84rem; color:var(--sumi-soft); margin-top:8px; }

/* =========================================================
   NEWS
========================================================= */
.news{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:52px; }
.news li{ transition:.4s var(--ease); }
.news li:hover{ transform:translateY(-4px); }
.news .thumb{ aspect-ratio:16/10; border-radius:14px; overflow:hidden; background:var(--cream-3); background-size:cover; background-position:center; }
.news .meta{ display:flex; align-items:center; gap:10px; margin-top:14px; }
.news time{ font-family:"Figtree",sans-serif; font-size:.82rem; color:var(--sumi-faint); }
.news .cat{ background:var(--sage-wash); color:var(--sage-deep); font-size:.68rem; font-weight:600;
  letter-spacing:.08em; padding:3px 10px; border-radius:999px; }
.news h3{ margin-top:10px; font-size:.98rem; font-weight:500; line-height:1.7; }

/* =========================================================
   FOOTER
========================================================= */
.footer{ background:var(--cream-2); position:relative; padding:clamp(60px,7vw,96px) 0 40px; margin-top:0; }
.foot-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:44px; }
.foot-logo .logo-sub{ font-size:.66rem; letter-spacing:.24em; color:var(--sage-deep); font-weight:500; }
.foot-logo .logo-main{ font-family:"Noto Serif JP",serif; font-weight:700; font-size:1.7rem; letter-spacing:.16em; margin-top:2px; }
.foot-logo p{ margin-top:22px; color:var(--sumi-soft); font-size:.9rem; line-height:2; max-width:24em; }
.foot-col h4{ font-size:.78rem; letter-spacing:.14em; color:var(--sage-deep); font-weight:600; font-family:"Figtree",sans-serif; text-transform:uppercase; }
.foot-col ul{ margin-top:18px; display:flex; flex-direction:column; gap:12px; }
.foot-col a{ font-size:.92rem; color:var(--sumi-soft); transition:color .3s; }
.foot-col a:hover{ color:var(--amber-cta); }
.foot-info{ font-size:.88rem; color:var(--sumi-soft); line-height:2; margin-top:18px; }
.foot-info .tel{ font-family:"Figtree",sans-serif; font-weight:700; font-size:1.4rem; color:var(--sumi); letter-spacing:.02em; }
.foot-bottom{ margin-top:56px; padding-top:26px; border-top:1px solid var(--line-2);
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.foot-bottom small{ color:var(--sumi-faint); font-size:.78rem; font-family:"Figtree",sans-serif; letter-spacing:.04em; }

/* to-top */
.to-top{ position:fixed; right:24px; bottom:104px; z-index:900; width:52px; height:52px; border-radius:50%;
  background:var(--white); border:1.5px solid var(--amber-soft); color:var(--amber-cta); display:flex;
  align-items:center; justify-content:center; font-size:22px; box-shadow:0 10px 24px rgba(43,38,32,.12);
  opacity:0; pointer-events:none; transform:translateY(12px); transition:.5s var(--ease); }
.to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.to-top:hover{ background:var(--amber-cta); color:#fff; border-color:var(--amber-cta); }

/* mobile fixed CTA bar */
.mbar{ display:none; position:fixed; inset:auto 0 0 0; z-index:950; background:rgba(254,252,248,.96);
  backdrop-filter:blur(10px); border-top:1px solid var(--line); padding:9px 12px; gap:10px; }
.mbar a{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  padding:9px 6px; border-radius:12px; font-size:.72rem; font-weight:500; }
.mbar a i{ font-size:20px; }
.mbar .m-tel{ background:var(--amber-cta); color:#fff; }
.mbar .m-form{ background:var(--sage-deep); color:#fff; }

/* =========================================================
   REVEAL animations
========================================================= */
html:not(.js) .reveal, html:not(.js) .reveal-l, html:not(.js) .reveal-r{ opacity:1!important; transform:none!important; }
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal-l{ opacity:0; transform:translateX(-46px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal-r{ opacity:0; transform:translateX(46px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal-l.in,.reveal-r.in{ opacity:1; transform:none; }
[data-delay="1"]{ transition-delay:.12s; } [data-delay="2"]{ transition-delay:.24s; }
[data-delay="3"]{ transition-delay:.36s; } [data-delay="4"]{ transition-delay:.48s; }
[data-delay="5"]{ transition-delay:.6s; }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:1080px){
  .strength{ grid-template-columns:repeat(2,1fr); }
  .strength li:nth-child(3n){ border-right:1px dashed var(--line-2); }
  .strength li:nth-child(2n){ border-right:none; }
  .strength li:nth-last-child(-n+3){ border-bottom:1px dashed var(--line-2); }
  .strength li:nth-last-child(-n+2){ border-bottom:none; }
  .svc{ grid-template-columns:repeat(2,1fr); }
  .flow{ grid-template-columns:repeat(2,1fr); }
  .flow li:not(:last-child)::after{ display:none; }
}
@media (max-width:899px){
  .gnav{ position:fixed; inset:0; z-index:1100; flex-direction:column; justify-content:center; gap:26px;
    background:var(--cream); transform:translateX(100%);
    transition:transform .55s var(--ease); padding:80px 24px; }
  body.nav-open .gnav{ transform:none; }
  .gnav a.navlink{ font-size:1.15rem; color:var(--sumi)!important; }
  .gnav a.navlink::after{ display:none; }
  .header.is-hero:not(.is-solid) .gnav a.navlink{ color:var(--sumi); }
  .nav-tel{ flex-direction:column; gap:14px; padding-left:0; margin-top:16px; }
  .nav-tel .tel-block{ text-align:center; }
  .header.is-hero:not(.is-solid) .nav-tel .tel-num{ color:var(--sumi); }
  .header.is-hero:not(.is-solid) .nav-tel .tel-label{ color:var(--sage-deep); }
  .nav-tel-desktop{ display:none; }
  .burger{ display:block; }
  .module,.msg,.band,.foot-grid{ grid-template-columns:1fr; }
  .module--rev .module-media{ order:0; }
  .msg-media{ max-width:360px; margin-inline:auto; }
  .band-tel{ margin-top:6px; }
}
@media (max-width:767px){
  :root{ --header-h:64px; }
  body{ font-size:15px; }
  .hero{ padding:8px 8px 0; }
  .hero-frame{ height:78vh; min-height:480px; border-radius:20px; }
  .hero-inner{ left:22px; right:22px; bottom:40px; }
  .hero-dots{ display:none; }
  .stat-wrap{ grid-template-columns:1fr; }
  .strength{ grid-template-columns:1fr; }
  .strength li{ border-right:none!important; border-bottom:1px dashed var(--line-2)!important; }
  .strength li:last-child{ border-bottom:none!important; }
  .svc{ grid-template-columns:repeat(2,1fr); }
  .target{ grid-template-columns:1fr; }
  .flow{ grid-template-columns:1fr; }
  .contact-methods{ grid-template-columns:1fr; }
  .news{ grid-template-columns:1fr; }
  .mbar{ display:flex; }
  .to-top{ bottom:78px; right:16px; width:46px; height:46px; }
  body{ padding-bottom:0; }
  .footer{ padding-bottom:88px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
  .hero-slide.is-active .bg{ animation:none; }
  .reveal,.reveal-l,.reveal-r{ opacity:1; transform:none; }
}

/* =========================================================
   下層ページ 共通
========================================================= */
.page-hero{ position:relative; overflow:hidden; padding:calc(var(--header-h) + 76px) 0 68px; color:#fff; }
.page-hero .ph-bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.page-hero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(43,32,20,.66) 0%, rgba(43,32,20,.4) 55%, rgba(43,32,20,.24) 100%); }
.page-hero .container{ position:relative; z-index:2; }
.page-hero .crumb{ display:flex; align-items:center; gap:10px; font-family:"Figtree",sans-serif;
  font-size:.76rem; letter-spacing:.04em; color:rgba(255,255,255,.75); margin-bottom:24px; }
.page-hero .crumb a{ transition:color .3s; } .page-hero .crumb a:hover{ color:var(--amber-soft); }
.page-hero .crumb .sep{ opacity:.5; }
.page-hero .en{ font-family:"Figtree",sans-serif; font-size:.74rem; font-weight:600; letter-spacing:.3em;
  text-transform:uppercase; color:var(--amber-soft); display:inline-flex; align-items:center; gap:12px; }
.page-hero .en::before{ content:""; width:30px; height:1px; background:var(--amber-soft); }
.page-hero h1{ font-family:"Noto Serif JP",serif; font-weight:600; margin-top:20px;
  font-size:clamp(2rem,4.4vw,3.1rem); line-height:1.42; letter-spacing:.02em; text-shadow:0 2px 24px rgba(0,0,0,.25); }
.page-hero .ph-lead{ margin-top:22px; max-width:44em; color:rgba(255,255,255,.9); line-height:2.1; font-size:1.02rem; }
/* placeholder tones */
.ph-hero-a{ background-image:linear-gradient(130deg,#7d8a70,#59634d); }
.ph-hero-b{ background-image:linear-gradient(130deg,#caa06a,#93673a); }
.ph-hero-c{ background-image:linear-gradient(130deg,#8a9a95,#5f6d68); }
.ph-hero-d{ background-image:linear-gradient(130deg,#4a6b5c,#33564a); }
.ph-hero-e{ background-image:linear-gradient(130deg,#b98b57,#7d5a30); }

/* anchor nav */
.anchor-nav{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.anchor-nav a{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); color:#fff;
  border-radius:999px; padding:8px 18px; font-size:.82rem; transition:.3s; }
.anchor-nav a:hover{ background:#fff; color:var(--sumi); border-color:#fff; }

/* prose */
.prose{ max-width:760px; }
.prose p{ margin-top:1.5em; color:var(--sumi-soft); line-height:2.2; }
.prose p:first-child{ margin-top:0; }
.prose .big{ font-family:"Noto Serif JP",serif; font-weight:600; color:var(--sumi);
  font-size:clamp(1.3rem,2.4vw,1.75rem); line-height:1.9; }
.prose h3{ font-family:"Noto Serif JP",serif; font-weight:600; font-size:1.35rem; margin-top:2.2em; color:var(--sumi); }
.prose h3 + p{ margin-top:.8em; }

/* two-col intro with sticky aside */
.detail-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px,5vw,72px); align-items:start; }
.detail-media .frame{ border-radius:22px; overflow:hidden; aspect-ratio:4/5; background:var(--cream-3);
  background-size:cover; background-position:center; box-shadow:0 30px 60px rgba(43,38,32,.1); position:sticky; top:100px; }

/* definition / info table */
.info-table{ width:100%; border-collapse:collapse; margin-top:8px; }
.info-table tr{ border-bottom:1px solid var(--line); }
.info-table th,.info-table td{ text-align:left; padding:20px 6px; vertical-align:top; font-weight:400; }
.info-table th{ width:230px; color:var(--sumi); font-family:"Noto Serif JP",serif; }
.info-table td{ color:var(--sumi-soft); line-height:1.9; }
@media (max-width:680px){
  .info-table th,.info-table td{ display:block; width:100%; padding:6px 0; }
  .info-table th{ padding-top:18px; } .info-table tr{ padding:6px 0; }
}

/* FAQ */
.faq{ margin-top:12px; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; padding:26px 52px 26px 40px; position:relative;
  font-family:"Noto Serif JP",serif; font-weight:600; font-size:1.08rem; line-height:1.6; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{ content:"Q"; position:absolute; left:0; top:24px; font-family:"Figtree",sans-serif;
  font-weight:700; color:var(--amber); font-size:1.1rem; }
.faq summary::after{ content:""; position:absolute; right:8px; top:50%; width:13px; height:13px;
  border-right:2px solid var(--sage-deep); border-bottom:2px solid var(--sage-deep);
  transform:translateY(-70%) rotate(45deg); transition:transform .4s var(--ease); }
.faq details[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq .a{ padding:0 40px 28px; color:var(--sumi-soft); line-height:2.1; }

/* forms */
.form{ margin-top:8px; display:grid; gap:24px; }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.field{ display:flex; flex-direction:column; gap:9px; }
.field label{ font-size:.9rem; font-weight:500; display:flex; align-items:center; gap:10px; }
.field .req{ background:var(--rose); color:#fff; font-size:.64rem; padding:2px 8px; border-radius:4px; letter-spacing:.06em; }
.field .opt{ background:var(--cream-3); color:var(--sumi-soft); font-size:.64rem; padding:2px 8px; border-radius:4px; }
.field input,.field select,.field textarea{ width:100%; padding:15px 16px; border:1px solid var(--line-2);
  border-radius:12px; background:var(--white); font:inherit; color:var(--sumi); transition:border-color .3s, box-shadow .3s; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--sage);
  box-shadow:0 0 0 3px var(--sage-wash); }
.field textarea{ min-height:150px; resize:vertical; line-height:1.8; }
.form-note{ font-size:.84rem; color:var(--sumi-soft); background:var(--amber-wash); border-radius:14px; padding:18px 22px; line-height:1.9; }
.form-submit{ text-align:center; margin-top:8px; }
.form-submit .btn{ min-width:260px; }
@media (max-width:680px){ .form .row{ grid-template-columns:1fr; } }

/* timeline (縦・詳細フロー) */
.timeline{ margin-top:20px; position:relative; }
.timeline li{ position:relative; padding:0 0 42px 78px; }
.timeline li:last-child{ padding-bottom:0; }
.timeline li::before{ content:attr(data-step); position:absolute; left:0; top:0; width:52px; height:52px;
  border-radius:50%; background:var(--sage-deep); color:#fff; font-family:"Figtree",sans-serif; font-weight:700;
  font-size:1.2rem; display:flex; align-items:center; justify-content:center; z-index:2; }
.timeline li::after{ content:""; position:absolute; left:26px; top:52px; bottom:8px; width:2px; background:var(--line-2); }
.timeline li:last-child::after{ display:none; }
.timeline h3{ font-family:"Noto Serif JP",serif; font-weight:600; font-size:1.25rem; padding-top:8px; }
.timeline p{ margin-top:12px; color:var(--sumi-soft); line-height:2.05; }

/* price cards */
.price-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:12px; }
.price-cards .pc{ background:var(--white); border:1px solid var(--line); border-radius:20px; padding:34px 28px; text-align:center; }
.price-cards .pc .ic{ width:56px; height:56px; margin:0 auto 16px; border-radius:50%; background:var(--sage-wash);
  color:var(--sage-deep); display:flex; align-items:center; justify-content:center; font-size:26px; }
.price-cards .pc h3{ font-family:"Noto Serif JP",serif; font-weight:600; font-size:1.15rem; }
.price-cards .pc .rate{ font-family:"Figtree",sans-serif; font-weight:700; font-size:2rem; color:var(--amber-cta); margin-top:10px; }
.price-cards .pc p{ margin-top:10px; font-size:.88rem; color:var(--sumi-soft); line-height:1.8; }
@media (max-width:880px){ .price-cards{ grid-template-columns:1fr; } }

/* strength detail list */
.sd-list{ display:grid; gap:clamp(40px,5vw,72px); margin-top:20px; }
.sd{ display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:start; }
.sd .badge{ width:84px; height:84px; border-radius:22px; background:var(--sage-wash); color:var(--sage-deep);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.sd .badge .n{ font-family:"Figtree",sans-serif; font-weight:700; font-size:1.7rem; line-height:1; }
.sd .badge i{ font-size:22px; }
.sd h3{ font-family:"Noto Serif JP",serif; font-weight:600; font-size:1.4rem; }
.sd p{ margin-top:14px; color:var(--sumi-soft); line-height:2.1; }
@media (max-width:680px){ .sd{ grid-template-columns:1fr; gap:18px; } .sd .badge{ width:68px; height:68px; } }

/* recruit */
.positions{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:12px; }
.positions .p{ background:var(--white); border:1px solid var(--line); border-radius:18px; padding:30px 26px; }
.positions .p .ic{ width:50px; height:50px; border-radius:14px; background:var(--amber-wash); color:var(--amber-cta);
  display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:16px; }
.positions .p h3{ font-family:"Noto Serif JP",serif; font-weight:600; font-size:1.15rem; }
.positions .p .emp{ font-size:.84rem; color:var(--sage-deep); margin-top:8px; font-weight:500; }
.merits{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:12px; }
.merits .m{ background:var(--white); border:1px solid var(--line); border-radius:18px; padding:30px 32px; display:flex; gap:20px; }
.merits .m .ic{ flex:0 0 auto; width:48px; height:48px; border-radius:50%; background:var(--sage-wash); color:var(--sage-deep);
  display:flex; align-items:center; justify-content:center; font-size:22px; }
.merits .m h3{ font-size:1.08rem; font-weight:500; } .merits .m p{ margin-top:8px; font-size:.9rem; color:var(--sumi-soft); line-height:1.9; }
@media (max-width:880px){ .positions,.merits{ grid-template-columns:1fr; } }

/* small list with check */
.checklist{ margin-top:20px; display:grid; gap:14px; }
.checklist li{ display:flex; gap:16px; align-items:flex-start; background:var(--white); border:1px solid var(--line);
  border-radius:14px; padding:20px 24px; }
.checklist li i{ flex:0 0 auto; color:var(--sage-deep); font-size:22px; margin-top:2px; }
.checklist li p{ line-height:1.9; }
.checklist li b{ font-weight:500; color:var(--sumi); }

/* section intro (left aligned) */
.sec-head .eyebrow{ margin-bottom:2px; }
.sec-head .head{ margin-top:18px; }