/*
Theme Name: tousenkyou
Author: Aya Uesugi
Version: 1.0
Description: とうせんきょう書籍LPテーマ
Text Domain: tousenkyou
*/

/* ====== 最小上書き（差し替え専用）====== */
:root{
  --wine: #7C1F2B;     /* ベース：ワインレッド */
  --wine-light: #A8464F; 
  --accent-yellow: #F8D74A;  /* 差し色：黄色 */
}

/* Base */
html, body { 
    margin:0; 
    padding:0; 
    background:#fff; 
    color:#111; 
    font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif; 
    line-height:1.85; 
    letter-spacing:0.4px; 
}
/* 背景の全体トーン（ワインを少し差す） */
body{
  background-color: #fffaf8;
  color: #222;
}
section .container {
  margin-left: auto;
  margin-right: auto;
}
img { 
    max-width:100%; 
    height:auto; 
    display:block; 
}
a { 
    color:#111; 
    text-decoration:none; 
}
section { 
    padding:100px 0; 
}
.container { 
    width:100%; 
    max-width:1040px; 
    margin:0 auto; 
}
.container--narrow { 
    width:90%; 
    max-width:980px; 
    margin:0 auto; 
}

/* Type */
h1, h2, h3, h4 { 
    margin:0 0 20px 0; 
    font-weight:700; 
    line-height:1.35; 
}
h1 { 
    font-family:"Noto Serif JP","Hiragino Mincho ProN",serif; 
}
h2 { 
    font-size:30px; 
    font-family:"Noto Serif JP","Hiragino Mincho ProN",serif; 
    border-left:6px solid #FFD400; 
    padding-left:10px; 
    color: var(--wine);
    text-align: start;
}
h3 { 
    font-size:20px; 
    color: var(--wine)
}
p { 
    font-size:18px; 
    color:#222; 
    margin:0 0 16px 0; 
}
.small { 
    font-size:14px; 
    color:#666; 
}
.sep { 
    height:1px; 
    background:#eee; 
    border:0; 
    margin:32px 0; 
}

/* Buttons（形状は維持。hoverのみワイン） */
.btn { 
    display:inline-block; 
    padding:12px 22px; 
    border:2px solid #111; 
    border-radius:6px; 
    background:#fff; 
    color:#111; 
    font-weight:bold; 
    transition:0.25s; 
    text-align:center;
    margin: 0 auto; 
}
.btn:hover { 
    background:#7A1E2B; 
    color:#fff; 
    border-color:#7A1E2B; 
}
.btn--primary { 
    background:#FFD400; 
    color:#7A1E2B; 
    border-color:#fff;
    border: none;
    padding: 14px 26px;
    border-radius: 6px;
    font-weight: 700;
    transition: 0.3s; 
}
.btn--primary:hover { 
    background:#7A1E2B; 
    border-color:#7A1E2B; 
}
.btn--nomal {
    background:#111; 
    color:#fff; 
    border-color:#fff;
    border: none;
    padding: 14px 26px;
    border-radius: 6px;
    font-weight: 700;
    transition: 0.3s;
}
.btn--outline { 
    background:#fff; 
    color:#111; 
}
.btn--ghost { 
    background:transparent; 
    border:2px solid #111; 
}
@media screen and (max-width:900px){
    .cta--row,
    .cta--center{
        text-align: center;
    }
    .btn--ghost,
    .btn--nomal,
    .btn--primary{
        margin: 5px;
    }
    a.btn{
        align-items: center;
    }
    .fv-copy .btn--ghost{
    width: 100%;
    }
}
/* ヘッダー（固定＆白背景) */
/* ===== 追従ヘッダー（デスクトップ） ===== */
.site-header {
  position: sticky;      /* ページ上部で追従 */
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.92);
  border-bottom: 1px solid #eee;
  transition: box-shadow 0.25s;
}
.site-header.is-sticky {
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

.site-header__inner {
  width: 90%;
  max-width: 1120px;
  margin: 0 auto;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
header.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 5%;
}
.brand { 
    display: inline-flex; 
    align-items: center; 
}
.brand img { 
    display: block; 
    margin-top: 10px;
}
/* メニュー（PC） */
.site-nav { 
    display: block; 
}
.site-menu { 
    display: flex; 
    gap: 26px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
}
.site-menu a {
  display: inline-block;
  padding: 8px 0;
  color: #111;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}
.site-menu a:hover { 
    color:#000; 
    border-bottom-color:#FFD400; 
}

/* ハンバーガー（ボタン） */
.nav-toggle {
  display: none;         /* PCでは非表示 */
  width: 42px;
  height: 42px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.nav-toggle .bar {
  display: block;
  width: 20px;
  height: 2px;
  background: #111;
  margin: 4px auto;
  transition: transform 0.25s, opacity 0.25s;
}
header.site-header nav a:hover {
  color: #7C1F2B;
}
/* ===== スマホ切替 ===== */
@media screen and (max-width: 900px){
  .nav-toggle { 
    display: inline-flex;
    align-items:center;
    justify-content:center;
    width:40px; 
    height:40px;
    font-size:26px; 
    line-height:1;
    border:0; 
    background:transparent;
    color:#222; 
    cursor:pointer;
    z-index:1002; /* ドロワーより前面 */ 
  }
  /* 開いたときは右上に固定（✕が常に見える） */
  .nav-toggle.is-open{
    position:fixed; 
    top:12px; 
    right:14px;
    color:#111;
  }

  /* PC横並びメニューを隠し、ドロワーに */
  .site-nav {
    position: fixed;
    inset:0 auto 0 0;
    width: 78%;
    max-width: 300px;
    height: 100%;
    background: #fff;
    transform:translateX(-100%);
    transition:transform .3s ease;
    box-shadow:8px 0 24px rgba(0,0,0,.18);
    z-index:1001; /* ボタンより背面 */
    padding:68px 16px 24px; /* 見出し分余白 */
    overflow:auto;
  }
  .site-nav.is-open { 
    transform: translateX(0); 
}

  .site-menu { 
    display: block;
    gap: 0;
  }
  .site-menu li { 
    border-bottom: 1px solid #f0f0f0; 
}
  .site-menu a { 
    display:block; 
    padding:14px 6px; 
}

  /* ハンバーガー → × 変形 */
  .nav-toggle.is-open .bar:nth-child(1){ 
    transform: translateY(6px) rotate(45deg); 
}
  .nav-toggle.is-open .bar:nth-child(2){ 
    opacity: 0; 
}
  .nav-toggle.is-open .bar:nth-child(3){ 
    transform: translateY(-6px) rotate(-45deg); 
}

  /* 本文スクロール固定 */
  body.lock { 
    overflow: hidden; 
}
}
/* First View */
#fv {
  position: relative;
  isolation: isolate;
  color: #111;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(to bottom, #A8464F 0%, #7C1F2B 100%);
  min-height: 720px;
  padding: 120px 0;
}
/* 六角形ハニカム：線のみ、医療トーンの黄の上に薄く重ねる */
#fv::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='62' viewBox='0 0 60 52'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.20' stroke-width='1'%3E%3Cpath d='M15 1 H45 L57 26 L45 51 H15 L3 26 Z'/%3E%3Cpath d='M-15 1 H15 L27 26 L15 51 H-15 L-27 26 Z'/%3E%3Cpath d='M15 -25 H45 L57 0 L45 25 H15 L3 0 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:320px 250px;   /* 六角の大きさ（密度） */
  background-repeat:repeat;
  mix-blend-mode:screen;     /* 背景グラデに馴染ませる */
  opacity:0.2;
  z-index:0;
}

#fv .container {
  position: relative;
  width: 92%;
  max-width: 1160px;
  margin: 0 auto;
  z-index: 2;
}

/* ===== スライダー構造 ===== */
.fv-slider {
  width: 100%;
}
.fv-slide.is-split{
  position:relative;
  isolation:isolate;       /* 子のz-index基準を分離 */
}

/* ===== Slick調整（フェード時に高さ潰れ防止） ===== */
.fv-slider .slick-list,
.fv-slider .slick-track {
  height: 100%;
}

.fv-slide {
  display: flex;
  align-items: center;
  gap: 40px;
  min-height: 560px;
}
/* --- Slickの上書き：必ず slick.css の後に置く --- */
.fv-slider .fv-slide.slick-slide{
  display:flex;            /* ← 横並びを強制（blockを打ち消す） */
  align-items:center;
  gap:40px;
  min-height:560px;
}
/* ========== 1枚目・2枚目：3枚目と同じバランスに ========== */
/* 中央揃え→上寄せ（Slickのクローンに影響されにくい :nth-of-type 指定） */
.fv-slider > .fv-slide:nth-of-type(1),
.fv-slider > .fv-slide:nth-of-type(2){
  align-items: flex-start;
}

/* テキストだけ上に余白（= 3枚目と同値） */
.fv-slider > .fv-slide:nth-of-type(1) .fv-copy,
.fv-slider > .fv-slide:nth-of-type(2) .fv-copy{
  padding-top: 80px;
}
/* 左右比率 */
.fv-copy{  
    flex:1.1 1 0; 
    min-width:0; 
    color: #fffaf8;
}
#fv .fv-copy .fv-title {
  width: 100%;
  max-width: 760px;          /* 少し広げる（pxで明示） */
}
.fv-visual{ 
    flex:1 1 0;  
    min-width:0; 
}
/* ヒーロー内の実コンテンツは上にくる */
.fv-slide.is-split .fv-copy,
.fv-slide.is-split .fv-visual{ 
  position:relative; 
  z-index:1; 
}
/* ===== 左カラム：テキスト ===== */
.fv-copy h1 {
  font-size: 52px;                /* 要望に合わせて固定値で明快に */
  line-height: 1.4;
  font-weight: 700;
  margin: 0 0 20px;
}
.fv-copy p,
.fv-copy .lead{
  font-size: 21px;
  line-height: 1.8;
  margin: 0 0 24px;
  color: #fffaf8;;
  opacity: 0.9;
}
.fv-copy .cta {
  display: flex;
  gap: 14px;
}
.fv-title {
  position: relative;
  line-height: 1.25;
}

/* ===== 右カラム：画像エリア ===== */
.fv-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 600px;
  border-radius: 8px;
  overflow: visible;
  box-shadow: none;
  background-color: transparent;
}
.fv-visual img {
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
}
/* Slide1：先生写真＋右下に小さめ書籍スタンプ */
.fv-photo{
  box-shadow:0 12px 28px rgba(0,0,0,.12);
}
/* ===== 書籍スタンプ（Slide1右下重ね） ===== */
.book-stamp {
  position: absolute;
  right: 4px;
  bottom: -4px;
  width:140px;
  border-radius: 8px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transform: rotate(-1deg);
}
/* ========== 1枚目：スタンプを小さく＆内側へ、img共通指定を上書き ========== */
/* 先生写真の収まり（見栄え維持） */
.fv-slider > .fv-slide:nth-of-type(1) .fv-photo{
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
}
/* スタンプは共通 img ルールを上書き（同等の特異性＋後勝ち） */
.fv-slider > .fv-slide:nth-of-type(1) .book-stamp{
  width: 120px;       /* 200→120 に縮小 */
  max-width: none;    /* 共通の max-width:100% を打ち消す */
  height: auto;
  right: 6px;
  bottom: -6px;
  transform: rotate(-1deg);
}
/* ===== 2枚目の書籍大（単体表示用） ===== */
.fv-book-large {
  max-width: 420px;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
}
/* 本の見栄え（安全幅） */
.fv-slider > .fv-slide:nth-of-type(2) .fv-book-large{
  max-width: 420px;   /* 既定サイズを保持しつつ */
  width: 100%;
  height: auto;
}
.fv-visual img.book-stamp{
  width:160px;      /* 好みで100–160pxに調整OK */
  height:auto;
  max-width:none;   /* 汎用 img の max-width:100% を無効化 */
}
.cta--row { 
  margin-top: 18px; 
}
.btn {
  width: 200px;
  font-size: 18px;
  display:inline-block; 
  padding:12px 22px; 
  border:2px solid #111; 
  border-radius:6px; 
  background:#fff; 
  color:#111; 
  font-weight:bold; 
  transition:0.25s; 
  text-align:center; 
}
.btn:hover { 
    background:#7A1E2B; 
    color:#fff; 
    border-color: #7A1E2B;
}
.btn--nomal {
    background:#111; 
    color:#fff; 
    border-color:#111; 
}
.btn--primary { 
  background: var(--accent-yellow);
  color: var(--wine);
  border: 1px solid var(--accent-yellow);
  transition: .3s ease; 
}
.btn--primary:hover { 
  background: var(--wine);
  color: #fff;
  border-color: var(--wine); 
}
.btn--ghost{
  border-color: var(--accent-yellow);
  color: var(--wine);
}
.btn--ghost:hover{
  background: var(--accent-yellow);
  color: var(--wine);
}
.lead { 
    color:#222; 
}
#fv .h1-line { 
    /*position:relative; */
    display:inline-block;
    /*padding-bottom: 14px; */
}
#fv .h1-line::after { 
    content:""; 
    position:absolute; 
    left:0; 
    bottom:0; 
    width:50%; 
    height:6px; 
    background:var(--accent-yellow); 
}
.only-md { 
  display: none; 
}

/* ---- Book ---- */
#book h2{ 
  margin-bottom:28px; 
}
.book-grid{ 
  display:flex; 
  align-items:flex-start; 
  gap:24px; 
}
.book-text{ 
  flex:1 1 0; 
  min-width:280px; 
}
.book-text p{ 
  font-size:16px; 
}
.book-side{
  flex:0 0 370px; 
  border:1px solid #e9e9e9; 
  border-radius:8px; 
  padding:10px; 
  background:#fff;
}
.book-side img{ 
  width:100%; 
  height:540px; 
  border-radius:6px; 
  display:block; 
}

/* よく耳にする声 */
#book .book__voices{
  background:#FFFDF2; 
  border:1px solid #F3EBD3; 
  border-radius:12px; 
  padding:24px; 
  margin-top:28px;
}
#book .book__voices .h3{
  margin:0 0 12px 0; 
  border-left:6px solid #FFD400; 
  padding-left:10px; 
  font-size:32px;
}
#book .book__voices .list--bullets li{
  background:#fff; 
  border:1px solid #E9E9E9; 
  border-radius:8px; 
  padding:14px 18px; 
  margin-bottom:10px;
}

/* この本が選ばれる理由 */
.book__reasons{ 
  padding:60px 0; 
}
.book__reasons .h3{
  text-align:center; 
  margin:40px auto; 
  border-bottom:4px solid #FFD400; 
  padding-bottom:10px; 
  width:40%; 
  font-size:32px;
}
.reason-item{
  display:flex; 
  align-items:flex-start; 
  gap:40px; 
  width:90%; 
  max-width:1000px; 
  margin:0 auto 60px;
}
.reason-item.reverse{ 
  flex-direction:row-reverse; 
}
.reason-img{ 
  flex:0 0 48%; 
}
.reason-img img{ 
  width:100%; 
  height:auto;
   border-radius:8px; 
   box-shadow:0 8px 20px rgba(0,0,0,.1); 
  }
.reason-text{ 
  flex:1 1 auto; 
}
.reason-text h4{ 
  font-size:23px; 
  font-weight:700; 
  color:#111; 
  margin-bottom:14px; 
}
.reason-text p{ 
  line-height:1.8; 
  color:#333; 
  font-size:18px; 
  margin-top:25px; 
}

/* Scroll reveal */
.reveal{ 
  opacity:0; 
  transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--d,0ms); 
  will-change:opacity,transform;
}
.reveal.is-in{ 
  opacity:1; 
  transform:translateY(0); 
}
.reveal-stagger > .reveal{ --d:0ms; }
.reveal-stagger > .reveal:nth-child(2){ --d:120ms; }
.reveal-stagger > .reveal:nth-child(3){ --d:240ms; }
.reveal-stagger > .reveal:nth-child(4){ --d:360ms; }

.list, .list--bullets{ 
  list-style:none; 
  margin:20px 0 0; 
  padding:0; 
}
.list li, .list--bullets li{ 
  border:1px solid #e9e9e9; 
  border-radius:8px; 
  background:#fff; 
  padding:14px 18px; 
  margin-bottom:10px; 
}

.card{ 
  border:1px solid #e9e9e9; 
  border-radius:8px; 
  background:#fff; 
  padding:20px; 
  margin-bottom:20px; 
}
.h4{ 
  font-size:18px; 
  margin:0 0 10px 0; 
}

/* コンセプト */
#concept{ 
  background:#f8f8f8; 
  color:#1a1a1a; 
}
#concept h2{ 
  color:var(--wine); 
  border-left-color:#FFD400; 
}
#concept h3{ 
  color:#fff; 
  font-size:20px; 
}
#concept p{ 
  color:#1a1a1a; 
}
#concept .essay{ 
  background:#1a1a1a; 
  border:1px solid #333; 
  border-radius:8px; 
  padding:20px; 
}
#concept .essay p{ 
  color:#fff; 
}
.cta--center{ 
  margin:20px 0; 
  text-align: center;
}

/* レビュー直前帯 */
.band.band--core{
  margin:20px 0 36px; 
  padding:14px 18px;
  border:1px solid #F0E0A0; 
  border-radius:10px;
  background:rgba(248,215,74,.15);
  font-weight:600; 
  font-size:23px;
}

/* レビュー */
#reviews{ 
  background:#fffef6; 
}
.review{ 
  width:100%; 
  display:flex; 
  align-items:flex-start; 
  margin-bottom:20px; 
}
.avatar{ 
  width:100px; 
  height:100px; 
  margin-right:12px; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
}
ul.reviews{ 
  padding-left:0; 
}
.bubble{
  border:1px solid rgba(124,31,43,.15); 
  border-radius:8px;
  background:rgba(124,31,43,.03); 
  padding:12px 14px; 
  position:relative;
}
.bubble:before{
  content:""; 
  position:absolute; 
  left:-12px; 
  top:18px;
  border-top:8px solid transparent; 
  border-bottom:8px solid transparent; 
  border-right:12px solid #e9e9e9;
}
.bubble:after{
  content:""; 
  position:absolute; 
  left:-9px; 
  top:18px;
  border-top:7px solid transparent; 
  border-bottom:7px solid transparent; 
  border-right:11px solid #fff;
}
.h4::before{
  content:""; 
  display:inline-block; 
  width:4px; 
  height:20px; 
  margin-right:10px; 
  background:var(--accent-yellow); 
  vertical-align:middle;
}
.stars{ 
  color:var(--accent-yellow); 
  font-weight:bold; 
  font-size:14px; 
  margin-bottom:6px; 
  display:block; 
}

/* 著者 */
.author-emph, .author-credit{ 
  color:var(--wine); 
  font-weight:600; 
}
.author-emph{ 
  font-weight:700; 
  margin:8px 0 6px; 
}
.author-credit{ 
  color:#333; 
}
#author .author-grid{ 
  display:flex; 
  gap:24px; 
  flex-wrap:nowrap; 
  align-items:flex-start; 
  justify-content:space-between; 
}
#author .author-photo{ 
  width:32%; 
}
#author .author-photo img{ 
  width:100%; 
  border:1px solid #e9e9e9; 
  border-radius:8px; 
  background:#fff; 
}
#author .author-bio{ 
  width:64%; 
}
.bullet-list{ 
  list-style:none;
  padding:0; 
  margin:0 0 14px 0; 
  }
.bullet-list li{ 
  position:relative; 
  padding-left:18px; 
  margin-bottom:6px; 
}
.bullet-list li:before{ 
  content:""; 
  position:absolute; 
  left:0; 
  top:10px; 
  width:6px; 
  height:6px; 
  border-radius:40%; 
  background:#111; 
}
.achv-label{ 
  display:inline-block; 
  font-weight:700; 
  font-size:14px; 
  color:#111; 
  background:#fff; 
  border-left:6px solid #FFD400; 
  padding:2px 8px; 
  margin:18px 0 8px 0; 
}
.msg-box{ 
  background:#FFF3BF; 
  border:1px solid #F0E0A0; 
  border: radius 8px; 
  padding:16px; 
}
.msg-title{ 
  font-weight:700; 
  margin:0 0 8px 0; 
}
.msg-box strong{ 
  color:var(--wine); 
  font-weight:900; 
  font-size:18px; 
}
.author__mini{ 
  display:block; 
  color:#777; 
  font-size:13px; 
  margin-top:10px;
}

/* ギャラリー */
#gallery{ 
  background:#fff; 
  padding:100px 0; 
}
#gallery .container{ 
  width:90%; 
  max-width:1040px; 
  margin:0 auto; 
  padding:0; 
}
#gallery h2{
  width:90%; 
  max-width:1040px; 
  margin:0 auto 24px;
  border-left:6px solid #FFD400; 
  padding-left:10px; 
  margin-bottom:24px;
}
#gallery .slider{ 
  position:relative; 
  width:100%; }
#gallery .slides .slide{ 
  overflow:hidden; 
  border:1px solid #e9e9e9; 
  border-radius:8px; 
}
#gallery .slides .slide img{ 
  width:100%; 
  height:460px; 
  object-fit:cover; 
  object-position:center; 
  border-radius:8px; 
}

.slide{
  position:relative; 
}
.slide img{ 
  display:block; 
  width:100%; 
  height:420px; 
  object-fit:cover; 
  border-radius:8px; 
}
.slide-caption{
  position:absolute; 
  inset:auto 0 0 0; 
  padding:14px 18px; 
  color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.45) 40%,rgba(0,0,0,.60) 100%);
  border-radius:0 0 12px 12px; 
  display:grid; 
  gap:4px;
}
.slide-caption strong{ 
  font-weight:700; 
  font-size:clamp(14px,2.5vw,18px); 
  letter-spacing:.02em; 
}
.slide-caption span{ 
  opacity:.9; 
  font-size:clamp(12px,2vw,14px); 
}
#gallery .section-sub{ 
  margin:-6px 0 18px; 
  color:#6b6b6b; 
  font-size:17px; 
  padding: 0 50px;
}

/* Lecture（施術予約ブロックのみ利用） */
#lecture{
  background:#fafafa; 
  border-top:1px solid #eee; 
  padding:80px 0; 
  text-align:center;
}
#lecture .container{
  max-width:1040px; 
  padding-left:16px; 
  padding-right:16px; 
  margin-left:auto;
  margin-right:auto;
}
#lecture .cta2-wrap{
  display:flex; 
  flex-direction:column; 
  gap:80px; 
  align-items:center;
}
#lecture .cta2-row{
  display:flex; 
  align-items:center; 
  justify-content:center; 
  gap:40px; 
  flex-wrap:wrap;
}
#lecture .cta2-row:nth-child(even){ 
  flex-direction:row-reverse; 
}
#lecture .cta2-text{ 
  flex:1 1 50%; 
  font-size:1.05rem; 
  line-height:1.9; 
  text-align:start; 
}
.cta2-visual{ 
  flex:1 1 45%; 
}

/* テキストと画像を等幅 */
#lecture .cta2-text, 
#lecture .cta2-visual{
  width: 48%;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;        /* 箱自体を中央に */
  text-align: left;
}
#lecture .cta2-visual img{
  width:100%; 
  height:auto; 
  display:block; 
  border-radius:8px; 
  box-shadow:0 3px 10px rgba(0,0,0,.08);
}
#lecture .cta2-btn{ 
  display:block; 
  margin-top:1.8em; 
  text-align:center; 
}

/* バナー画像 */
.lecture-banner{
  display:block; 
  width:400px; 
  height:auto; 
  margin:20px auto;
  border-radius:5px; 
  box-shadow:0 3px 8px rgba(0,0,0,.1);
  transition:transform .4s ease, box-shadow .4s ease;
}
.lecture-banner:hover{ 
  transform:scale(1.07); 
  box-shadow:0 6px 18px rgba(0,0,0,.25); 
}

/* フッター */
.footer{
  border-top:1px solid #eee; 
  padding:24px 0; 
  text-align:center; 
  color:#666; 
  font-size:14px;
}
.site-footer .container{ 
  text-align:center; 
}

/* =========================
   モバイル（max-width:900px）
   ========================= */
@media screen and (max-width:900px){
  html, body { overflow-x: hidden; }

  /* Buttons */
  .cta--row, .cta--center{ 
    text-align:center; 
  }
  .btn--ghost, 
  .btn--nomal, 
  .btn--primary{ 
    margin:5px; 
  }
  a.btn{ 
    align-items:center; 
  }
  .fv-copy .btn--ghost{ 
    width:100%; 
  }

  /* Header（ドロワー） */
  .nav-toggle{
    display:inline-flex; 
    align-items:center; 
    justify-content:center;
    width:40px; 
    height:40px; 
    font-size:26px; 
    line-height:1; 
    border:0;
    background:transparent; 
    color:#222; 
    cursor:pointer; 
    z-index:1002;
  }
  .nav-toggle.is-open{ 
    position:fixed; 
    top:12px; 
    right:35px; 
    color:#111; 
  }
  .site-nav{
    position:fixed; 
    inset:0 auto 0 0; 
    width:78%; 
    max-width:300px; 
    height:100%;
    background:#fff; 
    transform:translateX(-100%); 
    transition:transform .3s ease;
    box-shadow:8px 0 24px rgba(0,0,0,.18); 
    z-index:1001; 
    padding:68px 16px 24px; 
    overflow:auto;
  }
  .site-nav.is-open{ 
    transform:translateX(0); 
  }
  .site-menu{ 
    display:block; 
    gap:0; 
  }
  .site-menu li{ 
    border-bottom:1px solid #f0f0f0; 
  }
  .site-menu a{ 
    display:block; 
    padding:14px 6px; 
  }
  .nav-toggle.is-open .bar:nth-child(1){ 
    transform:translateY(6px) rotate(45deg); 
  }
  .nav-toggle.is-open .bar:nth-child(2){ 
    opacity:0; 
  }
  .nav-toggle.is-open .bar:nth-child(3){ 
    transform:translateY(-6px) rotate(-45deg); 
  }
  body.lock{ 
    overflow:hidden; 
  }

  /* First View（要求通り現状維持・必要最低限のみ） */
  #fv{ 
    padding:60px 0; 
  }
  .fv-slide{ 
    flex-direction:column; 
    gap:24px; 
    text-align:center; 
    min-height:auto; 
  }
  .fv-slider .fv-slide:first-child{ 
    align-items:center; 
    /*padding-top:0; */
  }
  /*.fv-copy{ 
    width:100%; 
  }*/
  .fv-copy h1{ 
    font-size:26px;
  }
  .fv-copy h1 .h1-line{ 
    display:inline; 
  }
  .only-md{ 
    display:block; 
  }
  .fv-title{ 
    padding-bottom:.8em; 
    text-align:left; 
  }
  .fv-title::after{ 
    bottom:-.6em; 
    width:40%; 
  }

  #fv .fv-copy .fv-title {
    width: 100%;
    max-width: 680px;
  }
  /* スマホ専用改行 */
  .sp-none{
    display: none;
  }
  .sp-br { 
    display: inline; 
  }
  #fv .fv-slider > .fv-slide:nth-of-type(1) .fv-copy h1 {
    font-size: 22px;
    line-height: 1.9;
    text-align: left;
    margin: 0 auto 14px;
    width: 100%;
    max-width: 360px;  
  }

  /* 改行を明示（HTMLの <br> をそのまま生かす） */
  #fv .fv-slider > .fv-slide:nth-of-type(1) .fv-copy h1 br {
    display: none;
  }

  /* 3行目下にアンダーバー */
  #fv .fv-slider > .fv-slide:nth-of-type(1) .h1-line {
    display: inline-block;
    position: relative;
    padding-bottom: 10px; /* 下線との距離 */
  }

  #fv .fv-slider > .fv-slide:nth-of-type(1) .h1-line::after {
    content: "";
    display:block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;       /* 行全体に合わせる */
    height: 6px;
    margin-top: 10px;
    background-color: #F8D74A; /* 黄色ライン */
  }
  .fv-copy p, .fv-copy .lead{ 
    font-size:18px; 
  }
 /* .fv-visual{ 
    width:100%; 
    max-width:480px; 
    height:auto; 
    margin:0 auto; 
  }*/
  .fv-visual img{ 
    width:100%; 
    height:auto; 
    max-height:480px; 
    object-fit:contain; 
    padding:0; 
  }
  #fv .fv-slide.is-split {
    display: flex;
    flex-direction: column;
    justify-content: center;  /* 上下中央 */
    align-items: center;      /* 左右中央 */
    text-align: center;
    margin: 0 auto;
  }

  #fv .fv-copy,
  #fv .fv-visual {
    width: 90%;
    max-width: 420px;
    margin: 0 auto;
  }

  .book-stamp{ 
    right:8px; 
    bottom:-150px; 
    width:120px; 
    transform:none; 
  }
  .fv-book-large{ 
    max-width:300px; 
  }

  /* FV 全体の箱を中央＆全幅にする */
  #fv .container{
    width: 100%;
    max-width: 430px;   /* iPhone系の幅。もっと広くしたければここを変える */
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }

  /* スライド自体も中央寄せ＆全幅 */
  #fv .fv-slider{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  #fv .fv-slide{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;    /* 左右中央 */
    justify-content: center;/* 上下も中央に寄せたい場合 */
    text-align: left;       /* 文字を左揃えのままにしたければ left */
  }

  /* テキストと画像の箱を同じ幅で真ん中に置く */
  #fv .fv-copy,
  #fv .fv-visual{
    width: 90%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 画像ははみ出させず、そのまま中央 */
  /*#fv .fv-visual img{
    width: 100%;
    height: auto;
    object-fit: contain;
  }*/

  /* Book */
  .book-text, .book-side{ 
    width:100%; 
  }
  #book .book-grid{ 
    flex-direction:column; 
    align-items:center; 
  }
  #book .book-visual{ 
    flex-basis:auto; 
  }
  .book__reasons{
    padding: 60px 0 0;
  }
  .reason-item, .reason-item.reverse{ 
    flex-direction:column; 
    text-align:center; 
  }
  .reason-img img{ 
    width:100%; 
    max-width:400px; 
  }
  .book__reasons .h3{ 
    width:100%; 
  }
  .reason-text h4{ 
    font-size:22px; 
  }
  .responsive-headline{ 
    text-wrap:balance; 
  }
  .reason-text p{ 
    text-align:left; 
  }
  .reason-img, .reason-text{ 
    flex:none; 
    width:100%; 
    margin:16px auto; 
  }

  /* Concept */
  #concept h2{ 
    font-size:30px; 
  }

  /* Reviews */
  .review{ 
    width:100%; 
  }
  .avatar{
    width:300px; 
    height:300px; 
    margin-right:0; 
    align-items:start; 
    margin-top:30px;
  }

  /* Author */
  #author .author-grid, 
  #lecture .lecture-grid{ 
    flex-wrap:wrap; 
  }
  #author .author-photo, 
  #author .author-bio{ 
    width:100%; 
  }

  /* Gallery */
  #gallery .slides .slide img{ 
    height:280px; 
  }

  /* Lecture（中央寄せのブレを解消） */
  .cta2-row{
    display:flex; 
    flex-direction:column; 
    justify-content:flex-start; 
    align-items:center;
    gap:24px; 
    text-align:center;
  }
  .cta2-row > *{
    width:90%; 
    max-width:680px; 
    margin-left:auto; 
    margin-right:auto;
  }
  .cta2-text{ 
    flex-basis:100%; 
  }
  #lecture .cta2-text_p{ 
    text-align:start; 
  }
  .cta2-visual{ 
    flex-basis:100%; 
  }
  #lecture .cta2-text,
  #lecture .cta2-visual {
    width: 100%;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;       /* テキストも中央基準に */
  }
  #lecture .cta2-visual img{ 
    display:block;
    width:90%; 
    height:auto; 
    padding: 0 10px;
    /*margin-left:auto; 
    margin-right:auto; */
  }
  #lecture h3, #lecture p{ 
    margin-left:0; 
    margin-right:0; 
    text-align: left;
  }
  #lecture{ 
    padding:56px 0; 
  }
  .lecture-banner{
    display:block;
    width:90%; 
    max-width:420px; 
    height:auto; 
    margin: 0;
    padding: 0 10px;
    /* margin-left:auto; 
     margin-right:auto;*/
    border-radius:5px; 
    box-shadow:0 3px 8px rgba(0,0,0,.1); 
    transition:transform .4s ease, box-shadow .4s ease;
  }
  .lecture-banner:hover{ 
    transform:scale(1.07); 
    box-shadow:0 6px 18px rgba(0,0,0,.25); 
  }

  /* Responsive spacing */
  section{ 
    padding:60px 15px; 
  }
  h1{ 
    font-size:30px; 
  }
  h2{ 
    font-size:24px; 
    text-align:start; 
  }
  p{ 
    font-size:15px; 
  }
}

/* ===== FV：スライド2だけ横幅を広げる（PC幅）===== */
@media screen and (min-width:901px){
  /* スライド2（index=1）かつ slick のクローン以外に限定 */
  #fv 
  .fv-slider 
  .slick-track 
  .fv-slide[data-slick-index="1"]:not(.slick-cloned) 
  .fv-copy{
    flex: 0 0 58%;
    width: 58%;
    max-width: 58%;
  }
  #fv 
  .fv-slider 
  .slick-track 
  .fv-slide[data-slick-index="1"]:not(.slick-cloned) 
  .fv-visual{
    flex: 0 0 42%;
    width: 42%;
    max-width: 42%;
  }
  /* スライド2の見出しの行幅だけ少し広く */
  #fv 
  .fv-slider 
  .slick-track 
  .fv-slide[data-slick-index="1"]:not(.slick-cloned) 
  .fv-title{
    width: 720px;
  }
  /* スライド2の画像は切り抜かずに収める（見切れ防止） */
  #fv 
  .fv-slider 
  .slick-track 
  .fv-slide[data-slick-index="1"]:not(.slick-cloned) 
  .fv-visual img{

    height: auto;
    object-fit: contain;
  }
}