@charset "UTF-8";
/* =========================================================================
   front_v2 PC 共通ベース（U143 基準）
   -------------------------------------------------------------------------
   ・U143（グループ会社登録 / u143_info.css）で確定した寸法・書式を
     全画面の PC 表示に横展開するための共通ファイル。
     各画面のコントローラの $arrVal["arrCss"] に "common_pc" を追加すると効く。

   ・全ルールを @media screen and (min-width: 769px) に閉じている。
     SP 側は u211/common_sp.css・各画面の *_sp.css が担当（基準値が別物）なので、
     769px 未満には一切干渉しない。
     arrCss では **common_pc を SP用CSSより前** に置くこと（SP側を後勝ちさせる）。

   ・ベース（parts.css / common.css / daku_simulator.css 等）が深いネストと
     固定pxを持つため、寸法系は !important で上書きする。

   ・ここに入れるのは「役割が明確で誤爆しないもの」だけ。
     見出し・本文の文字サイズは画面ごとに構造が違うため、各画面のCSSで個別に寄せる。
     （U143 も総当たりではなく役割ごとに 12/13/14/15/16/18px を使い分けている）
   ========================================================================= */
@media screen and (min-width: 769px) {

  /* =======================================================================
     0. 文字サイズの基準（U143: 本文・テーブル・ラベルが 13px で最多）
        まず main 配下を 13px に総当たりで下げ、役割ごとに後段で上げ直す。
        （SP の u211/common_sp.css が 14px 総当たりでやっているのと同じ方式）
        ※ 総当たりなので擬似要素(::before/::after)には効かない点に注意

        [data-stamp]（見積書プレビュー等の帳票再現エリア）は実際の書類の
        見た目を写しているので総当たりの対象外にする。他画面で同種の
        帳票エリアが出てきたら、この :where(:not(...)) に追加すること。

        :where() で包んで詳細度を 0 にしている。素の :not() を2つ重ねると
        詳細度が (0,3,2) まで上がり、後段の「フォームは14px」等の指定を
        逆に食ってしまうため（実際 input が13pxになる事故があった）。
     ======================================================================= */
  body[data-common] main *:where(:not([data-stamp], [data-stamp] *)) {
    font-size: 13px !important;
  }
  /* フォーム要素は 14px（U143）。§1 でも指定するがここでも押さえておく */
  body[data-common] main input,
  body[data-common] main select,
  body[data-common] main option,
  body[data-common] main textarea {
    font-size: 14px !important;
  }

  /* =======================================================================
     1. 入力欄（テキスト / 数値 / セレクト / テキストエリア）
        U143: height 30px / border 1px #c0c6c9 / radius 4px /
              padding 6px 10px / font-size 14px
     ======================================================================= */
  body[data-common] [data-text],
  body[data-common] [data-select] {
    height: 30px !important;
    padding: 6px 10px !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #c0c6c9 !important;
    border-radius: 4px !important;
    font-size: 14px !important;
  }
  /* テキストエリアは U143 に実物が無いため高さは各画面のまま。枠と文字だけ揃える */
  body[data-common] [data-textarea] {
    padding: 6px 10px !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #c0c6c9 !important;
    border-radius: 4px !important;
    font-size: 14px !important;
  }
  /* フォーカス時の枠は諾テーマの緑 */
  body[data-common] [data-text]:focus,
  body[data-common] [data-select]:focus,
  body[data-common] [data-textarea]:focus {
    border-color: #3eb370 !important;
    outline: none;
  }
  /* プレースホルダは擬似要素なので §0 の総当たりが届かず、ベースの
     18〜22px が取り残される。入力文字と同じ 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;
  }

  /* =======================================================================
     2. チェックボックス（U143: 20×20 / border 2px / radius 3px）
        ベースは parts.css の [data-checkboxSingle] が 30×30/border3、
        daku_simulator.css の [data-digitalOption] が 25×25/border3 と
        バラバラなので、appearance:none で装飾している素の checkbox に直接当てる。
        チェックマークはどちらも :before{inset:0} / ::after{width:150%} の
        相対指定なのでサイズ変更に自動追従する（座標の付け直しは不要）。
        枠線の色はテーマ依存なので触らない（サイズと角丸のみ揃える）。
     ======================================================================= */
  body[data-common] main input[type="checkbox"],
  body[data-common] #overlay input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    border-width: 2px !important;
    border-radius: 3px !important;
  }
  /* ただし [data-checkbox] は「input を width:0/opacity:0 で隠して隣の span を
     装飾する」型（parts.css）。上の総当たりが隠し input にも当たって
     幅 0→20px になり、見えないまま場所を取ってしまうので元に戻す */
  body[data-common] main [data-checkbox] input[type="checkbox"] {
    width: 0 !important;
    height: auto !important;
    border-width: 0 !important;
  }
  /* 見た目の本体である span を 20×20 / border 2px に（ベースは 40×40 / border 3px） */
  body[data-common] main [data-checkbox] input + span {
    width: 20px !important;
    height: 20px !important;
    border-width: 2px !important;
    border-radius: 3px !important;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
  /* チェックマークは 40px 枠前提の絶対座標(20×15 / top7 / left7 / border4)。
     20px 枠に合わせて縮小・再配置する */
  body[data-common] main [data-checkbox] input:checked + span::after {
    width: 10px !important;
    height: 7px !important;
    border-left-width: 2px !important;
    border-bottom-width: 2px !important;
    top: 3px !important;
    left: 3px !important;
  }
  /* ラベルの余白も 40px 枠時代の 15px から詰める */
  body[data-common] main [data-checkbox] p {
    margin-left: 8px !important;
  }

  /* =======================================================================
     2-1. デジタル著作物オプション（新聞5紙のチェックボックス）は4列。
        ベースは li:33%（3列）＋ nth-child(n+4) の margin-top なので、
        幅とマージンを解除して等分する（SP は common_sp.css で2列）
     ======================================================================= */
  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(25% - 6px) !important;
    margin: 0 !important;
  }

  /* =======================================================================
     2-2. ラジオ（[data-sim_radio] のカード内の丸）
        ベースは 30×30 で、本文13pxに対して大きすぎる。
        チェックボックスと同じ 20×20 / border 2px に揃える。

        ※ チェックマーク(::after)は「親カード基準」の絶対座標
          (top:19px or 30px / left:22px) で置かれているため、丸を縮めると
          位置がズレる。丸に position:relative を与えて丸基準の中央に置き直す。
     ======================================================================= */
  body[data-common] main [data-sim_radio] > div > span {
    width: 20px !important;
    height: 20px !important;
    border-width: 2px !important;
    border-radius: 20px !important;
    position: relative;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
  /* 「選択出来ません」オーバーレイ（擬似要素なので §0 の総当たりが届かず
     ベースの 20px / 18px が取り残される）。カード内テキストと同じ13pxに揃える。
     sim_radio 3・4 の :disabled と、daku_simulator.css の [data-nonSelect] の3種類 */
  body[data-common] main [data-sim_radio] > input:disabled + div::after,
  body[data-common] main [data-nonSelect]::after {
    font-size: 13px !important;
  }
  body[data-common] main [data-sim_radio] > input:checked + div span::after {
    width: 11px !important;
    height: 7px !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;
  }

  /* =======================================================================
     2-3. ラジオカードの横幅（丸を縮めた分、横も現行の約66%に詰める）
        ベースは colTwo:260px / data-type:390px の固定px。
     ======================================================================= */
  body[data-common] main [data-colTwo] > li {
    width: 172px !important;
  }
  /* 複製利用方法だけは「紙から紙への複写許諾(2節)」が1行に収まる幅にする。
     テキスト実測159px ＋ 丸20 ＋ 余白20 ＋ アイコン70 ＋ padding30 ＋ border4 = 303px */
  body[data-common] main [data-type] > li {
    width: 310px !important;
  }
  /* 複製利用方法カードの高さ。ベースは 80px 固定だが、中身は最大でも
     テキスト2行(34px)＋padding(20px)＋border(4px)＝58px しかなく間延びする。
     内容なりにしつつ min-height で2枚の高さを揃える（3行に増えても溢れない） */
  body[data-common] main [data-type] [data-sim_radio="4"] > div {
    height: auto !important;
    min-height: 60px;
  }
  /* 複製利用方法のアイコンは 120×40px。カード幅を66%に詰めたので
     縦横とも縮める（mask-size:contain なので枠を縮めれば図柄ごと小さくなる） */
  body[data-common] main [data-type] [data-typeIcon] {
    width: 70px !important;
    height: 26px !important;
    margin-left: 20px !important;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
  /* テキスト幅はベースが calc(100% - 170px)（アイコン120＋余白20＋丸30の想定）で
     ベタ書きされている。丸20px・アイコン70px に合わせて計算し直す
     （20 + 20 + 70 = 110px） */
  body[data-common] main [data-type] [data-sim_radio="4"] > div p {
    width: calc(100% - 110px) !important;
    /* ボックスとしては中央だが、グリフが行ボックス内で 1px 上寄りに描画される
       （line-height:16.9px に対しディセンダ分の余白が下に残るため）。
       line-height:0 にすると中央になるが2行の5節が潰れるので、p ごと1px下げる */
    position: relative;
    top: 1px;
  }

  /* =======================================================================
     2-4. 項目見出し dt の固定高さを解除
        daku_simulator.css が height:55px / width:230px を持っており、
        本文13pxに対して間延びする。U143 は th を padding で高さ可変にしている
        ので、同じ考え方で高さを内容なりにする（幅は据え置き）。
     ======================================================================= */
  body[data-common] main [data-card] dl dt {
    height: auto !important;
    min-height: 0 !important;
    padding: 6px 0 !important;
    /* ベースは align-items:center。dd が2段以上になる行（注釈付き等）で
       ラベルだけ縦中央に落ちて入力欄とズレるため上寄せにする。
       padding-top 6px ＋ ラベル17px の中心 ＝ 入力欄30px の中心 で一致する */
    -ms-flex-align: start !important;
        align-items: flex-start !important;
  }
  /* 見出しの補足カッコ（「見積書日付の表示方法(西暦・和暦)」の後半）。
     ベースが display:block + width:100% で強制改行され2行になっていた。
     inline に戻して1行に収め、小さく薄い色にして本文と区別する */
  body[data-common] main [data-card] dl dt [data-small] {
    display: inline !important;
    width: auto !important;
    margin-left: 4px;
    color: #a3a3a2 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
  }

  /* 緑の注釈は PC の 55px 枠に収めるため margin-top:-10px が入っている。
     高さを可変にすると見出しに食い込むので解除する（SP と同じ対処） */
  body[data-common] main [data-card] dl dt [data-smallGreen] {
    margin-top: 2px !important;
  }
  /* 注釈を dd 側（入力欄の下）に置いた場合。dd[data-unit] は input と単位を
     横並びにする flex なので、注釈だけ折り返して全幅で次行に落とす */
  body[data-common] main [data-card] dl dd[data-unit] {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  body[data-common] main [data-card] dl dd [data-smallGreen] {
    width: 100% !important;
    margin-top: 4px !important;
    /* dt 配下限定のベース指定（緑）が dd では効かないので明示する */
    color: #3eb370 !important;
  }
  /* [data-emplyee] だけ dt:calc(100%-300px) / dd:300px という専用の逆転レイアウトで、
     入力欄の左端が他の行と揃わない（注釈が dt にあった頃の名残）。標準に戻す */
  body[data-common] main [data-card] dl[data-emplyee] dt {
    width: 230px !important;
  }
  body[data-common] main [data-card] dl[data-emplyee] dd {
    width: calc(100% - 230px) !important;
  }

  /* 「?」ヘルプは丸22pxに対して行ボックスが16.9pxあり、かつ「?」はディセンダを
     持たないため下に余白が残って上寄りに見える。行ボックスを文字サイズに詰めて
     視覚的な中央に寄せる */
  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 / top:0 でラベル行の「上端」に貼られている
     画面（P002/P080）では、円22px > ラベル15px のぶん 3〜4px 下にずれて見えるので
     行の中央に置き直す。
     ※ 画面によっては [data-help] が position:static で親 p が flex の構成もある
       （P092 等）。そこに transform を当てると top が効かないまま translateY だけ
       効いて逆に11px上へずれるため、absolute のときだけに限定する。
     （[data-helpAncher] は親 p が flex(align-items:center) なので元から中央） */
  :is(#u005,#u999) main [data-help] {
    top: 50% !important;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }

  /* =======================================================================
     3. カード（U143: padding 20px 24px 24px / radius 8px / border 1px #d8ded9）
     ======================================================================= */
  body[data-common] [data-card] {
    padding: 20px 24px 24px !important;
    border: 1px solid #d8ded9 !important;
    border-radius: 8px !important;
  }

  /* =======================================================================
     4. テーブル（U143: th/td とも 13px。th は淡緑地に緑文字）
     ======================================================================= */
  body[data-common] main table th,
  body[data-common] main table td {
    border-bottom: 1px solid #e5e8e6;
    font-size: 13px !important;
  }
  body[data-common] main table th {
    padding: 12px 14px !important;
    background: #f7fbf9;
    color: #1f7a4f;
  }
  /* U143 は table td を 3px にし、主契約者テーブル([data-owner-table])だけ 12px。
     以前ここで一律 12px にしていたが、それは owner-table の値を誤って
     テーブル全般に一般化したもの。U143 の構造どおりに戻す */
  body[data-common] main table td {
    padding: 3px !important;
  }
  body[data-common] main [data-owner-table] td {
    padding: 12px !important;
  }

  /* =======================================================================
     4-2. 必須マーク「*」の位置（P002/P080 のみ）
        daku_simulator.css は dl dt[data-req]::before で「*」を文頭に出しており、
        他の対象画面（P003/P004/P006/P090 等）が [data-req]:after の「必須」バッジを
        文末に出しているのと不揃いだった。P002/P080 も文末に統一する。
        ※ daku_simulator.css は範囲外(U112/U115/U141等)も読む共用CSSなので
          直接は書き換えず、ここで ::before を消して ::after で出し直す。
     ======================================================================= */
  /* 実装は daku_simulator_req.css（P002/P080 の arrCss にのみ追加）に置いた。
     body id では分離できない（P002 と P006 がどちらも pageId="u005"）ため */

  /* =======================================================================
     4-3. jQuery UI カレンダー（name="estimate_date" 等の日付入力）
        #ui-datepicker-div は body 直下に生成されるため main スコープでは届かない。
        また jquery-ui.css は Layout 上 arrCss より後に読まれるので !important 必須。
        common_pc.css を読み込んだ画面にだけ効く（opt-in）ので、
        カレンダーを共有していても他画面には影響しない。
     ======================================================================= */
  body[data-common] #ui-datepicker-div {
    font-size: 13px !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 !important;
    font-size: 13px !important;
  }

  /* =======================================================================
     4-4. バリデーションのポップアップ（#overlay 内の #popup）
        ベースはタイトル20px / 本文16px で、本文13px の画面には大きい。
        #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: 13px !important;
  }

  /* =======================================================================
     4-5. SP専用のプルダウン（daku_simulator_sp_select.js が生成）は PC では隠す
        JS は SP 幅のときに生成するだけで、PC 幅に広げても撤去しない。
        そのため一度 SP 幅で開いた後にウィンドウを広げると、ラジオ（PCで復活）と
        select が二重に出てしまう。生成タイミングに依存しないよう CSS で確実に隠す。
     ======================================================================= */
  body[data-common] select[data-sp_select],
  body[data-common] p[data-sp_select_note] {
    display: none !important;
  }

  /* =======================================================================
     4-6. 契約書作成系（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_pc 側から上書きして
        P001〜P094 だけに閉じる。
     ======================================================================= */
  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;
  }

  /* =======================================================================
     5. ボタン
        主ボタン    U143: height 50px / width 200px / 15px(700) / radius 6px
        補助ボタン  U143: height 42px / 14px / padding 10px 28px / radius 6px
     ======================================================================= */
  body[data-common] [data-btn] {
    height: 50px !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }
}