@charset "UTF-8";

/* ==========================================================================
   1. 基本設定（全体共通）
   ========================================================================== */
html[lang="ja"] {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN","Noto Serif JP", Meiryo, sans-serif;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 20px;
    background-color: #fff;
    color: #333;
    line-height: 1.8;
    text-align: center;
}

@media screen and (max-width: 600px) {
    body { padding: 10px; }
}

/* ==========================================================================
   2. レイアウト構造
   ========================================================================== */
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

@media screen and (max-width: 600px) {
    .container { width: 100%; margin: 0; }
}

.logo {
    max-width: 300px;
    width: 100%;
    height: auto;
    margin: 20px 0;
}


.shopdata {
padding: 0px 10px;
}

/* ==========================================================================
   3. 文字・コンテンツ要素
   ========================================================================== */
p {
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 20px;
}

.hina-mincho-regular {
    font-family: "Hina Mincho", serif;
    font-weight: 400;
}

/* 左寄せテキストボックス */
.text4 {
    font-size: 1em;
    text-align: left;
    width: 98%;
    max-width: 600px;
    margin: 30px auto 0;
}

/* 特定の強調色 */
.pink {
    width: 100%;
    max-width: 600px;
    color: #fb8af2;
    font-weight: bold;
    margin: 0 auto;
}

/* スマホ時のみ表示される画像 */
.image-content3 {
    display: none;
    width: 98%;
    margin: 0 auto;
}

@media screen and (max-width: 600px) {
    .image-content3 { display: block; }
    .text-content { display: none; } 
}

.notice-box {
  max-width: 700px;
  font-size: 1em;
  line-height: 1.7;
  background-color: #f3f5f3;
  padding: 20px;
  text-align: left;
}

  .hover-img {
    transition: 0.3s ease;
  }

  .hover-img:hover {
    filter: brightness(150%);
  }

/* ==========================================================================
   4. 区切り線（共通化）
   ========================================================================== */
.separator, .separator2, .separator6 {
    width: 100%;
    max-width: 700px;
    margin: 20px auto;
    border: none;
}

.separator  { border-top: 2px solid #000; }
.separator2 { border-top: 4px solid #a50707; margin: 15px auto; }
.separator6 { border-top: 4px solid #a50909; margin: 30px auto; }

@media screen and (max-width: 600px) {
    .separator, .separator2, .separator6 { width: 95%; }
}

/* ==========================================================================
   5. ナビゲーション・ボタン
   ========================================================================== */
/* トグルメニュー用ボタン */
.show-menu-btn {
    background-color: #243547;
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    margin: 10px auto 20px;
    border-radius: 3px;
}

@media screen and (max-width: 600px) {
    .show-menu-btn { width: 100%; max-width: 200px; }
}

/* メニュー共通スタイル */
.menu, .menu2, .menu3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    width: 100%;
    max-width: 700px;
    margin: 10px auto;
}

.menu { display: none; } /* JSで表示制御 */

.menu a, .menu2 a, .menu3 a {
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 3px;
    font-size: 15px;
    transition: 0.3s;
    box-sizing: border-box;
}

/* 各メニュー固有の色・挙動 */
.menu a  { background-color: #f8f8f8; color: #333; flex: 1 1 auto; }
.menu2 a { background-color: #a50909; color: #fff; flex: 1 1 calc(25% - 5px); }
.menu3 a { background-color: #a50909; color: #fff; width: 100%; max-width: 600px; }

.menu a:hover, .menu2 a:hover, .menu3 a:hover {
    background-color: #e0e0e0;
    color: #333;
}

@media (max-width: 480px) {
    .menu2 a { flex: 1 1 calc(50% - 5px); }
}

/* ==========================================================================
   6. テーブル（表）
   ========================================================================== */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px auto;
}

th, td {
    border: 2px solid #fff;
    padding: 8px;
    text-align: center;
}

th { background-color: #e1f0ff; }

/* テーブルの特定セルの色 */
td[data-label="送料Ａ"] { background-color: #b9b9ff; }
td[data-label="送料Ｂ"] { background-color: #febfbc; }
td[data-label="地域区分"], td[data-label="都道府県"], 
td[data-label="支払い方法"], td[data-label="注文方法"] { background-color: #e1f0ff; }
td[data-label="説明"] { 
    background-color: #fbfbfb; 
    text-align: left; 
    font-size: 0.9em; 
}

/* スマホ用テーブル（縦並び） */
@media (max-width: 600px) {
    table, thead, tbody, th, td, tr { display: block; }
    th { position: absolute; top: -9999px; left: -9999px; }
    tr { border: 1px solid #fff; margin-bottom: 5px; }
    td {
        border: none;
        border-bottom: 1px solid #fff;
        position: relative;
        padding-left: 35%;
        text-align: left;
    }
    td:before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        width: 30%;
        font-weight: bold;
    }
}

/* ==========================================================================
   7. その他（マップ、フォーム枠など）
   ========================================================================== */
.order2 {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.map-container {
    width: 100%;
    max-width: 700px;
    aspect-ratio: 16 / 9;
    margin: 20px auto;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}






/* ==========================================================================
   連載コラム：共通設定
   ========================================================================== */
.article-header, 
.column-section {
    max-width: 650px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

/* --- 記事ヘッダー（トップエリア） --- */
.article-header {
    margin-bottom: 60px;
}

/* ブランドロゴ・ターゲット */
.brand-eyecatch {
    margin-bottom: 30px;
    display: inline-block;
}
.brand-name {
    font-size: 2em;
    font-weight: 900;
    letter-spacing: 0.15em;
    color: #a50909;
    margin-bottom: 4px;
    text-transform: uppercase;
}
.brand-eyecatch::after {
    content: "";
    display: block;
    width: 30px;
    height: 2px;
    background: #a50909;
    margin: 15px auto 0;
}
.target-copy {
    font-size: 0.85em;
    color: #666;
    letter-spacing: 0.1em;
}

/* メインビジュアル */
.main-visual-img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
    margin-bottom: 30px;
}

/* メインコピー（画像下） */
.main-copy {
    font-family: "Hina Mincho", serif;
    color: #243547;
    line-height: 1.6;
    font-weight: 400;
}
.copy-small, .copy-small2 {
    font-size: 0.5em;
    display: block;
    color: #555;
}
.copy-small { margin-bottom: 5px; }
.copy-small2 { margin-top: 5px; }

.copy-large {
    font-size: 1.1em;
    font-weight: bold;
    display: block;
    letter-spacing: 0.05em;

}
.copy-large2 {
    font-size: 1.1em;
    font-weight: bold;
    display: block;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* --- 導入メッセージ（シンプル版） --- */
.intro-message {
    text-align: left;
    margin: 50px 0;
    line-height: 2;
    color: #444;
    font-size: 1.1em;
}
.intro-message p {
    margin-bottom: 1.5em;
}

/* --- 商品紹介カード --- */
.product-intro-group {
    margin: 60px 0;
}
.intro-phrase {
    font-size: 0.9em;
    color: #888;
}
.product-card {
    padding: 35px 20px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #eee;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    max-width: 500px;
    margin: 0 auto;
}
.card-main {
    color: #243547;
    font-size: 1.4em;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 12px;
}
.card-sub {
    font-size: 0.85em;
    color: #a50909;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* --- 連載記事本文セクション --- */
.column-section {
    text-align: left;
    margin-bottom: 60px;
        color: #333;
        line-height: 1.8;
}
.column-badge {
    display: inline-block;
    background: #243547;
    color: #fff;
    padding: 4px 15px;
    font-size: 0.8em;
    border-radius: 20px;
    margin-bottom: 15px;
}
.column-title {
    font-size: 1.5em;
    color: #a50909;
    border-left: 4px solid #a50909;
    padding-left: 12px;
    margin-bottom: 30px;
    line-height: 1.4;
}

.column-content p{
	font-size:1.1em;
    line-height: 1.8;
    font-weight: 400;
    margin-bottom: 1.5em; /* 段落と段落の間を空ける */
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
}

.gentle-note {
    font-size: 0.85em;
    color: #777;
    background: #f4f4f4;
    padding: 12px;
    border-radius: 6px;
    margin-top: 10px;
}

/* 独白・強調装飾 */
.story-monologue {
    margin: 45px 0;
    padding-left: 20px;
    border-left: 2px solid #a50909;
}

.text-bold { font-weight: bold; color: #000; }
.text-accent { font-weight: bold; color: #a50909; }
.text-accent2 { font-weight: bold; color: #800080; }
.underline-dot {
    text-decoration: underline dotted #a50909;
    text-underline-offset: 4px;
    font-weight: bold;
    line-height: 1.8;
}


/* 区切りドット */
.dot-divider {
    text-align: center;
    margin: 40px 0;
}
.dot-divider span {
    display: inline-block;
    width: 4px; height: 4px;
    background: #ddd;
    border-radius: 50%;
    margin: 0 8px;
}

/* --- 結論セクション --- */

.product-name {
    font-size: 1.3em;
    font-weight: bold;
    color: #243547;
    position: relative;
    display: inline-block;
    padding: 10px 10px;
}
.product-name::before, .product-name::after {
    content: "";
    position: absolute;
    left: 0; width: 100%; height: 1px;
    background: #a50909;
}
.product-name::before { top: -8px; }
.product-name::after { bottom: -8px; }


.catch-text {
    font-family: "Hina Mincho", serif;
    font-size: 1.8em;
    color: #a50909;
    font-weight: bold;
}

/* --- 次へボタン（スマホ最適化） --- */
.next-preview {
    background: #f8f8f8;
    padding: 30px 20px;
    border-radius: 15px;
    text-align: center;
}
.next-label { font-size: 0.7em; font-weight: bold; color: #a50909; }
.next-title { font-weight: bold; margin: 8px 0 20px; }
.btn-next {
    display: block;
    background: #243547;
    color: #fff;
    padding: 20px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(36, 53, 71, 0.2);
    transition: 0.3s;
}
.btn-next:active { transform: translateY(2px); box-shadow: none; }

/* スマホ用改行制御 */
@media (max-width: 480px) {
    .sp-only { display: block; }
}




/* 結論セクション：箱を捨てて文字で魅せる */
.decision-section {
    margin: 60px 0;
    padding: 30px 10px;
    text-align: center;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.decision-lead {
    font-size: 0.85em;
    color: #666;
    margin-bottom: 25px;
    letter-spacing: 0.05em;
}

.decision-main {
    margin-bottom: 25px;
}

.product-name {
    font-size: 1.5em;
    font-weight: bold;
    color: #243547;
    position: relative;
    display: inline-block;
    padding: 10px 10px;
}

/* 商品名の上下にアクセントの細い線を入れる */
.product-name::before,
.product-name::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: #a50909;
}
.product-name::before { top: -8px; }
.product-name::after { bottom: -8px; }

/* 決め台詞：甦れ、目力！ */
.decision-visual-catch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.decision-visual-catch .line {
    flex: 1;
    height: 1px;
    background: #ddd;
    max-width: 40px;
}

.catch-text {
    font-family: "Hina Mincho", serif;
    font-size: 1.8em;
    color: #a50909;
    font-weight: bold;
    letter-spacing: 0.1em;
    text-shadow: none; /* 影を消してスッキリさせる */
}

.series-note {
    text-align: right;
    font-size: 0.8em;      /* 小さめに */
    color: #888;          /* 少し薄めのグレー */
    margin: 40px 0 -10px; /* 上に余白、下は本編に近づける */
    letter-spacing: 0.05em;
    font-style: italic;   /* 少し斜体にするのも「添え書き」感が出てオシャレです（お好みで） */
}

/* スマホでは右に寄りすぎると読みづらいので、少しだけ内側へ */
@media (max-width: 480px) {
    .series-note {
        padding-right: 10px;
    }
}


.emphasis-red {
    display: block;
    font-weight: bold;
    color: #a50909;
    font-size: 1.1em;
    margin-top: 10px;
}


.thinking-text {
    text-align: center;
    font-weight: bold;
    font-size: 1.5em;
    margin: 40px 0 20px;
}