@charset "utf-8";

h2 {
    color: var(--primary-green);
    font-family: "Zen Maru Gothic";
    font-size: 3.6rem;
    font-style: normal;
    font-weight: bold;
    line-height: normal;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-color: #C1DFC4;
    text-decoration-thickness: 10%;
    text-underline-offset: 25%;
    text-underline-position: from-font;
    text-align: center;
}

.spbr {
    display: none;
}

/* ----------------------------------------------------
タブレット用（768px〜1024px）
---------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {}

/* ----------------------------------------------------
スマホ用（〜767px）
---------------------------------------------------- */
@media screen and (max-width: 768px) {
    .spbr {
        display: block;
    }

    .pcbr {
        display: none;
    }

    h2 {
        font-size: 2.0rem;
    }
    .slider_thumb.slider:nth-of-type(1) {
        display: block;
    }
}

/* ----------------北五条医院の理念------------------ */

#philosophy {
    padding: 100px 15.3%;
}

.philosophy__lead p {
    margin-top: 80px;
    color: var(--primary-black);
    text-align: center;
    font-family: "BIZ UDPGothic";
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 30px;
}

.philosophy__lead p span {
    color: var(--primary-green);
    font-family: "BIZ UDPGothic";
    font-size: 2.0rem;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: 1px;
}






/* ----------------------------------------------------
北五条医院の理念タブレット用（768px〜1024px）
---------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    #philosophy {
        padding: 100px 12%;
    }

    .philosophy__lead p {
        margin-top: 30px;
        font-size: 1.2rem;
        line-height: 24px;
    }

    .philosophy__lead p span {
        font-size: 1.2rem;
        line-height: 24px;
    }
}

/* ----------------------------------------------------
北五条医院の理念スマホ用（〜767px）
---------------------------------------------------- */
@media screen and (max-width: 768px) {

    #philosophy {
        padding: 40px 8.5%;
    }

    .philosophy__lead p {
        margin-top: 30px;
        font-size: 1.2rem;
        line-height: 24px;
    }

    .philosophy__lead p span {
        font-size: 1.2rem;
        line-height: 24px;
    }
}



/* ----------------北五条医院の診療方針------------------ */

#policy {
    padding: 100px 15.3%;
    background: var(--primary-lightgreen);
}

.policy__unit {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 60px;
    align-self: stretch;
    border-radius: 20px;
    background: var(--primary-white);
    padding: 50px 60px;
}

.policy__unit img {
    margin: 0 auto;
    border-radius: 20px;
}

.policy__lead {
    color: var(--primary-green);
    text-align: center;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.10);
    font-family: "BIZ UDPGothic";
    font-size: 2.0rem;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: 1px;
}

.policy__text {
    color: var(--primary-black);
    font-family: "BIZ UDPGothic";
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    padding: 0 2%;
}

/* ----------------------------------------------------
北五条医院の診療方針タブレット用（768px〜1024px）
---------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    #policy {
        padding: 100px 12%;
    }

    .policy__unit {
        gap: 40px;
        border-radius: 10px;
        padding: 20px 10px;
    }

    .policy__unit img {
        border-radius: 10px;
        padding: 0 30px;
    }

    .policy__lead {
        font-size: 1.2rem;
        line-height: 24px;
    }

    .policy__text {
        font-size: 1.2rem;
        line-height: 24px;
        padding: 0 3%;
    }
}

/* ----------------------------------------------------
北五条医院の診療方針スマホ用（〜767px）
---------------------------------------------------- */
@media screen and (max-width: 768px) {
    #policy {
        padding: 40px 8.5%;
    }

    .policy__unit {
        gap: 40px;
        border-radius: 10px;
        padding: 20px 10px;
    }

    .policy__unit img {
        border-radius: 10px;
        padding: 0 30px;
    }

    .policy__lead {
        font-size: 1.2rem;
        line-height: 24px;
    }

    .policy__text {
        font-size: 1.2rem;
        line-height: 24px;
        padding: 0;
    }
}

/* ----------------北五条医院の基本情報------------------ */
#information {
    padding: 100px 15.3%;
}

#information h2 {
    margin-bottom: 100px;
}

.table_design {
    border-collapse: collapse;
    width: 100%;
}

.table_design tr {
    background-color: var(--primary-palegreen);
}

.table_design tr:nth-child(odd) {
    background-color: var(--primary-white);
}

.table_design th,
.table_design td {
    padding: 1em;
    color: var(--primary-black);
    text-align: start;
    font-family: "BIZ UDPGothic";
    font-size: 2.0rem;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 1px;
}

.table_design th {
    text-align: center;
    width: 20%;
    min-width: 4em;
}

/* スケジュール */
.schedule {
    padding: 40px 3%;
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;

}

.schedule-table thead {
    border-bottom: 18px solid transparent;
    /* 下に18pxの透明なボーダーを追加 */
}

.schedule-table tbody td {
    padding-top: 18px;
    /* tbody の上部に18pxの余白を追加 */
}

.schedule-table thead {
    border-bottom: 1px solid #333;
}

.schedule-table tbody tr:nth-child(1) {
    border-bottom: 1px solid #333;
}

.schedule-table tbody tr:nth-child(2) {
    border-bottom: 1px solid #333;
}

.schedule-table th {
    padding: 10px;
    color: var(--black, #333);
    text-align: center;
    font-size: 2.0rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 0 20px;
    white-space: nowrap;
}

.schedule-table td {
    color: var(--black, #333);
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 2.0rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 0 20px;
    white-space: nowrap;
}

.schedule-table th {
    font-weight: bold;
}


.schedule-table tbody tr .time {
    color: var(--black, #333);
}

.schedule-table .open {
    color: var(--primary-green);
}

/* ノート部分 */
.note {
    font-size: 1.6rem;
    color: var(--primary-black);
    margin-top: 10px;
    text-align: center;
}

/* ----------------------------------------------------
北五条医院の基本情報タブレット用（768px〜1024px）
---------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    #information {
        padding: 100px 12%;
    }
}

/* ----------------------------------------------------
北五条医院の基本情報スマホ用（〜767px）
---------------------------------------------------- */
@media screen and (max-width: 768px) {
    #information {
        padding: 40px 8.5%;
    }

    #information h2 {
        margin-bottom: 40px;
    }

    .table_design {
        border-collapse: collapse;
        width: 100%;
    }


    .table_design th,
    .table_design td {
        font-size: 1.2rem;
        line-height: 24px;
        letter-spacing: normal;
        padding: 2em 0;
    }

    /* スケジュール */
    .schedule {
        padding: 20px 3%;
    }

    .schedule-table {
        width: 100%;
        table-layout: fixed;
        margin: 0 auto;

    }

    .schedule-table th,
    .schedule-table td {
        white-space: normal;
        /* 折り返し */
        word-break: keep-all;
        /* 日本語の不自然な分割を抑制（必要なら normal） */
        padding: 0;
        /* 余白縮小 */
        font-size: 1.0rem;
    }

    .schedule-table tbody td {
        padding-top: 8px;
        /* tbody の上部に18pxの余白を追加 */
    }

    /* ノート部分 */
    .note {
        font-size: 1.0rem;
    }

}

/* ----------------アクセス------------------ */

#access {
    padding: 100px 15.3%;
    background: var(--primary-palegreen);
}

.access__summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 70px;
    align-self: stretch;
    margin-top: 80px;
}

#access iframe {
    width: 524px;
    height: 614px;
}

.access__unit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 35px;
}

.access__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
}

.icon-title {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
}

.icon-title img {
    width: 40px;
    height: 40px;
    aspect-ratio: 1/1;
}

.access__text {
    color: var(--primary-black);
    font-family: "BIZ UDPGothic";
    font-size: 2.0rem;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 1px;
}

.train {
    color: var(--primary-black);
    font-family: "BIZ UDPGothic";
    font-size: 2.0rem;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 1px;
}

.bus {
    color: var(--primary-black);
    font-family: "BIZ UDPGothic";
    font-size: 2.0rem;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 1px;
    margin-top: 30px;
}

.access__title {
    color: var(--primary-black);
    text-align: start;
    font-family: "BIZ UDPGothic";
    font-size: 2.0rem;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: 1px;
}

/* ----------------------------------------------------
アクセスタブレット用（768px〜1024px）
---------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    #access {
        padding: 100px 12%;
    }

    .access__summary {
        display: block;
        margin-top: 40px;
    }

    #access iframe {
        width: 100%;
        height: 184px;
        margin: 0 auto;
    }

    .access__unit {
        gap: 35px;
        margin-top: 40px;
    }

    .access__list {
        gap: 10px;
    }


    .icon-title img {
        width: 24px;
        height: 24px;
        aspect-ratio: 1/1;
    }

    .access__text {
        font-size: 1.2rem;
        line-height: 24px;
        letter-spacing: normal;
    }

    .train {
        font-size: 1.2rem;
        line-height: 24px;
        letter-spacing: normal;
    }

    .bus {
        font-size: 1.2rem;
        line-height: 24px;
        letter-spacing: normal;
        margin-top: 10px;
    }

    .access__title {
        font-size: 1.2rem;
        font-weight: 700;
        line-height: 24px;
        letter-spacing: 1px;
    }
}

/* ----------------------------------------------------
アクセススマホ用（〜767px）
---------------------------------------------------- */
@media screen and (max-width: 768px) {
    #access {
        padding: 40px 8.5%;
    }

    .access__summary {
        display: block;
        margin-top: 40px;
    }

    #access iframe {
        width: 100%;
        height: 184px;
        margin: 0 auto;
    }

    .access__unit {
        gap: 35px;
        margin-top: 40px;
    }

    .access__list {
        gap: 10px;
    }


    .icon-title img {
        width: 24px;
        height: 24px;
        aspect-ratio: 1/1;
    }

    .access__text {
        font-size: 1.2rem;
        line-height: 24px;
        letter-spacing: normal;
    }

    .train {
        font-size: 1.2rem;
        line-height: 24px;
        letter-spacing: normal;
    }

    .bus {
        font-size: 1.2rem;
        line-height: 24px;
        letter-spacing: normal;
        margin-top: 10px;
    }

    .access__title {
        font-size: 1.2rem;
        font-weight: 700;
        line-height: 24px;
        letter-spacing: 1px;
    }

}

/* ----------------設備紹介------------------ */

#slider-container {
    padding: 100px 15.3%;
}

.sliderArea {
    padding: 80px 3% 0;
}

.sliderArea img {
    border-radius: 20px;
}



/* ----------------------------------------------------
設備紹介タブレット用（768px〜1024px）
---------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    #slider-container {
        padding: 100px 12%;
    }

}

/* ----------------------------------------------------
設備紹介スマホ用（〜767px）
---------------------------------------------------- */
@media screen and (max-width: 768px) {
    #slider-container {
        padding: 40px 8.5%;
    }

    .sliderArea img {
        border-radius: 10px;
    }
}