@charset "UTF-8";
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .pane-contents{
          padding-bottom: 0;
        }
        
        .footer-menu-wrap ul li a {
            color: #000;
            text-decoration: none;
          }

          .container {
            width: 100%;
            padding:0
          }

          .block-topic-path{
            padding: 12px 190px;
          }

        .img{
            width: 60%;
            background: white;
            padding: 20px 20px 10px 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            margin: 0 auto 30px;
        }

        .img img{
            width: 100%;
        }

        figcaption{
            font-size: 20px;
        }

        .center-caption{
            text-align: center;
        }

        .img:nth-of-type(2){
            width: 35%;
        }

        .interview-container {
            margin: 0 auto;
            width: 1024px;
            padding: 0 30px;
            font-family: "Times New Roman", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", serif;
            line-height: 1.8;
            color: #333;
            background: #fff;
            font-size: 16px;
        }
        
        .header {
            text-align: center;
        }
        
        .category {
            font-size: 12px;
            color: #666;
            letter-spacing: 1px;
            margin-bottom: 10px;
        }

        /* MV */
        .mv{
            margin-bottom: 70px;
        }
        /* MV */

        .flex_item{
            display: flex;
            justify-content: center;
        }

        #cheer{
            margin: 100px 0 70px;
        }

        .flex_item .img{
            width: 35%;
            padding: 10px 10px 0px 10px;
            border-radius: 3px;
            transform: rotate(7deg);
        }

        .profile-img{
            width: 35%;
            margin-right: 20px;
        }

        .flex_item img{
            width: 100%;
        }

        .achievement {
            font-size: 28px;
            color: #dc2626;
            margin-bottom: 20px;
            font-weight: normal;
        }

        .intro-text {
            font-size: 22px;
            line-height: 1.8;
            color: #555;
            text-align: left;
            margin-bottom: 70px;
        }

        .highlight-quote {
            font-size: 24px;
            text-align: center;
            color: #dc2626;
            margin: 30px 0;
            padding: 20px 0;
            border-top: 1px solid #e0e0e0;
            border-bottom: 1px solid #e0e0e0;
            font-weight: normal;
        }

        .interview-section {
            padding: 40px 0 1px;
        }

        .qa-item {
            margin-bottom: 30px;
        }

        .speaker {
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
            font-size: 15px;
        }

        .question .speaker {
            color: #2563eb;
            font-size: 20px;
        }

        .answer .speaker {
            color: #ee1b1b;
            font-size: 20px;
        }

        .text {
            font-size: 20px;
            line-height: 1.8;
            color: #333;
            margin-left: 20px;
        }

        /* PC用の横並びレイアウト */
        @media (min-width: 769px) {
            .qa-item {
                display: flex;
                align-items: flex-start;
                margin-bottom: 30px;
            }

            .speaker {
                width: 140px;
                flex-shrink: 0;
                margin-bottom: 0;
                margin-right: 20px;
                white-space: nowrap;
            }

            .text {
                flex: 1;
                margin-left: 0;
            }
        }

        .profile-section {
            margin: 50px 0;
            padding: 30px 0;
            border-top: 1px solid #e0e0e0;
            background-color: #ce547b;
        }

        .profile-title {
            font-size: 28px;
            margin-bottom: 20px;
            font-weight: normal;
            text-align: center;
            color: #FFF;
        }

        .profile-content {
            font-size: 15px;
            line-height: 1.8;
            color: #555;
        }

        .profile-item {
            margin-bottom: 8px;
            border-bottom: 1px solid #FFF;
            color: #FFF;
            font-size: 16px;
            line-height: 1.6;
        }

        .profile-item:last-of-type {
            border-bottom: none;
            margin-bottom: 0;
        }

        .closing-message {
            text-align: center;
            margin-top: 40px;
            padding-top: 30px;
            font-size: 18px;
            color: #555;
            line-height: 1.8;
        }

        .final-quote {
            margin: 40px 0;
            padding: 20px 0;
            text-align: center;
            font-size: 20px;
            line-height: 1.8;
            color: #333;
            border-top: 1px solid #e0e0e0;
            border-bottom: 1px solid #e0e0e0;
        }

        @media (max-width: 768px) {
        html, body {
        overflow-x: hidden; /* 横スクロールを防ぐ */
        width: 100%;
        max-width: 100%;
    }

    img{
      vertical-align: alphabetic;
    }

    .interview-container {
        padding: 0; /* パディングを完全に削除 */
        margin: 0;
        width: 100%;
        max-width: 100%;
    }

    .container {
        padding: 0px;
      }

      .block-topic-path{
        padding: 0;
      }

    .block-topic-path--list {
        padding: 0 30px;
      }

    .mv{
        margin-bottom: 30px;
    }

        .mv img{
            width: 100%;
        }

            .achievement {
                font-size: 16px;
            }

            .text {
                margin-left: 10px;
            }

            /* MVセクションのレスポンシブ対応 */
            .interview-card {
        border: none; /* ボーダーを一旦削除 */
        margin: 0 10px 40px 10px; /* 左右に最小限の余白のみ */
        max-width: calc(100% - 20px); /* 左右の余白分を引いた幅 */
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); /* 軽いシャドウで代替 */
    }

    .header-section {
        padding: 15px 0;
    }

    .interview-title {
        font-size: 24px; /* さらに小さく */
        letter-spacing: 2px;
        word-break: keep-all;
    }

    .content-section {
        flex-direction: column;
        padding: 15px; /* 均等なパディング */
        gap: 15px;
        text-align: center;
        background-color: #e0f1fc;
    }

    .text-content {
        order: 2;
        width: 100%;
    }

    .mv_img {
        order: 1;
        width: 50%;
        max-width: 150px; /* 最大幅を制限 */
    }

    .tag {
        font-size: 16px;
        padding: 6px 12px;
        margin: 0 auto;
        display: inline-block; /* tableからinline-blockに変更 */
    }

    .name-section {
        margin: 0 auto 15px;
        display: inline-block; /* tableからinline-blockに変更 */
    }

    .name {
        font-size: 22px; /* さらに小さく */
        word-break: keep-all;
        white-space: nowrap;
    }

    .interview-label {
        font-size: 20px;
    }

    #cheer{
        margin: 60px 0;
    }

    /* その他のレスポンシブ対応 */

    .achievement {
        font-size: 16px;
        line-height: 1.4;
        padding: 0 15px; /* 左右に余白を追加 */
        text-align: center;
    }

    .intro-text {
        font-size: 14px;
        margin-bottom: 40px;
        padding: 0 15px; /* 左右に余白を追加 */
        line-height: 1.6;
    }

    .highlight-quote {
        font-size: 16px;
        padding: 15px;
        margin: 20px 10px; /* 左右に余白 */
    }

    .text {
        margin-left: 5px;
        font-size: 14px;
        line-height: 1.6;
    }

    .speaker {
        font-size: 13px;
    }

    .question .speaker {
        font-size: 15px;
    }

    .answer .speaker {
        font-size: 15px;
    }

    .img {
        width: 90%;
        padding: 15px 15px 5px 15px;
    }

    .img:nth-of-type(2){
            width: 70%;
        }

    figcaption {
        font-size: 14px;
        line-height: 1.4;
    }

    .flex_item {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .flex_item .img {
        width: 90%;
        transform: rotate(3deg);
    }

    .profile-img {
        width: 100%;
        padding: 0 30px;
        margin-right: 0;
        margin-bottom: 15px;
    }

    .closing-message {
        margin-top: 0;
        padding-top: 0;
        font-size: 16px;
    }

    .final-quote {
        font-size: 16px;
        margin: 30px 0;
        padding: 15px 0;
    }

    .profile-title {
        font-size: 18px;
    }

    .profile-content {
        font-size: 14px;
        padding: 0 30px;
    }

    /* さらに小さい画面（320px以下）用の対応 */
@media (max-width: 480px) {
    .interview-container {
        padding: 10px;
    }

    .interview-title {
        font-size: 24px;
        letter-spacing: 2px;
    }

    .content-section {
        padding: 15px 10px;
    }

    .name {
        font-size: 24px;
    }

    .tag {
        font-size: 16px;
    }

    .interview-label {
        font-size: 20px;
    }

    .achievement {
        font-size: 16px;
    }

    .intro-text {
        font-size: 14px;
    }

    .highlight-quote {
        font-size: 16px;
    }

    .text {
        font-size: 14px;
    }

    .final-quote {
        font-size: 14px;
    }
}

/* 追加・修正が必要な既存CSSの変更点 */
.interview-container {
    margin: 0 auto;
    max-width: 1024px; /* 元のwidthをmax-widthに変更 */
    padding: 0 30px;
}

.mv_img{
    width: 40%;
    flex-shrink: 0; /* 追加：画像の縮小を防ぐ */
}
}