@charset "utf-8";

/*-------------------------------------------------------------------------
共通
-------------------------------------------------------------------------*/

.page__headline {
    margin-block: 0 40px;
}
.intro__section:not(:last-child){
    margin-block: 0 60px;
}

/* 個人情報
--------------------------- */
.md-pasonal {
    margin-block: 0 9px;
}
    .md-pasonal__upper {
        font-size: 13px;
        color    : var(--light-text-color);
    }
    .md-pasonal__name {
        margin-block: -2px;
        font-size  : 18px;
        font-weight: bold;
    }
    .md-pasonal__lower {
        color: var(--light-text-color);
    }
    .md-pasonal__staff {
        display: flex;
        align-items: center;
        margin-top: 10px;
    }
    .md-pasonal__staff-img {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        overflow: hidden;
        border: 1px solid var(--border-color);
        margin-right: 5px;
    }

/* 吹き出しコメント
--------------------------- */
.md-comment {
    display: flex;
    gap    : 30px;
}
    .md-comment__items {
        flex: 1;
        display: flex;
        gap    : 8px;
    }
        .md-comment__img {
            min-width: 60px;
            width: 60px;
            height: 60px;
        }
        .md-comment__balloon {
            flex: 1;
            background-color: #F2F4F5;
            border-radius: 8px;
            padding: 10px;
        }
            .md-comment__text.is-ellipsis {
                overflow          : hidden;
                display           : -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;   
            }
            .md-comment__note {
                margin-block: 8px 0;
                color: #78909C;
                text-align: right;
            }
.md-comment + .ui-section-btn {
    margin-block: 30px 0;
}

/*-------------------------------------------------------------------------
詳細
-------------------------------------------------------------------------*/

/* LAYOUT
--------------------------- */
.l-intro-detail {
    display              : grid;
    gap                  : 0 30px;
    grid-template-columns: 400px 712px;
    grid-template-areas  : 
        "header header"
        "left   right"
    ;
    margin: 0 0 160px;
}
    .l-intro-detail__header { grid-area: header;}
    .l-intro-detail__left   { grid-area: left;}
    .l-intro-detail__right  { grid-area: right;}

/* LEFT
--------------------------- */
.intro__sticky {
    position: sticky;
}
.md-photo-slider .intro__photo {
    margin: 0;
}

/* RIGHT
--------------------------- */
.intro__comment {
    margin-block: 0 48px;
}

/*-------------------------------------------------------------------------
#
-------------------------------------------------------------------------*/

.intro__photo {
    display              : grid;
    gap                  : 10px;
    grid-template-columns: repeat(2, 1fr);
}
    .intro__photo-img--main {
        height: 350px;
        grid-area: 1 / span 2;
    }
    .intro__photo-img--sub {
        height: 200px;
    }