/*鉄骨用スタイルファイル*/

/* ================================================
   共通変数
   ================================================ */
:root {
  --green-dark:   #f27f0c;
  --green-mid:    #d2691e;
  --green-light:  #faac5f;
  --green-pale:   #fcd068;
  --green-mist:   #faac5f;
  --green-bg:     #FDF5E6;
  --green-card:   #fff8ec;
  --green-border: #FFA500;
  --card-border:  #f5d9b0;
  --label-color:  black;
  --radius:       10px;
}

/* ================================================
   ベース
   ================================================ */
body {
  background: #009d85;
  font-size: 15px;
  font-family: Arial, sans-serif;
}

.set_color { display: inline-block; }
.clear     { clear: both; }

.container {
  padding: 20px;
  width: 950px;
  margin: auto;
  background: white;
  border-radius: var(--radius);
  font-family:
   "Meiryo",
   "Hiragino Sans",
   "Yu Gothic",
    sans-serif;
}

.footer {
  width: 950px;
  margin: 50px auto;
  bottom: 0;
  height: 50px;
}

/* ================================================
   フォームコントロール共通
   ================================================ */
#mgc, #oku, #rento, #kata, #nensu,
#hihukunensu, #tuika_huho, #inp_huho,
#inp_hihuku, #inp_kiken, #inp_hihukuzai,
#futaikagaku {
  font-size: 16px;
  color: black;
  box-sizing: border-box;
  box-shadow: 1.5px 1.5px 0 var(--green-mid);
  padding: 5px;
  border-radius: var(--radius);
  margin: 5px;
  width: 85px;
  border: solid;
  border-color: var(--green-dark);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}

/* ドロップダウンのみcursor */
#rento, #kata, #nensu, #hihukunensu,
#tuika_huho, #inp_huho, #inp_hihuku,
#inp_kiken, #inp_hihukuzai {
  cursor: pointer !important;
}

/* 個別幅 */
#kata         { width: 120px; }
#rento        { width: 95px;  }
#nensu        { width: 180px; }
#tuika_huho   { width: 105px; }
#inp_hihuku   { width: 100px;  }
#inp_huho,
#inp_kiken    { width: 70px;  }
#hihukunensu  { width: 200px; }
#futaikagaku  { width: 120px; }
#inp_hihukuzai{ width: 280px; }

/* フォーカス時 */
#mgc:focus, #oku:focus, #rento:focus, #kata:focus,
#nensu:focus, #hihukunensu:focus, #tuika_huho:focus,
#inp_huho:focus, #inp_hihuku:focus, #inp_kiken:focus,
#inp_hihukuzai:focus, #futaikagaku:focus {
  border-color: #FF5C5C;
  box-shadow: 3px 3px 0 #FF5C5C;
  transform: translate(-1px, -1px);
  outline: none;
}

/* ================================================
   ボタン
   ================================================ */
#btn {
  cursor: pointer;
  display: inline-block;
  box-sizing: border-box;
  width: 80px;
  height: 40px;
  padding: 10px;
  background: #3897fd;
  border-radius: var(--radius);
  font-size: 16px;
  text-align: center;
  color: #fff;
}

/* ================================================
   エリア
   ================================================ */
.input-area  { font-size: 10px; margin-bottom: 10px; }
.result-area { font-size: 20px; }

/* ================================================
   テーブル共通（.tbl-base）
   ================================================ */
.tbl-base {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius);
  border: 1px solid;
  overflow: visible;
}

.tbl-base td {
  padding: 5px 15px;
  border: 1.5px solid;
  background: white;
  height: 55px;
}

.tbl-base th {
  background: var(--green-pale);
  border: 1.5px solid;
  height: 55px;
}

/* 四隅の角丸 */
.tbl-base thead tr:first-child th:first-child { border-top-left-radius:     var(--radius); }
.tbl-base thead tr:first-child th:last-child  { border-top-right-radius:    var(--radius); }
.tbl-base tbody tr:last-child  td:first-child { border-bottom-left-radius:  var(--radius); }
.tbl-base tbody tr:last-child  td:last-child  { border-bottom-right-radius: var(--radius); }

/* ================================================
   テーブルBBB固有（th高さ）
   ================================================ */
table.bbb th { height: 55px; }

/* ================================================
   テーブル列幅（本体部分テーブル用）
   ================================================ */
table.aaa th:nth-child(1) { width: 120px; } /* 間口 */
table.aaa th:nth-child(2) { width: 120px; } /* 奥行 */
table.aaa th:nth-child(3) { width: 120px; } /* 設置面積 */
table.aaa th:nth-child(4) { width: 100px; } /* 連棟数 */
table.aaa th:nth-child(5) { width: 200px; } /* 設置年数 */

table.bbb th:nth-child(1) { width: 300px; } /* 被覆材種類 */
table.bbb th:nth-child(2) { width: 220px; } /* 被覆材使用年数 */
table.bbb th:nth-child(3) { width: 150px; } /* 被覆期間 */

table.ccc th:nth-child(1) { width: 130px; } /* 付保割合 */
table.ccc th:nth-child(2) { width: 150px; } /* 復旧費用 */
table.ccc th:nth-child(3) { width: 150px; } /* 撤去費用 */
table.ccc th:nth-child(4) { width: 150px; } /* 付保追加 */
table.ccc th:nth-child(5) { width: 150px; } /* 附帯施設再取得価額 */

table.ddd th:nth-child(1) { width: 150px; } /* 再建築価額 */
table.ddd th:nth-child(2) { width: 150px; } /* 本体時価額 */
table.ddd th:nth-child(3) { width: 150px; } /* 被覆材時価額 */
table.ddd th:nth-child(4) { width: 150px; } /* 復旧費用価額 */
table.ddd th:nth-child(5) { width: 150px; } /* 撤去費用価額 */
table.ddd th:nth-child(6) { width: 150px; } /* 評価額合計 */

table.eee th:nth-child(1) { width: 120px; } /* お支払い開始金額 */
table.eee th:nth-child(2) { width: 140px; } /* 共済金額 */
table.eee th:nth-child(3) { width: 123px; } /* 特園附帯掛金等 */
table.eee th:nth-child(4) { width: 123px; } /* 復旧掛金 */
table.eee th:nth-child(5) { width: 123px; } /* 撤去掛金 */
table.eee th:nth-child(6) { width: 123px; } /* 付保追加掛金 */
table.eee th:nth-child(7) { width: 140px; } /* 附帯施設再取得価額 */

/* ================================================
   強調セル
   ================================================ */
#xyz {
  background: yellow;
  border: 2.5px solid;
}

#kyosaikingaku, #nounyu1, #nounyu2, #nounyu3 {
  border: 2.5px solid;
}

/* ================================================
   セクション見出し
   ================================================ */
#top {
  margin-top: 10px;
  display: inline-block;
  box-sizing: border-box;
  width: 950px;
  height: 50px;
  padding-top: 7px;
  background: var(--green-border);
  border-radius: var(--radius);
  font-size: 24px;
  text-align: center;
  color: #fdfdfd;
  letter-spacing: 14px;
}

.top2 {
  position: relative;
  padding: 0.5rem;
  border-bottom: 6px solid var(--green-dark);
  font-size: 18px;
  font-weight: bold;
  text-align: left;
  color: #FF8C00;
}
.top2::before {
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 20%;
  height: 6px;
  content: '';
  background: var(--green-light);
}

.top3 {
  display: inline-block;
  box-sizing: border-box;
  width: 150px;
  height: 30px;
  padding-top: 4px;
  background: var(--green-mist);
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: black;
  letter-spacing: 7px;
}

.top4 {
  display: inline-block;
  box-sizing: border-box;
  width: 200px;
  height: 30px;
  padding-top: 4px;
  background: var(--green-mist);
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: black;
  letter-spacing: 7px;
}

/* ================================================
   注意書きボックス
   ================================================ */
.container > div:last-child > p:not(.top2) {
  padding: 16px 20px;
  border: 1px solid var(--green-border);
  border-radius: var(--radius);
  background: var(--green-bg);
}

/* ================================================
   ツールチップ
   ================================================ */
.tooltip-container {
  position: relative;
  padding: 0.5rem;
  cursor: help;
}

.tooltip-text {
  visibility: hidden;
  opacity: 0;
  width: 200px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 8px;
  position: absolute;
  z-index: 10;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.3s ease;
}

.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* PC版ではtd内のツールチップを非表示 */
td .tooltip-container { display: none; }
.label-tooltip        { display: none; }

/* ================================================
   ラジオボタン
   ================================================ */
input[type="radio"]:not(:checked):hover        { accent-color: #30cf6c; cursor: pointer; }
input[type="radio"]:not(:checked) + label:hover{ color: #30cf6c; cursor: pointer; }
input[type="radio"]:checked                    { accent-color: #e63; }
input[type="radio"]:checked + label            { color: #2f9656; font-weight: 900; }

/* ================================================
   スマホ対応（480px以下）
   ================================================ */
@media (max-width: 480px) {

  /* コンテナ */
  .container {
    width: 100%;
    border-radius: 0;
    padding-bottom: 24px;
  }

  /* セクション余白 */
  .input-area,
  .container > div:nth-child(2),
  .container > div:nth-child(3),
  .container > div:nth-child(4) {
    padding: 0;
  }

  /* 見出し */
  .top2 {
    margin: 24px 0px 12px;
    font-size: 16px;
  }

  .top3, .top4 {
   display: block;
   margin-bottom: 8px;
  }

  /* タイトルバー */
    #top {
    width: 100%;
    height: auto;
    min-height: 50px;
    padding: 12px 16px;
    font-size: 18px;
    letter-spacing: 0;
    border-radius: 20px;
  }

  /* テーブルリセット */
  .tbl-base {
    width: 100%;
    box-shadow: none;
    border: none;
    border-radius: 0;
    max-width: 100%;
    table-layout: fixed;
  }

  .tbl-base thead { display: none; }

  /* カード */
  .tbl-base tbody tr {
    display: block;
    border: 1.5px solid var(--card-border);
    border-radius: var(--radius);
    padding: 8px 12px;
    margin-bottom: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: var(--green-border);
  }

  /* セル */
  .tbl-base td {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: none;
    border-bottom: 1px solid #e8f0eb;
    padding: 8px 4px;
    text-align: left;
    background: var(--green-card);
    min-width: 0;
    width: 100%;
    max-width: 100%;
    word-break: break-all;
    box-sizing: border-box;
    position: relative;
    border-radius: 0 !important;
    min-height: 80px;

  }

  .tbl-base td:last-child { border-bottom: none; 
}

  /* データラベル */
  .tbl-base td::before {
    padding-left: 18px;
    content: attr(data-label);
    font-weight: 700;
    font-size: 12px;
    color: var(--label-color);
    text-align: left;
    flex-shrink: 0;
    margin-right: 0px;
    white-space: normal;
    word-break: break-all;
    margin-bottom: 0px; 
  }

  /* フォームコントロール可変幅 */
  #mgc, #oku, #rento, #kata, #nensu,
  #hihukunensu, #tuika_huho, #inp_huho,
  #inp_hihuku, #inp_kiken, #inp_hihukuzai,
  #futaikagaku {
    width: 100% !important;
  }

  #mgc, #oku, #futaikagaku{
   font-size: 16px;
  }
  

  #rento, #kata, #nensu,
  #hihukunensu, #tuika_huho, #inp_huho,
  #inp_hihuku, #inp_kiken, #inp_hihukuzai{
   padding-top: 1px !important;
   padding-bottom: 2px !important;
   height: 45px !important;
  }

  #mgc, #oku     { max-width: 100px;  }
  #rento         { max-width: 120px; }
  #kata          { max-width: 130px; }
  #nensu         { max-width: 200px; }
  #hihukunensu   { max-width: 200px; }
  #inp_huho      { max-width: 100px;  }
  #inp_hihuku    { max-width: 100px;  }
  #tuika_huho    { max-width: 150px; }
  #inp_hihukuzai { max-width: 290px; }
  #futaikagaku   { max-width: 150px; margin-left:7px; }

  /* ラジオボタン */
  #fukyu, #tekyo {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px; 
    flex-wrap: wrap;
    white-space: nowrap;
  }

  #fukyu br, #tekyo br {
    display: none;
  }

  #fukyu label, #tekyo label {
    margin-left: -15px; 
  }

  #kyosaikingaku, #nounyu1, #nounyu2, #nounyu3 {
    border-color: #FF3333;
    border-width: 4px;
  }

  

  /* お支払い開始金額 */
  #1man, #3man, #10man {
    white-space: nowrap;
    display: flex;
    align-items: center;

  }
  #1man strong, #3man strong, #10man strong {
    white-space: nowrap;
    display: inline;
  }


  /* 結果セル */
#saikoutiku, #hontai, #hihukuzai,
#fukyukagaku, #tekyokagaku, #kakakugoukei, #menseki,
#noukafutan1, #noukafutan2, #noukafutan3,
#fukakin1, #fukakin2, #fukakin3,
#tokuyaku1, #tokuyaku2, #tokuyaku3,
#tokuyaku12, #tokuyaku22, #tokuyaku32,
#kyosaikingaku,
#nounyu1, #nounyu2, #nounyu3{
  width: 100%;
  white-space: nowrap;
  padding-left: 18px;
  font-size: 20px;
}

#nounyu1, #nounyu2, #nounyu3{
  font-weight: bold;
}

#saikoutiku::before, #hontai::before, #hihukuzai::before,
#fukyukagaku::before, #tekyokagaku::before, #kakakugoukei::before, #menseki::before,
#noukafutan1::before, #noukafutan2::before, #noukafutan3::before,
#fukakin1::before, #fukakin2::before, #fukakin3::before,
#tokuyaku1::before, #tokuyaku2::before, #tokuyaku3::before,
#tokuyaku12::before, #tokuyaku22::before, #tokuyaku32::before,
#kyosaikingaku::before,
#nounyu1::before, #nounyu2::before, #nounyu3::before{
  padding-left: 0;
}


  #kyosaikingaku { display: flex; }

  /* td内ツールチップ（スマホのみ表示） */
  td .tooltip-container {
    display: inline;
    padding: 0;
    margin: 0;
    position: absolute;
    left: 0px;
  }

  /* ラベルツールチップ */
  .label-tooltip {
    display: inline;
    position: relative;
    font-weight: 700;
    font-size: 11px;
    color: #7a8c7d;
    cursor: pointer;
    border-bottom: 1px dotted #7a8c7d;
    margin-right: 8px;
    flex-shrink: 0;
  }

  .label-tooltip .tooltip-text {
    visibility: hidden;
    opacity: 0;
    width: 200px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 8px;
    position: absolute;
    z-index: 100;
    bottom: auto;
    transform: none;
    transition: opacity 0.3s ease;
    font-weight: 400;
    white-space: normal;
  }

    td .tooltip-container .tooltip-text {
    bottom: auto;
    left: 100%;
    transform: none;
    margin-left: 8px;
    top: -65px;
    width: 200px;
    white-space: normal; 
    word-break: break-word;
  }

  .label-tooltip:hover .tooltip-text,
  .label-tooltip:active .tooltip-text {
    visibility: visible;
    opacity: 1;
  }



}