/* css/broker.css */

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color :var(--light-bg);
}

main {
    background-color: var(--light-bg); /* light-bg を適用 */
}

/* 目次 */
/* 目次全体のセクション */
#toc-content {
  display: none; /* ← デフォルトで非表示 */
}

.table-of-contents.open #toc-content {
  display: block;
}

.table-of-contents {
  /*margin: 2em 0;*/
  background-color: #effaf0;
  padding: 1em 1.5em;
  border: 1px solid #ccc;
  border-radius: 10px;
  max-width: 800px;
  margin: 2em auto;
}

/* 折りたたみボタン */
.table-of-contents .toggle-button {
  background-color: white;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  border-radius: 10px;
  padding: 0.3em 1em;
  font-size: 1em;
  cursor: pointer;
  margin-bottom: 1em;
}

/* 番号付きリストの基本設定 */
.table-of-contents ol {
  list-style: none;
  padding-left: 0;
  counter-reset: toc-counter;
  text-align: left;
}

/* メインのリストアイテム（1, 2, 3...） */
.table-of-contents > #toc-content > ol > li {
  counter-increment: toc-counter;
  margin: 0.4em 0;
  position: relative;
  padding-left: 2em;
}

.table-of-contents > #toc-content > ol > li::before {
  content: counter(toc-counter) ". ";
  position: absolute;
  left: 0;
  font-weight: bold;
}

/* サブ項目（6-1, 6-2...） */
.table-of-contents > #toc-content > ol > li > ol {
  list-style: none;
  padding-left: 0;
  counter-reset: sub-counter;
  margin-top: 0.3em;
}

.table-of-contents > #toc-content > ol > li > ol > li {
  counter-increment: sub-counter;
  margin: 0.3em 0 0.3em 2em;
  position: relative;
  padding-left: 2.5em;
}

.table-of-contents > #toc-content > ol > li > ol > li::before {
  content: counter(toc-counter) "-" counter(sub-counter) ". ";
  position: absolute;
  left: 0;
  font-weight: normal;
}

/* リンクのスタイル */
.table-of-contents a {
  color: var(--primary-color);
  text-decoration: none;
}

.table-of-contents a:hover {
  text-decoration: underline;
}

/* 目次ここまで */



section[id],
h1[id],
h2[id],
h3[id],
h4[id],
h5[id],
h6[id] {
  scroll-margin-top: 80px;
}


/* ブローカー詳細ページのヒーローセクション */
.broker-detail-hero {
    background-color: var(--light-bg);
    padding: 10px 20px;
    text-align: center;
    color: var(--dark-text);
}

.broker-detail-hero .broker-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

.broker-detail-hero .broker-logo {
    /*max-width: 900px; */
    max-width: 100%; 
    height: auto;
    margin-bottom: 20px;
}

.broker-detail-hero h1 {
    font-size: 2.8em;
    color: var(--primary-color);
    margin: 0;
}

.broker-detail-hero .broker-catchphrase {
    font-size: 1.3em;
    color: var(--secondary-color);
    margin-bottom: 40px;
}

.broker-link-btn {
    font-size: 1.1em;
    padding: 18px 35px;
}



/* ブローカーの特徴セクション */
.broker-features-section {
    background-color: var(--light-bg);
    padding: 60px 20px; /* 上下のパディングを60pxから40pxに縮小 */
    text-align: center;
}

.broker-features-section h2 {
    color: var(--primary-color);
    font-size: 2.2em;
    margin-bottom: 40px;
}

/* 既存の .features-grid と .feature-item を再利用 */
/* ただし、ここではテキストが中央寄せになるように調整 */
.broker-features-section .feature-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 120px; /* アイテムの最小高さを設定して、高さを揃える */
}

/* 紐付け方法セクション */
.broker-how-to-link {
    padding: 60px 20px; /* 上下のパディングを60pxから40pxに縮小 */
    text-align: center;
    background-color: var(--light-bg);
}

.broker-how-to-link h2 {
    color: var(--primary-color);
    font-size: 2.2em;
    margin-bottom: 40px;
}

/* 既存の .steps-grid と .step-item を再利用 */
.broker-how-to-link .step-item {
    text-align: center; /* ステップアイテムのテキストを中央寄せに */
}

/* リンクの色 */
.broker-how-to-link .step-item a {
    color: var(--primary-color) !important; /* 文字色をprimary-colorに設定 */
    text-decoration: none; /* 下線をなくす */
    font-weight: bold; /* 太字にする（任意） */
}

.broker-how-to-link .step-item a:hover {
    text-decoration: underline; /* ホバー時に下線を表示する（任意） */
    opacity: 0.8; /* ホバー時に少し透明にする（任意） */
}


.broker-bottom-btn {
    margin-top: 40px;
    font-size: 1.2em;
    padding: 20px 40px;
}
/*
.open-account-btn {
    margin-top: 0px;
    font-size: 1.2em;
    padding: 10px 20px;
}
*/
/* 下線つきのstrong */

.underline-strong {
    font-weight: bold; 
    text-decoration: none; 
    /*border-bottom: 5px solid #FFEB3B; */
    border-bottom: 5px solid rgba(255, 235, 59, 0.6);
    /*padding-bottom: 0px; */
    display: inline; 
}








.info-section {
    padding: 10px 20px; /* セクション全体の上下パディング */
    background-color: var(--light-bg); /* info-section の背景色も light-bg に変更 */
    text-align: center;
    max-width: 1020px;
    /*max-width: 900px;*/
    margin: 0 auto; 
}

.info-section h2 {
    color: var(--primary-color);
    font-size: 2.2em;
    margin-bottom: 40px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.info-item {
    background-color: var(--white); /* info-item 自体は白のまま維持 */
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.info-item h4 {
    color: var(--primary-color);
    font-size: 1.4em;
    margin-bottom: 10px;
}

.info-item p {
    font-size: 1.1em;
    color: var(--dark-text);
}


.info-block {
    background-color: var(--light-bg); /* info-block の背景色も light-bg に変更 */
    border-radius: 8px;
    padding: 0; 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    margin-bottom: 30px;
    overflow: hidden; 
}

/* 特定の info-block の背景色を強調するスタイル */
.info-block.info-block-highlight {
    background-color: var(--light-bg); /* 薄い緑色の背景 */
}


.info-block-header {
    background-color: var(--primary-color);
    padding: 15px 20px;
    text-align: center; /* タイトルを中央寄せにする */
    color: var(--white);
}

.info-block-title {
    font-size: 1.4em;
    font-weight: bold;
    color: var(--white); 
    margin: 0; 
}

.info-block-content {
    color: var(--dark-text);
    line-height: 1.8;
    padding: 20px 50px; 
    text-align: justify; 
    background-color: var(--white); /* 背景色を白に設定 */
}

/* 汎用的な背景色クラス */
.bg-light-bg {
    background-color: var(--light-bg) !important; /* 強制的に適用して他のスタイルを上書き */
}
.bg-white {
    background-color: var(--white) !important; /* 強制的に適用して他のスタイルを上書き */
}

/* 表のスタイル */
.cashback-rate-table-container {
    margin-top: 20px;
    margin-bottom: 20px;
    overflow-x: auto; /* スマホで表がはみ出る場合にスクロール可能にする */
}

.cashback-rate-table {
    width: 100%;
    border-collapse: collapse; /* セルの境界線を結合 */
    margin: 0 auto;
    font-size: 0.95em;
    color: var(--dark-text);
}

.cashback-rate-table td,
.cashback-rate-table th {
    vertical-align: top;
}



.wide-first-column td:first-child,
.wide-first-column th:first-child
 {
  width: 30%;
  /*white-space: nowrap;*/
  vertical-align: top;
}

.wide-first-column-20 td:first-child,
.wide-first-column-20 th:first-child
{
  width: 20%;
  vertical-align: top;
}

.wide-first-column-30 td:first-child,
.wide-first-column-30 th:first-child
{
  width: 30%;
  vertical-align: top;
}

.wide-first-column-50 td:first-child,
.wide-first-column-50 th:first-child {
  width: 50%;
  vertical-align: top;
}



.cashback-rate-table th,
.cashback-rate-table td {
    border: 1px solid #ddd; /* 罫線 */
    padding: 12px 15px;
    text-align: left;
}

.cashback-rate-table th { /* カラムタイトルの背景色を light-bg に統一 */
    background-color: var(--light-bg);
    color: var(--primary-color); /* タイトル文字色 */
    font-weight: bold;
}

/* 1列目のヘッダーとデータの背景色 */
.cashback-rate-table th:first-child,
.cashback-rate-table td:first-child {
    background-color: var(--light-bg); /* 左の列（td）は light-bg に */
}

.cashback-rate-table td:last-child { /* 右の列（td）は白のまま維持 */
    background-color: var(--white);
}


/* 特殊なテーブル */
.cashback-rate-table.advanced-table th {
    background-color: var(--light-bg); /* ヘッダー全体を light-bg に統一 */
    color: var(--primary-color);
}

.cashback-rate-table.advanced-table td:first-child {
    background-color: var(--light-bg); /* 1列目のデータセルを light-bg に */
}

/*テーブルの下につける備考*/
.table-note {
    font-size: 0.85em;
    color: var(--secondary-color);
    margin-top: 10px;
    text-align: left;
    line-height: 1.4;
}

/*テーブルの下につける箇条書き*/
.bullet-note-list {
    font-size: 0.85em;
    color: var(--secondary-color);
    line-height: 1.4;
    margin-top: 10px;         /* 上部余白 */
    margin-bottom: 1.5em;     /* 下部余白（段落と同じくらい） */
    padding-left: 20px;       /* デフォルトのリストのインデント */
    list-style-type: disc;    /* デフォルトの黒丸 */
}

.bullet-note-list li {
    margin-bottom: 0.5em;     /* 各リスト項目の下部余白 */
    text-align: left;
}

/* バナー*/
.banner-container { 
    text-align: center;
    margin-top: 20px;
    margin-bottom: 30px;
    padding: 0 10px;
}

.banner-container-50 {
    max-width: 50%;
    margin: 0 auto;
}

.banner-container-50 .banner {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}



.banner { 
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
}

/* 下線のあるサブセクションタイトルのスタイル */
.info-block-content .sub-section-title {
    font-size: 1.5em; /* 文字サイズ */
    font-weight: bold; /* 太字 */
    color: var(--dark-text); /* 文字色を濃い灰色に */
    margin-top: 30px; /* 上部の余白 */
    margin-bottom: 15px; /* 下部の余白 */
    text-align: left; /* 左寄せ */
    border-bottom: 3px solid var(--primary-color); /* 下線 */
    padding-bottom: 8px; /* 下線と文字の間隔 */
}

/* 縦線のあるサブセクションタイトルのスタイル */
.vertical-line-title {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--dark-text);
    margin-top: 40px;
    margin-bottom: 20px;
    text-align: left;
    display: flex;
    align-items: center;
}

.vertical-line-title::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 1.5em;
    background-color: var(--primary-color);
    margin-right: 10px;
    border-radius: 3px;
}


/* レスポンシブ対応 */
@media (max-width: 767px) {
    .broker-detail-hero .broker-logo {
        max-width: 400px; /* モバイルでのロゴの最大幅 */
    }

    .broker-detail-hero h1 {
        font-size: 2.2em;
    }
    .broker-detail-hero .broker-catchphrase {
        font-size: 1em;
    }
    .broker-link-btn {
        font-size: 1em;
        padding: 15px 30px;
    }

    .info-section {
        padding: 10px 5px 10px 5px;
    }

    .info-section h2,
    .broker-features-section h2,
    .broker-how-to-link h2 {
        font-size: 1.8em;
    }
    .info-grid {
        grid-template-columns: 1fr;
    }
    .info-item h4 {
        font-size: 1.2em;
    }
    .info-item p {
        font-size: 1em;
    }
    .broker-bottom-btn {
        font-size: 1.1em;
        padding: 15px 30px;
    }
    .broker-features-section .feature-item {
        min-height: 100px; /* モバイルでの最小高さを調整 */
    }    

    .banner-container-50 {
        max-width: 100%;
    }

    .banner-container {
        margin-top: 15px;
        margin-bottom: 20px;
        padding: 0 5px;
    }
    .banner {
        border-radius: 5px;
    }

    /* 特殊テーブルのモバイル調整 */
    .cashback-rate-table.advanced-table {
        font-size: 0.8em; /* モバイルでフォントを小さくする */
    }
    .cashback-rate-table.advanced-table th,
    .cashback-rate-table.advanced-table td {
        padding: 8px 10px; /* モバイルでのパディングを調整 */
    }
    .info-block-content {
        color: var(--dark-text);
        line-height: 1.8;
        padding: 20px 20px; 
    }

    .info-block-content .sub-section-title {
        font-size: 1.3em;
        margin-top: 20px;
        margin-bottom: 10px;
        padding-bottom: 5px;
        border-bottom-width: 2px;
    }
    .broker-how-to-link .step-item {
        min-height: 100px; /* モバイルでの最小高さを調整（任意） */
    }

    .vertical-line-title {
        font-size: 1.3em;
        margin-top: 30px;
        margin-bottom: 15px;
    }
    .vertical-line-title::before {
        width: 4px;
        height: 1.3em;
        margin-right: 8px;
    }
}

/* タブレット */
@media (min-width: 768px) and (max-width: 1023px) {
    .broker-detail-hero h1 {
        font-size: 2.5em;
    }
    .broker-link-btn {
        font-size: 1.05em;
        padding: 16px 32px;
    }
}