@charset "UTF-8";

:root {
    --page-lr-space: min(120px, 8.3vw);
    --page-lr-space-sp: 5vw;
    --font-mincho: "Shippori Mincho", serif;
    --font-gothic: "Noto Sans JP", sans-serif;
    --font-english: "Jost", serif;
    --body-text-color: #382F21;
    --body-title-h2-color: #382F21;
    --body-title-h3-color: #3A7CA5;
    --body-font-size: min(1.14vw, 16px);
    --body-font-size-sp: 16px;
    --body-line-height: 1.5;
    --body-letter-spacing: 0.1em;
    --body-background-color: #ffffff;
    --section-inner-width: 1240px;
    --border-radius-full: calc(infinity * 1px);
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: inherit;
    opacity: 1;
    transition: opacity 0.3s ease;
}

a:hover {
    opacity: 0.7;
}

section {
    width: 100%;
    padding: 30px 0;
    margin: 0;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

#header{
    max-width: none;
    top: 0;
    margin-top: 0;
}

body {
    display: block;
    width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    background: var(--body-background-color);
    color: var(--body-text-color);
    font-family: var(--font-gothic);
    letter-spacing: var(--body-letter-spacing);
    font-size: var(--body-font-size);
    line-height: var(--body-line-height) !important;
}

@media screen and (max-width: 767px) {
    body {
        font-weight: normal;
        font-size: var(--body-font-size-sp);
        line-height: 1.5;
    }
}

.container {
    padding: 0 20px !important;
}

.section-inner {
    width: 100%;
    max-width: var(--section-inner-width);
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--page-lr-space);
    box-sizing: border-box;
}

@media screen and (max-width: 767px) {
    .section-inner {
        padding: 0 var(--page-lr-space-sp);
    }
}

.link-none {
    pointer-events: none;
}

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

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

.asthma-title-h2 {
    font-size: 36px;
    letter-spacing: .02em;
    margin: 0 0 36px;
    font-family: var(--f_maru);
    position: relative;
    color: var(--body-title-h2-color);
}

.asthma-title-h2::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 100px;
    height: 5px;
    border-radius: var(--border-radius-full);
    background-color: #3A7CA5;
}

@media screen and (max-width: 767px) {
    .asthma-title-h2 {
        font-size: 28px;
        text-align: center;
    }

    .asthma-title-h2::before {
        transform: translateX(-50%);
        left: 50%;
    }
}

.asthma-title-h2-center {
    text-align: center;
}

.asthma-title-h2-center::before {
    transform: translateX(-50%);
    left: 50%;
}

.asthma-title-h3 {
    color: var(--body-title-h3-color);
    font-size: 32px;
    margin: 0 0 20px;
    font-family: var(--f_maru);
}

.asthma-title-h3-center {
    text-align: center;
}

@media screen and (max-width: 767px) {
    .asthma-title-h3 {
        font-size: 24px;
    }
}

.asthma-caution-text {
    font-size: 11px;
}

.asthma-text-link {
    text-decoration: underline;
}

/* ===== Buttons row ===== */
.asthma-actions {
    margin-top: 16px;
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.asthma-actions .more {
    display: inline-flex;
    align-items: center;
}

.asthma-actions .more span {
    height: 37px;
    align-content: center;
}

.asthma-actions .more-arrow {
    width: 50px;
    height: 37px;
    margin-bottom: 0;
    margin-left: auto;
}

.asthma-actions .beginner {
    width: 15px;
    height: 30px;
    margin: 0 10px 0 0;
}

@media screen and (max-width: 767px) {
    .asthma-actions .more {
        width: 100%;
    }

    .asthma-actions .more {
        padding-left: 6px;
    }
}

/* 青ボタン */
.asthma-blue-btn {
    display: block;
    align-items: center;
    padding: 16px 50px 16px 24px;
    border-radius: var(--border-radius-full);
    background: var(--body-title-h3-color);
    color: #fff;
    line-height: 1;
    font-size: 18px;
    position: relative;
    align-content: center;
    width: fit-content;
}

.asthma-blue-btn::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 15px;
    background-image: url(/wp-content/themes/chidori-res.com/img/asthma-icon-arrow-white.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    transform: translate(0%, -50%);
    top: 50%;
    right: 16px;
}

/* ===============================
#asthma-fv
=============================== */
#asthma-fv {
    padding: 28px 0 20px;
    background-image: url(../../img/asthma-fv.png);
    background-size: cover;
    background-position: bottom right;
    margin-top: 180px;
}

@media screen and (max-width: 767px) {
    #asthma-fv {
        background-image: url(../../img/asthma-fv-sp.png);
        background-position: top right;
        margin-top: 100px;
    }
    header{
        top: 0;
    }
}

/* sr-only（必要なければ削除OK） */
#asthma-fv .sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
    white-space: nowrap;
}

#asthma-fv .asthma-fv__copy {
    display: grid;
    gap: 10px;
}

/* 上の小さなラベル */
#asthma-fv .asthma-fv__label {
    display: inline-block;
    background: var(--body-title-h3-color);
    color: #fff;
    font-size: 13px;
    padding: 16px 32px;
    border-radius: 999px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .1);
    width: fit-content;
    position: absolute;
    transform: translateY(-80%);
}

/* 大きなピル2行 */
#asthma-fv .asthma-fv__headline {
    display: grid;
    gap: 10px;
    position: relative;
    margin: 30px 0 10px;
}

#asthma-fv .asthma-fv__pill {
    display: inline-block;
    padding: 20px 32px 20px 20px;
    border-radius: 0 var(--border-radius-full) var(--border-radius-full) 0;
    background: #fff;
    /* 薄いブルー */
    color: var(--body-title-h3-color);
    /* 文字は濃いめの青 */
    line-height: 1.4;
}

#asthma-fv .asthma-fv__pill--lg {
    font-size: 36px;
    font-family: var(--f_maru);
    letter-spacing: .03em;
    width: fit-content;
}

/* 小さなタグ群 */
#asthma-fv .asthma-fv__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    list-style: none;
}

#asthma-fv .asthma-fv__tag {
    display: inline-block;
    padding: 6px 16px;
    border-radius: var(--border-radius-full);
    background: #fff;
    color: var(--body-text-color);
    font-family: var(--f_maru);
    border: 1px solid var(--body-title-h3-color);
    font-size: 13px;
    line-height: 1;
}

/* 補足コピー */
#asthma-fv .asthma-fv__note {
    margin: 6px 0 20px;
    font-family: var(--f_maru);
    font-size: 20px;
    color: #2a2a2a;
    padding: 8px;
    background: rgba(255, 255, 255, 0.5);
    width: fit-content;
}

/* ---------- SP（<=767px） ---------- */
@media screen and (max-width: 767px) {
    #asthma-fv {
        padding: 120px 0 70px;
    }

    #asthma-fv .asthma-fv__headline {
        margin: 30px 0 10px calc(-1 * var(--page-lr-space-sp));
    }

    #asthma-fv .asthma-fv__pill {
        padding: 16px 28px 16px 16px;
    }

    #asthma-fv .asthma-fv__pill--lg {
        font-size: 24px;
    }

    #asthma-fv .asthma-fv__label {
        font-size: 15px;
        padding: 12px 20px;
        left: var(--page-lr-space-sp);
        transform: translateY(-70%);
    }

    #asthma-fv .asthma-fv__tag {
        font-size: 12px;
        padding: 5px 10px;
    }

    #asthma-fv .asthma-fv__note {
        font-size: 16px;
    }
}

/* ===============================
#asthma-fv features
=============================== */
#asthma-fv .asthma-fv__features {
    background: #f6f1ea;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 30%, rgba(246, 241, 234, 1) 30%, rgba(246, 241, 234, 1) 100%);
    padding: 14px 16px;
    margin-bottom: 10px;
}

#asthma-fv .asthma-fv-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* PC：4カラム */
    gap: 0;
    /* 仕切りで区切るためgap 0 */
    list-style: none;
}

/* 各アイテム（PC時：縦レイアウト＆中央寄せ） */
#asthma-fv .asthma-fv-feature {
    padding: 14px 16px;
    text-align: center;
    position: relative;
}

/* #asthma-fv .asthma-fv-feature:not(:last-child) {
    border-right: 2px dotted #d9cfc3;
} */

#asthma-fv .asthma-fv-feature:not(:last-child)::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 2px;
    height: 65%;
    border-right: 2px dashed #d9cfc3;
}

#asthma-fv .asthma-fv-feature__icon {
    width: 120px;
    height: 100px;
    margin: 0 auto 8px;
    display: grid;
    place-items: center;
}

#asthma-fv .asthma-fv-feature__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#asthma-fv .asthma-fv-feature__text {
    font-size: 15px;
}

/* ---------- SP(<=767px)：1カラム・横並び ---------- */
@media screen and (max-width: 767px) {
    #asthma-fv .asthma-fv-features {
        grid-template-columns: 1fr;
        /* 1カラム */
        gap: 10px;
    }

    #asthma-fv .asthma-fv-feature {
        display: flex;
        align-items: center;
        gap: 12px;
        text-align: left;
        padding: 5px 6px;
        background: #F9F5EF;
    }

    #asthma-fv .asthma-fv-feature__text {
        font-size: 12px;
    }

    #asthma-fv .asthma-fv-feature:not(:last-child) {
        border-right: none;
        /* 仕切りを消す */
    }

    #asthma-fv .asthma-fv-feature__icon {
        width: 56px;
        height: 56px;
        margin: 0;
        flex: 0 0 56px;
        /* 左側に固定幅のアイコン箱 */
    }

    #asthma-fv .asthma-fv-feature__icon img {
        width: 100%;
        height: 100%;
    }

    #asthma-fv .asthma-fv-feature:not(:last-child)::before {
        content: none;
    }

    #asthma-fv .asthma-fv__features {
        background: none;
        padding: 0;
    }
}

#asthma-anchor-links {
    padding: 72px 0;
}

/* --- Flexbox --- */
#asthma-anchor-links .anchor-links__flex {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

#asthma-anchor-links .anchor-links__item {
    flex: 1 1 calc(33.333% - 28px);
}

/* 767px以下は1列 */
@media screen and (max-width: 767px) {
    #asthma-anchor-links .anchor-links__flex {
        gap: 12px;
    }

    #asthma-anchor-links .anchor-links__item {
        flex: 1 1 100%;
    }
}

/* --- Buttons --- */
#asthma-anchor-links .anchor-links__btn {
    display: inline-block;
    width: 100%;
    padding: 20px 44px 20px 22px;
    text-align: center;
    border-radius: 10px;
    background: #5aa0c8;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: .02em;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .12), inset 0 -2px 0 rgba(0, 0, 0, .08);
    transition: transform .06s ease, box-shadow .06s ease, background .2s ease, filter .2s ease;
    position: relative;
}

/* caret (▼) */
#asthma-anchor-links .anchor-links__btn::after {
    content: "";
    position: absolute;
    right: 20px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translateY(-60%) rotate(45deg);
    top: 50%;
    transition: all .3s ease;
}

#asthma-anchor-links .anchor-links__btn:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(35, 103, 143, .18), inset 0 -2px 0 rgba(0, 0, 0, .08);
}

#asthma-anchor-links .anchor-links__btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 0 rgba(0, 0, 0, .12), inset 0 -1px 0 rgba(0, 0, 0, .08);
}

#asthma-anchor-links .anchor-links__btn:focus-visible {
    outline: 3px solid #bee3f8;
    outline-offset: 2px;
}

/* ===============================
#asthma-warning
=============================== */
#asthma-warning {
    padding: 56px 0 72px;
    background: #F9F5EF;
}

/* タイトル */
#asthma-warning .asthma-warning__title {
    text-align: center;
    color: var(--body-title-h3-color);
    margin-bottom: 24px;
    line-height: 1.6;
    padding: 0 80px;
    min-height: 120px;
    align-content: center;
}

#asthma-warning .asthma-warning__title::before,
#asthma-warning .asthma-warning__title::after {
    content: "";
    display: inline-block;
    width: 70px;
    height: 120px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    transform: translate(0%, -50%);
    top: 50%;
}

#asthma-warning .asthma-warning__title::before {
    background-image: url('../../img/asthma-warning-icon-man.svg');
    left: 0;
}

#asthma-warning .asthma-warning__title::after {
    background-image: url('../../img/asthma-warning-icon-woman.svg');
    right: 0;
}

@media screen and (max-width: 767px) {
    #asthma-warning .asthma-warning__title::before {
        transform: translate(-100%, 0%);
        bottom: 0;
        left: 45%;
    }

    #asthma-warning .asthma-warning__title::after {
        transform: translate(0%, 0%);
        bottom: 0;
        left: 55%;
    }

    #asthma-warning .asthma-warning__title {
        padding: 0 0 140px 0;
    }
}

/* 本文 */
#asthma-warning .asthma-warning__body {
    margin-bottom: 28px;
    text-align: center;
}

#asthma-warning .asthma-warning__sub-box {
    border: 1px solid #EDBF32;
    background: #fff;
}

/* 黄色帯のサブ見出し */
#asthma-warning .asthma-warning__sub {
    background: #EDBF32;
    color: #fff;
    padding: 12px 16px 12px 44px;
    font-size: 20px;
    margin-bottom: 0;
    position: relative;
}

#asthma-warning .asthma-warning__sub::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url('../../img/asthma-warning-icon-question.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

/* 詳細説明 */
#asthma-warning .asthma-warning__detail {
    display: grid;
    gap: 14px;
}

#asthma-warning .asthma-warning__detail-text {
    padding: 20px;
}

/* ---------- SP(<=767px) ---------- */
@media screen and (max-width: 767px) {
    #asthma-warning {
        padding: 40px 0 56px;
    }

    #asthma-warning .asthma-warning__title {
        font-size: 24px;
    }

    #asthma-warning .asthma-warning__sub {
        font-size: 16px;
        padding: 10px 10px 10px 48px;
    }

    #asthma-warning .asthma-warning__sub::before {
        left: 16px;
    }
}


.asthma-about-and-anchor {
    background-image: url(../../img/asthma-about-bg.webp);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}

@media screen and (max-width: 767px) {
    .asthma-about-and-anchor {
        background-image: url(../../img/asthma-about-bg-sp.webp);
    }
}

/* ===== Intro (text + image) ===== */
#asthma-about .asthma-about__intro {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    justify-content: space-between;
}

#asthma-about .asthma-about__text {
    flex: 1 1 60%;
}

#asthma-about .asthma-about__figure {
    flex: 0 0 38%;
    margin: 0;
}

#asthma-about .asthma-about__figure img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
    display: block;
}

#asthma-about .asthma-about__text p {
    margin: 0 0 12px;
}

@media screen and (max-width: 767px) {
    #asthma-about .asthma-about__text {
        display: contents;
    }

    #asthma-about #asthma-about-title {
        order: 1;
        margin: 0 auto 36px;
    }

    #asthma-about .asthma-about__figure {
        order: 2;
    }

    #asthma-about .asthma-about__body-text {
        order: 3;
    }
}

/* ===== Alert card ===== */
#asthma-about #asthma-alert {
    margin-top: 36px;
    background: #fff;
    border: 3px solid var(--body-title-h3-color);
    border-radius: 12px;
    box-shadow: 0 3px 18px rgba(26, 98, 142, .08);
    padding: 30px 40px;
}

#asthma-about #asthma-alert .asthma-title-h3 {
    text-align: center;
}

@media screen and (min-width: 767px) {
    #asthma-about #asthma-alert .asthma-actions .more-arrow {
        margin-left: 20px;
    }
}

/* ===== Quick actions ===== */
#asthma-about .asthma-quick__title {
    text-align: center;
    margin: 40px 0 30px;
    font-size: 24px;
    letter-spacing: .04em;
}

@media screen and (max-width: 767px) {
    #asthma-about .asthma-quick__title {
        font-size: 20px;
    }
}

#asthma-about .asthma-quick {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px 28px;
    list-style: none;
    padding: 8px 8px 2px;
    margin: 0 0 6px;
}

#asthma-about .asthma-quick__item {
    flex: 1 1 calc(33.333% - 28px);
    min-width: 220px;
    text-align: center;
}

#asthma-about .asthma-quick__icon {
    width: 160px;
    height: 140px;
    margin: 0 auto 10px;
    place-items: center;
    position: relative;
}

#asthma-about .asthma-quick__icon::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    height: 140%;
    width: auto;
    aspect-ratio: 1 / 1;
    background: #F9F5EF;
    border-radius: var(--border-radius-full);
    transform: translateX(-50%);
    z-index: 0;
}

#asthma-about .asthma-quick__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
}

#asthma-about .asthma-quick__caption {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    position: relative;
}

#asthma-about .asthma-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 44px 12px 18px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
    transition: transform .06s ease, filter .2s ease, box-shadow .12s ease;
}

#asthma-about .asthma-btn--primary {
    background: #5aa0c8;
    color: #fff;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .12), inset 0 -2px 0 rgba(0, 0, 0, .08);
}

#asthma-about .asthma-btn--ghost {
    background: #ffffff;
    color: #2f6e8e;
    border: 1px solid #a3c5d9;
}

#asthma-about .asthma-btn:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

#asthma-about .asthma-btn:active {
    transform: translateY(0);
}

#asthma-about .asthma-btn__chevron {
    position: absolute;
    right: 16px;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

/* ===== Responsive (<=767px) ===== */
@media screen and (max-width: 767px) {
    #asthma-about .asthma-about__intro {
        flex-direction: column;
        gap: 16px;
    }

    #asthma-about .asthma-about__figure {
        flex-basis: auto;
    }

    #asthma-about .asthma-quick {
        padding: 0;
    }

    #asthma-about .asthma-quick__item {
        flex: 1 1 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    #asthma-about #asthma-alert {
        padding: 20px 16px 22px;
    }

    #asthma-about .asthma-quick__icon {
        width: 30%;
        height: auto;
    }

    #asthma-about .asthma-quick__caption {
        width: 68%;
        text-align: left;
    }

    #asthma-about .asthma-quick__icon::before {
        height: 100%;
    }
}

#asthma-about .asthma-types {
    margin: 100px 0 10px;
}

#asthma-about .asthma-types .asthma-title-h3 {
    margin-bottom: 40px;
}

/* ===== asthma-kinds ===== */
#asthma-kinds {
    padding: 60px 0;
    background: #fff;
}

#asthma-kinds .asthma-kinds__lead {
    margin: 40px auto 50px;
}

#asthma-kinds .asthma-kinds__lead p {
    margin-bottom: 14px;
}

#asthma-kinds .asthma-kinds__cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    list-style: none;
    padding: 0;
    margin: 0;
}

#asthma-kinds .asthma-kinds__card {
    flex: 1 1 calc(33.333% - 28px);
    max-width: 360px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#asthma-kinds .asthma-kinds__img img {
    width: 100%;
    height: auto;
    display: block;
}

#asthma-kinds .asthma-kinds__content {
    padding: 18px 16px 20px;
}

#asthma-kinds .asthma-kinds__content p {
    font-size: 14px;
}

#asthma-kinds .asthma-kinds__note {
    font-size: 13px;
    font-weight: normal;
    display: block;
}

@media screen and (max-width: 767px) {
    #asthma-kinds .asthma-kinds__cards {
        flex-direction: column;
        gap: 20px;
    }

    #asthma-kinds .asthma-kinds__card {
        flex: 1 1 100%;
        max-width: 100%;
        flex-direction: row;
    }

    #asthma-kinds .asthma-kinds__img{
        width: 30%;
    }

    #asthma-kinds .asthma-kinds__content{
        width: 70%;
    }

    #asthma-kinds .asthma-kinds__img img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

#asthma-kinds .asthma-kinds__card .asthma-title-h3 {
    font-size: 22px;
}


/* ====== asthma-exam セクション ====== */
#asthma-exam {
    position: relative;
    padding: 60px 0 72px;
    background: #fff;
    overflow: hidden;
}

/* 左側の淡いブルー帯（デザイン背景） */
#asthma-exam::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 34%;
    background: #eaf6fd;
    z-index: 0;
}

#asthma-exam .asthma-exam__lead {
    position: relative;
    z-index: 1;
    margin: 30px auto 40px;
}

/* 各検査行 */
#asthma-exam .asthma-exam__row {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 28px;
    align-items: flex-start;
    padding: 22px 0;
}

/* 画像（比率は自由・角丸＋薄い影） */
#asthma-exam .asthma-exam__media {
    flex: 0 0 42%;
    margin: 0;
}

#asthma-exam .asthma-exam__media img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .06);
    object-fit: cover;
    display: block;
}

/* テキスト側 */
#asthma-exam .asthma-exam__body {
    flex: 1 1 58%;
}

/* h3にアクセントライン（既存デザインを壊さず追加） */
#asthma-exam .asthma-exam__heading {
    position: relative;
    padding-left: 14px;
    margin-bottom: 10px;
    color: var(--body-title-h3-color);
    font-size: 28px;
}

#asthma-exam .asthma-exam__heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 4px;
    height: 1.2em;
    border-radius: 2px;
    background: #6fb3d7;
}

/* ====== SP(<=767px) ====== */
@media screen and (max-width: 767px) {
    #asthma-exam {
        padding: 44px 0 56px;
    }

    #asthma-exam::before {
        width: 100%;
        opacity: .45;
    }

    #asthma-exam .asthma-exam__heading {
        font-size: 20px;
        letter-spacing: .01em;
    }

    #asthma-exam .asthma-exam__body {
        display: contents;
    }

    /* 背景帯は全幅に薄く */
    #asthma-exam .asthma-exam__lead {
        margin-bottom: 22px;
        text-align: left;
    }

    #asthma-exam .asthma-exam__row {
        flex-direction: column;
        gap: 14px;
        padding: 18px 0;
    }

    #asthma-exam .asthma-exam__media {
        flex-basis: auto;
        order: 2;
    }

    #asthma-exam .asthma-exam__heading {
        order: 1;
    }

    #asthma-exam .asthma-exam__body p {
        order: 3;
    }
}

/* ===============================
#asthma-feature
=============================== */
#asthma-feature {
    position: relative;
    padding: 56px 0 64px;
    background: #fff;
    overflow: hidden;
}

#asthma-feature .asthma-title-h2-small {
    font-size: 24px;
    display: block;
}

@media screen and (max-width: 767px) {
    #asthma-feature .asthma-title-h2-small {
        font-size: 20px;
    }
}

#asthma-feature .asthma-feature__title::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    margin: 12px auto 0;
    background: #7fb3d4;
    border-radius: 2px;
}

/* ---------- 共通アイテム ---------- */
#asthma-feature .asthma-feature-item {
    position: relative;
    margin: 80px 0;
}

#asthma-feature .asthma-feature-item--rev {
    flex-direction: row-reverse;
}

#asthma-feature .asthma-feature-item__row {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    position: relative;
    z-index: 1;
}

/* 左の画像（400×300想定） */
#asthma-feature .asthma-feature-item__media {
    flex: 0 0 400px;
    margin: 0;
}

#asthma-feature .asthma-feature-item__media img {
    width: 400px;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .06);
    display: block;
}

/* 右側テキスト */
#asthma-feature .asthma-feature-item__content {
    flex: 1 1 auto;
    position: relative;
}

#asthma-feature .asthma-feature-item__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

#asthma-feature .asthma-feature-item__heading {
    color: var(--body-title-h3-color);
    margin: 0;
}

/* “POINT 01” バッジ */
#asthma-feature .asthma-feature-item__badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 80px;
    height: 80px;
    border-radius: var(--border-radius-full);
    background: var(--body-title-h3-color);
    color: #fff;
    flex: 0 0 auto;
}

#asthma-feature .asthma-feature-item__badge em {
    font-size: 14px;
    line-height: 1;
    font-family: var(--f_maru);
    font-style: normal;
}

#asthma-feature .asthma-feature-item__badge strong {
    font-size: 32px;
    line-height: 1;
    font-family: var(--f_maru);
}

/* 本文（pの余白はリセットCSSに準拠） */
#asthma-feature .asthma-feature-item__body {
    display: grid;
    gap: 8px;
}

/* 右下の淡いブルー装飾 */
#asthma-feature .asthma-feature-item::after {
    content: "";
    position: absolute;
    right: 0;
    left: 50%;
    bottom: -20%;
    height: 200px;
    width: 700px;
    background: #eaf6fd;
    z-index: 0;
}

#asthma-feature .asthma-feature-item--rev::after {
    left: -30%;
}

/* ---------- SP(<=767px) ---------- */
@media screen and (max-width: 767px) {
    #asthma-feature {
        padding: 44px 0 48px;
    }

    #asthma-feature .asthma-feature-item__row {
        flex-direction: column;
        gap: 12px;
    }

    #asthma-feature .asthma-feature-item__media {
        flex: none;
    }

    #asthma-feature .asthma-feature-item__media img {
        width: 100%;
        height: auto;
    }

    #asthma-feature .asthma-feature-item::after {
        left: 16%;
        height: 70%;
        width: 100%;
        bottom: -30px;
    }

    #asthma-feature .asthma-feature-item--rev::after {
        left: -16%;
    }

    #asthma-feature .asthma-feature-item__content {
        display: contents;
    }

    #asthma-feature .asthma-feature-item__head {
        order: 1;
    }

    #asthma-feature .asthma-feature-item__media {
        order: 2;
    }

    #asthma-feature .asthma-feature-item__body {
        order: 3;
    }

    #asthma-feature .asthma-feature-item__heading {
        font-size: 20px;
    }
}

/* ===============================
#asthma-feature images
=============================== */
#asthma-feature .asthma-feature__images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* PC: 3カラム */
    gap: 20px;
    margin-top: 22px;
}

#asthma-feature .asthma-feature__imgbox {
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color .3s ease;
}

#asthma-feature .asthma-feature__imgbox img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* hover時の装飾 */
#asthma-feature .asthma-feature__imgbox:hover {
    border-color: #2f80ed;
    /* 青枠 */
}

/* ---------- SP(<=767px) ---------- */
@media screen and (max-width: 767px) {
    #asthma-feature .asthma-feature__images {
        grid-template-columns: repeat(2, 1fr);
        /* SP: 2カラム */
        gap: 14px;
    }
}

/* ===============================
#asthma-goal
=============================== */
#asthma-goal {
    position: relative;
    padding: 56px 0 72px;
    background: #faf6ef;
    /* 画像に近い薄ベージュ */
    overflow: hidden;
}

/* 40% : 60% の比率を固定（親幅が変わっても比率は一定） */
#asthma-goal .asthma-goal__row {
    display: flex;
    align-items: center;
    gap: 36px;
}

/* 画像側：基準は40%、必要なら縮む。比率維持のため aspect-ratio を付与 */
#asthma-goal .asthma-goal__media {
    flex: 0 1 40%;
    margin: 0;
    min-width: 280px;
    /* 極端に潰れない保険 */
}

#asthma-goal .asthma-goal__media img {
    width: 100%;
    height: auto;
    /* 縦横比維持 */
    aspect-ratio: 4 / 3;
    /* 比率の目安（対応ブラウザで安定） */
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .06);
    display: block;
}

/* テキスト側：残り60%を占有 */
#asthma-goal .asthma-goal__content {
    flex: 1 1 60%;
}

/* リストのカード風ボックス */
#asthma-goal .asthma-goal__listbox {
    margin-top: 12px;
    background: #f1ece5;
    border-radius: 12px;
    padding: 16px 18px;
}

#asthma-goal .asthma-goal__list {
    list-style: none;
}

#asthma-goal .asthma-goal__list li {
    position: relative;
    padding-left: 1.4em;
}

#asthma-goal .asthma-goal__list li+li {
    margin-top: 4px;
}

#asthma-goal .asthma-goal__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .68em;
    width: .45em;
    height: .45em;
    border-radius: 50%;
    background: #333;
    /* 黒丸 */
}

/* ---------- SP(<=767px) ---------- */
@media screen and (max-width: 767px) {
    #asthma-goal {
        padding: 44px 0 56px;
    }

    #asthma-goal .asthma-goal__row {
        flex-direction: column;
        gap: 14px;
    }

    #asthma-goal .asthma-goal__media {
        width: 100%;
        min-width: 0;
    }
}

/* ===============================
#asthma-doctor
=============================== */
#asthma-doctor {
    position: relative;
    padding: 56px 0 72px;
    background: #fff;
}

#asthma-doctor .asthma-title-h2 {
    margin-bottom: 80px;
}

@media screen and (max-width: 767px) {
    #asthma-doctor .asthma-title-h2 {
        margin-bottom: 48px;
    }
}

/* ===============================
#asthma-doctor doctor-intro
=============================== */
#asthma-doctor .asthma-doctor__row {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

/* テキスト 60% */
#asthma-doctor .asthma-doctor__content {
    flex: 1 1 60%;
}

/* 画像 40% */
#asthma-doctor .asthma-doctor__media {
    flex: 0 1 40%;
    margin: 0;
}

#asthma-doctor .asthma-doctor__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 380 / 420;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    margin-bottom: 40px;
}

/* キャプション */
#asthma-doctor .asthma-doctor__media figcaption {
    color: var(--body-text-color);
}

#asthma-doctor .asthma-doctor__name {
    display: inline-block;
    margin-top: 2px;
    font-size: 32px;
    font-weight: 500;
    color: var(--body-title-h3-color);
    font-family: var(--f_maru);
}

/* SP */
@media screen and (max-width: 767px) {
    #asthma-doctor .asthma-doctor__row {
        flex-direction: column-reverse;
        gap: 18px;
    }

    #asthma-doctor .asthma-doctor__media {
        flex: none;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
    }

    #asthma-doctor .asthma-doctor__media img {
        width: 50%;
        margin: 0;
    }

    #asthma-doctor .asthma-doctor__media figcaption {
        width: 48%;
        letter-spacing: .05em;
        align-content: end;
    }
}

/* ===== 資格 / 所属学会 カード ===== */
#asthma-doctor .asthma-doctor__card {
    margin-top: 22px;
    background: #f7f1ea;
    /* 画像に近い薄いベージュ */
    border-radius: 16px;
    padding: 60px;
}

#asthma-doctor .asthma-doctor__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 28px;
}

#asthma-doctor .asthma-doctor__coltitle {
    position: relative;
    margin-bottom: 10px;
    color: var(--body-title-h3-color);
    line-height: 1.6;
    padding-left: 14px;
}

#asthma-doctor .asthma-doctor__coltitle::before {
    content: "";
    position: absolute;
    left: 0;
    top: .2em;
    width: 4px;
    height: 1.2em;
    border-radius: 2px;
    background: var(--body-title-h3-color);
}

#asthma-doctor .asthma-doctor__ul {
    list-style: none;
}

#asthma-doctor .asthma-doctor__ul li {
    position: relative;
    padding-left: 1.2em;
    line-height: 1.9;
}

@media screen and (max-width: 767px){
    #asthma-doctor .asthma-doctor__ul li{
        font-size: 14px;
    }
}

#asthma-doctor .asthma-doctor__ul li+li {
    margin-top: 2px;
}

#asthma-doctor .asthma-doctor__ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .72em;
    width: .42em;
    height: .42em;
    border-radius: 50%;
    background: var(--body-title-h3-color);
    /* 青いドット */
}

/* ===== CTAボタン（中央） ===== */
#asthma-doctor .asthma-doctor__cta {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

#asthma-doctor .asthma-doctor__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px 12px 20px;
    border-radius: 999px;
    background: #6aa7c9;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .12);
}

#asthma-doctor .asthma-doctor__chev {
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    display: inline-block;
}

/* SP（<=767px） */
@media screen and (max-width: 767px) {
    #asthma-doctor .asthma-doctor__cols {
        grid-template-columns: 1fr;
    }

    #asthma-doctor .asthma-doctor__card {
        padding: 16px 16px;
    }
}

/* ===============================
#asthma-cost
=============================== */
#asthma-cost {
    padding: 48px 0 72px;
    background: #fff;
}

/* リード文の余白のみ付与（本文スタイルはリセットCSSに準拠） */
#asthma-cost .asthma-cost__lead {
    margin: 8px 0 18px;
}

/* テーブルラッパー：SPで横スクロール可能に */
#asthma-cost .asthma-cost__tablewrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* テーブル本体 */
#asthma-cost .asthma-cost__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 680px;
    /* 狭い画面ではラップの中でスクロール */
    background: #fff;
    border: 1px solid #d9e1e6;
    overflow: hidden;
}

/* ヘッダー */
#asthma-cost .asthma-cost__table thead th {
    background: var(--body-title-h3-color);
    /* 見出しのブルー */
    color: #fff;
    text-align: center;
    padding: 12px 16px;
    font-weight: normal;
    border-right: 1px solid rgba(255, 255, 255, .25);
}

#asthma-cost .asthma-cost__table thead th:last-child {
    border-right: none;
}

/* ボディ */
#asthma-cost .asthma-cost__table tbody th,
#asthma-cost .asthma-cost__table tbody td {
    padding: 14px 16px;
    border-top: 1px solid #D3DDE3;
    border-right: 1px solid #D3DDE3;
}

#asthma-cost .asthma-cost__table tbody th {
    width: 50%;
    background: #E2EEF6;
    /* 左列の淡いグレー */
    text-align: center;
    font-weight: normal;
}

#asthma-cost .asthma-cost__table tbody td {
    background: #F9F5EF;
    /* 右列の薄いベージュ */
    text-align: right;
}

#asthma-cost .asthma-cost__table tbody tr td:last-child {
    border-right: none;
}

/* SP(<=767px)：左右余白はリセットCSSの.section-innerに依存、追加指定なし */
@media screen and (max-width: 767px) {
    #asthma-cost {
        padding: 40px 0 56px;
    }
}

/* ---------- SP(<=767px) ---------- */
@media screen and (max-width: 767px) {
    #asthma-cost {
        padding: 40px 0 56px;
    }

    /* min-widthを解除して画面幅にフィットさせる */
    #asthma-cost .asthma-cost__table {
        min-width: 100%;
        font-size: 13px;
        /* 小さめフォント */
    }

    /* 余白も縮小 */
    #asthma-cost .asthma-cost__table thead th,
    #asthma-cost .asthma-cost__table tbody th,
    #asthma-cost .asthma-cost__table tbody td {
        padding: 16px 10px;
    }

    /* 列幅を調整して詰める */
    #asthma-cost .asthma-cost__table tbody th {
        width: 40%;
    }

    #asthma-cost .asthma-cost__table tbody td {
        width: 60%;
    }
}


/* ===============================
#asthma-flow
=============================== */
#asthma-flow {
    padding: 52px 0 72px;
    background: #eaf6fd;
    /* セクションの淡いブルー背景 */
}

/* カード本体 */
#asthma-flow .asthma-flow__card {
    padding: 18px;
}

/* 横並び：画像40% / テキスト60% */
#asthma-flow .asthma-flow__row {
    display: flex;
    gap: 22px;
    align-items: flex-start;
}

#asthma-flow .asthma-flow__row--rev {
    flex-direction: row-reverse;
}

#asthma-flow .asthma-flow__media {
    flex: 0 1 40%;
    margin: 0;
}

#asthma-flow .asthma-flow__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    /* 比率安定 */
    object-fit: cover;
    border-radius: 12px;
    /* ほんのりピンク枠 */
    box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
    display: block;
}

#asthma-flow .asthma-flow__content {
    flex: 1 1 60%;
}

/* バッジ＋小見出し */
#asthma-flow .asthma-flow__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

#asthma-flow .asthma-flow__badge {
    display: inline-block;
    padding: 4px 32px;
    color: var(--body-title-h3-color);
    border: 1px solid var(--body-title-h3-color);
    border-radius: 999px;
    background: #F9F5EF;
}

#asthma-flow .asthma-flow__heading {
    color: var(--body-title-h3-color);
    margin-bottom: 0;
}

/* 本文のまとまり（pのタイポはリセットCSSに準拠、余白だけ調整） */
#asthma-flow .asthma-flow__body {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

/* ---------- SP(<=767px) ---------- */
@media screen and (max-width: 767px) {
    #asthma-flow {
        padding: 42px 0 56px;
    }

    #asthma-flow .asthma-flow__row {
        flex-direction: column;
        gap: 14px;
    }

    #asthma-flow .asthma-flow__media {
        flex: none;
    }

    #asthma-flow .asthma-flow__head{
        margin: 10px 0 16px;
    }
}

/* ===============================
#asthma-faq
=============================== */
#asthma-faq {
    padding: 52px 0 72px;
    background: #fff;
}

/* FAQリスト */
#asthma-faq .asthma-faq__list {
    display: grid;
    gap: 28px;
}

/* 各項目 */
#asthma-faq .asthma-faq__item {
    padding-bottom: 18px;
    border-bottom: 1px dotted #bbb;
    display: grid;
    gap: 10px;
}

/* Q / A 共通 */
#asthma-faq .asthma-faq__q,
#asthma-faq .asthma-faq__a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.7;
    align-items: center;
}

#asthma-faq .asthma-faq__q {
    font-size: 20px;
    font-weight: 500;
}

#asthma-faq .asthma-faq__a {
    font-size: 16px;
}

@media screen and (max-width: 767px) {

    #asthma-faq .asthma-faq__q,
    #asthma-faq .asthma-faq__a {
        align-items: flex-start !important;
    }

    #asthma-faq .asthma-faq__q {
        font-size: 16px;
    }

    #asthma-faq .asthma-faq__a {
        font-size: 14px;
    }
}

/* アイコン */
#asthma-faq .asthma-faq__icon {
    display: inline-flex;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 32px;
    font-weight: 500;
    text-align: center;
    font-family: var(--f_maru);
    padding-bottom: 4px;
}

#asthma-faq .asthma-faq__icon.q {
    background: #E4F5FF;
    color: #3A7CA5;
}

#asthma-faq .asthma-faq__icon.a {
    background: #F9F5EF;
    color: var(--body-text-color);
}

/* ---------- SP(<=767px) ---------- */
@media screen and (max-width: 767px) {
    #asthma-faq {
        padding: 40px 0 56px;
    }

    #asthma-faq .asthma-faq__list {
        gap: 20px;
    }
}

#asthma-access {
    padding-bottom: 200px;
}

@media screen and (max-width: 767px) {
    #asthma-access {
        padding-bottom: 100px;
        padding-right: 0;
        padding-left: 0;
    }
}

#asthma-access .asthma-actions .more {
    width: 100%;
}

.access__more--beginner .more{
    display: flex;
    align-items: center;
}

#asthma-access .more img{
    margin-bottom: 0;
}

.asthma_link {
  text-decoration: underline;
}