@charset "UTF-8";
/*
	Theme Name: YADOKARI
	Template: swell
	Description: YADOKARI｜会社員のための副業・小さな事業メディア。オーナーズガイドの設計言語を継承。
	Version: 2.0.0
	Author: PrimeX
	License: GNU General Public License v2 or later
*/

/* =========================================================
   アートディレクション：資料（完全版オーナーズガイド）の設計言語
   ・地色は生成りのグレージュ #B8B09A、インクは #1A1A1A
   ・角丸を使わない。装飾は極細の全幅罫と、巨大な連番のみ
   ・見出しの下に必ず1本の罫。1辺だけの囲み枠は使わない
   ========================================================= */
:root,
.reach-site--yadokari {
  --yd-greige: #b8b09a;
  --yd-greige-dark: #a49b83;
  --yd-paper: #fbfaf7;
  --yd-ink: #1a1a1a;
  --yd-block: #232323;
  --yd-olive: #4a5238;

  --color_main: #1a1a1a;
  --color_main_dark: #000;
  --color_main_thin: #ece9e0;

  --r-accent: #1a1a1a;
  --r-accent-dark: #000;
  --r-accent-2: #4a5238;
  --r-accent-3: #8d866f;
  --r-bg: var(--yd-paper);
  --r-surface: var(--yd-greige);
  --r-panel: rgba(26, 26, 26, .05);
  --r-text: #1a1a1a;
  /* 本文の大きさは2段だけにする。近い寸法が並ぶと、ずれて見える */
  --yd-text: 16px;      /* 本文・リード・箇条書き */
  --yd-text-sm: 14px;   /* カードの補足・注記 */
  --yd-text-lg: 20px;   /* 節のしめくくり */
  --r-muted: #5f5a4d;
  --r-border: rgba(26, 26, 26, .22);
  --r-rule: rgba(26, 26, 26, .26);
  --r-track: rgba(26, 26, 26, .10);
  --r-track-strong: rgba(26, 26, 26, .5);
  --r-numeral: rgba(26, 26, 26, .2);
  --r-ink-block: var(--yd-block);
  --r-ink-block-text: #f2efe7;
  --r-recommend: rgba(26, 26, 26, .09);
  --r-radius: 0px;
  --r-max: 1140px;
}

.reach-site--yadokari {
  background: var(--yd-paper);
  color: var(--yd-ink);
  font-family: "Zen Kaku Gothic New", -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-feature-settings: "palt";
  letter-spacing: .01em;
}

/* ---- セクションの地色。生成り／紙／黒の3種を切り替える ---- */
.reach-site--yadokari .r-sec { background: var(--yd-paper); }
.reach-site--yadokari .r-sec--tint { background: var(--yd-greige); }
.reach-site--yadokari .r-sec--ink { background: var(--yd-block); color: #f2efe7; }
.reach-site--yadokari .r-sec--ink .r-sec__title,
.reach-site--yadokari .r-sec--ink .r-sec__lead { color: #f2efe7; }
.reach-site--yadokari .r-sec--ink { --r-text: #f2efe7; --r-muted: #b3aea1; --r-rule: rgba(242,239,231,.28); --r-accent: #f2efe7; --r-numeral: rgba(242,239,231,.22); --r-panel: rgba(242,239,231,.07); --r-track: rgba(242,239,231,.16); }

/* ---- 見出し：小さなラテン語ラベル＋巨大な和文＋全幅の罫 ---- */
.reach-site--yadokari .r-sec__head { margin-bottom: clamp(28px, 4vw, 48px); }
.reach-site--yadokari .r-sec__eyebrow {
  font-size: 11.5px; letter-spacing: .28em; font-weight: 700; text-transform: uppercase;
  color: var(--r-muted); margin-bottom: 14px;
}
.reach-site--yadokari .r-sec__title {
  font-size: clamp(26px, 4.4vw, 46px); font-weight: 900; line-height: 1.32; letter-spacing: -.005em;
  padding-bottom: 18px; border-bottom: 1px solid var(--r-rule);
}
.reach-site--yadokari .r-sec__lead { margin-top: 18px; font-size: clamp(14.5px, 1.7vw, 16.5px); line-height: 2.05; max-width: 40em; }

/* SWELLの既定見出し装飾を打ち消し、資料と同じ「罫のみ」にする */
.reach-site--yadokari .post_content h2 {
  background: none !important; border: 0 !important; border-bottom: 1px solid var(--r-rule) !important;
  color: var(--yd-ink) !important; padding: 0 0 14px !important; margin: 3em 0 1.2em !important;
  font-size: clamp(21px, 2.8vw, 28px) !important; font-weight: 900 !important; line-height: 1.5 !important;
}
.reach-site--yadokari .post_content h2::before,
.reach-site--yadokari .post_content h2::after { display: none !important; }
.reach-site--yadokari .post_content h3 {
  background: none !important; border: 0 !important; padding: 0 !important; margin: 2.2em 0 .8em !important;
  font-size: clamp(17px, 2.1vw, 20px) !important; font-weight: 700 !important;
}
.reach-site--yadokari .post_content h3::before,
.reach-site--yadokari .post_content h3::after { display: none !important; }
.reach-site--yadokari .post_content { font-size: 16px; line-height: 2.05; }
.reach-site--yadokari .post_content p { max-width: 40em; }
.reach-site--yadokari .post_content ul li { line-height: 2; }
.reach-site--yadokari .post_content table { border-collapse: collapse; font-size: 14.5px; }
.reach-site--yadokari .post_content table th,
.reach-site--yadokari .post_content table td { border: 0; border-bottom: 1px solid var(--r-rule); padding: 14px 12px; background: none; }
.reach-site--yadokari .post_content table thead th { border-bottom: 2px solid var(--yd-ink); font-weight: 700; }

/* ---- ボタン：角丸なし、太い下線的な存在感 ---- */
.reach-site--yadokari .r-btn { border-radius: 0; font-weight: 700; letter-spacing: .04em; }
.reach-site--yadokari .r-btn--primary { background: var(--yd-ink); color: var(--yd-paper); border-color: var(--yd-ink); }
.reach-site--yadokari .r-btn--primary:hover { background: var(--yd-olive); border-color: var(--yd-olive); color: #fff; }
.reach-site--yadokari .r-btn--ghost { border-color: var(--yd-ink); color: var(--yd-ink); }
.reach-site--yadokari .r-btn--ghost:hover { background: var(--yd-ink); color: var(--yd-paper); }
.reach-site--yadokari .r-sec--ink .r-btn--primary { background: var(--yd-paper); color: var(--yd-ink); border-color: var(--yd-paper); }
.reach-site--yadokari .r-sec--ink .r-btn--ghost { border-color: rgba(242,239,231,.6); color: #f2efe7; }

/* =========================================================
   ヒーロー
   ========================================================= */
.yd-hero { background: var(--yd-greige); color: var(--yd-ink); position: relative; overflow: hidden; }
.yd-hero__inner {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  min-height: clamp(460px, 62vh, 640px); align-items: center; gap: clamp(24px, 4vw, 56px);
}
.yd-hero__body { padding: clamp(48px, 7vw, 96px) 0; }
.yd-hero__eyebrow { font-size: 11.5px; letter-spacing: .3em; font-weight: 700; text-transform: uppercase; color: rgba(26,26,26,.62); margin: 0 0 22px; }
.yd-hero__title {
  font-size: clamp(30px, 5.6vw, 62px); font-weight: 900; line-height: 1.26; letter-spacing: -.015em;
  margin: 0 0 26px;
}
.yd-hero__rule { width: 100%; max-width: 460px; height: 1px; background: rgba(26,26,26,.32); margin: 0 0 26px; transform-origin: left; }
.yd-hero__sub { font-size: clamp(14.5px, 1.8vw, 17px); line-height: 2.1; margin: 0 0 34px; max-width: 30em; }
.yd-hero__note { margin: 26px 0 0; font-size: 12.5px; color: rgba(26,26,26,.62); line-height: 1.9; }
.yd-hero__figure { align-self: stretch; display: flex; align-items: center; justify-content: center; padding: clamp(20px, 4vw, 48px) 0; }
.yd-hero__figure .yd-art { width: 100%; max-width: 460px; color: rgba(26,26,26,.78); transform: translateY(var(--rv-parallax, 0)); }
@media (max-width: 900px) {
  .yd-hero__inner { grid-template-columns: 1fr; min-height: 0; }
  .yd-hero__figure { order: -1; padding-top: clamp(28px, 6vw, 48px); padding-bottom: 0; }
  .yd-hero__figure .yd-art { max-width: 320px; }
}

/* 線画のアニメーション */
.yd-art__line { stroke-dasharray: 500; stroke-dashoffset: 500; }
[data-reveal].is-in .yd-art__line,
.yd-hero .yd-art__line { animation: ydDraw 1.6s cubic-bezier(.2,.7,.3,1) .2s forwards; }
.yd-art__line--b { animation-delay: .45s; }
@keyframes ydDraw { to { stroke-dashoffset: 0; } }
.yd-art__room { opacity: 0; animation: ydFade .9s ease 1.1s forwards; }
@keyframes ydFade { to { opacity: 1; } }

/* =========================================================
   資料と同じ「巨大な連番＋見出し＋本文」の3カラム
   ========================================================= */
.yd-numbered { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.yd-numbered__item { padding: 30px 26px 30px 0; border-top: 1px solid var(--r-rule); }
.yd-numbered__no { display: block; font-size: clamp(38px, 5vw, 58px); font-weight: 900; line-height: 1; color: var(--r-numeral); letter-spacing: -.03em; margin-bottom: 10px; }
.yd-numbered__title { font-size: clamp(17px, 2.1vw, 20px); font-weight: 700; line-height: 1.55; margin: 0 0 10px; }
.yd-numbered__body { font-size: var(--yd-text-sm); line-height: 2; color: var(--r-muted); margin: 0; max-width: 30em; }

/* 2列で行ごとに並べる版（資料の「成功の本質」ページ） */
.yd-rows { display: grid; gap: 0 clamp(24px, 4vw, 56px); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.yd-row { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--r-rule); }
.yd-row__no { font-size: clamp(26px, 3vw, 34px); font-weight: 900; line-height: 1; color: var(--r-numeral); letter-spacing: -.02em; }
.yd-row__title { font-size: 16.5px; font-weight: 700; margin: 0 0 6px; line-height: 1.5; }
.yd-row__body { font-size: 13.5px; line-height: 1.95; color: var(--r-muted); margin: 0; }
.yd-row__body strong { color: var(--r-text); }

/* =========================================================
   強調ブロック（資料の黒帯／囲み）
   ========================================================= */
.yd-statement {
  background: var(--yd-block); color: #f2efe7; padding: clamp(26px, 4vw, 44px);
  text-align: center; font-size: clamp(16px, 2.2vw, 22px); font-weight: 700; line-height: 1.8;
}
.yd-statement small { display: block; margin-top: 12px; font-size: 13.5px; font-weight: 400; opacity: .8; line-height: 1.9; }

/* =========================================================
   3段階のネクストステップ
   ========================================================= */
.yd-ladder { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); background: var(--r-rule); }
.yd-ladder__item { background: var(--yd-paper); padding: clamp(24px, 3vw, 34px); display: flex; flex-direction: column; gap: 12px; }
.yd-ladder__step { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--r-muted); }
.yd-ladder__title { font-size: clamp(18px, 2.2vw, 22px); font-weight: 900; margin: 0; line-height: 1.45; }
.yd-ladder__body { font-size: 13.5px; line-height: 2; color: var(--r-muted); margin: 0; flex: 1; }

/* =========================================================
   注意書き
   ========================================================= */
.yd-disclaimer { padding: clamp(22px, 3vw, 30px) 0 0; border-top: 1px solid var(--r-rule); font-size: 13px; line-height: 2; color: var(--r-muted); }
.yd-disclaimer p { margin: 0 0 12px; }
.yd-disclaimer p:last-child { margin-bottom: 0; }
.yd-disclaimer strong { color: var(--r-text); font-weight: 700; }

/* =========================================================
   下層ページの構造（ブログ的にならないように）
   ========================================================= */
.yd-pagehead { background: var(--yd-greige); padding: clamp(36px, 6vw, 72px) 0 clamp(30px, 4vw, 52px); }
.yd-pagehead__eyebrow { font-size: 11.5px; letter-spacing: .28em; font-weight: 700; text-transform: uppercase; color: rgba(26,26,26,.6); margin: 14px 0 12px; }
.yd-pagehead__title { font-size: clamp(28px, 5vw, 52px); font-weight: 900; line-height: 1.28; margin: 0; letter-spacing: -.01em; }
.yd-pagehead__lead { margin: 20px 0 0; font-size: clamp(14.5px, 1.7vw, 16.5px); line-height: 2.05; max-width: 40em; }
.yd-pagehead .r-breadcrumb a, .yd-pagehead .r-breadcrumb span { color: rgba(26,26,26,.66); }

/* 目次（ジャンプナビ） */
.yd-sectionnav { position: sticky; top: var(--swl-fix_headerH, 0px); z-index: 20; background: var(--yd-paper); border-bottom: 1px solid var(--r-rule); }
.yd-sectionnav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.yd-sectionnav a {
  display: block; white-space: nowrap; padding: 16px 20px; font-size: 13.5px; font-weight: 700;
  text-decoration: none; color: var(--r-muted); position: relative;
}
.yd-sectionnav a::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 2px; background: var(--yd-ink); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.yd-sectionnav a:hover { color: var(--yd-ink); }
.yd-sectionnav a.is-current { color: var(--yd-ink); }
.yd-sectionnav a.is-current::after { transform: scaleX(1); }

/* 進捗バー */
.yd-progress { position: fixed; inset-inline: 0; top: 0; height: 2px; background: var(--yd-ink); transform: scaleX(0); transform-origin: left; z-index: 100; }

/* 本文と図解を交互に置く下層レイアウト */
.yd-block { padding: clamp(44px, 7vw, 90px) 0; }
.yd-block + .yd-block { border-top: 1px solid var(--r-rule); }
.yd-block--tint { background: var(--yd-greige); border-top: 0; }
.yd-block__grid { display: grid; gap: clamp(28px, 5vw, 64px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.yd-block__grid--narrow { grid-template-columns: minmax(0, 1fr); max-width: 46em; }
@media (max-width: 860px) { .yd-block__grid { grid-template-columns: 1fr; } }
.yd-block__label { font-size: 11.5px; letter-spacing: .26em; font-weight: 700; text-transform: uppercase; color: var(--r-muted); margin: 0 0 12px; }
.yd-block__title { font-size: clamp(22px, 3.2vw, 34px); font-weight: 900; line-height: 1.4; margin: 0 0 18px; }
.yd-block__text { font-size: var(--yd-text); line-height: 2.1; margin: 0 0 16px; }
.yd-block__text:last-child { margin-bottom: 0; }

/* リンクの下線 */
.reach-site--yadokari .post_content a:not(.r-btn) { color: var(--yd-ink); text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
.reach-site--yadokari .post_content a:not(.r-btn):hover { color: var(--yd-olive); }

/* フォーム・診断：角丸なし、罫線ベース */
.reach-site--yadokari .reach-form,
.reach-site--yadokari .reach-diagnosis,
.reach-site--yadokari .reach-sim {
  background: var(--yd-paper); border: 1px solid var(--r-rule); border-radius: 0;
}
.reach-site--yadokari .reach-form input,
.reach-site--yadokari .reach-form select,
.reach-site--yadokari .reach-form textarea,
.reach-site--yadokari .reach-sim__row input { border-radius: 0; border-color: rgba(26,26,26,.42); background: #fff; }
.reach-site--yadokari .reach-diagnosis__opt { border-radius: 0; border-color: var(--r-rule); }
.reach-site--yadokari .reach-form__next,
.reach-site--yadokari .reach-form__submit { background: var(--yd-ink); border-color: var(--yd-ink); border-radius: 0; }
.reach-site--yadokari .reach-form__back { border-radius: 0; }
.reach-site--yadokari .reach-form__row .req { background: var(--yd-ink); }

/* 追従CTA */
.reach-site--yadokari .r-stickycta { background: rgba(251,250,247,.97); border-top: 1px solid var(--r-rule); }


/* =========================================================
   共通テンプレート（事例・専門家・分類の一覧／詳細）を
   ブランドの見た目に合わせる
   ========================================================= */
.reach-site--yadokari .r-pagehead {
  background: var(--yd-greige); border-bottom: 0;
  padding: clamp(30px, 4vw, 52px) 0 clamp(32px, 5vw, 60px);
}
.reach-site--yadokari .r-pagehead__eyebrow { font-size: 11.5px; letter-spacing: .28em; text-transform: uppercase; color: rgba(26,26,26,.6); }
.reach-site--yadokari .r-pagehead__title { font-size: clamp(27px, 4.6vw, 46px); font-weight: 900; line-height: 1.3; letter-spacing: -.01em; }
.reach-site--yadokari .r-pagehead__lead { font-size: clamp(14.5px, 1.7vw, 16px); line-height: 2.05; }
.reach-site--yadokari .r-pagehead .r-breadcrumb a,
.reach-site--yadokari .r-pagehead .r-breadcrumb span { color: rgba(26,26,26,.66); }
.reach-site--yadokari .r-card__link { border-radius: 0; background: #fff; }
.reach-site--yadokari .r-casefacts { border-radius: 0; }
.reach-site--yadokari .r-empty__title { font-weight: 900; }


/* フッター：生成りの地に黒 */
.reach-site--yadokari .l-footer { background: var(--yd-greige); color: var(--yd-ink); }
.reach-site--yadokari .r-footer { --r-rule: rgba(26,26,26,.26); --r-muted: #5f5a4d; }
.reach-site--yadokari .r-footer__name { font-weight: 900; letter-spacing: .02em; }
.reach-site--yadokari .r-footer .r-btn--primary { background: var(--yd-ink); color: var(--yd-paper); border-color: var(--yd-ink); }
.reach-site--yadokari .r-footer .r-btn--ghost { border-color: var(--yd-ink); color: var(--yd-ink); }

/* ヒーローの写真（アイキャッチ設定時） */
.yd-hero__photo { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.yd-hero__caption { display: block; margin-top: 10px; font-size: 11.5px; color: rgba(26,26,26,.58); line-height: 1.7; }

/* 下層ページの本文：リードを大きく、箇条書きを罫で区切る */
.reach-site--yadokari .post_content > p { font-size: 16px; line-height: 2.1; margin: 0 0 1.7em; max-width: 38em; }
.reach-site--yadokari .post_content > p:first-child { font-size: clamp(17px, 2.1vw, 21px); line-height: 1.95; font-weight: 700; max-width: 32em; }
.reach-site--yadokari .post_content ul { margin: 0 0 2.2em; padding: 0; list-style: none; max-width: 42em; }
.reach-site--yadokari .post_content ul li {
  position: relative; padding: 18px 0 18px 30px; font-size: 15.5px; line-height: 2.05;
  border-bottom: 1px solid var(--r-rule);
}
.reach-site--yadokari .post_content ul li:first-child { border-top: 1px solid var(--r-rule); }
.reach-site--yadokari .post_content ul li::before {
  content: ""; position: absolute; left: 4px; top: 1.75em; width: 14px; height: 1px; background: var(--yd-ink);
}
.reach-site--yadokari .post_content ul li strong { display: block; font-size: 16.5px; font-weight: 900; margin-bottom: 4px; }

/* セクション末の一文（限界の整理→本題への橋渡し） */
.yd-lead-after { margin: clamp(28px, 4vw, 40px) 0 0; font-size: var(--yd-text-lg); line-height: 1.95; max-width: 34em; }
.yd-lead-after strong { font-weight: 700; }

/* 役割の要約（詳細は下層へ） */
.yd-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.yd-tasks li { display: grid; grid-template-columns: 8.5em 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--r-rule); align-items: baseline; }
.yd-tasks li:first-child { border-top: 1px solid var(--r-rule); }
.yd-tasks__who { font-size: 13px; font-weight: 900; letter-spacing: .04em; }
.yd-tasks__what { font-size: 15px; line-height: 2; color: var(--r-muted); }
@media (max-width: 600px) { .yd-tasks li { grid-template-columns: 1fr; gap: 6px; } }

/* ── 掲載原稿の構成に合わせて追加したもの ────────────── */

/* ヒーローに並べる「こうしたい」 */
.yd-hero__wishes { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 8px; }
.yd-hero__wishes li {
  position: relative; padding-left: 20px; font-size: clamp(14px, 1.7vw, 16px);
  line-height: 1.85; color: var(--yd-hero-text, inherit);
}
.yd-hero__wishes li::before {
  content: ""; position: absolute; left: 0; top: .78em;
  width: 10px; height: 1px; background: currentColor; opacity: .55;
}
.yd-hero__actions { margin: 0 0 14px; }

/* 本文の段落 */
/* 本文の段落。<p class="yd-prose"> の使い方でも同じ字送り・余白にする */
.yd-prose { max-width: 42em; }
.yd-prose p, .yd-prose > span, p.yd-prose {
  display: block; font-size: var(--yd-text); line-height: 2.05; margin: 0 0 1.15em;
}
.yd-prose p:last-child { margin-bottom: 0; }
p.yd-prose { margin-bottom: clamp(22px, 3vw, 32px); }
/* 900 は本文の途中で使うと字が大きくなったように見えるため、700 にとどめる */
.yd-prose strong { font-weight: 700; }

/* 節の中の小見出し */
.yd-subhead {
  font-size: clamp(17px, 2.1vw, 20px); line-height: 1.65; font-weight: 900;
  margin: clamp(40px, 5vw, 60px) 0 18px; padding-left: 14px;
  border-left: 3px solid var(--r-accent);
}


/* 小さい画面では、しめくくりの一文だけ少し落とす（本文との差は保つ） */
@media (max-width: 600px) {
  :root { --yd-text-lg: 17px; }
}

/* ── お立場ごとの提案（inc/segment.php） ───────────── */
.yd-seg { margin-top: clamp(32px, 4vw, 48px); }
.yd-seg__title {
  font-size: clamp(20px, 2.8vw, 30px); font-weight: 800; line-height: 1.65;
  letter-spacing: .01em; margin: 0 0 16px;
}
.yd-seg__lead { margin: 0 0 clamp(24px, 3vw, 34px); font-size: 15.5px; line-height: 2; color: var(--r-muted); max-width: 46em; }
.yd-seg__note { margin: clamp(24px, 3vw, 32px) 0 0; font-size: 13.5px; line-height: 1.95; color: var(--r-muted); }
.yd-seg__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }