@charset "UTF-8";

/* ============================================================
   明日華グループ ── 理念とコンセプトのプラットフォーム
   白基調。色は3法人を示すときだけ使う。
   ============================================================ */

:root{
  --ink:#1e2328;
  --ink-soft:#525b63;
  --ink-mute:#6b747c;
  --line:#e6e8ea;
  --line-soft:#f0f2f3;
  --bg:#ffffff;
  --bg-soft:#fafafa;

  /* グループ自体は中立。アクセントに落ち着いた金
     -gold=罫線や淡色地／-strong=大きな文字／-text=小さな文字と塗り */
  --gold:#b08d43;
  --gold-strong:#9c7a33;
  --gold-text:#856727;
  --gold-soft:#f6f1e6;

  /* 3法人のシグネチャーカラー
     素の色は枠・淡色地・大きな文字に。白文字を載せる塗りは -fill を使う */
  --c-asuka:#2f8f4f;        /* 株式会社明日華 ── グリーン */
  --c-asuka-fill:#2a8047;
  --c-asuka-deep:#1f6b39;
  --c-asuka-bg:#eef7f1;
  --c-kokoro:#e8826e;       /* 株式会社心の杜明日華 ── サーモンピンク */
  --c-kokoro-strong:#e07359;
  --c-kokoro-fill:#bb5341;
  --c-kokoro-deep:#ad4736;
  --c-kokoro-bg:#fdf1ee;
  --c-shiga:#1f9aa8;        /* 株式会社信州しがプロジェクト ── ターコイズブルー */
  --c-shiga-fill:#17808c;
  --c-shiga-deep:#15757f;
  --c-shiga-bg:#e9f6f7;

  --serif:"Noto Serif JP",serif;
  --sans:"Noto Sans JP",sans-serif;
  --wrap:1120px;
  --r:14px;
  --shadow:0 1px 2px rgba(30,35,40,.04), 0 10px 28px rgba(30,35,40,.06);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:70px;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.9;
  font-size:16px;
  letter-spacing:.02em;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}

.container{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}

/* ---------- 共通パーツ ---------- */
.section{padding:104px 0}
.section-tint{background:var(--bg-soft)}

.eyebrow{
  font-size:.7rem;font-weight:700;letter-spacing:.28em;
  color:var(--gold-text);text-transform:uppercase;margin-bottom:14px;
}
.h2{
  font-family:var(--serif);
  font-size:clamp(1.7rem,3.6vw,2.5rem);
  font-weight:700;line-height:1.5;letter-spacing:.04em;margin-bottom:22px;
}
.lead{font-size:1rem;color:var(--ink-soft);max-width:760px;line-height:2.1}
.lead strong{color:var(--ink);font-weight:700}
.center{text-align:center}
.center .lead{margin-inline:auto}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 32px;border-radius:999px;
  font-size:.94rem;font-weight:700;letter-spacing:.06em;
  transition:transform .25s, box-shadow .25s, background .25s, color .25s, border-color .25s;
  border:1.5px solid transparent;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#000;box-shadow:0 10px 26px rgba(30,35,40,.2)}
.btn-outline{border-color:var(--line);color:var(--ink);background:#fff}
.btn-outline:hover{border-color:var(--ink);box-shadow:var(--shadow)}
.btn-gold{background:var(--gold-text);color:#fff}
.btn-gold:hover{background:#7d6124;box-shadow:0 10px 26px rgba(143,111,44,.3)}

/* ============================================================
   HEADER ── 常に明るい前提
   ============================================================ */
#site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(10px);
  transition:background .35s, box-shadow .35s, border-color .35s;
  border-bottom:1px solid transparent;
}
#site-header.solid{
  background:rgba(255,255,255,.96);
  border-bottom-color:var(--line);
  box-shadow:0 1px 16px rgba(30,35,40,.05);
}
.header-inner{
  max-width:var(--wrap);margin-inline:auto;padding:0 24px;
  height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink)}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;flex:none;color:var(--gold)}
.brand-text strong{
  display:block;font-family:var(--serif);font-size:1.04rem;font-weight:700;
  letter-spacing:.1em;line-height:1.3;
}
.brand-text small{
  display:block;font-size:.56rem;letter-spacing:.24em;font-weight:700;
  color:var(--ink-mute);line-height:1.4;
}

.nav{display:flex;align-items:center;gap:2px}
.nav > a{
  padding:8px 13px;font-size:.83rem;font-weight:500;color:var(--ink-soft);
  border-radius:999px;transition:color .25s, background .25s;
}
.nav > a:hover{color:var(--ink);background:var(--bg-soft)}
.nav-cta{
  background:var(--ink)!important;color:#fff!important;
  padding:9px 20px!important;font-weight:700!important;margin-left:8px;
}
.nav-cta:hover{background:#000!important;transform:translateY(-1px)}

.nav-toggle{display:none;width:42px;height:42px;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s, opacity .3s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   HERO ── 白。色は文字だけに置く
   ============================================================ */
.hero{
  position:relative;min-height:100svh;display:grid;place-items:center;
  padding:130px 24px 90px;text-align:center;overflow:hidden;
  background:#fff;
}
/* 3法人の色を、ごく淡い光としてだけ置く */
.hero-glow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 16% 24%, rgba(232,130,110,.10), transparent 42%),
    radial-gradient(circle at 84% 30%, rgba(31,154,168,.09), transparent 42%),
    radial-gradient(circle at 50% 96%, rgba(47,143,79,.08), transparent 44%);
}
.hero-grain{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(30,35,40,.07) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse at center, #000 10%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 10%, transparent 70%);
}
.hero-rings{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center}
.hero-ring{
  position:absolute;border-radius:50%;border:1px solid rgba(30,35,40,.06);
  animation:ringPulse 9s ease-in-out infinite;
}
.hero-ring.r1{width:min(58vw,540px);aspect-ratio:1}
.hero-ring.r2{width:min(76vw,740px);aspect-ratio:1;animation-delay:-3s}
.hero-ring.r3{width:min(96vw,960px);aspect-ratio:1;animation-delay:-6s}
@keyframes ringPulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.05);opacity:1}}

.hero-inner{position:relative;z-index:2;max-width:900px}
.hero-eyebrow{
  display:inline-block;
  font-size:.68rem;font-weight:700;letter-spacing:.3em;color:var(--gold-text);
  border:1px solid rgba(176,141,67,.35);border-radius:999px;padding:7px 20px;
  margin-bottom:30px;
}
.hero-title{
  font-family:var(--serif);color:var(--ink);
  /* 1行に収めるため、16文字が横幅に収まる大きさへ。vw係数は実測で調整済み */
  font-size:clamp(1.05rem,5vw,2.9rem);
  font-weight:700;line-height:1.6;letter-spacing:.02em;
  margin-bottom:26px;
}
/* 各文を1行ずつ・文の途中で折り返さない（「育む。」だけが次行に落ちるのを防ぐ） */
.hero-title .title-line,
.hero-title .accent{display:block;white-space:nowrap}
/* 3法人の色を、そのまま言葉に */
.hero-title .w-hito{color:var(--c-kokoro-strong)}
.hero-title .w-chiiki{color:var(--c-shiga)}
.hero-title .w-bunka{color:var(--c-asuka)}
.hero-title .accent{margin-top:10px;color:var(--gold-strong)}
.hero-lead{
  color:var(--ink-soft);font-size:clamp(.9rem,1.6vw,1.02rem);
  line-height:2.15;margin-bottom:22px;
}
/* 3法人名 */
.hero-companies{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;
  margin:0 0 32px;font-size:.82rem;font-weight:700;
  color:var(--ink-soft);letter-spacing:.04em;
}
.hero-companies li{display:inline-flex;align-items:center;gap:8px}
.hc-dot{width:9px;height:9px;border-radius:50%;flex:none}
.hc-asuka{background:var(--c-asuka)}
.hc-kokoro{background:var(--c-kokoro)}
.hc-shiga{background:var(--c-shiga)}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-scroll{
  position:absolute;bottom:30px;left:50%;translate:-50% 0;z-index:2;
  width:26px;height:44px;border:1.5px solid var(--line);border-radius:999px;
  display:grid;place-items:start center;padding-top:8px;
}
.hero-scroll span{width:3px;height:8px;border-radius:2px;background:var(--gold);animation:scrollDot 1.8s ease-in-out infinite}
@keyframes scrollDot{0%{transform:translateY(0);opacity:0}35%{opacity:1}100%{transform:translateY(18px);opacity:0}}

/* ============================================================
   理念（CREDO）── 白地に、言葉だけ
   ============================================================ */
.credo{background:#fff;padding:104px 0;border-block:1px solid var(--line)}
.credo .container{text-align:center}
.credo-line{width:1px;height:56px;margin:0 auto 34px;background:linear-gradient(to bottom, transparent, var(--gold))}
.credo-eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.28em;color:var(--gold-text);margin-bottom:22px}
.credo-statement{
  font-family:var(--serif);color:var(--ink);
  font-size:clamp(1.5rem,4vw,2.6rem);
  font-weight:700;line-height:1.9;letter-spacing:.06em;margin-bottom:34px;
}
.credo-statement em{
  font-style:normal;padding:0 4px;
  background:linear-gradient(transparent 64%, var(--gold-soft) 64%);
}
.credo-sub{color:var(--ink-soft);max-width:700px;margin-inline:auto;line-height:2.15;font-size:.95rem}
.credo-sub + .credo-sub{margin-top:18px}
.credo-sub strong{color:var(--gold-text);font-weight:700}

/* ============================================================
   私たちの想い
   ============================================================ */
.thoughts-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:56px;align-items:start;margin-top:16px}
.thoughts-body p{margin-bottom:22px;color:var(--ink-soft);line-height:2.15}
.thoughts-body p strong{color:var(--ink);font-weight:700;background:linear-gradient(transparent 66%, var(--gold-soft) 66%)}
.thoughts-quote{
  font-family:var(--serif);font-size:clamp(1.05rem,2.2vw,1.35rem);
  font-weight:600;line-height:2;color:var(--ink);
  border-left:2px solid var(--gold);padding:6px 0 6px 24px;margin:34px 0;
}
.issues{
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r);
  padding:34px 30px;position:sticky;top:96px;
}
.issues h3{
  font-family:var(--serif);font-size:1.02rem;font-weight:700;letter-spacing:.06em;
  margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--line);
}
.issues li{display:flex;align-items:flex-start;gap:11px;font-size:.88rem;color:var(--ink-soft);padding:9px 0;line-height:1.75}
.issues li i{width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none;margin-top:10px}
.issues-note{
  margin-top:18px;padding-top:16px;border-top:1px dashed var(--line);
  font-size:.82rem;color:var(--ink-mute);line-height:1.85;
}

/* 循環バナー ── 塗らずに、線で */
.chain{
  margin-top:64px;padding:34px 30px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--bg-soft);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px 14px;text-align:center;
}
.chain span{font-size:.86rem;color:var(--ink-mute)}
.chain em{font-style:normal;font-family:var(--serif);font-weight:700;font-size:clamp(.95rem,1.9vw,1.12rem);color:var(--ink)}
.chain i{color:var(--gold-text);font-style:normal;font-weight:700}

/* ============================================================
   3つの育み
   ============================================================ */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.pillar{
  border-radius:var(--r);padding:38px 30px;border:1px solid var(--line);
  background:#fff;text-align:center;position:relative;overflow:hidden;
  transition:transform .3s, box-shadow .3s;
}
.pillar:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.pillar::before{content:"";position:absolute;inset:0 0 auto 0;height:3px}
.pillar-hito::before{background:var(--c-kokoro)}
.pillar-chiiki::before{background:var(--c-shiga)}
.pillar-bunka::before{background:var(--c-asuka)}
/* .pillar p より詳細度を上げないと、下の本文指定に font-size を奪われる */
.pillar p.pillar-glyph{font-family:var(--serif);font-size:2.4rem;font-weight:700;line-height:1;margin-bottom:16px}
.pillar-hito .pillar-glyph{color:var(--c-kokoro-strong)}
.pillar-chiiki .pillar-glyph{color:var(--c-shiga)}
.pillar-bunka .pillar-glyph{color:var(--c-asuka)}
.pillar h3{font-family:var(--serif);font-size:1.16rem;font-weight:700;letter-spacing:.06em;margin-bottom:12px}
.pillar p{font-size:.86rem;color:var(--ink-soft);line-height:1.95}

/* ---------- コンセプト循環図 ---------- */
.cycle-figure{
  margin-top:56px;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:34px 34px 30px;
}
.cycle-fig-head{text-align:center;max-width:720px;margin:0 auto 26px}
.cycle-fig-label{
  display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.28em;
  color:var(--gold-text);margin-bottom:10px;
}
.cycle-fig-head strong{
  display:block;font-family:var(--serif);font-size:clamp(1.1rem,2.4vw,1.4rem);
  font-weight:700;letter-spacing:.05em;line-height:1.6;color:var(--ink);margin-bottom:12px;
}
.cycle-fig-head p{font-size:.86rem;color:var(--ink-soft);line-height:2}
.cycle-figure img{
  width:100%;border-radius:10px;border:1px solid var(--line-soft);background:#fff;
}

/* 情報量の多い図は、狭い画面では縮めず横スクロールで読ませる */
.fig-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px}
.fig-hint{display:none;margin-top:10px;text-align:center;font-size:.72rem;color:var(--ink-mute);letter-spacing:.04em}

/* ============================================================
   3法人へのプラットフォーム
   ── 面で塗らず、色は線・文字・ボタンで示す
   ============================================================ */
.portal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.portal{
  display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:#fff;
  border:1px solid var(--line);transition:transform .32s, box-shadow .32s, border-color .32s;
}
.portal:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.portal-asuka:hover{border-color:var(--c-asuka)}
.portal-kokoro:hover{border-color:var(--c-kokoro)}
.portal-shiga:hover{border-color:var(--c-shiga)}

.portal-top{padding:30px 28px 22px;border-bottom:1px solid var(--line);border-top:3px solid}
.portal-asuka  .portal-top{border-top-color:var(--c-asuka)}
.portal-kokoro .portal-top{border-top-color:var(--c-kokoro)}
.portal-shiga  .portal-top{border-top-color:var(--c-shiga)}
.portal-no{font-size:.64rem;font-weight:700;letter-spacing:.26em;color:var(--ink-mute)}
.portal-role{
  display:inline-block;margin:8px 0 12px;
  font-size:.72rem;font-weight:700;letter-spacing:.12em;border-radius:999px;padding:5px 14px;
}
.portal-asuka  .portal-role{background:var(--c-asuka-bg);color:var(--c-asuka-deep)}
.portal-kokoro .portal-role{background:var(--c-kokoro-bg);color:var(--c-kokoro-deep)}
.portal-shiga  .portal-role{background:var(--c-shiga-bg);color:var(--c-shiga-deep)}
.portal-name{font-family:var(--serif);font-size:1.22rem;font-weight:700;letter-spacing:.05em;line-height:1.5}
.portal-asuka  .portal-name{color:var(--c-asuka-deep)}
.portal-kokoro .portal-name{color:var(--c-kokoro-deep)}
.portal-shiga  .portal-name{color:var(--c-shiga-deep)}
.portal-en{font-size:.58rem;letter-spacing:.2em;color:var(--ink-mute);font-weight:700;margin-top:5px}

.portal-body{padding:24px 28px 28px;display:flex;flex-direction:column;flex:1}
.portal-catch{font-family:var(--serif);font-size:1rem;font-weight:700;line-height:1.75;margin-bottom:12px;color:var(--ink)}
.portal-desc{font-size:.85rem;color:var(--ink-soft);line-height:1.95;margin-bottom:20px}
.portal-sub{
  font-size:.68rem;font-weight:700;letter-spacing:.14em;color:var(--ink-mute);
  margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--line);
}
.portal-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:24px}
.portal-tags li{
  font-size:.72rem;font-weight:500;padding:4px 11px;border-radius:999px;line-height:1.6;
  border:1px solid var(--line);color:var(--ink-soft);
}
.portal-go{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 20px;border-radius:999px;font-size:.86rem;font-weight:700;color:#fff;
  transition:gap .25s, filter .25s;
}
.portal-go:hover{gap:16px;filter:brightness(1.08)}
.portal-asuka  .portal-go{background:var(--c-asuka-fill)}
.portal-kokoro .portal-go{background:var(--c-kokoro-fill)}
.portal-shiga  .portal-go{background:var(--c-shiga-fill)}
.portal-go b{display:block;font-size:.86rem}
.portal-go small{font-size:.66rem;font-weight:500;opacity:.85;display:block}

.map-figure{margin-top:64px}
.map-figure img{width:100%;border-radius:var(--r);border:1px solid var(--line);background:#fff}
.map-cap{margin-top:18px;text-align:center;font-size:.84rem;color:var(--ink-mute);line-height:1.9}
.map-cap strong{color:var(--ink)}

/* ============================================================
   循環（未来）
   ============================================================ */
.cycle{position:relative;width:min(100%,560px);aspect-ratio:1;margin:56px auto 0;display:grid;place-items:center}
.cycle-core{
  width:44%;aspect-ratio:1;border-radius:50%;display:grid;place-content:center;
  text-align:center;padding:16px;background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.cycle-core span{font-size:.64rem;letter-spacing:.22em;font-weight:700;color:var(--gold-text);display:block;margin-bottom:6px}
.cycle-core strong{font-family:var(--serif);font-size:clamp(.86rem,2.1vw,1.04rem);font-weight:700;line-height:1.6;letter-spacing:.05em;color:var(--ink)}
.cycle-ring{position:absolute;inset:12%;border:1px dashed var(--line);border-radius:50%;animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.cycle-steps{position:absolute;inset:0}
.cycle-steps li{
  position:absolute;top:50%;left:50%;
  --a:calc(var(--i) * 60deg - 90deg);
  transform:translate(-50%,-50%) rotate(var(--a)) translateX(min(42vw,232px)) rotate(calc(var(--a) * -1));
  width:112px;padding:12px 6px;border-radius:10px;text-align:center;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);
  font-size:.77rem;font-weight:700;line-height:1.5;color:var(--ink);
}
.cycle-steps li b{
  display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--gold-text);color:#fff;font-size:.66rem;margin:0 auto 6px;
}

/* ============================================================
   代表メッセージ
   ============================================================ */
.msg-card{
  display:grid;grid-template-columns:260px 1fr;
  border-radius:var(--r);overflow:hidden;background:#fff;border:1px solid var(--line);
}
.msg-photo{
  background:var(--bg-soft);border-right:1px solid var(--line);
  display:grid;place-items:center;padding:40px 20px;text-align:center;
}
.msg-photo span{
  font-family:var(--serif);font-size:1.5rem;font-weight:700;letter-spacing:.16em;line-height:1.9;
  writing-mode:vertical-rl;color:var(--ink);
}
.msg-body{padding:44px 42px}
/* 見出し・引用も p なので、下の本文指定より詳細度を上げておく */
.msg-body p.msg-quote{
  font-family:var(--serif);font-size:clamp(1.1rem,2.4vw,1.42rem);font-weight:700;
  line-height:1.85;color:var(--ink);margin-bottom:24px;letter-spacing:.03em;
}
.msg-body p.eyebrow{font-size:.7rem;color:var(--gold-text);line-height:1.6}
.msg-body p{color:var(--ink-soft);margin-bottom:18px;line-height:2.15;font-size:.92rem}
.msg-body p strong{color:var(--ink);font-weight:700}
.msg-name{
  margin-top:26px!important;padding-top:20px;border-top:1px solid var(--line);
  font-size:.85rem!important;color:var(--ink-mute)!important;
}
.msg-name strong{font-size:1.05rem;letter-spacing:.14em;color:var(--ink)!important}

.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.fact{text-align:center;padding:26px 12px;border-radius:var(--r);background:#fff;border:1px solid var(--line)}
.fact b{display:block;font-family:var(--serif);font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:700;color:var(--gold-strong);line-height:1.2}
.fact b i{font-style:normal;font-size:.6em;margin-left:2px}
.fact span{display:block;font-size:.76rem;color:var(--ink-mute);margin-top:6px;letter-spacing:.06em}

/* ============================================================
   お問い合わせ
   ============================================================ */
.contact{background:var(--bg-soft);padding:96px 0;text-align:center;border-top:1px solid var(--line)}
.contact .eyebrow{color:var(--gold-text)}
.contact .h2{color:var(--ink)}
.contact-lead{color:var(--ink-soft);max-width:660px;margin:0 auto;line-height:2.1;font-size:.95rem}
.contact-routes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:860px;margin:38px auto 0}
.route{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 18px;text-align:left;
  border-top:3px solid;transition:transform .25s, box-shadow .25s;
}
.route:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.route-asuka{border-top-color:var(--c-asuka)}
.route-kokoro{border-top-color:var(--c-kokoro)}
.route-shiga{border-top-color:var(--c-shiga)}
.route b{display:block;color:var(--ink);font-size:.92rem;font-weight:700;margin-bottom:6px}
.route p{color:var(--ink-soft);font-size:.76rem;line-height:1.75}
.route span{display:inline-block;margin-top:10px;font-size:.74rem;font-weight:700}
.route-asuka span{color:var(--c-asuka-deep)}
.route-kokoro span{color:var(--c-kokoro-deep)}
.route-shiga span{color:var(--c-shiga-deep)}
.contact-direct{margin-top:40px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:#1e2328;color:rgba(255,255,255,.6);padding:60px 0 0}
.footer-inner{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:36px;padding-bottom:44px}
.footer-brand strong{
  font-family:var(--serif);color:#fff;font-size:1.12rem;font-weight:700;letter-spacing:.1em;
  display:block;margin-bottom:14px;
}
.footer-brand p{font-size:.79rem;line-height:1.95}
.footer-col h4{margin-bottom:12px}
.footer-col h4 a{color:#fff;font-size:.87rem;font-weight:700;letter-spacing:.04em;transition:color .25s}
.footer-col p{font-size:.75rem;line-height:1.85}
.footer-col ul li{font-size:.75rem;line-height:2.1}
.footer-asuka  h4 a:hover,.footer-asuka  a:hover{color:#7fd39a}
.footer-kokoro h4 a:hover,.footer-kokoro a:hover{color:#f7ad9c}
.footer-shiga  h4 a:hover,.footer-shiga  a:hover{color:#7fd4dd}
.footer-copy{
  border-top:1px solid rgba(255,255,255,.1);padding:20px 24px;text-align:center;
  font-size:.7rem;letter-spacing:.08em;color:rgba(255,255,255,.4);
}

/* ============================================================
   スクロール演出
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width:1000px){
  .thoughts-grid{grid-template-columns:1fr;gap:38px}
  .issues{position:static}
  .portal-grid,.pillars{grid-template-columns:1fr;gap:18px}
  .facts{grid-template-columns:repeat(2,1fr)}
  .msg-card{grid-template-columns:1fr}
  .msg-photo{padding:32px;border-right:none;border-bottom:1px solid var(--line)}
  .msg-photo span{writing-mode:horizontal-tb;font-size:1.3rem;letter-spacing:.3em}
  .msg-body{padding:32px 24px}
  .contact-routes{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:768px){
  .section,.credo{padding:72px 0}
  .nav{
    position:fixed;inset:70px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(255,255,255,.98);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);padding:12px 20px 24px;
    transform:translateY(-125%);transition:transform .4s cubic-bezier(.2,.8,.3,1);
    box-shadow:0 20px 40px rgba(30,35,40,.1);
  }
  .nav.open{transform:none}
  .nav > a{padding:15px 8px;border-bottom:1px solid var(--line);border-radius:0}
  .nav-cta{margin:14px 0 0!important;padding:15px!important;border-bottom:none!important;justify-content:center}
  .nav-toggle{display:flex}
  .hero{min-height:92svh}
  .cycle{width:min(100%,400px)}
  .cycle-steps li{
    width:88px;font-size:.68rem;padding:9px 4px;
    transform:translate(-50%,-50%) rotate(var(--a)) translateX(min(38vw,164px)) rotate(calc(var(--a) * -1));
  }
  .chain{padding:26px 20px}
  .cycle-figure{padding:24px 16px 20px}
  .cycle-fig-head{margin-bottom:20px}
  /* 縮めると図中の文字が読めなくなるため、最低幅を確保してスクロールさせる */
  .fig-scroll img{min-width:720px;width:720px;max-width:none}
  .fig-hint{display:block}
}
@media (max-width:520px){
  .footer-inner{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr;gap:10px}
  .btn{padding:14px 24px;font-size:.86rem}
}

/* ============================================================
   印刷（A4／1セクション＝1ページ／画面の見た目のまま）
   ------------------------------------------------------------
   A4縦の印字領域は約 718×1047px（96dpi・余白10mm）。
   この幅だと上の max-width:1000px / 768px の指定が効いてしまい、
   画面（PC表示）と違う1段組みで出てしまうため、印刷時は
   多段組みを明示的に戻している。
   ============================================================ */
@page{size:A4 portrait;margin:10mm}

@media print{
  /* 既定では背景色が印刷されず design が消えるので、そのまま出す */
  *,*::before,*::after{
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
  }
  html,body{background:#fff;width:auto;overflow:visible}

  /* 印刷では一切animationさせない。
     これが無いと .reveal の opacity 0→1 がトランジション扱いになり、
     透明のまま紙に焼かれる（＝白紙で出る）ことがある */
  *,*::before,*::after{transition:none!important;animation:none!important}

  /* 画面操作のための要素は紙には出さない */
  #site-header,.nav,.nav-toggle,.hero-scroll,.fig-hint{display:none!important}
  /* 紙では潰れて汚くなる装飾 */
  .hero-rings,.hero-grain,.hero-glow{display:none!important}

  /* スクロール連動で opacity:0 のままの要素が
     白紙で印刷されるのを防ぐ（最重要） */
  .reveal{opacity:1!important;transform:none!important}

  /* 全画面・固定前提の解除 */
  .hero{min-height:auto!important;padding:0 0 6mm!important;display:block;text-align:center}
  .hero-inner{max-width:none}
  .issues{position:static!important}

  /* 1セクション＝1ページ */
  main > section{
    break-before:page;page-break-before:always;
    padding:0 0 6mm!important;border:none!important;
  }
  main > section:first-child{break-before:auto;page-break-before:avoid}
  .site-footer{break-before:page;page-break-before:always;padding-top:8mm}
  .container{max-width:none!important;padding-inline:0!important}

  /* 要素の途中でページが割れないように */
  .portal,.pillar,.fact,.msg-card,.route,.chain,.issues,
  .cycle-figure,.map-figure,.cycle,figure,img,table{
    break-inside:avoid;page-break-inside:avoid;
  }
  h1,h2,h3,h4,.h2,.eyebrow,.cycle-fig-head{break-after:avoid;page-break-after:avoid}

  /* 画面（PC表示）と同じ段組みに戻す */
  .thoughts-grid{grid-template-columns:1.5fr 1fr!important;gap:24px!important}
  .pillars,.portal-grid,.contact-routes{grid-template-columns:repeat(3,1fr)!important;gap:10px!important}
  .facts{grid-template-columns:repeat(4,1fr)!important;gap:8px!important}
  .msg-card{grid-template-columns:200px 1fr!important}
  .msg-photo{border-right:1px solid var(--line)!important;border-bottom:none!important}
  .msg-photo span{writing-mode:vertical-rl!important;letter-spacing:.16em!important}
  .msg-body{padding:24px!important}
  .footer-inner{grid-template-columns:1.3fr repeat(3,1fr)!important;gap:16px!important}

  /* 循環図：狭い画面用の縮小指定を打ち消す */
  .cycle{width:min(100%,460px)!important}
  .cycle-steps li{
    width:100px!important;font-size:.7rem!important;padding:9px 4px!important;
    transform:translate(-50%,-50%) rotate(var(--a)) translateX(190px) rotate(calc(var(--a) * -1))!important;
  }

  /* 図は横スクロールさせず、全体を1枚で出す。
     縦長の図はページを食うので高さで上限をかける */
  .fig-scroll{overflow:visible!important;text-align:center}
  .fig-scroll img{
    width:auto!important;min-width:0!important;
    max-width:100%!important;max-height:135mm!important;
    margin-inline:auto;
  }

  /* 紙では影・ホバー前提の演出は不要。
     ただし .cycle-steps li の transform は円周上への配置そのものなので
     絶対に打ち消さないこと（消すと6つが中心に重なる） */
  .portal,.pillar,.fact,.route,.cycle-figure,.msg-card,.cycle-core{
    box-shadow:none!important;transform:none!important;
  }
  .cycle-steps li{box-shadow:none!important}
  a{text-decoration:none;color:inherit}
}