@charset "utf-8";
/*
Theme Name:   storefront - Child Custom for お正月検定
Theme URI:    https://woocommerce.com/products/storefront/
Author:       Automattic
Description:  Storefrontをお正月検定用に拡張。GEMINIによるhttps://gemini.google.com/app/4c756da4180d8849
Version:      1.2025.1
Template:    storefront
*/
/* --- お正月検定 カスタムデザイン --- */

/* 1. 全体背景に和柄を設定 */
/* ※別途「麻の葉文様」などの薄いパターンの画像をアップロードし、そのURLを指定してください */
body {
    background-color: #f7f3e8; /* 画像がない場合のベース色（生成り） */
    /* background-image: url('あなたのサイトの画像URL/asanoha-pattern.png'); */
    background-repeat: repeat;
    color: #333; /* 文字色を真っ黒から少し柔らかな黒へ */
}

/* 2. メインコンテンツをカード化（浮き上がらせる） */
/* Storefrontは .col-full や #page というラッパーを持っています */
.site {
    max-width: 960px; /* PCでの横幅制限 */
    margin: 40px auto; /* 上下の余白 */
    background-color: #ffffff;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1); /* ドロップシャドウ */
    border-radius: 2px; /* 角を少しだけ丸く */
    border-top: 6px solid #bf1e33; /* 祝いの赤ライン */
    
    /* === ここから背景画像を追加・変更 === */
    /* Storefrontの子テーマにアップロードした画像へのパスに置き換えてください */
    background-image: url('images/bg.png'); 
    
    /* 画像をコンテナの右上に配置 */
    background-position: top right;
    
    /* 画像を繰り返さず、一度だけ表示 */
    background-repeat: no-repeat;
    
    /* 画像のサイズを調整（任意：例えば、コンテナの幅に対して20%の幅にする） */
    /* background-size: 20%; */
    /* === ここまで背景画像を追加・変更 === */
}

/* モバイル対応：スマホでは画面いっぱいに */
@media (max-width: 768px) {
    .site {
        margin: 0;
        box-shadow: none;
        border-top: none;
    }
}

/* Storefrontのヘッダーの背景を透明化し、親要素の背景を透けさせる */
.site-header,
.site-header-wrapper,
.main-navigation,
.site-header .col-full {
    /* 重要なのは !important の使用、またはより高い詳細度を持つセレクタを使うことです */
    background-color: transparent !important;
    background: none !important;
}

/* 3. タイポグラフィの変更（明朝体へ） */
h1, h2, h3, h4, h5, h6, 
.site-title, 
.entry-title {
    font-family: 'Noto Serif JP', serif;
}

/* 4. 見出しのデザイン変更 */
.entry-title {
    text-align: center;
    border-bottom: none; /* デフォルトの下線を消す */
    margin-bottom: 1.5em;
    position: relative;
}

/* タイトルの下に赤いアクセント */
.entry-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: #bf1e33;
    margin: 15px auto 0;
}

/* 5. リンク色の変更（青から赤系へ） */
a {
    color: #bf1e33;
}
a:hover {
    color: #d4af37; /* ホバー時は金色 */
}

/* 6. 強調部分のマーカー風装飾 */
strong, b {
    background: linear-gradient(transparent 60%, #ffcccc 60%);
    color: #bf1e33;
}

/* 7. コンテンツエリアの余白調整 */
.site-content {
    padding: 40px;
}
@media (max-width: 768px) {
    .site-content {
        padding: 20px;
    }
}