@charset "utf-8";

/* ================================================================
   list.css：レッスン一覧（lesson.html）・キャンプ一覧（camp.html）専用
   ・style.css は全ページ共通のレイアウト用。一覧の2ページだけで使う部品はこのファイルに置く
   ・読み込み順：style.css → lesson.css／camp.css → list.css
   ================================================================ */

/* ================================================================
   guide-table：選び方の早見表（キャンプ一覧などで利用）
   ================================================================ */

.guide-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px 20px;
}
.guide-section__title {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 8px;
}
.guide-section__intro {
    text-align: center;
    font-size: 14px;
    line-height: 1.8;
    color: #444;
    margin: 0 0 20px;
}
/* 表が複数ある場合の小見出し（サイト共通の h3 装飾を打ち消す） */
.content h3.guide-section__subtitle {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.5;
    margin: 28px 0 10px;
    padding: 0 0 0 10px;
    border: none;
    border-left: 4px solid #0d4a8a;
    border-radius: 0;
    background: none;
    box-shadow: none;
    position: static;
}
.content h3.guide-section__subtitle::before,
.content h3.guide-section__subtitle::after {
    display: none;
}
.guide-table-wrap {
    overflow-x: auto;
}
/* 角丸の外側に四角い枠線が残らないよう、collapse ではなく separate で外枠とセル罫線を分けて描く */
.guide-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    background: #fff;
    border: 1px solid #e0eaf5;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.guide-table th,
.guide-table td {
    padding: 12px 14px;
    text-align: left;
    border: none;
    border-right: 1px solid #e0eaf5;
    border-bottom: 1px solid #e0eaf5;
    line-height: 1.6;
}
.guide-table tr > :last-child {
    border-right: none;
}
.guide-table tbody tr:last-child > * {
    border-bottom: none;
}
.guide-table thead th {
    background: #1E73BE;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    border-right-color: rgba(255,255,255,.25);
    border-bottom-color: #1E73BE;
}
.guide-table tbody th {
    background: #f0f6fc;
    font-weight: 600;
    color: #333;
}
.guide-table td a {
    color: #1E73BE;
    font-weight: 700;
}
.guide-table small {
    display: block;
    color: #777;
    font-size: 12px;
    font-weight: normal;
}
.guide-table__note {
    font-size: 12px;
    color: #888;
    margin-top: 12px;
    text-align: center;
}
/* スマホは1行ずつカード表示 */
@media (max-width: 560px) {
    .guide-section__title {
        font-size: 18px;
    }
    /* スマホは行ごとのカードに角丸を付けるので、表全体の枠・角丸・影は外す */
    .guide-table {
        border: none;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
        background: transparent;
    }
    .guide-table thead {
        display: none;
    }
    .guide-table tbody tr {
        display: block;
        margin-bottom: 14px;
        background: #fff;
        border: 1px solid #e0eaf5;
        border-radius: 8px;
        overflow: hidden;
    }
    .guide-table tbody th,
    .guide-table tbody td {
        display: block;
        border: none;
    }
    .guide-table tbody th {
        background: #1E73BE;
        color: #fff;
        font-size: 13px;
    }
    .guide-table tbody th small {
        color: #e6f0fa;
    }
    /* スマホは行の見出し（th）が青い帯になるので、見出し内のリンクは白で読めるようにする（料金一覧は後ろの専用指定で白にしている） */
    .guide-table tbody th a {
        color: #fff;
        text-decoration: underline;
    }
    /* PC用の「最終行は下線なし」より優先させるため :last-child 付きの指定も並べる */
    .guide-table tbody tr > td,
    .guide-table tbody tr:last-child > td {
        border-bottom: 1px solid #e0eaf5;
        font-size: 13px;
    }
    .guide-table tbody tr > td:last-child,
    .guide-table tbody tr:last-child > td:last-child {
        border-bottom: none;
    }
    .guide-table tbody td::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 600;
        color: #1E73BE;
        margin-bottom: 2px;
    }
}

/* ================================================================
   lp-：レッスン一覧・キャンプ一覧 共通パーツ（2026-11 リニューアル）
   ・lesson.html / camp.html で同じセクション順・同じクラスを使う
   ・サイト共通の .content p / h3 / h4 の装飾が効かないよう、必要な箇所は .content 付きで打ち消す
   ・色はサイトの青（#1E73BE）・濃紺（#0d4a8a / --navy-mid）・予約ボタンのオレンジ（#F59E0B）に合わせる
   ・早見表は既存の .guide-section / .guide-table を再利用する
   ================================================================ */

/* ---------- セクション共通 ---------- */
.lp-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 48px 20px;
}
/* 背景はすべて白に統一（2026-11-06 指示）。幅の扱いのためクラスは残す */
.lp-section--alt {
    max-width: none;
    background: #fff;
}
/* キャンプ一覧「こんな方におすすめ」も白に（camp.css の .camp-recommend の薄い青より優先） */
.camp-recommend.camp-bg-white {
    background: #fff;
}
/* 「こんな方におすすめ」はリンクではないので、ピル型をやめて枠なしのチェックリストにする
   （ページ内リンクのボタンと混同しないように。camp.css の指定を camp.html のこのブロックだけ上書き） */
.camp-recommend.camp-bg-white .camp-recommend__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 28px;
    max-width: 960px;
    margin: 18px auto 0;
    text-align: left;
}
.camp-recommend.camp-bg-white .camp-recommend__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}
.camp-recommend.camp-bg-white .camp-recommend__item-icon {
    color: #1E73BE;
    font-size: 17px;
    margin-top: 2px;
}
.content .camp-recommend.camp-bg-white p.camp-recommend__item-text {
    font-size: 15px;
    line-height: 1.6;
    white-space: normal;
    margin: 0;
}
@media (max-width: 760px) {
    .camp-recommend.camp-bg-white .camp-recommend__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 16px;
    }
}
@media (max-width: 560px) {
    .camp-recommend.camp-bg-white .camp-recommend__list {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
    .content .camp-recommend.camp-bg-white p.camp-recommend__item-text {
        font-size: 14px;
    }
}
.lp-section--alt > .lp-section__inner {
    max-width: 1060px;
    margin: 0 auto;
}
/* 英字の小見出し（装飾。h2 の外に置く） */
.content p.lp-en {
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #1E73BE;
    margin: 0 0 4px;
}
/* セクション見出し h2：ページ内で一番目立つ見出し（濃紺・大きめ・下にアクセント線）
   早見表の見出し（.guide-section__title）も同じ見た目にそろえる */
.content h2.lp-section__title,
.content h2.guide-section__title {
    position: relative;
    text-align: center;
    font-size: 30px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #0d4a8a;
    margin: 0 0 28px;
    padding: 0 0 16px;
}
.content h2.lp-section__title::after,
.content h2.guide-section__title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 56px;
    height: 4px;
    border-radius: 2px;
    background: #1E73BE;
    transform: translateX(-50%);
}
.content p.lp-section__lead {
    text-align: center;
    font-size: 15px;
    line-height: 1.8;
    color: #444;
    margin: 0 0 28px;
}

/* ---------- 導入（sec-intro） ---------- */
.lp-intro {
    max-width: 1060px;
    margin: 0 auto;
    padding: 36px 20px 8px;
    text-align: center;
}
.content p.lp-intro__text {
    font-size: 16px;
    line-height: 1.9;
    color: #333;
    text-align: left;
    background: #f4f8fd;
    border-left: 4px solid #1E73BE;
    border-radius: 4px;
    padding: 18px 22px;
    margin: 0 0 20px;
}
/* 要点（押せるボタンと見分けがつくよう、枠・角丸なしのアイコン＋文字の列。間を細い縦線で区切る） */
.lp-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 0;
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}
.lp-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 18px;
    border-left: 1px solid #d6e2ef;
    color: #333;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}
.lp-chip:first-child {
    border-left: none;
}
.lp-chip i {
    color: #1E73BE;
    font-size: 15px;
}
/* 要点の中の目印（スマホのタイルで大きく見せる部分）。PCでは見た目を変えない */
.lp-chip__num {
    font-weight: inherit;
}
.lp-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 200px;
    padding: 13px 28px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: opacity .2s, transform .2s;
}
.lp-btn--primary {
    background: #F59E0B;
    border: 2px solid #F59E0B;
    color: #fff;
}
.lp-btn--secondary {
    background: #fff;
    border: 2px solid #1E73BE;
    color: #1E73BE;
}
.lp-btn:hover {
    opacity: .85;
    transform: translateY(-2px);
    text-decoration: none;
}
.lp-btn--primary:hover { color: #fff; }
.lp-btn--secondary:hover { color: #1E73BE; }

/* ---------- 目的別ジャンプ（sec-nav） ---------- */
.lp-jump {
    max-width: 1060px;
    margin: 0 auto;
    padding: 24px 20px;
}
.lp-jump__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.lp-jump__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border: 1px solid #cfe0f3;
    border-radius: 999px;
    background: #fff;
    color: #0d4a8a;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.lp-jump__btn:hover {
    background: #1E73BE;
    border-color: #1E73BE;
    color: #fff;
    text-decoration: none;
}
/* アンカーで飛んだ時に固定ヘッダーに隠れないよう余白を取る */
.lp-anchor {
    scroll-margin-top: 90px;
}

/* ---------- メニュー一覧（sec-menu）カテゴリ見出し h3 ---------- */
.lp-cat {
    margin: 0 0 40px;
}
.lp-cat:last-child {
    margin-bottom: 0;
}
.content h3.lp-cat__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 19px;
    line-height: 1.5;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: normal;
    /* H3 の帯：キャンプ一覧で使っている薄い青（#f4f8fd）にそろえる */
    background: #f4f8fd;
    border: none;
    border-left: 5px solid #1E73BE;
    border-radius: 4px;
    box-shadow: none;
    margin: 0 0 16px;
    padding: 10px 14px;
    position: static;
}
.content h3.lp-cat__title::before,
.content h3.lp-cat__title::after {
    display: none;
}

/* ---------- カード（lp-card）PC3列／タブレット2列／スマホ1列 ---------- */
.lp-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}
/* カードが4枚のカテゴリは、PCで1行4枚にして空きをなくす */
.lp-cards--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.content .lp-cards--4 h4.lp-card__title {
    font-size: 17px;
}
.lp-card {
    min-width: 0;
    background: #fff;
    border: 1px solid #e0eaf5;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
    transition: box-shadow .2s, transform .2s;
}
.lp-card:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,.10);
    transform: translateY(-2px);
}
.lp-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}
.lp-card__link:hover {
    color: inherit;
    text-decoration: none;
}
.lp-card__img {
    position: relative;
    margin: 0;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #fff;   /* カードは画像の読み込み前も含めてすべて白で統一 */
}
.lp-card__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lp-card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #F59E0B;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}
.lp-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px 18px 18px;
}
.content h4.lp-card__title {
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: normal;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0 0 10px;
    padding: 0;
    position: static;
}
.content h4.lp-card__title::before,
.content h4.lp-card__title::after {
    display: none;
}
.lp-card__meta {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #333;
}
.lp-card__meta li {
    padding-left: 1em;
    text-indent: -1em;
}
.lp-card__meta li::before {
    content: "・";
    color: #1E73BE;
}
.content p.lp-card__text {
    flex: 1;
    font-size: 14px;
    line-height: 1.8;
    color: #444;
    margin: 0 0 14px;
}
.lp-card__more {
    align-self: flex-start;
    font-size: 14px;
    font-weight: 700;
    color: #1E73BE;
}
.lp-card__more::after {
    content: " →";
}

/* ---------- 料金・時間（sec-info） ---------- */
.lp-info__block {
    margin: 0 0 28px;
}
.content h3.lp-info__title {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: normal;
    background: #f4f8fd;
    border: none;
    border-left: 4px solid #0d4a8a;
    border-radius: 4px;
    box-shadow: none;
    margin: 0 0 12px;
    padding: 10px 14px;
    position: static;
}
.content h3.lp-info__title::before,
.content h3.lp-info__title::after {
    display: none;
}
/* 料金・時間欄の表見出し：既存の濃紺の帯（.midashi）は h2 より目立つため、この欄だけ薄い青に抑える */
.content .lp-info__block table.table_01 th.midashi {
    background-color: #eaf2fb;
    color: #0d4a8a;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 10px 12px;
    border: 1px solid #d6e4f3;
}
.content .lp-info__block table.table_01 th.midashi2 {
    background-color: #f6f9fd;
    font-size: 14px;
}
.lp-notes {
    list-style: none;
    margin: 12px 0 0;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid #e0eaf5;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.8;
    color: #444;
}
.lp-notes li {
    padding-left: 1em;
    text-indent: -1em;
}
.lp-notes li::before {
    content: "※";
}
.lp-notes strong {
    color: #c2410c;
}

/* ---------- IPSSの特徴（sec-features） ---------- */
.lp-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.lp-feature {
    background: #fff;
    border: 1px solid #e0eaf5;
    border-radius: 12px;
    padding: 20px 18px;
    text-align: center;
}
.lp-feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 0 10px;
    border-radius: 50%;
    background: #eaf2fb;
    color: #1E73BE;
    font-size: 22px;
}
.content h3.lp-feature__title {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 700;
    color: #0d4a8a;
    letter-spacing: normal;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0 0 6px;
    padding: 0;
    position: static;
}
.content h3.lp-feature__title::before,
.content h3.lp-feature__title::after {
    display: none;
}
.content p.lp-feature__text {
    font-size: 14px;
    line-height: 1.7;
    color: #444;
    margin: 0;
}

/* ---------- ご参加までの流れ（sec-flow）4ステップ ---------- */
.lp-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 34px;    /* ステップの間に進む向きの三角（▶）を置くため広めに取る */
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: lp-flow;
}
.lp-flow__step {
    position: relative;
    background: #fff;
    border: 1px solid #e0eaf5;
    border-radius: 12px;
    padding: 22px 16px 18px;
    text-align: center;
    counter-increment: lp-flow;
}
/* ステップの間の三角：PC・タブレットは右向き（▶）。最後のステップには付けない */
.lp-flow__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -24px;
    transform: translateY(-50%);
    border-style: solid;
    border-width: 11px 0 11px 13px;
    border-color: transparent transparent transparent #1E73BE;
}
.lp-flow__step::before {
    content: "STEP " counter(lp-flow);
    display: inline-block;
    margin: 0 0 8px;
    padding: 3px 12px;
    border-radius: 999px;
    background: #1E73BE;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
}
.content h3.lp-flow__title {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: normal;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0 0 6px;
    padding: 0;
    position: static;
}
.content h3.lp-flow__title::before,
.content h3.lp-flow__title::after {
    display: none;
}
.content p.lp-flow__text {
    font-size: 13px;
    line-height: 1.7;
    color: #555;
    margin: 0;
}

/* ---------- よくある質問（sec-faq）details/summary ---------- */
.lp-faq {
    max-width: 860px;
    margin: 0 auto;
}
.lp-faq__item {
    background: #fff;
    border: 1px solid #e0eaf5;
    border-radius: 8px;
    margin: 0 0 10px;
    overflow: hidden;
}
.lp-faq__q {
    position: relative;
    display: block;
    cursor: pointer;
    list-style: none;
    padding: 14px 44px 14px 48px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
    color: #1a1a1a;
}
.lp-faq__q::-webkit-details-marker {
    display: none;
}
.lp-faq__q::before {
    content: "Q";
    position: absolute;
    left: 16px;
    top: 13px;
    color: #1E73BE;
    font-size: 17px;
}
.lp-faq__q::after {
    content: "+";
    position: absolute;
    right: 18px;
    top: 11px;
    color: #1E73BE;
    font-size: 20px;
    font-weight: 400;
}
.lp-faq__item[open] .lp-faq__q::after {
    content: "−";
}
.lp-faq__a {
    position: relative;
    padding: 0 18px 16px 48px;
    font-size: 14px;
    line-height: 1.8;
    color: #444;
}
.lp-faq__a::before {
    content: "A";
    position: absolute;
    left: 16px;
    top: -1px;
    color: #F59E0B;
    font-size: 17px;
    font-weight: 700;
}
.content .lp-faq__a p {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
}

/* ---------- 関連ページ（sec-related） ---------- */
.lp-related {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.lp-related__link {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e0eaf5;
    border-radius: 8px;
    color: #0d4a8a;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s;
}
.lp-related__link i {
    color: #1E73BE;
}
.lp-related__link small {
    display: block;
    font-size: 12px;
    font-weight: normal;
    color: #777;
}
.lp-related__link:hover {
    border-color: #1E73BE;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    color: #0d4a8a;
    text-decoration: none;
}

/* スマホ下部固定ボタン（lp-fixedbar）は全ページ共通のため style.css に移動（2026-11-06） */

/* ---------- タブレット ---------- */
@media (max-width: 960px) {
    .lp-cards,
    .lp-cards--4,
    .lp-features,
    .lp-related {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- 流れ：幅760px以下は縦並びにし、三角を下向き（▼）にする ---------- */
@media (max-width: 760px) {
    .lp-flow {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
        max-width: 520px;
        margin: 0 auto;
    }
    .lp-flow__step:not(:last-child)::after {
        top: auto;
        right: auto;
        bottom: -23px;
        left: 50%;
        transform: translateX(-50%);
        border-width: 13px 11px 0 11px;
        border-color: #1E73BE transparent transparent transparent;
    }
}

/* ---------- スマホ ---------- */
@media (max-width: 560px) {
    .lp-section {
        padding: 36px 16px;
    }
    .content h2.lp-section__title,
    .content h2.guide-section__title {
        font-size: 22px;
        margin-bottom: 20px;
        padding-bottom: 12px;
    }
    .content h2.lp-section__title::after,
    .content h2.guide-section__title::after {
        width: 44px;
        height: 3px;
    }
    .content .lp-info__block table.table_01 th.midashi {
        font-size: 14px;
    }
    .content p.lp-section__lead {
        font-size: 14px;
        text-align: left;
    }
    .lp-intro {
        padding: 24px 16px 4px;
    }
    .content p.lp-intro__text {
        font-size: 14px;
        line-height: 1.8;
        padding: 14px 16px;
    }
    /* スマホは要点を「数字のタイル」（2列×2段）にする。アイコンを上に、大事な数字（.lp-chip__num）を大きく */
    .lp-chips {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        text-align: center;
    }
    .lp-chip {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 12px 6px 11px;
        border-left: none;
        border-radius: 10px;
        background: #f4f8fd;
        font-size: 12px;
        font-weight: 600;
        color: #444;
        line-height: 1.45;
    }
    .lp-chip i {
        font-size: 20px;
        margin: 0 0 4px;
    }
    .lp-chip .lp-chip__num {
        display: block;
        font-size: 18px;
        font-weight: 700;
        color: #0d4a8a;
        line-height: 1.3;
    }
    .lp-chip .lp-chip__note {
        display: block;
        font-size: 10px;
        font-weight: 400;
        color: #666;
    }
    /* 数字のすぐ後の区切りの「・」は、タイルでは行頭に来てしまうので隠す */
    .lp-chip .lp-chip__sep {
        display: none;
    }

    /* スマホは上部の帯を写真にする（PCは今までどおり青の帯）。写真の上に暗い色を重ねて白い文字を読みやすくする */
    .page-hero.lp-hero {
        padding: 56px 16px 52px;
    }
    .page-hero.lp-hero::before {
        opacity: 1;
        background: linear-gradient(180deg, rgba(0,22,50,.30) 0%, rgba(0,22,50,.62) 100%), var(--lp-hero-img) center / cover no-repeat;
    }
    .page-hero.lp-hero--lesson { --lp-hero-img: url("../img/lesson/tt_600.webp"); }
    .page-hero.lp-hero--camp   { --lp-hero-img: url("../img/camp/tt_600.webp"); }
    .page-hero.lp-hero--test   { --lp-hero-img: url("../img/test/bttop2_600.webp"); }
    .page-hero.lp-hero--service { --lp-hero-img: url("../img/service/rental_600.webp"); }
    .page-hero.lp-hero--reserve { --lp-hero-img: url("../img/camp/1w_600.webp"); }
    .page-hero.lp-hero .page-hero__en,
    .page-hero.lp-hero .page-hero__title,
    .page-hero.lp-hero .page-hero__catchcopy {
        text-shadow: 0 2px 8px rgba(0,0,0,.45);
    }
    .page-hero.lp-hero .page-hero__en {
        color: rgba(255,255,255,.9);
    }
    .lp-btn {
        min-width: 0;
        flex: 1 1 140px;
        padding: 12px 16px;
        font-size: 14px;
    }
    /* スマホは画面下に「予約する／チャットで質問」の固定ボタンがあるので、導入の予約・お問い合わせボタンは隠す
       （最初の画面で同じボタンが上下に並ばないようにする） */
    .lp-intro .lp-btns {
        display: none;
    }
    .lp-jump {
        padding: 16px;
    }
    .lp-jump__btn {
        font-size: 13px;
        padding: 8px 13px;
    }
    .lp-cards,
    .lp-cards--4,
    .lp-features,
    .lp-related {
        grid-template-columns: minmax(0, 1fr);
    }
    .content h3.lp-cat__title {
        font-size: 17px;
    }
    .lp-faq__q {
        font-size: 14px;
        padding: 13px 40px 13px 42px;
    }
    .lp-faq__q::before { left: 14px; }
    .lp-faq__a {
        padding: 0 16px 14px 42px;
        font-size: 13px;
    }
    .lp-faq__a::before { left: 14px; }
}

/* ---------- 最終更新日（料金・時間欄の最後、訪日費用の後） ---------- */
.content p.lp-updated {
    text-align: center;
    font-size: 12px;
    line-height: 1.6;
    color: #666;
    margin: 28px 0 0;
}
.content p.lp-updated i {
    color: #1E73BE;
    margin-right: 4px;
}

/* ---------- 料金一覧表（早見表 .guide-table の見た目を使い、料金列を読みやすく） ---------- */
.lp-price-table tbody th {
    width: 34%;
    line-height: 1.7;
}
.lp-price-table tbody th a {
    color: #0d4a8a;
    font-weight: 700;
}
.lp-price-table td {
    font-size: 14px;
}
.lp-price-table td[data-label="料金"],
.lp-price-table td[data-label*="キャンプ"] {
    font-weight: 700;
    color: #1a1a1a;
}
.lp-price-table td[data-label="補足"],
.lp-price-table td[data-label="宿泊無しプラン"] {
    color: #555;
    font-size: 13px;
}
.lp-price-table + .lp-notes,
.guide-table-wrap + .lp-notes {
    margin-top: 12px;
}
@media (max-width: 560px) {
    .lp-price-table tbody th {
        width: auto;
    }
    /* スマホは見出し（th）が青い帯になるので、レッスン名のリンクを白にして読めるようにする */
    .lp-price-table tbody th a {
        color: #fff;
        text-decoration: underline;
    }
}

/* ---------- 予約ページ（reserve.html） ---------- */
/* お知らせ（早割など期間限定の注意） */
.lp-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 860px;
    margin: 4px auto 0;
    padding: 12px 16px;
    border: 1px solid #f5c26b;
    border-radius: 8px;
    background: #fff8eb;
    color: #7a4b00;
    text-align: left;
}
.lp-alert i {
    margin-top: 3px;
    color: #e08a00;
}
.content .lp-alert p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
}
/* カード2枚を大きく並べる */
.lp-cards--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 960px;
    margin: 0 auto;
}
/* 外部サイトへ移動するボタンの印 */
.lp-card__more--ext::after {
    content: " ↗";
}
/* 早見表へのリンク4つは、PCで1行4つ（3つ＋1つにならないように） */
.lp-related--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 960px) {
    .lp-related--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .lp-related--4 { grid-template-columns: minmax(0, 1fr); }
}
/* 連絡先は3つ並び */
.lp-contact {
    max-width: 960px;
    margin: 0 auto;
}
@media (max-width: 560px) {
    .lp-cards--2 {
        grid-template-columns: minmax(0, 1fr);
    }
    .content .lp-alert p {
        font-size: 13px;
    }
}

/* ---------- お問い合わせ（contact/index.html・thanks.html） ---------- */
.page-hero.lp-hero--contact { --lp-hero-img: url("../img/sample_001.webp"); }
@media (min-width: 561px) {
    .page-hero.lp-hero--contact { --lp-hero-img: none; }
}
.lp-form {
    max-width: 860px;
    margin: 0 auto;
}
/* mailform.css はフォームを幅1000px固定にしているため、外枠（860px）からはみ出して右にずれる。
   外枠の幅いっぱいに収めて中央に置く */
.lp-form form#mail_form {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    box-sizing: border-box;
}
.content .lp-form p.lp-form__privacy {
    text-align: center;
    font-size: 13px;
    color: #555;
    margin: 18px 0 6px;
}
.lp-form input[type="text"],
.lp-form input[type="email"],
.lp-form input[type="tel"],
.lp-form select,
.lp-form textarea {
    font-size: 16px;      /* スマホで入力時に画面が拡大されないよう16px以上 */
    padding: 10px 12px;
    border-radius: 6px;
    box-sizing: border-box;
}
.lp-form textarea {
    width: 100%;
    min-height: 150px;
}
.lp-form #form_submit_button {
    min-width: 260px;
    padding: 14px 24px;
    border: none;
    border-radius: 8px;
    background: #F59E0B;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}
.lp-thanks__notes {
    max-width: 860px;
    margin: 0 auto 8px;
    text-align: left;
}
@media (max-width: 560px) {
    .lp-form select,
    .lp-form input[type="email"],
    .lp-form input[type="tel"] {
        width: 100%;
    }
    .lp-form #form_submit_button {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
}