/* =========================================================
 * components.css（整頓版・全文）
 * 役割：再利用する UI 部品（クラス付き）
 *
 * ここに入れる：
 * - カード / ボタン / 特殊リスト / TOC / テーブル装飾
 * - 「このクラスが付いたらこう見える」という部品定義
 *
 * ここに入れない：
 * - ページ骨格（幅・余白・ヒーロー）→ layout.css
 * - 本文（h2 / p / ul / ol の基本）→ common.css
 * ======================================================= */


/* =========================================================
   1. TOC（右サブメニュー）
   - 本文リスト復活の影響を受けないように明示的に無効化
========================================================= */
.tch-toc ul,
.tch-toc ol{
  list-style: none;
  margin: 0;
  padding: 0;
}

.tch-toc li{
  margin: 0;
  line-height: inherit;
}


/* =========================================================
   2. PDF サムネイル枠線
========================================================= */
.tch-pdf-wrapper.has-border > a > img{
  border: 1px solid var(--c-navy, #1e3a5f) !important;
  box-sizing: border-box;
}

.tch-pdf-wrapper.has-border.border-2 > a > img{
  border-width: 2px !important;
}


/* =========================================================
   3. テーブル（共通パーツ）
========================================================= */
/* thead 見出し中央寄せ */
table thead th{
  text-align: center;
}

/* 募集・実施要項テーブル */
.wp-block-table.tch-guidelines-table td:first-child{
  vertical-align: middle;
  white-space: nowrap;
  font-weight: var(--fw-medium);
  text-align: center;
}

.tch-guidelines-table .wp-block-table th{
  vertical-align: middle;
  white-space: nowrap;
  font-weight: var(--fw-medium);
  text-align: center;
}


/* =========================================================
   4. カラム内テキスト補正
========================================================= */
.wp-block-column > p{
  margin: 0 0 1.2em;
}

.wp-block-column > p:last-child{
  margin-bottom: 0;
}


/* =========================================================
   5. 明示的マーカー付きリスト
   - HTML 側で class を付けた場合のみ適用
========================================================= */
.list-with-marker{
  list-style-type: disc;
  padding-left: 1.6em;
  margin: 0.5em 0;
}

.list-with-marker > li{
  list-style-type: disc;
  margin-left: 0;
}

/* 子リスト（◦） */
.list-with-marker ul{
  list-style-type: circle;
  padding-left: 1.6em;
  margin-top: 0.3em;
}

.list-with-marker ul > li{
  list-style-type: circle;
  margin-left: 0;
}


/* =========================================================
   6. 子ページリンクカード（2列）
========================================================= */
.child-page-links{
  max-width: 980px;
  margin: 22px auto 0;
  padding: 0 var(--gutter, 16px);
  box-sizing: border-box;
}

.child-page-links__list{
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
}

.child-page-links__item{
  margin: 0;
}

/* カード本体 */
.child-page-links__link{
  background: #004b8d;
  color: #fff;
  border: none;
  border-radius: 10px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  padding: 18px 20px;
  text-decoration: none;
  box-sizing: border-box;

  min-height: 78px;
}

/* 左側テキスト */
.child-page-links__title{
  flex: 1;
  min-width: 0;
  display: block;
  font-weight: var(--fw-semi);
  line-height: 1.5;
}

.child-page-links__desc{
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,.85);
}

/* 右端の矢印 */
.child-page-links__link::after{
  content: "→";
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;

  background: #fff;
  color: #004b8d;
  border-radius: 50%;

  font-size: 14px;
  line-height: 1;
  flex: 0 0 auto;
}

/* hover / focus */
.child-page-links__link:hover{
  background: #005fae;
}

.child-page-links__link:hover::after{
  transform: translateX(2px);
  transition: transform .15s ease;
}

.child-page-links__link:focus-visible{
  outline: 3px solid rgba(255,255,255,.7);
  outline-offset: 2px;
}

/* SP */
@media (max-width: 768px){
  .child-page-links__list{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .child-page-links__link{
    padding: 16px 18px;
    min-height: 0;
  }
}


/* =========================================================
   7. 電話番号ボタン
========================================================= */
.tel-box{
  margin: 0;
}

.tel-box a{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  font-size: 32px;
  font-weight: var(--fw-bold);
  color: #fff;
  background-color: #2fa24f;
  padding: 12px 22px;
  border-radius: 10px;
  line-height: 1.2;
  letter-spacing: 0.02em;

  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease;
}

/* 電話アイコン（SVG mask） */
.tel-box a::before{
  content: "";
  width: 1.5em;
  height: 2em;
  background-color: #fff;
  margin-top: 5px;

  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 011 1V20a1 1 0 01-1 1C10.07 21 3 13.93 3 5a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.46.57 3.59a1 1 0 01-.25 1.01l-2.2 2.19z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 011 1V20a1 1 0 01-1 1C10.07 21 3 13.93 3 5a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.46.57 3.59a1 1 0 01-.25 1.01l-2.2 2.19z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.tel-box a:hover{
  background-color: #37b85a;
}

.tel-box a:focus-visible{
  outline: 3px solid rgba(255,255,255,.65);
  outline-offset: 3px;
}

@media (max-width: 480px){
  .tel-box a{
    font-size: 24px;
    padding: 10px 16px;
  }
}


/* =========================================================
   8. グループブロック用パディング
========================================================= */
.tch-group-padding{
  padding: 5px 45px;
  border-radius: 20px;
  width: 80%;
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;
}


/* =========================================================
   9. 画像キャプション（ブロックエディタ）
========================================================= */
.wp-block-image figcaption{
  text-align: center;
}

/* =========================================================
   Gutenberg Button：outline スタイル
   - ボタン表示時は下線を出さない
========================================================= */
.wp-block-button.is-style-outline .wp-block-button__link{
  text-decoration: none;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover{
  text-decoration: none;
}

