@charset "utf-8";
/* ==========================================================
   トップページ以外の追加スタイル（2026.11 SEO・LLMO 施策）
   - 読み込み：トップページ以外の全ページ（functions.php）
   - ボタン・矢印・体験レッスンCTA はトップページ（front-page-renewal.css）と同じ見た目
   - 1つの要素の指定は1か所にまとめ、PC → スマホ（max-width: 800px）の順に記述
   ========================================================== */

/* ---------- 0. 色・書体（トップページと同じ値） ---------- */
:root {
    --rn-text: #292929;
    --rn-brown: #876C59;
    --rn-beige: #D5AB8F;
    --rn-orange: #D85E2A;
    --rn-orange-dark: #BF4E1E;
    --rn-line: #06C755;
    --rn-cream: #FAF6F2;
    --rn-cream2: #F3ECE6;
    --rn-border: #E3DAD2;
    --rn-sub: #6E6560;
    --rn-en: "Open Sans", "Helvetica Neue", Arial, sans-serif;
}


/* ==========================================================
   1. 共通パーツ（ボタン・矢印・改行）
   ========================================================== */
.sr-wrap {
    max-width: 1260px;
    margin-inline: auto;
    padding-inline: 30px;
}

.rn-btns { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.rn-btns--center { justify-content: center; }
.rn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 32px;
    border: 1px solid transparent;
    border-radius: 100px;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-align: center;
    text-decoration: none !important;
    transition: background-color .2s, color .2s, opacity .2s;
}
.rn-btn--reserve { color: #fff; background: var(--rn-orange); box-shadow: 0 6px 16px rgba(216, 94, 42, .22); }
.rn-btn--line { color: var(--rn-line); background: #fff; border-color: var(--rn-line); }
.rn-btn--accent {
    min-height: 64px;
    padding: 0 44px;
    color: var(--rn-orange);
    background: #fff;
    border: 2px solid var(--rn-orange);
    font-size: 16px;
}
@media screen and (min-width: 801px) {
    .rn-btn--reserve:hover { opacity: 1; background: var(--rn-orange-dark); }
    .rn-btn--line:hover { opacity: 1; color: #fff; background: var(--rn-line); }
    .rn-btn--accent:hover { opacity: 1; color: #fff; background: var(--rn-orange); }
}

/* ボタン・リンク内の矢印（→） */
.rn-arrow {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 15px;
    height: 1px;
    background: currentColor;
    vertical-align: middle;
}
.rn-arrow::after {
    content: "";
    position: absolute;
    right: 1px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}

/* スマホだけで改行する <br class="rn-br-sp"> */
.rn-br-sp { display: none; }

/* 内部リンク（オレンジの文字リンク＋矢印） */
.sr-link {
    display: block;
    margin-top: 32px;
    text-align: center;
}
.sr-link--left { text-align: left; }
.sr-link a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 4px;
    color: var(--rn-orange);
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0.06em;
    text-decoration: none !important;
    border-bottom: 1px solid currentColor;
}
.sr-link a:hover { opacity: .7; }
/* よくある質問の回答内のリンク */
.sr-link--faq { margin-top: 14px; text-align: left; }
.sr-link--faq a { font-size: 15px; }

@media screen and (max-width: 800px) {
    .sr-wrap { padding-inline: calc((20 / 375) * 100vw); }
    .rn-br-sp { display: inline; }
    .sr-link { margin-top: 24px; }
    .sr-link a { font-size: 14px; }
    .sr-link--faq a { font-size: 13px; }
}


/* ==========================================================
   2. 体験レッスンCTA（parts/trial-cta.php：トップページ下部と同じ）
   ========================================================== */
.rn-bottom-cta { padding-block: 120px 0; }
.rn-bottom-cta__inner {
    margin-inline: auto;
    padding: 72px 48px;
    background: var(--rn-cream2) url('../img/front-page/pc/bg-what-is-pulip.jpg') center / cover;
    border-radius: 15px;
    text-align: center;
}
.rn-bottom-cta__img { max-width: 640px; margin: 20px auto 24px; overflow: hidden; border-radius: 12px; }
.rn-bottom-cta__img img { display: block; width: 100%; height: auto; }
.rn-bottom-cta__en { color: var(--rn-brown); font-family: var(--rn-en); font-size: 16px; letter-spacing: 0.2em; }
.rn-bottom-cta__title { margin: 10px 0 12px; font-size: 26px; font-weight: 400; line-height: 1.7; letter-spacing: 0.08em; }
.rn-bottom-cta__meta { margin-bottom: 36px; color: var(--rn-sub); font-size: 14px; }
.rn-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 auto 36px; text-align: left; }
.rn-steps li { padding: 20px 22px; background: #fff; border-radius: 12px; }
.rn-steps span { display: block; color: var(--rn-brown); font-family: var(--rn-en); font-size: 21px; letter-spacing: 0.12em; }
.rn-steps strong { display: block; margin: 2px 0; font-size: 21px; font-weight: 400; line-height: 1.6; letter-spacing: 0.05em; }
.rn-steps small { display: block; color: var(--rn-sub); font-size: 12px; line-height: 1.7; }
.rn-bottom-cta__gift { margin-top: 20px; color: var(--rn-orange); font-size: 13px; line-height: 1.8; }

@media screen and (max-width: 800px) {
    .rn-bottom-cta { padding-block: 64px 0; }
    .rn-bottom-cta__inner { padding: 44px 20px; }
    .rn-bottom-cta__img { margin: 16px auto 20px; border-radius: 8px; }
    .rn-bottom-cta__title { font-size: 18px; }
    .rn-bottom-cta__meta { margin-bottom: 24px; font-size: 12px; }
    .rn-steps { grid-template-columns: 1fr; gap: 10px; margin-bottom: 24px; }
    .rn-steps li { padding: 14px 18px; }
    .rn-steps span { font-size: 15px; }
    .rn-steps strong { font-size: 17px; }
    .rn-bottom-cta .rn-btns { flex-direction: column; align-items: stretch; }
    .rn-bottom-cta__gift { font-size: 12px; }
}


/* ==========================================================
   3. 料金ページ：法人向けサービスの案内
   ========================================================== */
.sr-corp {
    margin-top: 24px;
    text-align: left;
    padding: 32px 36px;
    background: var(--rn-cream);
    border-radius: 15px;
}
.sr-corp p { font-size: 16px; line-height: 2; letter-spacing: 0.05em; }
.sr-corp ul { margin-top: 12px; }
.sr-corp li { position: relative; padding-left: 1.1em; font-size: 15px; line-height: 1.9; }
.sr-corp li::before { content: "・"; position: absolute; left: 0; color: var(--rn-brown); }
.sr-corp .sr-link { margin-top: 20px; }

@media screen and (max-width: 800px) {
    .sr-corp { padding: 22px 20px; }
    .sr-corp p { font-size: 14px; }
    .sr-corp li { font-size: 13px; }
}


/* ==========================================================
   4. 講師紹介（/instructor/ と /instructor/tomomi/）
   ========================================================== */
.sr-instructor { padding-block: 40px 0; }
.sr-profile {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 64px;
    align-items: start;
}
.sr-profile__img { margin: 0; overflow: hidden; border-radius: 15px; aspect-ratio: 4 / 5; background: var(--rn-cream2); }
.sr-profile__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.sr-profile__en { color: var(--rn-brown); font-family: var(--rn-en); font-size: 13px; letter-spacing: 0.25em; text-transform: uppercase; }
.sr-profile__role { margin-top: 10px; color: var(--rn-sub); font-size: 15px; letter-spacing: 0.06em; }
.sr-profile__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 6px; }
.sr-profile__name strong { font-family: var(--rn-en); font-size: 48px; font-weight: 400; line-height: 1.2; letter-spacing: 0.08em; }
.sr-profile__name span { color: var(--rn-sub); font-size: 14px; letter-spacing: 0.1em; }
.sr-profile__lead { margin-top: 24px; font-size: 17px; line-height: 2; letter-spacing: 0.05em; }
.sr-profile__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.sr-profile__stats div { padding: 16px 18px; background: var(--rn-cream2); border-radius: 12px; }
.sr-profile__stats dt { color: var(--rn-brown); font-size: 13px; letter-spacing: 0.05em; }
.sr-profile__stats dd { margin: 4px 0 0; font-size: 16px; line-height: 1.6; }
.sr-profile__sns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.sr-profile__sns a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 18px;
    color: var(--rn-text);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-decoration: none !important;
    border: 1px solid var(--rn-border);
    border-radius: 100px;
}
.sr-profile__sns a:hover { border-color: var(--rn-brown); }

.sr-career { margin-top: 96px; padding-top: 56px; border-top: 1px solid var(--rn-border); }
.sr-career + .sr-career { margin-top: 0; }
.sr-career__en { color: var(--rn-brown); font-family: var(--rn-en); font-size: 13px; letter-spacing: 0.25em; text-transform: uppercase; }
.sr-career__title { margin: 6px 0 28px; font-size: 24px; font-weight: 400; letter-spacing: 0.08em; }
.sr-career__list li {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    padding: 18px 0;
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--rn-border);
}
.sr-career__list li:first-child { border-top: 1px solid var(--rn-border); }
.sr-career__list .sr-career__label { color: var(--rn-brown); font-size: 14px; }
.sr-career__list a { color: var(--rn-text); text-decoration: underline; text-underline-offset: 3px; }
.sr-career__list a:hover { color: var(--rn-orange); }

/* ページ上部の英字（SVG画像が無いページ用） */
.fv .fv-inner .page-title .en.sr-page-en { width: auto; color: var(--rn-text); font-family: var(--rn-en); font-size: 54px; font-weight: 400; line-height: 1; letter-spacing: 0.05em; }

/* 一覧（/instructor/） */
.sr-instructor-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.sr-instructor-card { display: block; color: var(--rn-text); text-decoration: none !important; }
.sr-instructor-card figure { margin: 0 0 16px; overflow: hidden; border-radius: 15px; aspect-ratio: 4 / 5; background: var(--rn-cream2); }
.sr-instructor-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .4s; }
.sr-instructor-card:hover img { transform: scale(1.03); }
.sr-instructor-card__role { color: var(--rn-sub); font-size: 13px; letter-spacing: 0.06em; }
.sr-instructor-card__name { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; padding-bottom: 12px; font-family: var(--rn-en); font-size: 26px; letter-spacing: 0.08em; border-bottom: 1px solid var(--rn-border); }

@media screen and (max-width: 900px) {
    .sr-profile { grid-template-columns: 1fr; gap: 32px; }
    .sr-profile__img { max-width: 420px; }
}
@media screen and (max-width: 800px) {
    .sr-instructor { padding-top: 24px; }
    .fv .fv-inner .page-title .en.sr-page-en { font-size: 30px; }
    .sr-profile__name strong { font-size: 34px; }
    .sr-profile__lead { font-size: 15px; }
    .sr-profile__stats { grid-template-columns: 1fr; gap: 8px; }
    .sr-profile__stats div { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 16px; }
    .sr-profile__stats dd { margin: 0; font-size: 15px; }
    .sr-career { margin-top: 56px; padding-top: 40px; }
    .sr-career__title { margin-bottom: 18px; font-size: 19px; }
    .sr-career__list li { grid-template-columns: 1fr; gap: 2px; padding: 14px 0; font-size: 14px; }
    .sr-career__list .sr-career__label { font-size: 12px; }
    .sr-instructor-list { grid-template-columns: 1fr; gap: 24px; }
}


/* ==========================================================
   5. ビフォーアフター（/ba/ 一覧と ?case=番号 の詳細）
   ========================================================== */
.sr-ba { padding-block: 24px 0; }
.sr-ba__lead { max-width: 760px; margin: 0 auto 56px; color: var(--rn-sub); font-size: 16px; line-height: 2; letter-spacing: 0.05em; text-align: center; }
.sr-ba__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 28px; }
.sr-ba__card { display: block; color: var(--rn-text); text-decoration: none !important; }
.sr-ba__card figure { margin: 0; overflow: hidden; border-radius: 12px; background: var(--rn-cream2); }
.sr-ba__card img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .4s; }
.sr-ba__card:hover img { transform: scale(1.03); }
.sr-ba__card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-bottom: 12px; font-size: 18px; letter-spacing: 0.06em; border-bottom: 1px solid var(--rn-border); }
.sr-ba__card-title .rn-arrow { color: var(--rn-orange); }
.sr-ba__card-worry { margin-top: 8px; color: var(--rn-sub); font-size: 13px; line-height: 1.8; }

/* ページ送り */
.sr-pager { display: flex; justify-content: center; gap: 10px; margin-top: 56px; }
.sr-pager a,
.sr-pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--rn-text);
    font-size: 15px;
    text-decoration: none !important;
    border: 1px solid var(--rn-border);
    border-radius: 50%;
}
.sr-pager .is-current { color: #fff; background: var(--rn-text); border-color: var(--rn-text); }

/* 詳細 */
.sr-ba-detail__back { margin-bottom: 32px; }
.sr-ba-detail__back a { color: var(--rn-sub); font-size: 14px; text-decoration: none !important; }
.sr-ba-detail__head { text-align: center; }
.sr-ba-detail__en { color: var(--rn-brown); font-family: var(--rn-en); font-size: 13px; letter-spacing: 0.25em; }
.sr-ba-detail__title { margin: 6px 0 32px; font-size: 28px; font-weight: 400; letter-spacing: 0.08em; }
.sr-ba-detail__main { max-width: 720px; margin: 0 auto; overflow: hidden; border-radius: 15px; }
.sr-ba-detail__main img { display: block; width: 100%; height: auto; }
.sr-ba-detail__sec { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-top: 80px; }
.sr-ba-detail__sec:nth-of-type(even) .sr-ba-detail__fig { order: 2; }
.sr-ba-detail__fig { margin: 0; overflow: hidden; border-radius: 15px; }
.sr-ba-detail__fig img { display: block; width: 100%; height: auto; }
.sr-ba-detail__label { color: var(--rn-orange); font-family: var(--rn-en); font-size: 13px; letter-spacing: 0.25em; }
.sr-ba-detail__h { margin: 6px 0 16px; font-size: 22px; font-weight: 400; letter-spacing: 0.06em; }
.sr-ba-detail__sec p { font-size: 16px; line-height: 2; letter-spacing: 0.05em; }
.sr-ba-detail__nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 80px; padding-top: 32px; border-top: 1px solid var(--rn-border); }
.sr-ba-detail__nav a { display: inline-flex; align-items: center; gap: 10px; color: var(--rn-text); font-size: 15px; text-decoration: none !important; }
.sr-ba-detail__nav a:hover { color: var(--rn-orange); }
.sr-ba-detail__nav .is-prev .rn-arrow { transform: scaleX(-1); }

@media screen and (max-width: 800px) {
    .sr-ba__lead { margin-bottom: 32px; font-size: 14px; text-align: left; }
    .sr-ba__list { grid-template-columns: repeat(2, 1fr); gap: 28px 14px; }
    .sr-ba__card-title { margin-top: 10px; padding-bottom: 8px; font-size: 14px; }
    .sr-ba__card-worry { font-size: 12px; }
    .sr-pager { margin-top: 40px; }
    .sr-ba-detail__title { margin-bottom: 20px; font-size: 20px; }
    .sr-ba-detail__sec { grid-template-columns: 1fr; gap: 20px; margin-top: 48px; }
    .sr-ba-detail__sec:nth-of-type(even) .sr-ba-detail__fig { order: 0; }
    .sr-ba-detail__h { font-size: 18px; }
    .sr-ba-detail__sec p { font-size: 14px; }
    .sr-ba-detail__nav { margin-top: 48px; }
    .sr-ba-detail__nav a { font-size: 13px; }
}


/* ==========================================================
   6. 追従CTA（PC：右下カード／スマホ：画面下バー）トップページと同じ
   ========================================================== */
.rn-yen { margin-right: 0.08em; font-size: 0.7em; }
.rn-float {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 900;
    width: 250px;
    padding: 20px 18px 16px;
    background: #fff;
    border: 1px solid var(--rn-border);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(41, 41, 41, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity .3s, transform .3s, visibility .3s;
}
.rn-float.is-show { opacity: 1; visibility: visible; transform: none; }
.rn-float__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}
/* 閉じるアイコン（×） */
.rn-float__close::before,
.rn-float__close::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 11px;
    width: 14px;
    height: 1px;
    background: var(--rn-sub);
    transform: rotate(45deg);
}
.rn-float__close::after { transform: rotate(-45deg); }
.rn-float__badge { display: inline-block; padding: 0.15em 0.8em; color: #fff; background: var(--rn-beige); font-size: 11px; letter-spacing: 0.04em; }
.rn-float__title { margin-top: 0; font-size: 16px; letter-spacing: 0.05em; }
.rn-float__price { margin-bottom: 12px; font-family: var(--rn-en); font-size: 30px; font-weight: bold; line-height: 1.3; }
.rn-float__sp-note { display: none; }
.rn-float__btns { display: grid; gap: 8px; }
.rn-float .rn-btn { min-height: 44px; padding: 0 10px; font-size: 13px; letter-spacing: 0.04em; }

@media screen and (max-width: 800px) {
    .rn-float {
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
        border: 0;
        border-top: 1px solid var(--rn-border);
        border-radius: 15px 15px 0 0;
        transform: translateY(100%);
    }
    .rn-float__close,
    .rn-float__badge,
    .rn-float__title,
    .rn-float__price { display: none; }
    .rn-float__sp-note { display: block; margin-bottom: 6px; color: var(--rn-orange); font-size: 11px; text-align: center; }
    .rn-float__btns { grid-template-columns: 1.5fr 1fr; }
    .rn-float .rn-btn { min-height: 46px; font-size: 13px; }
    body.rn-float-on footer { padding-bottom: 96px; }
}


/* ヘッダーメニューを開いている間は隠す */
body:has(#circle-container.open) .rn-float { display: none; }


/* ==========================================================
   7. 個別ページの見出しをH1にしたことへの対応
   ========================================================== */
/* プレミアム垢抜け診断（元は h2 に指定されていた見た目を h1 に） */
.p-tc-mv__catch h1 { font-size: 60px; letter-spacing: .05em; margin-bottom: .35em; text-shadow: 1px 1px 2px #fff; }
@media screen and (max-width: 800px) {
    .p-tc-mv__catch h1 { font-size: 2em; }
}