@charset "utf-8";

html,
body {
  height: 100%;
  margin: 0;
}

/* =====================
  Header（固定）
===================== */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  z-index: 1030;
}
.header-width {
  max-width: 960px;
}

.bg-header {
  border-bottom: 1px solid var(--rgba-shadow);
  background-color: var(--rgba-white);
}
/* ヘッダー分下げる */
.page {
  min-height: 100vh;
  padding-top: 64px;
  display: flex;
  flex-direction: column;
}

/* =====================
  Footer
===================== */
#footer {
  background-image: linear-gradient(
    to bottom,
    #cdcfcf,
    #c1c3c3,
    #b5b8b7,
    #aaacab,
    #9fa19f
  );
  color: #fff;
  font-weight: 300;
  text-align: center;
  box-shadow: 0 -1px 5px rgba(159, 161, 159, 0.2);
}

/* =====================
  SP：サイドナビのエリア非表示、mainの幅100％
===================== */
aside {
  width: 360px;
  min-width: 360px;
  padding: 16px;
  padding-top: 24px;
  position: sticky;
  top: 64px;
  height: calc(100vh - 90px);
  overflow-y: auto;
}

@media (max-width: 991.98px) {
  aside {
    display: none;
  }

  main {
    max-width: 100%;
  }
}
/* =====================
  メイン
===================== */
.content-area {
  flex: 1;
  display: flex;
  justify-content: center;
}

main {
  max-width: 960px;
  width: 100%;
  margin: 0 1rem 0;
}

/* =====================
  Back to top
===================== */
#backToTop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: none;
  z-index: 1050;
}

/* =====================
  section
===================== */
section {
  padding: 0 1rem;
}
section:not(:first-child) {
  margin-top: 8rem;
}

/* =====================
  ★section内コンテナクエリ
===================== */
.cq-container {
  container-type: inline-size;
  width: 100%; /* 親の最大幅に合わせて伸縮するように設定 */
}

/* -----------------------------------------
 * 【PC・大画面時】共通グリッド設定
 * ----------------------------------------- */
.cq-grid-dynamic {
  display: grid;
  /* デフォルトは2列（半分ずつ）。HTML側で指定があればその比率（1fr 3frなど）になる */
  grid-template-columns: var(--grid-ratio, repeat(2, 1fr));
  gap: 1.5rem;
}

.text-block {
  display: flex;
  flex-direction: column;
  min-width: 0; /* Grid内での要素の突っ張り・はみ出しを防ぐ */
}

/* ２列の時：テキストを右下にする */
.cq-align-bottom-right {
  margin-top: auto; /* 下に */
  margin-bottom: 0;
  align-self: flex-end; /* 右寄せ */
  text-align: right; /* 文字自体も右寄せにする */
}

.image-block {
  display: flex;
  align-items: flex-start; /* 横並びの時は、下への間延びを防ぐために上揃え */
}

.image-card__wrapper {
  width: 100%;
  box-sizing: border-box; /* ★枠線や余白の計算を狂わせないために追加 */
}

/* 画像が枠線いっぱいに広がるように強制する */
.image-card__wrapper img {
  display: block; /* 下の隙間を消す */
  width: 100%; /* 枠の横幅いっぱいに広げる */
  height: auto; /* 比率を保つ */
  object-fit: cover; /* 画像が歪むのを防ぐ */
}

/* ==========================================================================
   ネスト（入れ子）用のカードグリッド基盤（大画面時）
   ========================================================================== */
.cq-sub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 通常は3列 */
  gap: 4px;
  max-width: var(--max-w-3, 100%);
  margin-inline: auto;
}

/* 枚数制御：2枚・4枚の時は2列にし、かつ「左寄せ」にする */
.cq-sub-grid:has(> .cq-sub-card:nth-last-child(2):first-child),
.cq-sub-grid:has(> .cq-sub-card:nth-last-child(4):first-child) {
  grid-template-columns: repeat(2, 1fr) !important;
  /* 3枚の時と1枚あたりの幅を完全に合わせるため、コンテナ自体の最大幅を「2枚分」に絞る */
  width: calc(((100% - (4px * 2)) / 3) * 2 + 4px);
  /* 中央寄せを解除して「左寄せ」にする */
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* 子要素がちょうど2つの時だけ、3枚目の代わりに透明な要素を作る */
.cq-sub-grid:has(> .cq-sub-card:nth-child(2):last-child)::after {
  content: "";
  visibility: hidden; /* カードと同じサイズを確保するが、中身は見えない */
  grid-column: 3; /* 3列目に配置する */
}

.cq-sub-card {
  background-color: var(--rgba-white, #fff);
  box-shadow: var(--shadow-panel, 0 2px 4px rgba(0, 0, 0, 0.1));
  padding: 20px 0.75rem;
  border-radius: 8px;
}

/* ==========================================================================
   【新ロジック】子カードが「先に」縦並びになる設定
   ========================================================================== */

/* 外側のコンテナ幅が「680px以下」になった時（画像が縦落ちする前の段階） */
@container (max-width: 680px) {
  /* ① 通常（3枚の時など）のカードを1列にする */
  .cq-sub-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* ② 2枚・4枚の時の「強力なセレクタ」を上書きし、幅も位置もすべて初期化する */
  .cq-sub-grid:has(> .cq-sub-card:nth-last-child(2):first-child),
  .cq-sub-grid:has(> .cq-sub-card:nth-last-child(4):first-child) {
    grid-template-columns: 1fr !important; /* 1列にする */
    width: 100% !important; /* 特殊なcalc幅を解除 */
    max-width: 100% !important;
    /* この段階ではまだ「左寄せ」を維持して、全体のレイアウトに合わせる */
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /* ③ 2枚の時、各カードや疑似要素にかかっている「横並び用の位置指定」を完全に解除する */
  .cq-sub-grid:has(> .cq-sub-card:nth-last-child(2):first-child) > .cq-sub-card,
  .cq-sub-grid:has(> .cq-sub-card:nth-last-child(2):first-child)::after {
    grid-column: auto !important; /* 2列目・3列目への固定を解除 */
  }

  /* 2枚の時のダミー要素を縦並び時は完全に消去 */
  .cq-sub-grid:has(> .cq-sub-card:nth-child(2):last-child)::after {
    display: none !important;
  }
}

/* -----------------------------------------
 * 【変更】コンテナ幅が狭くなり、全体が1列になったとき max-width: 500px
 * ----------------------------------------- */
@container (max-width: 500px) {
  .cq-grid-dynamic {
    grid-template-columns: 1fr; /* 1列にする */
  }

  /* .mw-640がある場合は、ここではまだ2列（設定された比率）を維持 */
  .mw-640 .cq-grid-dynamic {
    grid-template-columns: var(--grid-ratio, repeat(2, 1fr));
  }

  /* 画像が上で、テキストが下の場合 */
  .cq-grid-dynamic.cq-order-reverse {
    display: flex;
    flex-direction: column-reverse;
  }

  /* --- 文章側の設定（中央揃え） --- */
  .text-block {
    display: block; /* 通常のブロック表示に戻す */
    width: 100%;
    max-width: 400px; /* 上の画像カードの max-width と同じ数値 */
    margin: 0 auto; /* 💡中央揃え */
    text-align: center; /* 💡文字も中央揃えにする（もし左が良い場合は left に） */
  }

  /* 1列の時は中央揃え */
  .text-block .cq-align-bottom-right {
    margin-inline: auto; /* 💡中央揃え */
    align-self: center; /* 💡中央揃え */
    text-align: center; /* 💡中央揃え */
    width: 100%;
    max-width: 400px;
  }

  /* 画像が上のときだけ、下の文章ブロックの幅を制限して中央に寄せる */
  .cq-grid-dynamic.cq-order-reverse .text-block {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto; /* 💡右寄せ用の 3rem から auto にして中央揃え */
  }

  /* 内側のカードグリッド全体も中央揃えにする */
  .cq-sub-grid:has(> .cq-sub-card:nth-last-child(2):first-child),
  .cq-sub-grid:has(> .cq-sub-card:nth-last-child(4):first-child) {
    margin-left: auto !important; /* 💡1列（500px以下）になったので中央寄せに切り替え */
    margin-right: auto !important; /* 💡1列（500px以下）になったので中央寄せに切り替え */
  }

  /* 💡文章内の文字の並びを中央揃えに追従させる */
  .cq-sub-card {
    text-align: center;
  }

  /* --- 画像側の一体化設定 --- */
  .image-block {
    display: block;
    align-items: stretch;
  }

  .image-card__wrapper {
    max-width: var(
      --image-max-w,
      400px
    ); /* HTML側でmw-240等の指定がない場合の保険（最大でも400px） */
    max-width: 400px;
    margin: 0 auto; /* 💡中央揃え */
    padding-bottom: 0;
  }
}

/* -----------------------------------------
 * 【従来通り】さらに狭いとき max-width: 420px
 * ----------------------------------------- */
@container (max-width: 420px) {
  /* .mw-640 が付いていても、ここまで狭くなったら最終的に1列にする */
  .mw-640 .cq-grid-dynamic {
    grid-template-columns: 1fr;
  }

  .mw-640 .image-card__wrapper,
  .mw-640 .text-block {
    max-width: 280px;
    margin-inline: auto;
    text-align: start;
    align-self: stretch;
  }
}