#interview {

    /* --- ベーススタイル --- */
    padding: 40px 20px;

    .interview-container {
        max-width: 1000px;
        /* 横並びにするため少し幅を広げました */
        margin: 0 auto;
        background-color: #fff;
        padding: 60px 40px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        border-radius: 8px;
    }

    /* ヘッダー・目次共通 */
    .interview-header {
        text-align: center;
        margin-bottom: 50px;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    .interview-catch {
        display: inline-block;
        background-color: var(--color-bg-accent2);
        color: white;
        padding: 5px 15px;
        font-size: 1.25rem;
        letter-spacing: 0.1em;
        margin-bottom: 3rem;
        font-weight: bold;
    }

    .interview-title {
        text-align: left;
        font-size: 2rem;
        font-weight: bold;
        margin: 0;
        line-height: 1.4;

        @media (min-width: 769px) {
            text-align: center;
        }
    }

    .interview-subtitle {
        margin-top: 1rem;
    }

    .interview-toc {
        background-color: #f4f4f4;
        padding: 20px;
        border-radius: 4px;
        margin-bottom: 80px;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    .interview-toc ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .interview-toc li {
        border-bottom: 1px dotted #ccc;
        margin-bottom: 8px;
    }

    .interview-toc li:last-child {
        border-bottom: none;
    }

    .interview-toc a {
        text-decoration: none;
        color: var(--base-color-font-black);
        display: block;
        padding: 5px 0;
    }

    .interview-toc a:hover {
        color: #007bff;
    }


    .interview-section {
        margin-bottom: 4rem;
        display: block;

    }

    /* 画像エリア */
    .interview-image-wrapper {
        margin-bottom: 20px;
        overflow: hidden;
        border-radius: 4px;
    }

    .interview-image-wrapper img {
        width: 100%;
        height: auto;
        display: block;
        transition: transform 0.5s ease;
    }

    .interview-caption {
        font-size: 0.9rem;
        color: #666;
        margin-top: 10px;
        line-height: 1.4;
        text-align: center;
    }

    /* テキストエリア（見出し＋本文） */
    .interview-content-wrapper {
        text-align: justify;

        &.--styl1 {
            padding: 1rem;
            border-radius: 12px;
            background-color: #ffa50008;
            border: 1px solid var(--base-color-font-black);
        }
    }

    .interview-section h2 {
        font-size: 1.5rem;
        border-left: 0.5rem solid var(--color-bg-accent2);
        padding-left: 15px;
        margin-bottom: 20px;
        font-weight: 500;
        margin-top: 0;
        /* マージンリセット */

        .interview-content-wrapper.--styl1 & {
            border-left-color: var(--font-color-accent2);
        }
    }

    /* --- PC向けレスポンシブ (縦並び統合) --- */
    @media (min-width: 769px) {

        .interview-image-wrapper,
        .interview-content-wrapper {
            max-width: 800px;
            margin: 0 auto;
        }

        .interview-image-wrapper {
            margin-bottom: 2rem;
        }
    }

    /* スマホ向け調整 */
    @media (max-width: 768px) {
        .interview-container {
            padding: 30px 20px;
        }

        .interview-title {
            font-size: 1.5rem;
        }

        .interview-section h2 {
            font-size: 1.3rem;
        }
    }
}

.interview-footer {
    text-align: center;

    a {
        display: inline-block;
        background: var(--color-bg-accent2);
        color: white;
        padding: 15px 30px;
        text-decoration: none;
        font-size: 1.25rem;
        font-weight: 500;
        border-radius: 100vh;
        text-decoration: underline;

        .__icon1 {
            margin-right: 0.5rem;
        }

    }

}