@charset "UTF-8";

/* =========================================================
   1080px 以下 (タブレット)
   ========================================================= */
@media screen and (max-width: 1080px) {
    .cm-container {
        padding-inline: 40px;
    }

    .data-container {
        flex-direction: column;
        gap: 40px;
        padding-inline: 40px;
    }

    .data-head {
        width: 100%;
        max-width: 620px;
        padding-bottom: 0;
    }

    .data-head_ttl::before {
        inset: 0 0 0 -40px;
    }

    /* 吹き出し + 女性の 1 枚画像は出典テキストの下に流し込む */
    .data-figure {
        position: static;
        width: 100%;
        max-width: 372px;
        margin: 24px auto 0;
    }

    .data-slider {
        width: 100%;
    }

    .data-nav {
        width: 100%;
        margin-inline: 0;
    }

    .lesson-container {
        gap: 32px;
    }

    .lesson-label {
        padding-left: 20px;
    }

    .lesson-block {
        padding: 40px 40px 40px 32px;
    }

    .lesson-lead {
        padding-inline: 0;
    }

    .rank {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 20px;
    }

    .rank-visual {
        grid-row: auto;
    }

    .rank-note {
        grid-column: 1;
        grid-row: auto;
        margin-top: 0;
    }

    .type-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .type-list_age {
        width: auto;
        text-align: left;
    }

    .per-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .per-comment {
        grid-column: auto;
    }

    .cost {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .cost-box {
        width: 100%;
        max-width: 460px;
    }

    .pre {
        padding: 32px 24px;
    }

    .pre-lead {
        padding-right: 0;
    }

    .pre-consult {
        position: static;
        width: 180px;
        margin: 16px 0 0 auto;
    }

    .qa-inner {
        padding: 32px 24px 40px;
    }

    .qa-head {
        margin-inline: 0;
    }

    .qa-head_tag {
        left: 20px;
    }

    .qa-lead {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .info-bottom {
        padding: 40px 24px;
    }
}

/* =========================================================
   920px 以下 — メッセージセクションは横スクロールコンテナに
   ========================================================= */
@media screen and (max-width: 919px) {
    .msg {
        padding: 40px 0 60px;
    }
}

/* =========================================================
   768px 以下 (SP)
   ========================================================= */
@media screen and (min-width: 769px) {
    .sp {
        display: none !important;
    }
}

@media screen and (max-width: 768px) {
    .pc {
        display: none !important;
    }

    body {
        font-size: 1.4rem;
    }

    .fv-img {
        aspect-ratio: 750 / 928;
    }

    /* MOVIE */
    .cm {
        padding: 48px 0 40px;
    }

    .cm-container {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding-inline: 20px;
    }

    .cm-label {
        flex-direction: row;
        width: auto;
        justify-content: center;
        align-items: center;
    }

    .cm-label_en {
        writing-mode: horizontal-tb;
        font-size: 2.4rem;
    }

    .cm-label_bar {
        width: 24px;
        height: 2px;
    }

    .cm-label_ja {
        writing-mode: horizontal-tb;
        font-size: 1.6rem;
    }

    /* メッセージ */
    .msg-track {
        padding-inline: 20px;
    }

    .msg-text_ttl {
        font-size: 2rem;
        letter-spacing: 0.01em;
        margin-bottom: 20px;
    }

    .msg-text_body {
        font-size: 1.4rem;
    }

    .msg-text_body br {
        display: none;
    }

    /* データ */
    .data {
        padding: 40px 0;
    }

    .data-container {
        padding-inline: 20px;
    }

    /* 1: 見出しは幅が縮んでも改行させない。ノッチ (18px) を避けて右 padding は 20px */
    .data-head_ttl {
        padding-right: 20px;
    }

    .data-head_ttl::before {
        inset: 0 0 0 -20px;
        clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%);
    }

    .data-head_ttl h2 {
        white-space: nowrap;
        line-height: 1.4;
        font-size: clamp(17px, calc(var(--vw) * 0.0695 - 3.9px), 27px);
    }

    .data-head_sub {
        font-size: 1.5rem;
    }

    .data-head_note {
        width: auto;
        font-size: 1.2rem;
        margin-top: 24px;
    }


    .data-slide_pill {
        margin-left: 0;
        font-size: 1.7rem;
        padding: 8px 16px;
    }

    .data-slide_xaxis {
        font-size: 1.2rem;
    }

    /* LESSON */
    .lesson {
        padding: 48px 0;
    }

    .lesson-container {
        flex-direction: column;
        gap: 0;
    }

    .lesson-label {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 0 20px 16px;
    }

    .lesson-label_head {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .lesson-label_en {
        writing-mode: horizontal-tb;
        font-size: 2.4rem;
    }

    .lesson-label_bar {
        width: 20px;
        height: 2px;
    }

    .lesson-label_num {
        width: 28px;
        height: 28px;
        font-size: 1.6rem;
    }

    .lesson-label_ja {
        writing-mode: horizontal-tb;
        font-size: 1.7rem;
    }

    .lesson-body {
        gap: 48px;
        width: 100%;
    }

    .lesson-block {
        padding: 32px 20px;
        gap: 24px;
    }

    .lesson-block::before {
        top: -16px;
        height: 16px;
    }

    /* リボン見出しを 1 行に収める (ノッチ余白を詰め、文字を縮小) */
    .lesson-ttl_bar {
        padding: 12px 15px;
        clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 50%, 100% 100%, 0 100%, 13px 50%);
    }

    .lesson-ttl_bar h3 {
        font-size: 1.65rem;
        letter-spacing: 0;
        text-wrap: balance;
    }

    .lesson-ttl::before,
    .lesson-ttl::after {
        width: 13px;
    }

    .lesson-lead {
        font-size: 1.5rem;
    }

    .rank-visual {
        padding-left: 0;
    }

    .rank-balloon {
        font-size: 1.6rem;
        padding: 14px 16px;
    }

    .rank-doctor {
        width: 120px;
        margin-left: 20px;
    }

    .rank-table_ttl {
        font-size: 1.8rem;
    }

    .rank-table dt {
        font-size: 1.4rem;
    }

    .rank-table dd {
        font-size: 1.9rem;
        padding: 10px 0;
    }

    .type-ttl {
        font-size: 1.6rem;
    }

    .type-list_age {
        font-size: 1.6rem;
    }

    .type-pill {
        font-size: 1.5rem;
        padding: 7px 12px;
        margin: 0 6px 6px 0;
    }

    .per-ttl {
        font-size: 1.6rem;
    }

    .per-note {
        font-size: 1.2rem;
    }

    .per-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .per-card {
        padding: 12px 8px 0;
    }

    .per-card_icon {
        width: 32px;
    }

    .per-card_name {
        font-size: 1.7rem;
    }

    /* 「〈I期生存率〉」を折り返さない */
    .per-card_num {
        gap: 3px;
    }

    .per-card_num b {
        font-size: 2.9rem;
    }

    .per-card_num span {
        font-size: 0.95rem;
        padding-bottom: 4px;
        white-space: nowrap;
    }

    .per-card_iv {
        font-size: 1.2rem;
        margin-inline: -8px;
    }

    .per-comment_balloon {
        font-size: 1.5rem;
    }

    .per-comment_img {
        width: 110px;
    }

    /* 費用テーブル: 横スクロール */
    .fee-scroll {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .fee-table {
        min-width: 680px;
    }

    .fee-table th {
        font-size: 1.3rem;
    }

    .fee-table td {
        padding: 14px 8px;
    }

    .fee-name {
        font-size: 1.6rem;
    }

    .fee-strong {
        font-size: 1.5rem;
    }

    .fee-method {
        font-size: 1.4rem;
    }

    .cost-box_ttl {
        font-size: 1.7rem;
    }

    .cost-box_price {
        font-size: 1.6rem;
    }

    .search-row {
        flex-wrap: wrap;
    }

    .search-row_label {
        font-size: 1.5rem;
    }

    .search-box_text {
        font-size: 1.3rem;
    }

    .cost-text {
        font-size: 1.5rem;
    }

    /* 流れ */
    .flow-start {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
    }

    .flow-start_img {
        width: 130px;
        margin-inline: auto;
    }

    .flow-start_box {
        width: 100%;
    }

    .flow-start_label {
        font-size: 1.8rem;
    }

    .flow-start_ex {
        display: block;
        margin-left: 0;
    }

    .flow-cols {
        flex-direction: column;
    }

    .flow-col_head {
        font-size: 1.6rem;
        padding: 8px;
    }

    .flow-col_body {
        padding: 14px;
        gap: 10px;
    }

    .flow-col_ttl {
        font-size: 1.8rem;
    }

    .flow-result_label {
        font-size: 1.5rem;
        padding: 8px 14px;
        margin-bottom: -10px;
    }

    .flow-result_box {
        font-size: 1.6rem;
        padding: 14px 8px;
    }

    .flow-walk {
        display: none;
    }

    .pre {
        border-width: 8px;
        padding: 28px 16px 20px;
        gap: 24px;
    }

    .pre-badge {
        left: -8px;
        top: -30px;
    }

    .pre-badge_mark {
        width: 52px;
        height: 52px;
        font-size: 3rem;
        margin-right: -20px;
    }

    .pre-badge_txt {
        font-size: 1.5rem;
        padding: 8px 10px 8px 26px;
    }

    .pre-lead h4 {
        font-size: 1.7rem;
        margin-bottom: 14px;
    }

    .pre-lead p {
        font-size: 1.4rem;
    }

    .pre-consult {
        width: 140px;
    }

    .pre-graph_ttl {
        font-size: 1.2rem;
    }

    .pre-graph {
        gap: 10px;
        padding: 12px;
        overflow-x: auto;
    }

    .pre-graph_labels {
        font-size: 1.2rem;
    }

    .pre-graph_bars {
        min-width: 360px;
    }

    .pre-graph_bar {
        font-size: 1.1rem;
    }

    .pre-graph_bar b {
        font-size: 1.4rem;
    }

    .pre-graph_bars small {
        font-size: 1.1rem;
    }

    /* 生活習慣 */
    .habit-list li {
        flex-wrap: wrap;
    }

    .habit-list_num {
        width: 32px;
        font-size: 1.7rem;
    }

    .habit-list_ttl {
        width: calc(100% - 32px);
        border-right: 0;
        border-bottom: 1px solid #000;
        font-size: 1.6rem;
        padding: 8px 10px;
    }

    .habit-list_txt {
        width: 100%;
        font-size: 1.3rem;
        padding: 8px 10px;
    }

    .habit-man {
        position: static;
        width: 100px;
        margin: 12px 0 0 auto;
    }

    /* Q&A */
    .qa {
        padding: 48px 0;
    }

    .qa-frame {
        margin-inline: 12px;
        padding: 10px;
    }

    .qa-inner {
        padding: 24px 16px 32px;
    }

    .qa-head {
        margin-bottom: 32px;
    }

    .qa-head_tag {
        left: 0;
        font-size: 1.6rem;
        padding: 14px 20px;
    }

    .qa-lead_txt {
        font-size: 1.4rem;
    }

    .qa-cols {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .qa-col.--right {
        padding-top: 0;
    }

    /* SP は上部にイラスト＋「Q」用の帯を確保し、本文と重ねない */
    .qa-item {
        padding: 100px 12px 0;
    }

    .qa-item::before {
        width: 65.14px;
        height: 71.24px;
        background-size: 65.14px 71.24px;
        left: 4px;
        top: 12px;
    }

    .qa-item_q {
        font-size: 1.6rem;
    }

    .qa-item_a {
        font-size: 1.9rem;
    }

    /* PC 用の改行位置は SP では不自然になるため自然折返しにする */
    .qa-item_a br {
        display: none;
    }

    .qa-item_txt {
        font-size: 1.4rem;
    }

    .qa-illust.--gown {
        width: 68px;
        right: 0;
        top: 6px;
    }

    .qa-illust.--calendar {
        width: 108px;
        right: 0;
        top: 20px;
        transform: rotate(-6deg);
    }

    .qa-illust.--form {
        width: 64px;
        right: 78px;
        top: 14px;
    }

    .qa-illust.--stethoscope {
        width: 70px;
        right: 0;
        top: 12px;
    }

    .qa-illust.--pen {
        width: 40px;
        right: 62px;
        top: -2px;
    }

    .qa-figure {
        height: 200px;
    }

    .qa-figure .--bulb {
        width: 60px;
    }

    .qa-figure .--woman {
        width: 100px;
        left: 54px;
        top: 30px;
    }

    .qa-figure .--man {
        width: 120px;
        left: 150px;
    }

    /* TOPICS */
    .info-container {
        padding: 40px 20px 0;
    }

    .info-ttl {
        font-size: 1.8rem;
    }

    .info-txt {
        font-size: 1.4rem;
        margin-top: 20px;
    }

    .info-txt br {
        display: none;
    }

    .info-bottom {
        padding: 32px 20px;
        background: #fff;
    }

    .info-logos {
        flex-wrap: wrap;
        gap: 16px;
    }

    .info-logos_univ {
        gap: 14px;
        width: auto;
    }

    .info-logos_univ img:nth-child(1) {
        width: 170px;
    }

    .info-logos_univ img:nth-child(2) {
        width: 170px;
    }

    .info-logos_univ img:nth-child(3) {
        width: 92px;
    }

    .info-logos_univ img:nth-child(4) {
        width: 145px;
    }

    .info-link {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .info-link li a span {
        font-size: 1.6rem;
    }

    .foot-logo {
        width: 180px;
    }
}

/* =========================================================
   モーション抑制
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Figma message layout; ScrollTrigger still owns the track transform and pin. */
@media screen and (min-width: 920px) {
    .msg-track { gap: 0; padding-block: 10px 80px; }
    .msg-text { margin-right: -180px; }
    .msg-text_ttl { font-size: 43.82px; letter-spacing: 1.75px; text-box: trim-both cap alphabetic; white-space: nowrap; }
    .msg-text_body { position: relative; top: 15px; width: 394px; font-size: 19.7px; letter-spacing: .79px; white-space: nowrap; }
}

/* The PC graphic coordinates become reading order on narrower viewports. */
@media screen and (max-width: 1080px) {
    .lesson-label { width: auto; }
    .rank { display: flex; flex-direction: column; gap: 20px; height: auto; }
    .rank-visual { position: relative; inset: auto; width: 100%; height: 360px; }
    .rank-balloon { width: min(100%, 409px); }
    .rank-data { position: static; width: 100%; }
    .rank-note { position: static; width: 100%; }
    .type { position: static; width: 100%; }
    .type-ttl { white-space: normal; font-size: 20px; line-height: 1.5; }
    .type-list li { height: auto; padding-left: 0; }
    .type-list_age { width: auto; }
    .type-list li > span:last-child { flex-wrap: wrap; }
    .per-list { display: grid; height: auto; padding-bottom: 0; }
    .per-card { position: relative; top: auto !important; left: auto !important; width: 100%; }
    .per-comment { position: relative; top: auto; left: auto; width: 100%; height: 300px; }
    .per-list > .lesson-source { position: static; width: 100%; grid-column: 1 / -1; font-size: 12px; }
    .lesson-block.--bar1 { padding-bottom: 40px; }
    .data-head { height: auto; padding-top: 0; padding-bottom: 0; }
    .data-head_ttl { height: auto; }
    .data-slide_panel { height: auto; aspect-ratio: 344 / 220; }
    .data-nav { width: 100%; }
    .qa-head { margin-inline: -24px; }
    .qa-head_tag { left: 24px; }
    .info-logos { flex-wrap: wrap; justify-content: center; }
    .info-logos_univ { flex: 0 1 520px; }
    .habit-man { position: static; width: 100px; margin: 12px 0 0 auto; }
}

@media screen and (max-width: 768px) {
    .fv, .cm, .msg { background-size: 100% 100%; background-position: center; }
    .cm-label { width: 100%; align-self: auto; }
    .lesson-label_en { height: auto; }
    .lesson-label_num { width: 28px; height: 28px; }
    .lesson-block { border-top-width: 16px; }
    .lesson-ttl_bar { height: auto; min-height: 52px; padding: 12px 15px; }
    .lesson-ttl_bar h3 { line-height: 1.45; }
    .lesson-lead { letter-spacing: .8px; }
    .rank-visual { height: 310px; }
    .rank-balloon { top: 0; height: 170px; padding: 24px 14px; font-size: 16px; line-height: 25px; }
    .rank-doctor { top: 148px; left: 20px; width: 110px; }
    .rank-table_ttl { font-size: 18px; line-height: 1.4; white-space: normal; }
    .rank-table dt { height: auto; padding: 9px 0; }
    .rank-table dd { height: auto; padding: 10px 0; }
    .rank-note, .type .lesson-source { font-size: 11px; line-height: 1.5; }
    .type-ttl { font-size: 16px; margin-bottom: 16px; }
    .type-list_age { font-size: 16px; letter-spacing: 0; }
    .type-pill { margin: 0; }
    .per-ttl { line-height: 1.5; }
    .per-note { margin-top: -8px; }
    .per-list { gap: 24px 12px; }
    .per-card { height: 154px; padding: 18px 0 0; }
    .per-card_icon { width: 40px; left: 0; top: -28px; }
    .per-card_name { font-size: 17px; padding-left: 12px; }
    .per-card_num, .per-card:nth-child(4) .per-card_num, .per-card:nth-child(5) .per-card_num { top: 58px; height: 70px; }
    .per-card_num b, .per-card:nth-child(4) .per-card_num b, .per-card:nth-child(5) .per-card_num b { font-size: 42px; letter-spacing: -1px; }
    .per-card_num b small { font-size: 28px; letter-spacing: -1px; }
    .per-card_num span, .per-card:nth-child(4) .per-card_num span, .per-card:nth-child(5) .per-card_num span { top: -14px; left: 0; width: 100%; font-size: 10px; padding: 0; letter-spacing: 0; }
    .per-card_iv { width: 100%; margin: 0; font-size: 12px; padding: 8px 0; }
    .per-comment { grid-column: 1 / -1; height: 250px; }
    .per-comment_balloon { width: 230px; height: 120px; margin-inline: auto; padding: 20px 8px; font-size: 19px; }
    .per-comment_img { top: 84px; right: 32px; width: 105px; }
    .fee-table tbody th, .fee-table td { padding: 14px 8px; }
    .fee-table thead th { font-size: 13px; }
    .fee-table .fee-icon { width: 44px !important; }
    .fee-sub { font-size: 12px; margin-top: 12px; }
    .cost-box { width: 100%; }
    .cost-box_price { width: 100%; height: auto; padding: 14px 0; font-size: 16px; }
    .cost .search-row { width: 100%; }
    .cost .search-box_text { font-size: 12px; }
    .cost .search-box_btn { font-size: 16px; }
    .cost .search-box { flex-basis: 100%; }
    .cost-text { font-size: 15px; letter-spacing: .8px; }
    .flow-start .search-box_text { font-size: 14px; }
    .flow-start_ex { margin-left: 0; }
    .flow-col_head { height: auto; font-size: 16px; }
    .flow-col_ttl { font-size: 18px; }
    .flow-result_cols { gap: 8px; }
    .flow-result_box { font-size: 16px; padding-inline: 4px; }
    .flow-result_box small { display: block; }
    .pre-lead h4 { font-size: 17px; }
    .pre-lead p { font-size: 14px; letter-spacing: .8px; }
    .pre-graph { justify-content: flex-start; }
    .pre-graph_labels { font-size: 12px; line-height: 23px; }
    .pre-badge_mark { font-size: 30px; }
    .habit-list li { align-items: stretch; }
    .habit-list_ttl { width: calc(100% - 32px); min-height: 40px; padding: 8px 10px; font-size: 16px; }
    .habit-list_num { width: 32px; font-size: 17px; height: auto; }
    .habit-list_txt { flex-basis: 100%; font-size: 13px; padding: 10px; line-height: 1.6; }
    .habit-list li:last-child .habit-list_txt { padding-block: 10px; }
    .habit + .lesson-source { margin-top: 0; }
    .qa-head { margin-inline: -16px; }
    .qa-head_tag { left: 16px; width: 175px; height: 55px; }
    .qa-logo { width: 230px; height: 92px; }
    .qa-item { padding-top: 108px; gap: 20px; }
    .qa-item::before { width: 65.14px; height: 71.24px; background-size: 65.14px 71.24px; }
    .qa-item_q { font-size: 16px; line-height: 1.5; }
    .qa-item_a { font-size: 19px; line-height: 1.5; }
    .qa-item_txt { font-size: 14px; }
    .qa-illust.--gown { top: 6px; }
    .qa-illust.--calendar { top: 16px; }
    .qa-illust.--form { right: 78px; top: 14px; }
    .qa-illust.--stethoscope { top: 12px; }
    .qa-illust.--pen { top: -2px; }
    .qa-figure { margin-left: 0; height: 200px; }
    .info-loop .swiper-slide img { height: auto; }
    .info-logos { gap: 20px; }
    .info-logos_univ { flex: 1 1 100%; }
    .info-logos_c img:first-child { height: 108px; }
    .foot-logo img { width: 180px; height: 54px; }
    .data-head { padding-bottom: 0; }
    .data-head_sub { font-size: 15px; }
    .data-head_note { margin-top: 24px; }
    .data-slide_pill { height: auto; font-size: 17px; padding: 8px 16px; }
    .data-slider { --data-axis-w: 55px; }
    .data-slide_yaxis { font-size: 10px; }
    .data-slide_xaxis { font-size: 12px; }
    .data-nav { margin-top: 24px; }
}

@media (prefers-reduced-motion: reduce) and (min-width: 920px) {
    .msg-text { margin-right: 0; }
}

/* =========================================================
   SP (375px) レイアウト整備 — メッセージ画像化に伴う再調整
   PC (1440) には影響させない。すべて 768px 以下のみ。
   ========================================================= */
@media screen and (max-width: 768px) {
    /* 11: LESSON ラベルと罹患データの年代リストは中央揃え */
    .lesson-label { justify-content: center; text-align: center; }
    .type-list li { align-items: center; text-align: center; padding-left: 0; }
    .type-list li > span:last-child { justify-content: center; flex-wrap: wrap; }
    .type-list_age { text-align: center; }

    /* 12: 基本の文字サイズ・行間・左右余白 */
    body { font-size: 1.5rem; line-height: 1.75; }

    /* 2: セクション上下余白を 48px に統一 */
    .cm { padding: 48px 0; }
    .msg { padding: 48px 0; }
    .data { padding: 48px 0; }
    .qa { padding: 48px 0; }
    .info-container { padding: 48px 20px 0; }

    /* 1 / A: メッセージはテキスト → イラストの縦積み */
    .msg-scene { margin-top: 24px; }
    .msg-text_body { line-height: 1.75; }


    /* 3: 罹患データ見出しを「デー／タ）」で折らない */
    .type-ttl { font-size: 14px; line-height: 1.5; letter-spacing: 0; text-wrap: balance; }

    /* 9: 5 枚目 (子宮頸がん) の隣に「早期発見にはがん検診がカギ！」を置く */
    .per-comment { grid-column: auto; height: 156px; }
    .per-comment_balloon { width: 100%; height: 84px; margin-inline: 0; padding: 13px 6px; font-size: 13px; line-height: 1.4; }
    .per-comment_img { top: 62px; right: 2px; width: 68px; }
    .per-list > .lesson-source { margin-top: 4px; }

    /* 4: 費用表を 375px に収める (横スクロール廃止) */
    .fee-scroll { overflow-x: visible; }
    .fee-table { min-width: 0; width: 100%; }
    .fee-table col.--type { width: 64px; }
    .fee-table col.--age { width: 72px; }
    .fee-table col.--span { width: 64px; }
    .fee-table thead th { height: auto; font-size: 11px; padding: 8px 2px; line-height: 1.3; }
    .fee-table tbody th, .fee-table td { padding: 12px 4px; }
    .fee-table .fee-icon { width: 36px !important; margin-bottom: 6px; }
    .fee-name { font-size: 12px; line-height: 1.25; }
    .fee-strong { font-size: 12px; line-height: 1.35; }
    .fee-sub { font-size: 9.5px; line-height: 1.35; margin-top: 8px; }
    .fee-method { font-size: 11.5px; line-height: 1.4; }
    .fee-method_img { width: 30%; }

    /* 6: 「もし要精密検査と言われたら？」本文は自然折返し */
    .pre-lead h4 { font-size: 15px; line-height: 1.55; }
    .pre-lead h4 br { display: none; }
    .pre-lead p { font-size: 14px; line-height: 1.75; }

    /* 5: 精検グラフを枠内に収める (注記はバーの下段へ) */
    .pre-graph { overflow-x: visible; gap: 8px; padding: 12px 10px; }
    .pre-graph_labels { flex: none; font-size: 12px; }
    .pre-graph_labels li { height: 42px; line-height: 25.2px; }
    .pre-graph_bars { flex: 1 1 auto; width: auto; min-width: 0; }
    .pre-graph_bars li { height: 42px; flex-direction: column; align-items: flex-start; gap: 1px; }
    .pre-graph_bars small { font-size: 10px; line-height: 1.4; white-space: normal; letter-spacing: 0; }
    .pre-graph_bars li:nth-child(1) .pre-graph_bar { width: 34%; }
    .pre-graph_bars li:nth-child(2) .pre-graph_bar { width: 50%; }
    .pre-graph_bars li:nth-child(3) .pre-graph_bar { width: 55.4%; }
    .pre-graph_bars li:nth-child(4) .pre-graph_bar { width: 100%; }
    .pre-graph_bars li:nth-child(5) .pre-graph_bar { width: 25%; }

    /* 2: 生活習慣イラスト下の余白を詰める */
    .habit-man { width: 84px; margin: 4px 0 0 auto; }

    /* 10: フロー図 */
    .flow-arrow { width: 32px; height: 32px; }
    .flow-cols { gap: 16px; }
    .flow-result_cols { gap: 16px; }

    /* 7: Q&A の設問間を 32px に */
    .qa-col { gap: 32px; }
    .qa-cols { gap: 32px; }
    .qa-item_a { font-size: 18px; text-wrap: balance; }

    /* 11: 大学ロゴを 2 列 × 2 段 */
    .info-logos { gap: 24px; }
    .info-logos_univ { display: grid; grid-template-columns: repeat(2, 1fr); justify-items: center; align-items: center; gap: 18px 12px; width: 100%; }
    .info-logos_univ img:nth-child(1) { width: 148px; }
    .info-logos_univ img:nth-child(2) { width: 148px; }
    .info-logos_univ img:nth-child(3) { width: 84px; }
    .info-logos_univ img:nth-child(4) { width: 128px; }
}

/* =========================================================
   修正パス 6 — タブレット (769〜1080px)
   ========================================================= */
@media screen and (min-width: 769px) and (max-width: 1080px) {
    /* 9: 「早期発見にはがん検診がカギ！」の医師をグリッドの最終セル内に収める */
    .per-comment { height: 300px; }
    .per-comment_img { top: 92px; right: 0; width: auto; height: 208px; }
    .per-comment_img img { display: block; width: auto; height: 100%; margin-left: auto; }

    /* パス7-2: タブレットでは吹き出し + 女性を左カラムの右上に寄せ、PC と同じ密度を保つ
       (出典テキストは左 350px 程度に収まるので重ならない) */
    .data-head { min-height: 310px; }
    .data-figure { position: absolute; right: 0; top: 61px; width: 372px; max-width: 100%; margin: 0; }

    /* パス7-5 (追加): .qa-figure は grid 1fr に追随して 400px 未満まで縮むが、
       中のイラストは px 固定のため 836px 未満でページ右に溢れていた。幅に比例させる。 */
    .qa-figure .--bulb { width: min(83px, 20.75%); }
    .qa-figure .--woman { width: min(133px, 33.25%); left: min(71px, 17.75%); }
    .qa-figure .--man { width: min(161px, 40.25%); left: min(197px, 49.25%); }
}

@media screen and (max-width: 1080px) {
    /* 11 / 12: 画像化したブロックの最大幅 */
    .cost-box { width: 100%; max-width: 411px; }
    .flow-start_box { width: 100%; max-width: 425px; }

    /* 13: 医師と患者のイラストに本文を回り込ませる */
    .pre-lead { display: flow-root; padding-right: 0; }
    .pre-consult { position: static; float: right; width: 38%; max-width: 180px; margin: 4px 0 10px 20px; }
}

/* =========================================================
   修正パス 6 — SP (768px 以下)
   ========================================================= */
@media screen and (max-width: 768px) {
    /* 1: メッセージのイラストはウィンドウ幅いっぱい (左右 20px の padding を打ち消す) */
    .msg-scene { margin-inline: -20px; }

    /* 3: 吹き出し + 女性の 1 枚画像は出典テキストの下・中央 */
    .data-head { padding-bottom: 0; }

    /* 4 (パス7-3): スライダーはビューポート右端まで伸ばす。ピルはグラフパネルに対して左右中央 */
    .data-slider { width: calc(100% + 20px); margin-right: -20px; }
    .data-nav { padding-right: 20px; }
    .data-slide_pill { margin-inline: auto; }

    /* 5: Y 軸の「（人）」と数値は PC 同様 2 段 */
    .data-slide_yaxis li:first-child { line-height: 1.3; white-space: normal; }

    /* 6: 吹き出しを 1 カラム、医師イラストと死亡数統計を 2 カラム */
    .rank { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 16px 12px; align-items: start; height: auto; }
    .rank-visual { display: contents; }
    .rank-balloon {
        grid-column: 1 / -1;
        position: static;
        width: min(100%, 409px);
        height: auto;
        aspect-ratio: 411.364 / 210.516;
        padding: 24px 14px;
    }
    .rank-doctor { grid-column: 1; grid-row: 2; position: static; top: auto; left: auto; width: 100%; margin: 0; }
    .rank-data { grid-column: 2; grid-row: 2; }
    .rank-note { grid-column: 1 / -1; }
    .type { grid-column: 1 / -1; }
    .rank-table_ttl { font-size: 15px; }
    .rank-table { gap: 6px; }
    .rank-table dt { font-size: 13px; padding: 7px 0; }
    .rank-table dd { font-size: 16px; padding: 8px 0; }

    /* 7: リボン見出しの左右ノッチの線を本体の枠線と同じ 2px に揃える */
    .lesson-ttl::before,
    .lesson-ttl::after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25.7707' height='75' viewBox='0 0 25.7707 75' preserveAspectRatio='none'%3E%3Cpath d='M1.77066 74H25.7707V1H1.77066L23.7707 37.4871L1.77066 74Z' fill='%23FFF799'/%3E%3Cpath d='M25.7707 74H1.77066L23.7707 37.4871L1.77066 1H25.7707' fill='none' stroke='%23000000' stroke-width='2' stroke-miterlimit='10' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    }

    /* 10: 検査方法セルのイラストは SP では非表示にし、テキスト幅を確保 */
    .fee-method_img { display: none; }
    .fee-table tbody tr .fee-method { padding-right: 0; }

    /* 11 / 12: 画像化したブロックは幅 100% (中央) */
    .cost-box { width: 100%; max-width: 411px; margin-inline: auto; }
    .flow-start_box { width: 100%; max-width: 425px; margin-inline: auto; }

    /* 13: イラストを右下に、本文を回り込ませる */
    .pre-consult { width: 40%; max-width: 150px; margin: 2px 0 8px 14px; }

    /* 14: 紺タグと Q&A ロゴは左右中央 */
    .qa-head_tag { left: 50%; transform: translate(-50%, -50%); }
    .qa-logo { margin-inline: auto; }

    /* 15: ロゴ帯は 1 カラム縦積み・中央揃え */
    .info-logos { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 20px; }
    .info-logos_univ { grid-template-columns: 1fr; gap: 16px; width: auto; }
}

/* 修正パス7 追記: タブレット幅で費用表の「大腸がん」が折れないように */
@media screen and (min-width: 769px) and (max-width: 1080px) {
    .fee-name {
        white-space: nowrap;
        letter-spacing: 0;
        font-size: 1.9rem;
    }
}

/* 修正パス8: グラフは罫線込みの SVG 1 枚（Figma 書き出し）に置換。パネルの CSS 罫線は使わない */
.data-slide_panel { background: none !important; height: auto !important; aspect-ratio: 344 / 220; overflow: visible; padding: 0; }
.data-slide_panel img { position: static !important; display: block; width: 100%; height: auto; }