@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/
    License: GNU General Public License
*/

/* ════════════════════════════════════════════════
   不変の集客 受講ページ
   構造と寸法 : 情報リトリート受講ページ（さくちょさん）をTTP
   色と書体   : 不変の集客LPに合わせる（赤×黒×ゴシック）
   ════════════════════════════════════════════════ */

:root{
  --fk-paper      : #fdf9ee;
  --fk-face       : #ffffff;
  --fk-ink        : #19170b;
  --fk-band       : #474b4b;
  --fk-sub        : #7b7f7f;
  --fk-rule       : #ececec;
  --fk-rule-strong: #d8d8d8;
  --fk-red        : #ff3131;
  --fk-red-dark   : #8e1c1c;
}

/* ─── 1. 土台 ─────────────────────────── */
body{
  background: var(--fk-paper);
  color: var(--fk-ink);
  font-family: "Noto Sans JP", "Hiragino Sans", "Helvetica Neue", Arial, sans-serif;
}
/* SWELLは2カラム前提で main を狭めるので、1カラムに開いてから700pxの柱を立てる */
body .l-content.l-container{ max-width: 100% !important; padding: 0 !important; display: block !important; }
.l-mainContent{ width: 100% !important; max-width: 100% !important; margin: 0 !important; }
.l-mainContent__inner{
  max-width: 700px !important; width: 100%; box-sizing: border-box;
  margin: 0 auto !important; padding: 60px 20px 72px !important;
}
.l-sidebar, .p-breadcrumb, .c-pageTitle{ display: none !important; }
.l-mainContent{ background: transparent; box-shadow: none; }
#content a{ color: var(--fk-red); text-underline-offset: 3px; }
#content a:hover{ color: var(--fk-red-dark); }

/* ─── 2. SWELLの初期デモを止める ────────── */
.p-mainVisual, .p-postSlider, .l-header__bar{ display: none !important; }
/* 17本あるのでPCでもハンバーガーに寄せる */
.l-header__gnav{ display: none !important; }
.l-header__menuBtn.sp_{ display: flex !important; }

/* ─── 2-2. ヘッダー（LPの赤い放射を持ち込む） ── */
.l-header{
  position: relative; overflow: hidden;
  background: var(--fk-ink);
  border-bottom: 2px solid var(--fk-red);
}
.l-header::before{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%),
    repeating-conic-gradient(from 0deg at 50% 6%,
      rgba(255,49,49,.20) 0deg 3deg, rgba(255,49,49,0) 3deg 9deg);
}
.l-header__inner{
  position: relative; min-height: 200px;
  justify-content: center !important;
}
.l-header__logo{
  margin: 0 !important;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.fk-tagline{
  margin: 0; color: #e6ded1;
  font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.26em; line-height: 1.6; text-align: center;
}
.c-headLogo__link, .c-headLogo{
  color: #fff !important;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.32em;
  line-height: 1.3;
  text-align: center;
}
.l-header__menuBtn{
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
}
.l-header__menuBtn .c-iconBtn{ color: #fff; }

/* ─── 3. トップ：ようこそ・導線 ─────────── */
.fk-hello{
  font-size: 1.9rem; font-weight: 700;
  letter-spacing: 0.02em; line-height: 1.4;
  margin: 0 0 8px;
}
.fk-lead{
  margin: 0 0 22px; color: var(--fk-sub);
  font-size: 0.9rem; line-height: 1.9;
}

/* ─── 4. トップ：公開状況カード ──────────
   さくちょ版のカウントダウンカードと同じ3層構造
   （見出し → 主役 → 罫線 → 注記）        */
.fk-status{
  border: 1px solid var(--fk-rule);
  border-left: 3px solid var(--fk-red);
  background: var(--fk-face);
  padding: 18px 20px 16px;
  margin: 0 0 26px;
}
.fk-status-head{
  margin: 0; font-size: 0.78rem; letter-spacing: 0.14em;
  color: var(--fk-sub); line-height: 1.6;
}
.fk-status-main{
  margin: 6px 0 8px; font-size: 1.25rem; font-weight: 700;
  letter-spacing: 0.06em; color: var(--fk-ink); line-height: 1.5;
}
.fk-status-next{
  margin: 0; font-size: 0.85rem; color: var(--fk-sub); line-height: 1.7;
}
.fk-status-next b{ color: var(--fk-ink); font-weight: 700; }
.fk-status-note{
  margin: 0; padding-top: 12px; border-top: 1px solid var(--fk-rule);
  font-size: 0.75rem; line-height: 1.7; color: var(--fk-sub);
}
.fk-status-next + .fk-status-note{ margin-top: 12px; }

/* ─── 5. トップ：一次CTA ─────────────── */
.fk-next{ margin: 0 0 40px; }
.fk-next-label{
  margin: 0 0 4px; font-size: 0.72rem;
  letter-spacing: 0.24em; color: var(--fk-sub);
}
.fk-next-title{
  margin: 0 0 18px; font-size: 1.22rem; font-weight: 700;
  line-height: 1.5; color: var(--fk-ink);
}
#content a.fk-cta{
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 56px; box-sizing: border-box; padding: 15px 24px;
  background: var(--fk-ink); color: #fff !important;
  font-size: 1rem; font-weight: 700; letter-spacing: 0.08em;
  text-decoration: none; border-radius: 2px;
  transition: background .2s;
}
#content a.fk-cta:hover{ background: var(--fk-red); color: #fff !important; }
#content a.fk-cta::after{
  content: ''; flex: 0 0 auto; width: 24px; height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='none' stroke='%23fff' stroke-width='1.4'/%3E%3Cpath d='M10 8.5l6 3.5-6 3.5z' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ─── 6. トップ：受講の道筋（縦タイムライン） ── */
.fk-path{ margin: 0 0 38px; }
.fk-path-head::before, .fk-group-head::before{
  content: ""; display: inline-block; width: 14px; height: 2px;
  background: var(--fk-red); margin-right: 10px; vertical-align: middle;
}
.fk-path-head{
  font-size: 0.72rem; font-weight: 400; letter-spacing: 0.24em;
  color: var(--fk-sub); margin: 0 0 8px;
  padding-top: 22px; border-top: 1px solid var(--fk-rule);
}
.fk-steps{ list-style: none; margin: 0; padding: 0; }
.fk-step{ position: relative; padding-left: 26px; list-style: none; }
.fk-step::before{
  content: ""; position: absolute; left: 5px; top: 0; bottom: 0;
  width: 1px; background: var(--fk-rule-strong);
}
.fk-step:first-child::before{ top: 20px; }
.fk-step:last-child::before{ bottom: auto; height: 20px; }
.fk-step::after{
  content: ""; position: absolute; left: 0; top: 15px;
  width: 11px; height: 11px; box-sizing: border-box;
  border: 1px solid var(--fk-rule-strong); border-radius: 50%;
  background: var(--fk-paper);
}
.fk-step.is-now::after{ border-color: var(--fk-red); background: var(--fk-red); }
.fk-step > a, .fk-step > span{
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 14px;
  min-height: 44px; padding: 8px 0;
  color: var(--fk-ink); text-decoration: none;
}
#content .fk-step > a{ color: var(--fk-ink); }
#content .fk-step > a:hover .fk-step-title{ color: var(--fk-red); }
.fk-step-no{
  flex: 0 0 auto; min-width: 3.6em;
  font-size: 0.95rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--fk-sub); font-variant-numeric: tabular-nums;
}
.fk-step-title{ font-size: 0.98rem; line-height: 1.5; }
.fk-step.is-now .fk-step-no{ color: var(--fk-red); }
.fk-step-state{
  flex: 0 0 auto; font-size: 0.66rem; letter-spacing: 0.12em; color: var(--fk-red);
}
/* 「いまここ」は赤いピル */
.fk-step.is-now .fk-step-state{
  background: var(--fk-red); color: #fff;
  border-radius: 999px; padding: 3px 10px;
}
/* 未公開 */
.fk-step.is-locked > span{ color: var(--fk-sub); cursor: default; }
.fk-step.is-locked .fk-step-title{ color: var(--fk-sub); }
.fk-step.is-locked .fk-step-state{ color: #b8b8b8; }

/* ─── 7. トップ：特典・サポート（丸と罫線なし） ── */
.fk-group{ margin: 0 0 34px; }
.fk-group-head{
  font-size: 0.72rem; font-weight: 400; letter-spacing: 0.24em;
  color: var(--fk-sub); margin: 0 0 4px;
  padding-top: 22px; border-top: 1px solid var(--fk-rule);
}
.fk-list{ list-style: none; margin: 0; padding: 0; }
.fk-list li{ list-style: none; padding-left: 26px; border-bottom: 1px solid var(--fk-rule); }
.fk-list li:last-child{ border-bottom: 0; }
.fk-list a, .fk-list span{
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 14px;
  min-height: 44px; padding: 8px 0;
  color: var(--fk-ink); text-decoration: none;
}
#content .fk-list a{ color: var(--fk-ink); }
#content .fk-list a:hover .fk-step-title{ color: var(--fk-red); }

/* ─── 8. 講義ページ ─────────────────── */
.post_content h2, .fk-article-title{
  font-size: 1.65rem; font-weight: 700; line-height: 1.5;
  text-align: center; margin: 8px 0 36px;
  background: none; border: 0; padding: 0;
}
.post_content h2::after, .fk-article-title::after{
  content: ""; display: block; width: 52px; height: 2px;
  background: var(--fk-red); margin: 16px auto 0;
}
.post_content p{ font-size: 1rem; line-height: 1.9; margin: 0 0 1.5em; }

/* 動画（Vimeo 16:9） */
.fk-video{
  position: relative; width: 100%; padding-top: 56.25%;
  margin: 0 0 24px; background: var(--fk-ink);
}
.fk-video iframe{
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* コメントの例 */
.fk-example{
  background: var(--fk-face); border: 1px solid var(--fk-rule);
  border-radius: 6px; padding: 18px 22px 14px; margin: 28px 0 32px;
}
.fk-example-label{
  font-size: 0.8rem; letter-spacing: 0.12em;
  color: var(--fk-sub); margin: 0 0 0.5em;
}
.fk-example p{ margin: 0 0 0.6em; font-size: 0.95rem; line-height: 1.85; }
.fk-example p:last-child{ margin-bottom: 0; }

/* 次へ */
.fk-nav{ margin: 44px 0 0; padding-top: 30px; border-top: 1px solid var(--fk-rule); }
.fk-nav-label{ margin: 0 0 12px; font-size: 0.72rem; letter-spacing: 0.24em; color: var(--fk-sub); }
.fk-nav-sub{ margin: 14px 0 0; font-size: 0.85rem; }
#content .fk-nav-sub a{ color: var(--fk-sub); }
#content .fk-nav-sub a:hover{ color: var(--fk-ink); }

/* ─── 9. コメント ───────────────────── */
.p-commentArea{
  margin: 34px 0 0; padding: 22px;
  background: var(--fk-face); border: 1px solid var(--fk-rule);
  border-radius: 0; box-shadow: none;
}
.p-commentArea .comment-body{ background: rgba(255,49,49,.06); }

/* ─── 10. フッター ──────────────────── */
.l-footer{ background: var(--fk-ink); color: #fff; }
.l-footer a{ color: #fff; }

/* ─── 11. スマホ ────────────────────── */
@media (max-width: 959px){
  .l-mainContent__inner{ padding: 32px 18px 56px !important; }
  .l-header__inner{ min-height: 108px; }
  .c-headLogo__link, .c-headLogo{ font-size: 1.15rem; letter-spacing: 0.24em; }
  .l-header__logo{ gap: 8px; }
  .fk-tagline{ font-size: 0.62rem; letter-spacing: 0.18em; }
  .fk-hello{ font-size: 1.5rem; }
  #content a.fk-cta{ padding: 15px 18px; }
  .fk-next{ margin-bottom: 26px; }
  .post_content h2, .fk-article-title{ font-size: 1.4rem; }
}