/* 製品詳細ページ用のスタイル */

/* ページ全体の汎用アコーディオンのスタイル */
/* .accordion-item および .accordion-content を持つすべての要素に適用されます */
.accordion-item .accordion-content {
    max-height: 0; /* 初期状態ではコンテンツを非表示 */
    overflow: hidden; /* max-height を超えるコンテンツを非表示 */
    transition: max-height 0.35s ease-out; /* 開閉時のスムーズなトランジション */
    /* background-color: #f9f9f9; */ /* オプション: コンテンツエリアに背景色を付けたい場合 */
}

.accordion-item.active .accordion-content {
    max-height: 1000px; /* すべてのコンテンツを表示するのに十分な大きな値。必要に応じて調整してください。 */
    /* padding-top: 10px; */ /* オプション: 開いたときにパディングを追加 */
    /* padding-bottom: 10px; */ /* オプション: 開いたときにパディングを追加 */
}

/* 製品特徴セクション */
.product-features-section {
    display: flex; /* 子要素（トップ画像コンテナ、カラムコンテナ）を配置するため */
    flex-direction: column; /* トップ画像とカラムコンテナを垂直に積む */
    width: 100%; /* 初期状態では直接の親要素の全幅を取る */
    max-width: 960px; /* ただし、最大幅を制限する */
    margin-left: auto;  /* セクションをページ中央に配置 */
    margin-right: auto; /* セクションをページ中央に配置 */
    margin-top: 0; /* 全てのセクションでmargin-topを0に設定 */
    margin-bottom: 0; /* 全てのセクションでmargin-bottomを0に設定 */
    box-sizing: border-box; /* パディングが max-width に影響しないようにする */
    position: relative; /* 全幅背景用の疑似要素の位置決めに使用 */
    padding-top: 75px; /* 全てのセクションで上下のpaddingを75pxに設定 */
    padding-bottom: 75px; /* 全てのセクションで上下のpaddingを75pxに設定 */
}

/* .product-container 内の product-features-section に交互の背景色を適用 */
/* 奇数番目のセクションが薄いグレーの背景になります */
.product-container > .product-features-section:nth-child(odd)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%; /* 疑似要素を中央に配置 */
    transform: translateX(-50%); /* 中央揃えのための調整 */
    width: 100vw; /* ビューポート全体の幅 */
    height: 100%;
    /* background-color: var(--color-background-light); */ /* 奇数番目は白背景なので削除 */
    z-index: -1; /* コンテンツの背面に配置 */
}

/* 偶数番目のセクション (section-2, section-4, ...) に薄いグレーの全幅背景を適用 */
.product-container > .product-features-section:nth-child(even)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%; /* 疑似要素を中央に配置 */
    transform: translateX(-50%); /* 中央揃えのための調整 */
    width: 100vw; /* ビューポート全体の幅 */
    height: 100%;
    background-color: var(--color-background-light); /* style.css の色を使用 */
    z-index: -1; /* コンテンツの背面に配置 */
}

/* カラム共通スタイル */
.feature-column {
    min-width: 300px; /* 折り返す前の最小幅。必要に応じて調整してください。 */
    box-sizing: border-box; /* パディングとボーダーを要素の総幅と高さに含める */
}

/* type-2-layout の場合の左カラム画像上寄せ (例: routing_02.html) */
.product-container.type-2-layout .feature-column.left-column {
    display: flex;
    align-items: flex-start; /* 子要素を垂直方向の上端に配置 */
    justify-content: center; /* 子要素を水平方向の中央に配置 */
}

/* レイアウトタイプ別のカラム幅定義 */
/* Type 1 Layout (Guitar Page): Left 1.5, Right 1 */
.type-1-layout .left-column { flex: 1.5; }
.type-1-layout .right-column { flex: 1; }
/* Type 2 Layout (Routing Page): Left 1, Right 1 (Equal) */
.type-2-layout .left-column,
.type-2-layout .right-column { flex: 1 1 0%; }

.product-features-section .product-feature-title {
    font-family: 'Oswald', 'Roboto', sans-serif; /* Oswald を優先、フォールバックは Roboto */
    font-weight: 400; /* Oswald タイトルの標準的なウェイト */
    font-size: 33px;  /* guitar/index.html または希望のサイズに合わせて調整 */
    line-height: 1.1;
    color: #5a5a5a; /* より暗く、モダンな色 */
    margin-top: 0;
    margin-bottom: 2px;
}

.product-category-model-subtitle, /* 一貫性のために index のクラスを再利用 */
.product-feature-subtitle { /* より具体的なクラスも追加 */
    font-family: 'Oswald', 'Roboto', sans-serif; /* Oswald を優先 */
    font-size: 22px; /* guitar/index.html に合わせるか調整 */
    color: #555;
    margin-top: 5px;
    margin-bottom: 20px;
    line-height: 1;
}

.feature-subheading {
    font-size: 1.1em;
    font-weight: 400;
    margin-bottom: 0.5em;
    margin-top: 1em;
}

.product-readmore-link {
    display: block; /* 既にCSSで定義されている可能性もあります */
    margin-top: 15px; /* 既にCSSで定義されている可能性もあります */
    text-decoration: none; /* 既にCSSで定義されている可能性もあります */
}

.product-readmore-icon {
    height: 35px; /* 既にCSSで定義されている可能性もあります */
    vertical-align: middle; /* 既にCSSで定義されている可能性もあります */
    /* margin-top: 15px; は、親要素の .product-readmore-link の margin-top との兼ね合いで調整が必要な場合があります。
       もしアイコンをリンクテキストからさらに下げたい意図がなければ、この指定は不要かもしれません。 */
}

.feature-divider {
    border: 0;
    height: 1px;
    background-color: #e0e0e0; /* 微妙な区切り線のための明るいグレー */
    margin-top: 0; /* サブタイトルに margin-bottom があるため調整 */
    margin-bottom: 20px;
}

.feature-description p {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.3; /* 読みやすさ向上のために増加 */
    color: #555;
    margin-bottom: 1em; /* 標準的な段落のスペース */
    text-align: justify; /* 本文テキストを両端揃えに */
}
.feature-description p:last-child {
    margin-bottom: 0;
}

/* 右カラムの本文ブロック全体の下マージンを追加 */
.feature-column.right-column .feature-description {
    margin-bottom: 20px; /* 必要に応じてこの値を調整 */
}

/* 製品説明下の画像ペア */
.description-image-pair {
    display: flex;
    flex-wrap: wrap; /* 画面が狭い場合に折り返す */
    gap: 15px; /* 画像間の隙間 */
    margin-top: 20px; /* 説明文とのマージン */
    margin-bottom: 20px; /* 下の要素とのマージン */
}

.description-image-item {
    flex: 1 1 calc(50% - 7.5px); /* 基本は2カラム、gapを考慮 */
    max-width: calc(50% - 7.5px); /* flex-basisが効かない場合の保険 */
    box-sizing: border-box;
}

.description-image-item img {
    width: 100%;
    height: auto; /* アスペクト比を維持 */
    display: block;
}

/* Tablet Styles (e.g., iPad Air portrait and landscape) */
@media (min-width: 769px) and (max-width: 1024px) {
    .product-features-section {
        max-width: none; /* Override desktop max-width to allow wider content */
        margin-left: 0;  /* Remove desktop centering margin */
        margin-right: 0; /* Remove desktop centering margin */
        padding-left: 40px;  /* Increase left padding for tablet (e.g., iPad mini landscape) */
        padding-right: 40px; /* Increase right padding for tablet (e.g., iPad mini landscape) */
        /* Adjust top/bottom padding for tablet if different from desktop */
        padding-top: 60px;
        padding-bottom: 60px;
        /* Adjust gap for tablet if needed */
        gap: 0px;
    }
}

/* モバイル表示 (例: 600px以下で1カラムに) */
@media (max-width: 600px) {
    .description-image-item {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* 右カラムのアコーディオンボタンのスタイル */
.feature-column.right-column .accordion-button {
    background: none; /* デフォルトの背景を削除 */
    border: none; /* デフォルトのボーダーを削除 */
    padding: 10px 0; /* パディングを調整、特に新しいボーダーのために下部を調整 */
    width: 100%; /* ボタンがコンテナの全幅を取るようにする */
    text-align: left; /* テキストを左揃えにする */
    font-family: 'Roboto', sans-serif; /* 他のタイトルに合わせるか、必要に応じて定義 */
    font-size: 16px; /* 必要に応じてサイズを調整 */
    font-weight: 400;
    color: #333; /* テキストの色を設定 */
    cursor: pointer;
    border-bottom: 1px solid #e0e0e0; /* ボタンテキストの下にボーダーを追加 */
    margin-bottom: 8px; /* 開いたときのボタンボーダーとコンテンツ間のスペース - さらに縮小 */
}

/* 一般的なボタンスタイルからホバー/フォーカス効果が目立ちすぎる場合は削除 */
.feature-column.right-column .accordion-button:hover,
.feature-column.right-column .accordion-button:focus {
    background: none; /* ホバー/フォーカス時に背景が変わらないようにする */
    /* color: #007bff; */ /* オプション: ホバー時にテキストの色を変更 */
}

/* アコーディオン内の製品仕様リストのスタイル */
.product-spec-list ul {
    list-style: none; /* デフォルトの箇条書きマークを削除 */
    padding-left: 0;  /* デフォルトのパディングを削除 */
    margin-top: 0; /* リスト自体の上マージンがないことを確認 */
    margin-bottom: 10px;
}

.product-spec-list li {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #444; /* 強調のために feature-description より少し暗く */
    /* padding-top: 0; */ /* 上パディングは不要な場合が多い */
    /* padding-bottom: 2px; */ /* margin-bottomで調整するためコメントアウトまたは削除 */
    /* border-bottom: 1px solid #f0f0f0; */ /* 不要であればこの行は削除を推奨 */
    margin-bottom: 0.5em; /* 各リストアイテム間のスペース */
    /* 2行目以降をインデントするための設定 */
    padding-left: 1em;  /* 2行目以降のインデント量 */
    text-indent: -1em; /* 1行目を左に戻す (padding-leftと同じ値) */
}
.product-spec-list li:last-child {
    margin-bottom: 0; /* 最後のリストアイテムの下マージンを削除 */
}

/* ボディカラーオプションのスタイル */
.body-color-content {
    padding-top: 8px; /* カラーオプションの上にスペースを追加 */
    padding-bottom: 0px; /* カラーオプションの下にスペースを追加 */
}

.body-color-options {
    display: flex;
    flex-wrap: wrap; /* 小さい画面ではアイテムを次の行に折り返す */
    gap: 15px; /* カラーオプションアイテム間のスペース */
    justify-content: flex-start; /* アイテムを先頭に揃えるか、均等なスペースのために space-around を使用 */
}

.color-option {
    flex-grow: 0; /* アイテムがコンテナ内で拡大しないようにする */
    flex-shrink: 1; /* 必要に応じてアイテムが縮小できるようにする */
    flex-basis: 75px; /* 各カラーオプションの基本幅を小さく設定 (例: 75px) */
    text-align: center; /* オプション内の画像とテキストを中央揃え */
    margin-bottom: 0px; /* 折り返した場合の各オプションの下のスペース */
}

.color-option img {
    width: 100%; /* 画像がコンテナの全幅を取るようにする */
    aspect-ratio: 1 / 1; /* 正方形のアスペクト比を維持 */
    object-fit: cover; /* 画像が正方形の領域をカバーするようにする、必要に応じてトリミング */
    border: 1px solid #ddd; /* 画像の周りの薄いボーダー */
    margin-bottom: 2px; /* 画像とカラー名間のスペース - 縮小 */
}

.color-name {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #555;
    margin: 0; /* Reset default paragraph margin */
    line-height: 1.1;
}

/* 必要に応じてカラーオプションのレスポンシブ調整 */
@media (max-width: 768px) {
    .color-option {
        flex-basis: calc((100% - 30px) / 3); /* スマートフォンで1行に3アイテム (gap 15px * 2 = 30px) */
    }
}

@media (max-width: 480px) {
    .color-option {
        flex-basis: calc((100% - 30px) / 3); /* 小さなスマートフォンでも1行に3アイテム */
        /* flex-basis: calc(50% - 7.5px); */ /* もし非常に小さい画面で2アイテムに戻す場合 */
    }
}

/* デモビデオコンテンツのスタイル */
.demo-video-content {
    padding: 0; /* ビデオコンテナがスペースを埋めるようにパディングを削除 */
}

.video-responsive-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 アスペクト比 (9 を 16 で割る = 0.5625) */
}

.video-responsive-container iframe {
    position: absolute;
    top: 6px; /* 注意: この 6px のオフセットが意図的か確認してください。通常は 0px です。 */
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; /* デフォルトの iframe ボーダーを削除 */
}

/* セクション内トップ画像 */
.product-features-section .feature-section-top-image {
    margin-bottom: 20px; /* 画像と下の2カラム間のスペースを調整 */
    line-height: 0; /* インライン画像の余分なスペースの可能性を削除 */
}

.product-features-section .feature-section-top-image img {
    width: 100%; /* 画像がコンテナの全幅を取るようにする */
    max-width: 100%; /* レスポンシブ対応 */
    height: auto; /* アスペクト比を維持 */
    display: block; /* 画像の下の余分なスペースを削除 */
    border-radius: 4px; /* オプション: 見た目のために角を少し丸くする */
}

/* parts.htmlの左側画像コンテナ内の画像がコンテナ幅に収まるようにする */
.routing-product-image-container img {
    max-width: 100%; /* 画像がコンテナの幅を超えないようにする */
    height: auto;    /* 画像のアスペクト比を維持する */
    display: block;  /* 画像下の余分なスペースを取り除く場合がある */
}

/* 2カラムレイアウトコンテナ */
/* HTML構造統一により、.additional-feature-section .feature-columns-container は不要になり、こちらに統合 */
.product-features-section .feature-columns-container {
    display: flex;
    flex-direction: row; /* デスクトップでは横並び */
    flex-wrap: wrap;     /* 必要に応じて折り返し */
    gap: 40px;           /* カラム間のスペース */
    width: 100%;
}

/* 最後の製品特徴セクションの下マージンを0にしてフッターとくっつける */
.product-container > .product-features-section:last-child {
    margin-bottom: 0;
}

/* スマートフォン向けレスポンシブスタイル */
@media (max-width: 768px) {
    /* スマホ表示時のトップ画像下のマージンを調整 */
    .product-features-section .feature-section-top-image {
        margin-bottom: 0px; /* 画像と下の2カラム間のスペースを詰める (importantを削除) */
    }

    .product-features-section {
        padding-left: 30px;  /* iPad mini portrait: left padding */
        padding-right: 30px; /* iPad mini portrait: right padding */
        padding-top: 40px; /* importantを削除 */
        padding-bottom: 40px; /* importantを削除 */
        margin-bottom: 0; /* スマホ表示時のセクション下マージンを0に (importantを削除) */
        /* max-width: none !important; */ /* iPad mini修正前の状態に戻すことを考慮しコメントアウト */
        /* margin-left: 0 !important; */   /* iPad mini修正前の状態に戻すことを考慮しコメントアウト */
        /* margin-right: 0 !important; */  /* iPad mini修正前の状態に戻すことを考慮しコメントアウト */
        gap: 0px; /* 上のカラムコンテナと下のReadMoreコンテナ間の隙間をなくす */
    }

    .product-container > .product-features-section:last-child {
        margin-bottom: 0; /* importantを削除 (上記の .product-features-section の margin-bottom: 0; でカバーされることが多い) */
    }

    .product-features-section .feature-columns-container {
        flex-direction: column; /* モバイルでは縦積み */
        gap: 25px;
    }

    .feature-column {
        min-width: 0; /* スマホではカラムが縦積みになるので、min-widthをリセット */
        flex-basis: 100%; /* 各カラムが全幅を取るようにする */
    }

    /* モバイルではレイアウトタイプに関わらずカラム比率をリセット */
    .product-features-section .left-column,
    .product-features-section .right-column {
        flex: 1 1 auto; /* モバイルではflex比率をリセット */
    }

    /* スマホ用に製品タイトルのセレクタをPC用と合わせるか、より具体的にする */
    .product-features-section .product-feature-title {
        font-size: 28px; /* スマホ用に調整 (例: 24px) */
        overflow-wrap: break-word; /* 長い単語がはみ出るのを防ぐために追加 */
    }

    .product-feature-subtitle {
        font-size: 19px; /* スマホ用に調整 */
    }

    /* スマホ表示時の「Read More」ボタンコンテナの上のマージン */
    .feature-full-width-container {
        margin-top: 20px;
    }

    .product-readmore-link {
        margin-top: 0px !important; /* スマホ表示時にRead Moreボタンのmargin-topを30pxに設定 (インラインスタイルを上書き) */
    }
}

/* Product Intro Section Styles (case.html用) */
.product-intro-section {
    background-color: #fff; /* 背景を白に設定 */
    padding-top: 40px;    /* セクション上下のパディング */
    padding-bottom: 40px;
}

.product-intro-section .container {
    /* .container のスタイルは main.css または style.css で定義されている想定 */
    /* テキストブロックと動画が中央のコンテナに収まるように設定 */
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.product-intro-section .intro-text-block {
    text-align: justify; /* 本文テキストを両端揃えに */
    margin-bottom: 30px; /* テキストブロックと動画の間隔 */
    line-height: 1.8; /* 行間を調整 */
    font-size: 16px;  /* フォントサイズを調整 */
}

.product-intro-section .intro-video-wrapper {
    max-width: 60%; /* 動画コンテナの幅を約2/3に設定 */
    max-height: 100%;
    margin-bottom: 50px;
    margin-left: auto;  /* 中央寄せ */
    margin-right: auto; /* 中央寄せ */
}

/* スマートフォン向けイントロセクション動画の調整 */
@media (max-width: 768px) {
    .product-intro-section .intro-video-wrapper {
        max-width: 100%; /* スマホでは動画コンテナの幅を100%に */
        margin-bottom: 10px; /* スマホ表示時の動画下のマージンを調整 */
    }
}


/* Category Navigation Bar */
.category-nav {
    background-color: rgba(255, 255, 255, 0.8); /* 背景白、透明度80% */
    padding: 0px 40px; /* 上下左右のパディング */
    text-align: center; /* リンクを中央揃え */
    margin-bottom: 10px; /* ナビゲーションバーとメインコンテンツの間のスペース */
    width: 100%;
    box-sizing: border-box;
    position: sticky; /* スクロール時に上部に固定 */
    top: 80px; /* 重要: この値 (60px) は、実際の固定ヘッダーの高さに合わせて調整してください。 */
    z-index: 500; /* 他の要素（特にヘッダー）との重なり順を調整。必要に応じて値を変更してください。 */
}

.category-nav-link {
    margin: 0 10px; /* リンク間の左右マージン */
    text-decoration: none;
    color: #595959; /* リンクの文字色 */
    font-weight: 400;
    font-size: 0.8rem; /* フォントサイズ (ベースフォントに合わせる) */
    letter-spacing: 1px; /* リンクの文字間隔 */
    padding: 5px 3px; /* クリック領域のための若干のパディング */
    transition: color 0.2s ease-in-out;
    display: inline-block; /* マージンとパディングを正しく適用するため */
}

.category-nav-link:hover,
.category-nav-link.active { /* ホバー時とアクティブ時のスタイル */
    color: #2a52a7; /* 例: ブランドカラーに合わせたアクティブ色 */
}

.category-nav-separator {
    color: rgba(51, 51, 51, 0.5); /* 区切り文字の色 */
    margin: 0 3px; /* 区切り文字の左右マージン */
    display: inline-block; /* 他の要素との整列のため */
    user-select: none; /* 区切り文字を選択不可に */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .category-nav-link {
        font-size: 0.9rem; /* スマホ版フォントサイズを小さく */
        margin: 0 5px;
    }
    .category-nav-separator {
        margin: 0 2px;
    }
    .category-nav {
        padding: 0px 10px;
        margin-bottom: 15px;
        top: 60px; /* スマホ・タブレット時の固定ヘッダーの高さに合わせる */
    }
}

@media (max-width: 480px) {
    .category-nav-link {
        font-size: 0.65rem; /* さらに小さいスマホ版フォントサイズを小さく */
        margin: 5px 3px; /* 小画面では縦方向のマージンも考慮して折り返しやすくする */
    }
    .category-nav-separator {
        margin: 5px 1px; /* 小画面では縦方向のマージンも考慮 */
    }
}

/* Fancyboxのポップアップモーダルとコンテンツのサイズ調整 (カスタムクラスを使用) */
/* .custom-fancybox-popup が Fancybox の一番外側のコンテナに付与される */

.custom-fancybox-popup .fancybox__content {
    max-width: 70vmin !important;   /* モーダルの最大寸法をビューポートの短辺の70%に */
    max-height: 70vmin !important;  /* モーダルの最大寸法をビューポートの短辺の70%に */
    width: 100% !important;       /* 親スライドに対して幅100%を目指す (max-widthで制限) */
    height: auto !important;      /* コンテンツの高さに合わせて自動調整 (max-heightで制限) */
    margin: auto !important;      /* スライド内でコンテンツを中央揃え */
    display: flex !important;     /* 子要素（画像）を中央揃えするため */
    align-items: center !important;
    justify-content: center !important;
    background-color: #fff !important; /* コンテンツエリアの背景を白に設定 */
    padding: 15px !important; /* 上下左右すべて 15px の固定余白 */
    box-sizing: border-box !important; /* パディングを幅と高さに含める */
}

.custom-fancybox-popup .fancybox__image {
    max-width: 100% !important;   /* 親要素(.fancybox__content)の幅に対して最大100% */
    max-height: 100% !important;  /* 親要素(.fancybox__content)の高さに対して最大100% */
    width: 100% !important;       /* 親コンテナのコンテンツ領域の幅いっぱいに広げる */
    height: auto !important;      /* 画像の縦横比を維持して高さを自動調整 */
    display: block !important;
    object-fit: contain !important; /* 画像がコンテナに収まるようにアスペクト比を維持して調整 */
    /* SVGが自身のviewBoxに基づいてアスペクト比を維持するように、
       widthとheightをautoではなく、コンテナに合わせるように指定変更 */
    /* もしSVG内にwidth/height属性がある場合、それらを上書きする効果も期待 */
}

/* Read More Scrollable Textbox (e.g., for routing_01.html) */
.scrollable-textbox {
    width: 100%; /* ボックスの幅 */
    /* height: 400px; */ /* 開いたときの目標の高さはJSでmax-heightとして設定するため削除 */
    margin-top: 8px; /* ボタンとのマージンを常に5pxに固定 */
    background-color: #f9f9f9;
    box-sizing: border-box; /* パディングとボーダーを要素の幅と高さに含める */
    /* --- Smooth transition properties --- */
    max-height: 0; /* 初期状態では折りたたむ */
    overflow: hidden; /* 折りたたまれた状態では内容を完全に隠す */
    /* padding: 15px; */ /* .is-open で制御するためコメントアウトまたは削除 */
    /* border: 1px solid #e0e0e0; */ /* .is-open で制御するためコメントアウトまたは削除 */

    /* 初期状態のパディングとボーダー (特に垂直方向を0に) */
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 16px; /* 水平パディングは内容表示時のために維持 */
    padding-right: 16px; /* 水平パディングは内容表示時のために維持 */
    border-style: solid;
    border-color: #e0e0e0;
    border-top-width: 0;
    border-bottom-width: 0;
    border-left-width: 1px; /* 水平ボーダーはデザインに応じて維持 */
    border-right-width: 1px; /* 水平ボーダーはデザインに応じて維持 */

    transition: max-height 0.3s ease-in-out,
                padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out,
                border-top-width 0.3s ease-in-out, border-bottom-width 0.3s ease-in-out;
}

.scrollable-textbox.is-open {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.3;
    padding-top: 15px;
    padding-bottom: 15px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    /* max-height はJavaScriptで動的に設定されます */
}

.scrollable-textbox h4 {
    font-size: 16px;
    font-weight: 500;
    margin-top: 0; /* h4の見出しの上マージンを0に */
    margin-bottom: 0px;
    /* 必要であれば、margin-bottom も調整してください */
}

/* h4の直後に来るpタグの上マージンを調整してスペースを詰める */
.scrollable-textbox h4 + p {
    margin-top: 2px; /* 必要に応じてこの値を調整してください */
}

/* Full-width container below the 2-column layout */
.feature-full-width-container {
    margin-top: 0px; /* Default margin-top for this container */
    /* Add other styles for this container if needed */
}