/* ============================================================
   AMICHI PRODUCE — NEW IDOL PROJECT ［背景画像バリエーション］
   style.css をベースに、01 Hero / 02 MESSAGE / 07 ARE YOU READY を
   「セクション全面の背景画像＋白オーバーレイ（黒文字は維持）」へ変更。
   それ以外のセクション・共通パーツは style.css と完全に同一。
   Design tokens mirror design/new_idol_project_bg.pen
   ============================================================ */
:root{
  --bg-white:#FFFFFF;
  --bg-soft:#F7F6F4;
  --ink:#141414;
  --ink-muted:#8A8A8A;
  --line:#E2E0DC;
  --accent:#111111;
  --on-accent:#FFFFFF;
  /* 背景ドット（千鳥配置）。css/entry.css と同一トークン。 */
  --dot:#E0DCD4;
  --dot-pitch:38px;
  --dot-size:3.6px;
  /* 和文＝明朝、ラテン＝Bricolage。--font-body はラテンを先に置くことで
     英数字を Bricolage、和文を NIP Mincho に自動で振り分ける（css/fonts.css 参照）。
     Web フォント未読込時も明朝で出るよう、フォールバックは serif 系にしている。 */
  --font-body:"Bricolage Grotesque", "NIP Mincho", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  --font-notable:"Notable", Impact, "Arial Black", sans-serif;
  --header-h:88px;
  --ease:cubic-bezier(.76,0,.24,1);
  --ease-out:cubic-bezier(.22,.61,.36,1);   /* セクション表示アニメーション用 */
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg-white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.6;
  /* NIP Mincho と Notable は Regular 1ウェイトしかない。合成太字を許すと
     明朝の横画とウロコが潰れ、環境ごとに太り方も変わるため明示的に禁止する。
     太さが要る箇所は可変フォントの Bricolage が実ウェイトで受け持つ。 */
  font-synthesis:none;
  font-optical-sizing:auto;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
ul,ol{list-style:none;}

/* ---------- shared bits ---------- */
.label{
  font-size:16px;font-weight:600;letter-spacing:.32em;color:var(--ink);
}
.label.sm{font-size:13px;letter-spacing:.22em;color:var(--ink-muted);font-weight:400;}
.label.center{text-align:center;}
.rule{display:block;width:34px;height:1px;background:var(--ink);}
.rule.left{margin-top:14px;}

.btn{
  display:inline-flex;align-items:center;justify-content:space-between;gap:36px;
  font-size:16px;font-weight:600;letter-spacing:.24em;line-height:1;
  padding:22px 28px;transition:.35s var(--ease);white-space:nowrap;
}
.btn i{font-style:normal;font-weight:400;transition:transform .35s var(--ease);}
.btn--dark{background:var(--accent);color:var(--on-accent);min-width:300px;letter-spacing:.28em;}
.btn--dark:hover{background:#000;}
.btn--dark:hover i{transform:translateX(6px);}
.btn--outline{border:1px solid var(--ink);color:var(--ink);font-weight:400;letter-spacing:.08em;gap:40px;}
.btn--outline:hover{background:var(--ink);color:var(--on-accent);}
.btn--outline:hover i{transform:translateX(6px);}

/* ---------- header ---------- */
.site-header{
  position:fixed;top:0;left:0;width:100%;height:var(--header-h);z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 56px;mix-blend-mode:normal;
}
.logo{font-size:20px;font-weight:600;letter-spacing:.14em;color:var(--ink);}
.burger{
  width:36px;height:22px;position:relative;background:none;border:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;
}
.burger span{display:block;height:2px;background:var(--ink);transition:.4s var(--ease);}
.burger span:nth-child(1){width:34px;}
.burger span:nth-child(2){width:34px;}
.burger span:nth-child(3){width:24px;}
body.nav-open .burger span{background:var(--on-accent);}
body.nav-open .burger span:nth-child(1){transform:translateY(10px) rotate(45deg);width:34px;}
body.nav-open .burger span:nth-child(2){opacity:0;}
body.nav-open .burger span:nth-child(3){transform:translateY(-10px) rotate(-45deg);width:34px;}
body.nav-open .logo{color:var(--on-accent);}

/* ---------- nav overlay ---------- */
.nav-overlay{
  position:fixed;inset:0;z-index:55;background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:.5s var(--ease);
}
body.nav-open .nav-overlay{opacity:1;visibility:visible;}
.nav-overlay ul{width:min(640px,80vw);}
.nav-overlay li{
  display:flex;align-items:baseline;gap:28px;padding:18px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
  transform:translateY(20px);opacity:0;transition:.5s var(--ease);
}
body.nav-open .nav-overlay li{transform:none;opacity:1;}
.nav-overlay li:nth-child(1){transition-delay:.08s;}
.nav-overlay li:nth-child(2){transition-delay:.13s;}
.nav-overlay li:nth-child(3){transition-delay:.18s;}
.nav-overlay li:nth-child(4){transition-delay:.23s;}
.nav-overlay li:nth-child(5){transition-delay:.28s;}
.nav-overlay li:nth-child(6){transition-delay:.33s;}
.nav-overlay li:nth-child(7){transition-delay:.38s;}
.nav-idx{font-size:14px;font-weight:500;color:var(--ink-muted);}
.nav-overlay a{
  font-size:34px;font-weight:600;color:#fff;
  letter-spacing:.02em;transition:.3s;
}
.nav-overlay a:hover{opacity:.55;padding-left:8px;}

/* ---------- dots ---------- */
.dots{
  position:fixed;right:34px;top:50%;transform:translateY(-50%);z-index:50;
  display:flex;flex-direction:column;gap:16px;
}
.dots button{
  width:8px;height:8px;border-radius:50%;border:1px solid var(--ink-muted);
  background:transparent;cursor:pointer;padding:0;transition:.3s;
}
.dots button.active{background:var(--ink);border-color:var(--ink);transform:scale(1.2);}

/* ============================================================
   Fullpage mechanics
   ============================================================ */
body.fullpage{overflow:hidden;}
.panels{position:fixed;inset:0;will-change:transform;}
body.fullpage .panels{transition:transform .95s var(--ease);}
.panel{
  height:100vh;width:100%;overflow:hidden;position:relative;
  display:flex;align-items:center;
}
.wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 60px;}

/* 03〜06 の背景ドット（entry.php と同じ千鳥グリッド）。
   2 枚の radial-gradient を半ピッチずらして配置する。 */
.panel--promise,
.panel--support,
.panel--apply,
.panel--info{
  background-color:var(--bg-white);
  background-image:
    radial-gradient(var(--dot) calc(var(--dot-size) / 2), transparent calc(var(--dot-size) / 2 + .5px)),
    radial-gradient(var(--dot) calc(var(--dot-size) / 2), transparent calc(var(--dot-size) / 2 + .5px));
  background-size:var(--dot-pitch) var(--dot-pitch);
  background-position:0 0, calc(var(--dot-pitch) / 2) calc(var(--dot-pitch) / 2);
}

/* ============================================================
   01 HERO ［背景画像版：hero.png 全面＋白オーバーレイ（フラット .65）］
   ============================================================ */
.panel--hero{
  background:var(--bg-white) url('../assets/hero.png') center/cover no-repeat;
}
.panel--hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:rgba(255,255,255,.65);
}
.hero{position:relative;z-index:1;display:block;padding-top:var(--header-h);}
.hero__text{max-width:620px;}
.hero__kicker{font-size:16px;letter-spacing:.28em;color:var(--ink-muted);margin-bottom:16px;}
.hero__title{font-family:var(--font-notable);font-weight:400;line-height:1.02;letter-spacing:-.01em;}
.hero__title span{display:block;font-size:clamp(48px,6vw,84px);}
.hero__catch{font-size:20px;font-weight:400;letter-spacing:.06em;margin-top:28px;}
.hero__image{display:none;}
.hero__recruit{margin-top:48px;}
.hero__recruit-label{font-size:14px;letter-spacing:.18em;color:var(--ink-muted);margin-bottom:10px;}
.hero__recruit-date{font-size:27px;font-weight:500;letter-spacing:.04em;margin-bottom:28px;}
.hero__recruit-date em{font-style:normal;font-size:16px;color:var(--ink-muted);}
.hero__scroll{
  position:absolute;right:-24px;top:50%;transform:rotate(90deg);transform-origin:right center;
  font-size:13px;letter-spacing:.4em;color:var(--ink-muted);
}

/* ============================================================
   02 MESSAGE ［背景画像版：message.jpg 全面＋白の左→右グラデ］
   ============================================================ */
.panel--message{
  background:var(--bg-white) url('../assets/message.jpg') center/cover no-repeat;
}
@media (max-width: 980px) {
  #panels .panel--message {
    padding-top: 60vh;
  }
}
.panel--message::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
}
.message{position:relative;z-index:1;display:block;}
.message__text{max-width:600px;}
.message__text .label{display:block;margin-bottom:36px;}
/* 明朝は Regular 一本のため、太さの代わりにサイズ・字間・行間で見出しの階層を作る */
.message__head{font-size:clamp(34px,3.8vw,50px);font-weight:400;line-height:1.5;letter-spacing:.06em;}
.message__body{margin-top:40px;display:flex;flex-direction:column;gap:22px;
  font-size:15px;line-height:1.95;color:var(--ink);}
.message__image{display:none;}

/* ============================================================
   03 OUR PROMISE
   ============================================================ */
/* 背景は上の共通ブロック（ドット）で指定 */
.promise{display:flex;flex-direction:column;align-items:center;text-align:center;}
.promise__head{display:flex;flex-direction:column;align-items:center;}
.promise__head .rule{margin:16px 0 40px;}
.promise__title{font-size:clamp(28px,3vw,42px);font-weight:400;letter-spacing:.06em;line-height:1.6;}
.promise__title br{display:none;}
.promise__sub{font-size:17px;color:var(--ink-muted);margin-top:22px;letter-spacing:.02em;}
.promise__list{display:flex;justify-content:center;gap:24px;margin-top:80px;width:100%;max-width:1120px;}
.promise__list li{flex:1;display:flex;flex-direction:column;align-items:center;gap:20px;}
.promise__list p{font-size:16px;line-height:1.6;}

/* icons */
.ico{display:inline-flex;align-items:center;justify-content:center;color:var(--ink);}
.ico svg{width:50px;height:50px;}
.ico.sm svg{width:38px;height:38px;}
.ico.md svg{width:34px;height:34px;}

/* ============================================================
   04 SUPPORT
   ============================================================ */
/* 背景は上の共通ブロック（ドット）で指定 */
.support .label{display:block;font-size:22px;margin-bottom:80px;}
.support__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:96px 48px;}
.support__grid li{display:flex;align-items:center;gap:18px;}
.support__grid p{font-size:19px;line-height:1.5;}

@media (max-width:767px) {
  .support__grid p br{display:none;}
  .support__grid p{white-space: nowrap;}
}

/* ============================================================
   05 HOW TO APPLY
   ============================================================ */
/* 背景は上の共通ブロック（ドット）で指定 */
.apply__title{display:flex;align-items:baseline;gap:18px;margin-bottom:56px;}
.apply__title .label{font-size:18px;}
.apply__title em{font-style:normal;font-weight:400;font-size:15px;letter-spacing:.14em;color:var(--ink-muted);}
.apply__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  position:relative;
}
.step{border:1px solid var(--line);padding:28px;min-height:224px;
  display:flex;flex-direction:column;gap:18px;position:relative;background:var(--bg-white);}
.step__top{display:flex;align-items:center;gap:14px;}
.step__num{font-size:34px;font-weight:700;line-height:1;letter-spacing:-.01em;}
.step__top h3{font-size:19px;font-weight:400;letter-spacing:.04em;}
.step__body{display:flex;gap:16px;align-items:flex-start;}
.step__body p{font-size:15px;line-height:1.75;color:var(--ink-muted);}
/* connecting arrows */
.apply__grid .step:not(:nth-child(3n))::after{
  content:"→";position:absolute;right:-22px;top:50%;transform:translateY(-50%);
  font-size:22px;color:var(--ink-muted);z-index:2;
}
.apply__btn-wrap{display:flex;justify-content:center;margin-top:48px;}

/* ============================================================
   06 SCHEDULE / REQUIREMENTS / FAQ
   ============================================================ */
/* 背景は上の共通ブロック（ドット）で指定 */
.info{display:grid;grid-template-columns:1.35fr 1px 1fr 1px 1.1fr;gap:46px;align-items:start;}
.info__divider{width:1px;align-self:stretch;background:var(--line);}
.col-head{font-size:17px;font-weight:600;letter-spacing:.2em;margin-bottom:32px;}
.schedule{display:flex;flex-direction:column;gap:18px;}
.schedule > div{display:flex;gap:14px;font-size:14px;line-height:1.5;}
.schedule dt{flex:0 0 184px;font-weight:600;color:var(--ink);}
.schedule dt em{font-style:normal;font-size:11.5px;color:var(--ink-muted);margin:0 2px;}
.schedule dd{color:var(--ink-muted);}
.note{margin-top:22px;font-size:12px;color:var(--ink-muted);}
.requirements{display:flex;flex-direction:column;gap:18px;}
.requirements li{font-size:15px;line-height:1.7;padding-left:18px;position:relative;}
.requirements li::before{content:"・";position:absolute;left:0;color:var(--ink);}
/* faq */
.faq__item{border-bottom:1px solid var(--line);}
.faq__q{width:100%;background:none;border:0;cursor:pointer;font-family:var(--font-body);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 0;text-align:left;font-size:15.5px;color:var(--ink);}
.faq__mark{font-style:normal;font-size:20px;color:var(--ink-muted);transition:.3s;flex:none;}
.faq__item.open .faq__mark{transform:rotate(45deg);}
.faq__a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);}
.faq__a p{font-size:13.5px;line-height:1.8;color:var(--ink-muted);padding:0 0 18px;}
.see-all{display:inline-flex;align-self:flex-end;gap:12px;margin-top:20px;
  font-size:14px;letter-spacing:.06em;}
.see-all i{font-style:normal;}
.info__col--faq{display:flex;flex-direction:column;}

/* ============================================================
   07 ARE YOU READY ［背景画像版：hero.png 全面＋白フラット］
   ============================================================ */
.panel--ready{
  background:var(--bg-soft) url('../assets/hero.png') center/cover no-repeat;
}
.panel--ready::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:rgba(255,255,255,.65);                    /* .pen: #FFFFFFA6 ≒ 65% */
}
/* .pen: Left(350px @x120) と Follow(300px @x990) を左右端へ、中央に写真を見せる */
.ready{position:relative;z-index:1;
  display:flex;justify-content:space-between;align-items:center;gap:60px;}
.ready__left{max-width:350px;}
.ready__title{font-family:var(--font-notable);font-weight:400;font-size:clamp(34px,3.7vw,50px);
  letter-spacing:-.01em;line-height:1.1;max-width:6.4em;}  /* 幅340px → 2行折返し */
.ready__catch{font-size:18px;letter-spacing:.03em;margin:24px 0 40px;}  /* .pen: 上24 / 下40 */
.ready__image{display:none;}
.ready__follow{width:300px;flex:none;padding-left:0;}
.ready__follow .label{display:block;margin-bottom:22px;}
.socials{display:flex;gap:20px;align-items:center;}
.socials a{color:var(--ink);display:inline-flex;transition:.3s;}
.socials a:hover{opacity:.5;}
.socials svg{width:30px;height:30px;}
.ready__deadline{margin-top:32px;}
.ready__deadline-date{font-size:25px;font-weight:600;letter-spacing:.04em;margin-top:6px;}
.ready__deadline-date em{font-style:normal;font-size:15px;color:var(--ink-muted);}
/* footer */
.site-footer{position:absolute;left:0;bottom:0;width:100%;z-index:1;
  display:flex;align-items:center;justify-content:space-between;
  padding:32px 60px;border-top:1px solid var(--line);}
.footer__logo{font-size:16px;font-weight:600;letter-spacing:.12em;}
.footer__links{display:flex;gap:20px;align-items:center;font-size:13.5px;color:var(--ink-muted);letter-spacing:.06em;}
.footer__links span{color:var(--line);}
.footer__copy{font-size:12.5px;color:var(--ink-muted);letter-spacing:.04em;}

@media (max-width: 767px) {
  .ready__catch{font-size:16px;}
}

/* ============================================================
   セクション表示アニメーション（フェードイン）
   ------------------------------------------------------------
   js/main.js が <body> に .reveal-on を付け、表示中のセクションに
   .panel.is-in を付ける。デスクトップ（フルページ切替）はパネル切替に
   合わせて、モバイル（ネイティブスクロール）は IntersectionObserver で。
   JS 無効時は .reveal-on が付かないため、常に表示される（安全側）。
   ============================================================ */
body.reveal-on .panel > .wrap,
body.reveal-on .panel > .site-footer{
  opacity:0;
  transform:translateY(64px);
  transition:opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
body.reveal-on .panel.is-in > .wrap,
body.reveal-on .panel.is-in > .site-footer{
  opacity:1;
  transform:none;
}
/* フッターはコンテンツより少し遅れて */
body.reveal-on .panel.is-in > .site-footer{transition-delay:.2s;}

@media (prefers-reduced-motion:reduce){
  body.reveal-on .panel > .wrap,
  body.reveal-on .panel > .site-footer{
    opacity:1;transform:none;transition:none;
  }
}

/* ============================================================
   Responsive — disable fullpage, stack naturally
   ============================================================ */
@media (max-width:980px){
  body:not(.fullpage){overflow-y:auto;}
  body:not(.fullpage) .panels{position:static;transform:none!important;}
  body:not(.fullpage) .panel{height:auto;min-height:100vh;padding:calc(var(--header-h) + 40px) 0 60px;display:block;overflow:visible;}
  .dots{display:none!important;}
  .wrap{padding:0 28px;}

  /* hero — 背景画像は panel 全面のまま、テキストのみ縦積み */
  .hero{display:block;padding-top:0;}
  .hero__text{max-width:none;}
  .hero__title span{font-size:clamp(40px,11vw,64px);}  /* Notable は字幅が広いため上限を下げる */
  .hero__catch{margin-top:22px;}
  .hero__recruit{margin-top:32px;}
  .hero__scroll{display:none;}

  /* message — 背景画像は panel 全面のまま、テキストのみ */
  .message{display:block;}
  .message__text{max-width:none;}
  .message__head{font-size:clamp(28px,6.4vw,40px);}

  .promise__list{flex-wrap:wrap;gap:44px 24px;}
  .promise__list li{flex:0 0 40%;}
  .promise__title{font-size:clamp(24px,5.6vw,33px);}
  .promise__title br{display:block;}
  .promise__sub{font-size: 15px;}

  .support__grid{grid-template-columns:repeat(2,1fr);gap:32px 24px;}

  .apply__grid{grid-template-columns:1fr;}
  .apply__grid .step::after{display:none!important;}
  .step{min-height:0;}

  .info{grid-template-columns:1fr;gap:48px;}
  .info__divider{display:none;}

  /* ready — 背景画像は panel 全面のまま、テキスト縦積み */
  .ready{display:flex;flex-direction:column;gap:32px;}
  .ready__left{max-width:none;}
  .ready__title{font-size:clamp(32px,8.4vw,46px);max-width:none;}
  .ready .btn--dark{margin:0;}
  .ready__follow{width:auto;padding-left:0;}
  .site-footer{position:static;flex-direction:column;gap:16px;text-align:center;margin-top:48px;}
}

@media (max-width:560px){
  .site-header{padding:0 22px;}
  .support__grid{grid-template-columns:1fr;}
  .btn--dark{min-width:0;width:100%;}
  .nav-overlay a{font-size:26px;}
}