/*
	Theme Name: diver_child
	Template: diver
	Description:  Diverの子テーマです。
	Theme URI: http://tan-taka.com/diver/
	Author: Takato Takagi
 */

/* カスタマイズする場合にはこれより下に追記してください  */

/* --- FX会社情報テンプレート専用スタイル --- */

/* テンプレート全体を囲むIDで、テーマCSSからの影響を最大限に防ぐ */
#fx-template {
  max-width: 800px;
  margin: 0 auto;
  font-family: 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
  color: #333;
  line-height: 1.7;
  font-size: 16px;
  background: #fff;
  padding: 20px;
}
/* テンプレート内の全要素のスタイルを一旦リセットし、テーマの影響を断ち切る */
#fx-template * {
  all: revert;
  box-sizing: border-box;
}

/* --- ここからテンプレートの基本スタイル --- */
#fx-template h1 {
  font-size: 24px;
  font-weight: bold;
  border-bottom: 3px solid #8BC34A;
  padding-bottom: 10px;
  margin: 0 0 20px 0;
}
#fx-template h3 {
  font-size: 20px;
  font-weight: bold;
  border-left: 5px solid #8BC34A;
  padding: 4px 10px;
  margin: 30px 0 20px 0;
}
#fx-template p { margin-bottom: 1em; }
#fx-template a { color: #0073aa; }
#fx-template img { max-width: 100%; height: auto; border: 1px solid #eee; }

/* 特徴セクション */
#fx-template .fx-feature-box {
  border: 1px solid #ccc;
  padding: 20px;
  margin: 20px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
#fx-template .fx-feature-box-left { flex: 1; min-width: 200px; }
#fx-template .fx-feature-box-right { flex: 2; min-width: 300px; }
#fx-template .fx-feature-box-right h4 {
  margin: 0 0 15px 0;
  font-size: 18px;
  font-weight: bold;
  color: #4CAF50;
  border-bottom: 2px solid #4CAF50;
  display: inline-block;
  padding-bottom: 5px;
}
#fx-template .fx-feature-box-right ul { list-style-type: none; padding-left: 0; margin: 0; }
#fx-template .fx-feature-box-right li {
  padding-left: 1.8em !important;
  position: relative;
  margin-bottom: 10px;
}
#fx-template .fx-feature-box-right li::before {
  content: '✔';
  color: #4CAF50;
  font-weight: bold;
  position: absolute;
  left: 0;
  font-size: 1.2em;
}

/* キャンペーンセクション */
#fx-template .fx-campaign-box {
  border: 2px solid #FF9800;
  background-color: #FFF3E0;
  padding: 20px;
  margin-bottom: 20px;
}
#fx-template .fx-campaign-box h4 {
  margin: 0 0 15px 0;
  font-size: 18px;
  font-weight: bold;
  color: #E65100;
}


/* ★★★ ここからが表組みを再現するスタイル ★★★ */

/* --- リスト全体のコンテナ --- */
#fx-template .fx-detail-list,
#fx-template .fx-company-info-list {
    border: 1px solid #ddd;
    margin-bottom: 30px;
}

/* --- 各行のスタイル --- */
#fx-template .fx-dl-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #ddd;
    margin: 0;
}
#fx-template .fx-detail-list .fx-dl-row:last-child,
#fx-template .fx-company-info-list .fx-dl-row:last-child {
    border-bottom: none;
}

/* --- dt(項目名), dd(内容)の共通スタイル --- */
#fx-template .fx-dl-row dt,
#fx-template .fx-dl-row dd {
    padding: 15px;
    margin: 0;
    line-height: 1.6;
}

#fx-template .fx-dl-row dt {
    background-color: #f7f7f7;
    font-weight: bold;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#fx-template .fx-dl-row dd {
    flex-grow: 1;
    flex-basis: 0;
    min-width: 0;
}

/* --- 詳細情報リストの個別スタイル --- */
#fx-template .fx-detail-list dt {
    width: 170px;
    border-right: 1px solid #ddd;
}

/* --- 会社情報リストの個別スタイル --- */
#fx-template .fx-company-info-list dt {
    flex-basis: 20%;
    min-width: 130px;
    border-right: 1px solid #ddd;
}
#fx-template .fx-company-info-list dd {
    flex-grow: 1;
    flex-basis: 0;
    min-width: 0;
    border-right: 1px solid #ddd;
}
#fx-template .fx-company-info-list .fx-dl-row dt:only-of-type + dd {
    flex-basis: 0;
}
#fx-template .fx-company-info-list .fx-dl-row dd:last-child {
    border-right: none;
}

/* --- dd内のコンテンツ調整 --- */
#fx-template .fx-dl-row dd > *:first-child { margin-top: 0; }
#fx-template .fx-dl-row dd > *:last-child { margin-bottom: 0; }

/* 通貨ペアリスト */
#fx-template .currency-pair-list {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 15px;
}
#fx-template .currency-pair-list > * { font-size: 14px; color: #CCCCCC; }
#fx-template .currency-pair-list strong { font-weight: bold; color: #000000; }


/* ▼▼▼【新規追加】dd内の新しいリストのためのスタイル ▼▼▼ */
#fx-template .inner-list {
    font-size: 14px;
}

/* ▼▼▼【新規追加】列形式スプレッドリストのスタイル ▼▼▼ */
#fx-template .spread-column-container {
    display: flex;
    width: 100%;
    text-align: center;
}
#fx-template .spread-column {
    flex: 1; /* すべての列を均等幅に */
    display: flex;
    flex-direction: column;
    border-right: 1px solid #eee;
}
#fx-template .spread-column:last-child {
    border-right: none;
}
#fx-template .spread-header {
    background-color: #e8f5e9; /* 背景色を薄い緑に */
    padding: 8px 5px;
    font-size: 14px;
    font-weight: bold;
    border-bottom: 1px solid #ddd;
    color: #333;
}
#fx-template .spread-value {
    font-size: 24px;
    font-weight: bold;
    padding: 20px 5px;
    flex-grow: 1; /* 高さを揃えるため */
    display: flex;
    align-items: center;
    justify-content: center;
}
#fx-template .spread-note {
    font-size: 13px;
    color: #555;
    padding: 10px 5px;
}
#fx-template .spread-value .pips {
    font-size: 0.6em; /* 'pips'の文字サイズを調整 */
    margin-left: 3px;
    align-self: center;
    font-weight: normal;
}
/* ▲▲▲ ここまで ▲▲▲ */

/* 3カラムリスト（注文方法、クイック入金） */
#fx-template .three-column-list {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    line-height: 1.6;
    width: 100%;
}
#fx-template .three-column-list > div {
    width: 33%;
    padding: 0 5px;
}

/* ▲▲▲ ここまで ▲▲▲ */


/* --- ボタン --- */
#fx-template .fx-button-wrap {
    text-align: center;
    margin-bottom: 30px;
}
#fx-template .fx-button {
  display: inline-block;
  background: linear-gradient(to bottom, #FFC107, #FF8F00);
  color: #333 !important;
  font-weight: bold;
  text-decoration: none;
  padding: 15px 40px;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  border-bottom: 3px solid #E65100;
}
#fx-template .fx-button:hover { opacity: 0.9; }

/* --- レスポンシブ対応 --- */
@media (max-width: 600px) {
    #fx-template .fx-dl-row {
        flex-direction: column;
    }
    #fx-template .fx-dl-row dt,
    #fx-template .fx-dl-row dd {
        border-right: none;
        width: 100% !important;
        flex-basis: auto !important;
    }
    #fx-template .fx-dl-row dt {
        border-bottom: 1px solid #ddd;
        text-align: left;
        padding-left: 15px;
        justify-content: flex-start;
    }

    #fx-template .three-column-list {
        flex-direction: column;
        gap: 10px;
    }
    #fx-template .three-column-list > div {
        width: 100%;
    }
}