/* ============================================================
   AMICHI PRODUCE — NEW IDOL PROJECT ［エントリーフォーム］
   entry.php / entry-form.php 用。
   デザイントークンは css/style.css（= design/new_idol_project.pen）と同一。
   ============================================================ */
:root{
  --bg-white:#FFFFFF;
  --bg-soft:#F7F6F4;
  --ink:#141414;
  --ink-muted:#8A8A8A;
  --line:#E2E0DC;
  --line-strong:#C9C6C0;
  --accent:#111111;
  --on-accent:#FFFFFF;
  --error:#B3261E;
  --error-bg:#FBF1F0;
  /* 背景ドット（千鳥配置）。色・間隔・直径はここだけで調整する。 */
  --dot:#E0DCD4;
  --dot-pitch:38px;
  --dot-size:3.6px;
  /* フォームの既定はゴシック。ラテンだけ Bricolage に振り分ける。
     募集要項・ラベル・注記・入力欄・確認画面の値は 10〜13.5px と小さく、
     明朝の細い横画では潰れるため、実務情報はゴシックのまま残している。
     明朝は 14px 以上の導入的な見出し・リード文だけに使う（--font-mincho）。 */
  --font-body:"Bricolage Grotesque", "Noto Sans JP", sans-serif;
  --font-mincho:"Bricolage Grotesque", "NIP Mincho", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  --ease:cubic-bezier(.76,0,.24,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-synthesis:none;          /* NIP Mincho は Regular のみ。合成太字を禁止する */
  font-optical-sizing:auto;
  /* 2 枚の radial-gradient を半ピッチずらして千鳥のドットグリッドにする */
  background-color:var(--bg-soft);
  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);
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
ul,ol{list-style:none;}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;}

/* ============================================================
   header / footer
   ============================================================ */
.entry-header{
  height:80px;background:var(--bg-white);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:0 40px;
}
.entry-header__logo{font-size:18px;font-weight:600;letter-spacing:.14em;}
.entry-header__back{font-size:13px;letter-spacing:.08em;color:var(--ink-muted);transition:.3s;}
.entry-header__back:hover{color:var(--ink);}

.entry-footer{
  border-top:1px solid var(--line);background:var(--bg-white);
  display:flex;align-items:center;justify-content:space-between;
  padding:28px 40px;margin-top:96px;
}
.entry-footer__logo{font-size:15px;font-weight:600;letter-spacing:.12em;}
.entry-footer__links{display:flex;gap:16px;font-size:13px;color:var(--ink-muted);letter-spacing:.06em;}
.entry-footer__links span{color:var(--line);}
.entry-footer__copy{font-size:12px;color:var(--ink-muted);letter-spacing:.04em;}

/* ============================================================
   page head
   ============================================================ */
.entry-main{max-width:960px;margin:0 auto;padding:0 28px;}

.entry-hero{text-align:center;padding:72px 0 36px;}
.entry-hero__kicker{
  font-size:12px;font-weight:700;
  letter-spacing:.34em;color:var(--ink-muted);margin-bottom:20px;
}
/* 見出しとリード文だけ明朝。太さが使えない分をサイズと字間で補う */
.entry-hero__title{font-family:var(--font-mincho);font-size:clamp(30px,4.2vw,42px);
  font-weight:400;letter-spacing:.08em;line-height:1.45;}
.entry-hero__lead{font-family:var(--font-mincho);margin-top:20px;font-size:15px;
  line-height:2.05;color:var(--ink-muted);}

/* ---------- step indicator ---------- */
.steps{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);background:var(--bg-white);margin-bottom:-1px;
}
.steps__item{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:18px 8px;border-right:1px solid var(--line);
  color:var(--ink-muted);text-align:center;
}
.steps__item:last-child{border-right:0;}
.steps__num{font-size:17px;font-weight:700;letter-spacing:.04em;line-height:1;}
.steps__label{font-size:11.5px;letter-spacing:.06em;line-height:1.4;}
.steps__item.is-done{color:var(--ink);}
.steps__item.is-current{background:var(--accent);color:var(--on-accent);}

/* ============================================================
   card
   ============================================================ */
.entry-card{
  background:var(--bg-white);border:1px solid var(--line);
  padding:56px 56px 64px;
}
.entry-card--center{text-align:center;padding:72px 56px 80px;}

/* ---------- fieldset block ---------- */
.fset{margin-bottom:56px;}
.fset:last-of-type{margin-bottom:0;}
/* 明朝 Regular で細くなる分は、既存の 1px 下線が見出しとしての機能を担保する */
.fset__head{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-mincho);font-size:19px;font-weight:400;letter-spacing:.1em;
  padding-bottom:14px;border-bottom:1px solid var(--ink);margin-bottom:28px;
}
.fset__num{
  flex:none;width:24px;height:24px;background:var(--accent);color:var(--on-accent);
  font-size:13px;font-weight:700;line-height:24px;
  text-align:center;letter-spacing:0;
}
.fset__lead{font-size:13.5px;line-height:1.9;color:var(--ink-muted);margin:-8px 0 24px;}

/* ---------- 要項・注意事項 ---------- */
.doc{background:var(--bg-soft);border:1px solid var(--line);padding:32px 34px;}
.doc--flat{background:none;border:0;padding:0;text-align:left;margin-top:36px;}
.doc__head{font-size:14px;font-weight:700;letter-spacing:.1em;margin:28px 0 12px;}
.doc__head:first-child{margin-top:0;}
.doc__list{display:flex;flex-direction:column;gap:10px;}
.doc__list li{font-size:13.5px;line-height:1.9;padding-left:16px;position:relative;}
.doc__list li::before{
  content:"";position:absolute;left:2px;top:.85em;width:5px;height:1px;background:var(--ink);
}
.doc__text{font-size:13.5px;line-height:1.9;}
.doc strong{font-weight:700;}

/* ============================================================
   form fields
   ============================================================ */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px 28px;}
.field{margin-bottom:24px;}
.grid-2 > .field{margin-bottom:0;}

.field__label{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:13.5px;font-weight:600;letter-spacing:.04em;margin-bottom:8px;
}
.field__note{font-size:11.5px;line-height:1.7;color:var(--ink-muted);margin-top:6px;}
.field__count{font-size:11.5px;color:var(--ink-muted);text-align:right;margin-top:6px;}
.field__error{font-size:12.5px;line-height:1.7;color:var(--error);margin-top:7px;}

input[type=text],input[type=email],input[type=tel],input[type=url],input[type=date],select,textarea{
  width:100%;background:var(--bg-white);border:1px solid var(--line-strong);
  padding:13px 14px;font-size:14.5px;line-height:1.6;border-radius:0;
  transition:border-color .2s var(--ease),background .2s var(--ease);
  -webkit-appearance:none;appearance:none;
}
textarea{resize:vertical;min-height:170px;line-height:1.9;}
input::placeholder,textarea::placeholder{color:#B8B5B0;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);background:var(--bg-white);}
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23141414' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:11px;
  padding-right:38px;cursor:pointer;
}
.field.is-error input,.field.is-error select,.field.is-error textarea{
  border-color:var(--error);background:var(--error-bg);
}

/* 必須 / 任意 タグ */
.tag{
  font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.08em;line-height:1;
  padding:4px 7px;flex:none;
}
.tag--req{background:var(--accent);color:var(--on-accent);}
.tag--opt{border:1px solid var(--line-strong);color:var(--ink-muted);}
.tag--cond{border:1px solid var(--ink);color:var(--ink);}

/* 郵便番号 */
.zip-row{display:flex;gap:10px;align-items:stretch;}
.zip-row input{max-width:200px;}

/* 単位付き入力 */
.unit-row{position:relative;}
.unit-row input{padding-right:44px;}
.unit{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-size:13px;color:var(--ink-muted);pointer-events:none;
}

/* 保護者情報 */
.guardian{margin-top:24px;padding-top:24px;border-top:1px dashed var(--line-strong);}
.guardian__note{
  grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:12.5px;color:var(--ink-muted);
}
.guardian.is-required .guardian__note{color:var(--ink);}
.guardian.is-required .guardian__note .tag--cond{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}

/* ハニーポット */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ============================================================
   同意チェック
   ============================================================ */
.agree{margin-top:48px;}
.agree__box{background:var(--bg-soft);border:1px solid var(--line);padding:26px 30px;
  display:flex;flex-direction:column;gap:16px;}
.check{display:flex;align-items:flex-start;gap:13px;cursor:pointer;font-size:13.5px;line-height:1.85;}
.check input[type=checkbox]{
  flex:none;width:20px;height:20px;margin-top:3px;border:1px solid var(--line-strong);
  background:var(--bg-white);cursor:pointer;-webkit-appearance:none;appearance:none;
  border-radius:0;transition:.2s var(--ease);
}
.check input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent);}
.check input[type=checkbox]:checked::after{
  content:"";display:block;width:6px;height:11px;margin:2px auto 0;
  border:solid var(--on-accent);border-width:0 1.6px 1.6px 0;transform:rotate(45deg);
}
.check input[type=checkbox]:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.check .tag{display:inline-block;margin-left:6px;vertical-align:middle;}

/* ============================================================
   写真アップロード
   ============================================================ */
.photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 20px;}
.photo{display:flex;flex-direction:column;}
.photo__input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.photo__drop{
  position:relative;display:flex;align-items:center;justify-content:center;
  aspect-ratio:3/4;border:1px dashed var(--line-strong);background:var(--bg-soft);
  cursor:pointer;overflow:hidden;transition:.25s var(--ease);
}
.photo__drop:hover{border-color:var(--ink);background:#F1EFEC;}
.photo__drop.is-drag{border-color:var(--ink);background:#EDEBE7;}
.photo__drop--static{cursor:default;border-style:solid;}
.photo__placeholder{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:14px;text-align:center;color:var(--ink-muted);
}
.photo__icon svg{width:26px;height:26px;}
.photo__text{font-size:11.5px;line-height:1.7;}
.photo__hint{font-size:10px;letter-spacing:.02em;}
.photo__preview{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--bg-white);
}
.photo__drop:has(.photo__preview) .photo__placeholder,
.photo__drop.has-preview .photo__placeholder{display:none;}
.photo__caption{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:12.5px;font-weight:600;letter-spacing:.03em;margin-top:10px;
}
.photo__hintline{font-size:10.5px;line-height:1.6;color:var(--ink-muted);margin-top:3px;}
.photo__file{font-size:10.5px;line-height:1.6;color:var(--ink);margin-top:4px;word-break:break-all;}
.photo.is-error .photo__drop{border-color:var(--error);background:var(--error-bg);}
.photo-grid--review{grid-template-columns:repeat(4,1fr);}

/* ============================================================
   確認画面
   ============================================================ */
.review{border-top:1px solid var(--line);}
.review__row{display:grid;grid-template-columns:200px 1fr;gap:20px;
  padding:16px 4px;border-bottom:1px solid var(--line);}
.review__row dt{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--ink-muted);}
.review__row dd{font-size:14.5px;line-height:1.9;word-break:break-word;}
.review__empty{color:var(--ink-muted);}

/* ============================================================
   完了画面
   ============================================================ */
.complete__mark{display:flex;justify-content:center;color:var(--ink);}
.complete__mark svg{width:58px;height:58px;}
.complete__title{font-family:var(--font-mincho);font-size:clamp(22px,2.8vw,28px);
  font-weight:400;letter-spacing:.08em;margin-top:26px;}
.complete__lead{font-family:var(--font-mincho);font-size:15px;line-height:2.15;
  color:var(--ink);margin-top:22px;}
.complete__mail{
  display:inline-block;margin-top:22px;padding:12px 24px;
  background:var(--bg-soft);border:1px solid var(--line);
  font-size:14.5px;letter-spacing:.04em;word-break:break-all;
}

/* ============================================================
   alert
   ============================================================ */
.alert{padding:18px 22px;margin-bottom:36px;font-size:13.5px;line-height:1.9;}
.alert p + p{margin-top:4px;}
.alert--error{background:var(--error-bg);border:1px solid var(--error);color:var(--error);}
.alert--info{background:var(--bg-soft);border:1px solid var(--line-strong);}

/* ============================================================
   buttons / actions
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:space-between;gap:28px;
  font-size:15px;font-weight:600;letter-spacing:.2em;line-height:1;
  padding:20px 28px;border:0;cursor:pointer;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;}
.btn--dark:hover{background:#000;}
.btn--dark:hover i{transform:translateX(6px);}
.btn--dark:disabled{background:var(--line-strong);cursor:not-allowed;}
.btn--dark:disabled:hover i{transform:none;}
.btn--ghost{
  background:none;border:1px solid var(--line-strong);color:var(--ink);
  font-size:13.5px;font-weight:500;letter-spacing:.08em;padding:15px 34px;gap:0;
}
.btn--ghost:hover{border-color:var(--ink);}
.btn--sm{
  background:var(--accent);color:var(--on-accent);
  font-size:13px;font-weight:500;letter-spacing:.06em;padding:0 20px;gap:0;flex:none;
}
.btn--sm:hover{background:#000;}

.entry-actions{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  margin-top:56px;padding-top:48px;border-top:1px solid var(--line);
}
.entry-actions__note{font-size:12px;color:var(--ink-muted);letter-spacing:.02em;}
.entry-actions--confirm{gap:16px;}

/* ============================================================
   responsive
   ============================================================ */
@media (max-width:880px){
  .photo-grid,.photo-grid--review{grid-template-columns:repeat(3,1fr);}
}

@media (max-width:720px){
  .entry-header{height:64px;padding:0 20px;}
  .entry-header__logo{font-size:15px;}
  .entry-header__back{font-size:12px;}
  .entry-main{padding:0 16px;}
  .entry-hero{padding:44px 0 26px;}
  .entry-card{padding:32px 22px 40px;}
  .entry-card--center{padding:48px 22px 56px;}

  .steps{grid-template-columns:repeat(2,1fr);}
  .steps__item{border-bottom:1px solid var(--line);}
  .steps__item:nth-child(2n){border-right:0;}
  .steps__item:nth-last-child(-n+2){border-bottom:0;}

  .doc{padding:22px 20px;}
  .fset{margin-bottom:44px;}
  .grid-2{grid-template-columns:1fr;gap:24px;}
  .grid-2 > .field{margin-bottom:0;}
  .zip-row input{max-width:none;}

  .photo-grid,.photo-grid--review{grid-template-columns:repeat(2,1fr);gap:20px 14px;}
  .review__row{grid-template-columns:1fr;gap:4px;padding:14px 2px;}

  .entry-actions{margin-top:40px;padding-top:32px;}
  .btn--dark{min-width:0;width:100%;justify-content:center;gap:14px;font-size:14px;}
  .btn--ghost{width:100%;justify-content:center;}
  .entry-actions form{width:100%;}

  .entry-footer{flex-direction:column;gap:12px;text-align:center;padding:24px 20px;margin-top:64px;}
}