@charset "UTF-8";
/* =========================================================================
   相談支援事業所 Any (any-soudan.com)
   共通スタイルシート
   - index.html のデザインソースから切り出し（デザイントークンは変更禁止）
   - 下段に各下層ページ用のコンポーネントを追加
   ========================================================================= */

:root{
  --navy:#2c4a68;
  --navy-deep:#26415c;
  --ink:#41546a;
  --cream:#f7f4ec;
  --paper:#ffffff;
  --sand:#f0ecdf;
  --sage:#8ea283;
  --sage-light:#dfe6d4;
  --green-hill:#c2cfad;
  --sea:#d3e0e6;
  --line:#6f89a1;
  --muted:#7d8ea0;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  font-family:'Zen Kaku Gothic New',sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.9;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
/* 基準ビューポート1440px。コンテンツは中央寄せ・最大幅で固定し、
   広い画面では左右余白が増えるだけ（要素は画面幅に比例して伸びない）。 */
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}

/* ---------- brand logo ---------- */
/* 見本準拠: 3行が縦に詰まった小さめのロゴ（Anyが間延びしないよう行間を締める） */
.brand{display:block;line-height:1.02}
.brand-cat{font-size:11px;letter-spacing:.26em;color:var(--ink)}
.brand-name{
  font-family:'Shippori Mincho',serif;
  font-weight:700;font-size:30px;color:var(--navy);letter-spacing:.02em;
  line-height:1.05;
}
.brand-op{font-size:9.5px;letter-spacing:.12em;color:var(--muted)}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(44,74,104,.08);
}
.header-inner{
  max-width:1200px;margin:0 auto;padding:12px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.header-inner .brand-name{font-size:25px}
nav.gnav{display:flex;align-items:center;gap:20px}
nav.gnav a{
  font-size:13px;letter-spacing:.1em;color:var(--navy);
  padding:6px 0;position:relative;
}
nav.gnav a:not(.btn-contact)::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--navy);border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
nav.gnav a:hover::after,nav.gnav a:focus-visible::after{transform:scaleX(1)}
nav.gnav a[aria-current="page"]:not(.btn-contact)::after{transform:scaleX(1)}
/* 見本準拠: アイコン＋文字がピル内に収まる。flex圧縮による左端はみ出しを防ぐ。 */
.btn-contact{
  display:inline-flex;align-items:center;gap:8px;flex-shrink:0;white-space:nowrap;
  background:var(--navy);color:#fff !important;
  padding:10px 26px;border-radius:999px;font-size:13px;letter-spacing:.1em;
  transition:opacity .2s;
}
.btn-contact:hover{opacity:.85}
.btn-contact svg{width:15px;height:15px;flex-shrink:0}
/* 詳細度対策: nav.gnav a (0,0,1,2) が .btn-contact (0,0,1,0) の padding を上書きし
   横padding=0 になる（アイコン/文字がピル左縁に食い込む）。同等以上の詳細度で明示して確実に効かせる。 */
nav.gnav a.btn-contact{padding:10px 26px}
.menu-toggle{display:none}

/* ---------- hero ---------- */
/* 見本準拠: 白背景、左コピー＋右イラストを1コンテナ内で並べる。
   コピー左端はヘッダーロゴ左端(=max-width1200/padding28)と揃う。
   h1は縮小せず、コピー列の幅を確保して2行固定にする。 */
.hero{overflow:hidden;background:var(--paper)}
.hero-inner{
  max-width:1200px;margin:0 auto;padding:44px 28px 40px;
  min-height:560px;
  display:grid;grid-template-columns:minmax(588px,0.9fr) minmax(0,1.1fr);
  gap:44px;align-items:center;
}
.hero-copy{position:relative;z-index:2;max-width:none;padding:0}
/* h1「あなたの答えになっていく。」は全角13字。44pxで2行を保つにはコピー列に
   約580px以上の幅が必要なため、列幅を確保する（文字は縮小しない）。 */
.hero h1{
  font-weight:700;color:var(--navy);
  font-size:clamp(28px,3.05vw,44px);
  letter-spacing:.01em;line-height:1.68;
  margin-bottom:20px;
}
.hero-en{
  font-size:clamp(14px,1.6vw,18px);letter-spacing:.18em;color:var(--sage);
  margin-bottom:28px;font-weight:500;
}
.hero p{letter-spacing:.1em;line-height:2.3;font-size:15px;margin-bottom:36px}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap}
.btn-primary,.btn-outline{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 30px;border-radius:999px;font-size:13.5px;letter-spacing:.12em;
  transition:.2s;
}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{opacity:.85}
.btn-outline{border:1.5px solid var(--navy);color:var(--navy);background:rgba(255,255,255,.7)}
.btn-outline:hover{background:var(--navy);color:#fff}
.btn-primary .arrow,.btn-outline .arrow,.more .arrow{transition:transform .2s}
.btn-primary:hover .arrow,.btn-outline:hover .arrow{transform:translateX(4px)}
/* イラストは下端揃え=「私たちにできること」との間隔を詰める＋地面が接地して見える */
.hero-art{line-height:0;z-index:1;pointer-events:none;align-self:end}
.hero-art img,.hero-art svg{width:100%;height:auto}

/* ---------- section common ---------- */
/* 見本の詰まった印象に寄せて縦paddingを約3割圧縮 */
section{padding:60px 0}
.sec-head{text-align:center;margin-bottom:40px}
.sec-title{
  font-weight:700;color:var(--navy);
  font-size:clamp(20px,3vw,26px);letter-spacing:.18em;
}
.wave-divider{width:56px;height:12px;margin:14px auto 0;color:var(--navy)}

/* ---------- services ---------- */
.services{background:var(--cream);padding-top:48px}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.service{
  padding:8px 26px;text-align:center;
  border-left:1px solid rgba(44,74,104,.14);
}
.service:first-child{border-left:none}
.service-icon{width:56px;height:56px;margin:0 auto 10px;color:var(--navy)}
.service h3{
  font-size:15.5px;font-weight:700;color:var(--navy);
  letter-spacing:.08em;margin-bottom:12px;line-height:1.7;
}
.service p{font-size:12.5px;line-height:2.1;letter-spacing:.04em;text-align:left}
.more{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:16px;font-size:12px;letter-spacing:.14em;color:var(--navy);
}
.more:hover .arrow{transform:translateX(4px)}

/* ---------- flow band ---------- */
.flow-band{background:var(--sage);color:#fff;padding:44px 0}
.flow-band-inner{
  max-width:1200px;margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:230px 1fr;gap:44px;align-items:center;
}
.flow-band h2{font-size:21px;font-weight:700;letter-spacing:.18em;margin-bottom:12px}
.flow-band .band-lead{font-size:12.5px;letter-spacing:.08em;line-height:2;opacity:.95}
.btn-ghost{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:20px;padding:8px 22px;
  border:1px solid rgba(255,255,255,.7);border-radius:999px;
  font-size:12px;letter-spacing:.16em;color:#fff;transition:background .2s;
}
.btn-ghost:hover{background:rgba(255,255,255,.15)}
.flow-steps{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.flow-step{text-align:center;flex:1;position:relative}
.flow-step + .flow-step::before{
  content:"";position:absolute;top:28px;left:calc(-50% + 32px);width:calc(100% - 64px);
  border-top:1.5px dashed rgba(255,255,255,.55);
}
.step-circle{
  width:56px;height:56px;margin:0 auto;border-radius:50%;
  background:var(--cream);color:var(--navy);
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1;
}
.step-circle svg{width:24px;height:24px}
.step-num{font-size:11px;letter-spacing:.2em;margin-top:12px;opacity:.9}
.step-name{font-size:13px;letter-spacing:.08em;margin-top:2px;font-weight:500}

/* ---------- about ---------- */
.about-inner{
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
}
.about h2{
  font-size:clamp(20px,2.8vw,26px);font-weight:700;color:var(--navy);
  letter-spacing:.12em;line-height:2;margin-bottom:24px;
}
.about p{font-size:14.5px;line-height:2.4;letter-spacing:.08em;margin-bottom:1.4em}
/* ---------- 共通パネル（生成り背景） ----------
   「大切にしていること」「私たちの想い」など、生成りの囲みは全てこの1クラスで統一。
   幅=コンテンツ幅いっぱい、本文は左揃え。見出し中央にしたい場合のみ .panel--center-head。
   同じ見た目の要素を足すときは必ずこの .panel を再利用すること。 */
.panel{
  background:var(--sand);border-radius:12px;
  padding:44px 48px;position:relative;margin-top:48px;
}
.panel-title{
  font-size:16px;font-weight:700;color:var(--navy);letter-spacing:.2em;
  line-height:1.7;margin-bottom:20px;text-align:left;
}
.panel p{
  font-size:14.5px;line-height:2.4;letter-spacing:.08em;margin-bottom:1.4em;text-align:left;
}
.panel p:last-child{margin-bottom:0}
.panel ul{list-style:none}
.panel li{
  display:flex;align-items:flex-start;gap:12px;
  font-size:14px;letter-spacing:.08em;line-height:2;padding:6px 0;text-align:left;
}
.panel li svg{width:18px;height:18px;flex-shrink:0;margin-top:8px;color:var(--sage)}
.panel .sprout{position:absolute;right:40px;bottom:28px;width:64px;color:var(--sage)}
.panel .wave-divider{margin:14px auto 26px}
/* 私たちの想い: 見出し＋波線のみ中央、本文は左揃え */
.panel--center-head .panel-title{text-align:center}

/* about導入部: 縦長 people-sea を横長〜正方形にトリミング表示。
   人物と海が入り、頭が切れない位置に object-position を調整。 */
.about-intro-media{
  display:block;width:100%;max-width:460px;margin:0 auto;
  height:clamp(240px,24vw,320px);
  object-fit:cover;object-position:center 68%;border-radius:12px;
}

/* ---------- footer ---------- */
footer{background:var(--paper);border-top:1px solid rgba(44,74,104,.1);padding:44px 0 0}
.footer-inner{max-width:1200px;margin:0 auto;padding:0 28px}
.footer-top{
  display:grid;grid-template-columns:auto 1fr auto auto;gap:48px;
  align-items:flex-start;padding-bottom:48px;flex-wrap:wrap;
}
.footer-tag{font-size:13px;line-height:2.3;letter-spacing:.08em}
.footer-nav{display:grid;grid-template-columns:1fr 1fr;gap:10px 36px}
.footer-nav a{font-size:12.5px;letter-spacing:.1em;color:var(--navy)}
.footer-nav a:hover{text-decoration:underline;text-underline-offset:4px}
.footer-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 26px;border:1.5px solid var(--navy);border-radius:999px;
  font-size:12.5px;letter-spacing:.14em;color:var(--navy);transition:.2s;
}
.footer-cta:hover{background:var(--navy);color:#fff}
/* 見本準拠: 海辺イラスト(scene-sun-coast)を控えめな帯として配置。
   高さ固定で巨大化を防止。cover表示は上部の余白（空）のみをわずかにトリムし、
   海岸・集落・太陽は保持する（意味のある部分は切れない）。 */
.footer-scene{line-height:0;height:clamp(170px,16vw,230px);overflow:hidden}
.footer-scene img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 60%}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:20px 0 24px;flex-wrap:wrap;
  font-size:11.5px;letter-spacing:.12em;color:var(--muted);
}
/* コピーライトは常に右端（見本準拠。中央寄せにしない） */
.footer-copy{margin-left:auto;text-align:right}
.footer-links{display:flex;gap:0;align-items:center}
.footer-links a{padding:0 14px;border-left:1px solid rgba(44,74,104,.25)}
.footer-links a:first-child{border-left:none;padding-left:0}
.footer-links a:hover{color:var(--navy)}

/* =========================================================================
   下層ページ共通コンポーネント（トップの意匠を踏襲して追加）
   ========================================================================= */

/* ---------- page head（見本準拠: 白背景・左寄せ・タイトル上／パンくず下・波線なし） ---------- */
.page-head{
  background:var(--paper);
  padding:56px 0 8px;
  border-bottom:none;
}
/* HTMLは breadcrumb→title→wave→lead の順だが、見本は「タイトル→パンくず」。
   HTMLを変えずCSSで並び替え、波線は下層ページでは非表示にする。 */
.page-head .wrap{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.page-head .wave-divider{display:none}
.page-title{
  order:1;
  font-weight:700;color:var(--navy);
  font-size:clamp(22px,2.7vw,26px);letter-spacing:.12em;line-height:1.6;
}
.breadcrumb{
  order:2;
  font-size:11.5px;letter-spacing:.1em;color:var(--muted);
  margin-top:12px;
}
.breadcrumb ol{list-style:none;display:flex;justify-content:flex-start;flex-wrap:wrap;gap:8px}
.breadcrumb li{display:inline-flex;align-items:center;gap:8px}
.breadcrumb li + li::before{content:"›";color:var(--line);margin-right:2px}
.breadcrumb a{color:var(--navy)}
.breadcrumb a:hover{text-decoration:underline;text-underline-offset:3px}
.breadcrumb [aria-current="page"]{color:var(--ink)}
.page-lead{
  order:3;
  margin-top:24px;font-size:clamp(16px,1.7vw,19px);letter-spacing:.08em;
  color:var(--navy);font-weight:500;line-height:1.9;text-align:left;
}

/* 本文セクションの内寄せ幅 */
.section-narrow{max-width:1040px}

/* トップ「わたしたちについて」ダイジェストのCTA（詳しく見る→about.html） */
.about-more{text-align:center;margin-top:40px}

/* ---------- about ページ ---------- */
.about-page .about-inner{margin-bottom:0}
.about-page .about h2{margin-bottom:24px}

/* ---------- services（縦リスト） ---------- */
.service-list{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:0}
.service-row{
  display:grid;grid-template-columns:92px 1fr auto;gap:32px;align-items:center;
  padding:40px 0;border-bottom:1px solid rgba(44,74,104,.12);
}
.service-row:last-child{border-bottom:none}
.service-badge{
  width:92px;height:92px;border-radius:50%;
  background:var(--cream);color:var(--navy);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.service-badge svg{width:48px;height:48px}
.service-row h2{
  font-size:18.5px;font-weight:700;color:var(--navy);
  letter-spacing:.08em;line-height:1.7;margin-bottom:10px;
}
.service-row p{font-size:15px;line-height:2.2;letter-spacing:.05em}
.service-row .row-arrow{
  color:var(--navy);font-size:18px;line-height:1;padding-left:8px;
}

/* ---------- flow（縦タイムライン） ---------- */
.timeline{max-width:900px;margin:0 auto;position:relative}
.timeline::before{
  content:"";position:absolute;left:29px;top:14px;bottom:14px;width:2px;
  background:rgba(44,74,104,.14);
}
.tl-step{
  position:relative;display:grid;grid-template-columns:60px 1fr;gap:30px;
  padding:0 0 48px;
}
.tl-step:last-child{padding-bottom:0}
.tl-mark{
  width:60px;height:60px;border-radius:50%;
  background:var(--sage);color:#fff;
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1;flex-shrink:0;
}
.tl-mark svg{width:28px;height:28px}
.tl-body{padding-top:6px}
.tl-num{font-size:11.5px;letter-spacing:.22em;color:var(--sage);font-weight:500}
.tl-body h2{
  font-size:18px;font-weight:700;color:var(--navy);
  letter-spacing:.08em;margin:2px 0 8px;line-height:1.7;
}
.tl-body p{font-size:14.5px;line-height:2.15;letter-spacing:.05em}
.flow-note{
  max-width:900px;margin:56px auto 0;
  background:var(--sand);border-radius:12px;padding:40px 44px;
  text-align:center;font-size:15px;letter-spacing:.08em;line-height:2.3;color:var(--ink);
}

/* ---------- company（定義テーブル） ---------- */
.info-table{max-width:1040px;margin:0 auto;width:100%;border-collapse:collapse}
.info-table th,.info-table td{
  text-align:left;vertical-align:top;padding:20px 24px;
  border-bottom:1px solid rgba(44,74,104,.12);
  font-size:15px;letter-spacing:.06em;line-height:2;
}
.info-table th{
  width:230px;font-weight:700;color:var(--navy);
  background:var(--cream);white-space:nowrap;
}
.map-embed{
  max-width:1040px;margin:44px auto 0;border-radius:12px;overflow:hidden;
  background:var(--sand);
}
.map-embed .map-placeholder{
  aspect-ratio:16/7;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:13px;letter-spacing:.1em;text-align:center;padding:24px;
}
.map-embed iframe{display:block;width:100%;height:100%;border:0}

/* ---------- contact（フォーム） ---------- */
.form-wrap{max-width:720px;margin:0 auto}
.form-note{
  font-size:14px;line-height:2.1;letter-spacing:.06em;color:var(--ink);
  margin-bottom:32px;
}
.field{margin-bottom:24px}
.field label{
  display:block;font-size:14.5px;font-weight:700;color:var(--navy);
  letter-spacing:.08em;margin-bottom:8px;
}
.field .req{
  display:inline-block;margin-left:8px;font-size:10.5px;font-weight:500;
  color:#fff;background:var(--sage);border-radius:999px;
  padding:1px 9px;letter-spacing:.1em;vertical-align:middle;
}
.field .opt{
  display:inline-block;margin-left:8px;font-size:10.5px;font-weight:500;
  color:var(--muted);border:1px solid rgba(44,74,104,.25);border-radius:999px;
  padding:1px 9px;letter-spacing:.1em;vertical-align:middle;
}
.field input,.field textarea{
  width:100%;font-family:inherit;font-size:15px;color:var(--ink);
  background:var(--paper);
  border:1.5px solid rgba(44,74,104,.2);border-radius:10px;
  padding:12px 14px;line-height:1.8;transition:border-color .2s;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--navy)}
.field textarea{resize:vertical;min-height:150px}
.form-submit{text-align:center;margin-top:36px}
.form-submit .btn-primary{border:none;cursor:pointer;font-family:inherit}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-embed{
  max-width:720px;margin:0 auto;border-radius:12px;overflow:hidden;background:var(--sand);
}
.form-embed .embed-placeholder{
  min-height:320px;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:13px;letter-spacing:.1em;text-align:center;padding:24px;
}

/* ---------- privacy（本文記事） ---------- */
.article{max-width:900px;margin:0 auto}
.article .lead{
  font-size:15px;line-height:2.3;letter-spacing:.06em;margin-bottom:36px;
}
.article h2{
  font-size:18px;font-weight:700;color:var(--navy);letter-spacing:.1em;
  margin:44px 0 16px;padding-left:14px;border-left:4px solid var(--sage);line-height:1.7;
}
.article h2:first-of-type{margin-top:0}
.article p{font-size:14.5px;line-height:2.3;letter-spacing:.05em;margin-bottom:1em}
.article ul{margin:0 0 1em 1.4em}
.article li{font-size:14.5px;line-height:2.2;letter-spacing:.05em;margin-bottom:.3em}
.article .revised{
  margin-top:44px;font-size:13px;color:var(--muted);letter-spacing:.08em;text-align:right;
}

/* 準備中リンク（お知らせ等） */
.is-soon{cursor:default;opacity:.5;pointer-events:none}
.soon-tag{
  display:inline-block;margin-left:6px;font-size:9.5px;letter-spacing:.06em;
  color:var(--muted);border:1px solid rgba(44,74,104,.2);border-radius:999px;
  padding:0 7px;
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero-inner{grid-template-columns:1fr;gap:8px;padding:40px 28px 48px}
  .hero-copy{padding:0}
  .hero-art{margin:8px -28px 0}
  .service-grid{grid-template-columns:1fr 1fr;gap:40px 0}
  .service:nth-child(3){border-left:none}
  .flow-band-inner{grid-template-columns:1fr;gap:36px}
  .about-inner{grid-template-columns:1fr;gap:36px}
  .footer-top{grid-template-columns:1fr;gap:32px}
}
@media (max-width:720px){
  nav.gnav{
    position:fixed;inset:0;top:64px;background:var(--cream);
    flex-direction:column;justify-content:flex-start;padding-top:40px;gap:28px;
    transform:translateX(100%);transition:transform .3s ease;
  }
  nav.gnav.open{transform:translateX(0)}
  .menu-toggle{
    display:block;background:none;border:none;cursor:pointer;
    width:40px;height:40px;position:relative;z-index:60;
  }
  .menu-toggle span{
    position:absolute;left:8px;width:24px;height:2px;background:var(--navy);
    transition:.25s;border-radius:2px;
  }
  .menu-toggle span:nth-child(1){top:13px}
  .menu-toggle span:nth-child(2){top:20px}
  .menu-toggle span:nth-child(3){top:27px}
  .menu-toggle[aria-expanded="true"] span:nth-child(1){top:20px;transform:rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-toggle[aria-expanded="true"] span:nth-child(3){top:20px;transform:rotate(-45deg)}
  .service-grid{grid-template-columns:1fr;gap:44px}
  .service{border-left:none;padding:0 8px}
  .flow-steps{flex-wrap:wrap;row-gap:28px}
  .flow-step{flex:0 0 33%}
  .flow-step + .flow-step::before{display:none}
  .wrap{padding:0 24px}
  .panel{padding:32px 26px}
  .panel .sprout{display:none}
  .about-intro-media{max-width:none;height:clamp(200px,52vw,300px)}
  section{padding:60px 0}

  /* 下層ページ */
  .page-head{padding:40px 0 4px}
  .service-row{grid-template-columns:64px 1fr;gap:18px;padding:28px 0}
  .service-badge{width:64px;height:64px}
  .service-badge svg{width:34px;height:34px}
  .service-row .row-arrow{display:none}
  .tl-step{grid-template-columns:48px 1fr;gap:18px}
  .tl-mark{width:48px;height:48px}
  .timeline::before{left:23px}
  .info-table th,.info-table td{display:block;width:auto;white-space:normal}
  .info-table th{border-bottom:none;padding-bottom:6px}
  .info-table td{padding-top:6px}
  .flow-note{padding:28px 24px}
  .footer-scene{height:130px}
}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:2px}