@charset "UTF-8";

html {
  scroll-padding-top: calc(
    var(--header-height) + var(--lesson-nav-height)
  );
}
/* lesson.css */
:root {
  --lesson-nav-height: 72px;
  --scroll-offset-extra: var(--lesson-nav-height);
}

.lesson-title-border {
    border-bottom: 2px solid #f1aa30;
    padding-bottom: 8px;
}

.anchor-offset {
  display: block;
  position: relative;
  top: calc(-1 * (var(--header-height) + var(--lesson-nav-height)));
  height: 0;
  visibility: hidden;
  pointer-events: none;
}

/* レッスンセクション内の診断バナー調整 */
.btn-cta.rounded-pill {
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(226, 180, 53, 0.3);
}

.btn-cta.rounded-pill:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(226, 180, 53, 0.5);
}

/* スマホの横スクロールメニュー用：スクロールバーを非表示にする */
.overflow-x-auto::-webkit-scrollbar {
    display: none;
}
.overflow-x-auto {
    -webkit-overflow-scrolling: touch; /* iPhoneでのスクロールを滑らかに */
}

/* 固定された時に少し背景を透過させるとオシャレです */
.sticky-top {
    background-color: rgba(248, 249, 250, 0.95) !important;
    backdrop-filter: blur(5px); /* 背景をぼかす */
}

/* 追従ナビゲーションの背景を少しはっきりさせる */
.lesson-nav {
    top: var(--header-height);
    background-color: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(4px); /* 弱め */
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* スマホでの「チラ見せ」とスクロール設定 */
@media (max-width: 991.98px) {
    .sticky-scroll-container {
        /* 右端に余白を作ることで、最後のボタンが少し切れて見えるようにする */
        padding-right: 40px !important; 
        -webkit-overflow-scrolling: touch;
    }

    .sticky-scroll-container .btn {
      white-space: nowrap;
      padding-inline: 1rem;
    }

    /* あえて薄いスクロールバーを表示して「動かせる」ことを伝える */
    .sticky-scroll-container::-webkit-scrollbar {
        height: 4px;
        display: block !important;
    }
    .sticky-scroll-container::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    .sticky-scroll-container::-webkit-scrollbar-thumb {
        background: var(--primary-color); /* スクールカラーにすると親切 */
        border-radius: 10px;
    }
}

/* PCではスクロールバーを消してスッキリさせる */
@media (min-width: 992px) {
    .sticky-scroll-container::-webkit-scrollbar {
        display: none;
    }
    .sticky-scroll-container {
        justify-content: center; /* PCでは中央揃え */
    }
}

.course-hero {
    /* 背景画像とテキストを重ねるための土台 */
    min-height: 300px; /* 画像の高さに合わせて調整 */
    display: flex;
    align-items: center;
    justify-content: center;
}
.lesson-sticky-nav {
  position: sticky;
  top: var(--header-height);
  height: var(--lesson-nav-height);
  z-index: 1020;
}
/* ===============================
   Lesson Page Hero Section (Custom Parallax)
================================ */

.hero-lesson {
  position: relative;
  height: 89vh; /* ここで高さを設定 (50vh または 70vh) */
  min-height: 400px; /* 最小高さを確保 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* 子要素のfixedがはみ出さないように */
  z-index: 1; /* 他のコンテンツより手前に */
  color: #fff; /* テキスト色を白に */
}

/* ヒーローテキストのコンテナ */
.hero-message {
  position: relative;
  z-index: 2; /* 最前面 */
  text-align: center;
  padding: 1.5rem; /* 内側の余白 */
  width: 100%; /* 横幅いっぱいに */
}

/* ヒーローテキストの視認性向上のためのアウトライン */
.hero-text-outline {
    text-shadow: 
        -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        0 0 10px rgba(0,0,0,0.1); /* 弱い影も追加 */
}

.lesson-hero-message {
  width: 100%;             /* 横幅いっぱい */
  text-align: center;
  color: white;
  z-index: 10;             /* 背景より前面に表示 */
}


/* グループ価格レイアウト */
.group-pricing {
  display: flex;
  justify-content: center;
  align-items: center;

}

.group-item {
  display: flex;
  flex-direction: column; /* 縦並び */
  align-items: center;
  line-height: 1.2;
  padding:0px 10px;
}

.group-item i {
  color: #f1aa30 !important; /* Bootstrap の text-primary より優先 */
  font-size: 1.5rem;
  margin-bottom: 0.3rem;
}


.group-name {
  font-weight: bold;
  margin-bottom: 0.2rem;
}

.group-price {
  font-size: 0.95rem;
  color: #555;
  white-space: nowrap; /* 数字と円を改行させない */
}

.divider {
  width: 1px;
  background-color: #ccc;
  height: 50px;
  align-self: center;
}

.tag-block .badge {
    display: inline-block;       /* デフォルトで十分ですが明示 */
    line-height: 1.2;            /* 背景の縦幅を文字にフィット */
    padding: 0.25rem 0.6rem;     /* 上下の余白を調整 */
    white-space: nowrap;          /* 改行を防ぐ */
    align-self: flex-end;         /* 親の下揃えに対応 */
}


/* モバイルでのヒーローテキストサイズ調整 */
@media (max-width: 767.98px) {
    .hero-lesson {
        height: 50vh; /* モバイルでは少し短く */
        min-height: 300px;
        contain:content;
    }
    .hero-lesson .display-4 {
        font-size: 2.2rem; /* スマホで大きすぎないように */
    }
    .hero-lesson .lead {
        font-size: 0.9rem; /* スマホで大きすぎないように */
    }
}
@media (max-width: 768px) {
    .lesson-hero-message {
        padding: 1rem;
    }
}

/* ===============================
   Lesson Page Hero Section (Custom Parallax)
================================ */

/* ヒーローオーバーレイ（背景の明るさ調整） */
.hero-lesson-overlay {
  position: fixed; /* 画面に対して固定 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* 背景画像を暗くするためのオーバーレイ */
  /* rgbaの最後の値 (0.2) を変更することで、暗さの度合いを調整できます。 */
  /* 0.0 (透明) から 1.0 (真っ黒) の間で調整してください。 */
  /* 例: 0.2 は20%の黒、0.4 は40%の黒 */
  background-color: rgb(225 232 245 / 17%); /* コントラストを上げて空気感を出す */
  
  z-index: -1; /* 背景画像より手前 */
  pointer-events: none; /* クリックイベントをブロックしない */
}
.mn-header-center {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.mn-header-center.is-updating {
  opacity: 0;
  transform: translateY(-4px);
}


/* --- Paper Ticket Style --- */

/* カード全体：スマホでは境界が見えるように薄い枠線をつける */
.paper-ticket {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@media (max-width: 991.98px) {
    .paper-ticket {
        border: 1px solid rgba(0,0,0,0.08) !important; /* スマホのみ枠線 */
    }
}

/* 右側（スマホでは下）の半券部分エリア */
.ticket-stub {
    background-color: #faf9f6; /* 少しあたたかいオフホワイト */
    position: relative;
}

/* PC時の縦の区切り線（点線） */
@media (min-width: 992px) {
    .border-start-lg {
        border-left: 2px dashed #dcdcdc !important; /* 実線ではなく点線で「切り取り線」感を出す */
    }
}

/* スマホ時の横の区切り線（ミシン目） */
.ticket-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    border-bottom: 2px dashed #dcdcdc;
    z-index: 10;
}

/* ミシン目の端に「半円の切れ込み」を入れる装飾（オプション）
   これを入れると一気に「紙」っぽくなります */
@media (max-width: 991.98px) {
    .paper-ticket .col-lg-7::after,
    .paper-ticket .col-lg-7::before {
        content: "";
        position: absolute;
        bottom: -10px; /* 位置調整 */
        width: 20px;
        height: 20px;
        background-color: #fff; /* 親要素の背景色と同じにする */
        border-radius: 50%;
        z-index: 20;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); /* 穴の内側に影 */
    }
    .paper-ticket .col-lg-7::before { left: -10px; }
    .paper-ticket .col-lg-7::after { right: -10px; }
    
    /* 穴の背景色をbodyの背景色に合わせる（whiteboardの場合） */
    .bg-whiteboard .paper-ticket .col-lg-7::after,
    .bg-whiteboard .paper-ticket .col-lg-7::before {
        background-color: #fdfdfd; /* セクションの背景色に合わせる */
    }
}

/* --- Handwritten Marker Highlight --- */
.marker-yellow {
  display: inline;
  background: linear-gradient(
    transparent 60%,
    rgba(226, 180, 53, 0.45) 60%
  );
  padding: 0 0.15em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}