:root{
  --bg:#070b0e; --surface:#0e161b; --line:#1d2b33;
  --teal:#1fd6c4; --teal-d:#11a596; --pink:#ff2e63;
  --text:#eef4f5; --muted:#9fb2b8;
  --maxw:880px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;
  line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}

/* ヒーロー：チラシ全体画像の「上部」だけ見せる（タイトル＋カー） */
.hero{position:relative;background:#000}
.hero__img{
  width:100%;
  /* 画像は1054x1492。上部 約0〜965px（タイトル+カー）を表示し、チラシ側「募集要項」帯はカット */
  aspect-ratio:1054 / 965;
  background:url("../images/flyer-full.png") top center / 100% auto no-repeat;
}
/* 応募ボタンはヒーロー直下・横幅いっぱい（ヒーロー画像とは重ねない） */
a.hero__cta{display:block;text-align:center;border-radius:10px;padding:18px 20px;font-size:1.05rem;margin:14px 16px 0}
/* 広い画面ではチラシを巨大化させず、ポスター状に中央寄せ */
@media(min-width:700px){
  .hero__img{max-width:600px;margin:0 auto}
  /* a.hero__cta（要素+クラス）で指定しないと、上の a.hero__cta の margin に
     詳細度で負けて中央寄せが効かない */
  a.hero__cta{max-width:600px;margin:14px auto 0;border-radius:10px}
}

/* ボタン共通 */
.btn{display:inline-block;font-weight:700;text-decoration:none;border-radius:8px;
  padding:14px 28px;transition:.2s}
.btn--primary{background:var(--teal);color:#04181a}
.btn--primary:hover{background:var(--teal-d)}
.btn--lg{font-size:1.1rem;padding:18px 40px;width:100%;text-align:center;max-width:420px}

/* レイアウト土台 */
main{padding:8px 0 0}
.section{max-width:var(--maxw);margin:0 auto;padding:36px 20px}
.section + .section{border-top:1px solid var(--line)}
.section__title{font-size:1.4rem;letter-spacing:.04em;margin-bottom:18px;
  padding-left:14px;border-left:3px solid var(--teal)} /* 見出しのアクセントはOK（カード左ラインではない） */
.lead{color:var(--muted);margin-bottom:18px}
.subhead{margin:22px 0 6px;font-size:1.05rem;color:var(--text)}

/* 定義リスト（項目:内容） */
.dl{display:grid;grid-template-columns:max-content 1fr;gap:10px 18px;align-items:start}
.dl dt{color:var(--teal);font-weight:700;white-space:nowrap}
.dl dd{color:var(--text)}
@media(max-width:520px){
  .dl{grid-template-columns:1fr;gap:4px 0}
  .dl dd{margin-bottom:12px;color:var(--muted)}
}

/* 注記・箇条書き */
.note{color:var(--muted);font-size:.86rem;margin-top:10px}
ul.bullets{list-style:none;display:grid;gap:8px}
ul.bullets li{padding-left:18px;position:relative}
ul.bullets li::before{content:"";position:absolute;left:0;top:.7em;
  width:7px;height:7px;background:var(--teal);border-radius:2px}

/* リンク */
.link{color:var(--teal);text-decoration:underline}
.link:hover{color:var(--teal-d)}

/* カード（塗り＋全周罫線のみ。左ボーダーアクセント禁止） */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:16px 14px;display:flex;flex-direction:column;gap:6px}
.card__k{color:var(--teal);font-weight:700;font-size:.8rem;letter-spacing:.08em}
.card__v{font-size:1.05rem;font-weight:700}
.card__s{color:var(--muted);font-size:.78rem}
.cards--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cards--2{grid-template-columns:1fr}}

/* FAQ */
.faq{display:grid;gap:10px}
.faq__item{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.faq__item summary{cursor:pointer;list-style:none;padding:14px 44px 14px 16px;position:relative;font-weight:600}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";position:absolute;right:16px;top:12px;color:var(--teal);font-size:1.3rem}
.faq__item[open] summary::after{content:"−"}
.faq__a{padding:0 16px 16px;color:var(--muted)}

/* 応募 */
.apply{text-align:center}
.apply .section__title{display:inline-block}
.apply .lead{max-width:560px;margin-inline:auto}

/* 中間CTA */
.cta-mid{text-align:center}
.cta-mid .btn--lg{margin:0 auto}

/* 応募フォーム */
.form{display:grid;gap:16px;max-width:560px;margin:8px auto 0;text-align:left}
.field{display:block;border:0;padding:0;margin:0}
.field__label{display:block;font-weight:600;margin-bottom:6px;font-size:.95rem}
.field__label em,.check em{color:var(--pink);font-style:normal;font-size:.78rem;margin-left:6px}
.form input[type=text],.form input[type=tel],.form input[type=email],
.form input[type=date],.form textarea{
  width:100%;background:var(--surface);border:1px solid var(--line);border-radius:8px;
  color:var(--text);padding:12px 14px;font:inherit}
.form textarea{resize:vertical}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--teal)}
.radios{display:flex;flex-wrap:wrap;gap:10px 18px}
.radios label,.gear-row label{display:inline-flex;align-items:center;gap:6px;font-weight:400;cursor:pointer}
fieldset.field legend{padding:0}
.gear-grid{display:grid;gap:10px;margin-top:10px}
.gear-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;
  background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 14px}
.gear-name{font-weight:600;min-width:8em}
.check{display:flex;gap:10px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-radius:8px;padding:14px}
.check input{margin-top:4px;flex:0 0 auto}
.check span{font-size:.92rem}
.form .btn--lg{justify-self:center;margin-top:6px}

/* フッター */
.site-footer{border-top:1px solid var(--line);background:#05090b}
.site-footer__inner{max-width:var(--maxw);margin:0 auto;padding:28px 20px;text-align:center}
.site-footer__brand{letter-spacing:.18em;font-weight:700;margin-bottom:8px}
.site-footer__line{color:var(--muted);font-size:.86rem}