/* =========================================================
   page.css ─ 下層ページ共通の型（common.css の後に読む）
   TOPのデザイン言語を踏襲：巨大白抜き英字(.eyebrow.lg)／白カード／
   温白(--paper)と一段落とした地(--paper-2)の交互／キャラクター
   ========================================================= */

/* ---------- ページヘッダー（下層のヒーロー） ----------
   ★TOPは写真ヒーローなのでヘッダーは透明→白。下層は地が明るく、
     透明のままだと白文字のナビが消える。→ <body class="sub"> で
     最初から .scrolled 相当にする（site.js が付ける） */
.page-hero{position:relative;overflow:hidden;background:var(--paper-2);
  padding:calc(72px + clamp(44px,5vw,76px)) 0 clamp(48px,5.4vw,84px);text-align:center;}
.page-hero .wrap{position:relative;z-index:2;}
.page-hero .title{margin-top:calc(-1 * clamp(24px,3.2vw,52px));}   /* 巨大英字に見出しを重ねる */
.page-hero .lead{max-width:660px;margin-left:auto;margin-right:auto;}
/* ヘッダー下の罫（ページヘッダーの地とヘッダーの地が同じ＝境界が消えるため） */
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);}
/* ページヘッダーで遊ぶキャラ（TOPのフッター/PARTNERと同じ使い方） */
.ph-friends{position:absolute;left:0;right:0;bottom:0;height:clamp(46px,5vw,72px);z-index:1;pointer-events:none;}
.ph-friends svg{position:absolute;bottom:0;width:auto;}
.ph-f1{left:6%;height:clamp(30px,3.2vw,46px);}
.ph-f2{left:16%;height:clamp(22px,2.4vw,34px);}
.ph-f3{right:12%;height:clamp(26px,2.8vw,40px);}
.ph-f4{right:4%;height:clamp(20px,2.2vw,30px);}

/* ---------- 写真ヒーロー（about）：横幅いっぱい写真＋左下白ボックス（右上50px丸）＋パンくず右下 ---------- */
.page-hero.hero-photo{padding:0;height:clamp(400px,46vw,600px);text-align:left;background:var(--ink);overflow:visible;}  /* カードを下にはみ出させるため visible */
.page-hero.hero-photo::after{display:none;}
.hero-photo .ph-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.hero-photo .ph-card{position:absolute;left:0;bottom:-60px;z-index:2;background:#FBF9F6;border-radius:0 50px 0 0;  /* 60px下げて下セクションに重ねる */
  padding:clamp(26px,3vw,44px) clamp(34px,4.5vw,60px) clamp(26px,3vw,42px) clamp(22px,4.5vw,72px);
  max-width:min(88%,600px);}
.hero-photo .ph-card .eyebrow{color:var(--accent);font-family:var(--lt);font-size:clamp(13px,1.1vw,15px);font-weight:500;letter-spacing:.2em;text-transform:uppercase;display:block;margin-bottom:10px;}
.hero-photo .ph-card .title{font-size:clamp(28px,3.6vw,44px);line-height:1.4;margin:0;}
.hero-photo .ph-card .lead{margin:14px 0 0;max-width:none;}
.hero-photo .ph-crumb{position:absolute;left:auto;top:auto;right:clamp(16px,2.2vw,34px);bottom:clamp(14px,1.8vw,26px);z-index:2;margin:0;justify-content:flex-end;text-shadow:0 1px 6px rgba(0,0,0,.55);}
.hero-photo .ph-crumb a,.hero-photo .ph-crumb .cur,.hero-photo .ph-crumb .sep{color:#fff;}
@media(max-width:640px){
  .page-hero.hero-photo{height:clamp(330px,84vw,430px);}
  .hero-photo .ph-card{max-width:92%;border-radius:0 34px 0 0;}
  .hero-photo .ph-crumb{top:12px;bottom:auto;}   /* 白ボックスと被らないよう上へ */
}

/* ---------- パンくず ---------- */
.crumb{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;
  margin:0 0 clamp(14px,1.6vw,22px);font-size:12px;color:var(--ink-2);letter-spacing:.04em;}
.crumb a{color:var(--ink-2);transition:color .2s;}
.crumb a:hover{color:var(--accent);}
.crumb .sep{color:var(--ink-3);}
.crumb .cur{color:var(--ink);font-weight:500;}

/* ---------- 沿革（タイムライン） ---------- */
.tl{position:relative;margin-top:clamp(46px,5vw,72px);}
.tl::before{content:"";position:absolute;left:calc(clamp(64px,7vw,104px) / 2);top:8px;bottom:8px;width:2px;
  background:repeating-linear-gradient(180deg,var(--line) 0 6px,transparent 6px 12px);}
.tl-row{position:relative;display:grid;grid-template-columns:clamp(64px,7vw,104px) minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(18px,2.4vw,40px);align-items:start;padding-bottom:clamp(38px,4.2vw,64px);}
.tl-row:last-child{padding-bottom:0;}
.tl-dot{position:relative;z-index:1;display:flex;justify-content:center;padding-top:4px;}
.tl-dot span{width:33px;height:33px;border-radius:50%;background:var(--accent);border:6px solid var(--paper);
  box-shadow:0 0 0 1.5px var(--line);}  /* 13→33px（約2.5倍） */
/* スクロールインで●が大きくなったり小さくなったり（パルス） */
@keyframes tlPulse{0%,100%{transform:scale(1);}45%{transform:scale(1.3);}}
.tl.reveal .tl-dot span{animation:tlPulse 2.4s ease-in-out infinite;}
.tl.reveal .tl-row:nth-child(2) .tl-dot span{animation-delay:.35s;}
.tl.reveal .tl-row:nth-child(3) .tl-dot span{animation-delay:.7s;}
.tl.reveal .tl-row:nth-child(4) .tl-dot span{animation-delay:1.05s;}
.tl.reveal .tl-row:nth-child(5) .tl-dot span{animation-delay:1.4s;}
.tl.reveal .tl-row:nth-child(6) .tl-dot span{animation-delay:1.75s;}
.tl.reveal .tl-row:nth-child(7) .tl-dot span{animation-delay:2.1s;}
.tl.reveal .tl-row:nth-child(8) .tl-dot span{animation-delay:2.45s;}
.tl.reveal .tl-row:nth-child(9) .tl-dot span{animation-delay:2.8s;}
@media(prefers-reduced-motion:reduce){.tl.reveal .tl-dot span{animation:none!important;}}
.tl-year{font-family:var(--lt);font-size:clamp(26px,2.6vw,38px);font-weight:600;letter-spacing:.04em;
  line-height:1;color:var(--accent);margin:0 0 12px;}
.tl-ttl{font-size:clamp(17px,1.35vw,20px);font-weight:700;line-height:1.6;margin:0 0 10px;}
.tl-txt{color:var(--ink-2);font-size:15px;line-height:2;margin:0;}
.tl-ph .ph-in{aspect-ratio:4/3;}
.tl-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:clamp(10px,1.1vw,16px);display:block;background:var(--line-2);}
.tl-cap{display:block;margin-top:8px;font-size:12px;line-height:1.7;color:var(--ink-3);letter-spacing:.04em;}

/* ---------- 数字 ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,22px);margin-top:clamp(40px,4.4vw,64px);}
/* 楕円の白ボックス（TOP事業内容のブロブカードと同じ言語） */
.stat{background:#fff;border-radius:clamp(46px,6.5vw,110px);padding:clamp(42px,4.8vw,68px) clamp(16px,1.6vw,24px);
  text-align:center;transition:transform .3s;display:flex;flex-direction:column;justify-content:center;}
.stat:hover{transform:translateY(-6px);}
.stat-num{display:flex;align-items:baseline;justify-content:center;gap:4px;}
/* ★64→80px（PC1440基準）。1440でちょうど80pxになる vw で組む */
.stat-num b{font-family:var(--lt);font-size:clamp(46px,5.56vw,80px);font-weight:600;line-height:1;color:inherit;}
.stat-num span{font-size:clamp(15px,1.25vw,18px);font-weight:700;color:inherit;opacity:.9;}
/* 数字をカラフルに（TOP事業内容のキャラ配色） */
.stats .stat:nth-of-type(1) .stat-num{color:#e0503b;}
.stats .stat:nth-of-type(2) .stat-num{color:#1f9d97;}
.stats .stat:nth-of-type(3) .stat-num{color:#C0762E;}
.stats .stat:nth-of-type(4) .stat-num{color:#8f5bc4;}
.stat-lb{margin:12px 0 0;font-size:clamp(15px,1.25vw,18px);line-height:1.7;color:var(--ink);letter-spacing:.04em;}  /* (14px)/(色) */
.note{margin:clamp(16px,1.8vw,24px) 0 0;font-size:12px;color:var(--ink-3);line-height:1.8;}  /* 最小12px（web-font-sizing） */

/* ---------- 業績グラフ（実績値の確定後に差し替え） ---------- */
.chart{background:#fff;border-radius:clamp(16px,1.6vw,22px);padding:clamp(24px,2.8vw,42px);margin-top:clamp(28px,3vw,44px);}
.chart-hd{display:flex;align-items:baseline;justify-content:center;text-align:center;gap:16px;flex-wrap:wrap;margin-bottom:clamp(20px,2.2vw,32px);position:relative;}  /* 中央 */
.chart-ttl{font-size:32px;font-weight:700;margin:0;border-bottom:2px dotted var(--ink-3);padding-bottom:10px;}  /* 24→32＋点線下線 */
.chart-up{position:absolute;right:0;top:50%;transform:translateY(-50%);font-family:var(--lt);font-size:14px;font-weight:600;letter-spacing:.08em;color:var(--accent);}  /* 12→14・右端 */
@media(max-width:640px){  /* SPは見出しが折返すので増収基調を下に回して重なり回避 */
  .chart-hd{flex-direction:column;align-items:center;}
  .chart-up{position:static;transform:none;margin-top:8px;align-self:flex-end;}
}
.bars{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.4vw,22px);align-items:end;
  height:clamp(150px,17vw,232px);padding-top:8px;
  background:repeating-linear-gradient(0deg,var(--line-2) 0 1px,transparent 1px 25%);}
.bar{display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:8px;text-align:center;}
.bar i{display:block;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--accent) 0%,#dfa869 100%);}
.bar em{font-family:var(--lt);font-size:12px;font-style:normal;color:var(--ink-3);letter-spacing:.04em;}

/* ---------- 事実カード（でWORK STYLE削除→2枚を横いっぱいに） ---------- */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.6vw,26px);margin-top:clamp(40px,4.4vw,64px);}
.fact{background:#fff;border-radius:clamp(16px,1.6vw,22px);padding:clamp(24px,2.6vw,36px);}
.fact-lb{font-family:var(--lt);font-size:16px;font-weight:600;letter-spacing:.16em;color:var(--accent);display:block;margin-bottom:12px;}  /* 12→16 */
.fact-ttl{font-size:24px;font-weight:700;line-height:38px;margin:0 0 10px;}  /* →20→24 */
.fact-txt{color:var(--ink-2);font-size:15px;line-height:2;margin:0;}          

/* ---------- 行動指針 ---------- */
.values{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.2vw,18px);margin-top:clamp(40px,4.4vw,64px);}
/* それぞれ違うイレギュラー（キャラのような）白図形で囲う */
.value{background:#fff;padding:clamp(24px,2.6vw,36px) clamp(16px,1.6vw,24px);box-shadow:0 8px 24px rgba(60,45,25,.09);}
.values .value:nth-child(1){border-radius:64% 36% 56% 44% / 58% 54% 46% 42%;}
.values .value:nth-child(2){border-radius:38% 62% 46% 54% / 50% 43% 57% 50%;}
.values .value:nth-child(3){border-radius:57% 43% 63% 37% / 43% 58% 42% 57%;}
.values .value:nth-child(4){border-radius:45% 55% 38% 62% / 57% 46% 54% 43%;}
.values .value:nth-child(5){border-radius:60% 40% 47% 53% / 52% 61% 39% 48%;}
.value{text-align:center;}  /* 中央揃え */
.value-no{font-family:var(--lt);font-size:clamp(26px,2.8vw,40px);font-weight:600;line-height:1;color:var(--line);display:block;margin-bottom:14px;}  /* 拡大 */
.value-tx{font-size:18px;font-weight:700;line-height:34px;margin:0;}  /* →18px・行間34 */

/* ---------- ブランドコピー着地 ---------- */
.promise{background:var(--paper);text-align:center;}
/* Our Promise を筆記体(Homemade Apple)で大きく・-5度・左→右にふわっと・下の見出しに少し重ねる */
.promise .eyebrow{font-family:"Homemade Apple",cursive;text-transform:none;letter-spacing:0;font-weight:400;
  font-size:clamp(28px,3.5vw,50px);line-height:1.05;color:#dcb488;display:inline-block;  /* 76→50 / 色を薄く */
  transform:translateY(-30px) rotate(-5deg);transform-origin:center;position:relative;z-index:2;  /* 筆記体を30px上へ */
  margin-bottom:clamp(-22px,-1.8vw,-12px);}
.s.promise.anim .eyebrow{opacity:0;}                                    /* JS有効時のみ登場前は隠す */
.s.promise.reveal .eyebrow{animation:promiseWipe 1.15s cubic-bezier(.22,.7,.28,1) both;}
@keyframes promiseWipe{from{opacity:0;clip-path:inset(0 100% 0 0);}to{opacity:1;clip-path:inset(0 0 0 0);}}
@media(prefers-reduced-motion:reduce){.s.promise.anim .eyebrow{opacity:1!important;}.s.promise.reveal .eyebrow{animation:none!important;}}
.promise-cp{font-size:clamp(22px,2.9vw,40px);font-weight:900;line-height:1.55;letter-spacing:.01em;margin:0;position:relative;z-index:1;}
.promise-tx{color:var(--ink-2);font-size:15px;line-height:2.1;margin:clamp(18px,2vw,26px) auto 0;max-width:640px;}

/* ---------- セクション見出し＝TOP事業内容と統一（巨大白抜き英字＋日本語見出しを重ねる・全下層共通） ----------
   eyebrow に .lg（common.css の巨大白抜き）を付与し、s-head を中央寄せ＋h2をその上に重ねる。TOP #business と同値。 */
.s-head{margin-left:auto;margin-right:auto;text-align:center;}
.s-head .eyebrow.lg{margin-bottom:clamp(8px,1.1vw,16px);}
.s-head .eyebrow.lg + .title{margin-top:clamp(-70px,-4.9vw,-26px);position:relative;}

/* ---------- 売上高グラフ（クリアな棒／左→右にふわっと出現→右端の棒にキャラが降ってきて跳ねる） ----------
   ★棒は「絶対配置＋bottom基準の%高さ」。flex子の%高さはSafari等で0になり消えるため。 */
.cchart{margin-top:clamp(20px,2.4vw,32px);}
.cchart-plot{position:relative;height:clamp(220px,25vw,320px);margin-bottom:clamp(30px,3.4vw,44px);border-bottom:2px solid var(--line);}
.cbars{position:absolute;inset:0;display:flex;align-items:stretch;gap:clamp(8px,1.4vw,22px);padding:0 clamp(4px,1vw,14px);}
.cbar-col{position:relative;flex:1;height:100%;min-width:0;}
.cbar{position:absolute;left:0;right:0;bottom:0;margin-left:auto;margin-right:auto;width:min(100%,clamp(22px,3.6vw,58px));
  border-radius:12px 12px 0 0;transform-origin:bottom center;
  background:linear-gradient(180deg,var(--accent) 0%,#e2b482 100%);}
.cbar-col.plan .cbar{background:linear-gradient(180deg,#d59a5c 0%,#eccaa4 100%);}
.cbar-lb{position:absolute;top:100%;left:0;right:0;margin-top:12px;text-align:center;
  font-family:var(--lt);font-size:clamp(11px,1vw,13px);color:var(--ink-2);letter-spacing:.02em;white-space:nowrap;}
.cbar-lb small{display:block;font-size:10px;color:var(--ink-3);letter-spacing:.06em;margin-top:1px;}
/* 右端(27年度)の棒の上で上下に跳ねるキャラ */
.cbar-hero{position:absolute;left:0;right:0;bottom:100%;margin-left:auto;margin-right:auto;width:clamp(30px,4vw,52px);}
.cbar-hero-in{display:block;animation:cHop 1.05s ease-in-out infinite;}
.cbar-hero svg{display:block;width:100%;height:auto;filter:drop-shadow(0 3px 3px rgba(60,45,25,.16));}
@keyframes cHop{0%,100%{transform:translateY(0);}50%{transform:translateY(-18px);}}

/* 登場：JS有効時のみ初期非表示→スクロールで左から順にふわっと→最後に右端へキャラ降下（JS無効/reduced-motionは最初から表示） */
.cchart.anim .cbar,.cchart.anim .cbar-hero{opacity:0;}
.cchart.reveal .cbar{animation:barRise .6s cubic-bezier(.2,.7,.3,1) both;}
.cchart.reveal .cbar-col:nth-child(1) .cbar{animation-delay:0s;}
.cchart.reveal .cbar-col:nth-child(2) .cbar{animation-delay:.13s;}
.cchart.reveal .cbar-col:nth-child(3) .cbar{animation-delay:.26s;}
.cchart.reveal .cbar-col:nth-child(4) .cbar{animation-delay:.39s;}
.cchart.reveal .cbar-col:nth-child(5) .cbar{animation-delay:.52s;}
.cchart.reveal .cbar-col:nth-child(6) .cbar{animation-delay:.65s;}
.cchart.reveal .cbar-hero{animation:barDrop .62s cubic-bezier(.5,0,.85,.4) 1.05s both;}
@keyframes barRise{from{opacity:0;transform:translateY(16px) scaleY(.5);}to{opacity:1;transform:translateY(0) scaleY(1);}}
@keyframes barDrop{from{opacity:0;transform:translateY(-120px);}60%{opacity:1;}to{opacity:1;transform:translateY(0);}}
@media(prefers-reduced-motion:reduce){
  .cchart.anim .cbar,.cchart.anim .cbar-hero{opacity:1!important;}
  .cchart.reveal .cbar,.cchart.reveal .cbar-hero{animation:none!important;}
  .cbar-hero-in{animation:none!important;}
}

/* ---------- Our Promise：キャラが四方から店に集まり飛び跳ねる ---------- */
.pr-scene{position:relative;max-width:800px;margin:clamp(34px,4.4vw,58px) auto 0;aspect-ratio:640/300;}  /* もう少し大きく */
.pr-store{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.pr-store .pr-ground{stroke:var(--line);stroke-width:2.5;}
.pr-ch{position:absolute;transform:translate(0,0);}
.pr-ch-in{display:block;}
.pr-ch svg{display:block;width:100%;height:auto;filter:drop-shadow(0 3px 3px rgba(60,45,25,.14));}
@keyframes prArrive{from{transform:translate(var(--fx),var(--fy)) scale(.5);opacity:0;}60%{opacity:1;}to{transform:translate(0,0) scale(1);opacity:1;}}
.pr-scene.anim .pr-ch{opacity:0;}                 /* JS有効時のみ初期非表示（登場前）。JS無効なら最終状態で見える */
/* セクション突入で四隅からゆっくり集合（ease-out・長め・stagger大） */
.pr-scene.arrive .pr-ch{animation:prArrive 1.9s cubic-bezier(.2,.65,.25,1) both;}
.pr-scene.arrive .pc2{animation-delay:.16s;}
.pr-scene.arrive .pc3{animation-delay:.32s;}
.pr-scene.arrive .pc4{animation-delay:.48s;}
.pr-scene.arrive .pc5{animation-delay:.64s;}
.pr-scene.arrive .pc6{animation-delay:.80s;}
.pr-scene.arrive .pc7{animation-delay:.96s;}
@media(prefers-reduced-motion:reduce){
  .pr-ch-in{animation:none!important;}
  .pr-scene.arrive .pr-ch{animation:none!important;}
}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .tl-row{grid-template-columns:clamp(44px,9vw,64px) minmax(0,1fr);}
  .tl::before{left:calc(clamp(44px,9vw,64px) / 2);}
  .tl-ph{grid-column:2;margin-top:16px;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .facts{grid-template-columns:1fr;}
  .values{grid-template-columns:repeat(2,1fr);}
  .bars{gap:8px;}
}
@media(max-width:560px){
  .values{grid-template-columns:1fr;}
  .value{display:flex;flex-direction:column;align-items:center;gap:8px;}
  .value-no{margin-bottom:0;}
}

/* ---------- about・SP=640以下 ---------- */
@media(max-width:640px){
  /* 下層ヒーローのキャプションカードを50px下へ（全下層ページ共通） */
  .hero-photo .ph-card{transform:translateY(50px);}
  /* グラフ見出し 32→24px／行間 59.2→40px */
  .chart-ttl{font-size:24px;line-height:40px;}
  /* 行動指針の間隔25px／→2列×2段＋5枚目は下段中央（2-2-1） */
  .values{grid-template-columns:repeat(2,1fr);gap:25px;}
  .values .value:nth-child(5){grid-column:1 / -1;justify-self:center;width:calc(50% - 13px);}
  /* プロミス文の手動改行をSPで解除し自然折返し */
  .promise-tx br{display:none;}
  /* →統一：ヒーロー(.page-hero)直後の最初のセクションの上余白を80pxに。
     ＝ph-cardを50px下げた分、下セクションとの余白をaboutと同じ間合いに全page-heroページで揃える。
     ★グローバル.wrapには当てず「page-hero直後の.s>.wrap」だけにスコープ。rc-mv2系(recruit)は対象外。 */
  .page-hero + .s > .wrap{padding-top:80px;}
}

/* ---------- partner等・SP ---------- */
@media(max-width:640px){
  /* 実績ラベル .fact-lb 16→14px */
  .fact-lb{font-size:14px;}
}

/* ---------- 売上高グラフに金額を出す ----------
   棒の上に金額を置く。右端(27年度)はキャラが同じ位置に来るので、キャラだけ数字の上へ逃がす。 */
.cbar-val{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin-bottom:8px;
  font-family:var(--lt);font-weight:700;font-size:clamp(13px,1.3vw,18px);line-height:1;
  color:var(--ink);letter-spacing:.02em;white-space:nowrap;}
.cbar-val small{font-size:.62em;font-weight:500;color:var(--ink-2);margin-left:2px;letter-spacing:.04em;}
.cbar-col.plan .cbar-val{color:var(--ink-2);}
.cbar-hero{margin-bottom:clamp(26px,2.6vw,34px);}
@media(max-width:640px){
  /* SPは1列55px前後しかない＝「100億円」が入るところまで詰める */
  .cbar-val{font-size:12px;margin-bottom:6px;}
  .cbar-val small{font-size:.66em;margin-left:1px;}
}