/*
Theme Name: ZOOMY Child
Template: zoomy_tcd067
Version: 1.0.0
*/

/* =========================================================
  t-photo schedule page UI（整理版）
  - ボタン文字色：#000
  - 表文字：15px
========================================================= */

/* Hero */
.tp-schedule-hero{
  padding:28px 22px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  background:rgba(0,0,0,.02);
}
.tp-schedule-title{margin:0 0 10px;font-size:22px;line-height:1.35;letter-spacing:.02em;}
.tp-schedule-lead{margin:0 0 8px;font-size:15px;line-height:1.8;opacity:.92;}
.tp-schedule-note{margin:0 0 16px;font-size:13px;line-height:1.7;opacity:.78;}

/* Buttons layout */
.tp-schedule-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

/* schedule内だけに効くボタン（アーカイブの.tp-btnと衝突させない） */
.tp-schedule-hero .tp-btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:54px;
  padding:12px 18px;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  font-size:16px;
  letter-spacing:.02em;
  border:1px solid rgba(0,0,0,.16);
  color:#000;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.tp-schedule-hero .tp-btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(0,0,0,.08);opacity:.98;}
.tp-schedule-hero .tp-btn-primary{background:rgba(80,190,160,.14);}
.tp-schedule-hero .tp-btn-secondary{background:rgba(150,160,255,.14);}

/* Next bar */
.tp-nextbar{
  margin:18px 0;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.75);
  display:flex;
  gap:10px;
  align-items:center;
}
.tp-nextbar-label{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.06);
  font-weight:900;
  font-size:12px;
}
.tp-nextbar-text{font-weight:800;letter-spacing:.02em;}

.tp-section-title{margin:22px 0 12px;font-size:16px;letter-spacing:.02em;}
.tp-legend{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 12px;}

/* Table */
.tp-tablewrap{
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
}
.tp-schedule-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:15px;
}
.tp-schedule-table thead th{
  text-align:left;
  padding:14px;
  background:rgba(0,0,0,.04);
  border-bottom:1px solid rgba(0,0,0,.10);
  font-weight:900;
}
.tp-schedule-table tbody td{
  padding:14px;
  border-bottom:1px solid rgba(0,0,0,.08);
  vertical-align:middle;
}
.tp-schedule-table tbody tr:last-child td{border-bottom:none;}
.tp-schedule-table tbody tr:hover{background:rgba(0,0,0,.02);}

/* schedule内だけのバッジ（アーカイブと衝突させない） */
.tp-schedule-table .tp-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  margin-right:8px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(0,0,0,.03);
}
.tp-schedule-table .tp-badge-online{background:rgba(80,190,160,.14);}
.tp-schedule-table .tp-badge-field{background:rgba(150,160,255,.14);}
.tp-schedule-table .tp-badge-event{background:rgba(255,190,110,.18);}
.tp-schedule-table .tp-badge-exhibit{background:rgba(120,120,220,.14);}

.tp-schedule-footnote{margin:12px 0 0;font-size:13px;line-height:1.7;opacity:.78;}

/* SP：table -> cards（カテゴリ色＋左アクセント込み） */
@media (max-width:680px){
  .tp-schedule-actions{grid-template-columns:1fr;}
  .tp-schedule-hero .tp-btn{min-height:56px;padding:13px 18px;font-size:16px;color:#000;}

  .tp-schedule-table thead{display:none;}
  .tp-schedule-table,
  .tp-schedule-table tbody,
  .tp-schedule-table tr,
  .tp-schedule-table td{display:block;width:100%;}

  .tp-schedule-table tbody tr{
    margin:0 0 12px;
    border:1px solid rgba(0,0,0,.10);
    border-radius:16px;
    box-shadow:0 6px 16px rgba(0,0,0,.06);
    position:relative;
    padding:12px 14px 12px 16px;
  }
  .tp-schedule-table tbody td{padding:8px 0;border-bottom:none;}
  .tp-schedule-table tbody td::before{
    content:attr(data-label);
    display:block;
    font-size:12px;
    font-weight:900;
    opacity:.65;
    margin-bottom:4px;
  }

  /* カテゴリ別 背景＋左アクセント */
  .tp-schedule-table tbody tr::before{
    content:"";
    position:absolute;left:0;top:12px;bottom:12px;width:6px;
    border-radius:999px;background:rgba(0,0,0,.18);
  }
  .tp-schedule-table tbody tr.tp-card-online{background:rgba(80,190,160,.10);}
  .tp-schedule-table tbody tr.tp-card-online::before{background:rgba(80,190,160,.60);}
  .tp-schedule-table tbody tr.tp-card-field{background:rgba(150,160,255,.10);}
  .tp-schedule-table tbody tr.tp-card-field::before{background:rgba(150,160,255,.60);}
  .tp-schedule-table tbody tr.tp-card-event{background:rgba(255,190,110,.12);}
  .tp-schedule-table tbody tr.tp-card-event::before{background:rgba(255,190,110,.70);}
  .tp-schedule-table tbody tr.tp-card-exhibit{background:rgba(120,120,220,.10);}
  .tp-schedule-table tbody tr.tp-card-exhibit::before{background:rgba(120,120,220,.60);}
}

/* =========================================
   t-photoクラブ｜セミナーアーカイブ（tp-archive）
   - ボタン文字はみ出し再発防止（統合済み）
========================================= */

#tp-archive{
  --tp-gap: 16px;
  --tp-radius: 14px;
  --tp-border: rgba(0,0,0,.12);
  --tp-muted: rgba(0,0,0,.62);
  --tp-bg: #fff;
  --tp-bg-soft: rgba(0,0,0,.04);

  max-width: 1100px;
  margin: 0 auto;
  padding: 0 12px;
}
#tp-archive, #tp-archive *{ box-sizing: border-box; }

/* Hero / 検索バー */
#tp-archive .tp-archive-hero{
  padding: 22px 16px 16px;
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  background: var(--tp-bg);
}
#tp-archive .tp-archive-h1{ margin: 0 0 6px; font-size: 1.55rem; line-height: 1.25; }
#tp-archive .tp-archive-lead{ margin: 0 0 14px; color: var(--tp-muted); }

#tp-archive .tp-archive-topbar{
  display: grid;
  grid-template-columns: 1fr 160px 200px auto;
  gap: 12px;
  align-items: end;
}
#tp-archive .tp-field{ display: grid; gap: 6px; min-width: 0; }
#tp-archive .tp-label{ font-size: .85rem; color: var(--tp-muted); }
#tp-archive .tp-input,
#tp-archive .tp-select{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--tp-border);
  border-radius: 12px;
  background: #fff;
  font-size: 1rem;
}
#tp-archive .tp-field-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

/* ボタン（アーカイブ専用：はみ出し再発防止版） */
#tp-archive .tp-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  padding: 12px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;

  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;

  white-space: nowrap;      /* PCは原則1行 */
  overflow: hidden;         /* はみ出し防止 */
  text-overflow: ellipsis;  /* 長い場合は省略 */
}
#tp-archive .tp-btn-primary{ background: #111; color: #fff; }
#tp-archive .tp-btn-ghost{ background: #fff; border-color: var(--tp-border); color: #111; }
#tp-archive .tp-btn:hover{ filter: brightness(.98); }
#tp-archive .tp-btn:active{ transform: translateY(1px); }

#tp-archive .tp-archive-status{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--tp-border);
  color: var(--tp-muted);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: baseline;
}

/* タイトル一覧 */
#tp-archive .tp-titlelist-wrap{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--tp-border);
}
#tp-archive .tp-titlelist{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-height: 240px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--tp-border);
  border-radius: 14px;
  background: rgba(0,0,0,.03);
}
#tp-archive .tp-titlelink{
  width: 100%;
  text-align: left;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid var(--tp-border);
  background: #fff;
  cursor: pointer;
  line-height: 1.35;
}
#tp-archive .tp-titlelink:hover{ background: rgba(0,0,0,.03); }

/* 2カラムレイアウト */
#tp-archive .tp-archive-layout{
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--tp-gap);
  margin-top: var(--tp-gap);
}
#tp-archive .tp-archive-sidebox{
  position: sticky;
  top: 18px;
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  background: var(--tp-bg);
  padding: 16px;
}
#tp-archive .tp-archive-yearnav{ display: grid; gap: 8px; }
#tp-archive .tp-yearlink{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--tp-border);
  text-decoration: none;
  color: #111;
  background: #fff;
}
#tp-archive .tp-yearlink:hover{ background: var(--tp-bg-soft); }

#tp-archive .tp-archive-main{ display: grid; gap: 18px; }

/* 年別ブロック */
#tp-archive .tp-archive-year{
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  background: var(--tp-bg);
  padding: 16px;
  margin-top: 14px;
}
#tp-archive .tp-archive-yearhead{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--tp-border);
  margin-bottom: 12px;
}

/* グリッド */
#tp-archive .tp-archive-latest-grid,
#tp-archive .tp-archive-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

/* カード */
#tp-archive .tp-archive-item{
  border: 1px solid var(--tp-border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
}
#tp-archive .tp-archive-thumb{
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  aspect-ratio: 16 / 9;
  display: block;
}
#tp-archive .tp-archive-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#tp-archive .tp-archive-play{
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-size: 1.1rem;
}

#tp-archive .tp-archive-body{ padding: 12px 12px 14px; display: grid; gap: 8px; min-width: 0; }
#tp-archive .tp-archive-meta{ display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }
#tp-archive .tp-archive-title{ margin: 0; font-size: 1.02rem; line-height: 1.35; }

#tp-archive .tp-archive-tags{ display: flex; flex-wrap: wrap; gap: 6px; }
#tp-archive .tp-badge{
  font-size: .8rem;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--tp-border);
  background: var(--tp-bg-soft);
  color: #111;
}

/* CTA */
#tp-archive .tp-archive-cta{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 10px;
}
#tp-archive .tp-archive-cta .tp-btn{ width: 100%; min-width: 0; }

/* 980px以下：検索バー縦積み */
@media (max-width: 980px){
  #tp-archive .tp-archive-topbar{
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  #tp-archive .tp-field-actions{ justify-content: stretch; }
}

/* 920px以下：2カラムでもボタン改行を許可（はみ出し再発防止） */
@media (max-width: 920px){
  #tp-archive .tp-btn{
    white-space: normal;
    line-height: 1.25;
    text-overflow: clip;
  }
}

/* 768px以下：年別ジャンプ1カラム */
@media (max-width: 768px){
  #tp-archive{ padding: 0 10px; }
  #tp-archive .tp-archive-layout{ grid-template-columns: 1fr; }
  #tp-archive .tp-archive-sidebox{ position: static; }
  #tp-archive .tp-titlelist{
    grid-template-columns: 1fr;
    max-height: 280px;
  }
}

/* 680px以下：カード1列、CTA縦積み */
@media (max-width: 680px){
  #tp-archive .tp-archive-latest-grid,
  #tp-archive .tp-archive-grid{ grid-template-columns: 1fr; }
  #tp-archive .tp-archive-cta{ grid-template-columns: 1fr; }
  #tp-archive .tp-btn{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.3;
  }
}

/* =========================================================
  t-photoクラブ｜月例アーカイブ（tp-monthly-archive）
  - 上品トーン
========================================================= */

.tp-monthly-archive{
  max-width: 1040px;
  margin: 0 auto;
  padding: 16px;
}
.tp-monthly-archive,
.tp-monthly-archive *{ box-sizing: border-box; }

.tp-monthly-archive [id]{ scroll-margin-top: 90px; }

/* Hero */
.tp-monthly-hero{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  background: rgba(0,0,0,.02);
}
.tp-monthly-hero__inner{ padding: 18px 18px 16px; }

.tp-monthly-kicker{
  margin: 0 0 6px;
  font-size: 13px;
  opacity: .78;
  letter-spacing: .02em;
}
.tp-monthly-title{
  margin: 0 0 10px;
  font-size: 24px;
  line-height: 1.35;
}
.tp-monthly-points{ margin: 0; padding-left: 1.2em; }

/* Jump buttons */
.tp-monthly-jump{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.tp-monthly-jump__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0;
  color: #111;
  background: #fff;
}
.tp-monthly-jump__btn--primary{
  border-color: rgba(0,0,0,.18);
  background: rgba(0,0,0,.03);
}

/* Section */
.tp-monthly-section{ margin-top: 22px; }
.tp-monthly-h3{ margin: 0 0 12px; font-size: 20px; }

/* Video cards grid */
.tp-monthly-grid2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.tp-monthly-card{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 14px;
  background: #fff;
}
.tp-monthly-card__head{ margin-bottom: 10px; }
.tp-monthly-meta{ margin: 0 0 6px; font-size: 13px; opacity: .75; }
.tp-monthly-h4{ margin: 0; font-size: 18px; line-height: 1.4; }

/* Embed */
.tp-monthly-archive .tp-embed{
  border-radius: 16px;
  overflow: hidden;
  background: rgba(0,0,0,.05);
}
.tp-monthly-archive .tp-embed iframe{
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}

/* Buttons */
.tp-monthly-archive .tp-monthly-actions{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 12px;
  margin: 12px 0 10px;
}
.tp-monthly-archive .tp-btn{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 54px;
  padding: 12px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.14);
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0;
  color: #111;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tp-monthly-archive .tp-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  filter: brightness(.99);
}
.tp-monthly-archive .tp-btn:active{ transform: translateY(0px); }
.tp-monthly-archive .tp-btn:focus-visible{
  outline: 2px solid rgba(0,0,0,.35);
  outline-offset: 3px;
}
.tp-monthly-archive .tp-btn--primary{
  background: #111;
  color: #fff;
  border-color: #111;
}

/* Mini bullets / notes */
.tp-monthly-mini{ margin: 12px 0 8px; padding-left: 1.2em; font-size: 14px; }
.tp-monthly-note{ margin: 0; font-size: 14px; opacity: .9; }
.tp-monthly-bottomlink{ margin-top: 10px; }
.tp-monthly-archive .tp-textlink{
  text-decoration: none;
  font-weight: 800;
  color: #111;
}

/* Results blocks */
.tp-results-block{
  margin-top: 16px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 14px;
  background: #fff;
}
.tp-results-head{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.tp-results-sub{ margin: 0; font-size: 13px; opacity: .75; }

/* Awards 3 grid */
.tp-awards3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.tp-award{
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 16px;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.015);
  min-width: 0;
  color: #111;
}

/* 受賞カード内（ベース） */
.tp-award__badge{ letter-spacing: 0; }
.tp-award__pt{ font-size: 13px; opacity: .85; }
.tp-award__name{ font-size: 13px; opacity: .88; }
.tp-award__title{
  font-size: 16px;
  line-height: 1.35;
  word-break: break-word;
}
.tp-award__cta{ font-size: 13px; opacity: .85; }

/* 背景色：明るめ＆上品 */
.tp-award--gold{ background: rgba(255, 215, 0, .055); }
.tp-award--silver{ background: rgba(120, 120, 120, .045); }
.tp-award--bronze{ background: rgba(205, 127, 50, .060); }

/* Mini awards list（おしい！賞） */
.tp-mini-list{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tp-mini{
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  text-decoration: none;
  background: rgba(0,0,0,.008);
  min-width: 0;
  color: #111;
}
.tp-mini__name{ font-size: 13px; opacity: .88; }
.tp-mini__title{
  font-size: 15px;
  line-height: 1.35;
  word-break: break-word;
}
.tp-mini__cta{ font-size: 13px; opacity: .85; }

/* Footer nav（レイアウトのみ） */
.tp-monthly-footer{
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

/* Responsive */
@media (max-width: 820px){
  .tp-monthly-archive{ padding: 12px; }
  .tp-monthly-title{ font-size: 22px; }
  .tp-monthly-grid2{ grid-template-columns: 1fr; }
  .tp-awards3{ grid-template-columns: 1fr; }
  .tp-mini-list{ grid-template-columns: 1fr; }
  .tp-monthly-footer{ grid-template-columns: 1fr; }
}

/* ボタンは狭い端末で縦積み＋改行許可 */
@media (max-width: 680px){
  .tp-monthly-archive .tp-monthly-actions{ grid-template-columns: 1fr; }
  .tp-monthly-archive .tp-btn{
    white-space: normal;
    line-height: 1.3;
    text-overflow: clip;
  }
}

/* =========================================================
   最終上書き（テーマ側の太字癖を確実に抑える）
   - 受賞カード / おしい賞
   - フッターナビ（前月 / 一覧へ / 翌月）
========================================================= */

/* カード全体のベースを軽く */
.tp-monthly-archive a.tp-award,
.tp-monthly-archive a.tp-mini{
  font-weight: 400;
}

/* 見出し系：600 */
.tp-monthly-archive .tp-award__badge{ font-weight: 600; }
.tp-monthly-archive .tp-award__title{ font-weight: 600; }
.tp-monthly-archive .tp-mini__title{  font-weight: 600; }

/* 補助情報：400 */
.tp-monthly-archive .tp-award__pt,
.tp-monthly-archive .tp-award__name,
.tp-monthly-archive .tp-mini__name{
  font-weight: 400;
}

/* CTA：500 */
.tp-monthly-archive .tp-award__cta,
.tp-monthly-archive .tp-mini__cta{
  font-weight: 500;
}

/* フッターナビ：枠線＋太さ600（復旧含む） */
.tp-monthly-archive .tp-footerlink{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  text-decoration: none;
  font-weight: 600;
  color: inherit;
}
/* =========================================================
  t-photoクラブ：はじめての方へ（オンボーディング）
  - 画像無しでも成立する設計
  - 既存テーマと干渉しにくいよう tp- 接頭辞で統一
========================================================= */

.tp-onboard{
  --tp-bg: rgba(0,0,0,.02);
  --tp-border: rgba(0,0,0,.10);
  --tp-border2: rgba(0,0,0,.08);
  --tp-text: rgba(0,0,0,.88);
  --tp-muted: rgba(0,0,0,.66);
  --tp-radius: 18px;
  --tp-radius2: 14px;
  --tp-shadow: 0 10px 30px rgba(0,0,0,.06);

  color: var(--tp-text);
}

.tp-container{
  width: min(1040px, 100%);
  margin: 0 auto;
  padding: 28px 18px 48px;
}

/* Hero */
.tp-onboard-hero{
  padding: 34px 18px 26px;
  background: var(--tp-bg);
  border: 1px solid var(--tp-border2);
  border-radius: var(--tp-radius);
  box-shadow: var(--tp-shadow);
}

.tp-onboard-hero__inner{
  width: min(1040px, 100%);
  margin: 0 auto;
}

.tp-eyebrow{
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tp-muted);
}

.tp-onboard-title{
  margin: 0 0 12px;
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: .02em;
}

.tp-onboard-lead{
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--tp-text);
}

/* Optional hero media */
.tp-onboard-hero__media{
  margin: 18px 0 0;
  border-radius: var(--tp-radius);
  overflow: hidden;
  border: 1px solid var(--tp-border2);
  background: #fff;
}
.tp-onboard-hero__media img{
  display: block;
  width: 100%;
  height: auto;
}

/* Section titles */
.tp-section-title{
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: .02em;
}

.tp-section-lead{
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--tp-muted);
}

/* Quickstart */
.tp-quickstart{
  margin-top: 18px;
  padding: 18px 16px;
  border: 1px solid var(--tp-border2);
  border-radius: var(--tp-radius2);
  background: rgba(255,255,255,.72);
}

.tp-quickstart__head{
  margin-bottom: 12px;
}

.tp-checklist{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.tp-checklist li{
  padding: 12px 12px;
  border: 1px solid var(--tp-border2);
  border-radius: 12px;
  background: rgba(255,255,255,.92);
}

.tp-checklist__label{
  display: block;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 2px;
}

.tp-checklist__desc{
  display: block;
  font-size: 13px;
  line-height: 1.7;
  color: var(--tp-muted);
}

/* Buttons */
.tp-actions{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tp-actions--videos{
  margin-top: 10px;
}

.tp-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid transparent;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: transform .06s ease, opacity .18s ease, background .18s ease, border-color .18s ease;
}

.tp-btn:active{
  transform: translateY(1px);
}

.tp-btn-primary{
  background: #111;
  color: #fff;
  border-color: #111;
}

.tp-btn-secondary{
  background: #fff;
  color: #111;
  border-color: var(--tp-border);
}

.tp-btn-ghost{
  background: rgba(255,255,255,.0);
  color: #111;
  border-color: var(--tp-border);
}

.tp-btn-link{
  padding: 8px 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #111;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Steps */
.tp-steps-wrap{
  margin-top: 22px;
}

.tp-steps{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 12px;
}

.tp-step-card{
  padding: 16px 14px 14px;
  border: 1px solid var(--tp-border2);
  border-radius: var(--tp-radius2);
  background: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.04);
  height: 100%;
}

.tp-step-head{
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.tp-step-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--tp-border);
  background: rgba(0,0,0,.03);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
}

.tp-step-title{
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
}

.tp-step-text{
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--tp-text);
}

.tp-card-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.tp-mini-box{
  margin-top: 10px;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--tp-border2);
  background: rgba(0,0,0,.02);
}

.tp-mini-title{
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
}

.tp-mini-list{
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--tp-text);
}

.tp-mini-list--ol{
  padding-left: 20px;
}

.tp-fill{
  letter-spacing: .06em;
}

.tp-note{
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--tp-muted);
}

/* FAQ */
.tp-faq-wrap{
  margin-top: 22px;
  padding: 16px 14px;
  border: 1px solid var(--tp-border2);
  border-radius: var(--tp-radius2);
  background: rgba(0,0,0,.02);
}

.tp-faq{
  border: 1px solid var(--tp-border2);
  border-radius: 12px;
  background: #fff;
  padding: 0;
  margin: 10px 0 0;
  overflow: hidden;
}

.tp-faq summary{
  list-style: none;
  cursor: pointer;
  padding: 12px 12px;
  font-weight: 700;
  font-size: 14px;
}

.tp-faq summary::-webkit-details-marker{
  display: none;
}

.tp-faq__body{
  padding: 0 12px 12px;
  color: var(--tp-muted);
  font-size: 13px;
  line-height: 1.85;
}

/* Closing */
.tp-closing{
  margin-top: 22px;
  padding: 18px 16px;
  border: 1px solid var(--tp-border2);
  border-radius: var(--tp-radius2);
  background: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.04);
}

/* Responsive */
@media (max-width: 960px){
  .tp-steps{ grid-template-columns: repeat(2, 1fr); }
  .tp-onboard-title{ font-size: 24px; }
}

@media (max-width: 640px){
  .tp-container{ padding: 22px 14px 40px; }
  .tp-steps{ grid-template-columns: 1fr; }
  .tp-onboard-title{ font-size: 22px; }
  .tp-actions{ gap: 8px; }
  .tp-btn{ width: 100%; }
  .tp-btn-link{ width: auto; }
}
/* =========================================================
  t-photoクラブ：はじめての方へ（ボタン視認性改善）
  - 黒背景 × 青文字の解消
  - 白ボタンの背景同化の解消
========================================================= */

/* ボタン内リンク色をテーマの青から切り離す（visited/hoverも含む） */
.tp-onboard a.tp-btn,
.tp-onboard a.tp-btn:visited{
  color: inherit;
  text-decoration: none;
}

/* Primary：黒背景のときは白文字固定（青文字を防ぐ） */
.tp-onboard a.tp-btn.tp-btn-primary,
.tp-onboard a.tp-btn.tp-btn-primary:visited{
  background: #111;
  border-color: #111;
  color: #fff;
}

/* Secondary：白同化を防ぐため薄グレー背景＋やや濃い枠線 */
.tp-onboard a.tp-btn.tp-btn-secondary,
.tp-onboard a.tp-btn.tp-btn-secondary:visited{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.18);
  color: #111;
}

/* Ghost：背景をさらに薄く入れて「ボタン感」を出す */
.tp-onboard a.tp-btn.tp-btn-ghost,
.tp-onboard a.tp-btn.tp-btn-ghost:visited{
  background: rgba(0,0,0,.02);
  border-color: rgba(0,0,0,.18);
  color: #111;
}

/* Hover（軽く分かる程度） */
.tp-onboard a.tp-btn.tp-btn-primary:hover{
  opacity: .92;
}

.tp-onboard a.tp-btn.tp-btn-secondary:hover,
.tp-onboard a.tp-btn.tp-btn-ghost:hover{
  background: rgba(0,0,0,.06);
}

/* フォーカス可視化（アクセシビリティ） */
.tp-onboard a.tp-btn:focus-visible{
  outline: 2px solid rgba(0,0,0,.45);
  outline-offset: 2px;
}

/* ※リンク風ボタン（動画リンク）は従来通り */
.tp-onboard a.tp-btn.tp-btn-link,
.tp-onboard a.tp-btn.tp-btn-link:visited{
  color: #111;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: transparent;
  border: none;
}
/* =========================================================
  t-photoクラブ：ボタンを明るい配色へ（楽しさ・視認性）
========================================================= */

/* 共通：ボタン内リンク色をテーマの青から切り離す */
.tp-onboard a.tp-btn,
.tp-onboard a.tp-btn:visited{
  color: inherit;
  text-decoration: none;
}

/* 共通：ボタンを“明るく”見せるための土台 */
.tp-onboard .tp-btn{
  border-width: 1px;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}

/* Primary（推奨：いちばん押してほしい導線＝投稿）
   明るいブルー系でワクワク感＋信頼感 */
.tp-onboard a.tp-btn.tp-btn-primary,
.tp-onboard a.tp-btn.tp-btn-primary:visited{
  background: rgba(60, 130, 246, .16);    /* 明るいブルー */
  border-color: rgba(60, 130, 246, .38);
  color: #0b1b33;
}

/* Secondary（プロフィール＝やわらかいグリーンで歓迎感） */
.tp-onboard a.tp-btn.tp-btn-secondary,
.tp-onboard a.tp-btn.tp-btn-secondary:visited{
  background: rgba(52, 199, 89, .14);     /* 明るいグリーン */
  border-color: rgba(52, 199, 89, .35);
  color: #0b1b33;
}

/* Ghost（年間スケジュール／アーカイブ＝柔らかいラベンダー） */
.tp-onboard a.tp-btn.tp-btn-ghost,
.tp-onboard a.tp-btn.tp-btn-ghost:visited{
  background: rgba(152, 108, 255, .12);   /* 明るいパープル */
  border-color: rgba(152, 108, 255, .30);
  color: #0b1b33;
}

/* Hover：明るさを少しだけ上げて「押せそう」を強化 */
.tp-onboard a.tp-btn.tp-btn-primary:hover{
  background: rgba(60, 130, 246, .22);
  border-color: rgba(60, 130, 246, .48);
}
.tp-onboard a.tp-btn.tp-btn-secondary:hover{
  background: rgba(52, 199, 89, .20);
  border-color: rgba(52, 199, 89, .45);
}
.tp-onboard a.tp-btn.tp-btn-ghost:hover{
  background: rgba(152, 108, 255, .18);
  border-color: rgba(152, 108, 255, .40);
}

/* 押下 */
.tp-onboard a.tp-btn:active{
  transform: translateY(1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
}

/* フォーカス（キーボード操作時の視認性） */
.tp-onboard a.tp-btn:focus-visible{
  outline: 2px solid rgba(0,0,0,.35);
  outline-offset: 2px;
}

/* 動画リンク（リンクボタン）は従来の“リンク感”を維持 */
.tp-onboard a.tp-btn.tp-btn-link,
.tp-onboard a.tp-btn.tp-btn-link:visited{
  color: #0b1b33;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: transparent;
  border: none;
  box-shadow: none;
}
.single-post .l-secondary {
display:none;
}
.single-post .l-2columns .l-primary {
width:100%;
}
/* =========================================
   single-post：アイキャッチを比率維持で縮小（トリミングなし）
   - サイドバー非表示で本文幅が広がった分だけ巨大化するのを抑える
   ========================================= */

@media (min-width: 1024px) {

  /* アイキャッチ“ブロック”を最大幅で制限して中央寄せ */
  .single-post .l-primary :is(
    .p-entry__thumbnail,
    .p-entry__eyecatch,
    .p-article__eyecatch,
    .p-article__thumbnail,
    .post-thumbnail,
    .post_thumbnail,
    .eyecatch,
    .c-eyecatch
  ) {
    max-width: 500px;      /* ←ここを調整（例：860px / 1100px） */
    margin-left: auto;
    margin-right: auto;
  }

  /* 画像は横幅100%＋高さ自動＝比率維持で縮小 */
  .single-post .l-primary :is(
    .p-entry__thumbnail,
    .p-entry__eyecatch,
    .p-article__eyecatch,
    .p-article__thumbnail,
    .post-thumbnail,
    .post_thumbnail,
    .eyecatch,
    .c-eyecatch
  ) img {
    width: 100%;
    height: auto;
    display: block;
  }
}
/* =========================================================
  はじめての方へ：STEPカードをPCでも2カラムに変更
========================================================= */

/* 3カラム → 2カラム（PC含む） */
.tp-onboard .tp-steps{
  grid-template-columns: repeat(2, 1fr);
}

/* SPは1カラム */
@media (max-width: 640px){
  .tp-onboard .tp-steps{
    grid-template-columns: 1fr;
  }
}

/* STEPバッジの「STEP 2」などが改行されないように */
.tp-onboard .tp-step-badge{
  white-space: nowrap;
}

/* ボタン文字がPCで2行になりにくいように（過度な折り返し防止） */
@media (min-width: 641px){
  .tp-onboard .tp-btn{
    white-space: nowrap;
  }
}
/* =========================================================
  STEP1：動画（このページで再生 / YouTubeで開く）UI
========================================================= */

.tp-onboard .tp-video-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 10px;
}

@media (max-width: 640px){
  .tp-onboard .tp-video-grid{
    grid-template-columns: 1fr;
  }
}

.tp-onboard .tp-video{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(0,0,0,.04);
}

/* サムネ */
.tp-onboard .tp-video__thumb{
  position: relative;
  cursor: pointer;
  background: rgba(0,0,0,.04);
}

.tp-onboard .tp-video__thumb img{
  display: block;
  width: 100%;
  height: auto;
}

/* 再生アイコン（中央） */
.tp-onboard .tp-video__play{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.tp-onboard .tp-video__play::before{
  content: "";
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: rgba(0,0,0,.68);
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
}

.tp-onboard .tp-video__play::after{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 14px solid #fff;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  transform: translateX(2px);
}

/* プレイヤー */
.tp-onboard .tp-video__player{
  display: none;
  background: #000;
}

.tp-onboard .tp-video.is-playing .tp-video__player{
  display: block;
}

.tp-onboard .tp-video.is-playing .tp-video__thumb{
  display: none;
}

/* 16:9 比率固定 */
.tp-onboard .tp-video__ratio{
  position: relative;
  padding-top: 56.25%;
}

.tp-onboard .tp-video__ratio iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ボタン2つ */
.tp-onboard .tp-video__actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px;
}

/* button を tp-btn として扱う（見た目統一） */
.tp-onboard button.tp-btn{
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
}
/* =========================================================
  STEP1 動画：PCでボタンが切れる問題を解消
  - nowrap解除（動画ボタンだけ折り返し許可）
  - ボタンをコンパクト化
  - grid列をminmaxで詰まりに強く
========================================================= */

.tp-onboard .tp-video__actions{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* ここが重要：以前の .tp-onboard .tp-btn{white-space:nowrap;} を動画ボタンだけ打ち消す */
.tp-onboard .tp-video__actions .tp-btn{
  width: 100%;
  min-width: 0;
  white-space: normal;     /* 折り返しOK */
  line-height: 1.25;
  padding: 10px 12px;      /* 少し小さく */
  border-radius: 14px;     /* 999pxの巨大ピルをやめてカード内に収める */
  font-size: 13px;
}

/* PCでさらに詰まりやすい場合はもう一段だけ締める */
@media (min-width: 961px){
  .tp-onboard .tp-video__actions .tp-btn{
    padding: 9px 10px;
    font-size: 12.5px;
  }
}
/* =========================================================
  STEP2/3/5：テンプレ（mini-box）内の並び順をPCでも縦並びに統一
  - 左/右/左下の“段組み”を解除
========================================================= */

/* mini-box 内で段組みや float がかかっていても縦並びに戻す */
.tp-onboard .tp-mini-box ul,
.tp-onboard .tp-mini-box ol{
  column-count: 1;
  column-gap: 0;
  list-style-position: outside;
}

/* li の“段組み崩れ”対策（floatや幅指定を無効化） */
.tp-onboard .tp-mini-box li{
  float: none;
  width: auto;
  display: list-item;
  break-inside: avoid;
  page-break-inside: avoid;
}

/* もし内部が grid / flex になっているケースも想定して縦方向に統一 */
.tp-onboard .tp-mini-box .tp-mini-list{
  display: block;
}
/* =========================================================
  STEPカード：見出し行にアイコンを入れる（tp-step-head内）
========================================================= */

.tp-onboard .tp-step-head{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap; /* 画面が狭いときに自然に折り返す */
}

/* STEPバッジは折り返し禁止（既に入れていればOK） */
.tp-onboard .tp-step-badge{
  white-space: nowrap;
}

/* アイコン枠 */
.tp-onboard .tp-step-icon{
  width: 44px;              /* 好みで 36〜52px */
  height: 44px;
  border-radius: 999px;     /* 丸背景にして“シリーズ感” */
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* 画像 */
.tp-onboard .tp-step-icon img{
  width: 26px;              /* 画像の見え方に合わせて調整 */
  height: 26px;
  display: block;
}

/* タイトルは残り幅を使う */
.tp-onboard .tp-step-title{
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}