/*
 Theme Name:switch_tcd063_Child
  Template:switch_tcd063
  Version:1.0.0
  Description:TCD「Switch」用の子テーマ。改修はここで。
  Text Domain:switch_tcd063_Child
*/
/* ===== 共通セクション余白 ===== */
.section-pad {
  padding: min(6vw, 56px) min(5vw, 40px);
}

/* ヘッダー全体の背景色 */
#header {
  background-color: #F7F4ED !important;  /* ←好きな色コードに変更 */
  opacity: 1 !important;                 /* 透過を防ぐため */
}

/* ===== 背景色のルール ===== */
.bg-cream { background: #F7F4ED; }
.bg-light { background: #F2F4F7; }
.bg-deep  { background: #334D66; color:#fff; }
.bg-deep a { color:#fff; }

/* ===== カード（白背景＋角丸＋余白） ===== */
.card {
  background:#fff;
  border-radius:14px;
  padding: min(4vw,28px);
}

/* ===== ボタンの見た目（大きく・丸く） ===== */
.wp-block-button__link {
  border-radius: 999px;
  padding: .9em 1.4em;
  font-weight: 600;
}
/* ===== サイト全体の背景色をグレー基調に統一 ===== */
body {
  background-color: #F8F8F6;
}
/* 1) カード（白ボックスの統一） */
.section-box { background:#fff; border-radius:14px; padding:min(6vw,56px) min(5vw,40px); margin-bottom:min(6vw,56px); }

/* 2) 見出しのアクセント（細いライン） */
.heading-accent { position:relative; padding-bottom:.5em; }
.heading-accent::after { content:""; position:absolute; left:0; bottom:0; width:64px; height:3px; background:#334D66; border-radius:3px; }

/* 3) ボタン（やさしいアウトライン → ホバーで反転） */
.btn-brand-outline { background:#fff; color:#334D66; border:2px solid #334D66; padding:.9em 1.4em; border-radius:999px; font-weight:600; transition:.25s; }
.btn-brand-outline:hover { background:#334D66; color:#fff; }

/* 4) セクションの区切りが欲しいとき（淡い帯） */
.bg-light { background:#ECEDEB; }  /* #F8F8F6と相性の良い薄グレー */

/* 5) トップのメニューを4カラムにしたい時（ラッパーに p-grid-4 を付与） */
.p-grid-4 { display:grid; grid-template-columns:1fr; gap:clamp(14px,2vw,22px); }
@media (min-width:640px){ .p-grid-4 { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .p-grid-4 { grid-template-columns:repeat(4,1fr); } }

/* 3→4カラム。SP1列 / タブレット2列 / PC4列 */
.p-index-content03.p-cb__item.l-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 24px);
}
@media (min-width: 768px){
  .p-index-content03.p-cb__item.l-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px){
  .p-index-content03.p-cb__item.l-inner { grid-template-columns: repeat(4, 1fr); }
}

/* 既存テーマの margin 指定が邪魔なら上書き */
.p-index-content03 .p-index-content03__item { margin: 0 !important; }

/* 画像のトリミングをそろえる（任意） */
.p-index-content03 .p-article08__img img {
  width: 100%;
  height: clamp(200px, 22vw, 260px);
  object-fit: cover;
  display: block;
}
/* ===== TOP 3→4カラムのレイアウト修正 ===== */

/* グリッド本体（SP1列 / TB2列 / PC4列） */
.p-index-content03.p-cb__item.l-inner{
  display:grid;
  grid-template-columns:repeat(1,minmax(0,1fr));
  gap:clamp(16px,2vw,24px);
}

/* 旧3カラム用の float / width を打ち消す */
.p-index-content03 .p-index-content03__item{
  float:none !important;
  width:auto !important;
  margin:0 !important;
}

/* カード化（背景/角丸/高さ揃え） */
.p-index-content03 .p-article08{
  display:flex;
  flex-direction:column;
  height:100%;
  background:#e7eef7;          /* 既存の淡ブルーに合わせる。白にしたければ #fff */
  border-radius:14px;
  overflow:hidden;
}

/* サムネの見え方を統一 */
.p-index-content03 .p-article08__img img{
  width:100%;
  height:clamp(200px,22vw,260px);
  object-fit:cover;
  display:block;
}

/* 本文エリア */
.p-index-content03 .p-article08__content{
  padding:clamp(16px,2.2vw,28px);
}

/* 文字が縦に並ぶのを防ぐ（幅が極端に狭いと1文字折返しになるため） */
.p-index-content03 .p-article08__desc{
  line-height:1.9;
  word-break:normal;
  overflow-wrap:anywhere; /* 長い英単語対策 */
}

/* 見出し・ボタン（お好みで） */
.p-index-content03 .p-article08__title{ 
  color:#334D66; font-weight:700;
}
.p-index-content03 .p-article08__btn a{
  display:inline-block; margin-top:.8em;
  background:#334D66; color:#fff;
  padding:.8em 1.2em; border-radius:999px; font-weight:600;
}

/* ブレークポイント */
@media (min-width:768px){
  .p-index-content03.p-cb__item.l-inner{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (min-width:1024px){
  .p-index-content03.p-cb__item.l-inner{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}
/* ===== 4カラムカード：ボタンを最下部に揃える ===== */

/* グリッドの各アイテムを等高さに（保険） */
.p-index-content03 .p-index-content03__item{ display:flex; }
.p-index-content03 .p-article08{ flex:1; }

/* 本文エリアを縦並びのフレックスにして、ボタンを下へ押す */
.p-index-content03 .p-article08__content{
  display:flex;
  flex-direction:column;
  gap:.8em;           /* 行間。お好みで */
  height:100%;
}

/* ボタン行を最下部へ */
.p-index-content03 .p-article08__btn{
  margin-top:auto;    /* これが “下寄せ” の決め手 */
  text-align:center;  /* 中央寄せ（任意） */
}

/* ボタン幅・見た目を揃える（任意） */
.p-index-content03 .p-article08__btn .p-btn{
  display:inline-block;
  min-width:9em;      /* 幅をある程度そろえる */
  border-radius:999px;
  font-weight:600;
}
/* ====== 4カラムカード 最終調整 ====== */

/* グリッド本体（SP1列 / TB2列 / PC4列）※そのまま */
.p-index-content03.p-cb__item.l-inner{
  display:grid;
  grid-template-columns:repeat(1,minmax(0,1fr));
  gap:clamp(16px,2vw,24px);
}
@media (min-width:768px){
  .p-index-content03.p-cb__item.l-inner{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1024px){
  .p-index-content03.p-cb__item.l-inner{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* 旧3カラムの float/width を無効化 */
.p-index-content03 .p-index-content03__item{
  float:none !important;
  width:auto !important;
  margin:0 !important;

  /* ← ここは block に戻す（前回の display:flex はやめる） */
  display:block !important;
}

/* カード本体を縦フレックスに（等高さ・ボタン下寄せはこっちで） */
.p-index-content03 .p-article08{
  display:flex;
  flex-direction:column;
  height:auto;
  background:#e7eef7;           /* お好みで #fff でもOK */
  border-radius:14px;
  overflow:hidden;
}

/* 画像：常に見えるように高さを適度に固定 */
.p-index-content03 .p-article08__img{ display:block; }
.p-index-content03 .p-article08__img img{
  width:100%;
  height:clamp(180px, 20vw, 240px); /* 大きすぎて押し出されないよう微調整 */
  object-fit:cover;
  display:block;
}

/* 本文エリア：等高さJS/旧CSSの高さ指定を打ち消す */
.p-index-content03 .p-article08__content{
  padding:clamp(16px,2.2vw,28px);
  display:flex;
  flex-direction:column;
  gap:.8em;

  height:auto !important;
  min-height:unset !important;  /* 旧equal-height対策 */
}

/* ボタンは最下部へ */
.p-index-content03 .p-article08__btn{
  margin-top:auto;
  text-align:center;
}
.p-index-content03 .p-article08__btn .p-btn{
  display:inline-block;
  min-width:9em;
  border-radius:999px;
  font-weight:600;
}

/* テキストの折返し改善 */
.p-index-content03 .p-article08__desc{
  line-height:1.9;
  word-break:normal;
  overflow-wrap:anywhere;
}

/* 見出しの色だけ整える（任意） */
.p-index-content03 .p-article08__title{ color:#334D66; font-weight:700; }
/* ===== 4カラムカード高さ＆ボタン揃え ===== */

/* グリッド本体：子要素を stretch で同じ高さに */
.p-index-content03.p-cb__item.l-inner{
  display:grid;
  grid-template-columns:repeat(1,minmax(0,1fr));
  gap:clamp(16px,2vw,24px);
  align-items:stretch;   /* ←高さを揃えるポイント */
}
@media (min-width:768px){
  .p-index-content03.p-cb__item.l-inner{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1024px){
  .p-index-content03.p-cb__item.l-inner{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* 各カードをflexコンテナに */
.p-index-content03 .p-index-content03__item{
  display:flex !important;
  margin:0 !important;
}

/* カード本体：縦flexで中身を分配 */
.p-index-content03 .p-article08{
  display:flex;
  flex-direction:column;
  flex:1;               /* ←高さを均等にする */
  background:#e7eef7;
  border-radius:14px;
  overflow:hidden;
}

/* 画像部分 */
.p-index-content03 .p-article08__img img{
  width:100%;
  height:clamp(180px,20vw,240px);
  object-fit:cover;
  display:block;
}

/* 本文エリア：flexで中身を縦配置 */
.p-index-content03 .p-article08__content{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:clamp(16px,2.2vw,28px);
  gap:.8em;
}

/* ボタンは常に最下部に */
.p-index-content03 .p-article08__btn{
  margin-top:auto;
  text-align:center;
}
.p-index-content03 .p-article08__btn .p-btn{
  display:inline-block;
  min-width:9em;
  border-radius:999px;
  font-weight:600;
}
/* ボタン文字を縦横中央に */
.p-index-content03 .p-article08__btn .p-btn{
  display:flex;                 /* ← inline-block から flex に */
  align-items:center;           /* 縦中央 */
  justify-content:center;       /* 横中央 */
  min-width:9em;
  padding:.8em 1.2em;           /* 縦横の余白 */
  border-radius:999px;
  font-weight:600;
  line-height:1.2;              /* 行の高さを少し詰める */
}