/* ==========================================
   1. 共通・下層ページ基本設定（他ページと統一）
   ========================================== */
.inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

/* フォント指定 */
.sub-mv__title, .interview-heading { 
    font-family: "Noto Serif JP", serif; 
}

/* ★ Sans から Serif へ書き換え：本文や英語表記も明朝体へ */
.sub-mv__en, .interview-text, .breadcrumb { 
    font-family: "Noto Serif JP", serif; 
}

/* --- メインビジュアル（歯科医師紹介等と共通の構造） --- */
.sub-mv {
    width: 100%;
    height: 300px;
    background: url('https://hata-shika.com/wp-content/uploads/2026/05/bg.png') no-repeat center 70% / cover;
    background-color: #556b2f;
    position: relative;
    /* 他のページに合わせるため flex ではなく padding で位置調整 */
}

.sub-mv::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.sub-mv__inner {
    position: relative;
    z-index: 2;
    text-align: center;
    padding-top: 110px; /* 文字の上下位置を他ページと統一 */
}

.sub-mv__title {
    color: #fff;
    font-size: 2.4rem;
    margin: 0;
}



/* --- インタビューセクション（メイン） --- */
.interview-section { padding-bottom: 80px; }
.interview-section.main-message { padding-top: 40px; }

.interview-container {
    display: flex;
    flex-direction: row;
    gap: 40px;
}
.interview-image { flex: 0 0 45%; }
.interview-image img { 
    width: 100%; 
    height: auto; 
    box-shadow: 10px 10px 0 #f0f0e6; 
}
.interview-body { flex: 1; }

/* --- 見出し(h2) --- */
.interview-heading {
    font-size: 1.8rem;
    color: #556b2f;
    line-height: 1.5;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #556b2f;
}

/* 質問用スタイル */
.interview-heading.q-style {
    background-color: #556b2f;
    color: #fff;
    padding: 25px 35px;
    border-bottom: none;
    display: flex;
    gap: 15px;
    font-size: 1.6rem;
}
.interview-heading.q-style::before { 
    content: "Q."; 
    color: #c5a059; 
    font-weight: bold; 
}

/* --- 本文テキスト --- */
.interview-text p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #333;
    margin-bottom: 1.2em;
}

/* 回答ボックス */
.answer-box {
    background-color: #f4f7f0;
    padding: 40px 50px;
    margin-bottom: 40px;
}

/* ==========================================
   2. スマホ版設定（max-width: 768px）
   ========================================== */
@media (max-width: 768px) {
    .sub-mv { height: 200px; }
    .sub-mv__inner { padding-top: 70px; }
    .sub-mv__title { font-size: 1.6rem; }

    .interview-section { padding-bottom: 50px; }
    
    .interview-container {
        flex-direction: column;
        gap: 20px;
    }

    .interview-heading { font-size: 1.3rem; }
    .interview-heading.q-style {
        font-size: 1.2rem;
        padding: 20px;
    }

    .answer-box {
        padding: 25px 20px;
    }
}