@charset "UTF-8";
@media screen and (max-width: 767px) {

    /* 全体＆TOPページ SP用CSS */

    /*----------------------------------------
共通設定
------------------------------------------*/
    .pc-dn {
        display: block !important;
    }

    .sp-dn {
        display: none !important;
    }

    main {
        padding-top: min(63 / 375* 100vw, 63px);
    }

    section {
        margin-bottom: 3em;
    }

    /* セクション切り抜き */
    section.clip-1 {
        clip-path: polygon(0 0, 100% 2%, 100% 100%, 0 98%);
        padding: 0;
        margin: 0;
    }

    section.clip-2 {
        clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 100%);
        padding: 0;
        margin: 0;
    }
}

/*----------------------------------------
ヘッダー、ハンバーガーメニュー
------------------------------------------*/
@media screen and (max-width: 1032px) {
    .header {
        height: min(90 / 375* 100vw, 90px);
        position: fixed;
        display: flex;
        align-items: center;
    }

    .header__inner {
        height: min(60 / 375* 100vw, 60px);
        padding: 0 0.3em;
        position: relative;
    }

    .logo {
        align-items: center;
        font-size: 1.2em;
        font-weight: 600;
        line-height: 1.5;
    }

    @media screen and (max-width: 400px) {
        .logo {
            font-size: 1em;
        }
    }

    .logo img {
        width: min(300 / 375* 100vw, 300px);
        height: auto;
    }

    /* ハンバーガーボタンのデザイン */
    .drawer__button {
        position: relative;
        width: min(65 / 375* 100vw, 65px);
        height: min(65 / 375* 100vw, 65px);
        background-color: var(--white);
        border: none;
        cursor: pointer;
        display: block;
        z-index: 5000;
    }

    /* ハンバーガーボタン内の線 */
    .drawer__button>span {
        display: block;
        position: absolute;
        left: 50%;
        width: 2.7rem;
        height: 2px;
        background: linear-gradient(90deg, #174698 10%, #113e99ca 20%, #00C7A3ca 80%);
        transform: translateX(-50%);
        transform-origin: center;
        transition: transform 0.3s ease, top 0.3s ease, opacity 0.3s ease;
    }

    .drawer__button>span:first-child {
        top: 1.2em;
    }

    .drawer__button>span:nth-child(2) {
        top: 50%;
    }

    .drawer__button>span:last-child {
        top: calc(100% - 1.2em);
    }

    /* 展開時のデザイン */
    .drawer__button.active>span:first-child {
        top: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .drawer__button.active>span:nth-child(2) {
        opacity: 0;
    }

    .drawer__button.active>span:last-child {
        top: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    /* メニューのデザイン */
    .drawer__nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        transition: opacity 0.3s ease;
        opacity: 0;
        visibility: hidden;
    }

    .drawer__nav.active {
        opacity: 1;
        visibility: visible;
    }

    .drawer__nav__inner {
        position: relative;
        width: 100%;
        height: 100dvh;
        background-color: white;
        border-bottom: 1px solid var(--primary);
        margin: 0 0 0 auto;
        padding: min(80 / 375* 100vw, 80px) 0;
        /* overflow: scroll; */
        overflow-x: hidden;
        transition: 0.3s;
    }

    .inner-logo {
        position: sticky;
        height: min(60 / 375* 100vw, 60px);
        padding: 0 min(24 / 375* 100vw, 24px);
        display: flex;
        align-items: center;
        box-shadow: 0px 5px 3px #00000045;
    }

    .drawer__nav__menu {
        display: block;
        list-style: none;
        padding-left: 0;
        max-width: 500px;
        margin: 0 auto;
    }

    .drawer__nav__link {
        display: block;
        text-decoration: none;
        padding: 1em 0;
        display: flex;
        justify-content: space-between;
        background: linear-gradient(90deg, #174698 10%, #113e99ca 20%, #00C7A3ca 90%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        width: fit-content;
        font-size: clamp(16px, 20/375*100vw, 20px) !important;
        font-weight: bold !important;
    }

    .drawer__nav__item {
        margin-left: 0;
        padding: 0 2em;
    }

    /* ハンバーガーメニュー内　アコーディオンメニュー */
    .drawer__nav__item .accordion-title,
    .drawer__nav__item .accordion-item .accordion-content {
        border-bottom: none !important;
    }

    .drawer__nav__item .accordion-item .accordion-content {
        padding: 0;
        padding-bottom: 1em;
    }

    .drawer__nav__item .accordion-title a {
        font-size: clamp(16px, 20/375*100vw, 20px) !important;
        font-weight: bold;
        background: linear-gradient(90deg, #174698 10%, #113e99ca 10%, #00C7A3ca 50%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin: 0;
    }

    .drawer__nav__item .accordion-title span {
        width: min(15 / 375* 100vw, 15px);
    }

    .drawer__nav__item .accordion-title.open {
        background: linear-gradient(90deg, #174698 10%, #113e99ca 10%, #00C7A3ca 50%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }

    .drawer__nav__item .accordion-title.open>span {
        background-color: var(--primary);
    }

    .topbutton {
        display: none;
    }

    .menu-bottom {
        display: block;
        margin-left: 1em;
    }

    .menu-bottom .accordion-item .js-accordion-title {
        background: linear-gradient(90deg, #174698 3%, #113e99ca 30%, #00C7A3ca 100%);
        -webkit-background-clip: unset;
        -webkit-text-fill-color: unset;
    }

    .drawer__nav__item .accordion-detail p,
    .drawer__nav__menu .accordion.menu-bottom .accordion-detail p {
        font-size: clamp(14px, 20/375*100vw, 20px) !important;
        color: var(--primary);
        font-weight: bold;
    }

    .drawer__nav__item .accordion-detail,
    .drawer__nav__menu .accordion.menu-bottom .accordion-detail {
        padding: 0.5em 0 !important;
        border-bottom: 1px solid;
        border-image: linear-gradient(90deg, #113e99ca 30%, #00C7A3ca 100%) 1;
    }

    .drawer__nav__item a::after {
        background: none;
    }

    .drawer__nav__link.sp-dn {
        display: none;
    }

    .drawer__nav__item.pc-dn,
    .navitem-bottom.pc-dn {
        display: block !important;
    }

    /* ハンバーガーメニュー下側　アコーディオンメニュー */
    .drawer__nav__menu .accordion.menu-bottom,
    .drawer__nav__menu .accordion.menu-bottom .accordion-container,
    .drawer__nav__menu .accordion.menu-bottom .accordion-item {
        width: 100%;
    }

    .drawer__nav__menu .accordion.menu-bottom {
        width: 100%;
        margin: 2em auto;
    }

    .drawer__nav__menu .accordion.menu-bottom .js-accordion-title {
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--white);
        width: min(270 / 375* 100vw, 270px);
        height: min(60 / 375* 100vw, 60px);
        transition: 0.3s;
    }

    .drawer__nav__menu .accordion.menu-bottom .js-accordion-title:hover {
        cursor: pointer;
    }

    .drawer__nav__menu .accordion.menu-bottom .js-accordion-title.open {
        width: 100% !important;
    }

    .drawer__nav__menu .accordion.menu-bottom .accordion-content {
        margin: 0 2em;
        border-bottom: none;
    }

    /* メニュー下側 */
    .navitem-bottom a,
    .navitem-bottom p {
        color: var(--primary) !important;
        position: relative;
        padding: 0 2em;
        font-size: 1rem;
        margin-bottom: 0.3em;
    }

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

        .navitem-bottom a,
        .navitem-bottom p {
            padding: 0 1em;
        }
    }

    .navitem-bottom .navitem-bottom-top .nav-line::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 1px;
        height: 100%;
        background-color: var(--primary);
    }

    .navitem-bottom .navitem-bottom-top {
        display: flex;
        justify-content: center;
        margin-left: 0.7em;
    }

    .navitem-bottom .navitem-bottom-bottom {
        text-align: center;
    }

    /* メニュー展開時、背景を固定 */
    body.active {
        height: 100%;
        overflow: hidden;
    }
}

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

    /*========================================
TOPページ
========================================*/
    /*----------------------------------------
#KV
------------------------------------------*/
    #KV {
        margin-top: min(60 / 375* 100vw, 60px);
    }

    /* 斜め三角 */
    #KV::before {
        border-width: 40px 0 3px 100vw;
    }

    /*----------------------------------------
#section-1
------------------------------------------*/
    /* #section-1 .content_wrap_inner {
        padding: 5em min(20 / 375* 100vw, 20px);
    } */

    /* 75周年 */
    #section-1 .button-75th button {
        background: none;
        width: 100%;
        height: auto;
    }

    #section-1 .button-75th button a img {
        width: 100%;
    }

    /* 挨拶 */
    #section-1 .greet {
        flex-direction: column;
        margin-top: 3em;
    }

    #section-1 .greet-right {
        order: 1;
        aspect-ratio: 3/2;
        width: 100%;
        height: auto;
    }

    #section-1 .greet-right img {
        object-position: 25%;
    }

    #section-1 .greet-left {
        order: 2;
        margin-right: 0;
        margin-top: 2.5em;
        width: 100%;
    }

    .hospital-lists {
        margin-top: 3em;
    }

    .hospital-lists button {
        width: 100%;
        height: fit-content;
    }

    .hospital-lists button img {
        width: 100%;
        height: 100%;
    }

    /*----------------------------------------
#section-2
------------------------------------------*/
    #section-2 {
        padding: 3em 0;
        height: 141em;
    }

    @media screen and (max-width: 710px) {
        #section-2 {
            height: 133em;
        }
    }

    @media screen and (max-width: 610px) {
        #section-2 {
            height: 126em;
        }
    }

    @media screen and (max-width: 560px) {
        #section-2 {
            height: 120em;
        }
    }

    @media screen and (max-width: 515px) {
        #section-2 {
            height: 115em;
        }
    }

    @media screen and (max-width: 485px) {
        #section-2 {
            height: 110em;
        }
    }

    @media screen and (max-width: 445px) {
        #section-2 {
            height: 105em;
        }
    }

    @media screen and (max-width: 410px) {
        #section-2 {
            height: 100em;
        }
    }

    @media screen and (max-width: 350px) {
        #section-2 {
            height: 95em;
        }
    }

    #section-2 .pickup {
        padding-top: 0.5em;
        justify-content: flex-start;
        flex-direction: column;
    }

    #section-2 .pickup-content {
        width: 100% !important;
        height: fit-content;
        margin-bottom: 3em;
    }

    /*----------------------------------------
#section-3
------------------------------------------*/
    #section-3 {
        padding-bottom: 0;
    }

    #section-3 .magazine-content {
        flex-direction: column;
    }

    #section-3 .magazine-content img {
        width: 85%;
        margin-right: 0;
    }

    #section-3 .magazine-text {
        width: 100%;
        margin-top: 2em;
    }

    #section-3 .magazine-text .gradation-button {
        margin-top: 2em;
    }

    /*----------------------------------------
#section-4
------------------------------------------*/
    #section-4 {
        background-position: 40%;
        padding: 2em 0 4em;
    }

    #sub .paginate-container,
    #section-4 .paginate-container {
        width: 100%;
        margin-bottom: 2em;
    }

    #sub .info_detail,
    #section-4 .info_detail {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    #sub .info_detail_left,
    #section-4 .info_detail_left {
        justify-content: left;
        display: flex;
    }

    #sub .info_detail_left .info-tag,
    #section-4 .info_detail_left .info-tag {
        width: min(70 / 375* 100vw, 70px);
        height: fit-content;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0.5em 0 0 1.5em;
        padding: 0;
    }

    #sub .info_detail_left img,
    #section-4 .info_detail_left img {
        width: min(17 / 375* 100vw, 17px);
        height: auto;
        margin-right: 1em;
    }

    #section-4 .white-button {
        width: 100%;
        height: min(70 / 375* 100vw, 70px);
    }

    #section-4 .news-links {
        display: block;
        width: 100%;
        padding: 0 min(30 / 375* 100vw, 30px);
        margin: 3em 0 0;
    }

    .news-links img {
        margin-bottom: 0.7em;
    }

    /*----------------------------------------
footer
------------------------------------------*/
    .footer-top {
        flex-direction: column;
        padding: 1.5em;
    }

    .footer-right,
    .footer-right img {
        width: 100%;
    }

    .footer-right img {
        margin-bottom: 1.5em;
    }

}