/* =========================================
   共通設定 / 変数
========================================= */
:root {
    --color-pink: #fde4eb;
    --color-pink-accent: #e86e9d;
    --color-green: #c7ecd8;
    --color-yellow: #fff9c4;
    --color-text-light: #777;
    --font-base: 'Zen Maru Gothic', sans-serif;
}

html {
    background-color: #f0f0f0; /* アプリ外側の背景色（グレー） */
}

body {
    margin: 0 auto; /* 画面全体の中央寄せ */
    padding: 0;
    max-width: 430px; /* スマホ幅に制限 */
    font-family: var(--font-base);
    color: var(--color-text);
    background: #fff;
    line-height: 1.5;
    box-shadow: 0 0 15px rgba(0,0,0,0.1); /* 浮き上がって見える影 */
    min-height: 100vh;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* 画像をすべて中央揃えにする */
}

h2, p { margin: 0; }

/* =========================================
   ユーティリティクラス
========================================= */
.section-pink { background-color:#f5dae9; }
.section-white { background-color: #fff; }
.section-green { background-color: #94d9a3; }
.section-yellow { background-color:#feffaf; }

/* 特徴的な形状 */
.rounded-big { border-radius: 40px; margin: 20px; padding: 30px 20px; }
/* 波型 */
.wave-top { border-radius: 50% 50% 0 0 / 30px 30px 0 0; padding-top: 40px; margin-top: -30px; position: relative; z-index: 1;}

/* グリッドレイアウト */
.product-grid { display: grid; gap: 15px; margin-top: 30px; }
.product-grid-ranking { display: grid; gap: 15px; padding-top: 30px; }
.product-grid.col-2 { grid-template-columns: 1fr 1fr; }
.product-grid.col-3 { grid-template-columns: 1fr 1fr 1fr; }
.product-grid-ranking.col-3 { grid-template-columns: 1fr 1fr 1fr; }

/* =========================================
   各セクションのスタイル
========================================= */
/* MV */
.mv-section {
    position: relative;
    text-align: center; /* タイトルなども中央寄せ */
}
.mv-bubble {
    position: absolute; top: 20px; left: 20px;
    background: var(--color-pink-accent); color: #fff;
    padding: 10px 15px; border-radius: 50%; font-weight: bold;
    transform: rotate(-10deg);
    box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
    z-index: 2;
}

/* イントロ機能アイコン */
.intro-features { text-align: center; padding: 30px 20px; background: #94d9a3; }
.intro-features h2 { margin-bottom: 20px; color: #2f2f2f; font-size: 1.4rem;}
.feature-icons-3 { display: flex; justify-content: center; gap: 15px; }
.f-icon {
    width: 100px;          /* 70px -> 95px に拡大 */
    height: 100px;         /* 70px -> 95px に拡大 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.0rem;    /* 文字サイズも大きく */
    font-weight: bold;
    border: 4px solid #fff; /* 枠線を少し太くして強調 */
    line-height: 1.3;     /* 行間を整える */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
}
.f-icon.circle-pink {
    background: #ffffff;           /* 内側：白 */
    color: #e33398;                /* テキスト：変更なし(#e33398) */
    /* 3層構造の再現 */
    border: 5px solid #ffffff;     /* 一番外：白の太枠（ベースのスタイルを利用/明示） */
    box-shadow: inset 0 0 0 2px #e33398; /* 内側の赤線（内側に1pxの線を描画） */
}
.f-icon.circle-white { background: #fff; color: var(--color-green); }


/* ブランドセクション共通 */
.brand-section { padding: 40px 20px; text-align: center; }
.ranking-section { padding: 0 20px; text-align: center; }
.brand-header { margin-bottom: 20px; display: flex; flex-direction: column; align-items: center; }
.brand-header p { font-size: 0.9rem; color: var(--color-text-light); margin-top: 10px;}
.brand-model-img { border-radius: 20px; margin: 0 auto; }
.brand-title-text { font-size: 1.5rem; font-weight: bold; }

/* カテゴリセクション共通 */
.cetegory-section { padding: 5px 20px; text-align: center; }

/* 商品アイテムとズーム */
.product-item {
    background: #fff; padding: 10px 5px 20px 5px; border-radius: 15px;
    transition: transform 0.3s ease, z-index 0s 0.3s;
    position: relative;
    /* 内部要素の中央寄せ */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.product-item img { border-radius: 10px; margin-bottom: 0px;}

/* 商品アイテムとズーム */
.product-item-col3 {
    background: #feffaf; padding: 0px 0px 10px 0px; border-radius: 15px;
    transition: transform 0.3s ease, z-index 0s 0.3s;
    position: relative;
    /* 内部要素の中央寄せ */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.product-item-col3 img { border-radius: 10px; margin-bottom: 0px;}

/* 商品アイテムとズーム */
.product-item-col3-rank {
    background: #fff; padding: 0px 0px 10px 0px; border-radius: 15px;
    transition: transform 0.3s ease, z-index 0s 0.3s;
    position: relative;
    /* 内部要素の中央寄せ */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.product-item-col3-rank  img { border-radius: 10px; margin-bottom: 0px;}
.p-name { font-size: 0.9rem; margin: 5px 0; width: 100%;font-weight: 600; }
.p-name-youryou { font-size: 0.75rem; margin: 5px 0; width: 100%;font-weight: 600; }
.rankingicon { padding: 5px 0px 10px 0px; width: 40%;}
.zoom-btn {
    background: var(--color-pink-accent); color: #fff; border: none;
    padding: 5px 15px; border-radius: 20px; font-size: 0.7rem; cursor: pointer;
    margin-top: auto; /* ボタンを下揃えにしつつ中央 */
}
.zoom-btn2 {
    background:#e23398; color: #fff; border: none;
    padding: 5px 15px; border-radius: 20px; font-size: 0.7rem; cursor: pointer;
    margin-top: auto; /* ボタンを下揃えにしつつ中央 */
}

/* ZOOM時のクラス */
.product-item.is-zoomed {
    transform: scale(1.2);
    z-index: 100;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, z-index 0s;
}

.view-more-btn {
    display: inline-block;
    margin-top: 0px;
    margin-bottom: 60px;
    padding: 10px 30px;
    background: #e23398;
    color: #ffffff !important; /* テキストの色を白に固定 */
    text-decoration: none !important; /* 下線を完全に消す */
    border-radius: 30px;
    font-weight: bold;
    text-align: center;
    transition: transform 0.2s;
}
/* ボタンの基本状態、訪問済み、クリック中すべてでピンクを保持 */
.view-more-btn,
.view-more-btn:visited,
.view-more-btn:active,
.view-more-btn:hover {
    display: inline-block;
    margin-top: 0px;
    margin-bottom: 60px;
    padding: 10px 30px;
    background-color: #e23398 !important; /* ピンクを強制保持 */
    color: #ffffff !important;           /* 文字の白を強制保持 */
    text-decoration: none !important;    /* 下線を完全に消す */
    border-radius: 30px;
    font-weight: bold;
    text-align: center;
    transition: transform 0.2s;
}

/* クリックした瞬間に少し沈む動きだけ残す（色は変えない） */
.view-more-btn:active {
    transform: scale(0.95);
    background-color: #e23398 !important; /* 赤に変わるのを防止 */
}

/* 下部機能紹介 (イエロー) */
.features-bottom { text-align: center; padding-bottom: 40px; }
.features-bottom .f-icon.circle-white { color: #fdd835; }
.bottom-message { margin: 20px 0; font-weight: bold; }

/* =========================================
   フッター 無限ループスライダー
========================================= */
.footer-brands { padding: 30px 0 80px 0; text-align: center; overflow: hidden; }
.footer-brands p { font-weight: bold; margin-bottom: 20px; }

.loop-slider { width: 100%; overflow: hidden; }
.loop-track {
    display: flex;
    width: max-content;
    animation: loop-scroll 20s linear infinite;
    /* スライダー自体は左から流れる仕様なので中央寄せしません */
}
.logo-set { display: flex; gap: 10px; padding-right: 10px; }
.logo-set img { height: 80px; width: auto; }

@keyframes loop-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* =========================================
   追加装飾（プロ級仕上げ）
========================================= */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in.is-visible { opacity: 1; transform: translateY(0); }

.tape-accent { position: relative; overflow: hidden; }
.tape-accent::before {
    content: ""; position: absolute; top: -10px; left: -10px;
    width: 50px; height: 50px;
    background: repeating-linear-gradient(-45deg, var(--color-pink-accent), var(--color-pink-accent) 5px, transparent 5px, transparent 10px);
    z-index: 5; border-radius: 50%; opacity: 0.6;
}

/* ボタンを押した時のアクション（共通） */
.zoom-btn:active,
.zoom-btn2:active,
.view-more-btn:active,
.buy-link-btn:active {
    transform: scale(0.95) !important; /* 5% 小さくなる */
    background-color: #e23398 !important; /* 赤くならないようピンクを保持 */
    transition: transform 0.1s; /* 反応を速くする */
}
/* =========================================
   共通：全セクション用・波型ウェーブ設定
========================================= */

/* 1. 波を乗せるためのベース設定 */
.wave-sep {
    position: relative;
    padding-top: 50px;         /* 波の画像を表示するスペース */
    margin-top: 0 !important;  /* 上のセクションと隙間なくくっつける */

    /* 波と干渉しないよう、上部の角丸を強制リセット */
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* 2. 直前のセクションの下部の角丸もリセット（隙間防止） */
.no-bottom-radius {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 30px; /* 少し余白を持たせる */
}

/* 3. 波の形（SVG）を表示する擬似要素 */
.wave-sep::before {
    content: "";
    position: absolute;
    top: -50px;   /* セクションの上に飛び出させる */
    left: 0;
    width: 100%;
    height: 51px; /* 1pxは隙間対策 */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 1;
}

/* --- 【色別】波のバリエーション --- */
/* 直前のセクションの色（上から流れてくる色）を指定します */

/* A. 濃い緑からの波 (Intro -> Pink) */
.wave-from-green-dark::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%2394d9a3' fill-opacity='1' d='M0,192L60,170.7C120,149,240,107,360,112C480,117,600,171,720,197.3C840,224,960,224,1080,208C1200,192,1320,160,1380,144L1440,128L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z'%3E%3C/path%3E%3C/svg%3E");
}

/* B. 薄い緑からの波 (Green -> White/Yellow) */
.wave-from-green-light::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23c7ecd8' fill-opacity='1' d='M0,192L60,170.7C120,149,240,107,360,112C480,117,600,171,720,197.3C840,224,960,224,1080,208C1200,192,1320,160,1380,144L1440,128L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z'%3E%3C/path%3E%3C/svg%3E");
}

/* C. ピンクからの波 (Pink -> White) */
.wave-from-pink::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23fde4eb' fill-opacity='1' d='M0,192L60,170.7C120,149,240,107,360,112C480,117,600,171,720,197.3C840,224,960,224,1080,208C1200,192,1320,160,1380,144L1440,128L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z'%3E%3C/path%3E%3C/svg%3E");
}

/* D. 白からの波 (White -> Green) */
.wave-from-white::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='1' d='M0,192L60,170.7C120,149,240,107,360,112C480,117,600,171,720,197.3C840,224,960,224,1080,208C1200,192,1320,160,1380,144L1440,128L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z'%3E%3C/path%3E%3C/svg%3E");
}

/* E. 黄色からの波 (Yellow -> White Footer) */
.wave-from-yellow::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23fff9c4' fill-opacity='1' d='M0,192L60,170.7C120,149,240,107,360,112C480,117,600,171,720,197.3C840,224,960,224,1080,208C1200,192,1320,160,1380,144L1440,128L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z'%3E%3C/path%3E%3C/svg%3E");
}

/* =========================================
   画像の横幅いっぱい表示（パディング相殺）
========================================= */

/* 親要素のpaddingを無視して広げるクラス */
.full-width-img {
    width: calc(100% + 40px); /* 親のpadding左右20px×2=40px分を加算 */
    margin-left: -20px;      /* 左のpadding分だけ左にずらす */
    margin-right: -20px;     /* 右のpadding分だけ右にずらす */
    max-width: none;         /* 親要素の制約を解除 */

    /* セクションの角丸に合わせるため、画像の角丸は一度リセット */
    border-radius: 0;
}

/* rounded-bigセクションの角丸からはみ出さないようにする */
.rounded-big {
    overflow: hidden; /* これがないと画像が角丸を突き抜けてしまいます */
}

/* =========================================
   横型商品カード（テスト.jpg再現）
========================================= */
.product-card-horizontal {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 10px; /* 画像通りの大きな角丸 */
    padding: 10px 10px;
    margin: 30px 30px 40px 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* 左側：画像エリア */
.card-image {
    flex: 1.3; /* 画像を少し広めに確保 */
    display: flex;
    justify-content: center;
}
.card-image img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* 右側：テキスト・ボタンエリア */
.card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

/* 「バックパック」の文字サイズ調整 */
.card-title {
    font-size: 1.5rem; /* 前後のタイトルと共通のサイズ */
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    letter-spacing: 0.05em;
}

/* 購入ページへボタン：既存デザインに最適化 */
.buy-link-btn {
    display: inline-block;
    background-color: var(--color-pink-accent); /* 既存のピンクを使用 */
    color: #fff;
    text-decoration: none;
    padding: 10px 25px;
    border-radius: 30px; /* カプセル型 */
    font-size: 0.9rem;
    font-weight: bold;
    text-align: center;
    transition: transform 0.2s, opacity 0.2s;
    white-space: nowrap; /* 改行防止 */
}

/* クリック時の動き */
.buy-link-btn:active {
    transform: scale(0.95);
    opacity: 0.9;
}

/* モバイル調整：幅が狭い時に窮屈にならないよう */
@media (max-width: 375px) {
    .card-title { font-size: 1.2rem; }
    .buy-link-btn { padding: 8px 18px; font-size: 0.8rem; }
}

/* 左上のアイコン画像の設定 */
.p-icon {
    position: absolute;
    top: -25px;    /* 上からの位置（お好みで調整） */
    left: -10px;   /* 左からの位置（お好みで調整） */
    width: 80px;   /* アイコンのサイズ */
    height: auto;
    z-index: 10;   /* 商品画像より上に表示 */
    pointer-events: none; /* アイコンがボタン操作の邪魔をしないように設定 */
}

/* 商品アイテム自体の設定（既存コードの確認） */
.product-item {
    position: relative; /* これにより.p-iconがここを基準に動きます */
    /* ...他の設定はそのまま... */
}

/* 親要素：基準点の設定 */
.feature-icons-3 {
    display: flex;
    justify-content: center;
    gap: 5px;
    position: relative; /* 疑似要素の基準にする */
    z-index: 1;
}

/* 背後に borderdot.png を配置 */
.feature-icons-3::before {
    content: "";
    position: absolute;
    /* 位置の調整：左下に配置（数値はお好みで） */
    bottom: -5px;
    left: -3px;
    /* 画像のサイズ設定 */
    width: 65px;
    height: 65px;

    /* 画像の指定 */
    background-image: url("img/borderdot.png");
    background-size: contain;
    background-repeat: no-repeat;

    /* レイヤー順序：一番下へ */
    z-index: -1;
    pointer-events: none; /* クリック操作を邪魔しない */
}

/* --- 右上の画像 (::after) --- */
.feature-icons-3::after {
    content: "";
    position: absolute;
    top: -5px;     /* 上からの位置（マイナスで枠外へ） */
    right: -5px;    /* 右からの位置 */
    width: 65px;    /* サイズを左下と合わせるかお好みで */
    height: 65px;
    background-image: url("img/borderdot.png"); /* 同じ画像、または別の画像を指定 */
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;    /* アイコンの背面に配置 */
    pointer-events: none;
    /* 必要に応じて画像を回転させる場合 */
    /* transform: rotate(180deg); */
}

/* リンクのデフォルトスタイルをリセット */
a {
    text-decoration: none !important; /* アンダーラインを消す */
    color: inherit !important;           /* 親要素の文字色を継承する（青や紫にならない） */
}

/* クリック後やホバー時も色が変わらないように固定 */
a:visited, a:hover, a:active {
    text-decoration: none !important;
    color: inherit !important;
}
/* =========================================
   section-pink に before で背景画像を配置
   ========================================= */

   /* 1. 親要素に基準点を設定（超重要） */
   .section-pink {
       position: relative; /* beforeを絶対配置するための基準になります */
       z-index: 1;         /* 重なり順のベースを作ります */
       padding-bottom: 20px;
   }

   /* 2. before 疑似要素で画像を作る */
   .section-pink::before {
       content: ""; /* 疑似要素を表示するために必須 */
       position: absolute; /* 親要素(section-pink)を基準に自由に動かせるようにする */

       /* ▼ ここで「任意の位置・サイズ」に調整します ▼ */
       top: 1px;        /* 上からの位置（例: 50px、-20px、10% など） */
       right: 0;        /* 左からの位置（例: 50px、-20px、10% など） */
       width: 100%;    /* 画像エリアの幅（例: 500px、50% など） */
       height: 100%;   /* 画像エリアの高さ（例: 300px、50% など） */

       /* ▼ 画像自体の設定 ▼ */
      /* background-image: url('img/tsunagi2.jpg'); */ /* 画像のパス */
       background-size: 100%;  /* エリアを埋め尽くす（contain や 100% auto も可） */
       background-position: bottom;  /* 画像の中心を基準にする */
       background-repeat: no-repeat; /* 画像を繰り返さない */

       /* ▼ 重なり順の調整 ▼ */
       z-index: -1; /* 親の中身（商品や文字）の後ろに隠す */
       pointer-events: none; /* 万が一、画像が前面に出てもクリックの邪魔をしない */

       /* お好みで透過度も調整できます */
       /* opacity: 0.5; */
   }

   /* 親要素：基準点の設定 */
   .section-yellow .product-item-col3 {
       position: relative; /* 疑似要素の基準にする */
       z-index: 1;
   }

   /* --- 右上の画像 (::after) --- */
   .section-yellow .product-item-col3::before {
       content: "";
       position: absolute;
       top: -7px;     /* 上からの位置（マイナスで枠外へ） */
       right: -7px;    /* 右からの位置 */
       width: 65px;    /* サイズを左下と合わせるかお好みで */
       height: 65px;
       background-image: url("img/borderdot-bottom.png"); /* 同じ画像、または別の画像を指定 */
       background-size: contain;
       background-repeat: no-repeat;
       z-index: -1;    /* アイコンの背面に配置 */
       pointer-events: none;
       /* 必要に応じて画像を回転させる場合 */
       /* transform: rotate(180deg); */
   }

   /* =========================================
   固定ヘッダー (追従型)
========================================= */
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* 背景を少し透過させた白にして、後ろの波模様などがうっすら透けるとおしゃれです */
    background-color: rgba(255, 255, 255, 0.95);
    /* 下にうっすら影をつける */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    z-index: 1000; /* ページ内のどの要素よりも一番上に表示 */
    padding: 12px 0;
}

/* スマホ幅(430px)に合わせるためのインナー枠 */
.header-inner {
    max-width: 430px;
    color: #fff;
    margin: 0 auto;
    display: flex;
    justify-content: space-between; /* ロゴは左、ボタンは右に配置 */
    align-items: center;
    padding: 0 15px;
    box-sizing: border-box;
}

/* ロゴ部分のスタイル */
.header-logo {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-pink-accent); /* テーマカラーのピンク */
    margin: 0;
}
/* もしロゴ画像を入れる場合はこちらを使います */
.header-logo img {
    height: 30px;
    width: auto;
    display: block;
}

/* ヘッダー内の購入ボタン */
.header-btn {
    background: #e86e9d;
    text-decoration: none !important;
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: bold;
    transition: transform 0.2s;
}
.header-btn:active {
    transform: scale(0.95);
}

/* =========================================
   body の修正（既存の body に追記）
========================================= */
/* body の既存のスタイルに padding-top を追加して上書きしてください */
body {
    margin: 0 auto;
    padding: 0;
    padding-top: 60px; /* ★追加：固定ヘッダーの高さ分、全体を下にずらす */
    max-width: 430px;
    font-family: var(--font-base);
    color: var(--color-text);
    background: #fff;
    line-height: 1.5;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    min-height: 100vh;
}



   .mt-0 {
       margin-top: 0 !important
   }
   .mt-1 {
       margin-top: .25rem !important
   }
   .mt-2 {
       margin-top: .5rem !important
   }
   .mt-3 {
       margin-top: 1rem !important
   }
   .mt-4 {
       margin-top: 1.5rem !important
   }
   .mt-5 {
       margin-top: 3rem !important
   }

   .pt-0 {
       padding-top: 0 !important
   }
   .pt-1 {
       padding-top: .25rem !important
   }
   .pt-2 {
       padding-top: .5rem !important
   }
   .pt-3 {
       padding-top: 1rem !important
   }
   .pt-4 {
       padding-top: 1.5rem !important
   }
   .pt-5 {
       padding-top: 3rem !important
   }


   .mt--1 {
       margin-top: -.25rem !important
   }
   .mt--2 {
       margin-top: -.5rem !important
   }
   .mt--3 {
       margin-top: -1rem !important
   }
   .mt--4 {
       margin-top: -1.5rem !important
   }
   .mt--5 {
       margin-top: -3rem !important
   }


   .pb-5 {
       padding-bottom: 3rem !important
   }


   /* スクロールリンク（アイコン）をクリックした時の挙動 */
   a.scroll-link {
       display: block;
       transition: transform 0.2s;
   }
   a.scroll-link:active {
       transform: scale(0.95);
   }

   /* =========================================
      1カラム・3モールボタンレイアウト
   ========================================= */
   .product-list-1col {
       display: flex;
       flex-direction: column;
       gap: 20px;
       margin-top: 1px;
   }

   /* 罫線スタイルの場合は隙間を調整 */
   .product-list-1col.type-line {
       gap: 0;
   }

   /* リストアイテム共通 */
   .list-item-1col {
       display: flex;
       align-items: center;
       position: relative;
   }

   /* ボックススタイル（スクールバッグ用：白背景＋角丸） */
   .list-item-1col.type-box {
       background: #fff;
       border-radius: 15px;
       padding: 8px 8px 8px;
   }

   /* ラインスタイル（バックパック用：ピンクの区切り線） */
   .list-item-1col.line-style {
       padding: 25px 0;
       border-bottom: 1px solid #e86e9d; /* ピンクの区切り線 */
   }
   .list-item-1col.line-style:last-child {
       border-bottom: none; /* 最後は線を消す */
   }

   /* 左側：画像と商品名 */
   .col-left {
       flex: 1.2; /* 画像エリアを少し広めに */
       position: relative;
       text-align: center;
   }
   .col-left img {
       max-width: 85%;
       height: auto;
       margin: 0 auto;
   }
   .p-name-1col {
       font-size: 1.1rem;
       font-weight: 700;
       margin-top: 0px;
       color: #2f2f2f;
   }

   /* 左上のアイコン（限定100個など） */
   .p-icon-1col {
       position: absolute;
       top: -20px;
       left: -25px;
       width: 85px;
       z-index: 10;
   }

   /* 右側：ボタンエリア */
   .col-right {
       flex: 0.9;
       display: flex;
       flex-direction: column;
       gap: 12px;
       padding-right: 15px;
   }

   /* モール遷移ボタン */
   .btn-mall {
     background: var(--color-pink-accent); color: #fff; border: none;
     padding: 10px 15px; border-radius: 20px; font-size: 0.7rem; cursor: pointer;
     margin-top: auto; /* ボタンを下揃えにしつつ中央 */
   }
   .zoom-btn3 {
     background: var(--color-pink-accent); color: #fff; border: none;
     padding: 10px 15px; border-radius: 20px; font-size: 0.7rem; cursor: pointer;
     margin-top: auto; /* ボタンを下揃えにしつつ中央 */
     width: 85%;
   }
   .zoom-btn4 {
     background:#e23398; color: #fff; border: none;
     padding: 10px 15px; border-radius: 20px; font-size: 0.7rem; cursor: pointer;
     margin-top: auto; /* ボタンを下揃えにしつつ中央 */
     width: 85%;
   }

   /* =========================================
      3カラム用の縦並びボタン設定
   ========================================= */
   .btn-stack-col3 {
       display: flex;
       flex-direction: column;
       gap: 6px; /* ボタン同士の隙間 */
       width: 100%;
       margin-top: 10px;
   }

   .btn-stack-col3 a {
       display: block;
       width: 100%;
   }

   /* 3カラムの狭い幅に収めるためのボタン調整 */
   .btn-stack-col3 .zoom-btn4 {
       width: 95%;
       padding: 6px 2px;
       font-size: 0.65rem; /* 文字を少し小さくして収める */
       margin: 0 auto;
       border-radius: 15px;
       letter-spacing: -0.5px; /* 長い文字（Yahoo!など）を入りやすくする */
   }