/* ==================================================
   18. スマートフォン
================================================== */
@media (max-width: 768px) {
    /* ---------- 全体 ---------- */
    body {
        min-width: 0;
        overflow-x: hidden;
        font-size: 15px;
        line-height: 1.8;
    }
    img {
        max-width: 100%;
        height: auto;
    }
    /* ---------- ヘッダー ---------- */
    header {
        height: auto;
        min-height: 65px;
        padding: 8px 15px;
        gap: 10px;
    }
    .header-logo {
        min-width: 0;
        gap: 8px;
    }
    .tanuki {
        width: auto;
        height: 45px;
        flex-shrink: 0;
    }
    .header-title {
        font-size: 0.7rem;
        line-height: 1.4;
        letter-spacing: 0.02em;
        white-space: normal;
    }
    nav {
        flex-shrink: 0;
        gap: 8px;
    }
    nav a {
        padding: 6px 0;
        font-size: 0.75rem;
        white-space: nowrap;
    }
    nav .contact-btn {
        padding: 8px 10px;
        font-size: 0.72rem;
    }
    .external-link-icon {
        width: 11px;
        height: 11px;
        margin-left: 3px;
    }
    /* ---------- 共通セクション ---------- */
    .section {
        padding: 65px 20px;
    }
    .section-label {
        margin-bottom: 6px;
        font-size: 0.7rem;
    }
    .section-title {
        margin-bottom: 35px;
        font-size: 1.55rem;
        line-height: 1.5;
    }
    .section-description {
        margin: -15px auto 35px;
        font-size: 0.95rem;
        text-align: left;
    }
    /* ---------- ファーストビュー ---------- */
    .hero {
        min-height: auto;
        flex-direction: column;
        gap: 35px;
        padding: 65px 20px;
        text-align: center;
    }
    .hero-text {
        width: 100%;
        max-width: none;
    }
    .hero-subtitle {
        margin-bottom: 15px;
        font-size: 0.8rem;
    }
    .hero h1 {
        margin-bottom: 20px;
        font-size: clamp(1.7rem, 7vw, 2rem);
        line-height: 1.5;
        letter-spacing: 0.02em;
    }
    .hero-description {
        margin: 0 auto 25px;
        font-size: 0.95rem;
        text-align: left;
    }
    .hero-points {
        justify-content: center;
        gap: 7px;
        margin-bottom: 30px;
    }
    .hero-points span {
        padding: 6px 10px;
        font-size: 0.75rem;
    }
    .hero .contact-btn {
        width: 100%;
        max-width: 340px;
        padding: 14px 15px;
        text-align: center;
    }
    .hero-image {
        width: 55%;
        max-width: 220px;
    }
    /* ---------- お悩み ---------- */
    .worry-list {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .worry-card {
        padding: 25px 20px;
    }
    /* ---------- 特徴 ---------- */
    .feature-list {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .feature-card {
        padding: 30px 22px;
    }
    /* ---------- 授業の流れ ---------- */
    .lesson-flow {
        width: 100%;
    }
    .lesson-step {
        padding: 60px 10px 25px;
    }
    .lesson-step span {
        top: 22px;
        left: 10px;
    }
    /* ---------- 対応内容 ---------- */
    .course-info {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .course-box {
        padding: 28px 22px;
    }
    /* ---------- 講師紹介 ---------- */
    .teacher-card {
        flex-direction: column;
        align-items: center;
        gap: 30px;
        padding: 30px 20px;
    }
    .teacher-image {
        width: 170px;
    }
    .teacher-profile {
        width: 100%;
    }
    .teacher-profile h3 {
        font-size: 1.25rem;
        text-align: center;
    }
    .teacher-profile dl {
        grid-template-columns: 85px 1fr;
    }
    .teacher-profile dt,
    .teacher-profile dd {
        padding: 8px 0;
        font-size: 0.9rem;
    }
    /* ---------- 保護者サポート ---------- */
    .support-list {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .support-card {
        padding: 28px 22px;
    }
    /* ---------- トップページ料金 ---------- */
    .price-table {
        width: 100%;
    }
    .price-row {
        align-items: stretch;
    }
    .price-name {
        width: 38%;
        padding: 15px 10px;
        font-size: 0.85rem;
    }
    .price-value {
        width: 62%;
        padding: 15px 10px;
        font-size: 0.9rem;
    }
    /* ---------- 無料体験 ---------- */
    .trial-flow {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .trial-step {
        padding: 25px 20px;
    }
    .trial-message {
        margin-bottom: 25px;
        text-align: left;
    }
    .trial .contact-btn {
        width: 100%;
        max-width: 340px;
        padding: 14px 15px;
    }
    /* ---------- 入塾までの流れ ---------- */
    .admission-flow {
        width: 100%;
    }
    .admission-flow li {
        padding: 60px 10px 25px;
    }
    .admission-flow span {
        top: 22px;
        left: 10px;
    }
    /* ---------- FAQ ---------- */
    .faq-list {
        width: 100%;
    }
    .faq summary {
        padding: 22px 40px 22px 35px;
        font-size: 0.95rem;
    }
    .faq summary::before {
        left: 5px;
    }
    .faq summary::after {
        right: 5px;
    }
    .faq details p {
        padding: 0 10px 22px 35px;
        font-size: 0.9rem;
    }
    .faq details p::before {
        left: 5px;
    }
    /* ---------- 最後のお問い合わせ ---------- */
    .final-cta {
        padding: 65px 20px;
    }
    .final-cta h2 {
        font-size: 1.55rem;
        line-height: 1.6;
    }
    .final-cta p {
        font-size: 0.9rem;
    }
    .final-cta .contact-btn {
        width: 100%;
        max-width: 340px;
        padding: 14px 15px;
    }
    /* ---------- フッター ---------- */
    footer {
        padding: 45px 15px 0;
    }
    footer table {
        width: 100%;
        margin-bottom: 35px;
    }
    .information th,
    .information td {
        padding: 10px 6px;
        font-size: 0.8rem;
        overflow-wrap: anywhere;
    }
    .copyright {
        padding: 18px 10px;
        font-size: 0.75rem;
    }
    /* ==================================================
       コース・料金ページ
    ================================================== */
    /* ---------- ページタイトル ---------- */
    .page-hero {
        padding: 65px 20px;
    }
    .page-hero h1 {
        margin-bottom: 20px;
        font-size: 2rem;
    }
    .page-hero p:last-child {
        font-size: 0.95rem;
        text-align: left;
    }
    .page-hero p:last-child br {
        display: none;
    }
    /* ---------- コース内容 ---------- */
    .course-detail-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .course-detail-card {
        padding: 30px 22px;
    }
    .course-detail-card h3 {
        font-size: 1.05rem;
    }
    /* ---------- 対応教科 ---------- */
    .subject-detail-list {
        width: 100%;
    }
    .subject-detail-card {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 30px 5px;
    }
    .subject-detail-heading {
        padding: 0 0 15px;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .subject-detail-heading h3 {
        font-size: 1.3rem;
    }
    .subject-detail-content .subject-range {
        font-size: 1rem;
    }
    .subject-detail-content p {
        font-size: 0.9rem;
    }
    /* ---------- 基本料金 ---------- */
    .price-basic {
        width: 100%;
        margin-bottom: 50px;
    }
    .price-basic > h3,
    .price-tuition > h3 {
        font-size: 1.15rem;
    }
    .course-price-box {
        width: 100%;
    }
    .course-price-row {
        grid-template-columns: 105px minmax(0, 1fr);
    }
    .course-price-name {
        padding: 18px 12px;
        font-size: 0.85rem;
    }
    .course-price-value {
        min-width: 0;
        padding: 18px 15px;
    }
    .course-price-value strong {
        font-size: 1rem;
    }
    .course-price-value p {
        font-size: 0.8rem;
    }
    /* ---------- 学年別授業料 ---------- */
    .price-tuition {
        width: 100%;
    }
    .price-lesson-time {
        font-size: 0.85rem;
    }
    .tuition-table {
        width: 100%;
    }
    .tuition-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .tuition-row > div {
        min-width: 0;
        padding: 17px 12px;
        font-size: 0.85rem;
    }
    .tuition-row strong {
        font-size: 0.95rem;
        white-space: nowrap;
    }
    .price-tax-note {
        width: 100%;
    }
    /* ---------- 学習プラン ---------- */
    .lesson-plan-list {
        width: 100%;
    }
    .lesson-plan-item {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 10px;
        padding: 25px 5px;
    }
    .lesson-plan-item h3 {
        font-size: 1rem;
    }
    .lesson-plan-item p {
        font-size: 0.9rem;
    }
    /* ---------- 振替 ---------- */
    .reschedule-box {
        width: 100%;
        padding: 30px 20px;
    }
    .reschedule-box h3 {
        font-size: 1.15rem;
    }
    .reschedule-box p {
        font-size: 0.9rem;
    }
    /* ---------- オンライン授業に必要なもの ---------- */
    .device-box {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .device-item {
        padding: 28px 22px;
    }
    /* ---------- 保護者サポート ---------- */
    .course-support-box {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 28px 20px;
    }
    .course-support-heading {
        padding: 0 0 20px;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .course-support-heading h3 {
        font-size: 1.15rem;
    }
    .course-support-content {
        min-width: 0;
    }
    .course-support-content p,
    .course-support-content li {
        font-size: 0.9rem;
    }
    /* ---------- コースページ無料体験 ---------- */
    .course-trial-message {
        width: 100%;
        padding: 25px 20px;
        text-align: left;
    }
    .course-trial .contact-btn {
        width: 100%;
        max-width: 340px;
        padding: 14px 15px;
    }
}