/* ============================================================
   HOUKAGO! 専用のスタイル
   site.css / mobile.css / ios.css は読み込まない。
   同じドメインの中の「別サイト」として独立させるため、
   リセットも変数もこのファイルだけで完結させる
   ============================================================ */

:root{
  /* ロゴから実測した色 */
  --hk-ink:#000;
  --hk-paper:#fff;
  --hk-cy:#00A9FD;        /* シアン */
  --hk-mg:#FE3695;        /* マゼンタ */
  --hk-yl:#FECD03;        /* イエロー */
  --hk-gray:#6E6E6E;
  --hk-line:#000;

  --hk-disp:'Dela Gothic One','Zen Kaku Gothic New','Hiragino Kaku Gothic ProN',sans-serif;
  --hk-body:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN',sans-serif;
  --hk-gutter:clamp(20px,5vw,64px);
}

*{box-sizing:border-box;margin:0;padding:0}
/* アイコンの元データ。<use> で呼ぶだけなので、ここ自体は表示しない */
.hk-sprite{position:absolute;width:0;height:0;overflow:hidden}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--hk-body);
  background:var(--hk-paper);
  color:var(--hk-ink);
  font-size:16px;line-height:1.95;font-weight:500;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@supports (overflow:clip){body{overflow-x:clip}}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--hk-cy);outline-offset:2px}

/* ---------- 共通の部品 ---------- */
.hk-sec{
  padding:clamp(64px,9vw,128px) var(--hk-gutter);
  max-width:1280px;margin:0 auto;
}
@supports (padding-left: max(0px, env(safe-area-inset-left))){
  .hk-sec,.hk-hero,.hk-foot{
    padding-left:max(var(--hk-gutter),env(safe-area-inset-left));
    padding-right:max(var(--hk-gutter),env(safe-area-inset-right));
  }
}

/* 見出しの上に置く小さいラベル。ロゴと同じ「色ずれ」を効かせる */
.hk-label{
  display:inline-block;
  font-family:var(--hk-disp);font-size:clamp(11px,1.2vw,13px);
  letter-spacing:.2em;line-height:1;
  padding:9px 14px;border:2px solid var(--hk-ink);
  background:var(--hk-paper);
  box-shadow:4px 4px 0 var(--hk-cy);
  margin-bottom:clamp(22px,3vw,34px);
}
.hk-label.yl{box-shadow:4px 4px 0 var(--hk-yl)}

.hk-h{
  font-family:var(--hk-disp);font-weight:400;
  font-size:clamp(27px,4.4vw,56px);line-height:1.34;
  letter-spacing:.01em;
  margin-bottom:clamp(26px,3.4vw,44px);
}
.hk-p{font-size:clamp(15.5px,1.35vw,18px);line-height:2.1;letter-spacing:.02em}
.hk-p+.hk-p{margin-top:1.7em}

.hk-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:16px 30px;
  font-family:var(--hk-disp);font-size:clamp(14px,1.4vw,16px);letter-spacing:.06em;
  color:var(--hk-paper);background:var(--hk-ink);
  border:2px solid var(--hk-ink);border-radius:999px;
  box-shadow:5px 5px 0 var(--hk-mg);
  transition:transform .18s ease,box-shadow .18s ease;
}
@media (hover:hover){
  .hk-btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--hk-mg)}
}
.hk-btn:active{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--hk-mg)}
.hk-ic{width:20px;height:20px;flex:none;display:block}
.hk-btn.cy{box-shadow:5px 5px 0 var(--hk-cy)}
@media (hover:hover){
  .hk-btn.cy:hover{box-shadow:2px 2px 0 var(--hk-cy)}
}
.hk-btn.cy:active{box-shadow:1px 1px 0 var(--hk-cy)}

/* ---------- 一番下の「運営」 ---------- */
.hk-by{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:.06em;line-height:1.3;
  padding:10px 0;position:relative;
}
.hk-by::before{content:"";position:absolute;left:-8px;right:-8px;top:50%;height:44px;transform:translateY(-50%)}
.hk-by b{font-family:var(--hk-disp);font-weight:400}
@media (hover:hover){.hk-by:hover b{color:var(--hk-cy)}}

/* ---------- ヒーロー ---------- */
/* 開いたときはここだけが見えるように、ナビを除いた画面の高さいっぱいにする。
   iOS は 100vh だとツールバーの分だけはみ出すので 100svh（小さいほうの高さ）を使う */
.hk-hero{
  position:relative;overflow:hidden;
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(40px,6vw,72px) var(--hk-gutter) clamp(84px,9vw,120px);
  text-align:center;
}
@supports (height:100svh){
  .hk-hero{min-height:100svh}
}
.hk-hero-in{max-width:960px;margin:0 auto;position:relative;z-index:1}

/* 背景でゆっくり息をする光。ロゴの3色をごく薄く置いて、白一色の平板さをなくす */
.hk-hero::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:50%;top:46%;width:min(1180px,160vw);aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(circle at 36% 40%, rgba(0,169,253,.16), transparent 56%),
    radial-gradient(circle at 66% 36%, rgba(254,54,149,.13), transparent 54%),
    radial-gradient(circle at 50% 68%, rgba(254,205,3,.15), transparent 54%);
  filter:blur(46px);
  animation:hk-breathe 20s ease-in-out infinite;
}
@keyframes hk-breathe{
  0%,100%{transform:translate(-50%,-50%) scale(1) rotate(0deg)}
  50%    {transform:translate(-50%,-50%) scale(1.1) rotate(8deg)}
}

/* ---- 入ってきたときの動き。ゆっくり立ち上がるほど上等に見える ---- */
@keyframes hk-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes hk-logo-in{from{opacity:0;transform:translateY(26px) scale(.965)}to{opacity:1;transform:none}}
@keyframes hk-cue-in{from{opacity:0}to{opacity:1}}
.hk-hero-logo{animation:hk-logo-in 1.25s cubic-bezier(.16,.84,.24,1) both}
.hk-lead     {animation:hk-rise .95s cubic-bezier(.16,.84,.24,1) .42s both}
.hk-hero-cta {animation:hk-rise .95s cubic-bezier(.16,.84,.24,1) .58s both}
.hk-hero-join{animation:hk-rise .95s cubic-bezier(.16,.84,.24,1) .72s both}
.hk-scroll   {animation:hk-cue-in 1s ease 1.15s both}

/* ---- 下へ誘導する印 ---- */
.hk-scroll{
  position:absolute;z-index:1;
  left:50%;bottom:clamp(22px,3vw,38px);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:8px 12px;
  font-family:var(--hk-disp);font-size:10px;letter-spacing:.3em;
  color:var(--hk-ink);
  transition:opacity .5s ease;
}
.hk-scroll .ln{
  display:block;width:1px;height:44px;
  background:linear-gradient(180deg,var(--hk-ink) 0%,rgba(0,0,0,.12) 100%);
  overflow:hidden;position:relative;
}
/* 線の上を光が降りていく */
.hk-scroll .ln::after{
  content:"";position:absolute;left:0;width:1px;height:16px;
  background:var(--hk-mg);
  animation:hk-drop 2.2s cubic-bezier(.6,.05,.3,1) infinite;
}
@keyframes hk-drop{
  0%{top:-16px;opacity:0}
  18%{opacity:1}
  82%{opacity:1}
  100%{top:44px;opacity:0}
}
/* 少しでもスクロールしたら消える（JSが .hk-scrolled を付ける） */
.hk-scrolled .hk-scroll{opacity:0;pointer-events:none}
/* 横幅だけでなく画面の高さでも上限をかける。
   そうしないと画面の低いPCでロゴが縦に育ち、下の SCROLL が画面外に出る */
.hk-hero-logo{
  width:min(820px,88vw,78vh);margin:0 auto clamp(26px,3.6vw,42px);
}
@supports (height:100svh){
  .hk-hero-logo{width:min(820px,88vw,78svh)}
}
.hk-lead{
  font-size:clamp(15px,1.5vw,18px);line-height:2.05;
  max-width:34em;margin:0 auto clamp(30px,4vw,44px);
}
.hk-hero-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* 出演の応募ボタン。SNSの2つは黒なので、こちらは黄色にして主役にする */
.hk-hero-join{margin-top:16px;display:flex;justify-content:center}
.hk-btn-join{
  color:var(--hk-ink);background:var(--hk-yl);
  box-shadow:5px 5px 0 var(--hk-ink);
  padding:16px 34px;
}
@media (hover:hover){
  .hk-btn-join:hover{box-shadow:2px 2px 0 var(--hk-ink)}
}
.hk-btn-join:active{box-shadow:1px 1px 0 var(--hk-ink)}
/* リンク先が決まるまでは押せない見た目にしない（文字だけ置く）。
   URL を入れて <a> にすれば、そのまま押せるボタンになる */
span.hk-btn-join{cursor:default}

/* ---------- スクロールで浮かび上がる ----------
   JSが動いたときだけ隠す。動かなければ最初から見えている */
.js .rv{
  opacity:0;transform:translateY(30px);
  transition:opacity 1s cubic-bezier(.16,.84,.24,1),transform 1.1s cubic-bezier(.16,.84,.24,1);
}
.js .rv.is-in{opacity:1;transform:none}
.js .rv-1{transition-delay:.08s}
.js .rv-2{transition-delay:.16s}
.js .rv-3{transition-delay:.24s}
.js .rv-4{transition-delay:.32s}

/* ---------- 動画（9:16） ---------- */
.hk-reels{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,2vw,26px);
}
.hk-reel{
  position:relative;aspect-ratio:9/16;
  border:3px solid var(--hk-ink);background:#F2F2F2;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.js .hk-reel{transition-delay:calc(var(--i,0) * .09s)}
.hk-reel:nth-child(4n+1){box-shadow:6px 6px 0 var(--hk-cy)}
.hk-reel:nth-child(4n+2){box-shadow:6px 6px 0 var(--hk-mg)}
.hk-reel:nth-child(4n+3){box-shadow:6px 6px 0 var(--hk-yl)}
.hk-reel:nth-child(4n+4){box-shadow:6px 6px 0 var(--hk-ink)}
.hk-reel img,.hk-reel video{width:100%;height:100%;object-fit:cover}
.hk-reel .soon{
  font-family:var(--hk-disp);font-size:clamp(11px,1.1vw,13px);
  letter-spacing:.16em;color:var(--hk-gray);
}

/* ---------- フッター ---------- */
.hk-foot{
  border-top:3px solid var(--hk-ink);
  padding:clamp(28px,4vw,48px) var(--hk-gutter);
  display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;
  font-size:12.5px;letter-spacing:.04em;
}
.hk-foot a{position:relative;padding:10px 0}
.hk-foot a::before{content:"";position:absolute;left:-8px;right:-8px;top:50%;height:44px;transform:translateY(-50%)}
@media (hover:hover){.hk-foot a:hover{color:var(--hk-mg)}}

/* ---------- 動きを減らす設定のとき ---------- */
@media (prefers-reduced-motion:reduce){
  .hk-hero::before,
  .hk-scroll .ln::after{animation:none}
  .hk-hero-logo,.hk-lead,.hk-hero-cta,.hk-hero-join,.hk-scroll{animation:none;opacity:1;transform:none}
  .js .rv{transition:none}
}

/* ---------- 横向きで画面が低いとき ----------
   画面いっぱいにするとロゴが入りきらないので、高さの指定を外して縮める */
@media (orientation:landscape) and (max-height:600px){
  .hk-hero{min-height:0;padding-bottom:clamp(56px,7vw,84px)}
  /* 画面いっぱいにできないので、下へ誘導する印も出さない */
  .hk-scroll{display:none}
  .hk-hero-logo{width:min(520px,52vw)}
}

/* ---------- スマホ ---------- */
@media (max-width:860px){
  .hk-reels{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  :root{--hk-gutter:22px}
  .hk-sec{padding-top:clamp(52px,13vw,72px);padding-bottom:clamp(52px,13vw,72px)}
  /* (1) ロゴの上に余白を足す */
  .hk-hero{padding-top:60px}

  /* (3) ボタンを3つとも小さくして、Instagram と TikTok が一列に収まるようにする。
         390px のとき、使える幅 346px に対して 362px 必要で折り返していた */
  .hk-hero-cta{gap:10px}
  .hk-btn{min-height:48px;padding:14px 20px;font-size:13px;gap:8px}
  .hk-ic{width:18px;height:18px}
  .hk-hero-join{margin-top:12px}
  .hk-btn-join{padding:14px 26px}

  /* (4) 一番下に余白を足す。ホームバーの分も見込む */
  .hk-foot{padding-bottom:calc(52px + env(safe-area-inset-bottom))}
}

/* ============================================================
   CAST MEMBER 募集ページ（houkago-cast.html）専用
   本体と同じ部品（.hk-btn / .hk-label / .hk-sec）をそのまま使い、
   足りないものだけここで足す
   ============================================================ */

/* ---------- ヒーロー ---------- */
/* 本体はロゴ1枚が主役だが、こちらは見出しが主役。ロゴは小さく上に置く */
.hk-hero-mark{display:block;width:min(300px,52vw);margin:0 auto clamp(26px,3.4vw,40px)}
.hk-hero-mark img{width:100%}
@media (hover:hover){.hk-hero-mark:hover{opacity:.7}}

.hk-cast-eyebrow{
  display:inline-block;
  font-family:var(--hk-disp);font-size:clamp(11px,1.2vw,13px);
  letter-spacing:.2em;line-height:1;
  padding:9px 14px;border:2px solid var(--hk-ink);
  background:var(--hk-paper);box-shadow:4px 4px 0 var(--hk-mg);
  margin-bottom:clamp(22px,3vw,32px);
}
.hk-cast-title{
  font-family:var(--hk-disp);font-weight:400;
  font-size:clamp(32px,6.4vw,84px);line-height:1.26;letter-spacing:.01em;
  margin-bottom:clamp(24px,3.2vw,38px);
}
.hk-hero-cast .hk-lead{margin-bottom:0}
.hk-hero-cast .hk-hero-join{margin-top:clamp(28px,3.6vw,44px)}

/* ヒーローの動きは本体と同じ順番で立ち上げる */
.hk-hero-mark   {animation:hk-rise .95s cubic-bezier(.16,.84,.24,1) both}
.hk-cast-eyebrow{animation:hk-rise .95s cubic-bezier(.16,.84,.24,1) .22s both}
.hk-cast-title  {animation:hk-logo-in 1.15s cubic-bezier(.16,.84,.24,1) .34s both}
.hk-hero-cast .hk-lead{animation:hk-rise .95s cubic-bezier(.16,.84,.24,1) .54s both}

/* ---------- 本文 ---------- */
/* PCでは横いっぱいに伸ばす（右側が空いて見えないように） */
.hk-body{max-width:none}
.hk-note{
  margin-top:clamp(26px,3vw,38px);
  padding-left:clamp(16px,1.8vw,22px);
  border-left:4px solid var(--hk-cy);
  font-size:clamp(14px,1.25vw,16.5px);line-height:2;letter-spacing:.02em;
}
/* 強く言い切るところだけ大きく */
.hk-big{
  font-family:var(--hk-disp);font-weight:400;
  font-size:clamp(20px,2.9vw,38px);line-height:1.5;letter-spacing:.01em;
  margin-top:1.1em;
}

/* 節ごとに地の色を変えて、読み進む区切りをつくる。
   max-width を外すと中身の左端が他の節とずれるので、
   節そのものは 1280px のままにして、地の色だけ画面幅いっぱいに敷く */
.hk-sec-band{position:relative}
.hk-sec-band::before{
  content:"";position:absolute;z-index:-1;
  top:0;bottom:0;left:calc(-50vw + 50%);width:100vw;
  background:#F6F6F4;
}

/* ---------- こんなことをします ---------- */
/* minmax(0,1fr) にしないと、EXPERIENCE のように長い語を持つ列だけ広がる */
.hk-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.hk-card{
  border:3px solid var(--hk-ink);background:var(--hk-paper);
  padding:clamp(22px,2.4vw,32px);
}
.js .hk-card{transition-delay:calc(var(--i,0) * .09s)}
.hk-card:nth-child(4n+1){box-shadow:6px 6px 0 var(--hk-cy)}
.hk-card:nth-child(4n+2){box-shadow:6px 6px 0 var(--hk-mg)}
.hk-card:nth-child(4n+3){box-shadow:6px 6px 0 var(--hk-yl)}
.hk-card:nth-child(4n+4){box-shadow:6px 6px 0 var(--hk-ink)}
.hk-card .no{
  display:block;font-family:var(--hk-disp);font-size:clamp(13px,1.2vw,15px);
  letter-spacing:.1em;color:var(--hk-gray);margin-bottom:10px;
}
.hk-card h3{
  font-family:var(--hk-disp);font-weight:400;
  font-size:clamp(19px,1.9vw,25px);line-height:1.3;letter-spacing:.02em;
  margin-bottom:12px;
}
.hk-card p{font-size:clamp(14px,1.2vw,16px);line-height:1.95;letter-spacing:.02em}

/* ---------- 募集している人 ---------- */
.hk-list{list-style:none;margin:clamp(22px,2.6vw,32px) 0 clamp(26px,3vw,38px)}
.hk-list li{
  position:relative;padding:clamp(14px,1.6vw,20px) 0 clamp(14px,1.6vw,20px) 34px;
  border-top:1px solid rgba(0,0,0,.14);
  font-size:clamp(15px,1.35vw,18px);line-height:1.85;letter-spacing:.02em;
}
.hk-list li:last-child{border-bottom:1px solid rgba(0,0,0,.14)}
.js .hk-list li{transition-delay:calc(var(--i,0) * .07s)}
/* 行頭の印。3色を順番に使う */
.hk-list li::before{
  content:"";position:absolute;left:4px;top:calc(clamp(14px,1.6vw,20px) + .72em);
  width:12px;height:12px;background:var(--hk-cy);
}
.hk-list li:nth-child(3n+2)::before{background:var(--hk-mg)}
.hk-list li:nth-child(3n+3)::before{background:var(--hk-yl)}

/* ---------- 目指すこと ---------- */
.hk-quotes{list-style:none;margin:clamp(22px,2.6vw,32px) 0}
.hk-quotes li{
  font-family:var(--hk-disp);font-weight:400;
  font-size:clamp(17px,2.2vw,30px);line-height:1.5;letter-spacing:.01em;
  padding:clamp(10px,1.2vw,15px) 0 clamp(10px,1.2vw,15px) clamp(16px,1.8vw,24px);
  border-left:6px solid var(--hk-cy);
}
.js .hk-quotes li{transition-delay:calc(var(--i,0) * .09s)}
.hk-quotes li+li{margin-top:clamp(10px,1.2vw,16px)}
.hk-quotes li:nth-child(2){border-left-color:var(--hk-mg)}
.hk-quotes li:nth-child(3){border-left-color:var(--hk-yl)}
.hk-quotes li::before{content:"「"}
.hk-quotes li::after{content:"」"}

/* ---------- プロジェクト概要 ---------- */
.hk-sec-outline{border-top:3px solid var(--hk-ink)}
.hk-project-name{
  font-family:var(--hk-disp);font-weight:400;
  font-size:clamp(30px,5vw,62px);line-height:1.2;letter-spacing:.01em;
}
.hk-project-name span{
  display:block;font-family:var(--hk-body);font-weight:700;
  font-size:clamp(12px,1.1vw,14px);letter-spacing:.14em;color:var(--hk-gray);
  margin-top:.7em;
}
.hk-facts{
  margin:clamp(30px,3.6vw,48px) 0 clamp(30px,3.6vw,46px);
  border-top:1px solid rgba(0,0,0,.14);
}
.hk-facts>div{
  display:grid;grid-template-columns:clamp(110px,13vw,190px) 1fr;
  gap:clamp(12px,2vw,28px);
  padding:clamp(13px,1.5vw,18px) 0;
  border-bottom:1px solid rgba(0,0,0,.14);
}
.hk-facts dt{
  font-family:var(--hk-disp);font-weight:400;
  font-size:clamp(12px,1.1vw,14px);letter-spacing:.1em;line-height:1.9;
  color:var(--hk-gray);
}
.hk-facts dd{font-size:clamp(15px,1.35vw,18px);line-height:1.9;letter-spacing:.02em}
.hk-join-end{justify-content:flex-start;margin-top:clamp(32px,4vw,52px)}

/* ---------- 横向きで画面が低いとき ---------- */
@media (orientation:landscape) and (max-height:600px){
  .hk-hero-mark{width:min(200px,26vw)}
  .hk-cast-title{font-size:clamp(26px,4vw,40px)}
}

/* ---------- タブレット ---------- */
@media (max-width:860px){
  .hk-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- スマホ ---------- */
@media (max-width:520px){
  .hk-hero-cast{padding-top:60px}
  .hk-hero-mark{width:min(220px,58vw)}
  .hk-cards{grid-template-columns:1fr}
  .hk-facts>div{grid-template-columns:1fr;gap:2px}
  .hk-join-end{justify-content:center}
}

/* ---------- 本体ヒーローの「キャストに応募する」 ---------- */
/* 出演ボタン（黄）と並べるので、こちらはシアンにして色で見分けられるようにする */
.hk-btn-cast{
  color:var(--hk-ink);background:var(--hk-cy);
  box-shadow:5px 5px 0 var(--hk-ink);
  padding:16px 34px;
}
@media (hover:hover){.hk-btn-cast:hover{box-shadow:2px 2px 0 var(--hk-ink)}}
.hk-btn-cast:active{box-shadow:1px 1px 0 var(--hk-ink)}
/* 2つ並ぶので、スマホでは折り返してもきれいに収まるようにする */
.hk-hero-join{flex-wrap:wrap;gap:14px}
@media (max-width:520px){
  .hk-hero-join{gap:10px}
  .hk-btn-cast{padding:14px 26px}
}

/* ---------- 応募フォーム ---------- */
.hk-sec-apply{border-top:3px solid var(--hk-ink)}
.hk-form{margin-top:clamp(28px,3.4vw,44px);max-width:900px}
.hk-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.hk-row+.hk-row,.hk-row+.hk-field,.hk-field+.hk-field{margin-top:clamp(16px,2vw,26px)}

.hk-field label{
  display:flex;align-items:center;gap:8px;
  font-family:var(--hk-disp);font-weight:400;
  font-size:clamp(12px,1.1vw,14px);letter-spacing:.06em;line-height:1.6;
  margin-bottom:9px;
}
/* 必須・任意の印。必須はマゼンタで目立たせる */
.hk-field label i,.hk-field label em{
  font-style:normal;font-family:var(--hk-body);font-weight:700;
  font-size:10px;letter-spacing:.08em;line-height:1;
  padding:5px 7px;border:2px solid var(--hk-ink);
}
.hk-field label i{background:var(--hk-mg);color:var(--hk-paper)}
.hk-field label em{background:var(--hk-paper);color:var(--hk-gray);border-color:rgba(0,0,0,.28)}

.hk-field input,.hk-field select,.hk-field textarea{
  width:100%;font:inherit;font-size:16px;   /* iOS で拡大されないよう16px以上 */
  color:var(--hk-ink);background:var(--hk-paper);
  border:3px solid var(--hk-ink);border-radius:0;
  padding:14px 16px;
  transition:box-shadow .16s ease,transform .16s ease;
  -webkit-appearance:none;appearance:none;
}
.hk-field textarea{min-height:180px;line-height:1.9;resize:vertical}
/* select だけ矢印が消えるので、自前で三角を描く */
.hk-field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--hk-ink) 50%),
                   linear-gradient(135deg,var(--hk-ink) 50%,transparent 50%);
  background-position:calc(100% - 22px) calc(50% + 1px),calc(100% - 15px) calc(50% + 1px);
  background-size:7px 7px,7px 7px;background-repeat:no-repeat;
  padding-right:44px;
}
.hk-field input:focus,.hk-field select:focus,.hk-field textarea:focus{
  outline:none;box-shadow:5px 5px 0 var(--hk-cy);transform:translate(-1px,-1px);
}
.hk-field input::placeholder,.hk-field textarea::placeholder{color:#AFAFAF}

/* 入力に誤りがあるとき */
.hk-field.is-bad input,.hk-field.is-bad select,.hk-field.is-bad textarea{box-shadow:5px 5px 0 var(--hk-mg)}
.hk-err{font-size:12.5px;font-weight:700;line-height:1.6;color:#D6006F;margin-top:7px}
.hk-err:empty{display:none}
.hk-count{font-size:11.5px;color:var(--hk-gray);text-align:right;margin-top:6px;letter-spacing:.04em}
.hk-count.is-near{color:#D6006F;font-weight:700}

/* 同意のチェック */
.hk-consent{
  display:flex;align-items:flex-start;gap:12px;
  margin-top:clamp(20px,2.4vw,30px);padding:14px;
  border:3px solid transparent;
  font-size:13.5px;line-height:1.85;cursor:pointer;
}
.hk-consent.is-bad{border-color:var(--hk-mg)}
.hk-consent input{
  flex:none;width:22px;height:22px;margin-top:2px;
  -webkit-appearance:none;appearance:none;
  border:3px solid var(--hk-ink);background:var(--hk-paper);cursor:pointer;
}
.hk-consent input:checked{background:var(--hk-cy)}
.hk-consent input:checked::after{
  content:"";display:block;width:5px;height:10px;margin:1px auto 0;
  border:solid var(--hk-ink);border-width:0 3px 3px 0;transform:rotate(45deg);
}
.hk-consent a{text-decoration:underline;text-underline-offset:3px}

.hk-form button[type="submit"]{margin-top:clamp(22px,2.6vw,32px);min-width:220px}
.hk-form button[type="submit"]:disabled{opacity:.5;cursor:default}
.hk-form-msg{margin-top:16px;font-size:14px;font-weight:700;line-height:1.8}
.hk-form-msg.is-bad{color:#D6006F}

@media (max-width:640px){
  .hk-row{grid-template-columns:1fr;gap:clamp(16px,2vw,26px)}
  .hk-form button[type="submit"]{width:100%}
}

/* ---------- 送信できたときの完了パネル ---------- */
/* hidden が付いているあいだは出さない（display:flex が hidden に勝たないように） */
.hk-done[hidden]{display:none}
.hk-done{
  position:relative;overflow:hidden;
  margin-top:clamp(28px,3.4vw,44px);max-width:900px;
  border:3px solid var(--hk-ink);
  box-shadow:10px 10px 0 var(--hk-yl);
  padding:clamp(40px,6vw,76px) clamp(24px,4vw,56px);
  text-align:center;
  outline:none;
}
/* ロゴの3色を上辺に敷く */
.hk-done::before{
  content:"";position:absolute;left:0;right:0;top:0;height:8px;
  background:linear-gradient(90deg,var(--hk-cy) 0 33.33%,var(--hk-mg) 33.33% 66.66%,var(--hk-yl) 66.66%);
  transform:scaleX(0);transform-origin:left;
}
.hk-done.is-in::before{animation:hk-done-bar .7s cubic-bezier(.16,.84,.24,1) .1s forwards}
@keyframes hk-done-bar{to{transform:scaleX(1)}}

/* 中身は下から順に出す */
.hk-done>*{opacity:0}
.hk-done.is-in>*{animation:hk-rise .8s cubic-bezier(.16,.84,.24,1) both}
.hk-done.is-in .hk-done-check  {animation-delay:.18s}
.hk-done.is-in .hk-done-eyebrow{animation-delay:.42s}
.hk-done.is-in .hk-done-title  {animation-delay:.52s}
.hk-done.is-in .hk-done-p      {animation-delay:.66s}
.hk-done.is-in .hk-done-cta    {animation-delay:.8s}
.hk-done.is-in .hk-done-note   {animation-delay:.9s}

/* ---- チェックの印。丸を描いてから、線を引く ---- */
.hk-done-check{width:clamp(72px,9vw,104px);margin:0 auto clamp(20px,2.6vw,30px)}
.hk-done-check svg{width:100%;height:auto;display:block;overflow:visible}
.hk-done-check .ring{fill:none;stroke:var(--hk-ink);stroke-width:5;
  stroke-dasharray:176;stroke-dashoffset:176;transform:rotate(-90deg);transform-origin:50% 50%}
.hk-done-check .tick{fill:none;stroke:var(--hk-cy);stroke-width:6;
  stroke-linecap:square;stroke-linejoin:miter;stroke-dasharray:44;stroke-dashoffset:44}
.hk-done.is-in .hk-done-check .ring{animation:hk-draw .6s cubic-bezier(.16,.84,.24,1) .3s forwards}
.hk-done.is-in .hk-done-check .tick{animation:hk-draw .38s cubic-bezier(.5,0,.4,1) .74s forwards}
@keyframes hk-draw{to{stroke-dashoffset:0}}

/* ---- 紙吹雪。中央から外へ飛ばす ---- */
.hk-done-burst{position:absolute;inset:0;pointer-events:none;opacity:1}
.hk-done-burst i{
  position:absolute;left:50%;top:clamp(58px,7vw,86px);
  width:11px;height:11px;opacity:0;
  background:var(--hk-cy);
}
.hk-done-burst i:nth-child(3n+2){background:var(--hk-mg)}
.hk-done-burst i:nth-child(3n+3){background:var(--hk-yl);border-radius:50%}
.hk-done-burst i:nth-child(1){--x:-210px;--y:-52px;--r:150deg}
.hk-done-burst i:nth-child(2){--x:-140px;--y:-104px;--r:-120deg}
.hk-done-burst i:nth-child(3){--x:-70px;--y:-130px;--r:90deg}
.hk-done-burst i:nth-child(4){--x:0px;--y:-146px;--r:-60deg}
.hk-done-burst i:nth-child(5){--x:70px;--y:-130px;--r:200deg}
.hk-done-burst i:nth-child(6){--x:140px;--y:-104px;--r:-160deg}
.hk-done-burst i:nth-child(7){--x:210px;--y:-52px;--r:60deg}
.hk-done-burst i:nth-child(8){--x:0px;--y:-60px;--r:-200deg}
.hk-done.is-in .hk-done-burst i{animation:hk-pop 1.15s cubic-bezier(.16,.84,.24,1) .5s both}
.hk-done.is-in .hk-done-burst i:nth-child(2n){animation-duration:1.35s}
.hk-done.is-in .hk-done-burst i:nth-child(3n){animation-delay:.58s}
@keyframes hk-pop{
  0%  {opacity:0;transform:translate(-50%,0) scale(.4) rotate(0deg)}
  16% {opacity:1}
  70% {opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--x)),var(--y)) scale(1) rotate(var(--r))}
}

/* ---- 文字 ---- */
.hk-done-eyebrow{
  display:inline-block;
  font-family:var(--hk-disp);font-size:clamp(10px,1.05vw,12px);
  letter-spacing:.24em;line-height:1;
  padding:8px 13px;border:2px solid var(--hk-ink);
  box-shadow:4px 4px 0 var(--hk-mg);
  margin-bottom:clamp(18px,2.2vw,26px);
}
.hk-done-title{
  font-family:var(--hk-disp);font-weight:400;
  font-size:clamp(26px,4.4vw,52px);line-height:1.3;letter-spacing:.01em;
  margin-bottom:clamp(16px,2vw,24px);
}
.hk-done-p{font-size:clamp(14.5px,1.3vw,17px);line-height:2.05;letter-spacing:.02em}
.hk-done-cta{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  margin-top:clamp(26px,3.2vw,40px);
}
.hk-done-note{
  font-size:12.5px;line-height:1.8;color:var(--hk-gray);
  margin-top:clamp(16px,1.8vw,22px);
}

/* 動きを減らす設定のときは、そのまま出す */
@media (prefers-reduced-motion:reduce){
  .hk-done::before{transform:scaleX(1)}
  .hk-done>*{opacity:1}
  .hk-done.is-in>*{animation:none}
  .hk-done-check .ring,.hk-done-check .tick{stroke-dashoffset:0}
  .hk-done-burst{display:none}
}

@media (max-width:520px){
  .hk-done{box-shadow:7px 7px 0 var(--hk-yl)}
  .hk-done-cta .hk-btn{flex:1 1 140px}
  /* 画面が狭いので、紙吹雪の飛ぶ距離も縮める */
  .hk-done-burst i:nth-child(1){--x:-130px;--y:-34px}
  .hk-done-burst i:nth-child(2){--x:-88px;--y:-68px}
  .hk-done-burst i:nth-child(3){--x:-44px;--y:-86px}
  .hk-done-burst i:nth-child(4){--x:0px;--y:-96px}
  .hk-done-burst i:nth-child(5){--x:44px;--y:-86px}
  .hk-done-burst i:nth-child(6){--x:88px;--y:-68px}
  .hk-done-burst i:nth-child(7){--x:130px;--y:-34px}
  .hk-done-burst i:nth-child(8){--x:0px;--y:-44px}
}