/*
 Theme Name:   Oniwara Twenty Twenty-One Child
 Description:  twentytwentyone Child Theme
 Author:       Onigawara
 Template:     twentytwentyone
 Version:      9.9.9
 Text Domain:  twentytwentyone-child
*/

/* 1. 全体の基本設定（背景・文字色・センタリング） */
html, body {
    background-color: #000 !important;
    color: #fff !important;
    margin: 0;
    padding: 0;
    text-align: center;
}

/* 2. レイアウト幅の調整（メインコンテンツを広く、中央へ） */
#main-content,
.entry-content,
.site-main > article,
.post-thumbnail,
.entry-header,
.entry-footer,
.page .entry-content > * {
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/* 3. 見出し・本文のフォントとサイズ */
h2 {
    color: #DAAF08 !important;
    font-size: 1.8rem !important;
    margin-top: 2em !important;
    margin-bottom: 1em !important;
    line-height: 1.4 !important;
}

.entry-title {
    font-family: 'Noto Serif JP', serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    font-size: 2.5rem !important;
    color: #DAAF08 !important;
    text-align: center !important;
}

p, div {
    font-size: 1.1rem !important;
    line-height: 1.8 !important;
    margin-bottom: 1.5em !important;
}

/* 4. 余白の徹底排除（上下の隙間を詰める） */
.site-header {
    padding-top: 20px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

.primary-navigation { margin-bottom: 0 !important; }
.smart-slider-3 { margin-bottom: 10px !important; }

#main-content, .entry-content, .entry-header {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

.entry-title { margin-bottom: 10px !important; }

.site-footer {
    border-top: none !important;
    padding-top: 20px !important;
}

/* 5. 金色のボタン（.abtn） */
#btn-container {
    display: flex !important;
    justify-content: center !important;
    gap: 30px !important;
    margin-top: 40px !important;
    margin-bottom: 20px !important;
}

.abtn {
    display: flex !important;           /* inline-blockから変更 */
    flex-direction: column !important;  /* 縦並びに設定 */
    align-items: center !important;      /* 左右中央 */
    justify-content: center !important; /* 上下中央 */
    width: 250px !important;
    min-height: 70px !important;        /* height固定から、最低限の高さ指定に変更 */
    text-align: center !important;
    text-decoration: none !important;
    color: #000 !important;
    font-weight: bold !important;
    background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%) !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 7px 3px !important;       /* 上下に少し余白を持たせる */
    transition: transform 0.3s !important;
    line-height: 1.2 !important;        /* 60px固定を解除し、行間を詰める */
}

/* 英語テキスト用の設定 */
.english-text {
    display: block !important;
    font-size: 0.75em !important;       /* 文字サイズを小さく */
    font-weight: normal !important;     /* 英語は細字にして強弱をつける */
    margin-top: 5px !important;         /* 日本語との間隔 */
}

.abtn:hover { transform: scale(1.1) !important; }
/* 6. スマホメニューのカスタマイズ（最終決定版） */
/* --- スマホメニューの完全強制上書き --- */

/* 1. 「メニュー」という文字と、重なっている「×」を物理的に消去 */
.menu-toggle .menu-label,
.menu-toggle .icon-close,
.menu-toggle .icon-hamburger + .menu-label {
    display: none !important;
}

/* 2. 三本線（SVGアイコン）を金色にし、太くする */
.menu-toggle .icon-hamburger svg {
    display: block !important;
    fill: none !important;
    stroke: #DAAF08 !important; /* 金色 */
    stroke-width: 4px !important; /* 4pxでかなり太くなります */
    width: 35px !important;  /* 少し大きく */
    height: 35px !important;
}

/* 3. ボタンの背景・枠線・余計な装飾をすべてクリア */
.menu-toggle {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: #DAAF08 !important;
    min-height: 44px; /* タップしやすいサイズを確保 */
}

/* 4. メニューを開いた時の背景を黒くし、閉じるボタンも金色に */
.menu-modal, .menu-modal-inner {
    background-color: #000 !important;
}

.modal-close .icon-close svg {
    stroke: #DAAF08 !important;
    stroke-width: 4px !important;
}

/* メニュー展開後の背景と文字 */
.menu-modal, .menu-modal-inner, #site-navigation {
    background-color: #000 !important;
}

.primary-navigation-list li a {
    color: #fff !important;
    font-size: 1.2rem !important;
}
/* さらに強力な指定で上書き */
button#primary-mobile-menu-trigger {
    background: transparent !important;
    border: none !important;
}

button#primary-mobile-menu-trigger .icon-hamburger svg {
    stroke: #DAAF08 !important;
    stroke-width: 4px !important;
}

button#primary-mobile-menu-trigger .menu-label {
    display: none !important;
}

#onigawara-order-guide {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
    background: #000;
    color: #fff;
}

.section-title {
    color: #DAAF08 !important;
    font-size: 1.6rem !important;
    border-bottom: 1px solid #DAAF08;
    padding-bottom: 10px;
    margin: 50px 0 20px !important;
}

.section-lead {
    font-size: 0.95rem;
    margin-bottom: 30px;
}

/* 説明文の並列設定 */
.style-intro-container {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
}

.style-box {
    flex: 1;
    border: 1px solid #DAAF08;
    padding: 20px;
    border-radius: 4px;
    text-align: left;
}

.style-title {
    color: #DAAF08;
    font-size: 1.2rem;
    margin-top: 0 !important;
}

/* フローの並列設定 */
.flow-flex-container {
    display: flex;
    gap: 20px;
}

.flow-column {
    flex: 1;
}

/* 各ステップの共通デザイン */
.flow-node {
    border: 1px solid #DAAF08;
    padding: 15px 10px;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
    border-radius: 5px;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flow-arrow {
    color: #DAAF08;
    padding: 5px 0;
    font-size: 1.2rem;
}

/* 特殊なステップの色付け */
.pay-node { background-color: rgba(218, 175, 8, 0.15); }
.main-node { background: #DAAF08; color: #000; font-weight: bold; }
.sub-node { border-style: dashed; font-size: 0.8rem; }
.goal-node { border: 2px solid #DAAF08; font-weight: bold; font-size: 1.1rem; }
.oversea-node { color: #aaa; border-color: #555; }

/* 合流部分 */
.merge-arrow {
    font-size: 2.5rem;
    color: #DAAF08;
    margin-top: -5px;
}

/* スマホ表示ではすべて縦一列に */
@media (max-width: 600px) {
    .style-intro-container, .flow-flex-container {
        flex-direction: column;
    }
    .flow-column:first-child {
        margin-bottom: 20px;
    }
}

/* reCAPTCHAバッジを全ページで非表示にする */
.grecaptcha-badge {
    visibility: hidden !important;
}

/* --- 注文フローの並列設定（修正版） --- */

/* 1. 親コンテナ：ここをフレックスボックスにする */
.onigawara-flow-section .flow-container {
    display: flex !important;
    flex-direction: row;      /* 横に並べる */
    gap: 30px;                /* カード間の隙間 */
    align-items: stretch;     /* 高さを揃える */
    justify-content: center;
    max-width: 1000px;
    margin: 40px auto;
}

/* 2. 各カードの設定 */
.onigawara-flow-section .flow-card {
    flex: 1;                  /* 左右均等な幅 */
    min-width: 0;             /* flex崩れ防止 */
    background-color: #1a1a1a; /* 真っ黒より少し明るいグレーで立体感を出す */
    border: 1px solid #DAAF08; /* 金色の枠線 */
    padding: 25px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

/* 3. 各ステップの箱（既存のスタイルを継承しつつ調整） */
.flow-node {
    background-color: #000;
    border: 1px solid #DAAF08;
    color: #fff;
    padding: 15px 10px;
    margin: 5px 0;
    text-align: center;
    border-radius: 5px;
    font-size: 0.9rem;
    line-height: 1.4;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 4. 矢印 */
.flow-arrow {
    color: #DAAF08;
    text-align: center;
    padding: 5px 0;
    font-size: 1.2rem;
}

/* 特殊なステップの色分け（style.cssのトーンに合わせる） */
.pay-node {
    background-color: rgba(218, 175, 8, 0.2) !important; /* 金色の薄い背景 */
    font-weight: bold;
}
.goal-node {
    border-width: 2px !important;
    box-shadow: 0 0 10px rgba(218, 175, 8, 0.5); /* ゴールを光らせる */
}

/* スマホ表示：画面幅が768px以下になったら縦並び */
@media screen and (max-width: 768px) {
    .onigawara-flow-section .flow-container {
        flex-direction: column !important;
    }
    .onigawara-flow-section .flow-card {
        width: 100%;
    }
}
/* 確実に横並びにする設定 */
.onigawara-flow-section .flow-container {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px;
    justify-content: center;
    margin-top: 30px;
}

/* 枠ありノードの基本設定 */
.flow-node {
    border: 1px solid #DAAF08;
    background-color: #000;
    color: #fff;
    padding: 12px 5px;
    margin: 5px 0;
    text-align: center;
    border-radius: 4px;
    font-size: 0.9rem;
    min-height: 60px;
    /* 改行を効かせたい場合は block に、上下中央揃えしたい場合は flex になります */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ★改行を有効にし、枠を消す設定 */
.no-border {
    border: none !important;      /* 枠線を消す */
    background: transparent !important; /* 背景も透明に（お好みで） */
    display: block !important;    /* これで <br> が効くようになります */
    min-height: auto !important;  /* 高さ固定を解除 */
    padding: 10px 0 !important;
}

/* スマホ表示対応 */
@media screen and (max-width: 768px) {
    .onigawara-flow-section .flow-container {
        flex-direction: column !important;
    }
}
.yellow-node {
    background-color: #DAAF08 !important; /* style.cssのメインカラー */
    color: #000 !important;               /* 文字を黒に */
    font-weight: bold;
    border: none !important;              /* 黄色の場合は枠なしの方が綺麗です */
}
/* カテゴリータイトルのサイズ調整 */
.tax-product_cat .page-title {
    font-size: 1.2rem !important; /* お好みのサイズに調整してください */
    color: #DAAF08;
    margin-bottom: 20px;
}
/* 商品一覧の前に案内文を表示 */
.tax-product_cat .products::before {
    content: "※画像をクリックすると詳細が表示されます";
    display: block;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 0.9rem;
    margin-bottom: 20px;
}
/* 詳細ページの価格下のテキスト（短文説明）の装飾 */
.woocommerce-product-details__short-description {
    color: #fff !important;
    margin-top: 15px;
    line-height: 1.6;
    text-align: left; /* 詳細ページは左寄せの方が見やすいです */
}

/* 下部の「説明」タブを非表示にしたい場合（重複を避けるため） */
.woocommerce-tabs.wc-tabs-wrapper {
    display: none !important;
}
/* --- 商品価格のフォントサイズ調整 --- */

/* 1. 商品一覧（カテゴリーページ）の価格 */
.products .price,
.products .price .amount {
    font-size: 1.4rem !important; /* 標準より一回り大きく */
    color: #DAAF08 !important;   /* 金色を維持 */
    font-weight: bold !important;
    margin-top: 10px !important;
    display: block !important;
}

/* 2. 商品詳細ページの価格 */
.single-product .price,
.single-product .price .amount {
    font-size: 2.2rem !important; /* 詳細ページはさらに大きく強調 */
    color: #DAAF08 !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    display: block !important;
}

/* 3. 「円」や「税込」などの記号も含めた調整 */
.woocommerce-Price-currencySymbol {
    font-size: 0.8em !important; /* 円マークを少しだけ小さくして数字を際立たせる */
    margin-right: 2px;
}