@charset "UTF-8";
/* =========================================================================
   front_v2 SP 共通ベース
   -------------------------------------------------------------------------
   ・P000〜P094 系の画面で共有する SP 用スタイル。
     各画面のコントローラの $arrVal["arrCss"] に "common_sp" を追加すると効く。

   ・全ルールを @media screen and (max-width: 768px) に閉じている。
     PC 側は common_pc.css（min-width:769px）が担当するので互いに干渉しない。

   ・arrCss での並びは common_pc → common_sp → 各画面の *_sp の順にする
     （画面固有の指定で上書きできるように、共通を先に読む）。

   ・サイズの基準値そのものは u211/common_sp.css（本文14px・フォーム16px・
     入力40px・チェック25px 等）に従う。このファイルはレイアウト寄りの
     共通指定を置く。
   ========================================================================= */
@media screen and (max-width: 768px) {

  /* =======================================================================
     0. SP 基準サイズ（u211/common_sp.css と同じ値）
        本文は 14px、フォーム要素のみ 16px。個別に変えたい箇所は後段で上書き。
        ※ 画面別CSSに #id 付きで書くと詳細度が勝ってしまい、共通側の
          個別指定が効かなくなるので、総当たりは必ずここに置く
     ======================================================================= */
  body[data-common] main * {
    font-size: 14px !important;
  }
  /* iOS Safari は font-size が 16px 未満の入力要素をタップすると自動ズームし、
     blur しても元に戻らない。フォーム要素だけ 16px にしてズームを抑止する */
  body[data-common] main input,
  body[data-common] main select,
  body[data-common] main textarea {
    font-size: 16px !important;
  }

  /* 入力欄の高さ・枠線（ベースは height:55px / border:3px と大きい）。
     u211/common_sp.css セクション7 と同値 */
  body[data-common] main [data-text],
  body[data-common] main [data-select] {
    height: 40px;
    border: solid 2px #dddcd6;
  }
  body[data-common] main [data-textarea] {
    height: 100px;
    border: solid 2px #dddcd6;
  }

  /* カード。ベースは padding:40px で SP には広すぎる */
  body[data-common] main [data-card] {
    padding: 20px 20px 20px 25px !important;
    box-sizing: border-box;
  }
  /* 必須マーク「*」の位置（P002/P080 のみ）。
     daku_simulator.css は ::before で文頭（左に張り出す絶対配置）に出しているが、
     他の対象画面は :after の「必須」バッジを文末に出しており不揃いだった。
     ::before を消して ::after で文末に統一する（PC側 common_pc.css と同じ対処）。
     ※ daku_simulator.css は範囲外(U112/U115/U141等)も読む共用CSSなので直接は触らない */
  /* 実装は daku_simulator_req.css（P002/P080 の arrCss にのみ追加）に置いた */

  /* カード内の最初の dl は上余白を消す。
     先頭に hidden input が入るカードがあり :first-child では拾えないので
     :first-of-type を使う */
  body[data-common] main [data-card] dl:first-of-type {
    margin-top: 0 !important;
  }

  /* デジタル著作物オプション（新聞5紙のチェックボックス）は2列。
     ベースは li:33% ＋ nth-child(n+4) の margin-top なので、
     幅とマージンを解除して等分する */
  body[data-common] main [data-digitalOption] {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-align: center;
        align-items: center;
    gap: 8px;
  }
  body[data-common] main [data-digitalOption] > li {
    width: calc(50% - 4px) !important;
    margin: 0 !important;
  }

  /* 単位付き入力（input ＋「人」）の dd に注釈が入るケース。
     dd[data-unit] は flex なので、そのままだと注釈が input の横に入り込み
     入力欄が潰れる。折り返しを許可して注釈だけ全幅で次行に落とす。
     input は flex で伸ばし、単位は縮ませない */
  body[data-common] main [data-card] dd[data-unit] {
    -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
  }
  body[data-common] main [data-card] dd[data-unit] > input {
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    min-width: 0;
  }
  body[data-common] main [data-card] dd[data-unit] > p {
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
  /* 緑の注釈は本文(14px)より一段小さく 12px にする（SP の注釈基準と同じ）。
     dt 側（計算方式など）・dd 側（全従業員数）の両方が対象 */
  body[data-common] main [data-card] [data-smallGreen] {
    font-size: 12px !important;
  }
  /* dd に置いた注釈は全幅で次行へ。緑指定はベースが dt 配下限定なので明示する */
  body[data-common] main [data-card] dd [data-smallGreen] {
    width: 100% !important;
    margin-top: 6px !important;
    color: #3eb370 !important;
  }

  /* モーダル内（#overlay 配下）の素のチェックボックス。main の外なので
     ページ側の指定が届かず 13px のまま小さい。本文まわりと同じ 25px に揃える */
  body[data-common] #overlay input[type="checkbox"] {
    width: 25px !important;
    height: 25px !important;
  }

  /* [data-checkbox]（複数口契約特例オプション等）は input を width:0/opacity:0 で
     隠して隣の span を装飾する型。span がベース 40×40 / border 3px と大きいので、
     SP のチェックボックス基準 25×25 / border 2px（デジタル著作物オプションと同値）に揃える */
  body[data-common] main [data-checkbox] input + span {
    width: 25px !important;
    height: 25px !important;
    border-width: 2px !important;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
  /* チェックマークは 40px 枠前提の絶対座標(20×15 / top7 / left7 / border4)。
     25px 枠に合わせて縮小・再配置する（u211/common_sp.css と同値） */
  body[data-common] main [data-checkbox] input:checked + span::after {
    width: 13px !important;
    height: 9px !important;
    border-left-width: 2px !important;
    border-bottom-width: 2px !important;
    top: 4px !important;
    left: 4px !important;
  }
  /* ラベルの余白も 40px 枠時代の 15px から詰める */
  body[data-common] main [data-checkbox] p {
    margin-left: 8px !important;
  }

  /* 黄色い吹き出し注釈（[data-info]）は本文より一段小さく 12px */
  body[data-common] main [data-card] [data-info] {
    font-size: 12px !important;
  }

  /* バリデーションのポップアップ（#overlay 内の #popup）。
     ベースはタイトル20px / 本文16px で SP には大きい。
     #overlay は body 直下に生成されるので main スコープでは届かない */
  body[data-common] #popup > p:nth-of-type(1) {
    font-size: 16px !important;
  }
  body[data-common] #popup > p:nth-of-type(2) {
    font-size: 14px !important;
  }

  /* jQuery UI カレンダー（name="estimate_date" 等）。
     #ui-datepicker-div は body 直下に生成されるため main スコープでは届かない。
     jquery-ui.css は Layout 上 arrCss より後に読まれるので !important 必須。
     SP は素のままだと 429px あり画面幅(371px)からはみ出すので詰める */
  body[data-common] #ui-datepicker-div {
    max-width: calc(100vw - 20px) !important;
    box-sizing: border-box;
    font-size: 12px !important;
  }
  body[data-common] #ui-datepicker-div .ui-datepicker-header,
  body[data-common] #ui-datepicker-div .ui-datepicker-title {
    font-size: 13px !important;
  }
  body[data-common] #ui-datepicker-div th {
    padding: 6px 2px !important;
    font-size: 12px !important;
  }
  body[data-common] #ui-datepicker-div td {
    padding: 1px !important;
  }
  body[data-common] #ui-datepicker-div td a,
  body[data-common] #ui-datepicker-div td span {
    padding: 6px 2px !important;
    font-size: 13px !important;
  }

  /* 契約書作成系（P092 等）の設問ブロックの余白を詰める。
     実体は u010.css の
       body main > div:nth-of-type(2) [data-card] article    → margin 40px
       body main > div:nth-of-type(2) [data-card] article ul → margin-top 15px
     u010.css は U022 / U134 / U144（対象範囲外）も読むため直接は書き換えず、
     opt-in の common_sp 側から上書きして P001〜P094 だけに閉じる（PC側と同値） */
  body[data-common] main > div:nth-of-type(2) [data-card] article {
    margin: 20px 0 0 0 !important;
  }
  body[data-common] main > div:nth-of-type(2) [data-card] article ul {
    margin-top: 10px !important;
  }

  /* 「?」ヘルプ。[data-help] は position:absolute / top:0 でラベル行の「上端」に
     貼られており、円22px > ラベル文字 のぶん下にずれて見える。行の中央に置き直す。
     （[data-helpAncher] は親 p が flex(align-items:center) なので既に中央）
     行ボックスに対しては「?」がディセンダを持たないぶん上寄りになるので
     line-height を詰めて微調整する。PC 側(common_pc.css)と同じ対処 */
  body[data-common] main [data-help],
  body[data-common] main [data-helpAncher] {
    line-height: 1 !important;
    box-sizing: border-box;
    margin-left: 5px !important;
    /* 「?」を円の中央に。display:block の実装（P092等）だと
       line-height / padding 依存では上寄りになるので flex 中央寄せにする */
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
  }
  /* ※ [data-help] が position:absolute なのは daku_simulator.css を読む
     P002/P080 だけ。position:static で親 p が flex の画面（P092 等）に
     transform を当てると top が効かないまま translateY だけ効いて
     逆に上へずれるため、対象を限定する */
  :is(#u005,#u999) main [data-help] {
    top: 50% !important;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }

  /* プレースホルダは擬似要素なので u211/common_sp.css の総当たり(14px)が届かず、
     ベースの 18〜22px が取り残される。本文と同じ 14px に揃える。
     入力側を 16px にしているのは iOS Safari の自動ズーム抑止のためだが、
     ズームの判定は input 自身の font-size なのでプレースホルダは 14px でよい */
  body[data-common] main input::-webkit-input-placeholder,
  body[data-common] main textarea::-webkit-input-placeholder {
    font-size: 14px !important;
  }
  body[data-common] main input::placeholder,
  body[data-common] main textarea::placeholder {
    font-size: 14px !important;
  }
}