@charset "UTF-8";

/* 循環器内科ページ固有スタイル（medical.css と併用） */

/* ※ パンくず（.breadcrumb）は全ページ共通のため style.css に定義 */

/* ファーストビュー直下の実績・資格 */
.cardio-trust {
    width: 100rem;
    max-width: 90%;
    margin: 3rem auto 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    font-family: yu-gothic-pr6n, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.6rem;
    color: #333;
}

.cardio-trust li {
    background: #fff;
    border: 1px #8d9576 solid;
    color: #4b4d0b;
    padding: 0.8rem 1.6rem;
    line-height: 1.5;
}

/* 予約・電話ボタン */
.cardio-cta {
    width: 100rem;
    max-width: 90%;
    margin: 3rem auto 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    font-family: yu-gothic-pr6n, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2rem;
}

.cardio-cta a {
    display: inline-block;
    background: #4b4d0b;
    color: #fff;
    padding: 1.6rem 4rem;
    transition: 0.3s;
}

.cardio-cta li:nth-child(2) a {
    background: #8d9576;
}

.cardio-cta a:hover {
    opacity: 0.8;
}

/* .bt-medical は medical.css で margin-top: -10rem が指定されている。
   /medical/ では直前の .medical-head が持つ 20rem の下余白に食い込ませる前提の値だが、
   循環器ページでは本文（p）の直後に置くため、そのままだと段落に重なる。通常の余白に戻す。 */
.medical .bt-medical {
    margin: 5rem 0 0;
}

/* 循環器ページの h3 は上の余白を詰める（セクションが多いため） */
.medical > h3 {
    margin: 18rem 0 5rem;
}

.medical > h3::after {
    top: -11rem;
    height: 8rem;
}

@media screen and (max-width: 896px) {
    .cardio-trust {
        font-size: 1.4rem;
        gap: 0.8rem;
    }

    .cardio-trust li {
        padding: 0.6rem 1.2rem;
    }

    .cardio-cta {
        font-size: 1.6rem;
        flex-direction: column;
    }

    .cardio-cta a {
        display: block;
        text-align: center;
        padding: 1.6rem 1rem;
    }

    .medical > h3 {
        margin: 12rem 0 4rem;
    }

    .medical > h3::after {
        top: -8rem;
        height: 6rem;
    }
}