/* ============================================================
   SP版：entry.html / privacy.html（900px以下）
   土台（位置解除・トークン・ヘッダー）は sp.css、
   フッターは sp-sections.css の .sec--footer をそのまま使う。
   ============================================================ */

@media (max-width: 900px) {

/* ---- 共通ヒーロー（写真 → 大見出し → パンくず）------------------ */
.sec--hero {
  display: flex; flex-flow: row wrap; align-items: baseline;
  gap: var(--sp-75) var(--sp-50); padding: 0 0 var(--sp-500);
}
.sec--hero > .b {
  width: 100%; padding-inline: 0;
  height: 34svh; min-height: 20rem; aspect-ratio: auto;
}
.sec--hero > .b > img { width: 100%; height: 100%; object-fit: cover; }
/* PCでは写真に白抜きで重ねているが、SPでは写真の下に赤で置く */
.sec--hero > h1.a {
  width: 100%; color: var(--red);
  font-family: var(--display); font-weight: 400;
  font-size: var(--sp-sub); line-height: var(--lh-5xl); letter-spacing: -.02em;
  margin-block-start: var(--sp-500);
  margin-inline-start: calc(var(--sp-pad) * -1 - var(--sp-50));
  padding-inline: 0; padding-inline-start: var(--sp-pad);
}
.sec--hero .a.w5 {
  padding-inline: 0; font-size: var(--sp-caption);
  line-height: var(--lh-xs); color: var(--ink-3);
}
.sec--hero > a.a.w5:first-of-type { margin-inline-start: var(--sp-pad); }
/* パンくずのリンクは文字が小さいので、指で押せる高さを足す
   （baseline 揃えなので行位置は変わらない） */
.sec--hero a.a.w5 { padding-block: var(--sp-100); }

/* ---- エントリーフォーム ---------------------------------------- */
.sec--form { gap: var(--sp-300); padding-block: var(--sp-700) var(--sp-900); }
.sec--form > h2.a {
  font-size: var(--sp-statement); line-height: var(--lh-2xl); font-weight: 700;
  color: var(--red); text-align: center; text-wrap: balance;
}
.sec--form > p.a { text-align: center; font-size: var(--sp-body); line-height: var(--lh-ja); }

.sec--form form {
  display: flex; flex-direction: column; gap: var(--sp-500);
  padding-inline: var(--sp-pad); margin-top: var(--sp-200);
}

/* 1項目 = 1グリッド。必須バッジだけラベルの左に並べ、残りは全幅 */
.fld {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--sp-75); row-gap: var(--sp-75); align-items: center;
}
.fld > * { grid-column: 1 / -1; }
.fld > .req { grid-column: 1; grid-row: 1; }
.fld > .req + * { grid-column: 2; grid-row: 1; }

.fld .req {
  position: static; width: 4.4rem; height: auto; justify-self: start;
  display: inline-block; box-sizing: border-box; text-align: center;
  padding: var(--sp-50) 0;
  font-size: var(--sp-caption); font-weight: 700; line-height: var(--lh-xs);
  border-radius: var(--r-full);   /* XDはピル */
}
/* 見出しラベル（お問い合わせ目的・氏名 など） */
.fld > .a.w4 { font-size: var(--sp-body); font-weight: 700; line-height: var(--lh-base);
               color: var(--ink) !important; }
/* 補助ラベル（性・名・セイ・メイ・確認のため〜） */
.fld > label.a.w4 { font-size: var(--sp-small); font-weight: 400; margin-top: var(--sp-75); }
.fld > .a.w4:first-child, .fld > .req + .a.w4 { margin-top: 0; }

/* 入力欄。iOSが自動ズームしないよう16px以上を保つ */
.sec--form .inp {
  position: static; width: 100%; min-width: 0; height: var(--sp-600);
  font-size: var(--t-base); line-height: var(--lh-base); padding: 0 var(--sp-200);
  border-radius: var(--r-md); box-sizing: border-box;
}
.sec--form textarea.inp { height: 16rem; padding: var(--sp-200); }
.sec--form select.inp { padding-right: var(--sp-400); }

/* ラジオ・チェック。指で押せる高さを確保する */
.sec--form .opt {
  position: static; width: auto;
  display: flex; align-items: center; gap: var(--sp-100);
  min-height: var(--sp-600); font-size: var(--sp-body); line-height: var(--lh-base);
}
.sec--form .opt input { flex: none; width: var(--sp-300); height: var(--sp-300); }

/* 電話番号だけは3枠を横に並べる */
.fld:has(input[name="tel3"]) {
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  column-gap: var(--sp-75);
}
.fld:has(input[name="tel3"]) > * { grid-column: auto; grid-row: 2; }
/* ラベル行を入力用の 1fr 列に載せると頭が揃わない。
   バッジと同じ全幅セルに重ね、バッジ幅+間隔ぶんを字下げして他の項目と頭を揃える */
.fld:has(input[name="tel3"]) > .req { grid-column: 1 / -1; grid-row: 1; }
.fld:has(input[name="tel3"]) > .req + * {
  grid-column: 1 / -1; grid-row: 1;
  padding-left: calc(4.4rem + var(--sp-75));
}
.fld:has(input[name="tel3"]) .a.w3 { padding-inline: 0; text-align: center;
                                     font-size: var(--sp-body); line-height: var(--lh-base); }

/* ファイル選択。PCでは白い枠を別divで描いているがSPでは .file 自身に持たせる */
.sec--form .file {
  /* static にすると中の position:absolute な input が基準を失い、
     ページ左上(0,0)へ飛んでタップできなくなる。ここを基準にする */
  position: relative; width: auto;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-75) var(--sp-100);
  min-height: var(--sp-600); padding: var(--sp-75) var(--sp-100); box-sizing: border-box;
  background: #fff; border: .1rem solid #b9b9b9; border-radius: var(--r-md);
}
/* 外側 6px、内側との隙間 8px → inner = 6 - 8 < 2 なので角は落とさない（B3） */
.sec--form .file__btn  {
  position: static; font-size: var(--sp-small); line-height: var(--lh-sm);
  display: grid; place-items: center; min-height: var(--sp-600);
  padding: 0 var(--sp-200); border-radius: 0;
}
.sec--form .file__name { position: static; font-size: var(--sp-small); }
/* 選択済みは墨の太字にして「入っている」ことを分からせる */
.sec--form .file__name[data-has] { color: var(--ink); font-weight: 700; }
/* 透明の input を枠いっぱいに重ねる。これが実際のタップ領域になる */
.sec--form .file input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; z-index: 1;
}

/* 個人情報の同意 */
.fld > .a.c.w4 { font-size: var(--sp-small); line-height: var(--lh-ja); text-align: left; }
.sec--form .opt--check { justify-content: flex-start; }

/* 送信ボタン */
.sec--form .submit {
  position: static; width: 100%; height: var(--sp-700);
  margin-top: var(--sp-200); font-size: var(--t-xl); border-radius: var(--r-full);
}
.sec--form .submit__arrow { display: none; }

/* ---- プライバシーポリシー -------------------------------------- */
.sec--doc { padding-block: var(--sp-500) var(--sp-900); }
.doc { position: static; width: auto; padding-inline: var(--sp-pad); }
.doc > * { position: static; width: auto; }
.doc h3 {
  font-size: var(--sp-lead); line-height: var(--lh-lg); font-weight: 700;
  color: var(--red); margin: var(--sp-500) 0 var(--sp-75); text-wrap: balance;
}
.doc h3:first-child { margin-top: 0; }
.doc p { font-size: var(--sp-body); line-height: var(--lh-ja); margin: 0 0 var(--sp-200);
         text-wrap: pretty; }
.doc__date { margin-top: var(--sp-500); font-size: var(--sp-small); }

/* ---- タブレット帯 ---------------------------------------------- */
@media (min-width: 600px) {
  .sec--hero > h1.a { font-size: var(--t-6xl); }
  .sec--form form { max-width: min(64rem, 100%); margin-inline: auto; }
  .doc { max-width: min(68rem, 100%); margin-inline: auto; }
}

} /* @media */