@charset "UTF-8";


/* トップページ */
/* メインビジュアルエリアのスタイル */
.mv {
    min-height: 960px; /* PCでの固定高さ */
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 1s ease-in-out;
    position: relative; 

    display: flex;
    flex-direction: column; /* ★変更なし: 子要素を縦に並べる */
    justify-content: space-between; /* ★変更: mv-contentを上、mv-content2を下へ分散配置 */
    align-items: center; /* 水平方向の中央寄せ */

    color: #fff;
}
/* メインビジュアル内のコンテンツのスタイル */
.mv-content {
    z-index: 1;
    padding: 280px 20px 20px; /* ★変更: padding-top を 80px に、padding-bottom を 20px に調整 */
    width: 1080px;
    margin: 0 auto;
    text-align: center;
}

.mv-content h2 {
    font-family: 'Shippori Mincho', serif;
    font-size: 3em; /* 見出しのフォントサイズ */
    margin-bottom: 20px;
    color: white; /* テキスト色を白に */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* 読みやすくするために影をつける */
}

.mv-content p {
    font-size: 1.5em; /* 段落のフォントサイズ */
    margin-bottom: 40px;
    color: white; /* テキスト色を白に */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.mv-content p span {
    font-size: 0.8em; /* 段落のフォントサイズ */
    font-family: "Libertinus Mono", monospace;
    font-weight: 400;
    font-style: normal;
}

.mv-content .btn-contact {
    display: inline-block;
    background-color: #ff6600; /* ボタンの背景色 */
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 60px;
    font-size: 1.2em;
    transition: background-color 0.3s ease;
}

.mv-content .btn-contact:hover {
    background-color: #e65c00;
}

/* PCの場合（@mediaの外） */
.mv-content2 {
    width: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7), transparent);
    padding: 20px;
    box-sizing: border-box;
    /* margin-top: auto; の削除は前回の変更で維持 */

    display: flex; /* ★追加: mv-content2 を Flexbox コンテナにする */
    align-items: center; /* ★追加: 垂直方向の中央揃え */
    justify-content: flex-start; /* ★追加: 子要素を左寄せで配置 */
    gap: 20px; /* ★追加: banner と info の間に隙間を作る（必要に応じて調整） */
}

/* PCの場合（@mediaの外） */
.mv-content2-banner {
    text-align: left; /* PCでの左寄せを維持 */
    margin-bottom: 0; /* ★変更: Flexboxで余白を管理するため削除 */
    flex-shrink: 0; /* ★追加: バナーが縮まないようにする */
}

.mv-content2-banner img {
    max-width: 250px; /* PCでの画像の最大幅を維持 */
    height: auto;
    display: block; /* ★変更: Flexアイテム内ではblockの方が扱いやすいため */
    margin: 0; /* ★変更: 左寄せなのでmargin: 0 auto; は削除 */
}

.mv-content2-info {
    /* margin-left: auto; は削除: Flexboxで並べるため */
    /* width: auto; は削除: Flexアイテムのデフォルト動作のため */
    /* max-width: 50%; は削除: Flexアイテムとして自動調整されるため */
    flex-grow: 1; /* ★追加: 残りのスペースを埋めるように info を拡張 */
    text-align: left; /* ★変更: infoブロック内のテキストを左寄せにする */
}

.mv-content2-info ul {
    text-align: left; /* ★変更: リスト内のテキストを左寄せに戻す */
}

.mv-content2-info li {
    text-align: left; /* ★変更: 各リストアイテムのテキストを左寄せに戻す */
}

/* PCの場合（@mediaの外） */
.mv-content2-info a {
    color: white; /* テキスト色を白に */
    text-decoration: none;
    display: inline-block; /* 擬似要素の基準となるように */
    position: relative; /* ::after擬似要素の基準位置 */
    padding-bottom: 2px; /* 下線とテキストの間に少しスペース */
    overflow: hidden; /* 下線アニメーションが要素からはみ出さないように */
}

.mv-content2-info a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px; /* 下線の太さ */
    background-color: white; /* 下線の色 */
    transform: translateX(-100%); /* 初期状態では左に100%ずらして見えなくする */
    transition: transform 0.3s ease-out; /* アニメーションの速度とイージング */
}

.mv-content2-info a:hover::after {
    transform: translateX(0); /* ホバー時に元の位置に戻して表示 */
}


main {
    background-color: #f2ecde; /* コンテンツの背景色 */
}

/* --- Shape Life Section --- */
.shape-life-section {
    padding: 180px 20px; /* 上下の余白と左右のpadding */
    text-align: center; /* 全体のテキストを中央寄せ */
}

.shape-life-section .container {
    max-width: 1280px; /* コンテンツの最大幅を設定 */
    margin: 0 auto; /* 中央寄せ */
}

.shape-life-section .section-title-en {
    font-size: 1.8em; /* 英語タイトルのフォントサイズ */
    color: #333; /* テキスト色 */
    margin-bottom: 10px;
    font-weight: bold;
    text-transform: uppercase; /* 大文字に変換 */
    text-align: center;
    font-family: "Libertinus Mono", monospace;
    font-weight: 400;
    font-style: normal;
}

.shape-life-section .section-subtitle {
    font-family: 'Shippori Mincho', serif; /* 明朝体 */
    font-size: 2.5em; /* サブタイトルのフォントサイズ */
    color: #333;
    margin-bottom: 15px;
    line-height: 1.4;
    text-align: center;
}

.shape-life-section .section-catchphrase {
    font-size: 1.2em; /* キャッチコピーのフォントサイズ */
    color: #666;
    margin-bottom: 40px; /* 画像との間にスペース */
}

.shape-life-section .section-image {
    margin-bottom: 40px; /* 説明テキストとの間にスペース */
    text-align: center;
}

.shape-life-section .section-image img {
    max-width: 100%; /* 画像が親要素からはみ出さないように */
    height: auto; /* アスペクト比を維持 */
    display: block; /* 余分な下余白をなくす */
    margin: 0 auto; /* 画像を中央寄せ */
}

.shape-life-section .section-description p {
    font-size: 1.1em; /* 説明テキストのフォントサイズ */
    color: #555;
    line-height: 1.8; /* 行の高さ */
    max-width: 700px; /* 説明テキストの最大幅 */
    margin: 0 auto; /* 中央寄せ */
        text-align: center;
        font-family: 'Shippori Mincho', serif; /* 明朝体 */
}

/* --- Image Gallery Section --- */
.image-gallery-section {
    padding: 80px 20px; /* 上下の余白と左右のパディング */
    /* PCでは中央寄せ、最大幅960px */
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box; /* paddingを含めて幅を計算 */
}

.gallery-container {
    display: flex;
    flex-direction: column; /* ギャラリーアイテムを縦に並べる */
    gap: 60px; /* 各ギャラリーアイテム間の余白 */
}

.gallery-item {
    display: flex;
    align-items: center; /* 画像とテキストを垂直方向中央に揃える */
    opacity: 0; /* JSでフェードインさせるため初期値は透明 */
    transform: translateY(20px); /* わずかに下から浮き上がるように */
    transition: opacity 1s ease-out, transform 1s ease-out; /* アニメーション設定 */
}

.gallery-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.gallery-image {
    flex-shrink: 0; /* 画像が縮まないようにする */
    overflow: hidden; /* 画像の枠からはみ出るのを防ぐ */
    width: 60%; /* PCでの画像の幅 */
    height: auto; /* 画像の高さは自動調整 */
}

.gallery-image img {
    width: 100%;
    height: auto;
    display: block;
}

.gallery-text {
    flex-grow: 1; /* 残りのスペースを埋める */
    padding: 0 20px; /* テキストの左右パディング */
    color: #333; /* テキストの色 */
    font-size: 1.1rem;
    line-height: 1.8;
}

/* 縦書きテキストのスタイル */
.vertical-text {
    writing-mode: vertical-rl; /* 縦書き（右から左へ） */
    -webkit-writing-mode: vertical-rl; /* Safari対応 */
    -ms-writing-mode: vertical-rl; /* IE対応 */
    text-orientation: upright; /* 英数字を縦向きに表示（一部ブラウザで効果） */
    white-space: nowrap; /* テキストの折り返しを禁止 */
    line-height: 2.2; /* 縦書き時の行間 */
    letter-spacing: 0.1em; /* 文字間隔 */
    font-size: 2.4rem; /* ベースのフォントサイズ */
    margin-right: 60px;
}
.vertical-text p {
    margin: 0; /* pタグのデフォルトマージンをリセット */
    text-align: left; /* 縦書き内でのテキストの揃え方 (左端揃えが自然) */
    padding: 0; /* pタグのデフォルトパディングをリセット */
    font-family: 'Shippori Mincho', serif;
}

/* --- 画像が左、テキストが右 --- */
.gallery-item.item-left-text-right {
    flex-direction: row; /* デフォルトの並び順 (画像が左、テキストが右) */
    padding-left: 20px; /* 左余白20px */
}

.gallery-item.item-left-text-right .gallery-image {
    margin-right: 20px; /* 画像とテキスト間の余白 */
}

/* --- 画像が右、テキストが左 --- */
.gallery-item.item-right-text-left {
    flex-direction: row-reverse; /* 画像が右、テキストが左になるように反転 */
    padding-right: 0; /* 右端余白なし */
}

.gallery-item.item-right-text-left .gallery-image {
    margin-left: 0; /* 画像とテキスト間の余白 (右端に詰めるため) */
    margin-right: 0; /* 余計なマージンを消す */
}

.gallery-item.item-right-text-left .gallery-text {
    text-align: right; /* 縦書きテキストが左側に寄るように */
    padding-right: 80; /* テキストの右パディングをリセット */
    padding-left: 20px; /* テキストの左パディング (画像との間隔) */
}


/* --- 料金セクション --- */
.price-section {
    padding: 80px 20px; /* 上下の余白と左右のパディング */
    max-width: 1280px; /* PCでの最大幅 */
    margin: 0 auto; /* 中央寄せ */
    box-sizing: border-box;
}

/* 料金セクションヘッダー (Price / 料金) */
.price-header {
    display: flex;
    align-items: flex-end; /* 垂直方向の下端に揃える */
    margin-bottom: 60px; /* カードとの間に余白 */
    justify-content: flex-start; /* 左寄せ */
}

.price-title-vertical {
    /* ★★★ ここから修正 ★★★ */
    /* 縦書きのプロパティを削除し、通常の横書きに戻す */
    /* writing-mode: vertical-rl; */
    /* -webkit-writing-mode: vertical-rl; */
    /* -ms-writing-mode: vertical-rl; */
    /* text-orientation: upright; */
    /* white-space: nowrap; */ /* 必要なら残してもOKですが、通常は不要 */
    
    line-height: 1; /* 行間を詰める */
    font-size: 2.5em; /* Priceのフォントサイズ */
    font-weight: bold;
    color: #333;
    padding-right: 20px; /* 「料金」との間隔 */
    /* ★★★ ここまで修正 ★★★ */
}

.price-title-vertical p {
    margin: 0; /* デフォルトマージンをリセット */
    font-family: "Libertinus Mono", monospace;
    font-weight: 400;
    font-style: normal;
}

.price-title-horizontal h2 {
    font-family: 'Shippori Mincho', serif; /* 明朝体 */
    font-size: 2.2em; /* 横書き料金のフォントサイズ */
    color: #333;
    margin: 0; /* デフォルトマージンをリセット */
    padding-bottom: 5px; /* 下端揃えの微調整 */
}

/* 料金プランカードコンテナ */
.price-plans-container {
    display: flex;
    flex-wrap: wrap; /* 必要に応じて折り返す */
    justify-content: center; /* カードを中央寄せ */
    gap: 40px; /* カード間の余白 */
}

/* 各料金プランカード */
.price-card {
    border: 3px solid #000;
    border-radius: 30px; /* 角丸 */
    padding: 30px;
    width: calc(50% - 20px); /* 2列表示でギャップを考慮 */
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* 中身を縦に並べる */
    justify-content: space-between; /* ヘッダー・コンテンツ・フッターを上下に配置 */
    min-height: 300px; /* カードの最低高さを設定 (コンテンツ量に合わせて調整) */
}

.price-card .card-header {
    display: flex;
    justify-content: space-between; /* タイトルと回数券を左右に */
    align-items: center; /* 垂直方向中央 */
    margin-bottom: 20px;
}

.price-card .card-title-en {
    font-size: 1.8em;
    color: #ff0000; /* 赤文字 */
    font-weight: bold;
    margin: 0;
    font-family: "Libertinus Mono", monospace;
    font-weight: 400;
    font-style: normal;
}

.price-card .card-title-jp {
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
    margin: 0;
    white-space: nowrap;
}

.price-card .card-content {
    flex-grow: 1; /* 残りのスペースを埋める */
    text-align: center; /* プラン内容を中央寄せ */
    margin-bottom: 30px; /* フッターとの間に余白 */
    display: flex; /* pタグを中央揃えにするため */
    align-items: center; /* 垂直中央寄せ */
    justify-content: center; /* 水平中央寄せ */
}

.price-card .card-content p {
    font-size: 1em;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

.price-card .card-footer {
    display: flex;
    justify-content: space-between; /* 回数とリンクを左右に */
    align-items: flex-end; /* 下端に揃える */
    padding-top: 10px; /* 必要に応じて上部に余白 */
}

.price-card .ticket-options {
    font-size: 1.1em;
    color: #333;
    font-weight: bold;
    margin: 0;
    white-space: nowrap;
}

/* 詳しくはこちらリンク */
.details-link {
    font-size: 1.1em;
    color: #333;
    text-decoration: none; /* デフォルトの下線をなくす */
    position: relative; /* 下線アニメーションの基準 */
    padding-bottom: 3px; /* 下線との間にスペース */
    white-space: nowrap;
}

.details-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0; /* 初期状態では幅0 */
    height: 1px; /* 下線の太さ */
    background-color: #000; /* 下線の色 */
    transition: width 0.3s ease-out; /* アニメーション設定 */
}

.details-link:hover::after {
    width: 100%; /* ホバー時に幅100%に */
}


/* --- 価格セクションのボタンコンテナ --- */
.price-section-button-container {
    text-align: center; /* ボタンを中央寄せ */
    margin-top: 60px; /* 上のカードとの間隔 */
}

.btn-more-details {
    display: inline-block; /* ボタンのように振る舞わせる */
    padding: 15px 40px; /* PCでの内側の余白 */
    background-color: #be9c4e; /* ボタンの背景色 */
    color: #fff; /* テキスト色 */
    text-decoration: none; /* 下線なし */
    border-radius: 60px; /* 角丸 */
    font-size: 1.1em; /* PCでのフォントサイズ */
    font-weight: bold;
    transition: background-color 0.3s ease; /* ホバーアニメーション */
}

.btn-more-details:hover {
    background-color: #555; /* ホバー時の背景色 */
}


/* --- 全画面背景画像セクション --- */
.full-screen-image-section {
    position: relative; /* コンテンツの配置基準 */
    width: 100%;
    /* overflow: hidden; は通常不要ですが、もし必要なら残してください */

    /* ★★★ ここから変更 ★★★ */
    background-image: url('../images/index/your-background-image.png'); /* 背景画像ファイルのパスを指定 */
    background-size: cover; /* 背景画像が要素を覆うように拡大・縮小 */
    background-position: center; /* 背景画像を中央に配置 */
    background-repeat: no-repeat; /* 背景画像を繰り返さない */
    background-attachment: scroll; /* 背景が固定しないようにスクロールに追従 */
    /* ★★★ ここまで変更 ★★★ */
}

/* ★★★ このルールは削除してください ★★★ */
/* .full-screen-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
} */
/* ★★★ 削除箇所はここまで ★★★ */


.full-screen-image-section .section-content {
    position: relative; /* コンテンツを背景画像の上に配置 */
    z-index: 1;
    padding: 180px 20px; /* 上下パディング */
    text-align: center; /* 中身を中央寄せ */
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box; /* padding を含めて高さ計算 */
    min-height: 100vh; /* 画面の高さいっぱいにする (必要に応じて) */
    justify-content: center; /* 垂直方向中央寄せ */
}

.full-screen-image-section .image-title {
    font-size: 2.8em;
    color: #000;
}

.full-screen-image-section .subtitle {
    font-size: 2.4em;
    color: #000;
    margin-bottom: 40px;
}

.full-screen-image-section .product-image {
    margin-bottom: 40px;
    max-width: 80%; /* 必要に応じて調整 */
}

.full-screen-image-section .product-image img {
    max-width: 100%;
    height: auto;
    display: block;
}

.full-screen-image-section .product-description {
    color: #000;
    font-size: 2.4em;
    line-height: 1.8;
    margin-bottom: 60px;
    max-width: 700px;
}

.full-screen-image-section .button-container .btn-details {
    display: inline-block;
    padding: 15px 100px;
    background-color: #ef5408;
    color: #fff;
    text-decoration: none;
    border-radius: 30px; /* 角丸 */
    font-size: 1.2em;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.full-screen-image-section .button-container .btn-details:hover {
    background-color: #ca4305; /* ホバー時の色 */
}

/* --- JOIN US セクション --- */
.join-us-section {
    padding: 80px 20px; /* 上下の余白と左右のパディング */
    max-width: 1280px; /* PCでの最大幅 */
    margin: 0 auto; /* 中央寄せ */
    box-sizing: border-box;
}

/* ヘッダー部分は price-header と price-title-vertical/horizontal のCSSを流用 */
/* .join-us-header { ... } は price-header クラスを共有するため個別定義不要 */
.join-us-title-en {
    /* price-title-vertical のスタイルを適用 */
    /* Priceの文字が横向きになるように、縦書きCSSを削除した状態を想定 */
}

.join-us-title-jp {
    /* price-title-horizontal のスタイルを適用 */
}

/* PC時の2カラムレイアウト用コンテナ */
.join-us-content-wrapper {
    display: flex;
    justify-content: space-between; /* 左右に配置 */
    align-items: flex-start; /* 上端揃え */
    gap: 40px; /* 左右の余白 */
    margin-top: 60px; /* ヘッダーとの間隔 */
}

.join-us-text-content {
    flex: 1; /* 残りのスペースを埋める */
    max-width: 60%; /* テキストコンテンツの最大幅を制限 */
    text-align: left; /* テキストは左寄せ */
}

.join-us-intro-text {
    font-size: 1.3em;
    font-weight: bold;
    color: #333;
    margin-bottom: 30px;
    line-height: 1.6;
}

.join-us-image {
    margin-bottom: 30px;
    /*padding: 0 20px;*/ /* スマホ時のサイド余白を考慮しPCでも設定 */
    box-sizing: border-box;
}

.join-us-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 15px; /* 角丸 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影を追加 */
}

.join-us-reserve-text {
    font-size: 1.1em;
    color: #555;
    line-height: 1.6;
}

/* ボタン群のコンテナ */
.join-us-buttons {
    flex-shrink: 0;
    width: 35%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-end;
}

/* LINEボタンの共通スタイル */
.line-button {
    display: flex;
    align-items: center; /* 垂直方向中央揃え */
    /* justify-content: center; を削除またはコメントアウト */
    justify-content: flex-start; /* ★追加: まず要素を左端に寄せる */
    
    width: 100%;
    padding: 12px 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 60px;
    text-decoration: none;
    color: #333;
    font-size: 1em;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.line-button:hover {
    background-color: #f5f5f5;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.line-icon {
    font-size: 24px;
    color: #00C300;
    margin-right: auto; /* ★変更: アイコンの右側の余白を自動で取り、テキストを中央に押し出す */
    margin-left: 0; /* ★追加: 念のため左マージンをリセット */
}

/* ボタンのテキスト（span）が中央に来るように */
.line-button span {
    flex-grow: 1; /* ★追加: テキストが残りのスペースを埋めるようにする */
    text-align: center; /* ★追加: テキスト自体を中央寄せにする */
    margin-right: 24px; /* ★追加: アイコンの幅分（またはそれ以上）右に余白を設けて、テキストが中央に来るように調整 */
    /* margin-right の値は、アイコンのサイズとアイコン右のマージン(margin-right: 10px;)を考慮して調整してください。
       例: アイコンサイズ24px + アイコン右マージン10px = 34px。 これをボタンの右側に持たせてテキストを中央にする。
       今回の場合は、.line-icon に margin-right: auto; を指定しているので、アイコン自体は左端に寄せられます。
       その後、span を flex-grow: 1; で中央に広げ、span の右側に margin-right を追加することで、ボタン全体の中央に近寄せる調整ができます。
       ここでは、アイコンのサイズと同じ24pxを仮で設定しています。
    */
}


/* --- NEWS セクション --- */
.news-section {
    background-color: #000; /* 背景色 */
    color: #fff; /* 文字色 */
    padding: 120px 20px; /* 上下パディング、左右パディング */
    box-sizing: border-box; /* paddingを含めて幅を計算 */
}

.news-container {
    max-width: 1280px; /* PCでの最大幅 */
    margin: 0 auto; /* 中央寄せ */
}

/* ヘッダー部分は price-header と price-title-vertical/horizontal のCSSを流用 */
.news-header {
    /* price-header クラスを共有するため、flexboxのレイアウトはprice-headerのものをそのまま使う */
    /* Priceセクションのheader CSSと全く同じにしたい場合は、news-headerの代わりにprice-headerクラスをHTMLに追加しているため、ここでは特別なCSSは不要です。
       ただし、背景色や文字色が異なるため、必要に応じてここで上書きします。
    */
    align-items: flex-end; /* 垂直方向の下端に揃える */
    justify-content: flex-start; /* 左寄せ */
    margin-bottom: 60px; /* PCレイアウト時のニュースリストとの間隔 */
}

.news-title-en {
    /* price-title-verticalのCSSを流用し、文字色を上書き */
    color: #fff !important; /* 白文字 */
    padding-right: 20px; /* 「お知らせ」との間隔 */
    font-size: 2.5em; /* Priceと同じフォントサイズ */
    font-weight: bold;
    line-height: 1;
}

.news-title-jp {
    /* price-title-horizontalのCSSを流用し、文字色を上書き */
    color: #fff !important; /* 白文字 */
    font-size: 1.2em; /* 料金と同じフォントサイズ */
    font-family: 'Shippori Mincho', serif;
    margin: 0;
    padding-bottom: 5px;
}

/* PC時の2カラムレイアウト用コンテナ */
.news-content-wrapper {
    display: flex;
    justify-content: flex-start; /* 左寄せ */
    align-items: flex-start; /* 上端揃え */
    gap: 40px; /* タイトルとリストの間の余白 */
}

/* NEWSリスト（右側） */
.news-list {
    list-style: none; /* デフォルトのリストスタイルを解除 */
    padding: 0; /* デフォルトパディングを解除 */
    margin: 0; /* デフォルトマージンを解除 */
    flex: 1; /* 残りのスペースを埋める */
    max-width: calc(100% - 2.5em - 20px - 40px); /* NEWSタイトル、その右の余白、gapを考慮 */
    /* 上記max-widthの計算: 親要素の幅 - (NEWSタイトルの幅 + NEWSタイトルのpadding-right + news-content-wrapperのgap)
       NEWSタイトルの幅は、フォントサイズ(2.5em)と文字数(NEWS)で変わるので、em単位で直接指定した方が正確です。
       ここでは仮に '2.5em' をNEWSの幅の目安としています。実際の表示で調整してください。
       または、news-header を flex-shrink: 0; width: auto; にして、news-content-wrapper の flex-wrap を利用する方がレスポンシブには適しています。
    */
}

.news-list li {
    margin-bottom: 20px; /* 各リストアイテムの下余白 */
}

.news-list li:last-child {
    margin-bottom: 0; /* 最後のリストアイテムの下余白はなし */
}

.news-link {
    display: flex; /* 日付とテキストを横並びに */
    align-items: flex-start; /* 垂直方向の上端揃え */
    text-decoration: none; /* デフォルトの下線をなくす */
    color: #fff; /* 文字色 */
    position: relative; /* 下線アニメーションの基準 */
    padding-bottom: 3px; /* 下線とのスペース */
}

.news-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0; /* 初期状態では幅0 */
    height: 1px; /* 下線の太さ */
    background-color: #fff; /* 下線の色 (白) */
    transition: width 0.3s ease-out; /* アニメーション設定 */
}

.news-link:hover::after {
    width: 100%; /* ホバー時に幅100%に */
}

.news-date {
    flex-shrink: 0; /* 日付が縮まないように */
    font-size: 0.9em;
    margin-right: 20px; /* 日付とタイトルの間の余白20px */
    white-space: nowrap; /* 日付が改行されないように */
}

.news-text {
    flex-grow: 1; /* 残りのスペースを埋める */
    font-size: 1em;
    line-height: 1.6;
}

/* --- VOICE セクション --- */
.voice-section {
    /* background-color: #000; (previously removed) */
    color: #000; /* Main text color for the section is black */
    padding: 80px 20px;
    box-sizing: border-box;
}

.voice-container {
    max-width: 1280px; /* PCでの最大幅 */
    margin: 0 auto; /* 中央寄せ */
}

/* ヘッダー部分は price-header と price-title-vertical/horizontal のCSSを流用 */
.voice-header {
    display: flex; /* ★追加: 明示的にFlexboxを適用 */
    align-items: flex-end; /* 垂直方向の下端に揃える */
    justify-content: flex-start; /* 左端から開始 */
    margin-bottom: 60px; /* ヘッダーの下の余白 */
    flex-wrap: nowrap; /* ★追加: 改行を禁止（PCの場合） */
}

.voice-title-en {
    /* price-title-verticalのスタイルを継承しますが、色を上書きします */
    color: #000; /* ★変更点: 英語タイトルの文字色を黒に */
    padding-right: 20px;
    font-size: 2.5em;
    font-weight: bold;
    line-height: 1;
}

.voice-title-jp {
    /* price-title-horizontalのスタイルを継承しますが、色を上書きします */
    color: #000; /* ★変更点: 日本語サブタイトルの文字色を黒に */
    font-size: 2.2em;
    font-family: 'Shippori Mincho', serif;
    margin: 0;
    padding-bottom: 5px;
}

/* お客様の声カードのラッパー (PC時の横並び用) */
.voice-cards-wrapper {
    display: flex;
    flex-wrap: wrap; /* カードが複数行になる可能性を考慮 */
    justify-content: center; /* カードを中央寄せ */
    gap: 30px; /* カード間の余白 */
    margin-bottom: 80px;
}

/* 各お客様の声カード */
.voice-card {
    color: #fff;
    /* PCでは3列表示 */
    width: calc(33.333% - 20px); /* ★変更: 3列表示でギャップを考慮 (30pxギャップの場合) */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.voice-image-frame {
    background-color: #fff; /* 白い背景枠 */
    padding: 20px; /* 画像の周りのパディング */
    border-radius: 5px; /* 枠の角丸 */
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2); /* 白い影 */
    margin-bottom: 10px; /* 画像とテキストの間隔 */
}

.voice-main-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* 縦長画像をきれいに表示 */
    /* max-height: 400px; /* 必要に応じて画像の最大高さを制限 */
}

.voice-text-content {
    flex-grow: 1; /* テキストコンテンツが残りのスペースを埋める */
    color: #000;
    display: flex;
    flex-wrap: wrap;
}

.voice-story {
    color: #000; /* ★追加: 体験談テキストの色を黒に */
    font-size: 1em;
    line-height: 1.8;
    margin-bottom: 10px;
    text-align: left; /* テキストは左寄せ */
}

.voice-user-info {
    display: flex;
    align-items: center; /* 垂直方向中央揃え */
    margin: 20px 0;
}

.user-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%; /* 正円に */
    object-fit: cover; /* 画像が正円内に収まるように */
    margin-right: 20px; /* 右に余白20px */
    flex-shrink: 0; /* 縮まないように */
}

.user-name {
    color: #000; /* ★追加: ユーザー名のテキスト色を黒に */
    font-size: 1.2em;
    font-weight: bold;
    white-space: nowrap; /* 名前が改行されないように */
}

.voice-tags {
    display: flex;
    flex-wrap: wrap; /* タグが複数行になる場合 */
    gap: 10px; /* タグ間の余白 */
    margin-bottom: 20px; /* ボタンとの間隔 (PC時) */
}

.voice-tag {
    border: 2px solid #d8cfa7; /* 枠線 */
    background-color: #fff; /* 背景色白 */
    color: #000; /* 文字色黒 */
    border-radius: 60px; /* 角丸 */
    padding: 8px 18px; /* 内側の余白 */
    font-size: 0.9em;
    font-weight: bold;
    white-space: nowrap; /* タグが改行されないように */
}

/* ボタンリンク */
.voice-button-container {
    text-align: center;
}

.btn-voice-details {
    display: inline-block;
    padding: 15px 40px;
    background-color: #be9c4e; /* 背景色 */
    color: #fff; /* 文字色 */
    text-decoration: none;
    border-radius: 30px; /* 角丸 */
    font-size: 1.2em;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.btn-voice-details:hover {
    background-color: #a3873f; /* ホバー時の色 */
}

/* --- Design Yourself セクション --- */
.design-yourself-section {
    position: relative;
    width: 100%;
    padding: 180px 20px; /* 上下180pxのパディング */
    box-sizing: border-box;
    text-align: center; /* 中身を中央寄せ */
    color: #fff; /* 全体の文字色を白に */
    background-image: url('../images/index/design-yourself-hbackground-image.png'); /* ★ 追加: 背景画像 */
    background-size: cover; /* ★ 追加: 背景画像をカバーするように */
    background-position: center; /* ★ 追加: 背景画像を中央に配置 */
    background-repeat: no-repeat; /* ★ 追加: 背景画像を繰り返さない */
}

.design-yourself-content {
    max-width: 1280px; /* コンテンツの最大幅を制限 */
    margin: 0 auto; /* 中央寄せ */
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央に配置 */
}

.design-yourself-text-jp {
    font-size: 1.6em;
    line-height: 1.8;
    margin-bottom: 40px; /* 次の英語テキストとの間隔 */
    font-weight: bold;
}

.design-yourself-text-en {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 60px; /* 画像との間隔 */
    opacity: 0.9; /* 少し透過させて読みやすく */
    font-family: "Libertinus Mono", monospace;
    font-weight: 400;
    font-style: normal;
}

.design-yourself-image-container {
    padding-top: 100px; /* 画像の上100pxの余白 */
    padding-bottom: 100px; /* 画像の下100pxの余白 */
    width: 100%; /* コンテナの幅を100%に */
    max-width: 800px; /* 画像の最大幅を制限 */
    box-sizing: border-box;
}

.design-yourself-image {
    max-width: 100%; /* 親要素の幅に合わせて画像サイズを調整 */
    height: auto; /* アスペクト比を維持 */
    display: block; /* 余分なスペースをなくす */
    margin: 0 auto; /* 画像を中央に配置 */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* 影を追加 */
}

/* ボタンリンク */
.design-yourself-button-container {
    margin-top: 60px; /* 画像との間隔 */
}

.btn-trainer-intro {
    display: inline-block;
    padding: 15px 40px;
    background-color: #000; /* 背景色: 黒 */
    color: #fff; /* 文字色: 白 */
    text-decoration: none;
    border-radius: 30px; /* 角丸 */
    font-size: 1.2em;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.btn-trainer-intro:hover {
    background-color: #333; /* ホバー時の色を少し明るく */
}

/* --- FAQ セクション --- */
.faq-section {
    position: relative;
    width: 100%;
    padding: 180px 20px; /* 上下180pxのパディング */
    box-sizing: border-box;
    text-align: center; /* セクション全体のテキストを中央寄せ */
    color: #333; /* デフォルトの文字色を黒に (背景なしのため) */
    /* background-color はなし */
}

.faq-container {
    max-width: 1280px; /* コンテンツの最大幅を制限 */
    margin: 0 auto; /* 中央寄せ */
    display: flex; /* 子要素（ヘッダー、説明文、ボタン）を縦に並べるため */
    flex-direction: column;
    align-items: center; /* 水平方向の中央に配置 */
}

.faq-header {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 10px; /* ★変更: 「FAQ」と「よくあるご質問」の間の余白を縮める */
    margin-bottom: 30px;
    flex-wrap: nowrap;
}

/* FAQセクション固有のタイトル色 (content-title-vertical/horizontalを上書き) */
.faq-title-en {
    color: #333; /* 黒文字 */
}

.faq-title-jp {
    color: #333; /* 黒文字 */
}

.faq-description {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 60px; /* ボタンとの間隔 */
}

/* ボタンリンク */
.faq-button-container {
    /* 中央寄せは親要素の text-align: center; または align-items: center; で処理される */
}

.btn-faq-details {
    display: inline-block;
    padding: 15px 80px;
    background-color: #d5cb9f; /* 背景色 */
    color: #000; /* 文字色 */
    text-decoration: none;
    border-radius: 30px; /* 角丸 */
    font-size: 1.2em;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.btn-faq-details:hover {
    background-color: #c0b88d; /* ホバー時の色 */
}

.content-header {
    display: flex;
    align-items: flex-end;
    margin-bottom: 60px;
    justify-content: flex-start;
}

.content-title-horizontal {
    font-size: 2.2em; /* PCでの基本フォントサイズ */
    font-family: 'Shippori Mincho', serif; /* フォントファミリー共通化 */
    margin: 0;
    padding-bottom: 5px;
    color: #333; /* ★変更点: デフォルトの文字色を#333に設定（Priceセクションのデフォルト色） */
    flex-shrink: 0; /* 要素が縮まないようにする (PCレイアウト用) */
    white-space: nowrap; /* テキストが改行されないようにする (PCレイアウト用) */
}

.content-title-horizontal h2 {
        font-size: 0.8em;
}

.content-title-vertical {
    line-height: 1; /* 行間を詰める */
    font-size: 2.5em; /* PCでの基本フォントサイズ */
    font-weight: bold;
    color: #333; /* デフォルトの文字色 (各セクションで上書き) */
    padding-right: 20px; /* 日本語タイトルとの間隔 */
    flex-shrink: 0; /* 要素が縮まないようにする (PCレイアウト用) */
    white-space: nowrap; /* テキストが改行されないようにする (PCレイアウト用) */
}

.content-title-vertical p{
    font-family: "Libertinus Mono", monospace;
    font-weight: 400;
    font-style: normal;
}


/* ////.min-width:751px | 751px ~
---------------------------------------------------------------------
------------
------------
------------
------------
------------
------------
------------
------------
------------
------------
max-width:750px | ~ 750px
------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {

    /* @media screen
  ------------------------------------------------------------------------- */


    /* モバイル時のメインビジュアルエリア */
    .mv {
        height: auto; /* コンテンツに合わせて高さを自動調整 */
        min-height: 400px; /* ただし、最低限の高さは確保 */
        flex-direction: column; /* ★変更なし: 子要素を縦に並べる */
        justify-content: flex-start; /* ★変更: mv-contentを上部に寄せ、その下にmv-content2が続くように */
        align-items: flex-start; /* ★変更: コンテンツ全体を左寄せにする */
        /* width: 100%; は既に設定されているのでここでは不要 */
    }

    /* mv-content のpadding-topは現状維持で問題ありませんが、
       もしコンテンツの開始位置をさらに調整したい場合は変更してください。 */
    /* .mv-content {
        padding: 100px 20px 0;
    } */

    /* モバイル時のメインビジュアル内の見出し */
    .mv-content h2 {
        font-size: 1.6em;
    }

    /* モバイル時のメインビジュアル内の段落 */
    .mv-content p {
        font-size: 1em;
    }

    /* メインビジュアル内のコンテンツ */
    .mv-content {
        text-align: left;
        padding: 180px 20px 20px; /* ★変更: padding-top を 120px に、padding-bottom を 20px に調整 */
        margin-top: 0;
        margin-bottom: 20px;
        width: auto;
    }

    /* ボタンを左寄せにする */
    .mv-content .btn-contact {
        font-size: 0.8em;
        text-align: center;
        display: block;
        margin-left: 0;
        margin-right: auto;
    }

    /* mv-content2 のスタイル */
    .mv-content2 {
        padding: 15px;
        margin-top: 0;
        width: 90%;px; /* お知らせのサイズ調整 */

        flex-direction: column; /* スマホでは縦並びを維持 */
        align-items: flex-start; /* ★変更: 子要素を左揃えにする */
        gap: 15px;
        margin-left: 20px;
    }

    .mv-content2-banner {
        text-align: left; /* ★変更: スマホでも左寄せにする */
        margin-bottom: 0; /* Flexboxで余白を管理するため削除 */
    }

    .mv-content2-banner img {
        max-width: 180px; /* スマホでの画像の最大幅を維持 */
        display: block;
        margin: 0; /* ★変更: 左寄せなので左右のマージンをリセット */
    }

    .mv-content2-info {
        margin-left: 0;
        width: 100%;
        max-width: none;
        text-align: left;
    }

    .mv-content2-info ul {
        text-align: left;
    }

    .mv-content2-info li {
        text-align: left;
    }

    .mv-content2-info a {
        /* スマホでも同じ下線アニメーションを適用するため、PCのスタイルを継承または再定義 */
        display: inline-block; /* 必要に応じて再確認 */
        position: relative;
        padding-bottom: 2px;
        overflow: hidden;
    }

    .mv-content2-info a::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: white;
        transform: translateX(-100%);
        transition: transform 0.3s ease-out;
    }

    .mv-content2-info a:hover::after {
        transform: translateX(0);
    }

    .shape-life-section {
        padding: 120px 15px; /* モバイル時の余白を調整 */
    }

    .shape-life-section .section-title-en {
        font-size: 1.4em;
    }

    .shape-life-section .section-subtitle {
        font-size: 1.4em;
    }

    .shape-life-section .section-catchphrase {
        font-size: 1em;
        margin-bottom: 30px;
    }

    .shape-life-section .section-image {
        margin-bottom: 30px;
    }

    .shape-life-section .section-description p {
        font-size: 0.95em;
        line-height: 1.7;
    }

    .image-gallery-section {
        padding: 40px 0; /* スマホでは左右パディングなし */
        max-width: 100%; /* 横幅100% */
    }

    .gallery-container {
        gap: 40px; /* スマホでのアイテム間の余白 */
    }

    .gallery-item {
        /* スマホでも横並びを維持 */
        align-items: center; /* 垂直方向中央揃えを維持 */
        padding: 0; /* 個別のパディングは後述のクラスで調整 */
        box-sizing: border-box; /* paddingを含めて幅を計算 */
        /* flex-direction: column; を削除し、デフォルトの row に戻すか、個別に設定 */
    }

    .gallery-image {
        width: 70%; /* スマホでの画像の幅を調整 (例: 50%) */
        height: auto;
        margin: 0; /* マージンをリセット */
    }

    .gallery-text {
        width: 50%; /* スマホでのテキストの幅を調整 (例: 50%) */
        padding: 0; /* 個別のパディングは後述のクラスで調整 */
        margin-right: 10px;
        /* スマホでも縦書きを維持 */
        writing-mode: vertical-rl;
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: vertical-rl;
        text-orientation: upright;
        white-space: nowrap;
        line-height: 2.2;
        letter-spacing: 0.1em;
        font-size: 1.2rem; /* スマホでのフォントサイズを調整 */
    }
    .gallery-text p {
        text-align: left;
    }


    /* 各ギャラリーアイテムの個別のスタイルをスマホで調整 */

    /* --- スマホ: 画像が左、テキストが右 --- */
    .gallery-item.item-left-text-right {
        flex-direction: row; /* 横並びを維持 */
        padding-left: 20px; /* 左余白20px */
    }
    .gallery-item.item-left-text-right .gallery-image {
        margin-right: 15px; /* 画像とテキスト間の余白 (スマホ用) */
    }
    .gallery-item.item-left-text-right .gallery-text {
        padding-right: 0; /* 右側パディングをリセット */
        padding-left: 0; /* 左側パディングをリセット (画像とのマージンで調整) */
        text-align: left; /* 縦書きなのでleft */
    }


    /* --- スマホ: 画像が右、テキストが左 --- */
    .gallery-item.item-right-text-left {
        flex-direction: row-reverse; /* 横並びを維持 */
        padding-right: 0; /* 右余白なし */
        padding-left: 20px; /* 全体として左側に余白を持たせる */
    }
    .gallery-item.item-right-text-left .gallery-image {
        margin-left: 15px; /* 画像とテキスト間の余白 (スマホ用) */
        margin-right: 0; /* 余計なマージンを消す */
    }
    .gallery-item.item-right-text-left .gallery-text {
        text-align: right; /* 縦書きなのでright */
        padding-left: 0; /* 左側パディングをリセット */
        padding-right: 0; /* 右側パディングをリセット (画像とのマージンで調整) */
    }


    .price-section {
        padding: 50px 15px; /* スマホでの余白 */
        max-width: 100%; /* 横幅100% */
    }

    .price-header {
        margin-bottom: 40px;
    }

    /* ★★★ ここから修正 ★★★ */
    .price-title-vertical {
        font-size: 1.8em;
        padding-right: 15px;
        /* スマホでも縦書きを解除 */
        /* writing-mode など縦書きプロパティを削除 */
    }
    /* ★★★ ここまで修正 ★★★ */

    .price-title-horizontal h2 {
        font-size: 1.6em;
    }

    .price-plans-container {
        flex-direction: column; /* カードを縦に積む */
        gap: 30px; /* カード間の余白 */
    }

    .price-card {
        width: 100%; /* スマホでは幅100%に */
        padding: 20px;
        min-height: auto; /* 高さを自動調整 */
        border-radius: 30px;
    }

    .price-card .card-title-en {
        font-size: 1.4em;
    }

    .price-card .card-title-jp {
        font-size: 1em;
    }

    .price-card .card-content {
        margin-bottom: 20px;
    }

    .price-card .card-content p {
        font-size: 0.95em;
    }

    .price-card .ticket-options {
        font-size: 1em;
    }

    .details-link {
        font-size: 1em;
    }

    .price-section-button-container {
        margin-top: 10px; /* スマホでの間隔調整 */
    }

    /* ★★★ ここを修正します ★★★ */
    .btn-more-details {
        padding: 12px 30px; /* スマホでの内側余白 */
        font-size: 0.8em; /* スマホでのフォントサイズ */
        width: 100%; /* スマホでは幅いっぱいに広げる */
        max-width: 300px; /* 最大幅を設定 (必要に応じて) */
        box-sizing: border-box;
    }
    /* ★★★ 修正箇所はここまで ★★★ */
    .full-screen-image-section .section-content {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .full-screen-image-section .image-title {
        font-size: 2em;
    }

    .full-screen-image-section .subtitle {
        font-weight: bold;
        font-size: 1.2em;
        margin-bottom: 10px;
    }

    .full-screen-image-section .product-image {
        margin-bottom: 30px;
        max-width: 90%;
    }

    .full-screen-image-section .product-description {
        font-weight: bold;
        font-size: 0.95em;
        margin-bottom: 40px;
    }

    .full-screen-image-section .button-container .btn-details {
        width: 100%;
        display: block;
        padding: 12px 30px;
        font-size: 1em;
        border-radius: 25px;
    }

    .join-us-section {
        padding: 50px 15px; /* スマホでの余白 */
        max-width: 100%; /* 横幅100% */
    }

    .join-us-header {
        margin-bottom: 40px;
        flex-direction: column; /* ヘッダーを縦並びにする場合はこちらを有効に */
        align-items: flex-start; /* 左寄せ */
    }

    .join-us-title-en {
        font-size: 1.8em; /* スマホでのサイズ調整 */
        padding-right: 0; /* 縦書きでなくなったので調整 */
        margin-bottom: 5px; /* タイトル間の余白 */
    }


    .join-us-content-wrapper {
        flex-direction: column; /* スマホでは縦並び */
        align-items: center; /* 中央寄せ */
        gap: 30px; /* 要素間の余白 */
        margin-top: 30px;
    }

    .join-us-text-content {
        max-width: 100%; /* 幅を100%に */
        text-align: center; /* スマホでは中央寄せ */
    }

    .join-us-intro-text {
        font-size: 1.1em;
        margin-bottom: 20px;
    }

    .join-us-image {
        /*padding: 0 15px;*/ /* スマホ時のサイド余白 */
    }
    
    .join-us-image img {
        border-radius: 10px; /* スマホでの角丸サイズ調整 */
    }

    .join-us-reserve-text {
        font-size: 1em;
    }

    .join-us-buttons {
        width: 100%; /* スマホではボタン群の幅を100%に */
        gap: 15px; /* ボタン間の余白 */
        align-items: center; /* 中央寄せ */
    }

    .line-button {
        padding: 10px 15px;
        font-size: 0.95em;
        max-width: 300px; /* ボタンの最大幅 */
    }

    .line-icon {
        font-size: 20px;
        margin-right: auto; /* ★変更: スマホでも同様 */
        margin-left: 0;
    }

    .line-button span {
        text-align: center;
        margin-right: 20px; /* ★変更: スマホでの調整 (例: アイコンサイズ20px) */
    }

    .news-section {
        padding: 80px 15px; /* スマホでの上下パディング */
    }

    .news-header {
        margin-bottom: 40px;
        flex-direction: column; /* スマホでは縦並び */
        align-items: flex-start; /* 左寄せ */
    }

    .news-title-en {
        font-size: 1.8em;
        padding-right: 0; /* 縦書きではないため */
        margin-bottom: 5px; /* タイトル間の余白 */
    }

    .news-title-jp {
        font-size: 1.6em;
    }

    .news-content-wrapper {
        flex-direction: column; /* スマホでは縦並び */
        gap: 30px; /* 要素間の余白 */
        /* ★★★ ここから修正/追加 ★★★ */
        height: 200px; /* ★必須: スクロールさせるための高さを固定 (例: 400px) */
        overflow-y: scroll; /* 垂直方向にスクロール可能にする */
        -webkit-overflow-scrolling: touch; /* iOSでのスクロールをスムーズにする */
        padding-right: 15px; /* スクロールバーのスペースを考慮し、右側にパディングを追加 */
        /* ★★★ ここまで修正/追加 ★★★ */
    }

    .news-list {
        max-width: 100%; /* スマホでは幅100% */
    }

    .news-list li {
        margin-bottom: 15px; /* スマホでのリストアイテム間の余白 */
    }

    .news-link {
        flex-direction: column; /* 日付とテキストを縦並びに */
        align-items: flex-start; /* 左寄せ */
        padding-bottom: 5px; /* スマホでの下線スペース調整 */
    }

    .news-date {
        margin-right: 0; /* 縦並びなので右マージン不要 */
        margin-bottom: 5px; /* 日付の下に余白 */
        font-size: 0.85em;
    }

    .news-text {
        font-size: 0.9em;
        line-height: 1.5;
    }

    .voice-section {
        padding: 50px 15px; /* スマホでの上下パディング */
    }

    .voice-header {
        margin-bottom: 40px;
        flex-direction: column; /* スマホ: 縦に積み重ねる */
        align-items: flex-start; /* スマホ: 左寄せ */
    }

    .voice-title-en {
        color: #000; /* ★変更点: スマホの英語タイトルの文字色も黒に */
        font-size: 1.8em;
        padding-right: 0;
        margin-bottom: 5px;
    }

    .voice-title-jp {
        color: #000; /* ★変更点: スマホの日本語サブタイトルの文字色も黒に */
        font-size: 1.6em;
    }

    .voice-cards-wrapper {
        flex-direction: column; /* スマホでは縦並び */
        gap: 30px; /* カード間の余白 */
        margin-bottom: 50px; /* ボタンとの間隔 */
    }

    .voice-card {
        width: 100%; /* スマホでは幅100%に */
        padding: 0; /* カード自体のパディングは不要 (内部で調整) */
    }

    .voice-image-frame {
        padding: 15px; /* スマホでの画像の周りのパディング */
        border-radius: 5px;
        box-shadow: 0 2px 10px rgba(255, 255, 255, 0.15); /* スマホでの影の調整 */
        margin-bottom: 20px;
    }

    .voice-story {
        font-size: 0.95em;
        line-height: 1.7;
        margin-bottom: 20px;
        padding: 0 10px; /* スマホでのテキストの左右パディング */
    }

    .voice-user-info {
        margin: 15px 0;
        justify-content: center; /* スマホでは中央寄せ */
    }

    .user-avatar {
        width: 60px; /* スマホでのアバターサイズ */
        height: 60px;
        margin-right: 15px;
    }

    .user-name {
        font-size: 1.1em;
    }

    .voice-tags {
        justify-content: center; /* スマホでは中央寄せ */
        margin-bottom: 30px; /* ボタンとの間隔 */
    }

    .voice-tag {
        font-size: 0.85em;
        padding: 6px 15px;
    }

    .btn-voice-details {
        padding: 12px 30px;
        font-size: 1em;
        border-radius: 25px;
    }

    .design-yourself-section {
        padding: 100px 15px; /* スマホでの上下パディングを調整 */
    }

    .design-yourself-text-jp {
        font-size: 1.2em;
        margin-bottom: 25px;
    }

    .design-yourself-text-en {
        font-size: 0.9em;
        margin-bottom: 40px;
    }

    .design-yourself-image-container {
        padding-top: 50px; /* スマホでの画像上下余白を調整 */
        padding-bottom: 50px;
    }

    .design-yourself-image {
        width: 50%;
        border-radius: 5px; /* スマホでの角丸を調整 */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    .design-yourself-button-container {
        margin-top: 40px; /* スマホでのボタン上マージンを調整 */
    }

    .btn-trainer-intro {
        padding: 12px 30px;
        font-size: 1em;
        border-radius: 25px;
    }

    .faq-section {
        padding: 100px 15px; /* スマホでの上下パディングを調整 */
    }

    .faq-header {
        flex-direction: column; /* スマホでは縦に積み重ねる */
        align-items: flex-start; /* 左寄せ */
        gap: 0; /* ヘッダー内の要素間の余白は不要 */
        margin-bottom: 20px;
    }

    /* スマホでの各タイトル色はPC時と同じ（黒） */
    .faq-title-en {
        font-size: 1.6em; /* ★変更: スマホでの「FAQ」のフォントサイズを少し小さく */
        margin-bottom: 5px;
    }

    .faq-title-jp {
        font-size: 1.4em; /* ★変更: スマホでの「よくあるご質問」のフォントサイズを少し小さく */
    }

    .faq-description {
        font-size: 0.95em;
        margin-bottom: 40px;
        text-align: center; /* スマホでも中央寄せを維持 */
    }

    .btn-faq-details {
        padding: 12px 60px;
        font-size: 1em;
        border-radius: 25px;
    }

    .content-title-vertical {
        font-size: 1.8em; /* スマホでのフォントサイズ */
        padding-right: 0; /* 縦並びになるため間隔不要 */
        margin-bottom: 5px; /* 日本語タイトルとの間に少し余白 */
    }

    .content-title-horizontal {
        font-size: 1.6em; /* スマホでのフォントサイズ */
        /* その他のスタイルは共通のものを継承 */
    }

    /* @media screen
  ------------------------------------------------------------------------- */
}