@charset "UTF-8";

/* =========================================================
   福岡県 Cプロジェクト 2026 (令和8年度) - PC base
   命名: section名-要素_子要素 / modifier --xx
   ========================================================= */

:root {
    /* --vw は js/common.js がスクロールバーを除いた実幅で上書き。コンテンツ幅は常に 1080px */
    --vw: 100vw;
    --gut: max(20px, calc((var(--vw) - 1080px) / 2));
    --purple: #413d6a;
    --ink: #241a17;
    --yellow: #fff799;
    --c-stomach: #00ab84;
    --c-lung: #1bb8ce;
    --c-colon: #f29a63;
    --c-breast: #eb6d8e;
    --c-cervix: #8f82bc;
    --p-stomach: #deefe7;
    --p-lung: #e2f2f6;
    --p-colon: #fdede1;
    --p-breast: #fce7eb;
    --p-cervix: #e9e6f3;
}

body {
    font-family: "Gen Interface JP", "Hiragino Sans", "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    color: var(--ink);
    line-height: 1.8em;
    letter-spacing: 0.08em;
    min-width: 320px;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "halt" 1;
    background-color: #fdf4ea;
}

main {
    background-image: linear-gradient(115deg, #fce9d8 0%, #fcefe9 18%, #fdf2f1 34%, #f2f7f8 52%, #f8fcf3 70%, #fffce6 86%, #fdf7e6 100%);
}

img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

.maru {
    font-family: "Gen Interface JP", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.bold {
    font-weight: 700;
}

.notes {
    font-size: 1.3rem;
    line-height: 1.5em;
    letter-spacing: 0.04em;
}

.mark {
    background-color: #fff;
    padding: 0.05em 0.25em;
}

/* =========================================================
   FV
   ========================================================= */
.fv-img {
    display: block;
    width: 100%;
    aspect-ratio: 1920 / 760;
    object-fit: cover;
}

/* =========================================================
   MOVIE
   ========================================================= */
.cm {
    padding: 80px 0 60px;
}

.cm-container {
    display: flex;
    align-items: center;
    gap: 40px;
    padding-inline: calc(var(--gut) + 180px);
}

.cm-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: none;
    width: 40px;
}

.cm-label_en {
    writing-mode: vertical-rl;
    text-orientation: sideways;
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--purple);
}

.cm-label_bar {
    display: block;
    width: 2px;
    height: 24px;
    background-color: var(--purple);
}

.cm-label_ja {
    writing-mode: vertical-rl;
    font-size: 2.2rem;
    line-height: 1.1;
    letter-spacing: 0.1em;
    color: var(--ink);
}

.cm-wrap {
    flex: 1 1 auto;
    min-width: 0;
    aspect-ratio: 16 / 9;
    background-color: #eee;
}

.cm-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* =========================================================
   メッセージ「検診、行ってね」 (PC = 横スクロール連動)
   ========================================================= */
.msg {
    overflow: hidden;
    padding: 40px 0 80px;
}

.msg-track {
    display: block;
    padding-inline: var(--gut);
}

.msg-text_ttl {
    font-weight: 500;
    font-size: 3.2rem;
    line-height: 1.35;
    letter-spacing: 0.04em;
    color: var(--purple);
    margin-bottom: 32px;
}

.msg-text_body {
    font-size: 1.6rem;
    line-height: 1.75;
    letter-spacing: 0.04em;
    color: var(--ink);
}

/* イラスト 1 枚 (PC 1301 x 695 / SP は縦構図で全幅) */
.msg-scene {
    display: block;
    margin-top: 28px;
}

.msg-pic {
    display: block;
}

.msg-pic img {
    display: block;
    width: 100%;
    height: auto;
}

@media screen and (min-width: 920px) {
    .msg {
        padding: 0;
    }

    .msg-track {
        display: flex;
        align-items: center;
        gap: 40px;
        width: max-content;
        padding-block: 60px;
        will-change: transform;
    }

    .msg-text {
        flex: none;
        width: 604px;
    }

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

    .msg-text_body {
        font-size: 1.97rem;
        width: 420px;
    }

    .msg-scene {
        flex: none;
        width: 1301px;
        margin-top: 0;
    }

    .msg-pic img {
        width: 1301px;
        height: 695px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .msg-track {
        display: block;
        width: auto;
        padding-inline: var(--gut);
        transform: none !important;
    }

    .msg-text,
    .msg-text_body {
        width: auto;
    }

    .msg-scene {
        width: auto;
        margin-top: 28px;
    }

    .msg-pic img {
        width: 100%;
        height: auto;
        max-width: 1301px;
    }
}

/* =========================================================
   データで見る 日本人のがんリスク
   ========================================================= */
.data {
    background-color: #fff;
    padding: 60px 0;
}

.data-container {
    display: flex;
    gap: 60px;
    align-items: flex-start;
    padding-left: var(--gut);
}

.data-head {
    position: relative;
    flex: none;
    width: 486px;
    padding-bottom: 60px;
}

.data-head_ttl {
    position: relative;
    padding: 16px 80px 16px 0;
}

.data-head_ttl::before {
    content: "";
    position: absolute;
    inset: 0 0 0 calc(-1 * var(--gut));
    background-color: var(--yellow);
    clip-path: polygon(0 0, 100% 0, calc(100% - 30px) 50%, 100% 100%, 0 100%);
    z-index: 0;
}

.data-head_ttl > * {
    position: relative;
    z-index: 1;
}

.data-head_ttl h2 {
    font-weight: 700;
    font-size: 2.7rem;
    line-height: 1.3;
    letter-spacing: 0;
    text-align: right;
    white-space: nowrap;
}

.data-head_ttl h2 em {
    font-style: normal;
    background-color: #fff;
    padding: 0.02em 0.2em;
}

.data-head_sub {
    display: block;
    text-align: right;
    font-weight: 700;
    font-size: 2.06rem;
    letter-spacing: 0.1em;
    line-height: 1.4;
}

.data-head_note {
    margin-top: 110px;
    width: 349px;
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: 0.08em;
}

/* 吹き出し + 女性は Figma 書き出しの 1 枚画像 (372 x 246)。
   左カラム (.data-head / 幅 486) 内で absolute 配置し、右へのはみ出しは Figma どおり許容。 */
.data-figure {
    position: absolute;
    left: 194px;
    top: 100px;
    display: block;
    width: 372px;
    height: auto;
    z-index: 2;
}

.data-slider {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 20px;
}

.data-slider .swiper {
    position: relative;
    overflow: hidden;
}

.data-slide_pill {
    display: inline-block;
    color: #fff;
    font-weight: 700;
    font-size: 2.1rem;
    line-height: 1;
    letter-spacing: 0.06em;
    padding: 10px 20px;
    border-radius: 999px;
    background-color: var(--c);
    margin: 0 0 12px 60px;
}

.data-slide_plot {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.data-slide_yaxis {
    position: relative;
    flex: none;
    width: 78px;
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--ink);
}

.data-slide_yaxis li {
    position: absolute;
    right: 0;
    transform: translateY(-50%);
    white-space: nowrap;
}

.data-slide_panel {
    flex: 1 1 auto;
    min-width: 0;
    background-color: var(--panel);
    border-radius: 8px;
    overflow: hidden;
}

.data-slide_panel svg {
    display: block;
    width: 100%;
    height: auto;
}

.data-slide_xaxis {
    display: flex;
    justify-content: space-between;
    margin: 4px 0 0 86px;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--c);
}

.data-slide_xaxis small {
    font-size: 65%;
}

.data-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    width: 428px;
    margin: 24px 0 0 86px;
}

.data-nav .swiper-button-prev,
.data-nav .swiper-button-next {
    position: static;
    width: 34px;
    height: 34px;
    margin: 0;
}

.data-nav .swiper-button-prev::after,
.data-nav .swiper-button-next::after {
    content: none;
}

.data-nav .swiper-pagination {
    position: static;
    width: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.data-nav .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    opacity: 0.2;
    margin: 0 !important;
}

.data-nav .swiper-pagination-bullet-active {
    opacity: 1;
}

.data-nav .swiper-pagination-bullet:nth-of-type(1) {
    background: var(--c-stomach);
}

.data-nav .swiper-pagination-bullet:nth-of-type(2) {
    background: var(--c-lung);
}

.data-nav .swiper-pagination-bullet:nth-of-type(3) {
    background: var(--c-colon);
}

.data-nav .swiper-pagination-bullet:nth-of-type(4) {
    background: var(--c-breast);
}

.data-nav .swiper-pagination-bullet:nth-of-type(5) {
    background: var(--c-cervix);
}

/* スワイプヒント (2025 踏襲) */
.swiper-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.35s ease;
    word-break: keep-all;
    z-index: 3;
}

.swiper-hint.show {
    opacity: 1;
    transform: translateX(-50%) translateY(calc(-50% - 10px));
}

.swiper-hint .arrow {
    font-size: 16px;
    animation: slideArrow 1.2s infinite alternate;
}

@keyframes slideArrow {
    from {
        transform: translateX(-3px);
    }
    to {
        transform: translateX(3px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .swiper-hint .arrow {
        animation: none;
    }
}

/* =========================================================
   LESSON 共通
   ========================================================= */
.lesson {
    padding: 80px 0;
}

.lesson + .lesson {
    padding-top: 0;
}

.lesson-container {
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

.lesson-label {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 0 0 var(--gut);
    width: calc(var(--gut) + 36px);
}

.lesson-label_head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.lesson-label_en {
    writing-mode: vertical-rl;
    text-orientation: sideways;
    font-weight: 700;
    font-size: 32.477px;
    line-height: 1;
    letter-spacing: 0;
    color: var(--purple);
    height: 131px;
}

.lesson-label_bar {
    display: block;
    width: 2px;
    height: 24px;
    background-color: var(--purple);
}

.lesson-label_num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 33px;
    border: 0;
    border-radius: 50%;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background-color: var(--purple);
}

.lesson-label_ja {
    writing-mode: vertical-rl;
    font-size: 22.734px;
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--ink);
}

.lesson-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.lesson-block {
    position: relative;
    background-color: #fff;
    padding: 60px var(--gut) 60px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    border-top: 28px solid transparent;
}

.lesson-block::before {
    content: "";
    position: absolute;
    top: -28px;
    left: 0;
    right: 0;
    height: 28px;
    background-image: var(--bar);
}

.lesson-block.--bar1 {
    --bar: linear-gradient(90deg, #f4a85f 0%, #e9b681 26%, #dfc4a4 53%, #d4d2c6 79%, #ccdde0 100%);
}

.lesson-block.--bar2 {
    --bar: linear-gradient(90deg, #d6dbd2 0%, #c4dee6 26%, #b9e3f7 53%, #d4ebe4 79%, #eaf2d6 100%);
}

.lesson-block.--bar3 {
    --bar: linear-gradient(90deg, #ecf3d3 0%, #f5f7c7 26%, #fcf6bd 53%, #f9d7bf 79%, #f6bfc1 100%);
}

.lesson-block.--bar4 {
    --bar: linear-gradient(90deg, #f2b9c0 0%, #d7bdb7 26%, #bcc1ad 53%, #a0c6a3 79%, #8bc99c 100%);
}

/* 黄色リボン見出し */
.lesson-ttl {
    position: relative;
    width: 680px;
    max-width: 100%;
    align-self: center;
}

.lesson-ttl_bar {
    background-color: var(--yellow);
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    padding: 0 24px;
    text-align: center;
    clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 50%, 100% 100%, 0 100%, 24px 50%);
    height: 73px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: #000;
}

.lesson-ttl_bar h3 {
    font-weight: 700;
    font-size: 28.91px;
    line-height: 1;
    letter-spacing: 0;
    color: var(--ink);
}

.lesson-ttl::before,
.lesson-ttl::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 24px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.lesson-ttl::before {
    left: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 73' preserveAspectRatio='none'%3E%3Cpath d='M1 1 L23 36.5 L1 72' fill='none' stroke='%23241a17' stroke-width='2'/%3E%3C/svg%3E");
}

.lesson-ttl::after {
    right: 0;
    transform: scaleX(-1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 73' preserveAspectRatio='none'%3E%3Cpath d='M1 1 L23 36.5 L1 72' fill='none' stroke='%23241a17' stroke-width='2'/%3E%3C/svg%3E");
}

.lesson-lead {
    width: 100%;
    padding-inline: 40px;
    font-size: 20.047px;
    line-height: 1.6;
    letter-spacing: 1.6038px;
    text-box: trim-both cap alphabetic;
}

.lesson-source {
    width: 100%;
    font-size: 11.792px;
    line-height: 1.5;
    letter-spacing: 0;
    color: #0d0d0d;
    text-align: right;
}

/* --- 死因第1位ブロック --- */
.rank {
    display: block;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 4px 40px;
    align-items: start;
    width: 100%;
    position: relative;
    height: 447px;
}

.rank-visual {
    grid-row: 1 / span 2;
    position: absolute;
    inset: 0;
    padding-left: 0;
}

.rank-visual {
    position: relative;
    padding-left: 24px;
}

.rank-balloon {
    position: absolute;
    background-color: #fff;
    border: 0;
    border-radius: 0;
    padding: 27px 20px;
    font-weight: 600;
    font-size: 22.309px;
    line-height: 34.34px;
    letter-spacing: 0;
    left: 0;
    top: 9.3px;
    width: 409.395px;
    height: 208.548px;
    text-align: center;
    background: url("../images/lesson_rank_balloon.svg") center / 100% 100% no-repeat;
}

.rank-balloon u {
    text-decoration: none;
    background: linear-gradient(transparent 76%, var(--yellow) 76%);
}

.rank-balloon b {
    font-weight: 700;
    font-size: 120%;
}

.rank-balloon::after {
    content: none;
    position: absolute;
    left: 56px;
    bottom: -20px;
    width: 26px;
    height: 22px;
    background-color: #fff;
    border-left: 2px solid var(--purple);
    border-bottom: 2px solid var(--purple);
    clip-path: polygon(0 0, 100% 0, 8% 100%);
}

.rank-doctor {
    width: 172.874px;
    margin: 0;
    position: absolute;
    left: 23.44px;
    top: 186.49px;
}

.rank-table_ttl {
    font-weight: 700;
    font-size: 23.621px;
    line-height: 1;
    text-align: center;
    margin-bottom: 12.85px;
    color: #000;
    letter-spacing: 0;
    white-space: nowrap;
}

.rank-table_ttl small {
    font-size: 88%;
}

.rank-table {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7.95px 9.6px;
}

.rank-table dt {
    background-color: var(--purple);
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: 22.23px;
    line-height: 1;
    padding: 7.6px 0;
    height: 37.435px;
    letter-spacing: 0;
}

.rank-table dd {
    background-color: #efefef;
    text-align: center;
    font-weight: 700;
    font-size: 30.55px;
    line-height: 1;
    padding: 10.9px 0;
    color: #0d0d0d;
    height: 52.414px;
    letter-spacing: 0;
}

.rank-note {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
    text-align: right;
    font-size: 13.123px;
    line-height: 1;
    color: #0d0d0d;
    position: absolute;
    top: 142.95px;
    right: 0;
    letter-spacing: 0;
}

/* --- 罹患データ (ピル) --- */
.type {
    width: calc(100% - 235.35px);
    border-top: 0;
    padding-top: 0;
    position: absolute;
    top: 189.34px;
    left: 235.35px;
}

.type-ttl {
    text-align: center;
    font-weight: 700;
    font-size: 26.246px;
    line-height: 1;
    margin-bottom: 26px;
    color: #000;
    letter-spacing: -0.6px;
    white-space: nowrap;
}

.type-ttl::before {
    content: "（ ";
}

.type-ttl::after {
    content: " ）";
}

.type-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-start;
    margin-top: 20px;
    height: 43px;
    padding-left: 13px;
}

.type-list_age {
    font-weight: 700;
    font-size: 23.621px;
    line-height: 1.3;
    color: #0d0d0d;
    width: 277.5px;
    text-align: left;
    flex: none;
    letter-spacing: -0.6px;
}

.type-list_age b {
    font-size: 133%;
    color: var(--purple);
}

.type-pill {
    display: inline-block;
    color: #fff;
    background-color: var(--c);
    font-weight: 700;
    font-size: 26.246px;
    line-height: 1;
    padding: 8px 13px;
    border-radius: 999px;
    margin-right: 0;
    letter-spacing: -0.5px;
    white-space: nowrap;
}

/* --- 5年生存率カード --- */
.per-ttl {
    width: 100%;
    text-align: center;
    font-weight: 600;
    font-size: 23.585px;
    line-height: 1;
    color: #231815;
    letter-spacing: 0;
    text-box: trim-both cap alphabetic;
}

.per-ttl small {
    font-size: 62%;
}

.per-note {
    width: 100%;
    text-align: center;
    font-size: 1.4rem;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-box: trim-both cap alphabetic;
    margin-top: -16px;
}

.per-list {
    display: block;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    gap: 20px;
    width: 100%;
    position: relative;
    height: 584.27px;
}

.per-card {
    background-color: color-mix(in srgb, var(--panel), white 50%);
    border-radius: 0;
    padding: 14.71px 0 0;
    text-align: center;
    position: absolute;
    overflow: visible;
    width: 30.74%;
    height: 183.457px;
    top: 14.48px;
    left: 1.46%;
}

.per-card_head {
    display: block;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
}

.per-card_icon {
    width: 72.891px;
    flex: none;
    position: absolute;
    left: -10px;
    top: -24.74px;
}

.per-card_name {
    font-weight: 700;
    font-size: 28.562px;
    line-height: 1;
    color: var(--c);
    letter-spacing: 0;
}

.per-card_num {
    display: block;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    color: var(--c);
    line-height: 1;
    margin: 0;
    position: absolute;
    left: 0;
    top: 48px;
    width: 100%;
    height: 108px;
}

.per-card_num b {
    font-size: 85.687px;
    font-weight: 400;
    letter-spacing: -2.5px;
    font-family: "din-2014", sans-serif;
    line-height: 1;
}

.per-card_num span {
    font-weight: 700;
    font-size: 17.137px;
    padding-bottom: 0;
    position: absolute;
    top: 3px;
    left: 50%;
    letter-spacing: -0.5px;
    white-space: nowrap;
}

.per-card_iv {
    background-color: var(--c);
    color: #fff;
    font-weight: 700;
    font-size: 19.994px;
    line-height: 1;
    padding: 6.2px 0;
    margin-inline: 0;
    position: absolute;
    bottom: 0;
    width: 100%;
    letter-spacing: 0;
}

.per-comment {
    grid-column: 3;
    display: block;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: absolute;
    top: 228.62px;
    left: 69.24%;
    width: 30.73%;
}

.per-comment_balloon {
    position: relative;
    background-color: #fff;
    border: 0;
    border-radius: 0;
    padding: 18px 8px;
    text-align: center;
    font-weight: 700;
    font-size: 24.278px;
    line-height: 1.4;
    color: var(--ink);
    width: 100%;
    height: 149.896px;
    letter-spacing: 0;
    background: url("../images/lesson_per_balloon.svg") center / 100% 100% no-repeat;
}

.per-comment_balloon u {
    text-decoration: none;
    background: linear-gradient(transparent 74%, var(--yellow) 74%);
}

.per-comment_balloon::after {
    content: none;
    position: absolute;
    left: 50%;
    bottom: -18px;
    width: 24px;
    height: 20px;
    margin-left: -12px;
    background-color: #fff;
    border-left: 2px solid var(--purple);
    border-bottom: 2px solid var(--purple);
    clip-path: polygon(0 0, 100% 0, 20% 100%);
}

.per-comment_img {
    width: 69.3%;
    margin-top: 0;
    position: absolute;
    right: 0;
    top: 91.64px;
}

/* --- がん検診の種類と費用 テーブル --- */
.fee-scroll {
    width: 100%;
}

.pre-graph_wrap {
    width: 100%;
}

.fee-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.fee-table thead th {
    background-color: var(--purple);
    color: #fff;
    font-weight: 600;
    font-size: 18.889px;
    line-height: 1;
    padding: 12px 4px;
    text-align: center;
}

.fee-table tbody th {
    border: 1px solid #000;
    padding: 28px 12px;
    vertical-align: middle;
    font-weight: normal;
}

.fee-table td {
    border: 1px solid #000;
    padding: 28px 12px;
    vertical-align: middle;
    position: relative;
}

.fee-table col.--type {
    width: 16.6667%;
}

.fee-table col.--age {
    width: 16.6667%;
}

.fee-table col.--span {
    width: 16.6667%;
}

.fee-table th.--type {
    text-align: center;
    background-color: var(--tint);
}

.fee-table td.--center {
    text-align: center;
}

.fee-icon {
    width: 60px;
    margin: 0 auto 12px;
    display: block;
}

.fee-name {
    font-weight: 700;
    font-size: 27.035px;
    line-height: 1.1;
    color: var(--c);
    letter-spacing: 0;
    text-box: trim-both cap alphabetic;
    display: block;
}

.fee-strong {
    font-weight: 700;
    font-size: 24.579px;
    line-height: 1.3;
    color: #000;
    display: block;
    letter-spacing: 0;
    white-space: nowrap;
    text-box: trim-both cap alphabetic;
}

.fee-sub {
    display: block;
    font-size: 13.836px;
    line-height: 1.4;
    margin-top: 20px;
    letter-spacing: 0;
}

.fee-method {
    position: relative;
    z-index: 1;
    font-weight: 700;
    font-size: 24.579px;
    line-height: 1.35;
    color: #000;
    letter-spacing: 0;
    text-box: trim-both cap alphabetic;
    display: block;
}

.fee-method_img {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 36%;
    z-index: 0;
    overflow: hidden;
}

.fee-method_img img {
    height: 100%;
    width: 100%;
    object-fit: fill;
    object-position: right center;
}

/* --- 自治体のがん検診の費用 --- */
.cost {
    display: flex;
    gap: 24px;
    align-items: flex-end;
    width: 100%;
}

.cost-box {
    flex: none;
    width: 409.74px;
}

.cost-box_ttl {
    text-align: center;
    font-weight: 700;
    font-size: 23.611px;
    line-height: 1;
    color: #231815;
    margin-bottom: 14.79px;
    letter-spacing: 0;
}

.cost-box_price {
    background-color: var(--c-breast);
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: 21.046px;
    line-height: 1;
    padding: 11.3px 0;
    border-radius: 999px;
    width: 393px;
    height: 52.21px;
    letter-spacing: 0;
}

.cost-box_price b {
    font-size: 140%;
}

.search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.search-row_label {
    flex: none;
    font-weight: 700;
    font-size: 1.9rem;
    letter-spacing: 0.03em;
    color: var(--ink);
}

.search-box {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: stretch;
    border: 2px solid var(--purple);
    border-radius: 4px;
    background-color: #fff;
    overflow: hidden;
}

.search-box_text {
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 10px;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.02em;
    line-height: 1.5;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-box_btn {
    flex: none;
    background-color: var(--purple);
    color: #fff;
    font-weight: 700;
    font-size: 1.7rem;
    line-height: 1.5;
    padding: 4px 12px;
    display: flex;
    align-items: center;
}

.cost-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 20.047px;
    line-height: 1.6;
    letter-spacing: 1.6038px;
    text-box: trim-both cap alphabetic;
}

/* --- LESSON2 受診の流れ --- */
.flow {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.flow-start {
    display: flex;
    align-items: center;
    gap: 10px;
}

.flow-start_img {
    width: 161.709px;
    flex: none;
}

.flow-start_box {
    width: 408px;
}

.flow-start_label {
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 1.3;
    color: var(--ink);
}

.flow-start_ex {
    font-size: 1.35rem;
    line-height: 1.4;
    color: var(--ink);
    margin-left: 25px;
    letter-spacing: 0;
}

.flow-arrow {
    width: 43.001px;
    height: 43.028px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("../images/lesson_flow_arrow.svg");
}

.flow-cols {
    display: flex;
    gap: 12px;
    width: 100%;
}

.flow-col {
    flex: 1 1 0;
    min-width: 0;
    background-color: #fff;
    border: 2px solid #000;
}

.flow-col_head {
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: 20.422px;
    line-height: 1.3;
    padding: 12px;
    background-color: var(--c);
    text-box: trim-both cap alphabetic;
}

.flow-col_body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.flow-col_ttl {
    text-align: center;
    font-weight: 700;
    font-size: 22.696px;
    line-height: 1.3;
    color: #000;
    text-box: trim-both cap alphabetic;
}

.flow-col_list li {
    display: flex;
    gap: 4px;
    font-size: 13.509px;
    line-height: 1.4;
    color: #000;
    letter-spacing: 0;
    text-box: trim-both cap alphabetic;
}

.flow-col_list li::before {
    content: "■";
    color: var(--c);
    flex: none;
}

.flow-result {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flow-result_label {
    background-color: var(--purple);
    color: #fff;
    font-weight: 700;
    font-size: 20.422px;
    line-height: 1.3;
    padding: 12px 20px;
    position: relative;
    z-index: 2;
    margin-bottom: -12px;
    text-box: trim-both cap alphabetic;
}

.flow-result_cols {
    display: flex;
    gap: 12px;
    width: 100%;
}

.flow-result_col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flow-result_box {
    width: 100%;
    border: 2px solid #000;
    background-color: #fff;
    text-align: center;
    padding: 20px;
    font-weight: 700;
    font-size: 22.696px;
    line-height: 1.3;
    color: #000;
    letter-spacing: 0;
    text-box: trim-both cap alphabetic;
}

.flow-result_box small {
    font-size: 66%;
}

.flow-walk {
    position: absolute;
    left: 38px;
    top: 0;
    width: 98px;
}

/* --- もし要精密検査と言われたら --- */
.pre {
    position: relative;
    width: 100%;
    border: 12px solid #ece9ef;
    padding: 40px 60px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 0;
}

.pre-badge {
    position: absolute;
    left: -22px;
    top: -38px;
    display: flex;
    align-items: center;
}

.pre-badge_mark {
    position: relative;
    z-index: 2;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background-color: var(--yellow);
    border: 4px solid var(--purple);
    color: var(--purple);
    font-weight: 700;
    font-size: 47.058px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: -24px;
}

.pre-badge_txt {
    background-color: var(--purple);
    color: #fff;
    font-weight: 700;
    font-size: 2.27rem;
    line-height: 1.3;
    padding: 10px 12px 10px 32px;
}

.pre-lead {
    position: relative;
    padding-right: 150px;
}

.pre-lead h4 {
    font-weight: 700;
    font-size: 22.696px;
    line-height: 1.4;
    color: #000;
    margin-bottom: 24px;
    letter-spacing: 0;
    text-box: trim-both cap alphabetic;
}

.pre-lead p {
    font-size: 20.047px;
    line-height: 1.6;
    letter-spacing: 1.6038px;
    color: #333;
    text-box: trim-both cap alphabetic;
}

.pre-consult {
    position: absolute;
    right: -84px;
    top: 8px;
    width: 224px;
}

.pre-graph_ttl {
    font-size: 1.46rem;
    line-height: 1.5;
    color: var(--purple);
    margin-bottom: 12px;
}

.pre-graph {
    background-color: #fffdf1;
    display: flex;
    gap: 20px;
    padding: 20px;
    justify-content: center;
    align-items: center;
}

.pre-graph_labels {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0;
    font-size: 15.761px;
    line-height: 30px;
    color: var(--purple);
    text-align: right;
    letter-spacing: 0;
}

.pre-graph_bars {
    flex: none;
    min-width: 0;
    border-left: 1px solid #000;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0;
    width: 434px;
}

.pre-graph_bars li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pre-graph_bar {
    flex: none;
    background-color: #8c7e9b;
    color: #fff;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 6px 0;
    font-size: 1.35rem;
    line-height: 1;
    width: var(--w);
}

.pre-graph_bar b {
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 1;
}

.pre-graph_bars small {
    font-size: 1.35rem;
    line-height: 1;
    color: var(--ink);
    white-space: nowrap;
    letter-spacing: 0;
}

/* --- 5つの生活習慣 --- */
.habit {
    position: relative;
    width: 100%;
}

.habit-list li {
    display: flex;
    align-items: center;
    background-color: #efefef;
    margin-top: 4px;
    min-height: 40px;
}

.habit-list_num {
    flex: none;
    width: 40px;
    background-color: var(--purple);
    color: #fff;
    font-weight: 700;
    font-size: 24.276px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
}

.habit-list_ttl {
    flex: none;
    width: 220px;
    border-right: 1px solid #000;
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-weight: 700;
    font-size: 21.848px;
    line-height: 1.3;
    color: var(--purple);
    letter-spacing: 0;
    align-self: stretch;
}

.habit-list_txt {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    align-items: center;
    padding: 12px;
    font-size: 16.993px;
    line-height: 1.2;
    color: #2f2725;
    letter-spacing: 0;
    text-box: trim-both cap alphabetic;
}

.habit-man {
    position: absolute;
    right: -26.26px;
    top: -203px;
    width: 132.256px;
}

/* =========================================================
   Q&A
   ========================================================= */
.qa {
    background-color: #fff;
    padding: 80px 0;
}

.qa-frame {
    margin-inline: var(--gut);
    padding: 20px;
    background-image: linear-gradient(115deg, #fbe7e3 0%, #f9ece5 35%, #f3f0e6 68%, #e5f1e6 100%);
}

.qa-inner {
    background-color: #fff;
    padding: 40px 60px 60px;
}

.qa-head {
    position: relative;
    height: 7px;
    border-top: 2px solid var(--purple);
    border-bottom: 2px solid var(--purple);
    margin: 0 65px 40px;
}

.qa-head_tag,
.info-head_tag {
    position: absolute;
    left: 60px;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--purple);
    color: #fff;
    font-weight: 700;
    font-size: 2.18rem;
    line-height: 1;
    letter-spacing: 0.08em;
    padding: 19px 28px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%);
}

.qa-lead {
    display: flex;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 40px;
}

.qa-logo {
    flex: none;
    display: block;
    line-height: 0;
    background: linear-gradient(transparent 70%, var(--yellow) 70%);
}

.qa-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.qa-lead_txt {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 2rem;
    line-height: 1.6;
    letter-spacing: 0.08em;
    color: var(--ink);
}

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

.qa-col.--right {
    padding-top: 60px;
}

.qa-item {
    position: relative;
    padding: 40px 40px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.qa-item::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 0;
    width: 96px;
    height: 105px;
    background: url("../images/qa_bg_q.svg") 0 0 / 96px 105px no-repeat;
    z-index: 0;
}

.qa-item > * {
    position: relative;
    z-index: 1;
}

.qa-item_q {
    font-weight: 700;
    font-size: 1.9rem;
    line-height: 1.45;
    letter-spacing: 0.01em;
    color: var(--purple);
}

.qa-item_a {
    font-weight: 600;
    font-size: 2.2rem;
    line-height: 1.4;
    letter-spacing: 0;
    color: #ed6d34;
}

.qa-item_txt {
    font-size: 1.6rem;
    line-height: 1.6;
    letter-spacing: 0.08em;
    color: var(--ink);
}

.qa-illust {
    position: absolute;
    z-index: 2;
}

.qa-illust.--gown {
    width: 113px;
    right: 10px;
    top: -14px;
    transform: rotate(12.45deg);
}

.qa-illust.--calendar {
    width: 192px;
    right: -39px;
    top: -53px;
    transform: rotate(-9.09deg);
}

.qa-illust.--form {
    width: 106px;
    right: 120px;
    top: -40px;
}

.qa-illust.--stethoscope {
    width: 117px;
    right: -11px;
    top: -12px;
}

.qa-illust.--pen {
    width: 65px;
    right: 39px;
    top: -69px;
    transform: rotate(-13.09deg);
}

.qa-figure {
    position: relative;
    height: 263px;
    margin-top: 40px;
}

.qa-figure img {
    position: absolute;
}

.qa-figure .--bulb {
    width: 83px;
    left: 0;
    top: 24px;
    transform: rotate(-13.09deg);
}

.qa-figure .--woman {
    width: 133px;
    left: 71px;
    top: 40px;
}

.qa-figure .--man {
    width: 161px;
    left: 197px;
    top: 0;
}

.qa-source {
    text-align: right;
    font-size: 1.18rem;
    line-height: 1.5;
    color: #000;
    margin-top: 20px;
}

/* =========================================================
   TOPICS
   ========================================================= */
.info {
    background-color: #fff;
    background-image: linear-gradient(115deg, #fdf1e8 0%, #fdf0f0 30%, #f6f4ef 60%, #f4fbf3 80%, #fffce8 100%);
}

.info-head {
    position: relative;
    height: 6px;
    border-top: 2px solid var(--purple);
    border-bottom: 2px solid var(--purple);
}

.info-head_tag {
    left: 50%;
    transform: translate(-50%, -50%);
    letter-spacing: 0.12em;
}

.info-container {
    padding: 60px var(--gut) 0;
    text-align: center;
}

.info-ttl {
    font-weight: 600;
    font-size: 2.4rem;
    line-height: 1.5;
    color: var(--purple);
}

.info-txt {
    margin-top: 28px;
    font-size: 1.6rem;
    line-height: 1.6;
    letter-spacing: 0.08em;
}

.info-note {
    margin-top: 28px;
    font-size: 1.18rem;
    line-height: 1.5;
    color: #000;
}

.info-loop {
    margin-top: 40px;
    overflow: hidden;
}

.info-loop .swiper-wrapper {
    transition-timing-function: linear;
}

.info-loop .swiper-slide img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.info-bottom {
    max-width: 1000px;
    margin-inline: auto;
    padding: 60px 100px;
    background: linear-gradient(to right, transparent 0%, #fff 10%, #fff 90%, transparent 100%);
}

.info-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.info-logos_c {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: none;
}

.info-logos_c img:nth-child(1) {
    width: 84px;
}

.info-logos_c img:nth-child(2) {
    width: 125px;
}

.info-logos_x {
    flex: none;
    width: 21px;
    height: 21px;
    position: relative;
    color: #9b9b9b;
}

.info-logos_x::before,
.info-logos_x::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1.5px;
    background-color: currentColor;
}

.info-logos_x::before {
    transform: rotate(45deg);
}

.info-logos_x::after {
    transform: rotate(-45deg);
}

.info-logos_univ {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex: 0 0 auto;
    width: 520px;
    max-width: 100%;
}

.info-logos_univ img {
    width: auto;
    max-width: 100%;
}

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

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

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

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

.info-link {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}

.info-link li a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8em;
    padding: 4px 22px;
    background: #fff;
    border-radius: 999px;
    border: 2px solid #f6bac9;
}

.info-link li a span {
    font-family: "Gen Interface JP", sans-serif;
    font-weight: 500;
    font-size: 2rem;
    letter-spacing: 0.04em;
    color: #4c4948;
}

.info-link li a img {
    width: 20px;
    flex: none;
}

/* =========================================================
   footer
   ========================================================= */
footer {
    background-color: #fff;
    background-image: linear-gradient(115deg, #f7f1ea 0%, #f4f8f6 40%, #eef6fb 70%, #f8f6ee 100%);
}

.foot-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px 20px 60px;
}

.foot-logo {
    width: 250px;
}

.foot-container h6 {
    text-align: center;
    font-size: 1.4rem;
    letter-spacing: 0.12em;
    color: #4c4948;
}

/* Figma 20:6381 / 20:6467: graphic coordinates preserve the intended overlap. */
.rank-data { position: absolute; left: 444.2px; top: 0; width: 441.7px; }
.type-list li > span:last-child { display: flex; gap: 9px; }
.type .lesson-source { margin-top: 16px; font-size: 13.123px; }
.per-card_num b small { font-size: 58.13px; letter-spacing: -2px; }
.per-card:nth-child(2), .per-card:nth-child(5) { left: 35.35%; }
.per-card:nth-child(3) { left: 69.24%; }
.per-card:nth-child(4), .per-card:nth-child(5) { top: 225.99px; }
/* Bottom-row cards share the top row's numeral size so the 〈I期生存率〉 label never collides. */
.per-card:nth-child(4) .per-card_num b, .per-card:nth-child(5) .per-card_num b { font-size: 85.687px; }
.per-card:nth-child(4) .per-card_num, .per-card:nth-child(5) .per-card_num { top: 48px; }
.per-card:nth-child(4) .per-card_num span, .per-card:nth-child(5) .per-card_num span { top: 3px; }
.per-list > .lesson-source { position: absolute; top: 423.27px; left: 2.29%; width: 64%; font-size: 14.281px; line-height: 1.4; text-align: left; letter-spacing: -0.3px; }
.lesson-block.--bar1 { padding-bottom: 0; }
.lesson.--l1 { padding-bottom: 60px; }
.fee-table tbody tr:nth-child(2) .fee-icon, .fee-table tbody tr:nth-child(4) .fee-icon { width: 67.713px; }
.fee-table tbody tr:nth-child(2) .fee-method_img { width: 28.57%; }
.fee-table tbody tr:nth-child(3) .fee-method_img { width: 36.88%; }
.fee-table tbody tr:nth-child(4) .fee-method_img { width: 33.39%; }
.fee-table tbody tr:nth-child(5) .fee-method_img { width: 49.45%; }
.cost .search-row { width: 394px; gap: 6px; }
.cost .search-box { border-width: 1px; border-radius: 0; height: 28px; }
.cost .search-box_text { padding: 0 5px; font-size: 16.292px; line-height: 26px; letter-spacing: 0; }
.cost .search-box_btn { font-size: 20.731px; padding: 0 11px; }
.flow-col_list { display: flex; flex-direction: column; gap: 12px; }
.flow-start .search-box_text { font-size: 20.264px; letter-spacing: 0; padding: 2px 7px; }
.lesson-ttl::before { background-image: url("../images/lesson_ribbon_edge.svg"); }
.lesson-ttl::after { background-image: url("../images/lesson_ribbon_edge.svg"); }
.lesson-ttl .mark { background: url("../images/lesson_marker.png") center / 100% 100% no-repeat; padding: 6px 2px; }

/* Match Figma table row and diagram text-box heights. */
.fee-table thead th { height: 40px; padding: 0 4px; vertical-align: middle; }
.fee-table tbody th, .fee-table td { padding-block: 27.6px; }
.flow-col_head { height: 40px; line-height: 1; }
.flow-col_body { padding-block: 16px; }
.pre-graph_bar { text-box: trim-both cap alphabetic; }
.pre-graph_labels { line-height: 25px; }
.pre-graph_ttl { text-box: trim-both cap alphabetic; }
.habit-list li:last-child .habit-list_txt { padding-block: 4px; }
.habit + .lesson-source { margin-top: -20px; }

/* Q&A — Figma 20:6976: full-width double rule and 440px columns. */
.qa-frame { border-radius: 12px; background: linear-gradient(110deg, #fce5e3, #fcebd8 28%, #e3f5ff 62%, #f7fbf6 80%, #dcefe0); }
.qa-inner { padding-bottom: 40px; }
.qa-head { height: 60px; border: 0; margin: 0 -60px 20px; }
.qa-head::before { content: ""; position: absolute; top: 26px; left: -2px; right: 0; height: 7px; border-block: 2px solid var(--purple); }
.qa-head_tag, .info-head_tag { width: 191px; height: 60px; padding: 0; display: flex; align-items: center; justify-content: center; background: url("../images/section_tag.svg") center / 100% 100% no-repeat; clip-path: none; letter-spacing: 0; }
.qa-head_tag { left: 125px; }
.qa-logo { width: 314px; height: 126px; background: linear-gradient(transparent 70%, var(--yellow) 70%); }
.qa-lead_txt { text-box: trim-both cap alphabetic; }
.qa-col { display: flex; flex-direction: column; gap: 40px; }
.qa-item { gap: 24px; }
.qa-item_q { font-size: 20px; line-height: 1.2; letter-spacing: 0; text-box: trim-both cap alphabetic; }
.qa-item_a { font-size: 24px; line-height: 1.2; text-box: trim-both cap alphabetic; }
.qa-item_txt { text-box: trim-both cap alphabetic; }
.qa-illust.--gown { top: 20px; right: 10px; }
.qa-illust.--form { right: 60px; top: -20px; }
.qa-illust.--stethoscope { top: 28px; }
.qa-illust.--pen { top: -49px; }
.qa-figure { flex: none; margin-top: 0; margin-left: 40px; }
.qa-source { margin-top: 40px; text-box: trim-both cap alphabetic; }

/* DATA — exported curves, 344 × 220 panels and a shared axis. */
.data-head { padding-top: 41px; padding-bottom: 0; height: 365px; }
.data-head_ttl { height: 90px; }
.data-head_ttl::before { background: url("../images/data_ribbon.svg") right center / auto 90px no-repeat; clip-path: none; }
.data-head_ttl h2 { font-size: 28.91px; line-height: 1; letter-spacing: -.6px; text-align: left; }
.data-head_sub { font-size: 20.65px; letter-spacing: 2px; text-align: left; line-height: 1; margin-top: 10px; }
.data-head_note { margin-top: 120px; }
.data-slider { padding-top: 0; }
.data-slider .swiper-slide { width: 344px; }
.data-slide_pill { display: table; font-size: 26.8px; letter-spacing: 0; height: 40px; line-height: 20px; margin: 0 auto 12px; }
.data-slide_plot { gap: 6px; }
.data-slide_yaxis { width: 78px; font-size: 20.3px; letter-spacing: 0; }
.data-slide_yaxis li:first-child { white-space: normal; width: 100%; line-height: 1.3; text-align: right; transform: translateY(-45%); }
.data-slide_panel { position: relative; height: 220px; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 32px, #fff 32px, #fff 34px); background-position: 0 -18px; }
.data-slide_panel img { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; }
.data-slide_xaxis { margin: 12px 0 0; font-size: 20.3px; letter-spacing: 0; }
.data-nav { width: 428px; margin: 32px 0 0; }
.data-nav .swiper-button-prev, .data-nav .swiper-button-next { flex: 0 0 34px; }
.data-nav .swiper-pagination { flex: none; width: auto; gap: 12px; }
.data-nav .swiper-pagination-bullet { width: 9.6px; height: 9.6px; }

/* Navigation is outside Swiper; override its later-loaded horizontal pagination rule. */
#dataSlider .data-nav .swiper-pagination { width: auto; }
.data-nav .swiper-pagination-bullet:nth-of-type(1) { background: #89c681; }
.data-slide_xaxis { margin-top: 8px; }
.data-nav { margin-top: 30.7px; }
/* Y 軸目盛はパネル高さに対して線形（30,000=上端 / 20,000=1/3 / 10,000=2/3 / 0=下端）。
   1 行目「（人）/30,000」は 2 行なので、2 行目の中心が上端に来るよう補正 */
/* 目盛は下から 2・4・6 本目の罫線（y=152 / 84 / 16 of 220）の上下中央、0 は下端 */
.data-slide_yaxis li:first-child { top: 7.273% !important; transform: translateY(calc(-100% + 0.65em)); }
.data-slide_yaxis li:nth-child(2) { top: 38.182% !important; }
.data-slide_yaxis li:nth-child(3) { top: 69.091% !important; }
.data-slide_yaxis li:nth-child(4) { top: 100% !important; }

/* TOPICS: 400px photographs and the original university logo arrangement. */
.info-head { height: 60px; border: 0; }
.info-head::before { content: ""; position: absolute; left: 0; right: 0; top: 26px; height: 7px; border-block: 2px solid var(--purple); }
.info-container { padding-top: 33px; }
.info-ttl { line-height: 1.25; letter-spacing: 0; text-box: trim-both cap alphabetic; }
.info-txt, .info-note { text-box: trim-both cap alphabetic; }
.info-loop .swiper-slide { width: 400px; }
.info-loop .swiper-slide img { height: 300px; }
.info-bottom { max-width: 1080px; margin-top: 40px; }
.info-logos { gap: 36px; justify-content: space-between; }
.info-logos_univ { flex: 1 1 auto; width: auto; min-width: 0; }
.info-logos_c img:first-child { height: 108px; object-fit: contain; }
.info-logos_c img:nth-child(2) { height: 38px; object-fit: contain; }
.foot-logo img { width: 250px; height: 75px; object-fit: contain; }
.foot-container h6 { line-height: 1.8; }

/* One exported texture, white at 70%, matching the Figma multiply/.3 layer. */
main { background: #fff; }
.fv, .cm, .msg, .lesson-wrap, .qa-frame, .info, footer {
    background-color: #fff;
    background-image: linear-gradient(#ffffffb3, #ffffffb3), url("../images/background_texture.webp");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.fv { background-size: 100% 1801px; }
.cm { background-size: 100% 1801px; background-position: center -570px; }
.msg { background-size: 100% 1801px; background-position: center -1019px; }
/* TOPICS + footer は 1 枚のテクスチャを横幅いっぱいに連続表示（高さは JS が --info-h / --foot-h に反映） */
.info, footer { background-size: 100% calc(var(--info-h, 955px) + var(--foot-h, 210px)); }
.info { background-position: center top; }
footer { background-position: center bottom; }
.cm { padding: 80px 0 0; }
.cm-label { width: 24px; align-self: flex-start; }
.cm-label_en { font-size: 32.5px; letter-spacing: 0; }
.cm-label_ja { font-size: 22.7px; letter-spacing: 0; }
.qa-col { gap: 43.5px; }
.qa-illust.--calendar { top: -42px; }
.qa-illust.--gown { top: 14px; }
.qa-figure { height: 266.625px; }

.info-logos_univ img:nth-child(1) { height: 38px; object-fit: contain; }
.info-logos_univ img:nth-child(2) { height: 36px; object-fit: contain; }
.info-logos_univ img:nth-child(3) { height: 45px; object-fit: contain; }
.info-logos_univ img:nth-child(4) { height: 50px; object-fit: contain; }
.info-link li a { height: 38px; }
.cm-label_ja { text-orientation: upright; }
.flow-col_list li { line-height: 1.25; }
.info-link { width: 800px; max-width: 100%; }
.info-container { padding-top: 33.83px; }

/* Trim source text boxes and align the five graph rows with their labels. */
.fee-scroll + .lesson-source, .pre-graph_wrap > .lesson-source { text-box: trim-both cap alphabetic; }
.pre-graph_bar { height: 25.2px; padding: 3.6px 0; }
.pre-graph_labels { line-height: 25.2px; }
.pre-graph { background-color: #fffcf1; }
.habit + .lesson-source { margin-top: -12px; }

/* MESSAGE — pin the track at the viewport's vertical centre; fit the stage to short viewports. */
@media screen and (min-width: 920px) and (prefers-reduced-motion: no-preference) {
    .msg { display: flex; align-items: center; min-height: 100vh; }
    /* Keep the shared texture continuous with .cm now that the section is 100vh tall. */
    .msg { background-size: 100% calc(100vh * 2.30309); background-position: center calc(100vh * -1.30309); }
    .msg-track { flex: none; }
    .msg-text { zoom: var(--msg-scale, 1); }
    .msg-scene { width: calc(1301px * var(--msg-scale, 1)); height: calc(695px * var(--msg-scale, 1)); }
    .msg-pic { transform: scale(var(--msg-scale, 1)); transform-origin: 0 0; }
}

/* DATA — the Y axis sits outside Swiper so only the graphs slide. */
.data-slider { display: grid; grid-template-columns: var(--data-axis-w, 78px) minmax(0, 1fr); column-gap: 6px; }
.data-axis { position: relative; }
/* Swiper's auto side margins would stop the grid item from stretching. */
.data-slider > .swiper { min-width: 0; margin-inline: 0; }
.data-nav { grid-column: 1 / -1; }
.data-axis .data-slide_yaxis { position: absolute; left: 0; top: var(--data-plot-top, 52px); width: 100%; height: var(--data-panel-h, 220px); opacity: 0; transition: opacity .25s ease; }
.data-axis .data-slide_yaxis.is-active { opacity: 1; }

/* LESSON — the vertical label follows its own section. */
@media screen and (min-width: 769px) {
    .lesson-label { position: sticky; top: 40px; align-self: flex-start; z-index: 1; }
}

/* =========================================================
   修正パス 6
   ========================================================= */

/* 2: 見出しの強調は白ベタではなく Figma のマーカー (下端 45% を白で塗る帯) */
.data-head_ttl h2 em {
    background: url("../images/data_marker.webp") center bottom / 100% 100% no-repeat;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* 10: 検査方法セルのイラストは contain。テキストはイラスト幅ぶん右を空ける */
.fee-method_img img { object-fit: contain; }
.fee-table tbody tr:nth-child(1) .fee-method { padding-right: 35.5%; }
.fee-table tbody tr:nth-child(2) .fee-method { padding-right: 27.5%; }
.fee-table tbody tr:nth-child(3) .fee-method { padding-right: 36.5%; }
.fee-table tbody tr:nth-child(4) .fee-method { padding-right: 32.5%; }
.fee-table tbody tr:nth-child(5) .fee-method { padding-right: 49.5%; }

/* 11: 自治体のがん検診の費用ブロックは書き出し画像に置換 */
.cost-box { width: 411px; }
.cost-box img { display: block; width: 100%; height: auto; }

/* 12: 「まずは◯◯で検索」ブロックも書き出し画像に置換 */
.flow-start_box { width: 425px; }
.flow-start_box img { display: block; width: 100%; height: auto; }

/* =========================================================
   修正パス 7
   ========================================================= */

/* 5: 1081〜1160px 付近で走る男性イラストの right: -26px がページ右に溢れる。
      この帯域だけ右はみ出しを 0 にして水平スクロールを消す (1161px 以上は現状維持)。 */
@media screen and (min-width: 1081px) and (max-width: 1160px) {
    .habit-man { right: 0; }
}

/* 5 (追加): 罹患データ表は left 444.2px + width 441.7px = 885.9px 固定のため、
   ちょうど 1081px のときだけ 0.88px 右に溢れていた。1082px 以上では効かない上限。
   (1080px 以下は position: static / width: 100% なので対象外) */
@media screen and (min-width: 1081px) {
    .rank-data { max-width: calc(100% - 444.2px); }
}

/* 修正パス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; }