/* ===== カラートークン（ロゴに合わせた あたたかい夕陽トーン） =====
   ※変数名は前バージョンの名残（green=実際はアプリコット）。ロゴ確定時に整理予定 */
:root{
  --bg:#FBF6EE;          /* あたたかいクリーム（生成り） */
  --bg-alt:#EFDFC9;      /* ピーチがかったクリーム（交互セクション・明暗差UPで区切りを明確に） */
  --ink:#39322B;         /* 温かい黒（ブラウン寄り） */
  --ink-soft:#6E6154;    /* 補助テキスト（読みやすさ向上：#8B7C6Dから濃く） */
  --green:#DD8A50;       /* メイン：アプリコット（太陽ロゴ由来） */
  --green-deep:#B85F32;  /* 濃い夕陽オレンジ */
  --green-pale:#FBEADA;  /* 淡いピーチ（面） */
  --terra:#D39A3E;       /* 差し色：ゴールド */
  --line:#EAD9C6;        /* 罫線 */
  --serif:'Noto Serif JP',serif;
  --sans:'Noto Sans JP',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.9;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
section{padding:96px 0}
.serif{font-family:var(--serif)}
/* 文節ごとに inline-block で囲み、語の途中（漢字間など）で改行させない。
   スマホでも「、」「。」など意味の切れ目でだけ折り返す */
.ph{display:inline-block}
/* 本文の折り返しを賢く：行末に「す。」等が一文字だけ残る"孤立"を避け（text-wrap:pretty）、
   日本語は文節（意味の切れ目）で折り返す（word-break:auto-phrase・対応ブラウザ＝Chrome系）。
   非対応ブラウザは通常折り返しにフォールバック */
p, li, dd, .cc-desc, .cc-arrow, .fs-note, blockquote{
  text-wrap: pretty;
  word-break: auto-phrase;
}
/* 求人カード内の応募ボタン（職種をフォームへ引き継ぐ） */
.jbtn{display:block;width:100%;margin-top:18px;text-align:center}
/* セクションの暖かい差し込み写真（ワイドなアクセント帯） */
.svc-photo{max-width:820px;margin:28px auto 4px}
.svc-photo img{width:100%;height:clamp(230px,34vw,380px);object-fit:cover;object-position:center 30%;border-radius:16px;display:block;box-shadow:0 14px 40px rgba(184,95,50,.14)}
.svc-photo figcaption{font-size:13px;color:var(--ink-soft);text-align:center;margin-top:12px}
/* 長文パラグラフ用ユーティリティ：ブロックは中央のまま（max-width＋margin auto）、
   中の文字だけ左寄せにして読みやすくする。inlineのtext-align:centerに勝つよう!important */
.body-left{text-align:left !important}

/* ===== ヘッダー ===== */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(247,243,236,.86);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:80px}
.logo{font-family:var(--serif);font-size:24px;font-weight:600;letter-spacing:.04em;color:var(--green-deep);text-decoration:none}
.logo span{color:var(--terra)}
.logo img{height:64px;width:auto;display:block}
.nav ul{display:flex;gap:28px;list-style:none;align-items:center}
.nav a{color:var(--ink);text-decoration:none;font-size:14px;font-weight:500;transition:color .2s}
.nav a:hover{color:var(--green)}
.btn-line{background:var(--green);color:#fff !important;padding:9px 18px;border-radius:999px;font-size:13px}
.btn-line:hover{background:var(--green-deep)}
.hamburger{display:none;font-size:26px;background:none;border:none;color:var(--ink);cursor:pointer}

/* ===== ヒーロー ===== */
.hero{text-align:center;padding:120px 0 88px;background:radial-gradient(circle at 50% 8%, #FCE9D5 0%, rgba(252,233,213,0) 55%)}
.hero .credo{
  font-family:var(--serif);
  font-size:clamp(28px,5vw,46px);
  line-height:1.75;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--ink);
}
.hero .credo .accent{color:var(--green-deep)}
.hero .company{
  margin-top:28px;font-family:var(--serif);font-size:17px;color:var(--ink-soft);letter-spacing:.16em
}
/* 3つの入口カード */
.gates{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}
.gate{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:24px 22px;text-decoration:none;color:var(--ink);text-align:left;
  transition:transform .2s,box-shadow .2s,border-color .2s;display:block
}
.gate:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(58,86,72,.12);border-color:var(--green)}
.gate .g-label{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--green-deep)}
.gate .g-sub{font-size:13px;color:var(--ink-soft);margin-top:8px}
.gate .g-arrow{color:var(--terra);margin-top:14px;font-size:14px}
.hero .tagline{margin-top:40px;font-size:14px;color:var(--ink-soft);letter-spacing:.12em}

/* ===== 何をする会社か ===== */
.intro{background:var(--bg-alt);text-align:center}
.intro h2{font-family:var(--serif);font-size:clamp(20px,3vw,26px);font-weight:500;line-height:1.8;color:var(--green-deep)}
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.svc{background:var(--bg);border-radius:14px;padding:32px 24px}
.svc .icon{width:46px;height:46px;margin:0 auto 16px;color:var(--green)}
.svc h3{font-family:var(--serif);font-size:18px;color:var(--ink);margin-bottom:8px}
.svc p{font-size:13.5px;color:var(--ink-soft)}

/* ===== セクション見出し共通 ===== */
.head{text-align:center;margin-bottom:48px}
.head .en{font-size:12px;letter-spacing:.24em;color:var(--terra);text-transform:uppercase;font-weight:700}
.head h2{font-family:var(--serif);font-size:clamp(24px,4vw,32px);font-weight:500;margin-top:10px;color:var(--ink)}

/* ===== 強み：一貫対応 ===== */
.flow{display:flex;align-items:stretch;justify-content:center;gap:0;flex-wrap:wrap}
.flow-step{background:var(--green-pale);border-radius:14px;padding:26px 26px;min-width:210px;text-align:center;flex:1}
.flow-step .fs-role{font-size:12px;color:var(--green-deep);font-weight:700;letter-spacing:.08em}
.flow-step .fs-name{font-family:var(--serif);font-size:19px;margin-top:8px;color:var(--ink)}
.flow-step .fs-note{font-size:12.5px;color:var(--ink-soft);margin-top:6px}
.flow-arrow{display:flex;align-items:center;color:var(--terra);font-size:28px;padding:0 14px}
.flow-caption{text-align:center;margin-top:32px;font-family:var(--serif);font-size:clamp(18px,2.6vw,22px);color:var(--green-deep);line-height:1.7}

/* ===== パララックス帯（⑤ゆい参考：スクロールでついてくる背景＋縦書き） ===== */
.parallax{
  position:relative;overflow:hidden;background-color:#3A2A22;
  min-height:680px;display:flex;align-items:center;justify-content:center;padding:64px 24px
}
/* 背景画像レイヤー。JS(main.js)がスクロールに合わせてtranslateYし、iPhone含め"ついてくる"パララックスにする */
.parallax-bg{
  position:absolute;left:0;top:-25%;width:100%;height:150%;
  object-fit:cover;object-position:center 30%;
  z-index:0;will-change:transform,opacity;pointer-events:none;
  opacity:0;transition:opacity 1.6s ease-in-out;
}
.parallax-bg.on{opacity:1}
.parallax-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg, rgba(45,33,27,.62) 0%, rgba(45,33,27,.40) 45%, rgba(120,60,35,.55) 100%);
}
.para-text{
  position:relative;z-index:2;
  writing-mode:vertical-rl;         /* ← 縦書き */
  font-family:var(--serif);color:#fff;
  font-size:clamp(19px,2.6vw,26px);letter-spacing:.22em;line-height:2.6;
  text-shadow:0 2px 10px rgba(0,0,0,.55), 0 0 26px rgba(0,0,0,.35)
}
/* 複数枚をクロスフェード＋JS(main.js)でスクロール追従。PC/スマホ共通で .parallax-bg 方式に統一 */

/* ===== 拠点カード ===== */
.offices{background:var(--bg-alt)}
.office-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.office{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:30px 26px;transition:box-shadow .2s,transform .2s,border-color .2s;text-align:center;text-decoration:none;color:var(--ink);cursor:pointer;display:block}
.office:hover{box-shadow:0 12px 30px rgba(184,95,50,.12);transform:translateY(-4px);border-color:var(--green)}
/* ロゴの「見える円」を3拠点で揃える。
   KoKo/WaKoは透明余白が多く可視68%、ピリナは可視99%。
   可視円の直径が同じになるよう、逆算したサイズにする（余白は透明なので枠外にはみ出てもOK）。 */
.logo-slot{height:134px;position:relative;margin-bottom:12px}
.office-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);object-fit:contain;
  width:184px;height:184px}                                  /* KoKo/WaKo：余白ぶん大きめ */
.office-logo[src*="pilina"]{width:126px;height:126px}        /* ピリナ：円が詰まっているので小さめ */
.office .area{font-family:var(--serif);font-size:23px;color:var(--green-deep);font-weight:600;line-height:1.4}
.office .type{display:inline-block;font-size:12px;background:var(--green-pale);color:var(--green-deep);padding:3px 12px;border-radius:999px;margin-top:12px}
.office .oname{font-size:14px;color:var(--ink-soft);margin-top:12px;letter-spacing:.04em}
.office .tel{font-family:var(--serif);font-size:18px;color:var(--ink);margin-top:8px}
.office .detail{color:var(--terra);text-decoration:none;font-size:13px;font-weight:500;margin-top:16px;display:inline-block}

/* ===== クレド（トップ用ダイジェスト） ===== */
.credo-sec{text-align:center}
.credo-sec .rinen{font-family:var(--serif);font-size:clamp(22px,3.6vw,30px);line-height:1.8;font-weight:500;color:var(--ink);margin-bottom:12px}
.credo-sec .rinen-label{font-size:12px;letter-spacing:.2em;color:var(--terra);font-weight:700;margin-bottom:36px}
.credo-list{max-width:760px;margin:0 auto;text-align:left;display:flex;flex-direction:column;gap:2px}
.credo-item{display:flex;gap:20px;align-items:baseline;padding:20px 24px;border-radius:12px}
.credo-item .num{font-family:var(--serif);font-size:20px;color:var(--green);font-weight:600;flex:none;width:28px}
.credo-item .txt{font-family:var(--serif);font-size:19px;color:var(--ink);font-weight:500}
.credo-item.hl{background:var(--green-pale)}
.credo-item.hl .txt{color:var(--green-deep);font-weight:600}
.credo-item.hl .badge{display:inline-block;font-size:11px;background:var(--terra);color:#fff;padding:2px 10px;border-radius:999px;margin-left:12px;vertical-align:middle;font-family:var(--sans)}
.credo-more{text-align:center;margin-top:40px}

/* ===== ボタン共通 ===== */
.btn{display:inline-block;text-decoration:none;padding:14px 34px;border-radius:999px;font-size:15px;font-weight:500;transition:.2s}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-deep)}
.btn-outline{border:1.5px solid var(--green);color:var(--green-deep)}
.btn-outline:hover{background:var(--green-pale)}

/* ===== お知らせ ===== */
.news{background:var(--bg-alt)}
.news-list{max-width:800px;margin:0 auto;list-style:none}
.news-item{display:flex;gap:20px;align-items:center;padding:20px 8px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);transition:.2s}
a.news-item:hover{padding-left:16px}  /* ホバーのスライドはリンク化した時だけ */
.news-item .date{font-size:13px;color:var(--ink-soft);flex:none;width:96px}
.news-item .cat{font-size:11px;background:var(--green-pale);color:var(--green-deep);padding:3px 10px;border-radius:999px;flex:none}
.news-item .title{font-size:15px;flex:1;min-width:0}

/* ===== お問い合わせ ===== */
.contact{text-align:center}
.contact p{color:var(--ink-soft);margin-bottom:36px}
.contact-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.contact .tel-big{font-family:var(--serif);font-size:30px;color:var(--green-deep);margin-top:36px}
.contact .tel-note{font-size:13px;color:var(--ink-soft)}

/* ===== フッター ===== */
/* トップ：Our Care（写真＋コピーの横並び） */
.care-split{background:var(--bg-alt);padding:clamp(44px,6vw,76px) 0}
.care-split .split-inner{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,60px);align-items:center}
.care-split .cs-photo img{width:100%;height:auto;border-radius:18px;display:block;box-shadow:0 18px 40px -22px rgba(80,45,20,.5)}
.care-split .cs-en{font-size:12px;letter-spacing:.22em;color:var(--terra);font-weight:700;margin-bottom:14px}
.care-split .cs-text h2{font-family:var(--serif);font-size:clamp(22px,3.4vw,30px);color:var(--ink);line-height:1.75;margin:0 0 18px;font-weight:500}
.care-split .cs-text p{color:var(--ink-soft);font-size:15px;line-height:2;margin:0}
@media(max-width:760px){.care-split .split-inner{grid-template-columns:1fr;gap:22px}}

footer{background:var(--green-deep);color:#E8E4DA;padding:64px 0 32px}
footer .flogo{font-family:var(--serif);font-size:22px;color:#fff;margin-bottom:28px}
footer .flogo img{display:block;height:58px;width:auto;margin-bottom:12px}
.foffices{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-bottom:40px}
.foffice h4{font-family:var(--serif);font-size:15px;color:#fff;margin-bottom:8px}
.foffice p{font-size:12.5px;line-height:1.8;color:#C4Cabf}
/* フッターの拠点ブロックをクリックで拠点ページへ */
a.foffice{display:block;text-decoration:none;color:inherit;transition:opacity .2s}
a.foffice:hover{opacity:.82}
a.foffice h4{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.4)}
a.foffice .fo-more{display:inline-block;margin-top:8px;font-size:12px;color:#fff;opacity:.9}
footer .copy{border-top:1px solid rgba(255,255,255,.15);padding-top:24px;font-size:12px;color:#A9B0A2;text-align:center}

/* ===== 下部固定クイックバー（①やさしいそら参考） ===== */
body{padding-bottom:70px}
/* 半透明クリームで軽く。本文を主役にし、常時のオレンジ圧を消す。LINEだけ緑塗り */
.quickbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;background:rgba(251,246,238,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -6px 22px rgba(58,42,34,.10)}
.quickbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:11px 4px;text-decoration:none;color:var(--green-deep);border-right:1px solid var(--line);transition:background .2s}
.quickbar a:last-child{border-right:none}
.quickbar a:hover{background:var(--green-pale)}
.quickbar .qb-ico{width:22px;height:22px}
.quickbar .qb-label{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ink)}
.quickbar a.qb-line{background:#06C755;color:#fff}
.quickbar a.qb-line .qb-label{color:#fff}
.quickbar a.qb-line:hover{background:#05a648}

/* ===== 下層ページ共通：ページヘッダー ===== */
.page-hero{text-align:center;padding:88px 0 64px;background:radial-gradient(circle at 50% 0%, #FCE9D5 0%, rgba(252,233,213,0) 60%)}
.page-hero .en{font-size:12px;letter-spacing:.24em;color:var(--terra);text-transform:uppercase;font-weight:700}
.page-hero h1{font-family:var(--serif);font-size:clamp(26px,4.5vw,38px);font-weight:600;margin-top:12px;color:var(--ink)}
.page-hero p{color:var(--ink-soft);margin-top:16px;font-size:15px}
.breadcrumb{font-size:12px;color:var(--ink-soft);letter-spacing:.04em}
.breadcrumb a{color:var(--ink-soft);text-decoration:none}
.breadcrumb a:hover{color:var(--green)}

/* ===== 会社概要ページ：理念ブロック ===== */
.rinen-hero{text-align:center;padding:20px 0 8px}
.rinen-hero .rinen-big{font-family:var(--serif);font-size:clamp(24px,4vw,36px);line-height:1.85;font-weight:500;color:var(--ink)}
.rinen-hero .rinen-big .accent{color:var(--green-deep)}
.rinen-hero .rinen-sub{margin-top:24px;color:var(--ink-soft);font-size:14.5px;line-height:2}

/* ===== 会社概要ページ：クレド全文 ===== */
.credo-full{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.credo-card{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:32px 34px;position:relative}
.credo-card.hl{background:var(--green-pale);border-color:transparent}
.credo-card .cc-head{display:flex;align-items:baseline;gap:16px}
.credo-card .cc-num{font-family:var(--serif);font-size:30px;color:var(--green);font-weight:600;line-height:1;flex:none}
.credo-card.hl .cc-num{color:var(--green-deep)}
.credo-card .cc-title{font-family:var(--serif);font-size:clamp(19px,2.6vw,23px);font-weight:600;color:var(--ink)}
.credo-card .cc-badge{display:inline-block;font-size:11px;background:var(--terra);color:#fff;padding:2px 10px;border-radius:999px;margin-left:6px;vertical-align:middle}
.credo-card .cc-desc{margin-top:14px;color:var(--ink);font-size:15px;line-height:1.95}
.credo-card .cc-arrow{margin-top:14px;font-family:var(--serif);font-size:14.5px;color:var(--green-deep);font-style:italic;letter-spacing:.02em}
.credo-card .cc-arrow::before{content:"→ ";color:var(--terra);font-style:normal}
.credo-card .cc-points{margin-top:18px;list-style:none;display:flex;flex-direction:column;gap:10px}
.credo-card .cc-points li{position:relative;padding-left:24px;color:var(--ink);font-size:15px;line-height:1.8}
.credo-card .cc-points li::before{content:"";position:absolute;left:3px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--terra)}
.credo-card .cc-points li.lead{font-family:var(--serif);color:var(--green-deep);font-weight:600;font-size:15.5px}
.day-role{font-family:var(--serif);font-size:clamp(21px,3vw,27px);color:var(--green-deep);text-align:center;margin:8px 0 36px;font-weight:600}
.day-role span{display:inline-block;font-family:var(--sans);font-size:12px;background:var(--green-deep);color:#fff;padding:4px 14px;border-radius:999px;margin-left:12px;vertical-align:middle;font-weight:700;letter-spacing:.06em}
.timeline + .day-role{margin-top:64px}
/* スタッフの一日：ジグザグ（左右交互）タイムライン */
.zz{position:relative;max-width:960px;margin:0 auto}
.zz::before{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:2px;background:var(--line);transform:translateX(-50%)}
.zz-item{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;margin-bottom:44px}
.zz-item:last-child{margin-bottom:0}
.zz-node{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;background:var(--green);border:3px solid var(--bg-alt);z-index:2}
.zz-photo{aspect-ratio:16/10;border-radius:14px;overflow:hidden}
.zz-photo img{width:100%;height:100%;object-fit:cover;display:block}
.zz-time{font-family:var(--serif);color:var(--green-deep);font-weight:600;font-size:13px;background:var(--green-pale);display:inline-block;padding:2px 12px;border-radius:999px;margin-bottom:8px}
.zz-text h3{font-family:var(--serif);font-size:19px;color:var(--ink);margin:0 0 8px}
.zz-text p{font-size:14px;color:var(--ink-soft);line-height:1.85;margin:0}
.zz-item:nth-child(even) .zz-photo{order:2}
.zz-item:nth-child(even) .zz-text{order:1;text-align:right}
.zz-item.solo{grid-template-columns:1fr;max-width:560px;margin:8px auto 0;background:var(--green-pale);border-radius:16px;padding:26px 34px;position:relative;z-index:1}
.zz-item.solo .zz-node{display:none}
.zz-item.solo .zz-text{text-align:center}
.zz + .day-role{margin-top:64px;padding-top:56px;border-top:1px dashed var(--line)}
@media(max-width:768px){
  .zz::before{left:20px}
  .zz-item{grid-template-columns:1fr;gap:14px;padding-left:46px;margin-bottom:30px}
  .zz-node{left:20px;top:16px;transform:translate(-50%,0)}
  .zz-item:nth-child(even) .zz-photo{order:0}
  .zz-item:nth-child(even) .zz-text{order:0;text-align:left}
  .zz-item.solo{max-width:none;margin:0;padding:22px 24px}
  .zz-item.solo .zz-text{text-align:center}
}

/* ===== 会社概要ページ：概要テーブル ===== */
.info{background:var(--bg-alt)}
.info-table{max-width:760px;margin:0 auto;border-top:1px solid var(--line)}
.info-row{display:flex;gap:24px;padding:20px 8px;border-bottom:1px solid var(--line)}
.info-row dt{flex:none;width:150px;font-weight:700;color:var(--green-deep);font-size:14px}
.info-row dd{color:var(--ink);font-size:15px}
.info-row dd small{color:var(--ink-soft);font-size:12.5px}

/* ===== 会社概要ページ：沿革 ===== */
.history{max-width:680px;margin:0 auto;list-style:none}
.history li{display:flex;gap:24px;padding:16px 0;border-bottom:1px dashed var(--line)}
.history .hy{font-family:var(--serif);color:var(--green-deep);font-weight:600;flex:none;width:130px}
.history .ht{color:var(--ink);font-size:15px}

/* ===== 採用：働くということ（クレド訴求） ===== */
.why{background:var(--bg-alt)}
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:860px;margin:0 auto}
.why-card{background:var(--bg);border-radius:16px;padding:30px 32px;border:1px solid var(--line)}
.why-card .wc-num{font-family:var(--serif);font-size:15px;color:var(--terra);font-weight:700;letter-spacing:.1em}
.why-card h3{font-family:var(--serif);font-size:clamp(18px,2.6vw,22px);color:var(--green-deep);margin:8px 0 12px}
.why-card p{font-size:14.5px;color:var(--ink);line-height:1.95}

/* ===== 採用：スタッフの一日タイムライン（①やさしいそら参考） ===== */
.timeline{position:relative;max-width:820px;margin:0 auto}
.timeline::before{content:"";position:absolute;left:87px;top:10px;bottom:10px;width:2px;background:var(--line)}
.tl-item{position:relative;display:grid;grid-template-columns:74px 1fr;gap:40px;padding-bottom:44px}
.tl-item:last-child{padding-bottom:0}
.tl-time{text-align:right;font-family:var(--serif);color:var(--green-deep);font-weight:600;font-size:15px;padding-top:2px}
.tl-node{position:absolute;left:81px;top:5px;width:15px;height:15px;border-radius:50%;background:var(--green);border:3px solid var(--bg-alt);z-index:1}
.tl-body h3{font-family:var(--serif);font-size:18px;color:var(--ink);margin-bottom:6px}
.tl-body p{font-size:14px;color:var(--ink-soft)}
.tl-photo{margin-top:16px;aspect-ratio:16/9;border-radius:12px;background:var(--green-pale);
  display:flex;align-items:center;justify-content:center;color:var(--ink-soft);font-size:13px;
  border:1px dashed var(--terra);text-align:center;padding:12px;overflow:hidden}
.tl-photo.filled{border:none;padding:0;background:none}
.tl-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* ===== 採用：募集職種カード ===== */
.jobs{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:920px;margin:0 auto}
.job{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:28px 30px}
.job.prep{background:var(--green-pale);border-color:transparent}
.job .jtag{display:inline-block;font-size:11px;background:var(--green-pale);color:var(--green-deep);padding:3px 12px;border-radius:999px}
.job.prep .jtag{background:#fff}
.job h3{font-family:var(--serif);font-size:20px;color:var(--ink);margin:12px 0 4px}
.job .jloc{font-size:12.5px;color:var(--ink-soft)}
.jspec{margin-top:16px}
.jrow{display:flex;gap:12px;padding:8px 0;border-top:1px dashed var(--line);font-size:13.5px}
.jrow dt{color:var(--green-deep);font-weight:700;flex:none;width:60px}
.jrow dd{color:var(--ink)}

/* ===== 採用：福利厚生チップ ===== */
.perks{display:flex;flex-wrap:wrap;gap:10px;max-width:800px;margin:0 auto;justify-content:center}
.perk{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:9px 20px;font-size:13.5px;color:var(--ink)}

/* ===== ご利用の流れ（2ルート・番号ステップ） ===== */
.routes{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:900px;margin:0 auto}
.route{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:32px 30px}
.route .rtag{display:inline-block;font-size:12px;background:var(--green-pale);color:var(--green-deep);padding:4px 14px;border-radius:999px;font-weight:700}
.route h3{font-family:var(--serif);font-size:20px;color:var(--ink);margin:14px 0 6px}
.route .rwho{font-size:12.5px;color:var(--ink-soft);margin-bottom:18px}
.steps{list-style:none;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:12px 0 12px 46px;border-bottom:1px dashed var(--line);font-size:14.5px}
.steps li:last-child{border-bottom:none}
.steps li::before{content:counter(s);position:absolute;left:0;top:10px;width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:14px;font-weight:600}

/* ===== ご利用の流れ：タブ＋大きなSTEPカード ===== */
.tabs{display:flex;max-width:820px;margin:0 auto 8px;border-radius:14px 14px 0 0;overflow:hidden;gap:8px}
.tab-btn{flex:1;padding:18px 12px;background:var(--bg);border:1px solid var(--line);border-bottom:none;border-radius:12px 12px 0 0;
  font-family:var(--serif);font-size:clamp(16px,2.6vw,21px);font-weight:600;color:var(--ink-soft);cursor:pointer;transition:.2s}
.tab-btn.active{background:var(--green);color:#fff;border-color:var(--green)}
.tab-btn:hover:not(.active){background:var(--green-pale)}
.tab-panel{display:none}
.tab-panel.active{display:block}
.who-lead{max-width:820px;margin:0 auto 28px;background:var(--green-pale);border-radius:12px;padding:20px 26px}
.who-lead .wl-label{font-size:12px;font-weight:700;color:var(--green-deep);letter-spacing:.06em;margin-bottom:6px}
.who-lead p{font-size:15px;color:var(--ink);line-height:1.9}

.step-list{max-width:820px;margin:0 auto;position:relative}
.step-list::before{content:"";position:absolute;left:27px;top:28px;bottom:28px;width:2px;background:var(--green-pale);z-index:0}
.step{display:grid;grid-template-columns:56px 1fr;gap:20px;padding-bottom:14px;position:relative;z-index:1}
.step:last-child{padding-bottom:0}
.step-badge{width:56px;height:56px;border-radius:12px;background:var(--green);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none}
.step-badge .s{font-size:10px;letter-spacing:.12em;opacity:.9}
.step-badge .n{font-family:var(--serif);font-size:21px;font-weight:600;line-height:1;margin-top:2px}
.step-content{background:var(--bg);border:1.5px solid var(--green-pale);border-radius:14px;padding:16px 22px;font-size:15.5px;color:var(--ink);display:flex;align-items:center;min-height:52px;line-height:1.7}

/* ===== 費用：概算ツール ===== */
.sim-section{background:linear-gradient(180deg,var(--green-pale) 0%,var(--bg) 100%)}
.sim-lead{text-align:center;color:var(--ink-soft);margin:-28px auto 36px;max-width:560px;font-size:15px}
.calc{max-width:660px;margin:0 auto 8px;background:#fff;border:1px solid var(--line);border-top:4px solid var(--green);border-radius:18px;padding:36px 34px;box-shadow:0 16px 44px rgba(184,95,50,.16)}
.calc .cfield{margin-bottom:20px}
.calc label{display:block;font-weight:700;color:var(--green-deep);font-size:14px;margin-bottom:8px}
.calc select{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:10px;font-family:var(--sans);font-size:15px;background:#fff;color:var(--ink)}
.calc-result{margin-top:24px;background:var(--green-pale);border-radius:14px;padding:26px 24px;text-align:center}
.calc-result .rlabel{font-size:13px;color:var(--green-deep);font-weight:700;letter-spacing:.06em}
.calc-result .amt{font-family:var(--serif);font-size:clamp(28px,5vw,38px);color:var(--green-deep);font-weight:600;margin:8px 0}
.calc-result .amt small{font-size:16px;font-weight:400}
.calc-result .rmsg{font-size:14px;color:var(--ink)}
.calc-note{font-size:12px;color:var(--ink-soft);margin-top:18px;line-height:1.85}
.hide{display:none}

/* ===== 料金テーブル（シンプル） ===== */
.price-table{max-width:720px;margin:0 auto;border-top:2px solid var(--green-pale)}
.price-table .prow{display:flex;justify-content:space-between;gap:16px;padding:16px 8px;border-bottom:1px solid var(--line);font-size:15px}
.price-table .prow .pname{color:var(--ink)}
.price-table .prow .pval{font-family:var(--serif);color:var(--green-deep);font-weight:600;flex:none}

/* ===== 保険判定フロー（年齢別） ===== */
.hoken-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:860px;margin:0 auto}
.hf-col{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:26px 20px;text-align:center;display:flex;flex-direction:column;align-items:center}
.hf-age{font-family:var(--serif);font-size:19px;color:var(--green-deep);font-weight:600;padding-bottom:14px;border-bottom:2px solid var(--green-pale);width:100%;margin-bottom:16px}
.hf-cond{font-size:13.5px;color:var(--ink-soft);line-height:1.7;margin-bottom:14px;min-height:38px}
.hf-branch{display:flex;flex-direction:column;gap:10px;width:100%}
.hf-res{padding:10px 12px;border-radius:10px;font-weight:600;font-size:14px}
.hf-res .cond{display:block;font-size:11px;font-weight:400;opacity:.85;margin-bottom:2px}
.hf-res.kaigo{background:var(--green);color:#fff}
.hf-res.iryo{background:var(--terra);color:#fff}
.disease-box{max-width:820px;margin:36px auto 0;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:28px 32px}
.disease-box h3{font-family:var(--serif);font-size:17px;color:var(--green-deep);margin-bottom:16px;text-align:center}
.disease-grid{columns:2;column-gap:32px;font-size:14px;line-height:1.9}
.disease-grid li{break-inside:avoid;list-style:none;padding-left:18px;position:relative;margin-bottom:4px}
.disease-grid li::before{content:"・";position:absolute;left:0;color:var(--green)}

/* ===== FAQ（アコーディオン・native details） ===== */
.faq-list{max-width:820px;margin:0 auto}
.faq-list details{background:var(--bg);border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
.faq-list summary{cursor:pointer;padding:20px 24px;font-family:var(--serif);font-weight:600;color:var(--ink);font-size:16px;display:flex;gap:14px;align-items:flex-start;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary .qmark{color:var(--green);font-weight:700;flex:none}
.faq-list summary .plus{margin-left:auto;color:var(--terra);flex:none;transition:transform .2s;font-size:20px;line-height:1}
.faq-list details[open] summary{background:var(--green-pale)}
.faq-list details[open] summary .plus{transform:rotate(45deg)}
.faq-list .fa{padding:20px 24px 24px;font-size:14.5px;line-height:1.95;color:var(--ink);border-top:1px solid var(--line)}

/* ===== 拠点詳細ページ ===== */
.office-hero-logo{width:118px;height:118px;object-fit:contain;margin:0 auto 18px;display:block}
.area-box{max-width:720px;margin:0 auto;background:var(--green-pale);border-radius:16px;padding:28px 32px;text-align:center}
.area-box .ab-label{font-size:12px;font-weight:700;color:var(--green-deep);letter-spacing:.08em}
/* エリアマップ（対応エリアの色分け） */
.areamap{max-width:520px;margin:0 auto}
.areamap svg{width:100%;height:auto;display:block}
.areamap .tile{font-family:var(--sans);font-size:15px;font-weight:600}
.areamap .tile-sub{font-size:10px;font-weight:400}
.areamap-legend{display:flex;gap:20px;justify-content:center;margin-top:18px;font-size:13px;color:var(--ink-soft)}
.areamap-legend .sw{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:7px}
.area-box p{font-family:var(--serif);font-size:clamp(16px,2.4vw,20px);color:var(--ink);margin-top:10px;line-height:1.8}
.map-btn{text-align:center;margin-top:20px}
.photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:840px;margin:0 auto}
.photo-grid figure{margin:0}
.photo-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;display:block}
.photo-grid figcaption{font-size:12.5px;color:var(--ink-soft);text-align:center;margin-top:8px}
.photo-soon{max-width:840px;margin:0 auto;background:var(--green-pale);border:1px dashed var(--terra);border-radius:16px;padding:44px 24px;text-align:center;color:var(--ink-soft);font-size:14px}

/* ===== サービス紹介 ===== */
.svc-hero{text-align:center;max-width:760px;margin:0 auto 8px}
.svc-hero .svc-tag{display:inline-block;font-size:12px;background:var(--green-pale);color:var(--green-deep);padding:5px 16px;border-radius:999px;font-weight:700}
.svc-hero h2{font-family:var(--serif);font-size:clamp(24px,4vw,32px);margin:16px 0 12px;color:var(--ink)}
.svc-hero p{color:var(--ink-soft);line-height:1.95;font-size:15px}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:960px;margin:40px auto 0}
.feat{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:26px 24px}
.feat h4{font-family:var(--serif);font-size:17px;color:var(--green-deep);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--green-pale)}
.feat ul{list-style:none}
.feat li{padding:6px 0 6px 22px;position:relative;font-size:14.5px;line-height:1.7}
.feat li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700}
.svc-offices{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.svc-office{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px 24px;text-align:center;min-width:200px}
.svc-office .so-name{font-family:var(--serif);font-size:16px;color:var(--green-deep);font-weight:600}
.svc-office .so-area{font-size:12.5px;color:var(--ink-soft);margin-top:4px}
.free-badge{display:inline-block;background:var(--green);color:#fff;font-weight:700;font-size:15px;padding:10px 24px;border-radius:999px;margin-top:8px}

/* ===== お問い合わせ：相談方法＋フォーム ===== */
.contact-methods{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;max-width:720px;margin:0 auto 8px}
.cm-card{flex:1;min-width:200px;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:26px 22px;text-align:center;text-decoration:none;color:var(--ink);transition:.2s}
.cm-card:hover{border-color:var(--green);box-shadow:0 10px 26px rgba(184,95,50,.12)}
.cm-card.line{background:#06C755;border-color:#06C755;color:#fff}
.cm-card.line:hover{background:#05a648}
.cm-card .cm-ico{width:34px;height:34px;margin:0 auto 12px;display:block}
.cm-card .cm-t{font-family:var(--serif);font-size:18px;font-weight:600}
.cm-card .cm-s{font-size:12.5px;margin-top:6px;opacity:.85}

.cform{max-width:680px;margin:0 auto}
.cform .field{margin-bottom:22px}
.cform label{display:block;font-weight:700;color:var(--green-deep);font-size:14px;margin-bottom:8px}
.cform .lbl{display:flex;align-items:center;margin-bottom:8px}
.cform .lbl label{margin-bottom:0}
.cform .req{color:#fff;background:#c0563c;font-size:10px;padding:2px 8px;border-radius:999px;margin-left:8px;vertical-align:middle}
.cform input[type=text],.cform input[type=email],.cform input[type=tel],.cform select,.cform textarea{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:10px;
  font-family:var(--sans);font-size:15px;background:#fff;color:var(--ink)}
.cform textarea{min-height:140px;resize:vertical}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-pale)}
.cform .agree{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.7;background:var(--bg-alt);padding:16px 18px;border-radius:10px}
.cform .agree input{margin-top:4px;flex:none}
.cform .submit{text-align:center;margin-top:28px}
.cform .formnote{text-align:center;font-size:12px;color:var(--ink-soft);margin-top:16px;line-height:1.8}

/* ===== プライバシーポリシー等 文章ページ ===== */
.policy{max-width:820px;margin:0 auto}
.policy .lead{color:var(--ink);line-height:1.95;margin-bottom:8px}
.policy h3{font-family:var(--serif);font-size:19px;color:var(--green-deep);margin:38px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--green-pale)}
.policy p{margin-bottom:14px;line-height:1.95}
.policy ul{margin:10px 0 16px;padding-left:20px;line-height:1.95}
.policy ul li{margin-bottom:4px}
.policy .pdate{text-align:right;color:var(--ink-soft);font-size:13px;margin-top:40px}

/* ===== 資料ダウンロード ===== */
.downloads{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;max-width:800px;margin:0 auto}
.dl-btn{display:inline-flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px 24px;text-decoration:none;color:var(--ink);font-size:15px;font-weight:500;transition:.2s}
.dl-btn:hover{border-color:var(--green);background:var(--green-pale)}
.dl-btn .dico{width:22px;height:22px;color:var(--green-deep);flex:none}
.dl-btn small{display:block;color:var(--ink-soft);font-size:11.5px;font-weight:400;margin-top:2px}
/* 資料準備中：押せない無効状態（データ受領後に <a href> へ戻す） */
.dl-btn.is-soon{opacity:.6;cursor:not-allowed;background:var(--bg-alt);pointer-events:none}
.dl-btn.is-soon .dico{color:var(--ink-soft)}
.dl-btn.is-soon small{color:var(--terra);font-weight:600}

/* ===== お知らせ・コラム（一覧＋記事） ===== */
.post-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.post-card{display:block;background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 28px;text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s,border-color .2s}
a.post-card:hover{border-color:var(--green);box-shadow:0 12px 30px rgba(184,95,50,.12);transform:translateY(-3px)}
.post-meta{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.post-meta .date{font-size:13px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.post-meta .cat{font-size:11px;background:var(--green-pale);color:var(--green-deep);padding:3px 11px;border-radius:999px;font-weight:700;letter-spacing:.02em}
.post-card h2{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink);line-height:1.6}
.post-card .excerpt{font-size:14px;color:var(--ink-soft);margin-top:9px;line-height:1.85}
.post-card .more{display:inline-block;color:var(--terra);font-size:13.5px;margin-top:14px;font-weight:600}
.post-card.notice{cursor:default}
/* カテゴリの色分け：現場から＝テラコッタ塗り（コラム・お知らせは淡いピーチのまま） */
.post-meta .cat.genba,.news-item .cat.genba{background:var(--terra);color:#fff}

/* 記事本文（prose） */
.article{max-width:720px;margin:0 auto}
.article .a-lead{font-family:var(--serif);font-size:clamp(17px,2.6vw,19px);line-height:1.95;color:var(--ink);margin-bottom:8px}
.article h2{font-family:var(--serif);font-size:clamp(20px,3.2vw,23px);font-weight:600;color:var(--green-deep);margin:44px 0 4px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.article h3{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink);margin:30px 0 2px}
.article p{font-size:15.5px;line-height:2.05;color:var(--ink);margin:14px 0}
.article ul{margin:14px 0 14px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.article ul li{position:relative;padding-left:24px;font-size:15px;line-height:1.85;color:var(--ink)}
.article ul li::before{content:"";position:absolute;left:4px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--green)}
.article .callout{background:var(--green-pale);border-radius:14px;padding:20px 24px;margin:26px 0;font-size:14.5px;line-height:1.9;color:var(--ink)}
.article .callout strong{color:var(--green-deep)}
.article .a-cta{margin:44px 0 8px;text-align:center;background:var(--bg-alt);border-radius:16px;padding:32px 28px}
.article .a-cta p{margin:0 0 16px}
.a-back{display:inline-block;margin:36px auto 0;color:var(--ink-soft);font-size:14px;text-decoration:none}
.a-back:hover{color:var(--green-deep)}

/* ===== ページ内・関連リンク ===== */
.related{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.related a{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:10px 22px;text-decoration:none;color:var(--green-deep);font-size:14px;font-weight:500;transition:.2s}
.related a:hover{background:var(--green-pale);border-color:var(--green)}

/* ===== レスポンシブ ===== */
@media(max-width:820px){
  .nav ul{
    display:none;
    position:absolute;top:68px;left:0;right:0;
    flex-direction:column;gap:0;align-items:stretch;
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:6px 0;box-shadow:0 14px 28px rgba(58,42,34,.12);
  }
  header.nav-open .nav ul{display:flex}
  .nav ul li{width:100%}
  .nav ul li a{display:block;width:100%;padding:15px 24px;font-size:15px}
  .nav ul li a.btn-line{margin:8px 24px;text-align:center;border-radius:999px}
  .hamburger{display:block}
  /* インラインの2列指定（例：users.htmlのサービス選択カード）も上書きして、スマホは必ず1列に */
  .gates,.services,.office-grid,.foffices{grid-template-columns:1fr !important}
  .flow{flex-direction:column;align-items:center}
  .flow-arrow{transform:rotate(90deg);padding:8px 0}
  section{padding:64px 0}
  .hero{padding:72px 0 56px}
  .parallax{min-height:560px}  /* スマホは帯を少し低く */
  .info-row{flex-direction:column;gap:4px}
  .info-row dt{width:auto}
  .credo-card{padding:26px 22px}
  .why-grid,.jobs{grid-template-columns:1fr}
  .timeline::before{left:63px}
  .tl-item{grid-template-columns:56px 1fr;gap:24px}
  .tl-node{left:57px}
  .routes{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:1fr}
  .photo-grid{grid-template-columns:1fr}
  .hoken-flow{grid-template-columns:1fr}
  .disease-grid{columns:1}
  .calc{padding:26px 20px}
  .price-table .prow{flex-direction:column;gap:4px}
  /* フロー：フォントは維持し、バッジ間隔と本文余白を詰めて文字域を広げる（より多くのステップが1行に収まる） */
  .step{gap:14px}
  .step-content{padding:15px 18px;text-align:left}
  /* FAQ：フォントは維持し、余白と質問アイコン間隔を詰めてスッキリさせる */
  .faq-list summary{padding:16px 18px;gap:10px}
  .faq-list .fa{padding:16px 18px 20px}
}

/* ── ヒーロー：写真背景バージョン（とうふう苑参考・比較用／不要なら hero--photo クラスを外すだけ） ── */
.hero--photo{position:relative;overflow:hidden;background:#2A1E18;padding:150px 0 104px}
.hero--photo::before{content:"";position:absolute;inset:0;background:url("../images/koko/koko-10.jpg") center 40%/cover;z-index:0}
.hero--photo::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg, rgba(45,33,27,.58) 0%, rgba(45,33,27,.42) 45%, rgba(120,60,35,.52) 100%)}
.hero--photo .wrap{position:relative;z-index:2}
.hero--photo .credo{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.55), 0 0 30px rgba(0,0,0,.3)}
.hero--photo .credo .accent{color:#FFE2C4}
.hero--photo .company{color:rgba(255,255,255,.92)}
.hero--photo .tagline{color:rgba(255,255,255,.88)}
.hero--photo .gate{background:rgba(255,255,255,.96);border-color:rgba(255,255,255,.45)}
.hero-lead,.hero-gates{position:relative;z-index:2}
.hero-bg{display:none}
@media (max-width:767px){
  /* スマホ：写真＋文字は上の"リード"に、白いカードは下のクリーム地に分ける（被らない） */
  .hero--photo{background:var(--bg);padding:0 0 46px;min-height:0;display:block}
  .hero--photo::before,.hero--photo::after{display:none}
  .hero-lead{position:relative;overflow:hidden;background:#2A1E18;padding:118px 0 54px}
  .hero-lead .hero-bg{display:block;position:absolute;left:0;top:-30%;width:100%;height:160%;object-fit:cover;object-position:53% 55%;z-index:0;will-change:transform}
  .hero-lead::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(30,22,17,.5),rgba(30,22,17,.62));pointer-events:none}
  .hero-lead .wrap{position:relative;z-index:2}
  .hero--photo .credo{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.8),0 0 44px rgba(0,0,0,.55)}
  .hero--photo .credo .accent{color:#FFDCB8}
  .hero--photo .company{color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.7)}
  .hero-gates{padding-top:34px}
  .hero--photo .gate{background:#fff;border-color:var(--line)}
  .hero--photo .tagline{color:var(--ink-soft);text-shadow:none}
}



/* ── ヒーローの文字がふわっと入る（読み込み時に"シュッと"上へスライド＋フェード。段差で順に）── */
@keyframes heroRise{from{opacity:0;transform:translateY(42px)}to{opacity:1;transform:translateY(0)}}
.hero .credo   {animation:heroRise 1.1s cubic-bezier(.2,.7,.2,1) .15s both}
.hero .company {animation:heroRise 1.1s cubic-bezier(.2,.7,.2,1) .40s both}
.hero .gates   {animation:heroRise 1.1s cubic-bezier(.2,.7,.2,1) .62s both}
.hero .tagline {animation:heroRise 1.1s cubic-bezier(.2,.7,.2,1) .80s both}
/* スマホ写真ヒーローでは、上の写真帯も軽くフェードイン */
@keyframes heroFade{from{opacity:0}to{opacity:1}}
@media (max-width:767px){ .hero--photo::before{animation:heroFade 1.1s ease both} }
@media (prefers-reduced-motion:reduce){
  .hero .credo,.hero .company,.hero .gates,.hero .tagline{animation-name:heroFade}
  .hero--photo::before{animation:none}
}

/* ── スクロールで各要素がふわっと現れる（reveal）。JS(main.js)が画面に入った要素に .in を付ける ── */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none}
}