/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/
body {
    font-family: "Noto Sans JP", sans-serif;
}

/* 外側のコンテナ：背景を黒にして横幅いっぱいに広げる */
.top-main-visual-container {
    background-color: #000000; /* 画像の背景色と合わせる */
    width: 100%;
    display: flex;
    justify-content: center; /* 画像を中央寄せにする */
    align-items: center;
    overflow: hidden;
}

/* 内側の枠：画像の最大幅を1024pxに制限するか、広げるか選ぶ */
.top-main-visual-inner {
    width: 100%;
    max-width: 1024px; /* 画像本来のサイズで止めたい場合 */
    line-height: 0;
}

.top-main-visual-inner img {
    width: 50%;
    height: auto;
    display: block;
    margin-left: auto;  /* 追加：左側の余白を自動に */
    margin-right: auto; /* 追加：右側の余白を自動に */
}

.cmc-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 24px;
}

.cmc-child-category {
    background: #f9fafb;
    padding: 32px;
    margin-bottom: 48px;
    border-radius: 16px;
    border: 1px solid #eee;
}

.cmc-child-category h3 {
    font-size: 22px;
    margin-bottom: 12px;
    position: relative;
    padding-left: 14px;
}

.cmc-child-category h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 4px;
    height: 20px;
    background: #0073aa; /* アクセントカラー */
    border-radius: 2px;
}

.cmc-category-description {
    margin-bottom: 24px;
    color: #555;
    line-height: 1.8;
    font-size: 15px;
}

.cmc-product-card {
    background: #fff;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cmc-product-card:hover {
    transform: translateY(-5px); /* 少し浮き上がる */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* 影をつける */
}

.cmc-product-card img {
    margin-bottom: 12px;
}

.cmc-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

/* =========================
   single-product 読みやすさ改善
========================= */

/* 全体の最大幅と中央寄せ */
.cmc-main-article {
    margin: 0 auto;
    padding: 40px 20px;
}

/* タイトル */
.cmc-main-article .entry-header h1 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 24px;
    line-height: 1.4;
}

/* 本文 */
.entry-content {
    font-size: 16px;
    line-height: 1.9;
    margin-bottom: 48px;
}

/* セクション共通 */
.product-custom-fields section {
    margin-bottom: 56px;
}

/* セクション見出し（仕様・FAQ・購入など） */
.scf-label {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #0073aa;
}

/* 仕様 */
.spec-content {
    font-size: 15px;
    line-height: 1.8;
    background: #f9fafb;
    padding: 20px;
    border-radius: 10px;
}

/* その他説明 */
.product-etc h3 {
    font-size: 18px;
    margin-bottom: 8px;
}

.etc-text {
    font-size: 15px;
    line-height: 1.8;
}

/* FAQ */
.related-faq {
    background: #f5f7fa;
    padding: 32px;
    border-radius: 16px;
}

.faq-item {
    padding: 16px 0;
    border-bottom: 1px solid #ddd;
}

.faq-question {
    display: block; 
    width: 100%;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    padding: 12px 40px 12px 0;  /* 上下にも余白 */
    margin: 0;
}

/* ＋マーク */
.faq-question::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 0;
    font-size: 20px;
    transition: transform 0.3s ease;
}

/* 開いたとき */
.faq-item.active .faq-question::after {
    content: "−";
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    font-size: 15px;
    line-height: 1.8;
}

/* 開いたとき */
.faq-item.active .faq-answer {
    margin-top: 12px;
}

/* 購入リンク */
.shopping-links {
    background: #ffffff;
    padding: 32px;
    border-radius: 16px;
    border: 1px solid #eee;
}

/* ショップリンク全体のグリッド */
.link-grid {
    display: flex;
    flex-direction: column;
    gap: 32px; /* 各ショップ（楽天・Amazon・Yahoo）の間の余白を広げる */
    align-items: center;
}

/* 各ショップの塊 */
.shop-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* 中身を中央に揃える */
    width: 100%;
}

/* ボタン共通 */
.link-grid a[class^="btn-"] {
    display: inline-block;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease; /* transitionを少し長めに */
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 軽い影で立体感を出す */
    width: 100%;
    max-width: 400px;
    margin-bottom: 8px; /* 説明文との距離 */
}
/* ホバー時の共通動作：ピンク色を回避し、少し浮き上がらせる */
.link-grid a[class^="btn-"]:hover {
    color: #fff !important; /* テーマのピンクを強制上書き */
    transform: translateY(-3px); /* 上に3px浮かせる */
    box-shadow: 0 6px 12px rgba(0,0,0,0.15); /* 影を深くする */
}

/* 楽天 */
.btn-rakuten {
    background: #a50000;
    color: #fff;
}
.btn-rakuten:hover {
    background: #800000; /* 少し暗い赤にする */
}

/* Amazon */
.btn-amazon {
    background: #ff9900;
    color: #000;
}
.btn-amazon:hover {
    background: #e68a00; /* 少し暗いオレンジにする */
}

/* Yahoo */
.btn-yahoo {
    background: #ff0033;
    color: #fff;
    border-bottom: 3px solid #b30024; /* 下線をつけてボタンっぽさを強調 */
}
.btn-yahoo:hover {
    background: #e6002e;
}

/* ショップ説明文（現在のリンク先：〇〇） */
.shop-description {
    font-size: 14px;
    color: #666;
    margin-bottom: 6px;
    background: #f9f9f9;
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid #eee;
    display: inline-block;
    text-align: center;
}

.shop-description p {
    margin: 0;
}

/* ショップ名の強調色 */
.amazon-group .shop-description strong { color: #ff9900; }
.yahoo-group .shop-description strong { color: #ff0033; }

/* 代理店リンク */
.agency-wrapper {
    margin-top: 2px;
}

.agency-link {
    font-size: 13px !important;
    color: #0073aa;
    text-decoration: underline;
}

.btn-back-category {
display: inline-block;
    background: #0073aa;
    color: #fff !important;
    padding: 14px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    min-width: 250px; /* ボタンが潰れないように */
}

.btn-back-category:hover {
    background: #005580;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* 関連商品セクションの余白調整 */
.related-products {
    margin-top: 80px;
    padding: 0 20px;
}

.related-products h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: 2px solid #0073aa;
}

/* 関連商品のグリッドが article の中で正しく動くように */
.related-products .cmc-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}


/* スマート戻るボタン（JavaScript用） */
.btn-back-smart {
    display: inline-block;
    background: #f0f0f0; /* 少し控えめなグレー */
    color: #333 !important;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    border: 1px solid #ccc;
    transition: all 0.3s ease;
}
.btn-back-smart:hover {
    background: #e0e0e0;
}

/* トップへ戻るボタン（メインの導線） */
.btn-back-home {
    display: inline-block;
    background: #0073aa; /* single-product.phpの「一覧に戻る」と統一 */
    color: #fff !important;
    padding: 14px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.btn-back-home:hover {
    background: #005580;
    transform: translateY(-2px);
}
/* =========================
   Mobile Typography Improve
========================= */

@media (max-width: 768px) {

    /* 本文 */
    .entry-content {
        font-size: 17px;
        line-height: 1.9;
    }

    /* 仕様・説明文 */
    .spec-content,
    .etc-text {
        font-size: 16px;
        line-height: 1.9;
    }

    /* FAQ 質問 */
    .faq-question {
        font-size: 17px;
    }

    /* FAQ 回答 */
    .faq-answer {
        font-size: 16px;
        line-height: 1.9;
    }

    /* セクション見出し */
    .scf-label {
        font-size: 20px;
    }

    .link-grid {
        gap: 40px; /* スマホでは各ボタンのまとまりをより明確に離す */
    }
    .shop-description {
        font-size: 13px;
        width: auto;
        max-width: 90%;
    }

}