@charset "UTF-8";
main {
  font-size: 16px;  
}

#fv {
  background-image: url(/assets/images/kanri/bg-fv.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 85vh;
}
#fv h1,
.text-shadow, 
.text-shadow-blue {
  text-shadow: 
  1px 1px 2px #0766b3,
  0 0 1em #0766b3,
  0 0 0.2em #0766b3;
}

#trouble {
  /*background-image: url(/assets/images/kanri/bg-trouble260630.png);
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;*/
}

/*#trouble .whitearea {
  background-image: url(/assets/images/kanri/trouble-white-bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}*/

#lisk {
  background-image: url(/assets/images/kanri/bg-lisk.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#reason .bg-reason-blue {
  background: #5FBDDF;
}
#reason .wave-white {
  top: -10px;
  left: 0;
}
#approach .border {
  border-radius: 10px;
  border: solid #0F6CB9 2px!important;
}

.option-green {
  color: #0F9FB9;
}
.bg-option-green {
  background: #EEFCFA;
}

.marker-yellow {
  background:linear-gradient(transparent 60%, #F9FF67 60%);
}






/* 料金表 */
    .table-responsive-wrapper {
      margin-bottom: 1.5rem;
    }
    .plan-table {
      min-width: 850px; /* スマホで横スクロールさせるための最低幅 */
      border-collapse: separate;
      border-spacing: 12px 0; /* 列間の隙間（カード風に見せるポイント） */
      margin-left: -12px; /* 隙間の左端を相殺 */
    }

    /* 行ごとの背景色の設定（左端の見出し列のみ交互に背景色をつける） */
    .plan-table tbody tr {
      background-color: transparent;
    }
    .plan-table tbody tr:nth-child(even) td.th-label {
      background-color: #f0f0f0; /* 薄いグレー */
    }
    .plan-table tbody tr:nth-child(odd) td.th-label {
      background-color: #f7f7f7; /* さらに薄いグレー */
    }

    /* プランデータセルの基本スタイル（1行ごとに薄い青のシマシマにする） */
    .plan-table tbody tr:nth-child(even) td.plan-data {
      background-color: #f2f7fc;
    }
    .plan-table tbody tr:nth-child(odd) td.plan-data {
      background-color: #ffffff;
    }

    /* 左端の見出し列（固定幅・丸角・文字左寄せ） */
    .th-label {
      width: 220px;
      text-align: left;
      font-weight: bold;
      color: #4a4a4a;
      padding: 12px 16px !important;
      border-radius: 4px;
      vertical-align: middle;
    }

    /* プランカード列共通スタイル（青い枠線と丸角） */
    .plan-col {
      border-left: 3px solid #0068b7 !important;
      border-right: 3px solid #0068b7 !important;
      text-align: center;
      vertical-align: middle;
      padding: 12px !important;
    }
    /* プラン列の最上部（ヘッダー）の丸角 */
    thead th.plan-col {
      border-top: 3px solid #0068b7 !important;
      border-top-left-radius: 16px;
      border-top-right-radius: 16px;
      background-color: #ffffff;
    }
    /* プラン列の最下部の丸角 */
    tbody tr:last-child td.plan-col {
      border-bottom: 3px solid #0068b7 !important;
      border-bottom-left-radius: 16px;
      border-bottom-right-radius: 16px;
    }

    /* ヘッダーのデザイン調整 */
    .plan-title {
      color: #0068b7;
      font-size: 1.1rem;
      font-weight: bold;
      margin-bottom: 5px;
    }
    .plan-price {
      color: #0068b7;
      font-size: 1.8rem;
      font-weight: bold;
      margin-bottom: 5px;
    }
    .plan-price span {
      font-size: 1.2rem;
      margin-right: 2px;
    }

    /* 波線（簡易的にCSSの背景グラデーションで表現） */
    .wave-line {
      width: 40px;
      height: 6px;
      margin: 0 auto 10px;
      background-image: radial-gradient(circle at 50% 120%, transparent 3px, #0068b7 4px, #0068b7 5px, transparent 6px);
      background-size: 12px 12px;
      background-repeat: repeat-x;
    }

    /* 回数/月 の行 */
    .frequency-row td.plan-data {
      background-color: #d1e4f6 !important;
      color: #0068b7;
      font-weight: bold;
    }

    /* アイコンの色・サイズ */
    .bi-check-circle {
      color: #0068b7;
      font-size: 1.3rem;
    }
    .hyphen {
      color: #333;
      font-weight: bold;
    }

    /* 注記テキスト */
    .notes {
      font-size: 0.85rem;
      color: #333;
    }




@media screen and (min-width: 769px) {
  #fv {
    height: 100vh;
  }
  #approach .border {
  min-height: 580px;
  height: 100%;
  }
  #reason .wave-white {
    top: 0;
    left: 0;
  }

}