/* ============================================================================
   注文フォーム専用のスタイル（2026-09-04 新設）

   【なぜ作ったか】
     いままで、フォームの見た目は次の3か所に散らばっていた。
       ① /assets/style-sample.css … サイト共通。**103ページが読んでいる**
       ② /css/form.css            … run.js がページ表示後に後から挿し込んでいた
       ③ index.php の中の <style> … その場しのぎの上書き
     ①を直すとサイト全体に響き、②は表示が始まってから効くので一瞬崩れて見える。

   【この先の方針】
     **フォームの見た目は、このファイルに集める。**
     いまはまだ①②も読み込んでいるが、このファイルが最後に読まれるので確実に勝つ。
     少しずつ①②の中身をここへ移し、最後に①②への依存を切る。

   【書き方の決まり】
     ・`!important` は使わない。使わずに済むよう、`#product` から始めて詳細度で勝つ
     ・ピクセル固定は避け、指で押せる大きさ（44px）と読める文字（16px）を下限にする
     ・スマホを先に書き、広い画面を後から足す
   ============================================================================ */

/* --------------------------------------------------------------------------
   1. 表紙・サイズ・オプションの選択肢の高さを揃える

   【直した症状】
     スマホで表紙が2列に並ぶが、**同じ行の左右で高さが揃わず、下に空白ができていた**
     （実測 幅390px: 11番=77px / 12番=77px / 13番=95px / 14番=77px / 16〜18番=59px）。

   【原因】
     横に並べる方法が `display:inline-block` だった。これは箱の高さを中身の行数だけで決め、
     **同じ行に並ぶ相手と揃える仕組みを持たない。**
     表紙のタイトルは年ごとに文字数が変わるため、毎年どこかで崩れる。

   【直し方】
     並べ方を Flexbox に変える。同じ行の高さが自動でそろう。
     これで /css/form.css にある「13番だけ58px」のような番号ごとの高さ指定は不要になる
     （あちらは幅480px以下と375px以下にしか当たらず、いまのiPhoneの390pxには効いていなかった）。
   -------------------------------------------------------------------------- */
body form#product .item-radio2 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;                  /* 縦横とも10px。%を混ぜると計算がずれて1列になる */
}
body form#product .item-radio2 .radioBox {
    display: flex;              /* 中身を縦に伸ばせるようにする */
    /* 2列。隙間10pxを差し引いた残りを半分ずつ。box-sizing を border-box にして
       枠線や余白を含めた幅で計算する（含めないと2つ並ばず1列に落ちる） */
    flex: 0 0 calc((100% - 10px) / 2);
    max-width: calc((100% - 10px) / 2);
    box-sizing: border-box;
    margin: 0;
    vertical-align: baseline;   /* inline-block 用の指定を無効化 */
}
body form#product .item-radio2 .radioBox > .item,
body form#product .item-radio2 .radioBox > span[class*="item"] {
    display: flex;
    align-items: center;        /* 文字を縦の中央へ */
    width: 100%;
    min-height: 64px;           /* 1行のものと2行のものの差を小さくする */
    box-sizing: border-box;     /* 余白を含めた高さで計算する */
}
/* 番号ごとの高さ指定（form.css の nth-child パッチ）を打ち消す */
body form#product .item-radio2 .radioBox .label5 {
    height: auto;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   2. スマホで入力欄をタップしても、画面が勝手に拡大しないようにする

   【直した症状】
     生年月日・郵便番号・メールアドレスなどをタップすると画面が勝手に拡大し、
     `user-scalable=no` のせいで指で戻すこともできなかった。

   【原因】
     サイト共通のCSSが、スマホでの文字を12pxまで縮めていた
     （`html{font-size:6.25%}` ＋ `body{font-size:12em}` という古い書き方）。
     **iPhoneのSafariは、16px未満の入力欄をタップすると自動で拡大する。**

   【直し方】
     入力欄と選択欄だけ16pxを下限にする。あわせて index.php 側で拡大の禁止を外した。
   -------------------------------------------------------------------------- */
body form#product input[type="text"],
body form#product input[type="tel"],
body form#product input[type="email"],
body form#product input[type="number"],
body form#product input[type="password"],
body form#product input[type="search"],
body form#product select,
body form#product textarea {
    font-size: 16px;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   3. 押せるところを、指で押せる大きさにする

   【直した症状】
     同意のチェックボックスが約17px角しかなく、押し間違いが起きていた
     （文字の大きさを基準に 1.4em で決めていたため、文字が12pxになると連動して縮む）。
     指で押しやすい大きさの目安は44px角。
   -------------------------------------------------------------------------- */
body form#product input[type="checkbox"],
body form#product input[type="radio"] {
    width: 22px;
    height: 22px;
    min-width: 22px;
    flex-shrink: 0;
}
body form#product #page2 > .box_form:first-child label,
body form#product .item-radio > label {
    min-height: 44px;           /* 押せる範囲そのものを広げる */
}
body form#product a.modalBox2,
body form#product a.movie {
    display: inline-block;
    min-height: 32px;
    padding: 4px 0;
}

/* --------------------------------------------------------------------------
   4. 価格の表示（定価に線を引いて、割引後の金額を見せる）

   【なぜ】
     いままで割引後の金額しか出ておらず、**いくら安くなっているかが伝わらなかった。**
     画面が狭いので、小さく1行で収める。
   -------------------------------------------------------------------------- */
/* 定価と割引後の値段を、縦に1つの列としてまとめる。
   もともと価格の帯は「日付／価格／確認ボタン」の3つを横に並べる作りなので、
   定価をそのまま足すと4つ目の項目になり、値段が2行に折り返して崩れていた。 */
body form#product .tdc-price-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    margin: 0 .6em;
    flex-shrink: 0;
}
body form#product .tdc-price-col .price {
    margin: 0;
    white-space: nowrap;        /* 「(税込)」を折り返さない */
    line-height: 1.15;
}
body form#product .tdc-price-col .tdc-tax {
    display: inline;
    font-size: .5em;            /* 「(税込)」だけ小さく。値段を大きく見せる */
    margin-left: .15em;
}
body form#product .tdc-price-off {
    display: block;
    font-size: 11px;
    line-height: 1.3;
    color: #888;
    margin: 0 0 1px;
    white-space: nowrap;
}
body form#product .tdc-price-off del {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    color: #888;
}
body form#product .tdc-price-off .tdc-price-off__amount {
    color: #ff362b;
    font-weight: bold;
    margin-left: .3em;
}

/* --------------------------------------------------------------------------
   5. 「もどる」ボタンの見た目
       置き場所そのものは index.php 側に用意した入れ物（#tdc-back-slot）で決める。
   -------------------------------------------------------------------------- */
body form#product .tdc-back-slot {
    margin: 18px 0 4px;
    text-align: center;
}
body form#product .tdc-back-slot input[type="button"],
body form#product .tdc-back-slot button {
    min-height: 44px;
    padding: 10px 28px;
    font-size: 15px;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   6. 画面が広いとき
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) {
    body form#product .item-radio2 .radioBox > .item,
    body form#product .item-radio2 .radioBox > span[class*="item"] {
        min-height: 56px;
    }
}

/* --------------------------------------------------------------------------
   7. 画面下に固定される価格の帯（スマホ）

   【直した症状】
     「お届け予定日…」「¥24,800 −3,000円」「¥21,800(税込)」「確認」の4つが横に並び、
     値段が2行に折り返してレイアウトが崩れていた。

   【直し方】
     定価と値段を1つの列にまとめ（上の .tdc-price-col）、
     日付の欄が幅を取りすぎないようにする。
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
    body form#product .block_price .box_price {
        gap: 6px;
    }
    body form#product .block_price .box_price .date {
        flex: 1 1 auto;
        min-width: 0;           /* 長い文でも他を押し出さない */
    }
    body form#product .tdc-price-col {
        margin: 0 .3em 0 0;
    }
    body form#product .tdc-price-col .price {
        font-size: 22px;
    }
    body form#product .tdc-price-off {
        font-size: 10px;
    }
    body form#product .block_price .box_price .btnselect {
        flex-shrink: 0;
        min-height: 44px;
    }
}


/* ============================================================================
   8. `/css/form.css` の打ち消し（2026-09-05 追加）

   【なぜ必要か】
     `/css/form.css` は `run.js`（526〜534行）が**ページの表示が始まってから**
     JavaScriptで `<head>` に挿し込んでいる。そのため、こちらのCSSより**必ず後**に読まれ、
     詳細度が同じだと向こうが勝つ。実測で次の3つが上書きされていた。

       #coverDesign .radioBox:nth-child(2n) { margin-left: 3% }   → 表紙が重なって階段状になる
       form#product .select-wrap select     { height: 46px }      → 文字16pxにすると縦にはみ出て切れる
       #page2>.box_form:first-child input   { height: 1.4em }     → チェックが正方形にならない

     そこでこのファイルは全部 `body form#product` から書き、要素2つ分だけ詳細度を高くしてある。
     **本来は `run.js` の挿し込みをやめて `<head>` に直接書くのが筋。**それは作り直しのときに行う。
   ============================================================================ */

/* --- 表紙: 隙間は gap だけで作る。form.css の margin-left:3% を打ち消す --- */
body form#product #coverDesign .radioBox,
body form#product #coverDesign .radioBox:nth-child(2n) {
    margin: 0;
    width: auto;                /* form.css の width:48.5% を打ち消す（幅は flex で決める） */
}
/* 番号ごとの高さ指定（13番だけ58px 等）も打ち消す */
body form#product #coverDesign .radioBox .label5,
body form#product #coverDesign .radioBox:nth-child(2n) .label5 {
    height: auto;
}

/* --- プルダウン: 文字を16pxにしたぶん、上下の余白を詰めて高さの中に収める ---
       form.css が height:46px を固定しているため、余白が大きいと文字が切れる。
       「選択」の文字が半分消えていたのはこれ。 */
body form#product .select-wrap select,
body form#product select {
    height: 46px;
    min-height: 46px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 44px;          /* 枠線1px×2を引いた高さに合わせる */
}

/* --- チェックボックス: 正方形にする。form.css の height:1.4em を打ち消す --- */
body form#product #page2 > .box_form:first-child input[type="checkbox"],
body form#product input[type="checkbox"],
body form#product input[type="radio"] {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    flex-shrink: 0;
    vertical-align: middle;
}


/* ============================================================================
   §9 モーダル（詳細のポップアップ）を開いている間、背景を動かさない
   ----------------------------------------------------------------------------
   2026-09-05 追加。柳川様のご指摘「フォームのモーダルも、スクロールで背景まで
   動いてしまう」への対処。LP（SpecialOffer2027_VIP.html）で同じ問題を直したときの
   内容をそのまま持ってきている。

   ★ここを「html」始まりにしている理由
     共通CSS（/assets/style-sample.css）が
       #cboxLoadedContent, #colorbox { overflow: initial !important }
     を持っている。!important 同士がぶつかるので、こちらの詳細度を1段上げないと勝てない。
     この指定が効かないと、モーダルの中身が枠からあふれ、背後のページが透けて見える。
   ============================================================================ */

/* --- 開いている間はページ本体を固定する（クラスは JavaScript が付け外しする） --- */
html.tdc-modal-open,
body.tdc-modal-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

/* --- モーダルの中身だけは動かせるようにする --- */
html #cboxLoadedContent {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
}
html #cboxContent { overflow: hidden !important; }

/* --- 重なり順をはっきり決める。
       共通CSSは #cboxOverlay に z-index:200 を与えているが #colorbox には何も無く、
       iPhone でページの文字がモーダルの上に描かれることがある --- */
html #cboxOverlay { z-index: 2147483000 !important; }
html #colorbox    { position: absolute !important; z-index: 2147483001 !important; }
html #cboxWrapper,
html #cboxContent,
html #cboxLoadedContent { position: relative; z-index: 1; }
html #colorbox,
html #cboxWrapper,
html #cboxContent,
html #cboxLoadedContent { background: #fff; }

/* --- モーダルへ移された画像は、枠からはみ出さず縦横比を保つ
       （colorbox は中身をページの別の場所へ動かすため、元の場所向けの指定が効かなくなる）

       ★ここで `!important` を使わない理由
         共通CSS（/assets/style-sample.css）には
           .modal-inner .photo img{max-width:150px}
           .modal-inner .introPhoto img{max-width:130px}
           .modal-inner .grid > * img{max-width:300px}
         のように、モーダルの中の画像を小さく見せる指定がある。
         `!important` を付けると、それらを問答無用で全幅に広げてしまう。
         いまのフォームにはこれらのクラスを使ったモーダルが無いが、
         LP から中身を持ってきたときに崩れる。詳細度だけを上げて、
         個別の指定のほうが勝つようにしておく。

   ★モーダルに画像を足すときは、`.modal-inner` の**直下**に置くこと。
         <p><img></p> のように包むと、この指定も共通CSSの指定も効かず、
         原寸のまま枠からはみ出す。 --- */
html body #colorbox > img,
html body #cboxLoadedContent > img,
html body .modal-inner > img {
    height: auto;
    max-width: 100%;
}