/* =========================================================
   common.css ─ 全ページ共通（アムリード）
   ★ここを直すと全ページに効く。ページ固有は各ページのCSSへ。
   ========================================================= */

/* ===== トークン・ベース・共通パーツ(.wrap/.eyebrow/.title/.lead/.btn) ===== */
:root{
  --paper:#FBF9F6; --paper-2:#F2EEE7; --ink:#232019; --ink-2:#6f6a60; --ink-3:#9a938a;
  --line:#e7e1d6; --line-2:#f0ebe2; --accent:#C0762E; --accent-d:#a2621f; --green:#3C5A4A; --ring:#5aa469;
  --wrap:1440px; --gut:clamp(24px,5vw,80px); --r:14px;
  --jp:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,sans-serif;
  --lt:"Poppins",var(--jp);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--jp);font-weight:400;line-height:1.85;-webkit-font-smoothing:antialiased;text-size-adjust:100%;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);}
/* 画面端まで抜くフルブリード */
.bleed{width:100vw;margin-left:calc(50% - 50vw);}
.eyebrow{font-family:var(--lt);font-size:12px;font-weight:500;letter-spacing:.22em;color:var(--accent);text-transform:uppercase;display:block;margin-bottom:14px;}
.title{font-size:clamp(26px,3.8vw,46px);font-weight:700;line-height:1.4;letter-spacing:.01em;margin:0;}
.lead{color:var(--ink-2);font-size:clamp(15px,1.05vw,16px);line-height:2;margin:18px 0 0;}
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--jp);font-size:14px;font-weight:500;padding:13px 26px;border:1px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);transition:.25s;cursor:pointer;}
.btn:hover{background:var(--ink);color:var(--paper);}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn.primary:hover{background:var(--accent-d);border-color:var(--accent-d);}
.btn.ghost{border-color:var(--line);color:var(--ink-2);}
.btn.ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.arrow{transition:transform .25s;}
a:hover .arrow{transform:translateX(3px);}


/* ===== Header（ドロップダウン含む） ===== */
/* ---------- Header (透明オーバーレイ → スクロールで白) ---------- */
.head{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;border-bottom:1px solid transparent;transition:background .35s,backdrop-filter .35s,border-color .35s,box-shadow .35s;}
.head.scrolled{background:rgba(251,249,246,.9);backdrop-filter:blur(10px);border-bottom-color:var(--line-2);box-shadow:0 4px 20px -12px rgba(60,40,20,.4);}
/* ★採用ページ配下（body.rc）はヘッダーの地・罫・影をすべて無し。
   .scrolled は外さない：外すと :not(.scrolled) の白抜きナビが効いて、
   明るいヒーローの上で文字が消える。地だけ透明にして文字色は暗いまま保つ。 */
body.rc .head.scrolled{background:transparent;backdrop-filter:none;
  border-bottom-color:transparent;box-shadow:none;}
.head-in{display:flex;align-items:center;justify-content:space-between;height:72px;padding-left:0;padding-right:0;}
.logo{font-family:var(--lt);font-size:24px;font-weight:600;letter-spacing:.14em;color:var(--ink);display:inline-flex;align-items:center;}
.logo-img{height:30px;width:auto;display:block;transition:filter .35s;}
/* トップ（透明時）はロゴ・ナビを白抜きで写真に載せる */
.head:not(.scrolled) .logo-img{filter:brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0,0,0,.4));}
.gnav{display:flex;align-items:center;gap:30px;margin-left:auto;margin-right:28px;}
.gn-item{position:relative;display:flex;align-items:center;}
/* ★ 白抜き・下線アニメは第1階層(.gn-link)だけ。ドロップダウン内(.gn-sub a)に漏らさない */
.gnav .gn-link{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:500;color:var(--ink);position:relative;padding:6px 0;transition:color .35s;}
.head:not(.scrolled) .gnav .gn-link{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.45);}
.gnav .gn-link::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--accent);transition:.25s;}
.gnav .gn-link:hover::after,.gn-item:hover .gn-link::after{width:100%;}
.gn-caret{flex:none;width:9px;height:auto;transition:transform .25s;}
.gn-item:hover .gn-caret,.gn-item:focus-within .gn-caret{transform:rotate(180deg);}
/* ドロップダウン：padding-top がヘッダー下端までの“ホバーの橋”を兼ねる（隙間を空けると閉じてしまう） */
.gn-sub{position:absolute;top:100%;left:50%;z-index:5;padding-top:28px;min-width:238px;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-50%) translateY(6px);
  transition:opacity .25s,transform .25s,visibility .25s;}
.gn-item:hover .gn-sub,.gn-item:focus-within .gn-sub{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.gn-sub-in{background:#fff;border:1px solid var(--line-2);border-radius:var(--r);padding:8px;
  box-shadow:0 20px 44px -16px rgba(60,40,20,.4);}
.gn-sub a{display:block;padding:9px 14px;border-radius:9px;color:var(--ink);transition:background .2s,color .2s;}
.gn-sub a:hover{background:var(--paper-2);color:var(--accent);}
.gn-sub .ja{display:block;font-size:14px;font-weight:500;line-height:1.5;}
.gn-sub .en{display:block;font-family:var(--lt);font-size:12px;font-weight:500;letter-spacing:.12em;color:var(--ink-3);line-height:1.6;}
.gn-sub a:hover .en{color:var(--accent);}
.head-cta{display:flex;align-items:center;gap:12px;}
.menu-btn{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;}
.menu-btn span{width:24px;height:2px;background:var(--ink);transition:.3s,background .35s;}
.head:not(.scrolled) .menu-btn span{background:#fff;}


/* ===== Section base ===== */
/* ---------- Section base ---------- */
section{position:relative;}
section[id]{scroll-margin-top:80px;}
.s{padding:clamp(72px,10vw,132px) 0;}
.s-head{max-width:760px;}
.s-head.center{margin:0 auto;text-align:center;}


/* ===== Footer ===== */
/* ---------- Footer ---------- */
/* ---------- Footer（巨大な白英字を上端で切って敷き、縦組みキャッチを重ねる） ---------- */
.foot{background:var(--paper-2);color:var(--ink);padding:0 0 clamp(28px,3vw,44px);overflow:hidden;}
/* ナビ/会社情報の版面をヘッダー（.wrap head-in ＝ padding0）と一致させる */
.foot-in{padding-left:0;padding-right:0;}
/* PLAYGROUND：min(vw,px)で常に版面いっぱい。top:-.2em＝自身のfont-size基準で上端を切る */
.foot-hero{position:relative;padding-top:clamp(56px,7.4vw,108px);padding-bottom:clamp(60px,8vw,120px);}
.foot-big{position:absolute;top:-.2em;left:50%;transform:translateX(-50%);width:max-content;margin:0;z-index:0;
  font-family:var(--lt);font-weight:700;font-size:15.1vw;line-height:1;letter-spacing:-.015em;
  color:#fff;white-space:nowrap;user-select:none;}
.foot-hero-in{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;max-width:var(--wrap);margin:0 auto;padding:0;}
.foot-catch{margin:0;writing-mode:vertical-rl;text-orientation:mixed;
  font-size:clamp(19px,2.55vw,37px);line-height:1.9;letter-spacing:.08em;font-weight:700;color:var(--ink);}
.foot-brand{flex:none;}
.foot .logo-img{height:clamp(28px,3.4vw,50px);filter:none;opacity:1;}
/* フッター：サイトマップ上部の罫の上で、ヒーロー下クレーン帯のキャラが遊ぶ（跳ねる/回る） */
.foot-play{position:relative;height:clamp(104px,10.8vw,156px);pointer-events:none;}
.fp{position:absolute;bottom:0;display:block;height:auto;filter:drop-shadow(0 6px 5px rgba(60,45,25,.14));}
.fp1{left:1%;width:clamp(72px,7vw,100px);animation:fpHop 2.4s ease-in-out infinite;}
.fp2{left:13%;width:clamp(58px,5.4vw,78px);animation:fpSpin 5.2s ease-in-out infinite .4s;transform-origin:50% 64%;}
.fp3{left:23%;width:clamp(66px,6.2vw,90px);animation:fpBob 2.9s ease-in-out infinite .7s;}
.fp4{left:34%;width:clamp(54px,5vw,72px);animation:fpHop 2.1s ease-in-out infinite 1.1s;}
.fp5{right:1%;left:auto;width:clamp(60px,5.8vw,84px);animation:fpSpin 6s ease-in-out infinite 1.6s;transform-origin:50% 64%;}
@keyframes fpHop{0%,58%,100%{transform:translateY(0);}74%{transform:translateY(-38px);}88%{transform:translateY(0);}}
@keyframes fpSpin{0%,55%{transform:rotate(0);}78%,100%{transform:rotate(360deg);}}
@keyframes fpBob{0%,100%{transform:translateY(0) rotate(-5deg);}50%{transform:translateY(-13px) rotate(5deg);}}
@media(prefers-reduced-motion:reduce){.fp,.pt-ch{animation:none!important;}}
/* ナビ帯（上下に罫） */
.foot-nav{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:clamp(36px,4.4vw,64px) 0;
  border-top:1px solid rgba(35,32,25,.3);border-bottom:1px solid rgba(35,32,25,.3);}
.foot-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:clamp(16px,2.5vw,36px);}
.foot-nav li{margin:0;}
.foot-nav a{font-size:14px;font-weight:500;color:var(--ink);transition:opacity .2s;}
.foot-nav a:hover{opacity:.55;}
.foot-sns{flex:none;display:flex;align-items:center;gap:16px;padding-left:clamp(18px,2.4vw,34px);border-left:1px solid rgba(35,32,25,.3);}
.foot-sns a{display:block;color:var(--ink);transition:opacity .2s;}
.foot-sns a:hover{opacity:.55;}
.foot-sns svg{width:24px;height:24px;display:block;}
/* 会社情報＋コピーライト＋GO TOP */
.foot-info{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-top:clamp(32px,4vw,58px);}
.foot-co p{margin:0;font-size:13px;line-height:1.9;color:var(--ink);}
.foot-co .nm{font-weight:700;margin-right:14px;}
/* ★ .foot-co p(0,1,1) が .foot-cr(0,1,0) に特異度で勝つ＝クラス側の指定は全部死ぬ。必ず p を含めて書く */
.foot-co p.foot-cr{margin:10px 0 0;font-size:12px;}
.foot-top{flex:none;display:inline-flex;align-items:center;gap:8px;font-family:var(--lt);font-size:12px;font-weight:500;letter-spacing:.1em;
  border:1px solid var(--ink);border-radius:999px;padding:11px 20px;color:var(--ink);transition:.25s;}
.foot-top:hover{background:var(--ink);color:var(--paper);}
.foot-top svg{width:11px;height:11px;display:block;}


/* ★ヘッダー/フッターは版面(1440px)の端に合わせる設計＝padding0のため、13インチ等の
   版面幅以下ではロゴ・ナビが画面端に貼り付き両サイドの余白が消える。PC/ラップトップに
   最小ガターを与える（本文.wrapのgutより控えめ＝ヘッダーは広めの意図を保つ）。SPは既存の調整値のまま。 */
@media(min-width:901px){
  /* foot-hero-in も同じガター＝フッターのキャッチ左端をヘッダーロゴ左に、右ロゴ右端をヘッダー採用CTA右に揃える */
  .head-in,.foot-in,.foot-hero-in{padding-left:var(--gut);padding-right:var(--gut);}
}

/* ===== Mobile fixed CTA ===== */
/* ---------- Mobile fixed CTA ---------- */
.sp-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(35,32,25,.96);backdrop-filter:blur(6px);padding:10px 12px;gap:8px;}
.sp-cta a{flex:1;text-align:center;justify-content:center;font-size:13px;padding:12px 8px;}


/* ===== Drawer ===== */
/* ---------- Drawer ---------- */
.drawer{position:fixed;inset:0;z-index:60;visibility:hidden;opacity:0;transition:.3s;}
.drawer.open{visibility:visible;opacity:1;}
.drawer-bd{position:absolute;inset:0;background:rgba(20,16,10,.5);}
.drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(84vw,340px);background:var(--paper);padding:28px 26px;transform:translateX(100%);transition:.35s;overflow-y:auto;}
.drawer.open .drawer-panel{transform:translateX(0);}
.drawer-close{position:absolute;top:18px;right:18px;background:none;border:0;font-size:26px;cursor:pointer;color:var(--ink);}
.drawer nav a{display:block;padding:15px 0;border-bottom:1px solid var(--line-2);font-size:16px;font-weight:500;}
/* ★ ドロワーの下層：.drawer nav a は共用なので上書きで打ち消す（下線・サイズ・太さ） */
.dw-sub{padding-left:14px;border-left:2px solid var(--line);margin:8px 0 10px;}
.drawer nav .dw-sub a{padding:8px 0;border-bottom:0;font-size:14px;font-weight:400;color:var(--ink-2);}
.drawer nav .dw-sub a:hover{color:var(--accent);}
.drawer .btn{margin-top:22px;width:100%;justify-content:center;}


/* ===== Responsive（共通分） ===== */
@media(max-width:900px){
  .gnav,.head-cta .btn{display:none;}
  .menu-btn{display:flex;}
  .foot-hero-in{flex-direction:column;align-items:flex-start;gap:32px;}
  .foot-nav{flex-direction:column;align-items:flex-start;gap:26px;}
  .foot-sns{padding-left:0;border-left:0;}
  .foot-info{flex-direction:column;align-items:flex-start;gap:26px;}
  .sp-cta{display:flex;}
  body{padding-bottom:64px;}
}
@media(max-width:560px){
  .wrap{padding-left:18px;padding-right:18px;}
  .foot-nav ul{gap:14px 20px;}
}

/* ---------- フッター・SP＋SP改行ヘルパ ---------- */
/* SP専用の改行。PCでは詰めて表示し、640以下でのみ改行する */
.spbr{display:none;}
@media(max-width:640px){
  .spbr{display:inline;}
  /* フッターのサイトマップ(ul)はSPで隠す（ナビはドロワー／下部固定CTAに集約） */
  .foot-nav ul{display:none;}
  /* フッターのキャッチ（縦組み）を中央寄せに／各行は上揃え */
  .foot-hero-in{align-items:center;}
  .foot-catch{text-align:start;}
  /* →フッターナビ帯の下余白 36→20px＋上下の罫を消す */
  .foot-nav{padding-bottom:20px;border-top:0;border-bottom:0;}
  /* フッターヒーローの余白 上56→80 / 下60→0 */
  .foot-hero{padding:80px 0 0;}
  /* 会社名 13→16px */
  .foot-co .nm{font-size:16px;}
}

/* ===== 共通コンポーネント（下層ページでも使う） ===== */
/* ピルボタン（共通形）。地色に応じて配色だけ差し替える */
.pill-btn{display:inline-flex;align-items:center;gap:clamp(14px,1.4vw,22px);border-radius:999px;
  padding:clamp(10px,.9vw,13px) clamp(12px,1.1vw,16px) clamp(10px,.9vw,13px) clamp(22px,2.2vw,32px);
  font-size:clamp(14px,1.05vw,16px);font-weight:700;transition:transform .25s;}
.pill-btn:hover{transform:translateY(-3px);}
.pill-btn .cir{flex:none;width:clamp(30px,2.3vw,34px);height:clamp(30px,2.3vw,34px);border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:transform .25s;}
.pill-btn .cir svg{width:13px;height:auto;display:block;}
.pill-btn:hover .cir{transform:translateX(3px);}
/* 「もっと見る」型の横長リンク（テキスト＋英字＋右端の矢印＋下の破線） */
/* ★max-width:304px 固定だったため「社員インタビュー一覧」(最長ラベル)が折り返していた。
   中身の幅で決めて折り返さないようにする（狭い画面では版面まで縮む）。
   ラベルは 採用情報を見る／キャリアパス詳細／社員インタビュー一覧／お知らせ一覧 の4種。 */
.rec-more{display:flex;align-items:center;gap:clamp(10px,1vw,14px);
  width:max-content;max-width:100%;min-width:min(304px,100%);
  margin:clamp(40px,4.2vw,60px) auto 0;padding:0 2px clamp(12px,1.2vw,16px);color:var(--ink);
  background-image:repeating-linear-gradient(90deg,var(--ink) 0 9px,transparent 9px 18px);
  background-size:100% 1px;background-repeat:no-repeat;background-position:left bottom;}
.rec-more-ja{font-size:clamp(15px,1.2vw,17px);font-weight:700;letter-spacing:.04em;line-height:1.3;white-space:nowrap;}
.rec-more-en{font-family:var(--lt);font-size:12px;font-weight:500;letter-spacing:.14em;color:var(--ink);}
.rec-more-ar{margin-left:auto;flex:none;width:20px;height:auto;transition:transform .25s;}
.rec-more:hover .rec-more-ar{transform:translateX(5px);}
/* 写真プレースホルダ（撮影前の枠）。.iv-card 側で aspect-ratio だけ上書きする */
.ph-in{aspect-ratio:3/2;border-radius:14px;overflow:hidden;background:var(--line-2);border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14px;
  color:var(--ink-3);font-size:12px;line-height:1.8;letter-spacing:.06em;}
/* small が別のフレックスアイテムになって <br> が無視され、右隣に並ぶ（枠が広いと1文に見えて気づけない） */
.ph-in small{font-size:12px;opacity:.75;}
/* 巨大な白抜き英字（見出しを重ねる型）。セクション/ページ問わず .eyebrow に .lg を足すだけで効く。
   ★文字列が長いと SP で版面を超えるので、その instance だけ font-size の下限を下げる（例：#news） */
.eyebrow.lg{color:#fff;font-size:clamp(38px,6.95vw,100px);line-height:1.05;letter-spacing:.12em;white-space:nowrap;margin-bottom:clamp(10px,1.4vw,20px);position:relative;left:50%;transform:translateX(-50%);width:max-content;}

/* ---------- 日本地図（店舗マッピング）。business/amuseum/peterpan/stores の4ページ共有 ---------- */
.bz-map{display:flex;justify-content:center;align-items:center;}
.bz-jpmap{width:100%;max-width:780px;height:auto;display:block;overflow:visible;}