/* 全体のスタイル */
 body,
 html {
     font-family: 'ヒラギノ角ゴ ProN', 'Zen Kaku Gothic New', sans-serif;
     margin: 0;
     background-color: #f8f8f8;
     overflow-x: hidden;
     /* 横スクロールを防ぐ */
     width: 100%;
     height: auto;
     /* 高さをコンテンツに合わせる */
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 /* コンテナ全体のスタイル */
 .interview-container {
     position: relative;
     /* 絶対配置の基準にする */
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
     /* padding: 20px; */
     /* コンテナ内の余白を調整 */
     margin: 0 auto;
     /* margin-top: 20%; */
     /* margin-bottom: 30%; */
 }

 /* 左側の画像スタイル */
 .interview-image-left {
     width: 60%;
     /* 左側の画像の幅を設定 */
     height: auto;
     display: flex;
     justify-content: flex-start;
     /* 左端に寄せる */
     position: relative;
     /* 動画の位置の基準にするために相対配置 */
 }

 .interview-image-left img {
     width: 100%;
     /* 画像の幅を100%に */
     height: auto;
 }

 /* 右側の画像スタイル */
 .interview-image-right {
     width: 25%;
     /* 右側の画像の幅を設定 */
     height: auto;
     display: flex;
     justify-content: flex-end;
     /* 右端に寄せる */
     position: relative;
     /* relative を使用して位置を調整 */
     bottom: -400px;
     /* 下に30px移動させる */
 }

 .interview-image-right img {
     width: 100%;
     /* 画像の幅を100%に */
     height: auto;
 }


 /* 動画フレームを左の画像の右下に重ねるスタイル */
 .video-container {
     position: absolute;
     /* 絶対配置で左の画像に重ねる */
     left: 45%;
     /* 左の画像の右端付近に位置調整 */
     bottom: -30%;
     /* 左の画像の下部に重ねる */
     width: 37%;
     /* 動画の幅を調整 */
     height: auto;
     z-index: 10;
     /* 画像の上に表示するためにz-indexを設定 */
 }

 /* 動画フレームのスタイル */
 .video-container iframe {
     width: 100%;
     /* 動画をコンテナ内で100%表示 */
     height: 315px;
     /* 必要に応じて高さを調整 */
     border-radius: 8px;
     /* 動画フレームに角丸を追加（オプション） */
 }

 /* レスポンシブ対応 */
 @media (max-width: 768px) {
     .interview-container {
         flex-direction: column;
         /* 画面幅が狭いときは縦に並べる */
         align-items: center;
     }

     .interview-image-left,
     .interview-image-right,
     .video-container {
         width: 100%;
         /* 各要素の幅を100%に */
         position: relative;
         /* 絶対配置を解除 */
         margin-bottom: 20px;
         /* 下にマージンを追加 */
     }

     .video-container {
         left: 0;
         bottom: 0;
         margin: 0;
         /* 中央揃えの余白を解除 */
     }
 }

/* 画像の上に表示するテキスト要素 */
.banner-text {
    position: absolute;
    /* 親要素を基準に絶対配置 */
    left: 9%;
    /* 左端から20pxの位置に配置 */
    bottom: 20px;
    /* 下端から20pxの位置に配置 */
    text-align: left;
    /* テキストを左揃え */
    color: #fff;
    /* テキストの色を白に設定 */
    top: 27%;
    height: 10%;
}

/* 見出しのスタイル */
.banner-text h2 {
    font-size: 1.2rem;
    /* 見出しのフォントサイズを調整 */
    font-weight: bold;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #fff;
}

/* サブテキストのスタイル */
.banner-text p {
    font-size: 2.5rem;
    /* サブテキストのフォントサイズを調整 */
    font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
    font-weight: 700;
}

 .green_line {
     position: absolute;
     bottom: -180px;
     left: 0;
     width: 100%;
     height: 300px;
     background-color: #EDF9E7;
     z-index: -1;
 }


 /* ストーリー画像の配置 */
 .story-images {
     display: flex;
     justify-content: center;
     /* 画像を中央揃え */
     gap: 10px;
     /* 画像間の間隔を設定 */
     margin: 30px auto;
     /* 上下に30pxの余白を設定 */
     padding: 0 20px;
     /* 左右の余白を追加 */
     vertical-align: bottom;
     /* 画像を下端に揃える */
 }

 /* 各ストーリーカードのスタイル */
 .story-card {
    position: relative;
    width: 250px;
    /* 各カードの幅を調整 */
    overflow: hidden;
    transition: transform 0.3s ease; /* 滑らかなアニメーションを追加 */
}

/* カード画像のスタイル */
.story-card img {
    width: 100%;
    /* カード幅に合わせる */
    height: auto;
    vertical-align: bottom;
    /* 画像を下端に揃える */
}

.story-card:hover {
   transform: scale(1.1); /* ホバー時に拡大 */
   transition: transform 0.4s ease; /* ホバー時の動きを滑らかに */
}


 /* .story-card:first-of-type img {
     width: 110%;
     height: auto;
 } */


 .interview-section {
     margin-top: 15%;
     margin-bottom: 30%;
 }

 /* 資格リストと見出し全体のコンテナ */
 .qualification {
     /* position: relative; */
     /* 相対配置 */
     width: 70%;
     /* コンテナの幅を設定 */
     padding: 20px;
     margin: 10px auto;
     /* 上下に50pxの余白を取り、中央揃え */
     border-left: 1px solid #323232;
     /* 左側の緑のライン */
     background-color: #f5f5f5;
     /* 背景を薄いグレーに */
     /* transform: translate(-15%, 0%); */
     /* 右に10%、上に20px移動 */
 }

 .qualification-list {
     font-size: 0.8rem;
     font-family: 'Noto Sans JP', sans-serif;
     line-height: 1.8;
     margin: 0 0 30px 20px;
     padding: 0;
     list-style-type: none;
     margin-bottom: 2px;
     /* デフォルトのリストスタイルを消す */
 }

 .qualification-list li {
     position: relative;
     padding-left: 20px;
     margin-bottom: 10px;

 }

 .qualification-list li::before {
     content: "—";
     /* 各リスト項目の前にダッシュを追加 */
     position: absolute;
     left: 0;
     color: #333;
 }

 /* INTERVIEW 見出しのスタイル */
 .interview-heading {
     background-color: #4BC314;
     font-family: 'Poppins', sans-serif;

     /* 緑色の背景 */
     color: #ffffff;
     /* 白文字 */
     font-weight: 600;
     font-size: 1.25rem;
     display: inline-block;
     padding: 3px 12px;
     margin-bottom: 20px;

    letter-spacing: 0.1rem;
 }

 /* メイン見出しのスタイル */
 .interview-main-title {
     font-family: "Zen Kaku Gothic New", system-ui, sans-serif;

     font-size: 2.5rem;
     font-weight: 700;
     color: #4BC314;
     /* 緑色の文字 */
     margin-bottom: 14px;
     line-height: 3rem;
 }

 /* サブタイトルのスタイル */
 .sub-title {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1rem;
    margin-bottom: 30px;
    color: #323232;
    line-height: 1.5rem;
    letter-spacing: 0.075rem;
 }

/* デフォルトで非表示にする（スマホ以外の画面用） */
#development-story {
    display: none;
    margin-bottom: 80px;
}

/* スマホのときに表示するためのスタイル */
@media (max-width: 768px) {
    .pc {
        display: none;
    }
    #development-story {
        display: block;
        /* スマホ時のみ表示 */
    }

    .iwasaki-top-sp {
        width: 100%;
        /* 画像の幅を100%にしてコンテナ内に収まるように */
    }

    .qualification-list {
        padding: 0 10px;
        /* スマホ向けにリストの左右のパディングを設定 */
    }

    .interview-main-title {
        font-size: 1.2rem;
        text-align: left;
        margin: 20px 0;
        /* 見出しのスタイル調整 */
    }

    .sub-title {
        text-align: left;
        font-size: 0.9rem;
        padding: 0 20px;
        /* サブタイトルのスタイル調整 */
    }

    .video-container-sp {
        width: 100%;
        margin: 20px auto;
        /* 動画コンテナの幅を100%にし、中央に配置 */
    }

    .video-container-sp iframe {
        width: 100%;
        height: auto;
        /* iframeの幅を100%にして高さを自動調整 */
    }

    .qualification-list li {
        position: relative;
        padding-left: 20px;
        margin-bottom: 2px;
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 400;
    }
}