/* ======================
   GUEST PAGE
====================== */

main{
    max-width:700px;
    margin:100px auto 80px;
    padding:0 20px;
}

/* ゲスト全体 */

.guest-card{
    max-width:700px;
    margin:0 auto 100px;
    padding:40px;
    background:#fff;
    color: #222;
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
    border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.18);
}

/* 写真 */

.photo-box{
    width:320px;
    height:420px;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:0 auto;
}

.guest-photo{
    max-width:100%;
    max-height:100%;
}

/* 氏名 */

.guest-name rt{
    font-size:0.45em;
    letter-spacing:.12em;
}

.guest-name{
    margin-top:28px;
    margin-bottom:30px;
    font-family:'Noto Sans JP',sans-serif;
    font-size:2rem;
    letter-spacing:.08em;
    text-align:center;
    font-weight:700;
}

.guest-role{
    margin-top:-18px;      /* 氏名との間隔を少し詰める */
    margin-bottom:28px;    /* コメントとの余白 */
    font-size:1.2em;
    font-weight:500;
    color:#777;
    letter-spacing:.15em;
    text-align:center;
}

/* コメント */

.guest-comment{
    width:100%;
    padding:24px 12px;
    margin-bottom:40px;
}

.guest-comment p{
    line-height:2;
    text-align:justify;
}



/* プロフィール */

.guest-profile{
    width:100%;
    padding:24px 12px;
    margin-bottom:40px;
}

.guest-profile p{
    line-height:2;
    text-align:justify;
}

/*　セクション見出し　*/

.section-title{
    display:flex;
    align-items:center;
    margin-bottom:20px;
}

.section-title::before{
    content:"";
    width:20px;              /* 左側の線の長さ */
    border-top:1px solid #bbb;
    margin-right:12px;
    flex-shrink:0;
}

.section-title span{
    font-size:1em;
    font-weight:700;
    letter-spacing:.2em;
    color:#666;
}

.section-title::after{
    content:"";
    flex:1;                  /* 残り全部を線にする */
    border-top:1px solid #bbb;
    margin-left:12px;
}

    /* スマホ */

@media (max-width:768px){

    main{
        width:100%;
        max-width: 100%;
        margin-top:90px;
        padding:0 18px;
        box-sizing:border-box;
    }

    .guest-card{
        width:100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding:25px 18px;
        box-sizing:border-box;
    }

    .guest-card img{
        max-width:100%;
    }

    .guest-photo{
        display: block;
        width:100%;
        max-width:100%;
        height:auto;
        aspect-ratio:auto;
        object-fit:contain;
        margin:0 auto;
        box-sizing:border-box;
    }

    .guest-name{
        font-size:1.7rem;
    }

}