@charset "UTF-8";
/* =========================================================================
   見積内容入力（見積シミュレータ）スマホ対応（SP 専用）
   -------------------------------------------------------------------------
   ・対象は P002(U005) と P080(U999)。同一画面の年度違いで SP レイアウトも同一の
     ため、1ファイルを :is(#u005,#u999) スコープで共用する（旧 u005_sp.css）。
     どちらかを直せば両方に効く＝片側だけ直す事故を防ぐ。
   ・デスクトップは「見積書プレビュー(data-stamp 580px)＋入力フォーム(calc(100%-630px))」の
     2カラム(1600px推奨)。daku_simulator.css は他シミュレータ(U001/U112等)と共用のため無編集。
   ・SP では 見積書プレビュー・赤帯(1600px推奨)を隠し、フォームを全幅で縦に流す。
   ・全ルールを @media(≤768px) 内・:is(#u005,#u999) スコープに閉じるため PC/他ページに無影響。
   ・スキャフォールド(header/section/body font)は common.css の共通SPブロックが担当。
   ========================================================================= */
@media screen and (max-width: 768px) {

  /* SP 基準サイズ（本文14px / フォーム16px）は common_sp.css に移動した。
     ここに :is(#u005,#u999) 付きで置くと ID のぶん詳細度が高くなり、共通側の
     個別指定（注釈12px・data-info 13px 等）が効かなくなるため */

  /* 赤帯「1600px推奨」は SP では不要 */
  :is(#u005,#u999) [data-fullsize] {
    display: none !important;
  }

  /* 画面見出し「見積内容入力」を 20px→14px */
  :is(body#u005,body#u999) [data-inner_header] > div > div:nth-of-type(1) h1 {
    font-size: 14px;
  }

  /* main の 2カラムflex・固定高さを解除して縦に流す（main は section>form>main なので個別に解除） */
  :is(#u005,#u999) main {
    display: block !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 20px 15px 60px !important;
    box-sizing: border-box;
  }
  /* 見積書プレビュー(data-stamp)は SP 非表示 */
  :is(#u005,#u999) main > div[data-stamp] {
    display: none !important;
  }
  /* フォーム側を全幅に */
  :is(#u005,#u999) main > div:not([data-stamp]) {
    width: 100% !important;
    min-height: 0 !important;
  }

  /* 入力カード全幅（padding は common_sp.css の共通指定に従う） */
  :is(#u005,#u999) [data-card] {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* dl(dt/dd 横並び)を縦積みに。
     ※ display:block !important にしてはいけない。JS が style="display:none" で
       出し分けている dl（計算方式 / 研究費の比率 / 利用方法等の詳細）まで
       表示されてしまう（!important なしの inline style は !important に負ける）。
       ベースが display:flex なので flex-direction で縦積みにすれば
       display を触らずに済む */
  :is(#u005,#u999) [data-card] dl {
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-align: stretch;
        align-items: stretch;
    margin-top: 20px;
  }
  :is(#u005,#u999) [data-card] dl dt,
  :is(#u005,#u999) [data-card] dl dd {
    width: 100% !important;
  }
  :is(#u005,#u999) [data-card] dl dt {
    margin-bottom: 8px;
  }

  /* デジタル著作物オプションの並びは common_sp.css の共通指定に従う（2列） */
  /* 2026-08-07 悠指示：ラジオ(colTwo)は SP でも横並び(2列)にする。
     PC の固定幅(260px)と個別マージンを解除して等分する */
  :is(#u005,#u999) [data-colTwo] {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-align: stretch;
        align-items: stretch;
    gap: 8px;
  }
  :is(#u005,#u999) [data-colTwo] > li {
    width: calc(50% - 4px) !important;
    margin: 0 !important;
  }

  /* 2026-08-07 悠指示：複製利用方法(q06 / data-type)と研究費の比率(q08 / data-colFour)は
     SP ではプルダウンにする。ラジオは u005_sp_select.js が値の正として参照するので
     DOM からは消さず、表示だけ隠す（撤去すると daku_simulatorV02.js の
     `ul[data-type] li:eq(1)` が壊れる） */
  :is(#u005,#u999) [data-type],
  :is(#u005,#u999) [data-colFour] {
    display: none !important;
  }
  /* u005_sp_select.js が生成するプルダウン。入力欄と同じ SP 基準サイズ */
  :is(#u005,#u999) select[data-sp_select] {
    display: block;
    width: 100%;
    height: 40px;
    border: solid 2px #dddcd6;
    border-radius: 5px;
    padding: 0 5px;
    background-color: #fafafa;
    box-sizing: border-box;
  }
  /* option の文字サイズ。
     ※ 閉じた状態の select は option ではなく select 自身の font-size(16px) で
       描画されるため、これを下げても「見切れ」は解消しない（2026-08-07 実測。
       width:auto のクローンで比較したところ 13px/16px とも同じ 353px だった）。
     ※ select 自体を 16px 未満にすると iOS Safari が focus 時に自動ズームし、
       blur しても倍率が戻らない（viewport に maximum-scale 指定なし）。
     研究費の比率の長いラベルが見切れる件は、短縮ラベルが NG のため未解決のまま。 */
  :is(#u005,#u999) select[data-sp_select] option {
    font-size: 13px !important;
  }
  :is(#u005,#u999) select[data-sp_select]:disabled {
    background-color: rgba(192, 198, 201, 0.4);
    cursor: not-allowed;
  }
  /* 「〜は選択出来ません」の理由表示（PCの赤字オーバーレイの代替） */
  :is(#u005,#u999) p[data-sp_select_note] {
    margin-top: 6px;
    color: #dc143c;
    line-height: 1.35;
    font-size: 12px !important;
  }

  /* 固定幅クラス(w170/w200等)・入力/セレクト/テキストエリアを全幅 */
  :is(#u005,#u999) [data-card] input[data-text],
  :is(#u005,#u999) [data-card] select[data-select],
  :is(#u005,#u999) [data-card] textarea[data-textarea],
  :is(#u005,#u999) [data-card] [class*="w1"],
  :is(#u005,#u999) [data-card] [class*="w2"] {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* 入力欄の高さ・枠線（SP基準）は common_sp.css に移動した */
  /* 全従業員数など単位付き(input + 人)は input を伸ばして単位を右に残す */
  :is(#u005,#u999) [data-card] dd[data-unit] {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    gap: 6px;
  }
  :is(#u005,#u999) [data-card] dd[data-unit] input[data-text] {
    -ms-flex: 1;
        flex: 1;
    width: auto !important;
  }
  :is(#u005,#u999) [data-card] dd[data-unit] > p {
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }

  /* 見積書宛名(ol: 会社名 + 敬称)を縦積みに */
  :is(#u005,#u999) [data-card] dd > ol {
    display: block;
  }
  :is(#u005,#u999) [data-card] dd > ol > li {
    width: 100% !important;
    margin: 0 0 8px 0 !important;
  }

  /* 遷移ボタン(data-btns) 縦積み・全幅（DL=上 / 戻る=下） */
  :is(#u005,#u999) [data-btns] {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    -ms-flex-align: center;
        align-items: center;
    gap: 12px;
    margin-top: 30px;
  }
  :is(#u005,#u999) [data-btns] li {
    width: 100% !important;
    margin: 0 !important;
  }
  :is(#u005,#u999) [data-btns] li a {
    width: 100% !important;
    max-width: none !important;
  }

  /* -----------------------------------------------------------------------
     以下 2026-08-07 追加：PC 用の固定高さが SP で解除されておらず中身が溢れていた分
     ----------------------------------------------------------------------- */

  /* dt の固定高さ(daku_simulator.css の height:55px)を解除。
     注釈やツールチップを持つ見出し（デジタル著作物オプション等）が
     55px に収まらず下の要素に重なっていた */
  :is(#u005,#u999) [data-card] dl > dt {
    height: auto !important;
    min-height: 0 !important;
  }
  /* 緑の注釈は PC の 55px 枠に収めるため margin-top:-10px が入っている。
     height:auto にすると見出しに食い込むので SP では解除する */
  :is(#u005,#u999) [data-card] dl > dt [data-smallGreen] {
    margin-top: 2px !important;
  }
  /* 見出しラベル + 「?」 + 注釈バルーンを1行に詰めず折り返す */
  :is(#u005,#u999) [data-card] dl > dt p[data-helpP] {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  :is(#u005,#u999) [data-card] dl > dt p[data-helpP] > [data-info] {
    margin-left: 0 !important;
    margin-top: 6px;
    width: 100%;
    box-sizing: border-box;
  }
  /* 「?」が flex アイテムとして潰れ 22px→9px になるのを防ぐ（PCと同じ見た目に戻す） */
  :is(#u005,#u999) [data-card] dl > dt [data-help],
  :is(#u005,#u999) [data-card] dl > dt [data-helpAncher] {
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
  /* 見た目は 22px のまま、タップ判定だけ 44px に広げる（モーダル版[data-help]・
     外部リンク版[data-helpAncher]の両方。中心±22px でも右端 318px < 371px なので溢れない） */
  :is(#u005,#u999) [data-card] dl > dt [data-help]::after,
  :is(#u005,#u999) [data-card] dl > dt [data-helpAncher]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
  }

  /* 2列化で1枚あたり126pxになるため、ラジオカードの余白を詰めて左寄せにし、
     文字の折り返し行数を減らす。
     ラジオ丸は SP 基準の 25px / border 2px（チェックボックスと同値）。
     data-type / data-colFour はプルダウン化したのでここでは対象外 */
  :is(#u005,#u999) [data-colTwo] [data-sim_radio] > div {
    padding: 8px !important;
    -ms-flex-pack: start !important;
        justify-content: flex-start !important;
  }
  :is(#u005,#u999) [data-colTwo] [data-sim_radio] > div > span {
    width: 25px !important;
    height: 25px !important;
    border-width: 2px !important;
    border-radius: 25px !important;
    position: relative;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
  :is(#u005,#u999) [data-colTwo] [data-sim_radio] > div p {
    margin-left: 6px !important;
    width: auto !important;
    -ms-flex: 1;
        flex: 1;
    text-align: left !important;
    line-height: 1.35;
  }
  /* チェックマークは親カードに対する絶対座標(top:19px/30px, left:22px)で置かれており、
     カードが縦に伸びるとラジオ丸からズレる。丸を基準(position:relative)にして中央へ。
     サイズは SP 基準の 13×9 / border 2px（u211/common_sp.css と同値） */
  :is(#u005,#u999) [data-colTwo] [data-sim_radio] > input:checked + div span::after {
    width: 13px !important;
    height: 9px !important;
    border-left-width: 2px !important;
    border-bottom-width: 2px !important;
    top: 50% !important;
    left: 50% !important;
    -webkit-transform: translate(-50%, -70%) rotate(-45deg) !important;
        -ms-transform: translate(-50%, -70%) rotate(-45deg) !important;
            transform: translate(-50%, -70%) rotate(-45deg) !important;
  }

  /* 全従業員数の単位「人」が input の下に落ちるのを防ぐ。
     dd[data-unit] が flex-wrap:wrap、input が min-width:auto(number入力の
     min-content ≒ 全幅)のため折り返していた。
     ※ 当初は nowrap で抑えていたが、注釈(data-smallGreen)を dd に置いたため
        折り返しが必要になった。wrap は common_sp.css 側で指定し、ここでは
        input が縮めるように min-width だけ解除しておく（これだけで「人」は
        input と同じ行に収まる） */
  :is(#u005,#u999) [data-card] dd[data-unit] input[data-text] {
    min-width: 0 !important;
  }
}