/* ---------------------------------------------------------------- */
/* H1タグ：ページタイトル（カテゴリー名/商品名）のスタイル */
/* ---------------------------------------------------------------- */
/* PC・スマホ共通のベース設定 */
h1 {
    color: #ffffff;
    font-family: "AR P明朝体 U", "Yu Mincho", "游明朝", serif;
    letter-spacing: 0.15em;
    text-align: center;
    
    /* 背景をうっすらグラデーションに */
    background: linear-gradient(to bottom, #1a1a1a, #000000); 
    border: 1px solid #333333;
    padding: 15px;
    
    /* 左右に余白を作り、右端にぶつかるのを防ぐ */
    width: 94%;
    margin: 15px auto;
    box-sizing: border-box;
    
    /* パソコン用の文字サイズ */
    font-size: 24px; 
}

/* ---------------------------------------------------------------- */
/* H2タグ：元のp.prodのデザイン・見やすさを100%完全復活させる */
/* ---------------------------------------------------------------- */
/* PC・スマホ共通のベース設定 */
h2 {
    /* 1. 見やすさを復活させるための文字設定 */
    font-size: 14px;             /* 文字サイズをしっかり確保 */
    font-weight: bold !important; /* 【重要】絶対に太字にする命令 */
    color: #ffffff !important;   /* 文字色を「純白」にして、オリーブ背景の中でバキッと目立たせる */
    text-align: left;            /* 左寄せ */
    line-height: 1.8em;          /* 行間を広げてゆったりと */
    
    /* 2. 重厚感のあるオリーブボックスの完全再現 */
    background-color: #67634E;   /* 本物のp.prodの色 */
    border: 4px #353227 solid;   /* 本物の極太枠線 */
    
    /* 3. 文字のまわりのゆとり（余白）を完全に再現 */
    padding: 12px 15px !important; /* 上下左右にしっかり余白を作り、文字を浮き立たせる */
    
    /* 4. 位置と横幅をH1と完璧に揃える設定 */
    width: 94%;                  /* H1と全く同じ横幅 */
    margin: 20px auto !important; /* 上下の隙間を作り、左右中央揃えにする */
    box-sizing: border-box;      /* 枠線を含めても幅がハミ出さない設定 */
    display: block;
}

/* ================================================================ */
/* 📱 スマホ用の微調整（H1とH2の崩れをここで同時に完璧に抑え込みます！） */
/* ================================================================ */
@media screen and (max-width: 768px) {
    /* スマホのH1設定（復活させました！） */
    h1 {
        font-size: 18px;               /* スマホ画面に合わせて文字をスマートに */
        padding: 10px;                 /* 窮屈にならない絶妙な余白 */
    }
    
    /* スマホのH2設定 */
    h2 {
        font-size: 13px;              /* スマホに最適な文字サイズ */
        padding: 10px 12px !important; /* スマホ用のスマートな余白 */
        border: 2px #353227 solid;    /* スマホでは枠線を2pxにして中身を広く */
        color: #ffffff !important;    /* スマホでも絶対に白文字をキープ */
    }
}