/* 共通 */


.grecaptcha-badge {
    visibility: hidden;
}

:root {
    --header-height: 60px;
    /* ヘッダーの高さを変数として管理 */
}

[id] {
    scroll-margin-top: 150px;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Zen Kaku Gothic New", sans-serif;
    color: #333;
}

.flex {
    display: flex;
}

.pc-only {
    display: block;
}

.patient-burden-list .pc-only {
    display: inline-table;
}

.sp-only {
    display: none;
}

.full-width-space {
    margin-left: 1em;
}

@media (max-width: 1024px) {
    .flex {
        display: block;
    }

    .pc-only {
        display: none;
    }

    .patient-burden-list .pc-only {
        display: none;
    }

    .sp-only {
        display: block;
    }

    .full-width-space {
        margin-left: 0em;
    }

    .plan-period-bottom-text {
        margin-left: 2rem;
    }
}


/* 共通フォントサイズ */
h1 {
    font-size: 2.125rem;
    color: #259EA7;
    padding-top: 80px;
    padding-bottom: 80px;
    font-weight: bold;
}

h2 {
    font-size: 2rem;
    line-height: 52px;
}

h2.title {
    font-weight: 500;
}

.l-text {
    font-size: 1.75rem;
}

.m-text {
    font-size: 1.25rem;
}

.s-text {
    font-size: 1rem;
    text-align: justify;
    line-height: 28px;
}

.text-circle {
    padding-bottom: 40px;
}

.text-circle-min {
    font-size: 1.25rem;
}

p.clinical-text {
    font-size: 1.125rem;
}

.text-circle::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 16px;
    background-image: url('../img/circle-img.png');
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 8px;
    vertical-align: middle;
}

.right-text {
    text-align: right;
}

.bold {
    font-weight: bold;
}

@media (max-width: 1024px) {
    h1 {
        font-size: 1.5rem;
        padding-top: 60px;
        padding-bottom: 60px;
    }

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

    .s-text {
        font-size: 1rem;
        line-height: 28px;
    }

    .m-text {
        font-size: 1rem;
    }
}


/* 共通テキストカラー */
.button-text {
    color: #259EA7;
}

.button-text img {
    height: 17px;
}

.custom-text {
    color: #666;
}

.alert-text {
    color: #FF6B6B;

}

.bg-whiteblue .alert-text {
    padding-bottom: 16px;
}

.top-title {
    color: #54C6D7;
    font-size: 2.375rem;
    line-height: 57px;
    padding-bottom: 60px;
    font-weight: bold;
}

@media (max-width: 1024px) {
    .top-title {
        font-size: 1.5rem;
        line-height: 32px;
        text-align: center;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .message-box .top-title,
    .hosp-intro p.top-title {
        text-align: left;
    }

    .message-top-image {
        text-align: center;
    }
}

/* 共通背景色 */
.section-bg {
    background-color: #F5F5F5;
}

.bg-lightblue {
    background-color: #F7FCFD;
}

.bg-whiteblue {
    background-color: #EEF9FB;
    padding: 28px;
    border-radius: 15px;
}

.zen-kaku-gothic-new-regular {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.zen-kaku-gothic-new-medium {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.zen-kaku-gothic-new-bold {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-style: normal;
}

@media (max-width: 1024px) {
    .bg-whiteblue {
        padding: 20px 16px;
    }
}


/* パンくずリスト */
nav.breadcrumb {
    padding-top: 20px;
    padding-bottom: 80px;
    font-size: 0.8125rem;
    width: 83%;
    margin: auto;
}

@media (max-width: 1024px) {
    nav.breadcrumb {
        padding-top: 10px;
        padding-bottom: 60px;
        font-size: 0.75rem;
        width: 94%;
        max-width: 580px;
    }
}

/* 固定ページ横幅 */
/* PC */
.temp-box {
    width: 83%;
    margin: auto;
    max-width: 1200px;
}

.w-full-box {
    padding-top: 200px;
}

.six-content {
    width: 60%;
    margin: auto;
    max-width: 875px;
}

.map-content {
    margin-left: 0;
}

/* Y余白 */
/* PC 80px */
.eight-box {
    margin-top: 80px;
}

.four-box {
    margin-bottom: 40px;
}

section.section-temp-box {
    background-image: url(../img/content-bg.png);
}

@media (max-width: 1024px) {
    .temp-box {
        width: 94%;
        margin: auto;
        max-width: 580px;
    }

    .w-full-box {
        padding-top: 70px;
    }

    .six-content {
        width: 94%;
        margin: auto;
    }
}

/* hover実装 */

.news-header,
a,
.contact-info,
.wpcf7 input[type="submit"],
.hosp-left p.clinical-text:hover {
    transition: all 0.5s ease 0s;
}

/* 背景透過 */
.contact-info:hover,
.hospital-logo a:hover,
.logo-container a:hover,
.hokusin-intro p a:hover,
.device-img a:hover {
    opacity: 0.6;
}

/* 文字の色変化 */
nav.navigation ul li:hover,
.more-text a:hover {
    color: #259EA7;
}

.sidebar-item a:hover,
.footer-section ul li a:hover,
.news-header:hover {
    color: #2e8b8b;
}

.sidebar-item a:hover,
.card-contents a:hover,
nav.breadcrumb a:hover {
    color: #00A4B4;
}

.sidebar-item a:hover .arrow,
.card-contents a:hover .arrow {
    background-image: url('../img/sidebar-list-hover.png');
}

.wpcf7 input[type="submit"]:hover {
    background-color: #fff;
    color: #259EA7;
    border: 1px solid #259EA7;
}

.btn-top:hover {
    background-color: #fff;
    border: 1px solid #259EA7;
    color: #259EA7;
}

a.facility-button:hover {
    background-color: #54C6D7;
    color: #fff;
}

a.contact-card:hover {
    color: #fff;
    background-color: transparent;
    border: 1px solid #fff;
}

@media (max-width: 1024px) {
    a.facility-button {
        display: block;
        max-width: 400px;
        margin: auto;
    }
}



/* ヘッダー */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    z-index: 999;
}


h1.header-left {
    display: flex;
    align-items: center;
}

.logo-container {
    display: flex;
    align-items: center;
    margin-right: 20px;
    background-color: #FFF;
    border-radius: 0 0 32px 10px;
    padding: 36px 20px 36px 20px;
}

.logo-container img {
    max-width: 190px;
}

.logo {
    /* ロゴ画像のスタイル */
    max-height: 40px;
    /* 例：ロゴの高さ */
}

.hospital-name {
    font-size: 1.5em;
    font-weight: bold;
}

.header-right {
    display: flex;
    align-items: center;
    background-color: #FFF;
    /* 例：背景色を白に設定 */
    border-radius: 22px 0 0 22px;
    padding: 10px;
}

.navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    font-weight: 700;
}

.navigation li {
    padding-left: 20px;
    padding-right: 20px;
    border-left: 1px solid #D3D3D3;
}

.navigation li:first-child {
    border-left: 0;
}

.navigation li:last-child {
    border-right: 1px solid #D3D3D3;
}

.navigation a {
    text-decoration: none;
}

.contact-info {
    background-color: #FFF;
    padding: 10px 40px 10px 15px;
    border-radius: 20px;
    display: flex;
    /* 全体を横並びにする */
    align-items: center;
    /* 縦方向中央揃え */
    margin-left: 30px;
}

.phone-icon {
    margin-right: 5px;
    /* 電話アイコンのスタイル */
}

p.phone-number {
    display: flex;
    /* 中の要素を並べる */
    flex-direction: column;
    /* 縦方向に並べる */
    margin: 0;
    /* デフォルトのマージンをリセット */
    line-height: 1.2;
    /* 行間を調整（必要に応じて） */
    margin-bottom: 0;
}

span.phone-number-text {
    font-size: 0.875rem;
    padding-bottom: 8px;
    font-weight: bold;
}

/* サブメニュー非表示が初期状態 */
.navigation ul .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    padding: 0;
    margin: 0;
    list-style: none;
    z-index: 10;
    padding-bottom: 15px;
    padding-top: 15px;
    border-radius: 15px;
}

/* メニュー項目の親に相対位置を設定 */
.navigation ul li.has-submenu {
    position: relative;
}

/* hover時に表示 */
.navigation ul li.has-submenu:hover>.submenu {
    display: block;
}

/* サブメニューの各リンク */
.navigation ul .submenu li {
    width: max-content;
    min-width: 254px;
}

.navigation ul .submenu li a {
    display: block;
    padding: 10px 0px 10px 0;
    text-decoration: none;
    color: #333;
}

.navigation ul .submenu li a:hover {
    color: #259EA7;
}

li.submenu-list {
    border: none;
}

ul.submenu li.submenu-list .navigation li:last-child {
    border-right: none;
}

.navigation li.submenu-list:last-child {
    border-right: none;
}

@media (max-width: 1024px) {
    .header {
        background-color: #fff;
        padding-bottom: 12px;
    }

    li.main-menu-list {
        border-left: solid #fff 4px;
        padding-left: 10px;
    }

    li.main-menu-list a {
        font-size: 1.5rem;
    }

    .logo-container img {
        max-width: 225px;
    }

    .logo-container {
        padding: 10px;
    }

    /* ハンバーガーボタン */
    .hamburger-btn {
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 70px;
        height: 70px;
        background-color: #54C6D7;
        border: none;
        border-bottom-left-radius: 15px;
        padding: 6px;
        cursor: pointer;
        z-index: 1001;
        transition: background-color 0.3s ease;
    }

    .hamburger-line {
        background-color: #fff;
        height: 4px;
        border-radius: 2px;
        margin: 3px 0;
        transition: all 0.3s ease;
    }

    .hamburger-line:nth-child(1),
    .hamburger-line:nth-child(3) {
        width: 22px;
    }

    .hamburger-line:nth-child(2) {
        width: 28px;
        /* ← 中央線だけ長め */
    }

    /* 開いた時（バツ）に変形 */
    .hamburger-btn.open .hamburger-line:nth-child(1) {
        transform: rotate(45deg) translate(9px, 4px);
        width: 38px;
    }

    .hamburger-btn.open .hamburger-line:nth-child(2) {
        opacity: 0;
    }

    .hamburger-btn.open .hamburger-line:nth-child(3) {
        transform: rotate(-45deg) translate(10px, -4px);
        width: 38px;
    }

    li.menu-s {
        padding-left: 24px;
    }

    /* SPメニュー本体 */
    .mobile-nav {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        width: 90%;
        background-color: #259EA7;
        z-index: 1000;
        padding: 48px 20px 90px 20px;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
        transform: translateX(100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        height: 100vh;
        max-width: 540px;
    }

    .mobile-nav.open {
        display: block;
        transform: translateX(0);
    }

    .mobile-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .mobile-nav li {
        margin: 28px 0;
        font-weight: bold;
        font-size: 1.25rem;
    }

    li.menu-s {
        font-size: 1rem;
    }

    .mobile-nav li:last-child {
        margin-bottom: 40px;
    }

    .mobile-nav a {
        color: #fff;
        text-decoration: none;
        font-size: 18px;
    }


    /* メディアクエリで表示切り替え */
    @media screen and (max-width: 1024px) {
        .hamburger-btn {
            display: flex;
            position: absolute;
            top: 0px;
            right: 0px;
        }

        .header-right,
        .contact-info {
            display: none;
        }

        .header-schedule {
            background-color: #fff;
            border-radius: 15px;
            padding: 10px;
        }

        .hamburger-menu .outpatient-box .clinic-schedule-table {
            padding-bottom: 0px;
        }

        .hamburger-menu .flex {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .hamburger-menu .outpatient-box {
            margin-bottom: 12px;
        }
    }


}

/* トップページ css */
.hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* 画像がはみ出さないように */
}

.hero-image {
    width: 100%;
    height: auto;
    /* 高さは画像の比率に合わせる */
}

.hero-image img {
    display: block;
    /* 画像下の余白を防ぐ */
    width: 100%;
    height: 100vh;
}

.hero-text-container {
    position: absolute;
    top: 38%;
    right: -12%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    /* テキストの色 */
    z-index: 10;
    /* 画像より前面に表示 */
    white-space: nowrap;
    /* テキストを改行させない */
}

.hero-heading {
    font-size: 4rem;
    /* 大きめのフォントサイズ */
    font-weight: bold;
    margin: 0;
    line-height: 1.2;
    text-align: left;
    color: #fff;
}

.mainvisual-bottom {
    position: absolute;
    bottom: 0;
}

.mainvisual-bottom img {
    width: 100%;
    position: relative;
}

p.flower-img {
    position: absolute;
    bottom: 2%;
    right: 20%;
}

p.flower-img img {
    width: 133px;
}

.clinic-schedule {
    width: 40%;
    background-color: #fff;
    padding-bottom: 20px;
    border-radius: 15px;
    /* 角の丸み */
    margin-bottom: 10px;
    /* 下の要素との間隔 */
    position: absolute;
    bottom: 0px;
    left: 12%;
    max-width: 740px;
}

.clinic-schedule-table-box,
.clinic-schedule-notes {
    width: 90%;
    margin: auto;
}

.clinic-schedule-title {
    color: #259EA7;
    /* タイトル色 */
    font-weight: bold;
    margin-top: 0;
}

.clinic-schedule-table {
    overflow-x: auto;
    /* 横スクロールが必要な場合 */
}

.clinic-schedule-table table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
    font-size: 0.9em;
}

.clinic-schedule-table th,
.clinic-schedule-table td {
    padding: 8px 12px;
    border-top: none;
    border-bottom: 1px solid #ddd;
    border-left: none;
    border-right: none;
    text-align: center;
    font-weight: normal;
}

td.closed-mark {
    font-size: 1rem;
}

.clinic-schedule-table thead th:first-child {
    border: none;
}

.clinic-schedule-table tbody th {
    text-align: left;
    font-weight: normal;
}

.clinic-schedule-table tbody td {
    color: #5CC2CF;
}

.clinic-schedule-table tbody td:not(:empty) {
    font-size: 0.7rem;
    line-height: 1rem;
}

.clinic-schedule-notes ul {
    list-style: none;
    padding: 0;
    padding-top: 20px;
    margin: 0;
    font-size: 0.75rem;
    color: #555;
}

.clinic-schedule-notes li {
    margin-bottom: 5px;
    line-height: 1.3;
}

.clinic-schedule-notes li a {
    color: #007bff;
    /* リンクの色 */
    text-decoration: none;
}

.clinic-schedule-notes li a:hover {
    text-decoration: underline;
}

@media (max-width: 1024px) {

    .hero-text-container {
        transform: none;
        top: 36%;
        right: 16%;
    }

    .hero-heading {
        font-size: 2rem;
        line-height: 46px;
    }

    p.flower-img img {
        width: 84px;
    }

    .clinic-schedule {
        position: unset;
        width: 94%;
        border: 0.5px solid #5CC2CF;
        margin: 60px auto;

    }

    .clinic-schedule-table th,
    .clinic-schedule-table td {
        padding: 8px 0;
        vertical-align: middle;
    }

    .clinic-schedule-table tbody th {
        text-align: center;
    }


    .clinic-schedule-table-box,
    .clinic-schedule-notes {
        width: 90%;
    }

    span.one-title {
        font-size: 0.75rem;
    }

    span.time {
        font-size: 1rem;
    }

    .hero-image {
        padding-top: 87px;
        height: calc(100vh - 87px);
    }

    .hero-image img {
        height: 79.5vh;
        width: 94%;
        margin: auto;
        border-radius: 15px;
    }

    .clinic-schedule-title {
        font-size: 1.5rem;
    }
}

/* TOP お知らせ */
.news-bg {
    background-color: #EEF9FB;
    padding: 60px;
}

.news-bg li.news-item {
    border-bottom: none;
}

.news-contens {
    border-radius: 15px;
    background-color: #fff;
}

.category.cat-news,
.category.cat-closed,
.category.cat-other {
    background-color: #D98835;
    color: #fff;
    padding: 6px;
    display: inline-block;
    border-radius: 20px;
}

.category.cat-closed {
    background-color: #259EA7;
}

.category.cat-other {
    background-color: #337646;
}

p.news-data-img img {
    width: 17px;
}

p.news-data {
    letter-spacing: 1.6px;
}

ul.news-box,
.more-text {
    width: 90%;
    margin: auto;
}

ul.news-box li {
    display: flex;
    gap: 10px;
    padding: 20px 0;
    align-items: center;
    letter-spacing: 1.6px;
}

.more-text {
    text-align: right;
    padding-bottom: 40px;
    padding-top: 20px;
}

p.min-title {
    border-radius: 9px 0px 15px 0px;
    background-color: #54C6D7;
    color: #fff;
    width: fit-content;
    padding: 16px;
    font-weight: bold;
}

@media (max-width: 1024px) {
    .news-bg {
        background-color: transparent;
        width: 94%;
        margin: auto;
        padding: 0;
        border: 0.5px solid #5CC2CF;
        border-radius: 15px;
        margin-bottom: 60px;
        max-width: 740px;
    }

    .news-bg .temp-box {
        margin: 0;
        width: 100%;
        max-width: 100%;
    }

    ul.news-box,
    .more-text {
        width: 90%;
        margin: auto;
    }
}


/* 長野県北信地域の医療を守る一員でありたい。 */
.message {
    padding-top: 196px;
    padding-bottom: 260px;
    background-image: url(../img/mountain.png);
    background-repeat: no-repeat;
    background-position: 0%;
    position: relative;
    background-size: contain;
}

.message-box-text-contents {
    width: 48%;
}

p.cloud-img {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
}

p.cloud-img img {
    width: 100%;
    max-width: 100%;
}

p.animal-img {
    position: absolute;
    bottom: 44%;
    right: 4%;
    max-width: 261px;
    width: 100%;
}

.message-box {
    padding-bottom: 290px;
}

.message-box .flex {
    gap: 4%;
}

.message-box img {
    width: 100%;
    max-width: 580px;
}

p.message-box-text {
    line-height: 32px;
}

.card {
    width: calc(100% / 3);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    text-align: center;
    padding: 4%;
    background-color: #fff;
}

p.card-img {
    height: 113px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card img {
    width: 35%;
    max-width: 113px;
    height: min-content;
}

/* Safariのみ */
_::-webkit-full-page-media,
_:future,
:root .card img {
    height: 80px;
}

_::-webkit-full-page-media,
_:future,
:root .card img.hospitalization-img {
    height: 70px;
}

.card h2 {
    font-size: 1.125rem;
    font-weight: bold;
    padding-bottom: 40px;
}

.card-contents .flex {
    gap: 4%;
}

ul.card-list li {
    padding: 24px 12px 24px 8px;
    border-bottom: solid 1px #D3D3D3;
}

ul.card-list li:last-child {
    border-bottom: none;
}

ul.card-list li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
    text-align: left;
}

@media (max-width: 1024px) {
    .message {
        padding-top: 0;
        padding-bottom: 60px;
        background-position-y: 31%;
    }

    .card {
        width: 100%;
        max-width: 320px;
        margin: auto;
        margin-bottom: 40px;
        box-shadow: 1px 4px 18px rgba(0, 0, 0, 0.08);
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .message-box-text-contents {
        width: 100%;
    }

    .message-box img {
        padding-bottom: 20px;
    }

    .message-box {
        padding-bottom: 60px;
    }

    p.animal-img {
        top: 30%;
        max-width: 150px;
        right: 0%;
        height: fit-content;
    }

    p.message-box-text {
        padding-bottom: 120px;
    }

    ul.card-list,
    hr.divider {
        width: 76%;
        margin: auto;
    }

    p.card-img {
        height: 60px;
    }

    p.card-img img {
        width: 60px;
        height: 60px;
    }



    .card h2 {
        line-height: 25px;
    }
}



/* 診療科紹介 */
.hosp-intro {
    background-image: url(../img/right-blue-bg.png);
    background-repeat: no-repeat;
    padding: 140px 0;
    background-size: cover;
    position: relative;
}

.bg-top-wave {
    background-image: url(../img/wave-top.png);
    height: 140px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-bottom-wave {
    background-image: url(../img/wave-bottom.png);
    height: 200px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}


.hosp-intro .flex {
    justify-content: space-between;
}

.hosp-intro .card-box {
    width: 58%;
}

.hosp-intro .box-1 {
    background-image: url(../img/intro1.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 222px 34px 34px 34px;
    border-radius: 15px;
}

.hosp-intro p.text-circle {
    padding-top: 40px;
}

.hosp-left {
    width: 24%;
}

.hosp-left p.clinical-text:hover {
    color: rgb(84, 198, 215);
    cursor: pointer;

}

p.box-text {
    font-size: 0.875rem;
    line-height: 26px;
    background-color: #fff;
    border-radius: 15px;
    padding: 8px 10px;
}

@media (max-width: 1024px) {
    .hosp-intro {
        padding: 0 0;
    }

    .hosp-left {
        width: 100%;
    }

    .bg-top-wave {
        height: 40px;
    }

    .bg-bottom-wave {
        height: 40px;
    }

    p.last-clinical-text {
        margin-bottom: 40px;
    }
    .hosp-intro p.text-circle{
        padding-top: 20px;
    }
    .hosp-left .text-circle{
        padding-bottom: 20px;
    }
}

/* スライド */
.swiper-wrapper {
    /* wrapperのサイズを調整 */
    width: 100%;
    height: 300px;
}

.swiper-slide {
    /* スライドのサイズとテキストの調整 */
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 300px;
    /* これは背景画像表示には影響しないのでOK */
    position: relative;
    /* 絶対配置の基準 */
    border-radius: 15px;
    overflow: hidden;
    /* 必要に応じて */
}

.swiper-slide .slide-text {
    background-color: #fff;
    color: #333;
    width: 88%;
    margin: 0 auto;
    /* 左右中央寄せ */
    position: absolute;
    /* スライドに対して絶対配置 */
    left: 50%;
    /* 水平方向の中央 */
    transform: translateX(-50%);
    /* 水平方向の中央揃え */
    bottom: 4%;
    /* 下からの距離 */
    border-radius: 15px;
    box-sizing: border-box;
    /* paddingを含めてwidth, heightを計算 */
    padding: 10px;
    /* テキスト周りの余白 */
    overflow: auto;
    /* 必要に応じてスクロールバーを表示 */
    line-height: 26px;
    /* 行間を調整 */
    text-align: left;
}

.slide-text p {
    margin: 0;
    /* デフォルトのマージンをリセット */
    font-size: 0.875rem;
}

.swiper {
    width: 60%;
    height: 440px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-bottom: 40px !important;
}

/* 背景色切り替え */
.swiper-slide {
    background-image: url(../img/intro1.png);
    background-size: cover;
    /* 画像をカバー表示 */
    background-position: center;
    /* 画像を中央に配置 */
}

.swiper-slide-2 {
    background-image: url(../img/intro2.png);
    background-size: cover;
    background-position: center;
}

.swiper-slide-3 {
    background-image: url(../img/intro3.png);
    background-size: cover;
    background-position: center;
}

.swiper-slide-4 {
    background-image: url(../img/intro4.png);
    background-size: cover;
    background-position: center;
}

/* 装飾 */

.hosp-animal-top,
.hosp-animal-bottom {
    position: absolute;
}

.hosp-animal-top {
    top: -120px;
    right: 10%;
}

.hosp-animal-top img {
    max-width: 232px;
}

.hosp-animal-bottom {
    left: 10%;
}

.hosp-animal-bottom img {
    max-width: 484px;
}

.clinical-text.active {
    border-bottom: 2px solid #54C6D7;
}

.swiper-pagination-bullet-active {
    background: #5CC2CF !important;
}

@media (max-width: 1024px) {
    .swiper {
        width: 100%;
        height: fit-content;
    }

    .hosp-animal-bottom img {
        max-width: 185px;
    }

    .hosp-animal-bottom {
        left: 0%;
        bottom: -8%;
    }

    .hosp-animal-top img {
        width: 134px;
    }

    .hosp-animal-top {
        top: -5%;
    }

    .swiper-slide .slide-text {
        position: unset;
        width: 100%;
        transform: none;
        padding: 20px 16px;
        margin-top: 16px;
    }

    .swiper-slide .sp-only {
        display: flex;
    }

    .swiper-slide .sp-only img {
        width: 100%;
    }

    .swiper-slide {
        background-image: none;
    }

}






/* 北信より笑顔をお届け */
.hokusin-intro {
    padding: 160px 0;
}

.hokusin-intro .flex {
    align-items: center;
    justify-content: space-around;
}

/* 聖峰会グループ */
.group-intro {
    background-color: #F6F7F7;
    padding: 160px 0;
}

.group-intro p.min-title {
    position: absolute;
}

p.group-title {
    font-size: 2.125rem;
    padding-top: 16px;
    padding-bottom: 60px;
}

.group-intro .group-contents {
    text-align: center;
}

.group-contents p {
    line-height: 40px;

}

.facilities-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 常に2列 */
    /* 全体の余白 */
    gap: 5%;
    padding-top: 95px;
    margin: 0 auto;
    /* 中央寄せ（任意） */
}

.facility-item {
    border-radius: 8px;
    overflow: hidden;
    /* 画像が角丸からはみ出さないように */
}

.facility-image {
    position: relative;
    width: 100%;
    height: auto;
}

.facility-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    /* 画像のアスペクト比（任意） */
    object-fit: cover;
    /* 画像をカバー表示 */
}

.facility-title {
    padding: 15px;
    margin: 0;
    font-size: 1.1em;
    color: #333;
    text-align: center;
    background-color: #f9f9f9;
    /* タイトル背景（任意） */
}

/* ホバーエフェクト（左上のアイテムのみ） */
.facility-item-1 .facility-image {
    overflow: hidden;
    /* ホバー時のオーバーレイのために必要 */
}

.facility-item-1 .overlay,
.facility-item-2 .overlay,
.facility-item-3 .overlay,
.facility-item-4 .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    /* ホバー時の背景色（濃いグレー） */
    color: white;
    justify-content: center;
    align-items: center;
    opacity: 0;
    /* 初期状態では非表示 */
    transition: opacity 0.3s ease;
    /* ホバー時のアニメーション */
    padding: 20px;
    text-align: center;
    font-size: 0.9em;
    line-height: 1.6;
    display: flex;
}

.facility-item-1:hover .overlay,
.facility-item-2:hover .overlay,
.facility-item-3:hover .overlay,
.facility-item-4:hover .overlay {
    opacity: 1;
    /* ホバー時に表示 */
}

.facility-item-1:hover .facility-image img {
    transition: transform 0.3s ease;
}

a.facility-button {
    color: #54C6D7;
    border: solid 1px #54C6D7;
    background-color: #fff;
    padding: 7px 78px;
    border-radius: 4px;
}

.overlay-text {
    padding-bottom: 20px;
    width: 80%;
    margin: auto;
    text-align: justify;
}

.overlay-box {
    display: block;
}

@media (max-width: 1024px) {
    .group-intro {
        padding: 60px 0;
    }

    p.group-title {
        font-size: 1.5rem;
        padding-bottom: 40px;
    }

    p.group-text-bottom {
        line-height: 32px;
        text-align: left;
        padding-bottom: 40px;
    }

    .hokusin-intro {
        padding: 100px 0 60px 0;
    }

    .hokusin-intro .flex img {
        width: 100%;
    }

    .hokusin-intro .flex p.ameba-img img {
        max-width: 210px;
        margin: auto;
    }

    p.ameba-img {
        text-align: center;
    }

    .facilities-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        /* スムーズスクロール for iOS */
        gap: 32px;
        padding: 20px 0;
        grid-template-columns: none;
        width: 94%;
        margin: auto;
        max-width: 580px;
    }

    .facility-item {
        flex: 0 0 80%;
        /* スライド幅（必要に応じて調整） */
        scroll-snap-align: start;
        border-radius: 8px;
        border-radius: unset;
    }

    .overlay-box {
        display: none;
    }

    p.group-img img {
        max-width: 140px;
    }

    .facility-item-1 .facility-image {
        overflow: unset;
    }

    .facility-image {
        height: 100%;
    }

    .overlay-text {
        width: 100%;
        padding-top: 20px;
        line-height: 32px;
    }

    .facility-image .sp-only {
        text-align: center;
    }

    .facility-image img {
        border-radius: 15px;
    }

    .facility-item-1:hover .overlay,
    .facility-item-2:hover .overlay,
    .facility-item-3:hover .overlay,
    .facility-item-4:hover .overlay {
        opacity: 0;
        /* ホバー時に表示 */
    }
}






/* サイドバーデザイン */
/* 病院案内 */
.sidebar {
    padding: 20px;
    border-radius: 8px;
    width: 250px;
    /* サイドバーの幅（適宜調整） */
    position: sticky;
    top: 60px;
}

.sidebar:nth-child(2) {
    padding-top: 0;
}

.sidebar-header {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    /* 下の余白を大きく */
}

.sidebar-title {
    font-size: 1.1em;
    /* タイトルを少し小さく */
    color: #2e8b8b;
    /* タイトル色（添付画像に近い色） */
    font-weight: bold;
    margin: 0;
    margin-left: 5px;
    /* アイコンとの間隔 */
}

.sidebar-icon {
    color: #2e8b8b;
    /* アイコンの色（添付画像に近い色） */
    font-size: 2em;
    /* アイコンのサイズ（必要に応じて調整） */
    display: flex;
    align-items: center;

}

.sidebar-icon img {
    width: 50%;
    max-width: 56px;
}

.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-item {
    margin-bottom: 10px;
    /* 下の余白を大きく */
    border-bottom: 1px solid #e0eeee;
    /* より薄い区切り線 */
}

.sidebar-item:last-child {
    border-bottom: none;
    /* 最後の区切り線を削除 */
}

.sidebar-top {
    border-left: 1px solid #259EA7;
    padding: 6px 0px 6px 8px;
    font-weight: bold;
    background-color: #F7FCFD;
    color: #259EA7;
    border-bottom: none !important;
}


/* 入院案内 */
/* 入院案内のサイドバー固有のスタイル */
body.page-admission-info .sidebar-header .sidebar-icon svg {
    color: #4682b4;
    /* 入院案内のアイコン色 */
}

body.page-admission-info .sidebar-title {
    color: #4682b4;
    /* 入院案内のタイトル色 */
}

.sidebar-section-title {
    padding: 10px 0;
    margin-bottom: 10px;
    color: #2e8b8b;
    /* 入院案内のセクションタイトル色 */
    font-weight: bold;
    border-left: 5px solid #4682b4;
    /* 入院案内の左側の強調線 */
    padding-left: 10px;
}

body.page-admission-info .sidebar-item a {
    color: #555;
    /* 入院案内のメニューテキスト色 */
}

body.page-admission-info .arrow {
    border-left-color: #888;
    /* 入院案内の矢印の色 */
    border-bottom-color: #888;
    /* 入院案内の矢印の色 */
}



/* フッター お問い合わせコンテンツ */
.contact-section {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    height: 340px;
    background-image: url(../img/cta-bg.png);
    margin-top: 160px;
}

.contact-section.top-page-contact {
    margin-top: 0;
}

.contact-card {
    width: 22%;
    height: 220px;
    background: white;
    border-radius: 10px;
    text-align: center;
    padding: 30px 20px;
}

.contact-card .icon {
    width: 100%;
    margin-bottom: 20px;
}

.contact-card .icon img {
    width: 52px;
    margin: auto;
    height: auto;
}

.icon {
    background-image: url(../img/cta-contact.png);
    height: 52px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.call-img {
    background-image: url(../img/cta-call-hover.png);
}

a.contact-card:hover .icon {
    background-image: url(../img/cta-contact-hover.png);
}

a.contact-card:hover .call-img {
    background-image: url(../img/cta-call.png);
}



.contact-card .subtitle {
    font-size: 16px;
    margin: 10px 0;
    opacity: 0.7;
}

.contact-card .title {
    font-size: 22px;
    font-weight: bold;
    margin-top: 10px;
}

p.main-number{
    padding-top: 16px;
    margin-bottom: 16px;
    font-size: 1.75rem;
    font-weight: bold;
}
span.number-sub{
    font-size: 0.75rem;
}

p.other-number{
    font-size: 1.25rem;
    margin-bottom: 12px;
}

@media (max-width: 1024px) {
    .contact-section {
        display: block;
        margin-top: 60px;
        padding-top: 60px;
        padding-bottom: 60px;
        height: auto;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .sp-contact-block {
        display: block;
        text-align: left;
    }

    .sp-contact-block h2.title {
        line-height: 40px;
    }

    .sp-flex {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: center;
        gap: 12px;
    }

    .contact-card {
        width: 90%;
        margin: auto;
        height: auto;
        max-width: 380px;
    }

    section.contact-section a.contact-card:nth-child(2) {
        margin-bottom: 40px;
    }

    .contact-card .icon {
        width: 20%;
        max-width: 52px;
        margin-bottom: 0;
    }

    .contact-card .title {
        margin-top: 0;
    }

    .contact-card .subtitle {
        margin: 0;
    }
}


/* フッター */
.fotter-box {
    width: 83%;
    margin: auto;
    padding: 32px 0 52px 0;
}

.site-footer {
    background-color: #fff;
    font-size: 14px;
}

.footer-grid {
    display: grid;
    align-items: end;
    grid-template-columns: 4fr 1fr;
    /* 左4：右1 */
    gap: 0px;
    font-size: 0.75rem;
}

.footer-left {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.footer-section {
    padding-right: 20px;
    margin-right: 20px;
    border-right: 1px dashed #ccc;
    /* 点線の縦線 */
}

.footer-section:last-child {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
}

.footer-section h3 {
    font-size: 0.75rem;
    margin-bottom: 10px;
    position: relative;
    padding-left: 18px;
    font-weight: bold;
}

.footer-section h3::before {
    content: "";
    background-image: url(../img/footer-icon.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    top: 0;
    color: #1a9faa;
    font-size: 12px;
}

.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.footer-section li {
    margin-bottom: 10px;
    margin-left: 20px;
}

.hospital-info {
    text-align: left;
    margin: auto;
    margin-right: 0;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hospital-logo {
    font-weight: bold;
    font-size: 18px;
    margin: 10px 0;
}

.hospital-logo img {
    width: 85%;
    max-width: 223px;
}
.hospital-info-ad{
    padding-left: 10px;

}


.copyright {
    text-align: center;
    margin-bottom: 0;
    font-size: 12px;
    color: #fff;
    background-color: #259EA7;
    padding: 16px 0;
}

@media (max-width: 1024px) {

    .footer-left,
    .footer-grid {
        grid-template-columns: none;
        gap: 0;
    }

    .hospital-info {
        margin: auto;
        padding-top: 40px;
    }

    .footer-section {
        border-right: none;
        padding-right: 0px;
        margin-right: 0px;
    }

    .footer-section h3 {
        padding: 20px;
        border-bottom: 1px dashed #ccc;
        font-size: 1.25rem;
        font-weight: bold;
        margin-bottom: 16px;
    }

    .footer-section h3::before {
        top: 22px;
    }

    .footer-section ul {
        font-size: 1rem;
    }
}

/* 固定ページのメインビジュアル */
section.mainvisual-box {
    background-image: url(../img/mainvisual.png);
    height: 80vh;
    position: relative;
    background-repeat: no-repeat;
    width: 100%;
    background-size: cover;

}

section.medical-intro{
    background-image: url(../img/medical-intro.png);
}

section.medical-enkaku{
     background-image: url(../img/medical-enkaku.png);
}

section.medical-map{
    background-image: url(../img/meidcal-intro-map.png);
}

section.outpatient-section {
    background-image: url(../img/outpatient-bg.png);
    background-position: bottom;
}

section.hospitalization-section {
    background-image: url(../img/hospitalization-bg.png);
}

section.seisin-section {
    background-image: url(../img/seisin-bg.png);
    background-position: bottom;
}

section.ninchi-section {
    background-image: url(../img/ninchi-bg.png);
    background-position: bottom;
}



/* メインビジュアルテキスト　白文字 */
.mainvisual-text {
    position: absolute;
    top: 50%;
    left: 8%;
    font-size: 3rem;
    color: #fff;
    font-weight: bold;
}

/* メインビジュアルテキスト　黒文字 */
section.outpatient-section .mainvisual-text,
section.hospitalization-section .mainvisual-text {
    color: #333;
}

@media (max-width: 1024px) {
    section.seisin-section {
        background-position: left;
    }

    .mainvisual-text {
        font-size: 1.875rem;
        line-height: 48px;

    }
}

/* ごあいさつ */

/* 全体を左右2カラムにするコンテナ */
.two-column-layout {
    display: flex;
    gap: 30px;
    /* カラム間の余白 */
    margin: 0 auto;
    /* 中央寄せ */
    flex-direction: row;
    /* デフォルトで横並び */
    flex: 0 0 250px;
    /* 固定幅（お好みで調整） */
}

@media (max-width: 1024px) {
    .two-column-layout {
        display: block;
    }
}

/* メインコンテンツ領域 */
.main-content {
    flex: 3;
    /* サイドバーより広い比率にする */
}

/* 右側のサイドバー */
.sidebar {
    flex: 1;
    padding: 80px 24px 20px 24px;
    border-radius: 8px;
    width: auto;
    /* 幅を自動調整 */
    position: sticky;
    top: 60px;
}

.sidebar-header {
    margin-bottom: 20px;
}

.sidebar-title {
    font-size: 1.25em;
    color: #2e8b8b;
    font-weight: bold;
    margin: 0;
}

.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 15px 0 0;
}

.sidebar-menu-bottom {
    padding-top: 28px;
    margin-top: 0;
}

.sidebar-item {
    border-bottom: 1px solid #DCDCDC;
}

.sidebar-item:last-child {
    border-bottom: none;
}

.hosp-sidebar-item {
    border-bottom: 1px solid #DCDCDC !important;
}

.sidebar-item a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    text-decoration: none;
}

@media (max-width: 1024px) {
    .sidebar {
        display: none;
    }
}

.arrow {
    display: inline-block;
    width: 24px;
    /* 画像サイズに合わせて調整 */
    height: 24px;
    background-image: url('../img/sidebar-list.png');
    background-size: contain;
    background-repeat: no-repeat;
    transition: background-image 0.3s ease;
    margin-left: auto;
}

.card-contents .arrow {
    margin-left: 0;
}

/* 左側の画像を横2列　縦に並べるコンテナ */
.vertical-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2列にする */
    gap: 80px 120px;
    margin-bottom: 20px;
}

.image-item img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    /* 必要に応じて */
}

.personal-box {
    width: 86%;
    margin: auto;
}

.name {
    line-height: 32px;
    padding-top: 10px;
    font-weight: 500;
}

.type {
    line-height: 26px;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
}

.discrip {
    line-height: 150%;
}

.former-director-section {
    display: flex;
    gap: 4%;
    padding: 24px;
    /* セクション全体の余白 */
    max-width: 960px;
    /* レイアウトの最大幅（適宜調整） */
    margin: 0 auto;
    /* 中央寄せ */
    align-items: flex-start;
    /* 上部で揃える */
    box-shadow: 4px 4px 20px 6px rgba(51, 51, 51, 0.04);
    background-color: #fff;
    margin-top: 80px;
    margin-bottom: 138px;
}

@media (max-width: 1024px) {
    .former-director-section {
        display: block;
        margin-top: 60px;
    }

    .former-director-section h2 {
        line-height: 28px;
        font-size: 1rem;
    }

    .former-director-section .flex {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .discrip {
        line-height: 28px;
    }

    .personal-box {
        width: 100%;
    }
}


.profile-image img {
    display: block;
    width: 50%;
    height: auto;
}

.profile-image p img {
    width: 112px;
}

p.device-img {
    padding-top: 12px;
}

p.device-img img {
    width: 120px;
}

.profile-text {
    flex: 1;
    /* 残りのスペースをテキスト領域が占める */
}

.introduction {
    line-height: 1.6;
    margin-bottom: 15px;
    padding-top: 20px;
}

.profile-text p {
    line-height: 1.6;
    margin-bottom: 10px;
}

@media (max-width: 1024px) {
    .vertical-images {
        grid-template-columns: none;
        gap: 60px;
    }

    .profile-image p {
        width: 24%;
    }

    .profile-image p img {
        width: 100%;
    }

    p.device-img img {
        width: 50%;
    }
}


/* 経営理念・沿革 */
section#rinen-box .bg-whiteblue .flex p img {
    width: 300px;

}

.symbol-box {
    padding: 60px 0;
}

.symbol-box {
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.symbol-contents p {
    line-height: 180%;
}

.number-box {
    width: 60%;
}

.number-box-rinen {
    width: 50%;
}

.number-box-rinen .flex {
    gap: 2%;
    padding-bottom: 20px;
    align-items: center;
}

.number-box .flex {
    gap: 2%;
    align-items: center;
    padding-bottom: 20px;
    justify-content: center;
}

.number-box .flex:last-child {
    padding-bottom: 0px;
}

.hospital-intro .flex {
    align-items: center;
}

.history-item {
    display: flex;
    gap: 40px;
    padding: 15px 0;
    border-bottom: 1px dotted #ccc;
    align-items: center;
}

.history-item:last-child {
    border-bottom: none;
}

.history-date {
    width: 120px;
    /* 年月部分の幅（適宜調整） */
    color: #fff;
    /* 年月部分の色（添付画像に近い色） */
    font-weight: bold;
    background-color: #54C6D7;
    border-radius: 15px;
    text-align: center;
}

.history-description {
    flex: 1;
    /* 説明文が残りのスペースを占める */
    line-height: 1.6;
    color: #333;
}

.history-image {
    width: 200px;
    /* 画像の幅（適宜調整） */
    margin-left: 20px;
    /* 説明文との間隔 */
    text-align: center;
    /* 画像とキャプションを中央揃え */
}

.history-image img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #ddd;
    /* 画像の枠線（任意） */
    border-radius: 4px;
    /* 画像の角丸（任意） */
    margin-bottom: 5px;
    /* 画像とキャプションの間隔 */
}

.history-image-caption {
    font-size: 0.8em;
    color: #777;
}


/* 必要に応じてレスポンシブ対応 */
@media (max-width: 1024px) {
    .symbol-box {
        display: block;
        padding: 40px 0;
    }

    .symbol-box {
        text-align: center;
    }

    .number-box-rinen {
        width: 100%;
        padding-top: 40px;
        font-size: 0.875rem;
    }

    .number-box-rinen .flex {
        display: flex;
        text-align: left;
    }

    section#rinen-box .bg-whiteblue .flex {
        display: flex;
        flex-direction: column-reverse;
        gap: 20px;
    }

    p.number-box-rinen-top {
        width: min-content;
        padding-right: 12px;
    }

    .number-box-rinen .flex p img {
        width: 57%;
        min-width: 30px;
    }

    .history-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .history-date {
        width: 30%;
    }

    .history-image {
        width: 100%;
        margin-left: 0;
        margin-top: 10px;
    }

    .history-image img {
        width: 60%;
        margin: auto;
    }

    .symbol-contents p {
        line-height: 26px;
    }
}

.plan-period {
    gap: 20px;
    padding: 20px 0;
}

.plan-period-bottom {
    gap: 50px;
}


/* 病棟案内 */
.number-circle {
    color: #fff;
    border-radius: 50%;
    background-color: #FD4178;
    font-weight: bold;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    font-size: 1.75rem;
}

.map-img {
    padding-bottom: 40px;
}

.map-contents .number-box {
    align-items: center;
}

.map-contents-m-title {
    font-weight: bold;
    padding-bottom: 20px;
}

.map-contents-m-title-sec {
    padding-top: 20px;
}

.map-contents p.map-contents-text {
    line-height: 180%;
}

.map-contents .flex {
    gap: 1%;
}

@media (max-width: 1024px) {
    .number-circle {
        width: 24px;
        height: 24px;
        font-size: 1rem;
    }

    .map-img img {
        width: 100%;
    }

    .number-flex {
        display: flex;
    }

    .number-box {
        width: 80%;
        text-align: center;
        margin: auto;
        padding-top: 20px;
    }

    .number-box:first-child {
        padding-top: 0;

    }

    .number-box .flex {
        padding-bottom: 10px;
    }

    .number-box img {
        width: 100%;
    }

    .map-contents .bg-whiteblue .flex img {
        width: 100%;
        padding-top: 20px;
    }
}




/* 外来案内 */
.close-box {
    margin-top: 28px;
}

.visit-box p {
    padding-bottom: 28px;
    line-height: 30px;
}

.number-text {
    font-size: 2.4375rem;
    font-weight: bold;
    font-family: "Roboto", sans-serif;
    padding-top: 4px;
}

.number-text-under {
    font-size: 2.125rem;
    font-weight: bold;
}

.vaccine-price-list {
    width: 100%;
    /* 必要に応じて幅を調整 */
    overflow-x: auto;
    /* 横スクロールが必要な場合 */
}

.vaccine-price-list table {
    width: auto;
    border-collapse: collapse;
    font-size: 0.9em;
    border: 1px solid #ccc;
    /* テーブル全体の枠線 */
}

.vaccine-price-list th,
.vaccine-price-list td {
    padding: 8px 12px;
    border: 1px solid #ccc;
    text-align: center;
    white-space: nowrap;
    /* テキストが折り返されないように */
}

.vaccine-price-list th {
    background-color: #80ced6;
    /* ヘッダーの背景色（添付画像に近い色） */
    color: #fff;
    /* ヘッダーの文字色 */
    font-weight: bold;
}

.vaccine-price-list tbody td {
    color: #333;
}

.vaccine-price-list tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
    /* 奇数行の背景色（任意） */
}

p.close-text {
    line-height: 30px;
}

.aroow-box {
    text-align: center;
    padding: 16px 0;
}

.first-time .flex {
    gap: 4%;
    align-items: center;
}

.first-time .flex-img img {
    width: 240px;
}

p.first-time-text {
    line-height: 28px;
    font-size: 1rem;
    padding-top: 16px;
}

.outpatient-box .bg-whiteblue {
    border-radius: 15px;
}

.vaccination-box .patient-burden-list {
    margin-top: 0;
    margin-bottom: 40px;
    border-radius: 15px;
    border: 1px solid #ccc;
    font-size: 1.25rem;
    font-weight: bold;
}

.vaccination-box .patient-burden-list table tbody tr:first-child td:first-child {
    background-color: #fff;
}

.vaccination-box p.text-circle {
    padding-bottom: 20px;
}

.vaccination-box .patient-burden-list th:nth-child(2) {
    background-color: #F7FCFD;
    color: #259EA7;
}

.vaccination-box .patient-burden-list tr {
    border-top-right-radius: 15px;
}

.vaccination-box .patient-burden-list th,
.vaccination-box .patient-burden-list td {
    text-align: center;
}

.vaccination-box .patient-burden-list th,
.vaccination-box .patient-burden-list td {
    padding: 16px 0px;
}

.outpatient-box .clinic-schedule-table {
    width: 80%;
    max-width: 594px;
    padding-bottom: 16px;
}

@media (max-width: 1024px) {
    .outpatient-box .clinic-schedule-table {
        width: 100%;
    }

    .first-time .bg-whiteblue .flex {
        display: flex;
    }

    .first-time .flex-img {
        width: 100%;
        text-align: center;
    }

    .first-time .flex-img img {
        width: 100%;
        padding-bottom: 20px;
        max-width: 320px;
        margin: auto;
    }

    .number-text-under {
        font-size: 1.5rem;
    }

    .number-text {
        font-size: 1.625rem;
    }

    .vaccination-box h1 {
        padding-bottom: 40px;

    }

    .clinic-schedule-table tbody tr:first-child th:first-child,
    .clinic-schedule-table tbody tr:nth-child(2) th:first-child,
    .clinic-schedule-table tbody tr:nth-child(3) th:first-child {
        width: 100px;
        /* 希望する幅に調整してください */
    }

    p.first-time-text {
        font-size: 1rem;
        line-height: 28px;
    }
}



/* 入院案内 */
.hospitalization-price-box {
    padding-top: 28px;
}

.price-box,
.hospitalization-price-box {
    line-height: 30px;
}

.patient-burden-list {
    width: 100%;
    /* 必要に応じて幅を調整 */
    overflow-x: auto;
    /* 横スクロールが必要な場合 */
    margin: 16px 0 16px 0;
}

.patient-burden-list table {
    width: auto;
    border-collapse: collapse;
    font-size: 0.9em;
    border: 1px solid #ccc;
    /* テーブル全体の枠線 */
    min-width: 100%;
}

.patient-burden-list table tbody tr:first-child td:first-child {
    color: #259EA7;
    /* 例：テキストカラーを青に変更 */
    background-color: #F7FCFD;
    /* 例：背景色を薄い青に変更 */
    font-weight: bold;
}

.patient-burden-list th,
.patient-burden-list td {
    padding: 8px 12px;
    border: 1px solid #ccc;
    text-align: left;
    white-space: nowrap;
    /* テキストが折り返されないように */
    background-color: #fff;
}

.patient-burden-list th {
    background-color: #259EA7;
    /* ヘッダーの背景色（添付画像に近い色） */
    color: #fff;
    /* ヘッダーの文字色 */
    font-weight: bold;
    width: 50%;
}

.patient-burden-list tbody td {
    color: #333;
}

.patient-burden-list tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
    /* 奇数行の背景色（任意） */
}

ul.visiting-list {
    list-style: none;
    /* デフォルトの黒丸を消す */
    padding: 0;
    margin: 0;
}

ul.visiting-list li {
    margin-left: 0;
    /* `li` 要素自体の左マージンをリセット */
    padding-left: 0;
    /* `li` 要素自体の左パディングをリセット */
    line-height: 30px;
    position: relative;
    padding-left: 1.2em;
}

ul.visiting-list li::before {
    content: "•";
    font-size: 1em;
    position: absolute;
    left: 0;
    top: 0.1em;
    color: black;
}

.notice {
    font-weight: bold;
    padding-bottom: 28px;
}

ul.belongings li {
    padding-bottom: 8px;
    line-height: 30px;
}

ul.belongings {
    list-style: disc;
    padding-left: 20px;
}

.visiting-box {
    padding-top: 40px;
}

.visiting-box-top {
    padding-top: 0px;
}

.visiting-box .text-circle {
    padding-bottom: 28px;
}

section.hospi-box .flex {
    gap: 4%;
}

@media (max-width: 1024px) {
    .patient-burden-list table {
        font-size: 1rem;
    }

    section.hospi-box img {
        width: 100%;
        padding-top: 20px;
    }

    .visiting-box .text-circle {
        padding-bottom: 20px;
    }

    .visiting-box {
        padding-top: 60px;
    }

    .visiting-box-top {
        padding-top: 0;
    }

    tbody.sp-only tr {
        display: flex;
        flex-direction: column;
        font-size: 0.875rem;
    }

    ul.visiting-list li::before {
        left: 5px;
    }

    .visiting-box-top .text-circle {
        padding-bottom: 20px;
    }

}

/* 交通アクセス */
section.access nav.breadcrumb {
    width: 100%;
    padding-bottom: 0;
}

.car-map img {
    width: 100%;
    max-width: 720px;
    margin: auto;
}

.map-access {
    position: relative;
}

.car-map span img {
    width: 15px;
}

p.car-map-text {
    padding-bottom: 16px;
}

p.map-container {
    position: relative;
}

a.pin {
    position: absolute;
    width: 43px;
    height: 59px;
}

a.pin-1 {
    top: 19%;
    left: 38%;
}

a.pin-2 {
    top: 3%;
    left: 47%;
}

a.pin-3 {
    top: 40%;
    left: 60%;

}

a.pin-4 {
    top: 37%;
    left: 42.5%;
}


.image-popup {
    display: none;
    /* デフォルトで非表示 */
    position: fixed;
    /* スクロールしても固定表示 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 40px;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    /* オーバーレイより前面に表示 */
}

.image-popup img {
    max-width: 90vw;
    /* 画像がビューポートに収まるように */
    max-height: 90vh;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
}

.popup-overlay {
    display: none;
    /* デフォルトで非表示 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* 半透明の黒 */
    z-index: 999;
    /* ポップアップより背面に表示 */
}


@media (max-width: 1024px) {
    .map-content p iframe {
        width: 100%;
    }

    .map-access .text-circle {
        padding-top: 60px;
        padding-bottom: 20px;
    }

    a.pin {
        width: 29px;
        height: 36px;
    }

    .image-popup img {
        max-width: 70vw;
        top: 40%;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    a.pin-1 {
        top: 21% !important;
        left: 39% !important;

    }

    a.pin-2 {
        top: 5% !important;
        left: 48% !important;
    }

    a.pin-3 {
        top: 42% !important;
        left: 61% !important;

    }

    a.pin-4 {
        top: 38% !important;
        left: 44% !important;
    }
}

@media (max-width: 768px) {
    a.pin-1 {
        top: 19%;
        left: 37.5%;
    }

    a.pin-2 {
        top: 4%;
        left: 47%;
    }

    a.pin-3 {
        top: 41%;
        left: 60%;
    }

    a.pin-4 {
        top: 38%;
        left: 42%;
    }
}

/* お問い合わせ */
input::placeholder,
textarea::placeholder {
    color: #D5DBE0;
}

.wpcf7 form {
    width: 100%;
    margin: 0 auto;
    font-family: sans-serif;
}

.wpcf7 form label {
    display: block;
    font-weight: bold;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 textarea {
    width: 100%;
    padding: 28px 24px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #fff;
}

.wpcf7 textarea {
    height: 230px;
    resize: vertical;
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
    color: #ccc;
}

.wpcf7 .wpcf7-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    /* margin-top: 40px; */
}

input[type="radio"] {
    transform: scale(1.5);
    /* 1.5倍の大きさに */
    -webkit-transform: scale(1.5);
    /* Safari、Chrome用 */
}

span.wpcf7-list-item-label {
    line-height: 1.5rem;
}

span.wpcf7-list-item{
    min-width: 120px;
}

.wpcf7-list-item{
    margin-left: 0px !important;
}

.wpcf7 input[type="radio"] {
    margin-right: 6px;
}

.wpcf7 input[type="file"] {
    margin-top: 10px;
}

.required {
    color: #D30000;
    font-weight: bold;
}

.wpcf7 input[type="submit"] {
    border: none;
    padding: 12px 40px;
    cursor: pointer;
    display: block;
    margin: 40px auto 0;
    padding: 18px;
    background-color: #259EA7;
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    border-radius: 15px;
    text-align: center;
    width: 20%;
    min-width: 360px;
}

label.contact-title {
    display: block;
}

.q-box {
    display: flex;
    align-items: center;
    padding-bottom: 40px;

}

.q-box-top,
.q-box-block {
    display: block;
}

.q-box-top {
    padding-top: 40px;
    padding-bottom: 40px;
}

.q-box-top .wpcf7-list-item:first-child {
    margin: 0;
}

.q-box-block {
    min-width: 200px;
}

label.contact-title {
    padding-bottom: 6px;
}

.input-box {
    width: 100%;
}

@media (max-width: 1024px) {

    .wpcf7,
    span.wpcf7-radio {
        flex-direction: column;
    }

    span.wpcf7-list-item {
        margin: 0 0 0 0;
    }

    .q-box-block {
        display: flex;
        gap: 4%;
    }

    .q-box {
        flex-direction: column;
        align-items: flex-start;
    }

    .gender-box span.wpcf7-radio {
        flex-direction: row;
    }

}


/* お問い合わせ完了 */
.btn-top {
    display: inline-block;
    padding: 18px;
    background-color: #259EA7;
    /* 背景色：画像の色に近い */
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    border-radius: 15px;
    /* 角丸 */
    text-align: center;
    transition: background-color 0.3s ease;
}

.button-box {
    width: 100%;
    text-align: center;
    margin-top: 80px;
}

.button-box a {
    width: 20%;
    min-width: 360px;
    margin: auto;
}

.contact-comp p.m-text {
    padding-bottom: 40px;
}

p.contact-comp-text {
    line-height: 30px;
}

@media (max-width: 1024px) {
    .button-box a {
        max-width: 354px;
        width: 100%;
        margin: auto;
        padding: 20px 0;
        min-width: 100%;
    }
}



/* お知らせ一覧 */
.news-item .news-header {
    cursor: pointer;
    padding: 10px 0;
    display: flex;
    /* こちらは維持 */
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.news-item .news-content {
    display: none;
    padding: 24px 0;
    width: 100%;
    /* 親要素の幅いっぱいに表示 */
    box-sizing: border-box;
    flex-basis: 100%;
    /* Flexboxアイテムの初期幅を100%にする */
    order: 1;
    /* Flexboxアイテムの表示順序をheaderより下にする */
}

.news-item.open .news-content {
    display: block;
    line-height: 24px;
}

.news-content {
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.5s ease;
    opacity: 0;
}

.news-item.open .news-content {
    max-height: 1000px;
    /* 十分大きく設定（内容によって調整可能） */
    opacity: 1;
}

.news-header p.news-data-img {
    margin-right: 10px;
}

.news-header p.news-data {
    margin-right: 15px;
}

.news-header p.category {
    margin-right: 12px;
    width: 140px;
    text-align: center;
}

.news-header h3.news-title {
    margin: 0;
    font-size: 1em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 左右に分ける */
    width: 100%;
}

.news-title .title-text {
    flex: 1;
}

.news-title .arrow-icon {
    flex-shrink: 0;
    margin-left: 16px;
    /* 矢印との間隔はお好みで */
}

.news-title {
    display: flex;
    justify-content: space-between;
    /* タイトルテキストとアイコンを左右に分離 */
    align-items: center;
    width: 100%;
}


li.news-item.open {
    display: block;
}

li.news-item {
    border-bottom: solid 1px #F5F5F5;
}

li.news-item .news-header .news-right-content {
    width: 70%;
}

.news-header .flex {
    width: calc(100% - 70%);
    /* flex-wrap: wrap; */
    gap: 2px;
    align-items: center;
}

.news-page-block ul.news-box {
    width: 100%;
}

.pagination {
    padding-top: 80px;
    text-align: center;
}

a.page-numbers,
span.page-numbers {
    font-size: 1.125rem;
    margin: 10px;
}

span.page-numbers {
    color: #fff;
    background-color: #259EA7;
    padding: 6px 12px;
    border-radius: 5px;
}

@media (max-width: 1024px) {
    .news-item .news-header {
        display: block;
    }

    .news-header .flex {
        display: flex;
        align-items: center;
        padding-bottom: 12px;
    }

    .news-header .bottom-flex {
        display: block;
    }

    .text-circle {
        font-size: 1.25rem;
        line-height: 28px;
    }

    .news-item .news-content {
        padding: 24px 0 0 0;
    }

    .news-header p.category {
        font-size: 0.75rem;
    }

    .news-header .flex {
        width: 100%;
    }

    li.news-item .news-header .news-right-content {
        width: 100%;
    }
}