@charset "UTF-8";
/* access全体 */
.access{
    padding: 100px 0 140px 0;
    hgroup{
        margin-bottom: 64px;
        h2{
            margin-bottom: 18px;
            font-family: var(--font-family-serif);
            font-size: 18px;
            font-weight: 600;
            line-height: 1;
        }
        p{
            font-family: var(--font-family-vintage);
            font-size: var(--font-size-section-head-main);
            color: var(--color-gray-400);
            line-height: 1;
        }
    }
}
/* 画像と表 */
.access_detail{
    margin-bottom: 48px;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    figure{
        width: 33%;
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .access_table{
        width: 63%;
        table{
            width: 100%;
            height: 100%;
            border-collapse: collapse;
            tr{
                height: calc(100% / 5);
                th{
                    background-color: var(--color-gray-800);
                    border-top: 1px solid var(--color-gray-900);
                    font-family: var(--font-family-serif);
                    font-weight: 600;
                    font-size: var(--font-size-body);
                    &:last-of-type{
                        border-bottom: 1px solid var(--color-gray-900);
                    }
                }
                td{
                    padding-left: 28px;
                    border-top: 1px solid var(--color-gray-800);
                    &:last-of-type{
                        border-bottom: 1px solid var(--color-gray-800);
                    }
                }
            }
        }
    }
}
/* Googleマップ */
.g_map{
    margin-bottom: 100px;
    iframe{
        width: 100%;
        aspect-ratio: 1100 / 400;
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
    }
}
/* 画像一覧 */
.photo_list{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    li{
        img{
            width: 100%;
            height: auto;
            display: block;
            object-fit: cover;
            }
            /* 1行目 */
            &:nth-child(-n+2) {
                grid-column: span 3;
            }
            /* 2行目 */
            &:nth-child(n+3):nth-child(-n+5) {
                grid-column: span 2;
            }
            /* 3行目 */
            &:nth-child(n+6) {
                grid-column: span 3;
            }
    }
}

@media screen and (max-width:768px) {
/* access全体 */
.access{
    padding: 50px 0 60px 0;
    hgroup{
        margin-bottom: 60px;
        h2{
            font-size: 11px;
        }
        p{
            font-size: var(--font-size-section-head-main-sp);
        }
    }
}
/* 画像と表 */
    .access_detail{
        margin-bottom: 30px;
        flex-direction: column;
        figure{
            width: 100%;
            margin-bottom: 30px;
        }
        .access_table{
            width: 100%;
            table{
                tr{

                    th{
                        width: 25%;
                        font-size: 14px;
                        padding: 18px 16px;

                    }
                    td{
                        width: 75%;
                        font-size: 14px;
                        padding: 18px 15px;
                    }
                }
            }
        }
    }
    /* Googleマップ */
    .g_map{
        margin-bottom: 30px;
        iframe{
            width: 100%;
            aspect-ratio: 1 / 1;
        }
    }
    /* 画像一覧 */
    .photo_list{
        grid-template-columns: repeat(1, 1fr);
    }

        .photo_list li:nth-child(-n+2),
        .photo_list li:nth-child(n+3):nth-child(-n+5),
        .photo_list li:nth-child(n+6){
            grid-column: auto;
    }

}


/* .doctors全体 */
.doctors{
    padding: 100px 0 140px 0;
    background-color: var(--color-gray-800);
    > hgroup{
        margin-bottom: 110px;
        h2{
            margin-bottom: 18px;
            font-family: var(--font-family-serif);
            font-size: 18px;
            font-weight: 600;
            line-height: 1;
        }
        p{
            font-family: var(--font-family-vintage);
            font-size: var(--font-size-section-head-main);
            color: var(--color-gray-400);
            line-height: 1;
        }
    }
}
.doctors article{
    margin-bottom: 160px;
    &:last-of-type{
        margin-bottom: 0;
    }
}
.doctors_intro{
    h3{
        margin-bottom: 48px;
        font-family: var(--font-family-serif);
        font-size: 42px;
        font-weight: 600;
        span{
            display: block;
            font-size: 0.5em;
        }
    }
}
.detail_inner{
    margin-bottom: 46px;
    display: flex;
    gap: 70px;
    z-index: 1;
    padding: 40px 0 50px 50px;
    position: relative;
    &::before{
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: -100vw;
        background: #fff;
        z-index: -1;
    }
    .intro_txt{
        width: 58%;
        hgroup{
            margin-bottom: 40px;
            display: flex;
            align-items: center;
            gap: 14px;
            p{
                font-family: var(--font-family-vintage);
                font-size: 50px;
                color: var(--color-gray-400);
                line-height: 1;
                }
            h4{
                font-family: var(--font-family-serif);
                font-size: var(--font-size-body);
            }
        }
    }
}
.detail_inner figure{
    width: 42%;
    margin-top: -124px;
    img{
        width: 100%;
        max-width: 460px;
    }
}


.doctors_detail{
    display: flex;
    gap: 30px;
        &._drOsuga{
            display: block;
            .career{
                width: 100%;
            }
    }
}
.detail_block {
    width: 50%;
    box-sizing: border-box;
    hgroup {
        margin-bottom: 40px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        p{
            font-family: var(--font-family-vintage);
            font-size: 50px;
            color: var(--color-gray-400);
            line-height: 1;
            margin-right: 14px;
        }
        h4{
            font-family: var(--font-family-serif);
            font-size: var(--font-size-body);
        }
    }
}
.detail_block ul li{
    position: relative;
    padding-left: 20px;
    margin-bottom: 24px;
    &:last-of-type{
        margin-bottom: 0;
    }
    &::before{
        content: '';
        width: 12px;
        height: 1px;
        background-color: var(--color-gray-400);
        position: absolute;
        left: 0;
        top:13px;
    }
}

@media screen and (max-width:768px) {
    /* doctors全体 */
    .doctors{
        padding: 80px 0;
         > hgroup{
            margin-bottom: 74px;
            h2{
                font-size: 11px;
            }
            p{
                font-size: var(--font-size-section-head-main-sp);
            }
        }
    }
    /* article */
    .doctors article{
        margin-bottom: 90px;
    }
    /* intro */
    .doctors_intro{
        h3{
            margin-bottom: 36px;
            font-size: 24px;
        }
    }
    .detail_inner{
        width: 92%;
        margin-inline: auto;
        display: flex;
        flex-direction: column-reverse;
        gap: 40px;
        z-index: 1;
        padding: 40px 20px 50px;
        background-color: #fff;
        &::before{
            content: none;
        }
        .intro_txt{
            width: 100%;
            hgroup{
                margin-bottom: 34px;
            }
        }
    }
    .detail_inner figure{
        width: 100%;
        margin-top: 0;
    }
    /* doctors_detail */
    .doctors_detail{
        display: block;
        &._drOsuga{
            display: block;
            .career{
                width: 100%;
            }
        }
    }
    .detail_block{
        width: 100%;
        box-sizing: border-box;
        &:not(:last-of-type){
            margin-bottom: 60px;
        }
        hgroup{
            margin-bottom: 36px;
            p{
                font-size: 36px;
             }
        }
    }
}

/* 医師の画像を545px〜767pxの間だけ中心にする */
@media screen and (min-width:545px) and (max-width:768px){
    .detail_inner figure{
        width: auto;
        max-width: 460px;
        margin-inline: auto;
  }
}