@charset "utf-8";
/* ==========================================================================
   晃陽緑化株式会社 デモサイト
   カラーは 13_Web構成.md 第5章（G5選定シート）に準拠。色相は変更しない。
   ========================================================================== */

:root{
  /* --- G5選定シートのカラー（色相変更禁止） --- */
  --c-base:        #FFFFFF; /* ベース */
  --c-tint:        #F7F4EC; /* 地の淡色 */
  --c-accent:      #E85A1F; /* アクセント：CTA・重要見出しのみ */
  --c-accent-deep: #A83C0E; /* アクセント濃：本文中の文字・リンク */
  --c-sub:         #E5C41D; /* サブ：区切り帯・下線（白文字を載せない） */
  --c-sub2:        #B3D334; /* サブ2：小面積の差し色 */
  --c-ink:         #1E1B16; /* 文字 */

  /* 白抜き文字を載せる面用のアクセント。#E85A1F と色相17.6°・彩度0.866が同一で、
     明度（HSVのV）のみ 0.910 → 0.784 に下げた同色。白文字とのコントラスト 4.63:1 を確保する。 */
  --c-cta:         #C84D1B;
  --c-cta-hover:   #AE4317;

  --c-ink-mute:    #4A443B; /* 補助文字（白背景で4.5:1以上） */
  --c-line:        #E2DCCF;
  --c-tint-deep:   #EFEADC;

  --wrap: 1120px;
  --sec-y: 96px;
  --hdr-h: 88px;
  --hdr-h-sm: 64px;

  --radius: 10px;
  --shadow:    0 2px 10px rgba(30,27,22,.08);
  --shadow-hi: 0 12px 30px rgba(30,27,22,.16);

  --t-fast: 200ms;
  --t-mid:  600ms;
  --ease-out: cubic-bezier(.22,.61,.36,1);
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:"Lato","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-size:17px;
  line-height:1.9;
  color:var(--c-ink);
  background:var(--c-base);
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}

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

a{ color:var(--c-accent-deep); }

h1,h2,h3,h4{ font-weight:700; line-height:1.5; margin:0; letter-spacing:.01em; }

p{ margin:0 0 1.2em; }
p:last-child{ margin-bottom:0; }

ul,ol{ margin:0; padding:0; list-style:none; }

/* --- 読み上げ専用 / スキップリンク --- */
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--c-cta); color:#fff; padding:12px 20px; font-weight:700;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:3px solid var(--c-accent-deep); outline-offset:2px; }

[id]{ scroll-margin-top:110px; }

/* ==========================================================================
   レイアウト
   ========================================================================== */
.wrap{ width:min(100% - 40px, var(--wrap)); margin-inline:auto; }

.section{ padding-block:var(--sec-y); }
.section--tint{ background:var(--c-tint); }

.section-head{ margin-bottom:44px; }
.section-head .eyebrow{
  display:inline-block; font-size:14px; font-weight:700; letter-spacing:.12em;
  color:var(--c-accent-deep); margin-bottom:10px;
}
.section-title{
  font-size:clamp(26px,3.4vw,38px); line-height:1.45; margin-bottom:14px;
  position:relative; padding-bottom:16px;
}
.section-title::after{
  content:""; position:absolute; left:0; bottom:0;
  width:64px; height:5px; background:var(--c-sub); border-radius:3px;
}
.section-head--center{ text-align:center; }
.section-head--center .section-title::after{ left:50%; transform:translateX(-50%); }
.section-lead{ color:var(--c-ink-mute); max-width:44em; }

/* ==========================================================================
   ヘッダー
   ========================================================================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--hdr-h);
  background:var(--c-base);
  border-bottom:1px solid var(--c-line);
  will-change:height,background-color;
}
.site-header.is-scrolled{
  height:var(--hdr-h-sm);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  box-shadow:var(--shadow);
}
.header-inner{
  height:100%; display:flex; align-items:center; gap:20px;
  width:min(100% - 40px, 1280px);
}
.brand{
  display:flex; flex-direction:column; text-decoration:none; color:var(--c-ink);
  line-height:1.3; flex-shrink:0;
}
.brand strong{ font-size:20px; font-weight:700; letter-spacing:.02em; }
.brand span{ font-size:11px; color:var(--c-ink-mute); letter-spacing:.06em; }
.site-header.is-scrolled .brand span{ display:none; }

.gnav{ margin-left:auto; }
.gnav ul{ display:flex; gap:18px; align-items:center; }
.gnav a{
  position:relative; text-decoration:none; color:var(--c-ink);
  font-size:15px; font-weight:700; padding:6px 0; display:inline-block;
  white-space:nowrap;
}
.gnav a::after{
  content:""; position:absolute; left:0; bottom:0; height:3px; width:0;
  background:var(--c-sub); transition:width var(--t-fast) var(--ease-out);
}
.gnav a:hover::after, .gnav a:focus-visible::after, .gnav a[aria-current="page"]::after{ width:100%; }

.header-cta{ display:flex; gap:10px; align-items:center; flex-shrink:0; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:0 26px; border-radius:var(--radius);
  font-size:17px; font-weight:700; text-decoration:none; cursor:pointer;
  border:2px solid transparent; text-align:center; line-height:1.4;
}
.btn--primary{ background:var(--c-cta); color:#fff; }
.btn--primary:hover{ background:var(--c-cta-hover); }
.btn--outline{ background:var(--c-base); color:var(--c-accent-deep); border-color:var(--c-accent); }
.btn--outline:hover{ background:#FCEFE7; }
.btn--ghost{ background:transparent; color:var(--c-ink); border-color:var(--c-ink); }
.btn--ghost:hover{ background:var(--c-tint); }
.btn--sm{ min-height:44px; padding:0 16px; font-size:15px; }
.btn--wide{ width:100%; }
.ico{ width:20px; height:20px; flex-shrink:0; }
.file-dummy .ico{ width:40px; height:40px; margin-inline:auto; color:var(--c-ink-mute); }

.tel-btn{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.25; }
.header-cta .tel-btn{ min-height:52px; padding:6px 18px; }
.tel-btn .tel-num{ font-size:19px; letter-spacing:.02em; }
.tel-btn .tel-lbl{ font-size:11px; font-weight:700; opacity:.92; }

.nav-toggle{ display:none; }

/* ==========================================================================
   ファーストビュー
   ========================================================================== */
.hero{
  position:relative; margin-top:var(--hdr-h);
  min-height:min(78vh,660px); display:flex; align-items:center;
  background:#2a231c;
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:url("../images/hero-main.jpg") center 40%/cover no-repeat;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(30,27,22,.80) 0%, rgba(30,27,22,.64) 45%, rgba(30,27,22,.24) 100%);
}
.hero-inner{ position:relative; z-index:1; padding-block:72px; color:#fff; }
.hero h1{
  font-size:clamp(28px,4.6vw,52px); line-height:1.4; margin-bottom:22px;
  text-shadow:0 2px 14px rgba(0,0,0,.45); max-width:16em;
}
.hero .hero-lead{
  max-width:36em; font-size:17px; color:#F6F1E9; margin-bottom:32px;
  text-shadow:0 1px 10px rgba(0,0,0,.55);
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; }
.hero-note{ margin-top:26px; font-size:13px; color:#EFE8DC; }

.scroll-cue{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  z-index:2; color:#fff; font-size:11px; letter-spacing:.14em; font-weight:700;
  display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none;
}
.scroll-cue .arw{
  width:22px; height:22px; border-right:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(45deg); animation:bob 1.8s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{ transform:rotate(45deg) translate(0,0); }
  50%    { transform:rotate(45deg) translate(5px,5px); }
}

/* ページヘッダー（下層） */
.page-head{
  margin-top:var(--hdr-h); position:relative; background:#2a231c; overflow:hidden;
  min-height:280px; display:flex; align-items:center;
}
.page-head .ph-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5;
}
.page-head .wrap{ position:relative; z-index:1; padding-block:56px; color:#fff; }
.page-head h1{ font-size:clamp(26px,3.8vw,42px); margin-bottom:12px; text-shadow:0 2px 12px rgba(0,0,0,.5); }
.page-head p{ color:#F4EFE6; max-width:42em; margin:0; text-shadow:0 1px 10px rgba(0,0,0,.55); }

.breadcrumb{ background:var(--c-tint); font-size:14px; }
.breadcrumb ol{ display:flex; flex-wrap:wrap; gap:8px; padding-block:12px; color:var(--c-ink-mute); }
.breadcrumb a{ color:var(--c-accent-deep); }

/* ==========================================================================
   主役層：1本の木が下りるまで
   ========================================================================== */
.story{ background:var(--c-tint); }
.story-pin{ padding-block:var(--sec-y); }
.story-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:40px; align-items:center; }

.story-stage{
  position:relative; aspect-ratio:3/2; border-radius:var(--radius);
  overflow:hidden; background:#ded7c8; box-shadow:var(--shadow-hi);
}
.story-frame{
  position:absolute; inset:0; margin:0; opacity:0;
}
.story-frame.is-active{ opacity:1; }
.story-frame img{ width:100%; height:100%; object-fit:cover; }
.story-tag{
  position:absolute; left:14px; top:14px;
  background:var(--c-cta); color:#fff; font-size:14px; font-weight:700;
  padding:6px 14px; border-radius:6px; letter-spacing:.04em;
}
.story-note{ font-size:13px; color:var(--c-ink-mute); margin-top:10px; }

.story-steps{ display:grid; gap:14px; margin-bottom:26px; }
.story-step{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  padding:14px 16px; border-radius:var(--radius);
  background:transparent; border:2px solid transparent;
}
.story-step.is-active{ background:var(--c-base); border-color:var(--c-sub); box-shadow:var(--shadow); }
.story-step .no{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--c-tint-deep); color:var(--c-ink-mute); font-weight:700; font-size:15px;
}
.story-step.is-active .no{ background:var(--c-cta); color:#fff; }
.story-step .lbl{ font-weight:700; display:block; }
.story-step .txt{ color:var(--c-ink-mute); font-size:16px; line-height:1.8; }
.story-punch{
  font-size:clamp(18px,2.2vw,24px); font-weight:700; line-height:1.6;
  border-left:6px solid var(--c-sub); padding-left:16px;
}

/* ピン留めを使わない状態（JS無効・768px未満・動きを減らす設定）＝3枚を並べる */
.story--static .story-grid{ grid-template-columns:1fr; }
.story--static .story-stage{
  position:static; aspect-ratio:auto; box-shadow:none; background:none;
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.story--static .story-frame{
  position:relative; opacity:1; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); background:var(--c-base);
}
.story--static .story-frame{ align-self:start; }
.story--static .story-frame img{ height:auto; aspect-ratio:3/2; }
.story--static .story-frame .story-cap{
  display:block; padding:14px 16px; font-size:16px; color:var(--c-ink-mute); line-height:1.8;
}
.story--static .story-steps{ display:none; }

/* ==========================================================================
   カード類
   ========================================================================== */
.card-grid{ display:grid; gap:24px; }
.card-grid--2{ grid-template-columns:repeat(2,1fr); }
.card-grid--3{ grid-template-columns:repeat(3,1fr); }
.card-grid--4{ grid-template-columns:repeat(4,1fr); }

.card{
  display:flex; flex-direction:column; background:var(--c-base);
  border:1px solid var(--c-line); border-radius:var(--radius);
  overflow:hidden; text-decoration:none; color:var(--c-ink);
  box-shadow:var(--shadow); height:100%;
}
.card-body{ padding:22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.card h3{ font-size:19px; line-height:1.6; }
.card p{ font-size:16px; color:var(--c-ink-mute); line-height:1.8; margin:0; }
.card .more{
  margin-top:auto; color:var(--c-accent-deep); font-weight:700; font-size:15px;
  display:inline-flex; align-items:center; gap:6px;
}
.card .more::after{ content:"\2192"; }

/* 悩みカード */
.worry-card .card-body{ gap:14px; }
.worry-card .qmark{
  width:40px; height:40px; border-radius:50%; background:var(--c-sub);
  color:var(--c-ink); font-weight:700; display:grid; place-items:center; font-size:18px;
}

/* 写真枠（ホバーズーム：枠固定・中身のみ1.05倍） */
.photo-frame{ overflow:hidden; background:var(--c-tint-deep); }
.photo-frame img{ width:100%; height:100%; object-fit:cover; transition:transform var(--t-mid) var(--ease-out); }
.card:hover .photo-frame img,
.photo-frame:hover img{ transform:scale(1.05); }
.ratio-43{ aspect-ratio:4/3; }
.ratio-32{ aspect-ratio:3/2; }

/* AI生成注記 */
.ai-note{ font-size:13px; color:var(--c-ink-mute); margin-top:8px; }

/* サービス（アイコン） */
.svc-list{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.svc-item{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  background:var(--c-base); border:1px solid var(--c-line); border-radius:var(--radius);
  padding:26px 16px; text-decoration:none; color:var(--c-ink); box-shadow:var(--shadow);
  height:100%;
}
.svc-item img{ width:76px; height:76px; }
.svc-item h3{ font-size:17px; }
.svc-item p{ font-size:15px; color:var(--c-ink-mute); line-height:1.75; margin:0; }
.svc-item .more{ color:var(--c-accent-deep); font-weight:700; font-size:14px; margin-top:auto; }
.svc-item .more::after{ content:"\2192"; margin-left:4px; }

/* 選ばれる理由 */
.reason{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.reason-item{ background:var(--c-base); border-radius:var(--radius); padding:28px 24px; box-shadow:var(--shadow); }
.reason-item .rn{
  font-family:"Lato",sans-serif; font-size:15px; font-weight:700; letter-spacing:.12em;
  color:var(--c-accent-deep); display:block; margin-bottom:8px;
}
.reason-item h3{ font-size:19px; margin-bottom:10px; padding-bottom:12px; border-bottom:3px solid var(--c-sub); }
.reason-item p{ font-size:16px; color:var(--c-ink-mute); margin:0; }

/* 地域リスト */
.area-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; }
.area-tags li{
  background:var(--c-base); border:1px solid var(--c-line); border-left:4px solid var(--c-sub2);
  border-radius:6px; padding:8px 16px; font-size:16px; font-weight:700;
}
.area-caution{ color:var(--c-ink-mute); font-size:16px; }

/* 帯（区切り） */
.band{
  position:relative; min-height:220px; display:grid; place-items:center;
  background:#2a231c; overflow:hidden; text-align:center;
}
.band img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.45; }
.band .band-txt{
  position:relative; z-index:1; color:#fff; font-size:clamp(20px,2.6vw,28px); font-weight:700;
  text-shadow:0 2px 12px rgba(0,0,0,.55); padding:24px 20px; line-height:1.6;
}

/* 事例 */
.case{ background:var(--c-base); border:1px solid var(--c-line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.case-head{ padding:20px 24px; background:var(--c-tint); border-bottom:1px solid var(--c-line); }
.case-head h3{ font-size:19px; }
.case-pair{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--c-line); }
.case-trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--c-line); }
.case-shot{ position:relative; margin:0; background:var(--c-base); }
.case-shot figcaption{
  position:absolute; left:10px; top:10px; background:rgba(30,27,22,.88); color:#fff;
  font-size:13px; font-weight:700; padding:4px 12px; border-radius:5px;
}
.case-body{ padding:20px 24px; }
.case-body ul{ display:grid; gap:6px; }
.case-body li{ font-size:16px; color:var(--c-ink-mute); padding-left:20px; position:relative; line-height:1.8; }
.case-body li::before{ content:""; position:absolute; left:4px; top:.75em; width:8px; height:8px; background:var(--c-sub2); border-radius:2px; }

/* 流れ */
.flow{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.flow-item{
  background:var(--c-base); border:1px solid var(--c-line); border-radius:var(--radius);
  padding:22px 18px; position:relative; box-shadow:var(--shadow);
}
.flow-item .fn{
  font-family:"Lato",sans-serif; font-weight:700; font-size:13px; letter-spacing:.1em;
  color:var(--c-accent-deep); display:block; margin-bottom:6px;
}
.flow-item h3{ font-size:17px; margin-bottom:8px; }
.flow-item p{ font-size:15px; color:var(--c-ink-mute); margin:0; line-height:1.75; }

/* テキスト＋写真の組み */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.split--rev .split-txt{ order:2; }
.split h3{ font-size:clamp(21px,2.6vw,27px); margin-bottom:16px; }
.split p{ color:var(--c-ink-mute); }
.checklist{ display:grid; gap:10px; margin:18px 0 0; }
.checklist li{ position:relative; padding-left:30px; font-size:16px; line-height:1.8; }
.checklist li::before{
  content:""; position:absolute; left:4px; top:.6em; width:12px; height:7px;
  border-left:3px solid var(--c-accent); border-bottom:3px solid var(--c-accent);
  transform:rotate(-45deg);
}

/* 悩みリスト（下層） */
.worry-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.worry-list li{
  background:var(--c-base); border-radius:var(--radius); padding:20px 22px 20px 56px;
  position:relative; font-size:17px; font-weight:700; box-shadow:var(--shadow); line-height:1.7;
}
.worry-list li::before{
  content:"?"; position:absolute; left:18px; top:19px; width:26px; height:26px;
  background:var(--c-sub); color:var(--c-ink); border-radius:50%;
  display:grid; place-items:center; font-size:15px; font-weight:700;
}

/* 表 */
.table-wrap{ overflow-x:auto; }
.info-table{ width:100%; border-collapse:collapse; font-size:16px; }
.info-table th,.info-table td{
  border-bottom:1px solid var(--c-line); padding:18px 16px; text-align:left; vertical-align:top; line-height:1.8;
}
.info-table th{ width:200px; background:var(--c-tint); font-weight:700; }
.info-table td{ color:var(--c-ink-mute); }

/* 沿革 */
.history li{ display:grid; grid-template-columns:190px 1fr; gap:16px; padding:18px 0; border-bottom:1px solid var(--c-line); }
.history .hy{ font-weight:700; }
.history .ht{ color:var(--c-ink-mute); }

/* FAQ */
.faq-list{ display:grid; gap:14px; }
.faq-item{ background:var(--c-base); border:1px solid var(--c-line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.faq-q{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:18px; font-weight:700; color:var(--c-ink);
  padding:22px 60px 22px 62px; position:relative; line-height:1.7; min-height:56px;
}
.faq-q .qm{
  position:absolute; left:20px; top:20px; width:30px; height:30px; border-radius:50%;
  background:var(--c-sub); color:var(--c-ink); display:grid; place-items:center;
  font-family:"Lato",sans-serif; font-weight:700; font-size:16px;
}
.faq-q .mk{ position:absolute; right:22px; top:50%; width:16px; height:16px; margin-top:-8px; }
.faq-q .mk::before,.faq-q .mk::after{
  content:""; position:absolute; background:var(--c-accent); border-radius:2px;
  transition:transform var(--t-fast) var(--ease-out);
}
.faq-q .mk::before{ left:0; top:7px; width:16px; height:3px; }
.faq-q .mk::after{ left:7px; top:0; width:3px; height:16px; }
.faq-q[aria-expanded="true"] .mk::after{ transform:rotate(90deg); }
.faq-a{ overflow:hidden; }
.faq-a-inner{ padding:0 24px 24px 62px; color:var(--c-ink-mute); font-size:17px; }

/* フォーム */
.form-note{
  background:#FCEFE7; border:2px solid var(--c-accent); border-radius:var(--radius);
  padding:16px 20px; font-weight:700; margin-bottom:28px; color:var(--c-accent-deep);
}
.form-grid{ display:grid; gap:22px; }
.field label{ display:block; font-weight:700; margin-bottom:8px; }
.field .req{
  display:inline-block; background:var(--c-cta); color:#fff; font-size:12px;
  padding:2px 8px; border-radius:4px; margin-left:8px; vertical-align:2px;
}
.field .opt{
  display:inline-block; background:var(--c-tint-deep); color:var(--c-ink-mute); font-size:12px;
  padding:2px 8px; border-radius:4px; margin-left:8px; vertical-align:2px;
}
.field input,.field select,.field textarea{
  width:100%; font-family:inherit; font-size:17px; line-height:1.7; color:var(--c-ink);
  padding:14px 16px; border:1px solid #8C8578; border-radius:var(--radius);
  background:var(--c-base); min-height:56px;
}
.field textarea{ min-height:180px; resize:vertical; }
.field .hint{ font-size:14px; color:var(--c-ink-mute); margin-top:6px; }
.file-dummy{
  border:2px dashed #8C8578; border-radius:var(--radius); padding:26px;
  text-align:center; color:var(--c-ink-mute); font-size:16px; background:var(--c-tint);
}

/* 連絡先ブロック */
.contact-box{
  background:var(--c-tint); border-radius:var(--radius); padding:32px;
  display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center;
}
.tel-block .tel-lead{ font-size:16px; font-weight:700; margin-bottom:6px; }
.tel-block .tel-big{
  font-family:"Lato",sans-serif; font-size:clamp(30px,4vw,42px); font-weight:700;
  color:var(--c-accent-deep); text-decoration:none; letter-spacing:.02em; display:inline-block; line-height:1.3;
}
.tel-block .tel-time{ font-size:15px; color:var(--c-ink-mute); }

/* 最終CTA（オレンジはボタンと見出しに限定し、面はイエローの帯＋地の淡色） */
.cta{ background:var(--c-tint); color:var(--c-ink); text-align:center; border-top:8px solid var(--c-sub); }
.cta h2{ font-size:clamp(24px,3.2vw,34px); margin-bottom:14px; line-height:1.5; color:var(--c-accent-deep); }
.cta p{ font-size:17px; color:var(--c-ink-mute); margin-bottom:28px; }
.cta .cta-btns{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.cta .tel-btn .tel-lbl{ opacity:1; }

/* ==========================================================================
   フッター
   ========================================================================== */
.site-footer{ background:var(--c-ink); color:#F0EAE0; padding-block:56px 28px; font-size:16px; }
.footer-top{ display:grid; grid-template-columns:1.2fr 2fr; gap:40px; }
.footer-brand strong{ font-size:20px; display:block; margin-bottom:12px; color:#fff; }
.footer-brand address{ font-style:normal; line-height:1.9; color:#E0D9CC; }
.footer-brand a{ color:#fff; text-decoration:none; font-weight:700; }
.footer-brand a:hover{ text-decoration:underline; }
.footer-nav{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px 24px; }
.footer-nav a{ color:#F0EAE0; text-decoration:none; font-size:16px; }
.footer-nav a:hover{ text-decoration:underline; }
.footer-demo{
  margin-top:40px; padding:18px 20px; border:1px solid #5A544B; border-radius:var(--radius);
  font-size:14px; line-height:1.9; color:#E0D9CC; background:rgba(255,255,255,.05);
}
.copyright{ margin-top:22px; font-size:13px; color:#C4BBAA; text-align:center; }

/* スマホ固定バー */
.mobile-bar{ display:none; }

/* ==========================================================================
   基礎層アニメーション（初期状態。JSが is-visible を付与）
   ========================================================================== */
.js .reveal{ opacity:0; transform:translateY(28px); }
.js .reveal.is-visible{ opacity:1; transform:none; }

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (max-width:1299px){
  .header-cta .btn--outline{ display:none; }
}

@media (max-width:1024px){
  .svc-list{ grid-template-columns:repeat(3,1fr); }
  .flow{ grid-template-columns:repeat(3,1fr); }
  .card-grid--4{ grid-template-columns:repeat(2,1fr); }
  .gnav ul{ gap:14px; }
  .gnav a{ font-size:14px; }
}

@media (max-width:900px){
  .story-grid{ grid-template-columns:1fr; gap:28px; }
  .reason{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; gap:24px; }
  .split--rev .split-txt{ order:0; }
  .contact-box{ grid-template-columns:1fr; }
}

@media (max-width:768px){
  :root{ --sec-y:64px; --hdr-h:64px; --hdr-h-sm:56px; }
  body{ padding-bottom:74px; }

  .gnav{
    position:fixed; inset:var(--hdr-h) 0 auto 0; background:var(--c-base);
    border-bottom:1px solid var(--c-line); box-shadow:var(--shadow);
    max-height:calc(100vh - var(--hdr-h) - 74px); overflow-y:auto;
    margin-left:0; display:none;
  }
  .gnav.is-open{ display:block; }
  .gnav ul{ flex-direction:column; align-items:stretch; gap:0; padding:8px 20px 20px; }
  .gnav li{ border-bottom:1px solid var(--c-line); }
  .gnav a{ display:block; padding:16px 4px; font-size:17px; min-height:56px; }
  .gnav a::after{ display:none; }

  .nav-toggle{
    display:grid; place-items:center; margin-left:auto; width:48px; height:48px;
    background:none; border:1px solid var(--c-line); border-radius:8px; cursor:pointer;
  }
  .nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after{
    display:block; width:22px; height:2px; background:var(--c-ink); position:relative;
  }
  .nav-toggle .bars::before,.nav-toggle .bars::after{ content:""; position:absolute; left:0; }
  .nav-toggle .bars::before{ top:-7px; }
  .nav-toggle .bars::after{ top:7px; }
  .header-cta{ display:none; }
  .brand strong{ font-size:17px; }

  .hero{ min-height:auto; }
  .hero-inner{ padding-block:56px 72px; }
  .hero-cta .btn{ width:100%; }
  .scroll-cue{ display:none; }

  .card-grid--2,.card-grid--3,.card-grid--4{ grid-template-columns:1fr; }
  .svc-list{ grid-template-columns:1fr; }
  .svc-item{ flex-direction:row; text-align:left; align-items:center; gap:16px; padding:18px; }
  .svc-item img{ width:60px; height:60px; flex-shrink:0; }
  .svc-item .more{ display:none; }
  .flow{ grid-template-columns:1fr; }
  .worry-list{ grid-template-columns:1fr; }
  .case-trio{ grid-template-columns:1fr; }
  .case-pair{ grid-template-columns:1fr; }
  .history li{ grid-template-columns:1fr; gap:2px; padding:14px 0; }
  .info-table th,.info-table td{ display:block; width:100%; border-bottom:0; padding:12px 14px; }
  .info-table td{ border-bottom:1px solid var(--c-line); }
  .footer-top{ grid-template-columns:1fr; gap:28px; }
  .footer-nav{ grid-template-columns:repeat(2,1fr); }
  .faq-q{ font-size:17px; padding:20px 52px 20px 58px; }
  .faq-a-inner{ padding:0 20px 20px 58px; }
  .contact-box{ padding:24px 20px; }

  /* 主役層：ピン留め解除・縦1列に並べる */
  .story--static .story-stage{ grid-template-columns:1fr; gap:22px; }
  .story-stage{
    position:static; aspect-ratio:auto; box-shadow:none; background:none;
    display:grid; grid-template-columns:1fr; gap:22px;
  }
  .story-frame{
    position:static; opacity:1 !important; border-radius:var(--radius);
    overflow:hidden; box-shadow:var(--shadow); background:var(--c-base);
  }
  .story-frame img{ height:auto; aspect-ratio:3/2; }
  .story-frame .story-cap{
    display:block; padding:12px 16px; font-size:16px; color:var(--c-ink-mute); line-height:1.8;
  }
  .story-steps{ display:none; }

  .mobile-bar{
    display:grid; grid-template-columns:1fr 1fr; gap:1px;
    position:fixed; left:0; right:0; bottom:0; z-index:120;
    background:var(--c-line); box-shadow:0 -2px 12px rgba(30,27,22,.18);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mobile-bar a{
    display:flex; align-items:center; justify-content:center; gap:8px;
    min-height:64px; text-decoration:none; font-weight:700; font-size:16px;
  }
  .mobile-bar .mb-tel{ background:var(--c-cta); color:#fff; }
  .mobile-bar .mb-form{ background:var(--c-base); color:var(--c-accent-deep); }
  .mobile-bar .ico{ width:20px; height:20px; }
}

/* ピン留めして1枚ずつ切り替えるときだけ、縦並び用キャプションを隠す */
.story:not(.story--static) .story-frame .story-cap{ display:none; }

/* ==========================================================================
   動きを減らす設定：全アニメーション無効化
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .js .reveal{ opacity:1 !important; transform:none !important; }
  .scroll-cue .arw{ animation:none !important; }
  .photo-frame img{ transform:none !important; }
}

@media print{
  .site-header,.mobile-bar,.scroll-cue{ display:none; }
}