/* =========================================================
   top.css ─ TOPページ専用（common.css の後に読む）
   ========================================================= */

/* ===== Hero ===== */
/* ---------- Hero (画面いっぱい・フルスクリーン) ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;}
.hero-bg{position:absolute;inset:0;background:#2a2620 url("../img/hero-poster-o20261113.webp") center/cover no-repeat;}
/* ヒーロー背景＝コンセプトムービー（音なし・ループ。PC/SPで解像度を出し分け＝top.js） */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
@keyframes kb{to{transform:scale(1);}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,10,.28) 0%,rgba(20,16,10,.1) 40%,rgba(20,16,10,.72) 100%);}
.hero-in{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 0 clamp(250px,calc(28.2vw - 30px),380px);}
.hero h1{font-size:clamp(30px,6vw,50px);font-weight:900;line-height:1.3;letter-spacing:.01em;margin:0;text-shadow:0 2px 24px rgba(0,0,0,.3);}
.hero .sub{margin:22px 0 0;font-size:clamp(14px,1.7vw,17px);font-weight:500;line-height:1.9;max-width:40em;text-shadow:0 1px 12px rgba(0,0,0,.4);}
.hero .eyebrow{color:#fff;opacity:.9;}
/* ヒーロー版面をヘッダー（.head-in の左右gut）と一致＝見出しの頭をロゴ左に揃える */
@media(min-width:901px){.hero-in{padding-left:var(--gut);padding-right:var(--gut);}}
.scrollcue{position:absolute;left:50%;bottom:22px;z-index:2;transform:translateX(-50%);font-family:var(--lt);font-size:12px;letter-spacing:.2em;color:#fff;opacity:.8;writing-mode:vertical-rl;}
.scrollcue::after{content:"";display:block;width:1px;height:44px;background:#fff;margin:10px auto 0;animation:cue 1.8s ease-in-out infinite;transform-origin:top;}
@keyframes cue{0%,100%{transform:scaleY(.3);opacity:.4;}50%{transform:scaleY(1);opacity:1;}}

/* ヒーロー左下：トランプのように重なる写真カード */
.hero-cards{position:absolute;left:0;bottom:0;z-index:3;pointer-events:none;
  width:clamp(280px,40.6vw,588px);height:clamp(176px,25.5vw,370px);}
.hc{position:absolute;margin:0;overflow:hidden;border-radius:clamp(10px,1.19vw,18px);
  border:clamp(4px,.67vw,10px) solid #fff;box-shadow:0 22px 40px -15px rgba(16,12,6,.6);}
.hc img{width:100%;height:100%;object-fit:cover;display:block;}
.hc1{left:-5%;bottom:-16%;width:64%;aspect-ratio:3/2;transform:rotate(-9deg);z-index:1;}
.hc2{left:33%;bottom:5%;width:61%;aspect-ratio:3/2;transform:rotate(6deg);z-index:2;}
/* ヒーロー右下：採用情報CTA（左＝琥珀のラベル／右＝写真） */
.hero-cta{position:absolute;right:clamp(14px,1.8vw,28px);bottom:clamp(14px,1.8vw,28px);z-index:4;
  display:flex;align-items:stretch;border-radius:clamp(18px,1.65vw,24px);overflow:hidden;
  box-shadow:0 22px 40px -14px rgba(16,12,6,.55);transition:transform .25s;}
.hero-cta:hover{transform:translateY(-4px);}
.hero-cta-body{background:var(--accent);color:#fff;display:flex;flex-direction:column;justify-content:center;
  gap:3px;padding:clamp(15px,1.5vw,22px) clamp(21px,2.1vw,30px);}
.hero-cta-en{display:flex;align-items:center;gap:12px;font-family:var(--lt);font-size:clamp(22px,1.88vw,27px);font-weight:600;letter-spacing:.04em;line-height:1;}
.hero-cta-en .cir{flex:none;width:clamp(25px,2.03vw,28px);height:clamp(25px,2.03vw,28px);border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;}
.hero-cta-en .cir svg{width:13px;height:auto;display:block;color:var(--accent);}
.hero-cta-ja{font-size:18px;font-weight:700;letter-spacing:.06em;line-height:1;}
.hero-cta-ph{flex:none;width:clamp(87px,7.8vw,114px);overflow:hidden;}
.hero-cta-ph img{width:100%;height:100%;object-fit:cover;display:block;}

/* ===== About ===== */
/* ---------- About (リング付きノート) ---------- */
.about{background:var(--paper-2);overflow-x:clip;}
#about{padding-top:0;padding-bottom:60px;margin-top:-70px;}
#about .eyebrow{font-size:18px;}          
#about h2.title{font-size:32px;line-height:58px;}   /* →*/
/* ノート本体（影は控えめに） */
.notebook{position:relative;z-index:5;background:#fff;border-radius:28px;box-shadow:0 24px 54px -34px rgba(60,40,20,.2);padding:clamp(44px,5vw,72px);padding-left:clamp(60px,7.5vw,108px);margin:64px 0;}
.notebook-rings{position:absolute;left:24px;top:9%;bottom:9%;width:22px;display:flex;flex-direction:column;justify-content:space-between;z-index:3;pointer-events:none;}
.notebook-rings span{display:block;height:11px;border-radius:999px;background:var(--ring);box-shadow:inset 0 -2px 0 rgba(0,0,0,.14),0 1px 2px rgba(0,0,0,.08);}
.about-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:min(6vw,80px);align-items:center;}
/* 4枚が扇状に重なって動く写真（ginnoougi concept流用）＝ノートからはみ出して重ねる */
.concept-fan-wrap{position:relative;z-index:4;align-self:stretch;min-height:440px;}
/* 絶対配置で親ノートの高さ計算から外し、ノートの天地を対称にはみ出す */
.concept-fan{position:absolute;top:50%;right:-2%;transform:translateY(-50%);width:104%;height:calc(100% + 216px);filter:drop-shadow(0 24px 40px rgba(60,45,25,.18));}
.concept-fan-photo{position:absolute;inset:0;border-radius:18px;overflow:hidden;background:#fff;border:6px solid #fff;box-shadow:0 20px 48px rgba(60,45,25,.2);transform-origin:38% 100%;transition:transform 1.4s cubic-bezier(.22,1,.36,1),opacity 1.4s cubic-bezier(.22,1,.36,1);}
.concept-fan-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.concept-fan-photo.pos-0{transform:rotate(0deg) translateX(0) scale(1);z-index:4;opacity:1;}
.concept-fan-photo.pos-1{transform:rotate(5deg) translateX(1.5%) scale(.97);z-index:3;opacity:.95;}
.concept-fan-photo.pos-2{transform:rotate(10deg) translateX(3%) scale(.93);z-index:2;opacity:.78;}
.concept-fan-photo.pos-3{transform:rotate(15deg) translateX(4.5%) scale(.89);z-index:1;opacity:.55;}
/* 5枚目（2026-10-17）：4枚目の真後ろに隠しておき、順番が来たら出てくる */
.concept-fan-photo.pos-4{transform:rotate(15deg) translateX(4.5%) scale(.89);z-index:0;opacity:0;}
.concept-fan-indicator{position:absolute;left:50%;transform:translateX(-50%);bottom:-4px;display:flex;gap:8px;z-index:5;}
.concept-fan-indicator span{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .4s,width .4s;}
.concept-fan-indicator span.is-active{background:var(--accent);width:24px;border-radius:4px;}


/* ===== Business ===== */
/* ---------- Business（白いブロブカード／右→左マーキー／遊び場イラスト） ---------- */
#business{background:var(--paper-2);}
.biz-marquee{--biz-gap:clamp(12px,2.8vw,40px);
  /* 3枚＋2gapが100vwに対し両端で各20%はみ出す条件 2.6W+2gap=100vw → W=(100vw-2gap)/2.6 */
  --biz-w:calc((100vw - 2 * var(--biz-gap)) / 2.6);
  --biz-ill:calc(var(--biz-w) * .46);
  /* 開始位置＝2枚目の中心を50vwに置く（＝見切れ20%の静止レイアウトを再現してから流し始める） */
  --biz-start:calc(-7.692vw + 0.1538 * var(--biz-gap));
  width:100vw;margin-left:calc(50% - 50vw);overflow-x:clip;margin-top:clamp(56px,5vw,72px);}
/* 右→左へ流す。1周＝3枚分＝トラックの50%（gapは margin-right で持たせるので端数が出ない） */
.biz-track{display:flex;align-items:stretch;width:max-content;
  transform:translateX(var(--biz-start));
  animation:bizMarquee 52s linear infinite;animation-play-state:paused;}
.biz-track.go{animation-play-state:running;}
.biz-marquee:hover .biz-track{animation-play-state:paused;}
@keyframes bizMarquee{from{transform:translateX(var(--biz-start));}to{transform:translateX(calc(var(--biz-start) - 50%));}}
.biz-card{flex:none;width:var(--biz-w);margin-right:var(--biz-gap);
  position:relative;display:block;background:#fff;color:var(--ink);text-align:center;
  border-radius:calc(var(--biz-w) * .35);
  padding:clamp(44px,4.8vw,70px) clamp(18px,2.4vw,34px) clamp(84px,8.9vw,128px);
  transition:transform .45s cubic-bezier(.22,1,.36,1);}
.biz-card:hover{transform:translateY(-8px);}
.biz-card.c-amber{--tint:#C0762E;}
.biz-card.c-green{--tint:#3C5A4A;}
.biz-card.c-sumi{--tint:#232019;}
/* 街の遊び場イラスト。同一色のトーン差だけで構成し、キャラを最も濃くする＝「人が集まる。人がつながる。」。
   ガラス/ドームは #fff＝カードの地色で抜く。フロー要素なのでカードのpadding-topがそのまま上余白になる。 */
.biz-illust{display:block;width:var(--biz-ill);height:auto;margin:0 auto clamp(22px,2.4vw,34px);}
/* キャラはクレーンが放しに来るまで伏せる（.pend はJSが付ける＝JS無効なら最初から見える） */
.biz-illust use{transition:opacity .55s ease-out;}
.biz-illust.pend use{opacity:0;}
.biz-illust use:nth-of-type(2){transition-delay:.12s;}
.biz-illust use:nth-of-type(3){transition-delay:.24s;}
.biz-card h3{margin:0 0 10px;font-family:var(--lt);font-size:clamp(22px,2.9vw,42px);font-weight:600;letter-spacing:.04em;line-height:1;color:var(--ink);}
.biz-pill{display:inline-flex;align-items:center;justify-content:center;height:clamp(22px,1.95vw,28px);padding:0 clamp(10px,1vw,14px);border-radius:999px;background:var(--tint);color:#fff;font-size:clamp(12px,.97vw,14px);font-weight:700;line-height:1;margin:0 0 clamp(16px,2.1vw,30px);}
.biz-catch{font-size:clamp(18px,1.8vw,26px);line-height:clamp(26px,2.9vw,42px);font-weight:700;color:var(--tint);margin:0 0 clamp(18px,2.1vw,30px);}
.biz-txt{font-size:15px;line-height:28px;letter-spacing:.04em;color:var(--ink);max-width:400px;margin:0 auto;text-align:left;}

.biz-arrow{position:absolute;left:0;right:0;bottom:clamp(30px,3.1vw,45px);margin:0 auto;
  width:clamp(48px,4.2vw,60px);height:clamp(48px,4.2vw,60px);border-radius:clamp(17px,1.53vw,22px);
  background:var(--tint);display:flex;align-items:center;justify-content:center;transition:transform .3s;}
.biz-card:hover .biz-arrow{transform:translateY(-3px);}
.biz-arrow svg{width:clamp(20px,1.74vw,25px);height:auto;display:block;}
/* クレーンが掴んで運んでくるキャラ（放すとカードのイラストへ落ちる） */
.biz-pal{position:absolute;top:138px;left:50%;transform:translateX(-50%);width:72px;height:auto;display:block;z-index:2;
  filter:drop-shadow(0 8px 8px rgba(60,45,25,.18));}
.biz-crane .claw-svg .arms{transition:transform .35s ease-out;}
.biz-crane.open .claw-svg .arms{transform:scaleX(1.3);}
/* Business：セクション進入で上端からクレーンが降りてくる（IntersectionObserverで .in 付与） */
#business{position:relative;overflow:hidden;padding-top:clamp(170px,18vw,260px);margin-top:clamp(-130px,-9vw,-48px);}
.biz-crane{position:absolute;top:0;left:50%;z-index:3;pointer-events:none;display:flex;flex-direction:column;align-items:center;transform:translateX(-50%) translateY(-250px);}
.biz-crane .biz-cable{display:block;width:5px;height:100px;background:linear-gradient(#8b9095,#c1c6ca);}
.biz-crane .claw-svg{display:block;width:120px;height:125px;margin:-2px 0 0 0;filter:drop-shadow(0 8px 10px rgba(60,45,25,.18));}
.biz-crane .claw-svg .arms{transform-box:fill-box;transform-origin:50% 0;transform:scaleX(.82);}
.biz-crane.in{animation:bizDrop 1.25s cubic-bezier(.3,1.3,.45,1) forwards;}
@keyframes bizDrop{0%{transform:translateX(-50%) translateY(-250px);}100%{transform:translateX(-50%) translateY(-4px);}}
@media(prefers-reduced-motion:reduce){.biz-crane{transform:translateX(-50%) translateY(-4px);animation:none!important;}}
@media(max-width:640px){
  #business{padding-top:clamp(172px,46vw,210px);}
  .biz-crane .biz-cable{height:64px;}
  .biz-crane .claw-svg{width:92px;height:96px;}
  .biz-crane{transform:translateX(-50%) translateY(-190px);}
  .biz-crane.in{animation-name:bizDropSP;}
  @keyframes bizDropSP{0%{transform:translateX(-50%) translateY(-190px);}100%{transform:translateX(-50%) translateY(-4px);}}
}


/* ===== Recruit ===== */
/* ---------- Recruit（フッターと同じ地色＋白カード／ガチャのハンドル＋回転テキスト） ---------- */
.recruit{background:var(--paper-2);color:var(--ink);padding-top:0;}
/* 巨大白抜き英字＋日本語見出しを重ねる（recruit / business / news 共通） */
.recruit h2.title,#business h2.title,#news h2.title{margin-top:clamp(-70px,-4.9vw,-26px);position:relative;}
/* NEWS & TOPICS は13文字と長いのでSPの下限だけ下げる（38pxだと390で版面を超える） */
#news .eyebrow{font-size:clamp(26px,6.95vw,100px);}
.recruit .lead{color:var(--ink-2);}
.iv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,28px);margin-top:clamp(76px,8vw,116px);align-items:stretch;}
.iv-card{--iv-pad:clamp(24px,2.4vw,34px);--iv-out:clamp(40px,4.2vw,60px);
  background:#fff;border-radius:clamp(18px,1.8vw,26px);padding:var(--iv-pad);
  display:flex;flex-direction:column;color:var(--ink);transition:transform .4s cubic-bezier(.22,1,.36,1);}
.iv-card:hover{transform:translateY(-6px);}
.iv-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.iv-lab{display:flex;align-items:center;gap:clamp(8px,1vw,14px);min-width:0;}
/* ガチャの「回すところ」＝ハンドル。周囲を Work with us が回る */
.iv-knob{position:relative;flex:none;width:clamp(74px,6.4vw,92px);height:clamp(74px,6.4vw,92px);}
.iv-ring,.iv-dial{position:absolute;inset:0;width:100%;height:100%;display:block;}
.iv-ring{animation:ivSpin 14s linear infinite;transform-origin:50% 50%;}
.iv-ring text{fill:var(--ink);font-family:var(--lt);font-weight:500;font-size:12px;letter-spacing:.06em;}
@keyframes ivSpin{to{transform:rotate(360deg);}}
.iv-dial{animation:ivKnob 8s linear infinite;transform-origin:50% 50%;}
.iv-card:hover .iv-dial{animation-duration:1.6s;}
@keyframes ivKnob{to{transform:rotate(360deg);}}
.iv-id{display:flex;flex-direction:column;gap:6px;min-width:0;}
.iv-name{font-family:var(--lt);font-size:clamp(17px,1.5vw,22px);font-weight:600;letter-spacing:.06em;line-height:1;color:var(--ink);}
.iv-role{font-size:12px;color:var(--ink-2);letter-spacing:.06em;line-height:1.5;}
/* 右上の縦組み＝インタビューのクオート */
.iv-ja{writing-mode:vertical-rl;text-orientation:mixed;font-size:clamp(16px,1.45vw,21px);font-weight:700;letter-spacing:.08em;line-height:1.7;flex:none;
  margin:calc(-1 * (var(--iv-out) + var(--iv-pad))) 0 0;}
.iv-card .ph{margin-top:auto;padding-top:clamp(20px,2.2vw,30px);}
.iv-card .ph-in{aspect-ratio:4/3;}
.iv-card .ph-in img{width:100%;height:100%;object-fit:cover;display:block;}
@media(prefers-reduced-motion:reduce){.iv-ring,.iv-dial{animation:none;}}


/* ===== Partner ===== */
/* ---------- Partner（角丸パネル＋パネルから天地にはみ出す写真） ---------- */
.partner{padding:clamp(92px,10vw,150px) 0;}
.pt-panel{position:relative;background:var(--green);color:#fff;border-radius:clamp(24px,3vw,44px);
  padding:clamp(52px,6.2vw,100px) clamp(28px,4vw,76px);}
.pt-body{display:flex;align-items:flex-start;gap:clamp(16px,2vw,30px);max-width:min(56%,620px);}
.pt-icon{flex:none;width:clamp(52px,5vw,74px);}
.pt-icon svg{width:100%;height:auto;display:block;}
.pt-copy{min-width:0;}
.pt-lab{display:flex;align-items:baseline;gap:clamp(8px,1vw,14px);margin:0 0 clamp(16px,1.8vw,24px);flex-wrap:wrap;}
.pt-en{font-family:var(--lt);font-size:clamp(30px,3.7vw,53px);font-weight:600;letter-spacing:.1em;line-height:1;
  padding-bottom:7px;background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 2px;background-repeat:no-repeat;background-position:left bottom;}
.pt-ja{font-size:clamp(14px,1.2vw,17px);font-weight:700;}
.pt-txt{font-size:clamp(14px,1.05vw,15px);line-height:2;margin:0;color:rgba(255,255,255,.86);}
.pt-panel .tel{font-family:var(--lt);font-size:clamp(27px,2.5vw,36px);font-weight:600;letter-spacing:.02em;margin:clamp(18px,2vw,26px) 0 0;color:#fff;}
.pt-panel .tel small{display:block;font-family:var(--jp);font-size:16px;color:rgba(255,255,255,.66);letter-spacing:1px;font-weight:400;margin:0 0 20px;}
/* 深緑パネルの上＝白ピル */
.pt-btn{background:#fff;color:var(--ink);margin-top:clamp(22px,2.4vw,34px);}
.pt-btn .cir{background:var(--green);color:#fff;}
/* 白いノートの上＝墨ピルに反転（白ピルだと地に沈んで見えないため・「視認性は考慮して」） */
.ab-btn{background:var(--ink);color:var(--paper);margin-top:28px;}
.ab-btn .cir{background:var(--paper);color:var(--ink);}
/* パネルの縁をまたいで遊ぶキャラ（フッターの fpHop/fpSpin/fpBob を再利用） */
.pt-ch{position:absolute;display:block;height:auto;z-index:2;pointer-events:none;
  filter:drop-shadow(0 8px 7px rgba(16,12,6,.28));}
.pt-c1{left:6%;top:calc(-1 * clamp(40px,4.2vw,60px));width:clamp(88px,8.8vw,128px);
  animation:fpHop 2.6s ease-in-out infinite .2s;}
.pt-c2{left:49%;top:calc(-1 * clamp(36px,3.8vw,54px));width:clamp(80px,8vw,116px);
  animation:fpSpin 5.4s ease-in-out infinite .9s;transform-origin:50% 64%;}
.pt-c3{left:20%;bottom:calc(-1 * clamp(38px,4vw,56px));width:clamp(84px,8.4vw,120px);
  animation:fpBob 3.1s ease-in-out infinite .5s;}
.pt-c4{left:37%;bottom:calc(-1 * clamp(32px,3.4vw,48px));width:clamp(72px,7.2vw,104px);
  animation:fpSpin 6.2s ease-in-out infinite 1.7s;transform-origin:50% 64%;}
/* 写真＝パネルの右半分に重ね、天地にはみ出す */
.pt-photos{position:absolute;top:0;bottom:0;right:clamp(18px,2.2vw,40px);width:min(46%,600px);pointer-events:none;}
.pt-ph{position:absolute;margin:0;border-radius:clamp(14px,1.6vw,24px);overflow:hidden;
  box-shadow:0 26px 46px -26px rgba(20,16,10,.55);}
.pt-ph img{width:100%;height:100%;object-fit:cover;display:block;}
.pt-ph1{top:clamp(-56px,-4.2vw,-38px);right:0;width:64%;aspect-ratio:9/8;}
.pt-ph2{bottom:clamp(-56px,-4.2vw,-38px);left:0;width:47%;aspect-ratio:6/5;}


/* ===== News ===== */
/* ---------- News ---------- */
.news{background:var(--paper-2);}
.news-list{max-width:1040px;margin:52px auto 0;border-top:1px dotted var(--ink-3);}
.news-row{display:flex;gap:22px;align-items:center;padding:20px 6px;border-bottom:1px dotted var(--ink-3);transition:.2s;}
.news-row:hover{background:rgba(255,255,255,.6);}
.news-row time{font-family:var(--lt);font-size:13px;color:var(--ink-2);width:96px;flex:none;}
.news-row .cat{font-size:12px;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:2px 12px;flex:none;}
.news-row .ttl{font-size:14.5px;font-weight:500;}
.news .btn{margin-top:36px;}


/* ===== Crane band ===== */
/* ---------- Crane game motion band (ヒーロー下 × About us上) ---------- */
.crane-band{position:relative;height:250px;background:var(--paper-2);overflow:hidden;}
.crane-stage{position:absolute;inset:0;pointer-events:none;}
/* angular (カクカク) characters ─ 1.5倍 */
.char,.friend{position:absolute;bottom:30px;width:87px;height:78px;display:flex;align-items:center;justify-content:center;gap:11px;filter:drop-shadow(0 9px 7px rgba(60,45,25,.16));}
.char .eye,.friend .eye{width:13px;height:13px;background:#fff;border-radius:50%;position:relative;z-index:2;}
.char .eye::after,.friend .eye::after{content:"";position:absolute;width:6px;height:6px;background:#1c1a17;border-radius:50%;top:4px;left:4px;}
.traveler{left:72%;background:#e0503b;clip-path:polygon(50% 0,86% 16%,100% 66%,80% 100%,22% 98%,2% 62%,12% 20%);transform:translateY(0) rotate(0);animation:travel 16s ease-in-out infinite;}
.fA{right:12%;background:#33b6b6;clip-path:polygon(18% 8%,78% 2%,100% 44%,90% 80%,66% 82%,74% 100%,50% 84%,10% 78%,0 38%);animation:bob 2.8s ease-in-out infinite;}
.fB{right:20%;width:75px;height:72px;background:#c9d63a;clip-path:polygon(10% 22%,58% 0,100% 30%,90% 86%,42% 100%,4% 66%);animation:bob 2.6s ease-in-out infinite .3s;}
.fC{right:28%;width:69px;height:75px;background:#a97bc9;clip-path:polygon(14% 4%,92% 18%,100% 90%,4% 82%);animation:bob 3.1s ease-in-out infinite .7s;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
/* claw (UFOキャッチャー型・SVG) ─ 1.5倍 */
.claw{position:absolute;left:72%;top:4px;margin-left:44px;transform:translateY(-160px);animation:clawMove 16s ease-in-out infinite;}
.claw-svg{display:block;width:144px;height:150px;margin-left:-72px;}
.claw-svg .arms{transform-box:fill-box;transform-origin:50% 0;animation:grab 16s ease-in-out infinite;}
.cable{position:absolute;left:-2.5px;top:-330px;width:5px;height:336px;background:linear-gradient(#8b9095,#c1c6ca);}
@keyframes grab{0%,11%{transform:scaleX(1);}16%,43%{transform:scaleX(.72);}47%,100%{transform:scaleX(1);}}
@keyframes clawMove{
 0%,6%{left:72%;transform:translateY(-160px);}
 13%,17%{left:72%;transform:translateY(67px);}
 21%{left:72%;transform:translateY(18px);}
 38%{left:10%;transform:translateY(18px);}
 42%,46%{left:10%;transform:translateY(42px);}
 52%{left:10%;transform:translateY(-160px);}
 70%,100%{left:72%;transform:translateY(-160px);}
}
@keyframes travel{
 0%,17%{left:72%;transform:translateY(0) rotate(0deg);}
 21%{left:72%;transform:translateY(-49px) rotate(0deg);}
 38%{left:10%;transform:translateY(-49px) rotate(0deg);}
 42%{left:10%;transform:translateY(-25px) rotate(0deg);}
 46%{left:10%;transform:translateY(-25px) rotate(0deg);}
 50%{left:10%;transform:translateY(0) rotate(-150deg);}
 53%{left:11%;transform:translateY(0) rotate(-290deg);}
 56%,58%{left:12%;transform:translateY(0) rotate(-360deg);}
 62%{left:20%;transform:translateY(-9px) rotate(5deg);}
 66%{left:30%;transform:translateY(0) rotate(-5deg);}
 70%{left:40%;transform:translateY(-9px) rotate(5deg);}
 74%{left:50%;transform:translateY(0) rotate(-5deg);}
 78%{left:58%;transform:translateY(-9px) rotate(5deg);}
 82%{left:65%;transform:translateY(0) rotate(-5deg);}
 86%{left:69%;transform:translateY(0) rotate(0deg);}
 89%{left:69%;transform:translateY(-18px) rotate(0deg);}
 92%,100%{left:72%;transform:translateY(0) rotate(0deg);}
}
@media(prefers-reduced-motion:reduce){
  .claw,.traveler,.friend,.claw-svg .arms{animation:none!important;}
  .claw{transform:translateY(-190px);}
  .traveler{left:69%;transform:none;}
}


/* ===== Responsive（TOP固有） ===== */
@media(max-width:900px){
  .about-grid{grid-template-columns:1fr;gap:8px;}
  .concept-fan-wrap{order:-1;align-self:auto;min-height:0;}
  .concept-fan{position:static;transform:none;width:84%;height:auto;aspect-ratio:4/5;margin:-24px auto 14px;}
  .notebook{padding:44px 30px;padding-left:52px;border-radius:22px;}
  .notebook-rings{left:18px;width:18px;top:6%;bottom:6%;}
  /* Business：SPはマーキーを解除して縦積み（幅いっぱい3枚流しは成立しない） */
  .biz-marquee{width:auto;margin-left:auto;margin-right:auto;max-width:420px;overflow-x:visible;--biz-ill:min(172px,48vw);}
  .biz-track{display:block;width:auto;transform:none;animation:none;}
  .biz-marquee .biz-card{width:auto;margin-right:0;margin-bottom:14px;border-radius:clamp(110px,32vw,150px);padding:40px 26px 92px;}
  .biz-pal{top:95px;width:54px;}
  .iv-grid{grid-template-columns:1fr;gap:18px;}
  /* Partner：写真を絶対配置から外して下に2枚並べる */
  .pt-body{max-width:none;}
  .pt-photos{position:static;width:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:clamp(28px,4vw,40px);}
  .pt-ph{position:static;width:auto;aspect-ratio:1/1;}
  /* Hero：カードは縮小、右下CTAはSP下部固定CTAと重なるので出さない */
  .hero-cards{width:clamp(235px,64.4vw,308px);height:clamp(148px,40.6vw,196px);}
  .hero-cta{display:none;}
  .hero-in{padding-bottom:clamp(160px,calc(52.8vw - 30px),210px);}
}
@media(max-width:560px){
  .hero-in{padding-left:18px;padding-right:18px;}
  .news-row{flex-wrap:wrap;gap:8px 14px;}
  .news-row .ttl{width:100%;}
}

/* =========================================================
   TOP・SP=640以下
   ★SP表示だけの調整なのでSPスコープに閉じる（PCのデザインは温存）。
   ========================================================= */
@media(max-width:640px){
  /* ヒーロー見出しの行間 39→50px */
  .hero h1{line-height:50px;}
  /* ヒーロー下クレーン帯のキャラ・クレーンを約60%に（帯ごと縮小・底基準） */
  .crane-stage{transform:scale(.6);transform-origin:50% 100%;}
  /* About扇写真のドロップシャドウを軽く＋写真を約80%に */
  .concept-fan{filter:drop-shadow(0 14px 22px rgba(60,45,25,.1));transform:scale(.8);transform-origin:50% 50%;}
  .concept-fan-photo{box-shadow:0 12px 28px rgba(60,45,25,.12);}
  /* →Aboutの見出し 32→26→24px／行間 58→44px（この要素だけ） */
  #about h2.title{font-size:24px;line-height:44px;}
  /* Aboutのリード文字色をグレー→墨に */
  #about .about-grid .lead{color:#232019;}
  /* 事業内容のリード文字色をグレー→墨に */
  #business .s-head .lead{color:#232019;}
  /* →→事業カードのキャッチ 18→22→24→22px／行間 26→40px */
  .biz-catch{font-size:22px;line-height:40px;}
  /* 事業カードのトラックに左右余白 20px */
  .biz-track{padding:0 20px;}
  /* 事業カード同士の下余白 14→40px */
  .biz-marquee .biz-card{margin-bottom:40px;}
  /* インタビュー縦組みクオート 16→18px／行間 27.2→32px */
  .iv-ja{font-size:18px;line-height:32px;}
  /* 氏名 17→18px */
  .iv-name{font-size:18px;}
  /* 役職 12→14px */
  .iv-role{font-size:14px;}
  /* インタビュー3枚の間隔 gap 18→70px */
  .iv-grid{gap:70px;}
  /* 出店パートナーのコピーを中央寄せ */
  .pt-copy{text-align:center;}
  /* PARTNERの下に「出店パートナー募集」を改行して置く（縦積み・中央） */
  .pt-copy .pt-lab{flex-direction:column;align-items:center;justify-content:center;}
  /* パネル上余白を広げてアイコンと重ならないように 52→70px */
  .pt-panel{padding:70px 28px 52px;}
  /* 電話番号 27→29px */
  .pt-panel .tel{font-size:29px;}
  /* パートナーのキャラアイコンをパネル右上へ */
  .pt-body{position:static;}
  .pt-icon{position:absolute;top:clamp(18px,5vw,30px);right:clamp(18px,5vw,30px);
    width:clamp(46px,12vw,60px);margin:0;z-index:3;}
}

/* ---------- TOP事業内容を SP は横スライダー1段＋左右矢印に ---------- */
.biz-nav{display:none;}   /* PCは自動マーキーなので矢印は出さない */
@media(max-width:900px){
  .biz-marquee{position:relative;width:auto;margin-left:0;margin-right:0;max-width:none;overflow:visible;}
  /* 縦積み(display:block)→横スクロール1段に。スナップで1枚ずつ気持ちよく止まる */
  .biz-track{display:flex;flex-wrap:nowrap;width:auto;transform:none;animation:none;
    overflow-x:auto;gap:16px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scroll-padding-left:24px;padding:4px 24px 14px;scrollbar-width:none;}
  .biz-track::-webkit-scrollbar{display:none;}
  .biz-marquee .biz-card{flex:0 0 82%;max-width:82%;margin:0;scroll-snap-align:center;}
  /* 左右の矢印（丸ボタン・カードの左右端に重ねる） */
  .biz-nav{display:flex;align-items:center;justify-content:center;position:absolute;top:38%;
    width:46px;height:46px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.96);
    color:var(--ink);box-shadow:0 10px 24px -8px rgba(35,32,25,.45);cursor:pointer;z-index:4;
    -webkit-tap-highlight-color:transparent;transition:transform .2s;}
  .biz-nav:active{transform:scale(.92);}
  .biz-nav svg{width:20px;height:auto;display:block;}
  .biz-nav.is-prev{left:8px;}
  .biz-nav.is-next{right:8px;}
}

/* 2026-10-17 ヒーロー：重ね写真2枚を外し、コピーを中央寄せ・行間を広げる */
.hero{align-items:center;}
.hero-in{text-align:center;padding-top:clamp(70px,8vw,100px);padding-bottom:clamp(70px,8vw,100px);}
.hero h1{line-height:1.5;}
.hero .sub{line-height:2.1;margin-left:auto;margin-right:auto;}
@media(max-width:640px){.hero h1{line-height:56px;}}

/* 2026-10-17 ヒーローの暗いレイヤーを薄く（上.28→.12／中.1→.03／下.72→.48）＝少し明るい印象に。文字・ヘッダーは元のまま */
.hero::after{background:linear-gradient(180deg,rgba(20,16,10,.12) 0%,rgba(20,16,10,.03) 40%,rgba(20,16,10,.48) 100%);}