@charset "utf-8";
/* ==========================================================================
   CoachNote — main.css
   トークンは theme.json が --wp--preset--* として出力する。
   ここではそれを参照するだけで、色の直書きはしない（ダークモードが壊れるため）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ダークモード
   theme.json のプリセット変数を上書きする。
   data-theme="light" が付いているときは強制ライト（ヘッダの切替ボタン用）。
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wp--preset--color--base: #11161d;
    --wp--preset--color--surface: #1a2029;
    --wp--preset--color--contrast: #e8eaed;
    --wp--preset--color--muted: #a3abb8;
    --wp--preset--color--border: #2c333d;
    --wp--preset--color--primary: #5aa9e6;
    --wp--preset--color--primary-dark: #8cc5f2;
    --wp--preset--color--accent: #f7ed11;
    --wp--preset--color--accent-soft: #11283a;
    --wp--preset--color--marker: #4a4411;
  }
}

:root[data-theme="dark"] {
  --wp--preset--color--base: #11161d;
  --wp--preset--color--surface: #1a2029;
  --wp--preset--color--contrast: #e8eaed;
  --wp--preset--color--muted: #a3abb8;
  --wp--preset--color--border: #2c333d;
  --wp--preset--color--primary: #5aa9e6;
  --wp--preset--color--primary-dark: #8cc5f2;
  --wp--preset--color--accent: #f7ed11;
  --wp--preset--color--accent-soft: #11283a;
  --wp--preset--color--marker: #4a4411;
}

/* --------------------------------------------------------------------------
   2. ベース
   -------------------------------------------------------------------------- */
:root { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  font-feature-settings: "palt" 1;
}

/* 見出しの直後にスクロールしたとき、固定ヘッダに隠れないように */
h2[id], h3[id] { scroll-margin-top: 5rem; }

:where(a):focus-visible,
:where(button):focus-visible,
:where(input, select, textarea):focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}

.cn-skip { position: absolute; left: -9999px; }
.cn-skip:focus {
  left: 1rem; top: 1rem; z-index: 100;
  background: var(--wp--preset--color--base);
  padding: .5rem 1rem; border-radius: 6px;
}

/* --------------------------------------------------------------------------
   3. ヘッダー / フッター
   -------------------------------------------------------------------------- */
.cn-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .85rem clamp(1rem, 4vw, 2rem);
  background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.cn-header__brand {
  font-weight: 700; font-size: 1.0625rem; letter-spacing: .02em;
  text-decoration: none; color: var(--wp--preset--color--contrast);
}
.cn-header__brand span { color: var(--wp--preset--color--accent); }
.cn-nav ul { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.cn-nav a { text-decoration: none; font-size: .9375rem; color: var(--wp--preset--color--muted); }
.cn-nav a:hover { color: var(--wp--preset--color--primary); }

.cn-theme-toggle {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: 8px;
  border: 1px solid var(--wp--preset--color--border);
  background: transparent; color: var(--wp--preset--color--muted);
  cursor: pointer; font-size: 1rem; line-height: 1;
}
.cn-theme-toggle:hover { color: var(--wp--preset--color--primary); }

.cn-footer {
  margin-top: var(--wp--preset--spacing--60);
  padding: var(--wp--preset--spacing--50) clamp(1rem, 4vw, 2rem);
  border-top: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--surface);
  font-size: .9375rem; color: var(--wp--preset--color--muted);
}

/* --------------------------------------------------------------------------
   4. パンくず
   -------------------------------------------------------------------------- */
.cn-breadcrumb { font-size: .8125rem; color: var(--wp--preset--color--muted); }
.cn-breadcrumb ol {
  display: flex; flex-wrap: wrap; gap: .4rem;
  list-style: none; margin: 0; padding: 0;
}
.cn-breadcrumb li + li::before { content: "/"; margin-right: .4rem; opacity: .5; }
.cn-breadcrumb a { color: inherit; text-decoration: none; }
.cn-breadcrumb a:hover { color: var(--wp--preset--color--primary); text-decoration: underline; }

/* --------------------------------------------------------------------------
   5. 記事の見出し装飾
   -------------------------------------------------------------------------- */
.entry-content h2:not(.is-style-cn-plain-heading) {
  padding-left: .85rem;
  border-left: 5px solid var(--wp--preset--color--primary);
}
.entry-content h3:not(.is-style-cn-plain-heading) {
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.entry-content > * + * { margin-block-start: 1.5rem; }
.entry-content p { line-height: var(--wp--custom--line-height--body); }

/* --------------------------------------------------------------------------
   6. AIOパーツ
   -------------------------------------------------------------------------- */

/* 6-1. この記事の結論（speakable の対象。class 名は変えない） */
.cn-answer {
  margin: 0 0 var(--wp--preset--spacing--40);
  padding: 1.25rem 1.4rem;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-left: 5px solid var(--wp--preset--color--primary);
  border-radius: 4px;
}
.cn-answer__label {
  margin: 0 0 .5rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .12em;
  color: var(--wp--preset--color--primary);
}
.cn-answer__body p { margin: 0 0 .6rem; }
.cn-answer__body p:last-child { margin-bottom: 0; }

/* 6-2. 一次データ */
.cn-data {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--40);
  background: var(--wp--preset--color--border);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 6px; overflow: hidden;
}
.cn-data__item { padding: 1.1rem 1rem; background: var(--wp--preset--color--base); border-top: 3px solid var(--wp--preset--color--accent); }
.cn-data__value {
  margin: 0; font-size: 2rem; font-weight: 700; line-height: 1.1;
  color: var(--wp--preset--color--primary);
}
.cn-data__label { margin: .35rem 0 0; font-size: .875rem; }
.cn-data__source { margin: .3rem 0 0; font-size: .75rem; color: var(--wp--preset--color--muted); }

/* 6-3. 目次 */
.cn-toc {
  margin: 0 0 var(--wp--preset--spacing--40);
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 6px;
}
.cn-toc__title { margin: 0 0 .6rem; font-size: .9375rem; font-weight: 700; }
.cn-toc__list { margin: 0; padding-left: 1.3rem; }
.cn-toc__item { margin: .35rem 0; font-size: .9375rem; }
.cn-toc__item--h3 { list-style: none; padding-left: .9rem; font-size: .875rem; }
.cn-toc__item--h3::marker { content: ""; }
.cn-toc a { color: inherit; text-decoration: none; }
.cn-toc a:hover { color: var(--wp--preset--color--primary-dark); text-decoration: underline; }

/* 6-4. FAQ */
.cn-faq { margin-top: var(--wp--preset--spacing--50); }
.cn-faq__item {
  padding: 1.1rem 0;
  border-top: 1px solid var(--wp--preset--color--border);
}
.cn-faq__q {
  margin: 0 0 .5rem; padding: 0; border: 0;
  font-size: 1.0625rem; font-weight: 700;
}
.cn-faq__q::before {
  content: "Q."; margin-right: .45rem; color: var(--wp--preset--color--primary);
}
.cn-faq__a p { margin: 0 0 .6rem; }
.cn-faq__a p:last-child { margin-bottom: 0; }

/* 6-5. 更新履歴 */
.cn-updates {
  margin-top: var(--wp--preset--spacing--40);
  font-size: .875rem; color: var(--wp--preset--color--muted);
}
.cn-updates summary { cursor: pointer; font-weight: 700; }
.cn-updates ul { margin: .7rem 0 0; padding-left: 1.2rem; }
.cn-updates li { margin: .3rem 0; }
.cn-updates time { margin-right: .6rem; font-variant-numeric: tabular-nums; }

/* 6-6. この記事の根拠 */
.cn-experience {
  margin-top: var(--wp--preset--spacing--30);
  padding: .8rem 1rem;
  font-size: .875rem; color: var(--wp--preset--color--muted);
  border: 1px dashed var(--wp--preset--color--border);
  border-radius: 6px;
}
.cn-experience__label {
  display: block; margin-bottom: .2rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  color: var(--wp--preset--color--contrast);
}

/* 6-7. CTA */
.cn-cta {
  margin-top: var(--wp--preset--spacing--50);
  padding: 1.8rem 1.5rem;
  text-align: center;
  background: var(--wp--preset--color--primary);
  border-radius: 10px;
}
.cn-cta__heading {
  margin: 0 0 1.1rem;
  font-size: 1.0625rem; font-weight: 700; line-height: 1.7;
  color: #fff;
}
.cn-cta__action { margin: 0; }
.cn-cta__button {
  display: inline-block;
  padding: .95rem 2rem;
  background: var(--wp--preset--color--accent);
  color: #15202b; font-weight: 700; text-decoration: none;
  border-radius: 8px;
  transition: transform var(--wp--custom--transition), filter var(--wp--custom--transition);
}
.cn-cta__button:hover { filter: brightness(1.06); transform: translateY(-1px); color: #15202b; }
.cn-cta__note { margin: .9rem 0 0; font-size: .8125rem; color: rgba(255,255,255,.75); }

/* --------------------------------------------------------------------------
   7. ブロックスタイル（SWELL相当のパーツ）
   -------------------------------------------------------------------------- */

/* 7-1. ボックス */
.is-style-cn-box-point,
.is-style-cn-box-warn,
.is-style-cn-box-memo,
.is-style-cn-box-quote,
.is-style-cn-box-outline {
  padding: 1.2rem 1.3rem;
  border-radius: 6px;
}
.is-style-cn-box-point {
  background: var(--wp--preset--color--accent-soft);
  border-left: 4px solid var(--wp--preset--color--primary);
}
.is-style-cn-box-warn {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--primary);
}
.is-style-cn-box-warn::before {
  content: "注意"; display: inline-block; margin-bottom: .5rem;
  padding: .1rem .55rem; border-radius: 3px;
  font-size: .75rem; font-weight: 700;
  background: var(--wp--preset--color--primary); color: #fff;
}
.is-style-cn-box-memo { background: var(--wp--preset--color--surface); }
.is-style-cn-box-outline { border: 1px solid var(--wp--preset--color--border); }
.is-style-cn-box-quote {
  background: var(--wp--preset--color--surface);
  border-left: 4px solid var(--wp--preset--color--primary);
  font-size: .9375rem;
}
.is-style-cn-box-quote::before {
  content: "レッスンカルテより"; display: block; margin-bottom: .5rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  color: var(--wp--preset--color--primary);
}

/* 7-2. 吹き出し */
.is-style-cn-balloon, .is-style-cn-balloon-right { align-items: flex-start; gap: 1rem; }
.is-style-cn-balloon-right { flex-direction: row-reverse; }
.is-style-cn-balloon .wp-block-column:first-child,
.is-style-cn-balloon-right .wp-block-column:last-child { flex-basis: 76px !important; flex-grow: 0; }
.is-style-cn-balloon img, .is-style-cn-balloon-right img { border-radius: 50%; }
.is-style-cn-balloon .wp-block-column:last-child,
.is-style-cn-balloon-right .wp-block-column:first-child {
  position: relative;
  padding: .95rem 1.1rem;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 10px;
  font-size: .9375rem;
}
.is-style-cn-balloon .wp-block-column:last-child::before,
.is-style-cn-balloon-right .wp-block-column:first-child::before {
  content: ""; position: absolute; top: 1.1rem;
  border: 8px solid transparent;
}
.is-style-cn-balloon .wp-block-column:last-child::before {
  left: -16px; border-right-color: var(--wp--preset--color--border);
}
.is-style-cn-balloon-right .wp-block-column:first-child::before {
  right: -16px; border-left-color: var(--wp--preset--color--border);
}

/* 7-3. 段落 */
.is-style-cn-marker {
  background: linear-gradient(transparent 62%, var(--wp--preset--color--marker) 62%);
  display: inline;
}
.is-style-cn-lead {
  font-size: var(--wp--preset--font-size--lg);
  line-height: var(--wp--custom--line-height--snug);
  color: var(--wp--preset--color--muted);
}
.is-style-cn-note { font-size: .8125rem; color: var(--wp--preset--color--muted); }

/* 7-4. リスト */
.is-style-cn-check { list-style: none; padding-left: 0; }
.is-style-cn-check li { position: relative; padding-left: 1.6rem; margin: .5rem 0; }
.is-style-cn-check li::before {
  content: ""; position: absolute; left: .25rem; top: .55em;
  width: .45rem; height: .85rem;
  border-right: 2px solid var(--wp--preset--color--primary);
  border-bottom: 2px solid var(--wp--preset--color--primary);
  transform: rotate(45deg) translateY(-50%);
}
.is-style-cn-step { list-style: none; padding-left: 0; counter-reset: cn-step; }
.is-style-cn-step li {
  position: relative; counter-increment: cn-step;
  padding: 0 0 1.1rem 2.6rem; margin: 0;
  border-left: 2px solid var(--wp--preset--color--border);
}
.is-style-cn-step li:last-child { border-left-color: transparent; padding-bottom: 0; }
.is-style-cn-step li::before {
  content: counter(cn-step);
  position: absolute; left: -.95rem; top: 0;
  display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--wp--preset--color--primary); color: #fff;
  font-size: .8125rem; font-weight: 700;
}
.is-style-cn-plain { list-style: none; padding-left: 0; }

/* 7-5. お客様の言葉 */
.is-style-cn-voice {
  padding: 1.1rem 1.3rem;
  background: var(--wp--preset--color--surface);
  border-left: 4px solid var(--wp--preset--color--primary);
  border-radius: 4px;
}
.is-style-cn-voice p { font-size: 1.0625rem; }
.is-style-cn-voice cite {
  display: block; margin-top: .6rem;
  font-size: .8125rem; font-style: normal; color: var(--wp--preset--color--muted);
}

/* 7-6. 画像・表・ボタン */
.is-style-cn-bordered img { border: 1px solid var(--wp--preset--color--border); }
.is-style-cn-rounded img { border-radius: 10px; }
.is-style-cn-compact td, .is-style-cn-compact th { padding: .45rem .6rem; }
.wp-block-table :is(th, td) { border-color: var(--wp--preset--color--border); }
.wp-block-table thead { border-bottom-color: var(--wp--preset--color--border); }
.is-style-cn-outline .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--primary);
  box-shadow: inset 0 0 0 2px currentColor;
}
.is-style-cn-large .wp-block-button__link { padding: 1.1rem 2.4rem; font-size: 1.0625rem; }

/* --------------------------------------------------------------------------
   8. 記事一覧（カード）
   -------------------------------------------------------------------------- */
.cn-cards { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.cn-card { display: flex; flex-direction: column; }
.cn-card__media { overflow: hidden; border-radius: 8px; aspect-ratio: 1200 / 630; }
.cn-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.cn-card:hover .cn-card__media img { transform: scale(1.03); }
.cn-card__cat {
  margin: .8rem 0 .3rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  color: var(--wp--preset--color--primary);
}
.cn-card__title { margin: 0 0 .4rem; font-size: 1.0625rem; line-height: 1.55; }
.cn-card__title a { color: inherit; text-decoration: none; }
.cn-card__title a:hover { color: var(--wp--preset--color--primary-dark); }
.cn-card__excerpt { margin: 0; font-size: .875rem; color: var(--wp--preset--color--muted); }
.cn-card__meta { margin-top: auto; padding-top: .7rem; font-size: .75rem; color: var(--wp--preset--color--muted); }

/* --------------------------------------------------------------------------
   9. 著者ボックス
   -------------------------------------------------------------------------- */
.cn-author {
  margin-top: var(--wp--preset--spacing--50);
  padding: 1.4rem;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 10px;
}
.cn-author__row { display: flex; gap: 1.1rem; align-items: flex-start; }
.cn-author__row--reviewer {
  margin-top: 1.1rem; padding-top: 1.1rem;
  border-top: 1px solid var(--wp--preset--color--border);
}
.cn-author img { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; }
.cn-author__role {
  margin: 0 0 .15rem;
  font-size: .6875rem; font-weight: 700; letter-spacing: .14em;
  color: var(--wp--preset--color--muted);
}
.cn-author__name { margin: 0; font-size: 1rem; font-weight: 700; }
.cn-author__job { margin: .1rem 0 .5rem; font-size: .8125rem; color: var(--wp--preset--color--primary); }
.cn-author__bio { margin: 0; font-size: .875rem; line-height: 1.85; color: var(--wp--preset--color--muted); }

/* --------------------------------------------------------------------------
   10. 印刷
   -------------------------------------------------------------------------- */
@media print {
  .cn-header, .cn-footer, .cn-cta, .cn-toc, .cn-theme-toggle { display: none !important; }
  body { color: #000; background: #fff; }
}

/* --------------------------------------------------------------------------
   11. ロゴ
   -------------------------------------------------------------------------- */
.cn-header__left { flex-wrap: nowrap; min-width: 0; }
.cn-header .wp-block-site-logo img { display: block; height: auto; }
.cn-header__brand {
  padding-left: .75rem;
  border-left: 1px solid var(--wp--preset--color--border);
  color: var(--wp--preset--color--muted);
  font-weight: 700; white-space: nowrap;
}
@media (max-width: 600px) {
  .cn-header__brand { display: none; }
  .cn-header .wp-block-site-logo img { width: 112px; }
}
/* ダークモードではカラーロゴが沈むので白抜きに差し替える */
:root[data-theme="dark"] .cn-header .wp-block-site-logo img,
:root:not([data-theme="light"]) .cn-header .wp-block-site-logo img {
  /* 画像差し替えはテーマ側で行う。ここでは視認性だけ担保する */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cn-header .wp-block-site-logo img { filter: brightness(1.25); }
}
:root[data-theme="dark"] .cn-header .wp-block-site-logo img { filter: brightness(1.25); }

/* --------------------------------------------------------------------------
   12. 五十嵐の吹き出しコメント
   執筆者（編集スタッフ・テニス中級）が本文の途中で差し込む一言。
   コーチの指導内容を伝える「補足ボックス」とは役割が違う。
   ここは書き手の素の声で、技術を教える場所ではない。
   -------------------------------------------------------------------------- */
.cn-say,
.is-style-cn-say {
  position: relative;
  margin: 2.25rem 0 2.25rem 76px;
  padding: 1rem 1.25rem;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
}
.cn-say::before,
.is-style-cn-say::before {
  content: "";
  position: absolute; left: -76px; top: 0;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: url("../img/avatar-igarashi-bg.png") center / cover no-repeat;
  border: 1px solid var(--wp--preset--color--border);
}
.cn-say::after,
.is-style-cn-say::after {
  content: "";
  position: absolute; left: -7px; top: 20px;
  width: 12px; height: 12px;
  background: var(--wp--preset--color--surface);
  border-left: 1px solid var(--wp--preset--color--border);
  border-bottom: 1px solid var(--wp--preset--color--border);
  transform: rotate(45deg);
}
.cn-say p,
.is-style-cn-say p { margin: 0 0 .6rem; font-size: 1rem; line-height: 1.85; }
.cn-say p:last-child,
.is-style-cn-say p:last-child { margin-bottom: 0; }
.cn-say__name {
  font-size: .75rem !important;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--wp--preset--color--primary);
  margin-bottom: .35rem !important;
}

/* 書き手が「やってみた結果」を書くときの数字（創作しないこと。§編集ガイドライン） */
.cn-say strong,
.is-style-cn-say strong { color: var(--wp--preset--color--contrast); }

@media (max-width: 600px) {
  .cn-say,
  .is-style-cn-say { margin-left: 0; margin-top: 3.2rem; padding-top: 2.4rem; }
  .cn-say::before,
  .is-style-cn-say::before { left: 1rem; top: -30px; width: 54px; height: 54px; }
  .cn-say::after,
  .is-style-cn-say::after { display: none; }
}

/* --------------------------------------------------------------------------
   13. 申し込みフォームの埋め込み（Google Apps Script）
   -------------------------------------------------------------------------- */
.cn-form {
  margin: var(--wp--preset--spacing--40) 0;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--wp--preset--color--base);
}
.cn-form__frame { display: block; width: 100%; border: 0; }
.cn-form__fallback {
  padding: 1.5rem;
  text-align: center;
  font-size: .9375rem;
  color: var(--wp--preset--color--muted);
}