@charset "UTF-8";

/*!
Theme Name: Cocoon Child（特別区経験者採用ガイド）
Description: Cocoon専用の子テーマ（特別区経験者採用ガイド）
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.3.0
*/

/************************************
** 特別区経験者採用ガイド：色
** 色を変えるときは、ここの数値だけを変える
** （見本：サイト制作/mockup/見本_v2.html）
************************************/
:root {
  --tk-ink: #222a35;        /* 本文の文字 */
  --tk-sub: #5f6b7a;        /* 補足の文字 */
  --tk-line: #dde3eb;       /* 罫線 */
  --tk-key: #1b3a66;        /* サイトの色（紺） */
  --tk-key-dark: #122a4c;
  --tk-key-mid: #3d5f8f;
  --tk-key-soft: #e9eff7;   /* 薄い紺の面 */
  --tk-bg: #f3f6fa;         /* ページの地の色 */
  --tk-accent: #e8742a;     /* オレンジ（ボタン・強調） */
  --tk-accent-dark: #c95f1a;
  --tk-accent-soft: #fdf0e6;
  --tk-marker: #ffe38a;     /* 蛍光ペン */
  --tk-ok: #1d7a4a;         /* 確認済みの緑 */
  --tk-ok-soft: #e6f4ec;
  --tk-radius: 10px;
  --tk-font: "BIZ UDPGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}

/************************************
** PR表示（広告リンクがある記事の冒頭に自動で出る）
************************************/
.tk-pr-notice {
  margin: 0 0 1.5em;
  padding: .5em .9em;
  font-size: 13px;
  line-height: 1.6;
  color: var(--tk-sub);
  background: #f6f7f9;
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-radius);
}

/************************************
** 比較表 [tk_hikaku]
************************************/
.tk-hikaku {
  margin: 1.5em 0;
}
.tk-hikaku-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tk-hikaku table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.6;
}
.tk-hikaku th,
.tk-hikaku td {
  padding: .6em .8em;
  border: 1px solid var(--tk-line);
  vertical-align: top;
  text-align: left;
}
.tk-hikaku thead th {
  background: var(--tk-key);
  color: #fff;
}
.tk-hikaku tbody th {
  background: var(--tk-key-soft);
  white-space: nowrap;
}
.tk-hikaku-date,
.tk-hikaku-empty {
  margin: .5em 0 0;
  font-size: 12px;
  color: var(--tk-sub);
}
.tk-hikaku-empty {
  padding: 1em;
  border: 1px dashed var(--tk-line);
}

/************************************
** 全体の見た目（v1.1.0）
** Cocoon のスキンは「なし」で使う前提。
** Cocoon が出す部品（クラス名）に合わせて上書きしている。
************************************/

/* ---------- 文字と地の色 ---------- */
.body {
  font-family: var(--tk-font);
  color: var(--tk-ink);
  background-color: var(--tk-bg);
}
.body a { color: var(--tk-key); }
.body .entry-content a:not([class]) {
  text-decoration: underline;
  text-decoration-color: var(--tk-accent);
  text-underline-offset: 4px;
  font-weight: 700;
}
.body .entry-content a:not([class]):hover { text-decoration-thickness: 2px; }

/* ---------- ヘッダー ---------- */
.body .header-container,
.body .header { background-color: #fff; }
.body .header-container { border-bottom: 1px solid var(--tk-line); }
.body .tagline { color: var(--tk-sub); font-size: 12px; }
.body .logo-header .site-name-text-link { display: inline-flex; align-items: center; gap: 10px; }
.body .logo-header .site-name-text {
  color: var(--tk-key-dark);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .03em;
}
/* ロゴの四角（画像のロゴを入れたら、この ::before は消す） */
.body .logo-header .site-name-text-link::before {
  content: "特\A経";
  white-space: pre;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 8px;
  background: var(--tk-key);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}

/* ヘッダーレイアウト「トップメニュー」のとき：高さを取り、キャッチフレーズをロゴの下に出す */
.body .header-container-in.hlt-top-menu {
  min-height: 72px;
  align-items: center;
  padding: 10px 24px;
}
.body .hlt-top-menu .header-in {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.body .hlt-top-menu .logo-header { order: 1; padding: 0; }
.body .hlt-top-menu .tagline {
  display: block;
  order: 2;
  margin: 2px 0 0 48px;
  padding: 0;
  font-size: 11px;
  line-height: 1.4;
}

/* SNSのアカウントが無いので、フォローボタンは出さない */
.body .sns-follow { display: none; }

/* ---------- 上のメニュー ---------- */
.body .navi { background-color: #fff; }
.body .navi-in > ul li { width: auto; }
.body .navi-in > ul > li > a {
  padding: 0 14px;
  color: var(--tk-ink);
  font-size: 15px;
  font-weight: 700;
}
.body .navi-in > ul > li > a:hover,
.body .navi-in > ul > li.current-menu-item > a,
.body .navi-in > ul > li.current-post-ancestor > a,
.body .navi-in > ul > li.current-menu-parent > a {
  background-color: var(--tk-key-soft);
  color: var(--tk-key);
}
/* メニューの項目に CSSクラス「tk-nav-cta」を付けると、オレンジのボタンになる */
.body .navi-in > ul > li.tk-nav-cta { display: flex; align-items: center; margin-left: 8px; }
.body .navi-in > ul > li.tk-nav-cta > a {
  height: auto;
  line-height: 1;
  padding: 12px 18px;
  border-radius: 6px;
  background-color: var(--tk-accent);
  color: #fff;
}
.body .navi-in > ul > li.tk-nav-cta > a:hover { background-color: var(--tk-accent-dark); color: #fff; }

/* ---------- 本文の枠と横の欄 ---------- */
.body .content { margin-top: 24px; }
.body .main {
  border-radius: var(--tk-radius);
  padding: 36px 44px 44px;
}
.body .sidebar { background-color: transparent; }
.body .sidebar .widget {
  background-color: #fff;
  border-radius: var(--tk-radius);
  padding: 20px;
  margin-bottom: 20px;
}
.body .sidebar h2,
.body .sidebar h3 {
  background: none;
  margin: 0 0 12px;
  padding: 0 0 10px;
  border-bottom: 2px solid var(--tk-key-soft);
  border-radius: 0;
  color: var(--tk-key-dark);
  font-size: 16px;
}

/* パンくず・日付 */
.body .breadcrumb { color: var(--tk-sub); font-size: 12px; }
.body .breadcrumb a { color: var(--tk-sub); }
.body .date-tags { color: var(--tk-sub); font-size: 13px; }

/* ---------- 記事のタイトルと見出し ---------- */
.body .entry-title,
.body .archive-title {
  color: var(--tk-key-dark);
  font-size: 28px;
  line-height: 1.5;
}
.body .article h2 {
  margin-top: 2.6em;
  padding: .7em .9em;
  background-color: var(--tk-key);
  color: #fff;
  border-radius: 6px;
  font-size: 22px;
  line-height: 1.5;
}
.body .article h3 {
  margin-top: 2em;
  padding: 0 0 .45em .8em;
  border: 0;
  border-left: 5px solid var(--tk-accent);
  border-bottom: 1px solid var(--tk-line);
  color: var(--tk-key-dark);
  font-size: 19px;
  line-height: 1.5;
}
.body .article h4 {
  margin-top: 1.6em;
  padding: 0 0 0 .7em;
  border: 0;
  border-left: 3px solid var(--tk-key-mid);
  color: var(--tk-key-dark);
  font-size: 17px;
  line-height: 1.5;
}

/* ---------- 表 ---------- */
.body .article table { font-size: 15px; line-height: 1.7; }
.body .article th,
.body .article td {
  padding: 10px 12px;
  border: 1px solid var(--tk-line);
  vertical-align: top;
  text-align: left;
}
.body .article thead th { background-color: var(--tk-key); color: #fff; }
.body .article tbody tr:nth-child(even) td { background-color: #f8fafc; }
.body .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.body .article .wp-block-table table { width: 100%; }

/* ---------- 引用（問題文など） ---------- */
.body .article blockquote {
  padding: 1em 1.4em 1em 3.2em;
  background-color: var(--tk-bg);
  border: 0;
  border-radius: 8px;
  font-size: .95em;
}
.body .article blockquote::before {
  content: "\201C";
  position: absolute;
  left: .4em;
  top: -.05em;
  border: 0;
  color: var(--tk-key-mid);
  font-family: Georgia, serif;
  font-size: 3em;
  line-height: 1;
}
.body .article blockquote::after { content: none; }

/* ---------- 目次 ---------- */
.body .toc {
  display: block;
  padding: 16px 22px;
  border: 2px solid var(--tk-key-soft);
  border-radius: var(--tk-radius);
  font-size: 15px;
}
.body .toc-title {
  text-align: left;
  padding: 0;
  color: var(--tk-key);
  font-weight: 700;
}
.body .entry-content .toc a { color: var(--tk-ink); text-decoration: none; font-weight: 400; }
.body .toc a:hover { color: var(--tk-key); text-decoration: underline; }

/* ---------- 囲み（Cocoon のボックス） ----------
   記事の送信道具（wp_draft.py）の :::info / :::memo / :::alert / :::blank と、
   「この記事でわかること」（information-box）がここで決まる */
.body .common-icon-box {
  padding: 18px 22px;
  border: 0;
  border-radius: var(--tk-radius);
}
.body .common-icon-box::before { display: none; }
.body .common-icon-box > p:first-child:has(> strong:only-child) { margin-bottom: .5em; }
.body .common-icon-box > p:first-child > strong:only-child {
  display: flex;
  align-items: center;
  gap: 6px;
}
.body .common-icon-box ul { margin: 0; padding: 0; list-style: none; }
.body .common-icon-box li { position: relative; padding: 3px 0 3px 26px; }
.body .common-icon-box li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 17px;
  height: 17px;
  background-color: var(--tk-accent);
  -webkit-mask: var(--tk-ico-check) center / contain no-repeat;
  mask: var(--tk-ico-check) center / contain no-repeat;
}
/* わかること・補足（info）：薄い紺 */
.body .information-box { background-color: var(--tk-key-soft); }
.body .information-box > p:first-child > strong:only-child { color: var(--tk-key); }
/* ポイント（memo）：薄いオレンジ */
.body .memo-box { background-color: var(--tk-accent-soft); }
.body .memo-box > p:first-child > strong:only-child { color: var(--tk-accent-dark); }
/* 注意・よくある失敗（alert）：オレンジの枠と見出し帯 */
.body .alert-box {
  background-color: #fff;
  border: 2px solid var(--tk-accent);
  padding-top: 0;
}
.body .alert-box > p:first-child > strong:only-child {
  margin: 0 -22px 12px;
  padding: 6px 22px;
  background-color: var(--tk-accent);
  color: #fff;
  font-size: 15px;
}
.body .alert-box > p:first-child:has(> strong:only-child) { margin-bottom: 0; }
/* 枠だけ（blank） */
.body .blank-box {
  border: 2px solid var(--tk-key-soft);
  border-radius: var(--tk-radius);
  padding: 16px 20px;
}

/* アイコン（線の絵） */
:root {
  --tk-ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9.5'/%3E%3C/svg%3E");
  --tk-ico-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.5 8-8 9-4.5-1-8-4.5-8-9V6z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E");
  --tk-ico-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E");
}

/* ---------- 基準日・出典（wp_draft.py が本文に入れるもの） ---------- */
.body .tk-basis-date {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background-color: var(--tk-ok-soft);
  border-radius: 8px;
  color: var(--tk-ok);
  font-size: 14px;
  line-height: 1.7;
}
.body .tk-basis-date::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: .2em;
  background-color: currentColor;
  -webkit-mask: var(--tk-ico-shield) center / contain no-repeat;
  mask: var(--tk-ico-shield) center / contain no-repeat;
}
.body .article .tk-sources {
  padding: 16px 20px 16px 2.4em;
  background-color: var(--tk-bg);
  border-radius: var(--tk-radius);
  color: var(--tk-sub);
  font-size: 14px;
  line-height: 1.8;
}
.body .entry-content .tk-sources a { color: var(--tk-sub); text-decoration: underline; font-weight: 400; }

/* ---------- ボタン ---------- */
.body .btn,
.body .tk-btn,
.body .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border: 0;
  border-radius: 999px;
  background-color: var(--tk-accent);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 3px 0 var(--tk-accent-dark);
  transition: transform .1s, box-shadow .1s;
}
.body .btn:hover,
.body .tk-btn:hover,
.body .wp-block-button__link:hover {
  color: #fff;
  transform: translateY(1px);
  box-shadow: 0 2px 0 var(--tk-accent-dark);
}

/* ---------- 記事の一覧（カード） ---------- */
.body .entry-card-wrap {
  background-color: #fff;
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-radius);
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.body .entry-card-wrap:hover {
  background-color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(20, 40, 70, .08);
}
.body .entry-card-title { color: var(--tk-ink); font-size: 17px; }
.body .entry-card-snippet { color: var(--tk-sub); }
.body .cat-label {
  border: 0;
  border-radius: 3px;
  background-color: var(--tk-marker);
  color: var(--tk-key-dark);
  font-weight: 700;
}

/* 前後の記事・関連記事 */
.body .pager-post-navi a {
  border-radius: var(--tk-radius);
  background-color: var(--tk-bg);
  color: var(--tk-ink);
  font-weight: 700;
}
.body .pager-post-navi a.next-post { background-color: var(--tk-key); color: #fff; }
.body .related-entry-heading,
.body .comment-title {
  border-left: 5px solid var(--tk-accent);
  padding-left: .6em;
  color: var(--tk-key-dark);
}

/************************************
** 記事ページの部品（v1.2.0）
************************************/

/* STEPの札（functions.php の tk_step_nav が本文の頭に出す） */
.body .tk-step-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 1.2em;
  padding: 4px 14px 4px 4px;
  border-radius: 999px;
  background-color: var(--tk-key-soft);
  color: var(--tk-key);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
.body .tk-step-badge span {
  padding: 2px 10px;
  border-radius: 999px;
  background-color: var(--tk-key);
  color: #fff;
  font-size: 12px;
  letter-spacing: .06em;
}

/* 前の記事・次に読む（読む順番どおり。Cocoon の日付順の前後リンクは隠す） */
.body .pager-post-navi { display: none; }
.body .tk-next-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 2.4em;
}
.body .entry-content .tk-next-nav a {
  display: block;
  padding: 16px 20px;
  border-radius: var(--tk-radius);
  background-color: var(--tk-bg);
  color: var(--tk-ink);
  font-weight: 700;
  line-height: 1.6;
  text-decoration: none;
}
.body .tk-next-nav small {
  display: block;
  margin-bottom: 4px;
  color: var(--tk-sub);
  font-size: 12px;
  font-weight: 400;
}
.body .entry-content .tk-next-nav a.tk-nav-next {
  background-color: var(--tk-key);
  color: #fff;
  text-align: right;
}
.body .tk-next-nav a.tk-nav-next small { color: var(--tk-marker); }
.body .entry-content .tk-next-nav a:hover { opacity: .9; }

/* 運営者の吹き出し（:::talk） */
.body .tk-talk {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.body .tk-talk::before {
  content: "";
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--tk-key-soft) url("images/owner.webp") center / cover no-repeat;
}
.body .tk-talk > p {
  position: relative;
  flex: 1;
  margin: 0;
  padding: 14px 18px;
  border-radius: 12px;
  background-color: var(--tk-accent-soft);
  font-size: .95em;
  line-height: 1.8;
}
.body .tk-talk > p + p { margin-top: .6em; }
.body .tk-talk > p:first-child::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 22px;
  border: 6px solid transparent;
  border-right: 10px solid var(--tk-accent-soft);
  border-left: 0;
}
.body .tk-talk { flex-wrap: wrap; }
.body .tk-talk > p { flex-basis: calc(100% - 78px); }
.body .tk-talk > p + p { margin-left: 78px; }

/* 帯グラフ（:::bar） */
.body .tk-bar {
  padding: 18px 20px;
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-radius);
}
.body .tk-bar .tk-bar-ttl {
  margin: 0 0 12px;
  color: var(--tk-key-dark);
  font-size: 15px;
  font-weight: 700;
}
.body .tk-bar-row {
  display: flex;
  min-height: 56px;
  border-radius: 6px;
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
}
.body .tk-bar-row > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 6px 4px;
  min-width: 0;
  background-color: var(--tk-key-mid);
}
.body .tk-bar-row > div:nth-child(1) { background-color: #7f9cc3; }
.body .tk-bar-row > div:nth-child(2) { background-color: var(--tk-key-mid); }
.body .tk-bar-row > div:nth-child(3) { background-color: var(--tk-accent); }
.body .tk-bar-row > div:nth-child(4) { background-color: var(--tk-key); }
.body .tk-bar-row > div:nth-child(5) { background-color: #5b7fae; }
.body .tk-bar-row small { font-size: 11px; opacity: .9; }
.body .tk-bar .tk-bar-cap { margin: 10px 0 0; color: var(--tk-sub); font-size: 13px; }

/* 検索ボックス */
.body .wp-block-search__button,
.body .search-submit {
  border: 0;
  border-radius: 6px;
  background-color: var(--tk-key);
  color: #fff;
}
.body .wp-block-search__input,
.body .search-edit {
  border: 1px solid var(--tk-line);
  border-radius: 6px;
}

/************************************
** トップページ [tk_top]（v1.3.0）
************************************/
.body.tk-top-page .sidebar,
.body.tk-top-page .article-header,
.body.tk-top-page .article-footer,
.body.tk-top-page .toc,
.body.tk-top-page .breadcrumb,
.body.tk-top-page .sns-share,
.body.tk-top-page .date-tags { display: none; }
.body.tk-top-page .content { margin-top: 0; }
.body.tk-top-page .content-in { width: 100%; max-width: none; padding: 0; }
.body.tk-top-page .main {
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
}
.body.tk-top-page .footer { margin-top: 0; }

.body .tk-top { line-height: 1.85; }
.body .tk-top > * { margin-bottom: 0; }
.body .tk-ico { width: 1em; height: 1em; flex: none; vertical-align: -.15em; }
.body .tk-top a { text-decoration: none; }
.body .tk-mk { background: linear-gradient(transparent 60%, var(--tk-marker) 60%); }
.body .tk-chip {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  background-color: var(--tk-key-soft);
  color: var(--tk-key);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.body .tk-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--tk-accent);
  color: var(--tk-key);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}
.body .tk-more::after { content: "›"; font-size: 18px; line-height: 1; }
.body span.tk-more { border-bottom-color: var(--tk-line); color: var(--tk-sub); }
.body .tk-btn::after { content: "›"; font-size: 22px; line-height: 1; margin-top: -3px; }
.body .tk-btn-ghost {
  padding: 12px 26px;
  border: 2px solid var(--tk-key);
  background-color: #fff;
  color: var(--tk-key);
  box-shadow: none;
}
.body .tk-btn-ghost:hover { background-color: var(--tk-key-soft); color: var(--tk-key); box-shadow: none; }

/* 区切り */
.body .tk-sec { max-width: 1128px; margin: 0 auto; padding: 72px 24px; }
.body .tk-sec.tk-alt { max-width: none; background-color: #fff; }
.body .tk-sec.tk-alt > * { max-width: 1080px; margin-left: auto; margin-right: auto; }
.body .tk-sec-head { text-align: center; margin-bottom: 40px; }
.body .tk-sec-head .tk-kick { margin: 0 0 6px; color: var(--tk-accent); font-size: 14px; font-weight: 700; }
.body .tk-sec-head h2 {
  margin: 0;
  padding: 0;
  background: none;
  color: var(--tk-key-dark);
  font-size: 28px;
  line-height: 1.5;
}
.body .tk-sec-head h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin: 14px auto 0;
  border-radius: 2px;
  background-color: var(--tk-accent);
}
.body .tk-sec-head > p:not(.tk-kick) { margin: 14px 0 0; color: var(--tk-sub); font-size: 15px; }

/* 最初の画面 */
.body .tk-hero { position: relative; overflow: hidden; background-color: var(--tk-key-soft); }
.body .tk-hero::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -160px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background-color: #dfe8f3;
}
.body .tk-hero-in {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  align-items: center;
  max-width: 1128px;
  margin: 0 auto;
  padding: 56px 24px;
}
.body .tk-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 6px 14px;
  border-radius: 4px;
  background-color: var(--tk-key);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}
.body .tk-hero-badge em { padding: 1px 6px; border-radius: 3px; background-color: var(--tk-marker); color: var(--tk-key-dark); font-style: normal; }
.body .tk-hero-title {
  margin: 0 0 18px;
  color: var(--tk-key-dark);
  font-size: 40px;
  line-height: 1.45;
  letter-spacing: .02em;
}
.body .tk-hero-title span { color: var(--tk-accent); }
.body .tk-hero-lead { margin: 0 0 22px; }
.body .tk-hero-points { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; }
.body .tk-hero-points li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  background-color: #fff;
  color: var(--tk-key-dark);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.body .tk-hero-points .tk-ico { color: var(--tk-accent); font-size: 18px; }
.body .tk-hero-btns { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }
.body .tk-hero-art { overflow: hidden; border-radius: 16px; background-color: #fff; }
.body .tk-hero-art img { display: block; width: 100%; height: auto; }

/* 迷っていませんか */
.body .tk-worries { display: grid; grid-template-columns: 1fr 220px 1fr; gap: 24px; align-items: center; }
.body .tk-worry-col { display: grid; gap: 16px; }
.body .tk-bubble {
  position: relative;
  display: block;
  padding: 14px 18px;
  border: 2px solid var(--tk-key);
  border-radius: 14px;
  background-color: #fff;
  color: var(--tk-key-dark);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}
.body .tk-bubble small { display: block; margin-top: 4px; color: var(--tk-accent); font-size: 13px; font-weight: 400; }
.body a.tk-bubble small::after { content: " ›"; }
.body a.tk-bubble:hover { background-color: var(--tk-key-soft); }
.body .tk-worry-col .tk-bubble::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border: 2px solid var(--tk-key);
  background: inherit;
  transform: translateY(-50%) rotate(45deg);
}
.body .tk-l .tk-bubble::after { right: -8px; border-left: 0; border-bottom: 0; }
.body .tk-r .tk-bubble::after { left: -8px; border-right: 0; border-top: 0; }
.body .tk-worry-art img { display: block; width: 100%; height: auto; }

/* 5ステップ */
.body .tk-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.body .tk-step {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: visible;
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-radius);
  background-color: #fff;
}
.body .tk-step-top {
  padding: 18px 16px 14px;
  border-radius: var(--tk-radius) var(--tk-radius) 0 0;
  background-color: var(--tk-key);
  color: #fff;
  text-align: center;
}
.body .tk-step-ico {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 8px auto;
  border-radius: 50%;
  background-color: #fff;
  color: var(--tk-key);
  font-size: 32px;
}
.body .tk-step-no { font-size: 13px; letter-spacing: .12em; opacity: .85; }
.body .tk-step-no span { margin-left: 2px; font-size: 24px; }
.body .tk-step-top h3 { margin: 0; padding: 0; border: 0; color: #fff; font-size: 17px; }
.body .tk-step-body { flex: 1; padding: 14px 16px 18px; }
.body .tk-step-body p { margin: 0 0 10px; color: var(--tk-sub); font-size: 13px; line-height: 1.7; }
.body .tk-step-body ul { margin: 0; padding: 0; list-style: none; }
.body .tk-step-body li {
  position: relative;
  padding: 8px 0 8px 14px;
  border-top: 1px dashed var(--tk-line);
  font-size: 14px;
  line-height: 1.55;
}
.body .tk-step-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--tk-accent);
  border-right: 2px solid var(--tk-accent);
  transform: rotate(45deg);
}
.body .tk-step-body li a { color: var(--tk-ink); }
.body .tk-step-body li a:hover { color: var(--tk-key); text-decoration: underline; }
.body .tk-step-body li.tk-soon { color: var(--tk-sub); }
.body .tk-step:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: -12px;
  top: 70px;
  border: 9px solid transparent;
  border-left: 10px solid var(--tk-accent);
}

/* 数字で見る */
.body .tk-nums { display: grid; grid-template-columns: repeat(3, 1fr) 1.3fr; gap: 16px; }
.body .tk-num,
.body .tk-chart {
  padding: 22px 18px;
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-radius);
  background-color: #fff;
}
.body .tk-num { text-align: center; }
.body .tk-num p { margin: 0; }
.body .tk-num-lbl { color: var(--tk-sub); font-size: 13px; font-weight: 700; }
.body .tk-num-val { margin: 6px 0 2px; color: var(--tk-key); font-size: 50px; font-weight: 700; line-height: 1.15; }
.body .tk-num-val small { margin-left: 2px; font-size: 18px; }
.body .tk-num-cap { color: var(--tk-sub); font-size: 12px; line-height: 1.6; }
.body .tk-chart-ttl { margin: 0 0 12px; color: var(--tk-key-dark); font-size: 14px; font-weight: 700; }
.body .tk-bars { display: flex; align-items: flex-end; gap: 10px; height: 150px; }
.body .tk-bar1 { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.body .tk-bar1 b { color: var(--tk-key); font-size: 14px; }
.body .tk-bar1 i { display: block; width: 100%; max-width: 34px; border-radius: 4px 4px 0 0; background-color: #b9c9de; }
.body .tk-bar1 span { margin-top: 4px; color: var(--tk-sub); font-size: 11px; }
.body .tk-bar1.tk-last b { color: var(--tk-accent); }
.body .tk-bar1.tk-last i { background-color: var(--tk-accent); }
.body .tk-src { margin: 14px 0 0; color: var(--tk-sub); font-size: 12px; text-align: right; }

/* いまの時期 */
.body .tk-flow { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); }
.body .tk-flow::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 22px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--tk-line);
}
.body .tk-fl { position: relative; z-index: 1; padding: 0 6px; font-size: 13px; line-height: 1.5; text-align: center; }
.body .tk-dot {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 10px;
  border: 3px solid var(--tk-line);
  border-radius: 50%;
  background-color: #fff;
  color: var(--tk-sub);
  font-size: 20px;
}
.body .tk-fl.tk-done .tk-dot { border-color: var(--tk-key); background-color: var(--tk-key); color: #fff; }
.body .tk-fl.tk-now .tk-dot { border-color: var(--tk-accent); background-color: var(--tk-accent); color: #fff; box-shadow: 0 0 0 6px var(--tk-accent-soft); }
.body .tk-d { display: block; color: var(--tk-key-dark); font-size: 15px; font-weight: 700; }
.body .tk-fl.tk-now .tk-d { color: var(--tk-accent); }
.body .tk-flag {
  display: block;
  width: fit-content;
  margin: 6px auto 0;
  padding: 3px 8px;
  border-radius: 3px;
  background-color: var(--tk-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.body .tk-now-box {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 720px;
  margin: 36px auto 0;
  padding: 16px 22px;
  border-radius: var(--tk-radius);
  background-color: var(--tk-accent-soft);
}
.body .tk-now-box > .tk-ico { color: var(--tk-accent); font-size: 30px; }
.body .tk-now-box p { flex: 1; margin: 0; font-size: 15px; }

/* 新しい記事 */
.body .tk-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.body .tk-card {
  display: block;
  overflow: hidden;
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-radius);
  background-color: #fff;
  color: var(--tk-ink);
  transition: transform .15s, box-shadow .15s;
}
.body .tk-card:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(20, 40, 70, .08); color: var(--tk-ink); }
.body .tk-card-img { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 670; object-fit: cover; }
.body .tk-thumb {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 1280 / 670;
  padding: 7% 8% 7% 11%;
  background-color: var(--tk-key);
  color: #fff;
}
.body .tk-thumb::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3%; background-color: var(--tk-accent); }
.body .tk-thumb::after {
  content: "";
  position: absolute;
  right: -14%;
  bottom: -40%;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .07);
}
.body .tk-thumb-cat {
  align-self: flex-start;
  margin-bottom: .6em;
  padding: .2em .6em;
  border-radius: 3px;
  background-color: var(--tk-marker);
  color: var(--tk-key-dark);
  font-size: 11px;
  font-weight: 700;
}
.body .tk-thumb-ttl {
  position: relative;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}
.body .tk-card-body { padding: 14px 16px 18px; }
.body .tk-card-meta { display: flex; align-items: center; margin: 0 0 6px; color: var(--tk-sub); font-size: 12px; }
.body .tk-card h3 { margin: 0; padding: 0; border: 0; color: var(--tk-ink); font-size: 15px; line-height: 1.6; }

/* 教材 */
.body .tk-cta {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 36px;
  align-items: center;
  overflow: hidden;
  padding: 40px;
  border-radius: 16px;
  background-color: var(--tk-key);
  color: #fff;
}
.body .tk-cta img { display: block; width: 100%; height: auto; border-radius: 8px; }
.body .tk-cta-kick { margin: 0; color: var(--tk-marker); font-size: 14px; font-weight: 700; }
.body .tk-cta h2 { margin: 6px 0 14px; padding: 0; background: none; color: #fff; font-size: 24px; line-height: 1.5; }
.body .tk-cta ul { margin: 0 0 18px; padding: 0; list-style: none; }
.body .tk-cta li { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; font-size: 15px; }
.body .tk-cta li .tk-ico { margin-top: 5px; color: var(--tk-marker); font-size: 18px; }
.body .tk-cta-price { margin: 0 0 14px; font-size: 14px; opacity: .85; }

/* 運営者 */
.body .tk-owner {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 32px;
  align-items: center;
  max-width: 820px;
  margin: 0 auto;
  padding: 32px;
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-radius);
  background-color: #fff;
}
.body .tk-owner-img { display: block; width: 140px; height: 140px; border-radius: 50%; }
.body .tk-owner p { margin: 0 0 12px; font-size: 15px; }
.body .tk-owner-name { color: var(--tk-key-dark); font-size: 18px; font-weight: 700; }
.body .tk-owner .tk-owner-name { margin-bottom: 4px; }

/* 横の欄 */
.body .tk-side h3 { display: flex; align-items: center; gap: 6px; }
.body .tk-side-steps ul { margin: 0; padding: 0; list-style: none; }
.body .tk-side-steps li > a,
.body .tk-side-steps li > span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--tk-ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.body .tk-side-steps li > span { color: var(--tk-sub); }
.body .tk-side-steps li > a:hover { background-color: var(--tk-bg); }
.body .tk-side-steps .tk-n {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--tk-key-soft);
  color: var(--tk-key);
  font-size: 16px;
}
.body .tk-side-steps .tk-cur { background-color: var(--tk-key-soft); color: var(--tk-key); }
.body .tk-side-steps .tk-cur .tk-n { background-color: var(--tk-key); color: #fff; }
.body .tk-side-owner { text-align: center; }
.body .tk-side-owner img { display: block; width: 88px; height: 88px; margin: 0 auto 10px; border-radius: 50%; }
.body .tk-side-owner p { margin: 0 0 8px; font-size: 13px; line-height: 1.8; }
.body .tk-side-owner p:nth-of-type(3) { text-align: left; }
.body .tk-side-owner .tk-owner-name { font-size: 15px; }
.body .sidebar .tk-side-kyozai { background-color: var(--tk-key); color: #fff; }
.body .sidebar .tk-side-kyozai h3 { border-bottom-color: rgba(255, 255, 255, .2); color: #fff; }
.body .tk-side-kyozai img { display: block; width: 100%; height: auto; margin-bottom: 12px; border-radius: 6px; }
.body .tk-side-kyozai p { margin: 0 0 12px; font-size: 13px; line-height: 1.7; }
.body .tk-side-kyozai .tk-btn { width: 100%; padding: 12px; font-size: 14px; }

/* シェアボタン：色をそろえて控えめに */
.body .sns-share .sns-share-buttons a,
.body .sns-follow .sns-follow-buttons a {
  background-color: #fff;
  color: var(--tk-key);
  border: 1px solid var(--tk-line);
  border-radius: 8px;
}
.body .sns-share .sns-share-buttons a:hover,
.body .sns-follow .sns-follow-buttons a:hover { background-color: var(--tk-key-soft); opacity: 1; }
.body .sns-share-message,
.body .sns-follow-message { color: var(--tk-sub); font-size: 14px; }

/* ---------- フッター ---------- */
.body .footer {
  margin-top: 56px;
  padding: 32px 8px 24px;
  background-color: var(--tk-key-dark);
  color: #dfe6ef;
}
.body .footer a,
.body .footer .site-name-text { color: #dfe6ef; }
.body .navi-footer-in > ul > li > a { color: #dfe6ef; }
.body .copyright { opacity: .7; }

/* スマホの下のボタンと「上へ」ボタン */
.body .mobile-menu-buttons { background-color: #fff; border-top: 1px solid var(--tk-line); box-shadow: none; }
.body .mobile-menu-buttons .menu-button > a,
.body .mobile-menu-buttons .menu-button-in { color: var(--tk-key); }
.body .go-to-top-button { background-color: var(--tk-key); color: #fff; border-radius: 50%; }

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  .body .main { padding: 28px 28px 36px; }
  .body.tk-top-page .main { padding: 0; }
  .body .tk-steps { grid-template-columns: repeat(3, 1fr); }
  .body .tk-step::after { display: none; }
  .body .tk-nums { grid-template-columns: repeat(3, 1fr); }
  .body .tk-chart { grid-column: 1 / -1; }
  .body .tk-cards { grid-template-columns: repeat(2, 1fr); }
}

/*834px以下*/
@media screen and (max-width: 834px){
  .body .content { margin-top: 0; }
  .body .main { border-radius: 0; padding: 20px 16px 32px; }
  .body .entry-title, .body .archive-title { font-size: 22px; }
  .body .article h2 { font-size: 19px; }
  .body .article h3 { font-size: 17px; }
  .body .tk-next-nav { grid-template-columns: 1fr; }
  .body .tk-next-nav > span { display: none; }
  .body.tk-top-page .main { padding: 0; }
  .body .tk-sec { padding: 52px 16px; }
  .body .tk-sec-head h2 { font-size: 22px; }
  .body .tk-hero-in { grid-template-columns: 1fr; gap: 8px; padding: 28px 16px 36px; }
  .body .tk-hero-art { order: -1; width: 100%; max-width: 320px; margin: 0 auto 12px; }
  .body .tk-hero-title { font-size: 27px; }
  .body .tk-hero-btns .tk-btn { width: 100%; }
  .body .tk-worries { grid-template-columns: 1fr; }
  .body .tk-worry-art { display: none; }
  .body .tk-worry-col .tk-bubble::after { display: none; }
  .body .tk-steps { grid-template-columns: 1fr; gap: 22px; }
  .body .tk-step:not(:last-child)::after {
    display: block;
    right: auto;
    left: 50%;
    top: auto;
    bottom: -20px;
    transform: translateX(-50%);
    border: 9px solid transparent;
    border-top: 10px solid var(--tk-accent);
  }
  .body .tk-step-top { display: grid; grid-template-columns: 56px 1fr; gap: 0 14px; align-items: center; text-align: left; }
  .body .tk-step-ico { grid-row: 1 / 3; width: 56px; height: 56px; margin: 0; font-size: 28px; }
  .body .tk-nums { grid-template-columns: 1fr 1fr; }
  .body .tk-num:nth-child(3) { grid-column: 1 / -1; }
  .body .tk-num-val { font-size: 40px; }
  .body .tk-flow { grid-template-columns: 1fr; }
  .body .tk-flow::before { left: 23px; right: auto; top: 10px; bottom: 10px; width: 4px; height: auto; }
  .body .tk-fl { display: grid; grid-template-columns: 50px 1fr; gap: 0 14px; align-items: center; padding: 6px 0; text-align: left; }
  .body .tk-dot { width: 50px; height: 50px; margin: 0; }
  .body .tk-flag { position: absolute; right: 0; top: 50%; margin: 0; transform: translateY(-50%); }
  .body .tk-now-box { flex-wrap: wrap; gap: 8px 12px; }
  .body .tk-cards { grid-template-columns: 1fr; }
  .body .tk-cta { grid-template-columns: 1fr; gap: 20px; padding: 24px 20px; }
  .body .tk-cta h2 { font-size: 20px; }
  .body .tk-cta .tk-btn { width: 100%; }
  .body .tk-owner { grid-template-columns: 1fr; gap: 16px; padding: 24px 20px; text-align: center; }
  .body .tk-owner-img { margin: 0 auto; }
  .body .tk-owner p:not(.tk-owner-name):not(.tk-owner-tags) { text-align: left; }
}

/*480px以下*/
@media screen and (max-width: 480px){
  .body .logo-header .site-name-text { font-size: 17px; }
  .body .article h2 { font-size: 18px; padding: .6em .8em; }
  .body .common-icon-box { padding: 14px 16px; }
  .body .alert-box { padding-top: 0; }
  .body .alert-box > p:first-child > strong:only-child { margin: 0 -16px 10px; padding: 6px 16px; }
  .body .article table { font-size: 14px; }
  .body .tk-talk::before { width: 48px; height: 48px; }
  .body .tk-talk > p { flex-basis: calc(100% - 62px); }
  .body .tk-talk > p + p { margin-left: 62px; }
  .body .tk-bar-row { flex-direction: column; }
  .body .tk-bar-row > div { flex: none !important; flex-direction: row; justify-content: flex-start; gap: 8px; padding: 8px 12px; }
}