@charset "UTF-8";

/* --- 共通変数設定 --- */
:root {
  /* Colors */
  --c-primary: #4158D0;
  --c-accent: #E7410A;
  --c-text-black: #333333;
  --c-bg-yellow: #FFFBE7;
  --c-white: #ffffff;
  --g-main: linear-gradient(90deg, #212D6A 0%, #4158D0 100%);
  --c-dark:#212D6A;

  /* Spacing */
  --inner-w: 1000px;

  /* Font Sizes (Liquid) */
  --fz-h1: clamp(28px, 4.5vw, 40px);
  --fz-h2: clamp(20px, 3.5vw, 28px);
  --fs-h3: clamp(24px, 3.4vw, 32px);
  --fz-p: clamp(16px, 1.6vw, 18px);

  /* 上下余白：最小 50px / 推奨 8vw / 最大 100px */
  --section-pv: clamp(25px, 8vw, 50px);

  /* 上下余白：最小 50px / 推奨 8vw / 最大 100px */
  --section-cta: clamp(16px, 8vw, 24px);

  /* innerの横幅（左右の余白は確保しつつ中央寄せ） */
  --inner-w: 1000px;

  --txt__cap: 0.8rem;
}

body{
  background:#F5F5FA !important;
  letter-spacing: normal;
}

p{
  font-size: var(--fz-p);
  /* line-height: 1.5; */
}

img
{vertical-align: top;max-width: 100%;height: auto;}

.main-section__sub-title{
  margin-bottom: clamp(16px, 1vw, 24px);
}

/* --- Utility --- */
.u-bg-yellow {
  background-color: var(--c-bg-yellow);
  padding: 0 4px;
}

.u-color-accent {
  color: var(--c-accent);
}

.u-font-bold {
  font-weight: 700;
}

.u-txt__cap{
  font-size: var(--txt__cap);
}

.u-txt__cap--normal{
  font-weight: normal;
}

.u-txt__medium{
  font-size: clamp(16px, 1vw, 18px) !important;
}

.u-is-left{
  text-align:left !important;
}

.u-is-full{
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}

.u-marginTop{
  margin-top: 24px !important;
}

.u-marginBottom0{
  margin-bottom: 0 !important;
}

/* --- 共通テーブルレイアウト --- */
.resolution-table {
  width: 100%;
  max-width: 670px;
  margin: 0 auto;
  border-top: 1px solid #fff; /* ヘッダー上部の境界線 */
}

.resolution-table__header,
.resolution-table__row {
  display: flex;
  width: 100%; /* 親の幅に追従 */
}

/* 共通：左カラム（要件）の設定 */
.resolution-table__th:first-child,
.resolution-table__td-label {
  flex: 0 0 160px; /* ★幅を160pxで固定。画面が狭くなっても縮まない */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 10px;
  box-sizing: border-box;
}

/* 共通：右カラム（内容）の設定 */
.resolution-table__th:last-child,
.resolution-table__td-content {
  flex: 1; /* ★残りの幅をすべて使う */
  padding: 12px 20px;
  box-sizing: border-box;
}

/* --- 装飾系 --- */
.resolution-table__header {
  background-color: #212D6A;
  color: #fff;
  font-weight: 700;
}

.resolution-table__th {
  font-size: 16px;
  text-align: center;
}

/* 縦の仕切り線（ヘッダー） */
.resolution-table__th:first-child {
  border-right: 1px solid #fff;
}

.resolution-table__row {
  border-bottom: 1px dotted #212D6A;
}

.resolution-table__td-label {
  background-color: #F1F5FF;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
}

.resolution-table__td-content {
  background-color: #fff;
  font-size: 15px;
  line-height: 1.6;
}

/* --- Responsive (768.98px以下) --- */
@media screen and (max-width: 768.98px) {
  .resolution-table__row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border-bottom: none !important;
  }

  .resolution-table__td-label,
  .resolution-table__td-content {
    display: block;
    box-sizing: border-box;
    flex: 0 0 50%;
    width: 50%;
    min-height: 3em;
    padding: 10px;
    border-bottom: 1px dotted #212D6A !important;
  }

  .resolution-table td[colspan="3"] {
    flex: 0 0 50%;
    width: 50%;
  }
}