@charset "utf-8";
/* ==========================================================================
   about.css — 病院を知る (About) subpage.
   ========================================================================== */

/* --------------------------------------------------------------------------
   副院長の声 (Vice Director) — PC Default (px)
   -------------------------------------------------------------------------- */
.sec_vice {
    width: 94.93%;
    max-width: 1200px;
    margin: 70px auto 0;
}
.vice_block {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-top: 40px;
}
.vice_block.rev { flex-direction: row-reverse; }
.vice_img {
    position: relative;
    width: 592px;
    max-width: 48%;
    flex: none;
    aspect-ratio: 1.1 / 1;
}
.vice_bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.vice_block.custom .vice_bg{
    left: -18%;
}

.vice_pic {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 385px;
    border-radius: 14px;
}

.vice_block.custom .vice_pic{
    left: 34%;
}
.vice_body { flex: 1; }
.vice_lead {
    font-size: 20px;
    font-weight: 400;
    font-family: var(--font-BIZ_UDPGothic);
    color: #0D9A32;
    margin-bottom: 20px;
}
.vice_text { font-size: 15px; color: var(--sub4-color); line-height: 1.9; max-width: 500px; }
.vice_name { font-size: 14px; color: #063877; margin-top: 20px; }

/* --------------------------------------------------------------------------
   おすすめ POINT — PC Default (px)
   -------------------------------------------------------------------------- */
.sec_point {
    width: 96%;
    max-width: 1350px;
    margin: 90px auto 0;
    text-align: center;
}
.sec_point .sec_ttl { display: inline-block; text-align: left; }

.point_cards {
    display: flex;
    gap: 24px;
    justify-content: center;
    margin-top: 44px;
}

.point_card {
    flex: 1;
    background: url('../images/about/bg_point_card.png') no-repeat center center / 100% 100%;
    border: none;
    box-shadow: none;
    padding: 38px 24px 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.point_icon {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px; 
}
.point_icon img { height: 60px; width: auto; display: block; }

.point_ttl {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.45;
    margin: 0 0 16px 0; 
    text-align: center;
    font-family: var(--font-BIZ_UDPGothic);
}
.point_card:nth-child(1) .point_ttl { color: #2E7BC4; }
.point_card:nth-child(2) .point_ttl { color: #8CB63C; }
.point_card:nth-child(3) .point_ttl { color: #3BAE67; }

.point_text {
    font-size: 16px;
    color: #303C4C;
    line-height: 1.7;
    margin: 0;
    text-align: center;
    padding-right: 1em;
}

/* --------------------------------------------------------------------------
   数字で知る (Stats) — PC Default (px)
   -------------------------------------------------------------------------- */
.sec_stats {
    margin: 90px auto 0;
    padding: 70px 0;
    background: #F3FCFF;
    border-radius: 73px;
    width: 96%;
    max-width: 1350px;
}
.sec_stats .sec_ttl {
    width: 52%;
    max-width: 1324px;
    margin: 0 auto;
}
.stat_grid {
    width: 100%;
    max-width: 1350px;
    margin: 44px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}
.stat_row {
    display: flex;
    flex-wrap: nowrap; /* Keeps all 4 cards on 1 line on desktop */
    justify-content: center;
    gap: 22px;
    width: 100%;
}
.stat_card {
    width: calc((100% - 200px) / 4); /* Fluid 4-column card sizing */
    height: 257px;
    background: #ffffff;
    border: none;
    border-radius: 29px;
    box-shadow: 0 8px 20px rgba(31, 111, 192, .08);
    padding: 26px 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}
.stat_icon { height: 44px; margin-bottom: 8px; }
.stat_icon img { height: 40px; width: auto; }
.stat_num {
    font-family: "Meiryo", sans-serif;
    font-size: 53px;
    font-weight: 700;
    color: #1F6FC0;
    line-height: 1.1;
    white-space: nowrap;
}
.stat_num .u { font-size: 25px; margin-left: 2px; }
.stat_label {
    font-size: 16px;
    color: var(--sub12-color);
    margin-top: 8px;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   施設概要 (Facility) — PC Default (px)
   -------------------------------------------------------------------------- */
.sec_facility {
    width: 100%;
    max-width: 1440px;
    margin: 80px auto 90px;
}
.facility_inner {
    display: flex;
    gap: 0;
    align-items: stretch;
    margin-top: 40px;
}
.facility_img {
    width: 360px;
    max-width: 35%;
    flex: none;
}
.facility_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.facility_body {
    flex: 1;
    background: linear-gradient(180deg, #E9F9FE 0%, #CFDBF2 100%);
    padding: 40px;
    border-radius: 0;
}
.facility_body .sec_ttl { margin-bottom: 28px; }
.facility_table {
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
}
.facility_row { display: flex; border-bottom: 1px solid #E5E9F0; }
.facility_row dt {
    width: 150px;
    flex: none;
    background: #F3F6FB;
    color: var(--home-navy);
    font-weight: 700;
    font-size: 16px;
    padding: 16px;
}
.facility_row dd {
    flex: 1;
    font-size: 14px;
    color: var(--sub4-color);
    line-height: 1.7;
    padding: 16px;
}

.facility_row dd a{
    color: var(--sub4-color);
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* --------------------------------------------------------------------------
   Tablet Responsive Adjustments (768px – 1100px) — rem units
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 1350px) {
    .sec_vice {
        max-width: 12.0rem;
        margin: .70rem auto 0;
    }
    .vice_block {
        gap: .60rem;
        margin-top: .40rem;
    }
    .vice_img {
        width: 5.92rem;
    }
    .vice_pic {
        border-radius: .14rem;
    }
    .vice_lead {
        font-size: .20rem;
        margin-bottom: .20rem;
    }
    .vice_text { font-size: .15rem; }
    .vice_name { font-size: .14rem; margin-top: .20rem; }

    .sec_point {
        max-width: 13.5rem;
        margin: .90rem auto 0;
    }

    .point_cards {
        gap: .24rem;
        margin-top: .44rem;
    }

    .point_card {
        padding: .38rem .24rem .44rem;
    }

    .point_icon {
        height: .60rem;
        margin-bottom: .20rem; 
    }
    .point_icon img { height: .60rem; }

    .point_ttl {
        font-size: .22rem;
        margin: 0 0 .16rem 0; 
    }

    .point_text {
        font-size: .16rem;
    }

    .sec_stats {
        margin: .90rem auto 0;
        padding: .70rem 0;
        border-radius: .73rem;
        max-width: 13.50rem;
    }
    .sec_stats .sec_ttl {
        max-width: 13.24rem;
    }
    .stat_grid {
        max-width: 13.5rem;
        margin: .44rem auto 0;
        gap: .22rem;
    }
    .stat_row {
        flex-wrap: wrap; /* Wraps cleanly into 2x2 grid on tablet */
        gap: .22rem;
    }
    .stat_card {
        width: calc((100% - 1.5rem) / 4); 
        height: auto;
        min-height: 2.20rem;
        border-radius: .29rem;
        box-shadow: 0 .08rem .20rem rgba(31, 111, 192, .08);
        padding: .26rem .12rem;
    }
    .stat_icon { height: .64rem; margin-bottom: .40rem; }
    .stat_icon img { width: .68rem; height: .64rem; }
    .stat_num {
        font-size: .40rem;
    }
    .stat_num .u { font-size: .25rem; margin-left: .02rem; }
    .stat_label {
        font-size: .16rem;
        margin-top: .08rem;
    }

    .sec_facility {
        max-width: 14.40rem;
        margin: .80rem auto .90rem;
    }
    .facility_inner {
        margin-top: .40rem;
    }
    .facility_img {
        width: 3.60rem;
    }
    .facility_body {
        padding: .40rem;
        border-radius: 0 .16rem .16rem 0;
    }
    .facility_body .sec_ttl { margin-bottom: .28rem; }
    .facility_table {
        border-radius: .08rem;
    }
    .facility_row { border-bottom: .01rem solid #E5E9F0; }
    .facility_row dt {
        width: 1.50rem;
        font-size: .16rem;
        padding: .16rem;
    }
    .facility_row dd {
        font-size: .14rem;
        padding: .16rem;
    }
}

/* --------------------------------------------------------------------------
   SP Responsive Adjustments (< 767px) — rem units
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
    .sub_anchor_nav ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .02rem;
    }
    .sub_anchor_nav li:nth-child(1) a { border-radius: .12rem 0 0 0; }
    .sub_anchor_nav li:nth-child(2) a { border-radius: 0 .12rem 0 0; }
    .sub_anchor_nav li:nth-child(3) a { border-radius: 0 0 0 .12rem; }
    .sub_anchor_nav li:nth-child(4) a { border-radius: 0 0 .12rem 0; }
    .sub_anchor_nav li { flex: none; width: 100%; }

    .sec_vice { margin-top: .90rem; width: 100%; }
    .sec_vice .sec_ttl { margin-left: .30rem; }
    .vice_block, .vice_block.rev { flex-direction: column; gap: .40rem; margin-top: .50rem; }
    .vice_body { width: 94.93%; max-width: 6.8rem;}
    .vice_img { width: 75%; max-width: 100%; }
    .vice_pic { width: 66%; }
    .vice_block.rev .vice_img { align-self: flex-end; margin-right: -.40rem; }
    .vice_block:not(.rev) .vice_img { align-self: flex-start; margin-left: -.40rem; }
    .vice_block:not(.rev) .vice_img .vice_pic { left: 46%; }
    .vice_lead { font-size: .34rem; }
    .vice_text { font-size: .26rem; }
    .vice_name { font-size: .26rem; margin-top: .4rem;}

    .sec_point { margin-top: 1.00rem; max-width: 6.8rem;}
    .sec_point .sec_ttl{ width: 100%; }
    .point_cards { display: flex; flex-direction: column; align-items: center; gap: .40rem; margin-top: .50rem; }
    .point_card {
        width: min(6.5rem, 100%);
        box-sizing: border-box;
        margin: 0 auto;
        background: url('../images/about/bg_point_card.png') no-repeat center center / 100% 100%;
        border: none;
        box-shadow: none;
        padding: .50rem .40rem .70rem;
    }
    .point_icon { height: 1.10rem; margin-bottom: .28rem; }
    .point_icon img { height: 1.00rem; }
    .point_ttl { font-size: .32rem; margin-bottom: .20rem; line-height: 1.4; }
    .point_text { font-size: .26rem; line-height: 1.6; }

    .sec_stats { max-width: 6.8rem; margin-top: 1.00rem; padding: .80rem 0; border-radius: .50rem; }
    .sec_stats .sec_ttl{ width: 94% }
    .stat_grid { width: 100%; margin-top: .40rem; display: flex; flex-direction: column; align-items: center; }
    .stat_row { display: flex; flex-direction: column; align-items: center; gap: .30rem; width: 100%; }
    .stat_card {
        width: min(4.17rem, 100%);
        height: auto;
        aspect-ratio: 417 / 257; 
        box-sizing: border-box;
        margin: 0 auto;
        background: #ffffff;
        border-radius: .30rem;
        box-shadow: 0 .08rem .20rem rgba(31, 111, 192, .08);
        padding: .35rem .20rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .stat_icon { height: .70rem; margin-bottom: .12rem; }
    .stat_icon img { height: .60rem; width: auto; }
    .stat_num { font-size: .60rem; line-height: 1.1; }
    .stat_num .u { font-size: .26rem; margin-left: .04rem; }
    .stat_label { font-size: .22rem; margin-top: .12rem; line-height: 1.5; }

    .sec_facility { 
        width: 100%; 
        margin: .90rem auto; 
    }
    
    .facility_inner { 
        width: 100%; 
        flex-direction: column; 
        gap: 0; 
        margin-top: .40rem; 
    }
    
    .facility_img { 
        display: none; 
    }
    
    .facility_body { 
        width: 100%; 
        padding: .50rem .35rem; 
        border-radius: 0; 
        box-sizing: border-box; 
    }

    .facility_table { 
        background: #ffffff;
        border-radius: .16rem; 
        overflow: hidden;
        padding: .2rem;
    }

    /* Keep side-by-side row on SP */
    .facility_row { 
        display: flex;
        flex-direction: row; 
        align-items: stretch;
        border-left: .01rem solid #D6E0EC; 
        border-right: .01rem solid #D6E0EC; 
        border-bottom: .01rem solid #D6E0EC; 
    }

    .facility_row:first-child {
        border-top: .01rem solid #D6E0EC; 
    }

    /* Left DT Column (Label) */
    .facility_row dt { 
        width: 2.20rem; 
        flex: none;
        background: #F3F6FB;
        color: var(--home-navy, #0B2C66);
        font-weight: 700;
        font-size: .26rem; 
        padding: .24rem .20rem;
        display: flex;
        align-items: center;
        line-height: 1.4;
        box-sizing: border-box;
    }

    /* Right DD Column (Value) */
    .facility_row dd { 
        flex: 1;
        font-size: .26rem; 
        color: var(--sub4-color, #333333);
        line-height: 1.6;
        padding: .24rem .24rem;
        word-break: break-word;
        box-sizing: border-box;
    }
}