/*--------------------------------------------------------------------------------------------------
    共通デザイン
    (このセクションに変更はありません)
--------------------------------------------------------------------------------------------------*/
:root {
    /* ... 既存の :root スタイル ... */
    --theme_color_1: #d6f4ff;
    --theme_color_2: #00a9ed;
    --theme_color_3: #c8fcea;
}

@keyframes marquee-left {
    /* ... 既存の @keyframes marquee-left ... */
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

@keyframes marquee-right {
    /* ... 既存の @keyframes marquee-right ... */
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
}

#load {
    /* ... 既存の #load スタイル ... */
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100dvw;
    height: 100dvh;
    display: grid;
    place-items: center;
    font-size: 3em;
    z-index: 100;
    opacity: 0;
    transition: opacity 2s ease-in-out; /* ふわっと表示、ふわっと非表示 */
}


#ADVANCED_SHOP {
    /* ... 既存の #ADVANCED_SHOP スタイル ... */
    opacity: 0;
    transition: opacity 2s ease-in-out; /* ふわっと表示、ふわっと非表示 */

    * {
        text-align: center;
    }
    img {
        width: 100%;
    }

    .slide {
        /* display:none; */
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity 2s;
        z-index: -1;
    }
    .slide.show {
        opacity: 1;
        z-index: 1;
    }

    h1 {
        position: relative;
        font-size: 3rem;
    }

    h2 {
        position: relative;
        font-size: 2rem;
    }

    h3 {
        font-size: 1.5rem;
    }
}



a {
    text-decoration: none !important;
}

.button-43 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20rem;
    margin: 10rem auto;
    padding: 1em 2em;
    border: none;
    border-radius: 5px;
    background-image: linear-gradient(0deg, #2589d0 0%, #2589d080 100%);
    color: #fff;
    font-weight: 600;
    font-size: 1.5em;
}

.video_pr {
    margin-top: 5rem;
}

.video_pr .youtube{
    aspect-ratio: 16/9;
    max-width: 1280px;
    max-height: 720px;
}

.video_pr .youtube{
    width: 100%;
    height: 100%;
    object-fit: cover
}



/*========================================================================================
    スクロールアニメーション (フローティング)
    - 動作を「下から上」に統一し、個別に遅延時間を設定
========================================================================================*/

/* 全ての要素に共通のアニメーション初期状態（下から上に浮き上がる） */
.feature-card {
    /* 初期状態: 下に少しずらし、透明にする */
    opacity: 0;
    transform: translateY(30px); /* 統一して下から上に30px移動 */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* アニメーションの設定を統一 */
}


/* .animateクラスが追加された時のアニメーション後の状態（機能カード全体が画面に読み込まれたら発動） */
.feature-card.animate  {
    /* 初期位置に戻し、完全に表示させる */
    opacity: 1;
    transform: translateY(0);
}


/*-------------------------------------------------------------------------
    セクション１ タイトルと動画
-------------------------------------------------------------------------*/
#top-video-container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: grid;
}
.video-player {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease-in-out;
    opacity: 0;
    grid-area: 1 / 1 / 2 / 2;
    z-index: 1;
}

.video-overlay {
    grid-area: 1 / 1 / 2 / 2;
    z-index: 2;
    color: #ffffff;
    text-align: center;
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.video-overlay h1 {
    font-weight: bold;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
    font-size: 6rem;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
}
/* ------------------------------------------------------------------------------------------------
    バウンス (上下の揺れ)
------------------------------------------------------------------------------------------------ */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translate(-50%, 0);
    }
    40% {
        transform: translate(-50%, -10px);
    }
    60% {
        transform: translate(-50%, -5px);
    }
}

/* ------------------------------------------------------------------------------------------------
    スクロールダウン矢印 (位置、中央寄せ、h1からの距離修正)
------------------------------------------------------------------------------------------------ */
.scroll-down-arrow {
    position: absolute;
    left: 50%; /* 左右中央に配置 */
    z-index: 10;
    cursor: pointer;
    animation: bounce 2s infinite;
    filter: drop-shadow(2px 2px 8px rgba(0, 0, 0, 0.7));
    top: calc(50% + 150px);
    top: 70%;
    pointer-events: none;
}

.video-overlay h1 {
    margin-bottom: 3rem;
}

/* 画像用のスタイル */
.scroll-down-arrow img {
    display: block;
    width: 30px;
    height: auto;
    /* ドラッグ無効 */
    -webkit-user-drag: none; /* WebKit系 (Chrome, Safariなど) */
    user-select: none; /* テキスト選択を無効化 */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
}

/* マウスホバー時のアニメーションの停止 (オプション、変更なし) */
.scroll-down-arrow:hover {
    animation-play-state: paused;
}

/* スマホでの調整 (任意) */
@media (max-width: 767px) {
    .scroll-down-arrow {
        /* スマホでは h1が小さくなるため top の値を調整 */
        top: 70%; /* 縦中央よりさらに下に */
    }
    .scroll-down-arrow img {
        width: 40px;
    }
    .video-overlay h1 {
        font-size: 2.5rem; /* 既存のメディアクエリの値を維持 */
        margin-bottom: 2rem;
    }
}


/*========================================================================================
    セクション２: 業界最安値の訴求エリア
========================================================================================*/
#section_2 {
    background-color: #00bcd4;
    padding: 50px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

#section_2 .bg {
    animation: slide 3s ease-in-out infinite alternate;
    background-image: linear-gradient(-60deg, #fff 50%, #09f 50%);
    bottom: 0;
    left: -50%;
    opacity: .5;
    position: absolute;
    right: -50%;
    top: 0;
    z-index: -1;
    /* セクション全体に広がるように幅と高さを調整 */
    width: 200%;
    height: 100%;
}

#section_2 .bg2 {
    animation-direction: alternate-reverse;
    animation-duration: 4s;
}

#section_2 .bg3 {
    animation-duration: 5s;
}
#section_2 .content {
    background-color:rgba(255,255,255,.8);
    border-radius:.25em;
    box-shadow:0 0 .25em rgba(0,0,0,.25);
    box-sizing:border-box;
    padding: 10vmin;
    text-align: center;
    z-index: 2; /* 背景より前面 */
}

/* アニメーションキーフレームはグローバルで問題ないため修正なし */
@keyframes slide {
    0% {
        transform: translateX(-25%);
    }
    100% {
        transform: translateX(25%);
    }
}


#section_2 .content p{
    font-size: 2.5rem;
    font-weight: bold;
}

.highlight-line {
    font-size: 3.5rem;
    color: red;
    border-bottom: #ff0000;
}





/*========================================================================================
 * セクション３: 契約ステップ
========================================================================================*/
/* card要素全体をGridコンテナとする */
.card {
    /* 3つの要素を均等幅で配置（デフォルトはPC向け） */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 要素間の隙間 */
    gap: 20px;
    margin: 5vw;
}
.card__item {
    /* 背景色 */
    background: #fff;
    /* 内側の余白 */
    padding: 20px;
}
.card__img-area {
    /* アスペクト比を1:1に固定 🔴 修正：コメントアウトを解除して有効化 */
    aspect-ratio: 1 / 1; 
    /* 下部の余白 */
    margin-bottom: 20px;
}
.card__img-area img {
    /* 幅を親要素に合わせる */
    width: 100%;
    /* 高さを親要素に合わせる 🔴 修正：aspect-ratioを優先するためheight: 100%を削除/上書き */
    height: 100%; /* ← height: 100%がaspect-ratioを無効化する原因でした */
    /* 画像の表示方法を調整 */
    object-fit: contain;
}
.card__title {
    /* フォントサイズ (基準となるサイズ: 20px) */
    font-size: 20px;
    /* 太字 */
    font-weight: bold;
    /* 下部の余白 */
    margin-bottom: 10px;
}

/* 契約ステップ間のセパレータ要素（中央配置が必要なli要素）のスタイル */
.card__item--separator {
    /* Flexコンテナとして設定（要素全体を上下左右中央に配置するため） */
    display: flex;
    /* 子要素（.text-circle_1）を水平方向の中央に配置 */
    justify-content: center;
    /* 子要素（.text-circle_1）を垂直方向の中央に配置 */
    align-items: center;
    /* PCで最大の円 (180px) を収めるための高さを確保 */
    min-height: 220px;
}

/* text-circle_1 のスタイル（文章の中央配置と幅調整） */
.text-circle_1 {
    /* 位置指定の基準 */
    position: relative;
    /* マージンを削除 */
    margin: 0;
    /* テキストの色 */
    color: #333333;
    /* 行の高さ */
    line-height: 1.5;
    /* 文章を中央配置し、幅をコンテンツに合わせる */
    display: inline-flex;
    /* 子要素を水平方向の中央に配置 */
    justify-content: center;
    /* 子要素を垂直方向の中央に配置 */
    align-items: center;
    /* テキストの整列 */
    text-align: center;
    /* パディングはフォントサイズ基準のemで調整 */
    padding: 1em 1.5em;
}

/* text-circle_1 の中のp要素のスタイル */
.text-circle_1 p {
    margin: 0;
    /* 基準コードのフォントサイズ */
    font-size: 24px;
    /* 基準コードの太字設定 */
    font-weight: bold;
}

/* 擬似要素1（左上：大きい円）のスタイル */
.text-circle_1::before {
    /* 擬似要素の配置指定 */
    position: absolute;
    /* 配置: 右下に固定*/
    bottom: 0;
    left: 0;
    top: auto;
    right: auto;
    transform: none;
    z-index: -1;
    /* サイズ: PC向けの大きいサイズ (180px) */
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: #bbdbfb;
    content: '';
}

/* 擬似要素2（右下：小さい円）のスタイル */
.text-circle_1::after {
    /* 擬似要素の配置指定 */
    position: absolute;
    /* 配置: 右下に固定*/
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
    transform: none;
    z-index: -1;
    /* サイズ: PC向けの小さいサイズ (120px) */
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #bbdbfb;
    content: '';
}






/*-------------------------------------------------------------------------
    セクション4 価格表
    (このセクションに変更はありません)
-------------------------------------------------------------------------*/
/* ... 既存のセクション４スタイル ... */
#section_4.price-table-section {
    padding: 60px 20px;
    background-color: #f0f8ff;
}
.comparison-section {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

/* タイトル部分と表の間に2remのマージンを追加 (維持) */
.comparison-title {
    margin-bottom: 2rem;
}


/* スクロール対応 (維持) */
.comparison-table {
    overflow-x: auto;
}
.comparison-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0;
    min-width: 800px;
}

/* ------------------------------------
    ヘッダー (<thead>) のスタイリング
    ------------------------------------ */
.comparison-table thead th {
    font-weight: bold;
    text-align: center;
    padding: 15px 10px;
    color: #fff;
    white-space: nowrap;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 1.2rem;
}

/* 1列目: 項目名の見出し (空白/背景色と同色) */
.comparison-table thead th:first-child {
    background-color: #f0f8ff;
    color: #333;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: none;
    /* 幅設定 (維持) */
    width: 25%;
    min-width: 180px;
}

/* 2列目: ADVANCED SHOP - ヘッダー (影削除) */
.comparison-table thead th.highlight-plan.header-highlight {
    background-color: #007bff; /* 青色を維持 */
    color: #fff;
    /* 影と位置指定を削除し、標準に戻す */
    box-shadow: none;
    position: static;
    z-index: auto;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* 標準の罫線を復活 */
    padding-top: 15px;
    line-height: 1.5;
    outline: none;
}


/* 3列目以降: 比較対象 (A社, B社) */
.comparison-table thead th:nth-child(n+3) {
    background-color: #007bff;
}
.comparison-table thead th:last-child {
    border-right: none;
}


/* ------------------------------------
    ボディ (<tbody>) のスタイリング
    ------------------------------------ */
.comparison-table tbody th {
    padding: 20px 10px;
    text-align: center;
    background-color: #fff;
    color: #333;
    line-height: 1.5;
    font-weight: normal;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

/* 1列目: 行見出しのセル (黄色) (維持) */
.comparison-table tbody th:first-child {
    background-color: #fcfc36;
    color: #333;
    font-weight: bold;
    border-right: 1px solid rgba(0, 0, 0, 0.1);

    display: table-cell;
    text-align: center;
    vertical-align: middle;

    width: 25%;
    min-width: 180px;
}
.comparison-table tbody th:first-child p {
    margin: 0;
}


/* 2列目: ADVANCED SHOP - 強調列のデータセル (影削除) */
.comparison-table tbody th.highlight-plan {
    background-color: #fff; /* 白を維持 */
    position: static; /* 影削除に伴いリセット */
    z-index: auto; /* 影削除に伴いリセット */
    font-weight: bold;
    border: 1px solid #ddd; /* 標準の境界線を適用 */
    outline: none;

    /* 影を完全に削除 */
    box-shadow: none;
}

/* 隣接セルの境界線調整を標準に戻す */
.comparison-table tbody th:first-child + th.highlight-plan {
    border-left: 1px solid #ddd;
}
.comparison-table tbody th.highlight-plan + th {
    border-left: 1px solid #ddd;
}

/* 最後の行の下線を調整 (最終行の境界線を復活) */
.comparison-table tbody tr:last-child th {
    border-bottom: 1px solid #ddd;
}
.comparison-table tbody tr:last-child th.highlight-plan {
    border-bottom: 1px solid #ddd;
}


/* ------------------------------------
    セル内のコンテンツの強調 (赤文字の装飾は維持)
    ------------------------------------ */
.comparison-table tbody th p {
    margin: 5px 0;
    line-height: 1.4;
    font-size: 1.2rem;
    color: #333;
}
.comparison-table tbody th p span.price {
    font-size: 2rem;
    font-weight: bold;
    color: #007bff;
}
.comparison-table tbody th.highlight-plan p span.price {
    color: #ff0000;
}
.comparison-table tbody th.highlight-plan p .red-text {
    color: #ff0000;
    font-weight: bold;
}
.comparison-table tbody th.highlight-plan p.note.highlight-note {
    color: #ff0000;
}


/*-------------------------------------------------------------------------
    セクション５ 流れる文字
    (このセクションに変更はありません)
-------------------------------------------------------------------------*/
/* ... 既存のセクション５スタイル ... */
#section_5 {
    display: grid;
    overflow: hidden;

    /* CSS */
    .marquee-left {
        width: 100%;
        overflow: hidden;
        position: relative;
        display: flex;
    }

    .marquee-left h2 {
        /* アニメーションの名前, アニメーションの時間, アニメーションのタイミング関数, アニメーションの遅延時間, アニメーションの反復回数 */
        animation: marquee-left 10s linear infinite;
        white-space: nowrap;
        /* padding-right: 100%; */
        font-size: 3rem;
    }

    /* CSS */
    .marquee-right {
        width: 100%;
        overflow: hidden;
        position: relative;
        display: flex;
        margin: 0;
    }

    .marquee-right h3 {
        /* アニメーションの名前, アニメーションの時間, アニメーションのタイミング関数, アニメーションの遅延時間, アニメーションの反復回数 */
        animation: marquee-right 10s linear infinite;
        white-space: nowrap;
        /* padding-right: 100%; */
        font-size: 2rem;
        margin: 0;
    }

    h3 {
        margin: 2rem 0;
        display: grid;
        place-items: center;
        /* background-color: lime; */
    }
}


/*========================================================================================
セクション６: プラン説明
========================================================================================*/
/* style.css */

/* --- レスポンシブ Grid レイアウト (変更なし) --- */

/* 全体のリストコンテナ: モバイル/タブレットでは縦並び、PCでは横並びを実現 */
.pack-list-container {
    /* デフォルト (スマホ < 768px): 縦並び (1列) */
    display: grid;
    /* カードを縦に1列配置 */
    grid-template-columns: 1fr;
    /* カード間の間隔 */
    gap: 2rem;
    /* カードの最大幅を設定し、中央寄せを容易にする */
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
}

/* タブレット用のメディアクエリ (768px <= width < 1200px) */
@media (min-width: 768px) {
    .pack-list-container {
        /* タブレットでは2列で表示 */
        max-width: 700px;
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
    }
}

/* PC用のメディアクエリ (width >= 1200px) */
@media (min-width: 1200px) {
    .pack-list-container {
        /* PCでは3列均等配置に最適化 */
        max-width: none;
        width: 90%;
        margin: 2rem auto;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
    }
}
.pack-container {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    /* 背景色 (フォールバック) */
    background-color: #212121;
    border: 1px solid #fff;
    padding: 1.6rem;
    color: #fff;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    overflow: hidden;

    /* 【変更点】背景画像を明るくする設定 */
    /* 背景画像と、半透明の白色のオーバーレイを重ねる */
    background-image: var(--plan-image-url), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* ブレンドモードを screen に変更し、画像を明るくする効果を適用 */
    background-blend-mode: screen; 
}

/* 【変更点】左上角の三角形の装飾 (::before) */
.pack-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    /* 色を真っ黒に変更 */
    background-color: #000000;
    clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
    z-index: 1;
}

/* 【変更点】右下角の三角形の装飾 (::after) */
.pack-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100px;
    height: 100px;
    /* 色を真っ黒に変更 */
    background-color: #000000;
    clip-path: polygon(100% 100%, 0% 100%, 100% 0%);
    z-index: 1;
}

/* --- カードヘッダー (視認性向上のためのテキストシャドウ追加) --- */

.header {
    position: relative;
    margin: 0;
    margin-bottom: 1rem;
    overflow: hidden;
    border-radius: 0;
    border-bottom: 1px solid #fff;
    background: transparent;
    padding-bottom: 1rem;
    text-align: center;
    z-index: 2;
}

/* プランのタイトル */
.title {
    display: block;
    font-family: sans-serif;
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-transform: uppercase;
    color: #f0f0f0;
    margin-bottom: 0.5rem;
    /* 【新規追加】文字の縁・影 (テキストシャドウ) */
    text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000;
}

/* 料金表示コンテナ */
.price-container {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    font-family: sans-serif;
    font-size: 4.5rem;
    line-height: 1;
    z-index: 2;
    /* 【新規追加】文字の縁・影 (テキストシャドウ) */
    text-shadow: 2px 2px 4px #000, -2px -2px 4px #000;
}

/* 通貨記号 (¥, $) */
.price-container .currency {
    margin-top: 10px;
    font-size: 2.25rem;
    line-height: 2.5rem;
    align-self: auto;
}

/* 期間表示 (/月) */
.price-container .billing-cycle {
    align-self: flex-end;
    font-size: 2.25rem;
    line-height: 2.5rem;
}

/* --- リスト部分 (テキストシャドウを追加) --- */

.lists {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: auto;
    z-index: 2;
}

.list {
    display: flex;
    align-items: center;
    gap: 10px;
}

.list span {
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background-color: rgba(255, 255, 255, 0.185);
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.list span svg {
    height: 12px;
    width: 12px;
}

/* 特徴のテキスト */
.list p {
    display: block;
    font-family: sans-serif;
    margin: 0;
    /* 【新規追加】文字の縁・影 (テキストシャドウ) */
    text-shadow: 1px 1px 2px #000;
}




/*========================================================================================
    セクション７: 機能説明
========================================================================================*/
.container {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 1:1の2カラムを作成 */
  gap: 0; /* カラム間の間隔が必要であれば、ここに設定 */
}

/* Cards */
.card-column {
  padding: 4%;
  box-sizing: border-box;

}

.column-1 {
  padding-top: 100px;
}

.cards {
  width: 92%;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background: #EB5160;
  color: #fff;
  cursor: pointer;
  margin-bottom: 60px;
}

.border {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 6px;
  border: 2px solid #fff;
  opacity: 0.5;
  left: -6px;
  top: -6px;
}

.cards h1 {
  position: relative;
  padding: 15rem 3rem 5rem 1rem;
  width: 90%;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.cards > img {
  width: 90%;
  position: absolute;
  top: -6%;
  left: -6%;
}

.card-color-0 {
  background-color: #EB5160;
}

.card-color-1 {
  background-color: #8F3985;
}

.card-color-2 {
  background-color: #8DAA91;
}

.card-color-3 {
  background-color: #888DA7;
}

.card-color-4 {
  background-color: #FF8A5B;
}

.card-color-5 {
  background-color: #48B8D0;
}

.card-color-6 {
  background-color: #FFC77A;
}

/* The cover (expanding background) */
.cover {
  position: fixed;
  background: #EB5160;
  z-index: 100;
  transform-origin: 50% 50%;
}

/* The open page content */
.open-content {
  width: 100vw;
  z-index: 110;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  height: 100%;       /* 👈 高さを親要素（ビューポート）いっぱいに設定 */
  overflow-y: auto;   /* 👈 コンテンツがはみ出したらスクロール可能にする */
}

.open-content .content-wrapper {
    background: #fff;
    padding: 60% 5% 5% 5%;
    width: 80%;
    margin: 0 auto;
    margin-top: -56%;
    margin-bottom: 5%;
}

.open-content img {
  position: relative;
  margin: 0 auto;
  margin-top: 1rem;
  z-index: 5;
}

.open-content .text {

}

.open-content .text h1, .open-content .text p {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.close-content {
  display: block;
  position: absolute;
  right: 12px;
  top: 12px;
  width: 30px;
  height: 30px;
}

.close-content span {
  background: #222;
  width: 30px;
  height: 6px;
  display: block;
  position: absolute;
  top: 14px;
}

.x-1 {
  transform: rotate(45deg);
}

.x-2 {
  transform: rotate(-45deg);
}

/* 
** Transitions
*/

.cards {
  transition: opacity 200ms linear 320ms, transform 200ms ease-out 320ms;
}

.border {
  transition: opacity 200ms linear, transform 200ms ease-out;
}

.cards img {
  transition: opacity 200ms linear 0ms, transform 200ms ease-in 0ms;
}

.cards h1 {
  transform: translate3d(20%, 0px, 0px);  
  transition: opacity 200ms linear 120ms, transform 200ms ease-in 120ms;
}

/* Clicked card */
.cards.clicked img {
  transform: translate3d(0px, -40px, 0px);
  opacity: 0;
}

.cards.clicked .border {
  opacity: 0;
  transform: scale(1.3);
}

.cards.out, .cards.out img {
  transform: translate3d(0px, -40px, 0px);
  opacity: 0;
}

.cards.out h1, .cards.clicked h1 {
  transform: translate3d(20%, -40px, 0px);
  opacity: 0;
}

.cover {
  transition: transform 300ms ease-in-out;
}

.open-content {
  transition: opacity 200ms linear 0ms;
}

.open-content.open {
  opacity: 1;
  pointer-events: all;
  transition-delay: 1000ms;
}

@media (min-width: 768px) and (max-width: 1200px) {
  .container {
    grid-template-columns: 1fr; /* 1カラムに変更 */
  }

  .card-column {
    width: auto; /* Gridに任せる */
    /* タブレット用の個別のスタイルがあればここに追加 */
  }
}

@media screen and (max-width: 767px) {
  /* 既存のレイアウトを上書き・修正 */
  .container {
    grid-template-columns: 1fr; /* 👈 1カラムに変更 */
    max-width: 100%;            /* 👈 画面幅いっぱいに広げる（必要に応じて） */
  }

  .card-column {
    /* width: 90%; 👈 Gridでは不要になるため削除（またはfloat時代の名残なので無視） */
    width: auto; /* Gridに任せる */
  }
  
  .column-1 {
    padding-top: 0px; /* 既存のfloat時代の修正を維持 */
  }
  
  .open-content img {
    /* 既存の修正を維持 */
    width: 100%;
    margin-top: 1rem;
  }
}


/*--------------------------------------------------------------------------------------------------
    タブレット
--------------------------------------------------------------------------------------------------*/
@media (min-width: 768px) and (max-width: 1200px) {
    .video-overlay h1 {
        font-size: 4rem;
    }

    /*========================================================================================
      セクション３: 契約ステップ
      ========================================================================================*/
    /* 横並びを維持 */
    .cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
    /* タブレット向けのサイズ調整 */
    .card__item--separator {
        min-height: 170px;
    }
    .text-circle_1 p {
        font-size: 20px;
    }
    .text-circle_1::before {
        width: 130px;
        height: 130px;
    }
    .text-circle_1::after {
        width: 90px;
        height: 90px;
    }

    /*========================================================================================
      セクション６: プラン説明
      ========================================================================================*/
    /* タブレットサイズでの調整 */
    .plan-item__content {
        padding: 30px; /* パディングを少し減らす */
    }

    .plan-item__title {
        font-size: 1.6em;
    }
    /* 【変更箇所】タブレットでの料金表示サイズ調整 */
    .plan-item__price {
        font-size: 1.5em; /* タイトル(1.6em)とほぼ同じサイズ */
    }

    /*========================================================================================
      セクション７: 機能説明
      ========================================================================================*/
    /* タブレット用の調整 */
    .feature-title {
        font-size: 1.6rem;
    }
    .feature-description {
        font-size: 0.95rem;
    }

}


/*--------------------------------------------------------------------------------------------------
    スマホ
--------------------------------------------------------------------------------------------------*/
@media (max-width: 767px) {
    .video-overlay h1 {
        font-size: 2.5rem;
    }

    /*========================================================================================
      セクション３: 契約ステップ
      ========================================================================================*/
    /* 縦並びを確実に適用するため、セレクタの詳細度を上げる (競合対策) */
    .cards.cards {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* スマホ向けのサイズ調整 */
    .card__item--separator {
        margin: 20px 0;
        min-height: 100px;
    }
    .text-circle_1 p {
        font-size: 18px;
    }

    /* 最小サイズに調整 */
    .text-circle_1::before {
        width: 90px;
        height: 90px;
    }
    .text-circle_1::after {
        width: 60px;
        height: 60px;
    }

    

    /*========================================================================================
      セクション６: プラン説明
      ========================================================================================*/
    /* plan-item（全体コンテナ）のレイアウト変更 */
    .plan-item {
        grid-template-columns: 1fr;
        height: auto;
        
        /* 【修正】スマホでは左右マージンを均等に戻すか、中央寄せに調整 */
        margin: 20px auto; 
        max-width: 90%; 
    }
    
    /* plan-item__content（文字要素）のスタイル */
    .plan-item__content {
        /* 【修正】文字要素を上部に配置 (order: 1) */
        order: 1;
        
        /* 【修正】角丸を上部に適用（PC版の left-side top/bottom-left の代わりに top-left/top-right） */
        /* PC版の border-radius: 8px 0 0 8px; をリセットし、スマホ版の角丸を設定 */
        border-radius: 8px 8px 0 0;
        
        /* 【修正】padding の調整（元のスマホ版のデータから採用） */
        padding: 30px 20px; 
    }
    
    /* plan-item__image-wrapper（画像要素）のスタイル */
    .plan-item__image-wrapper {
        /* 【修正】画像を下部に配置 (order: 2) */
        order: 2;
        
        /* 【修正】角丸を下部に適用 */
        border-radius: 0 0 8px 8px;
        
        /* 【修正】padding を調整 */
        padding: 1.5rem; /* 画像が大きくなりすぎないように調整 */
        min-height: 180px; 
    }

    .plan-item__content::after {
        content: '';
        
        /* 【修正】幅と高さをPCの縦線と逆にする */
        width: 80%; /* PCの縦線のheight(80%)を横線のwidthに */
        height: 2px; /* PCの縦線のwidth(2px)を横線のheightに */
        
        /* 【位置調整】下端、水平中央に配置 */
        top: auto; 
        bottom: 0; 
        left: 50%; /* 水平中央に */
        right: auto; 
        
        /* 水平中央寄せのtransform */
        transform: translateX(-50%); 
    }
    
    /* -------------------------------------- */
    /* スマホ時のその他の要素調整（元のスマホ版のデータから採用） */
    /* -------------------------------------- */
    .plan-item__title {
        font-size: 1.4em;
    }
    .plan-item__price {
        font-size: 1.3em;
    }
    
    /* 偶数/奇数によるレイアウト反転は適用しない */
    .plan-item--odd .plan-item__content,
    .plan-item--odd .plan-item__image-wrapper {
        order: initial;
    }

    .pricing-plans-container {
        display: flex;
        flex-direction: column;
        max-width: 1200px;
        margin: 0 auto;
        
        /* 【修正】カード間に 2rem の余白を設定 */
        gap: 2rem; 
    }


    

}