@charset "utf-8";
/* ==========================================================
 /shop/g-and-p/style.css … G&Pページ（/shop/g-and-p/index.html）の見た目
 ・このページの見た目は、このファイル1つで完結（ほかのCSSは読み込まない）
 ・ブランドページなので、ほかのページとは違う「アイボリー・明朝体・金の線」の見た目（クラス名 gp_〜）
 ・画像は /shop/assets/img/ と /shop/G_P_files/ にある（このページからは ../assets/img/ と ../G_P_files/）

 【目次】ページの上から順
   0. setting   色・文字・上のバーの高さ（ここを変えると、ページ全体が変わる）★
   1. base      ページ全体の基本★
   2. header    上のバー・カテゴリバー・パンくずリスト（スクロールしても上に残る）★
   3. parts     ボタン・バッジ・見出し・商品カード・折りたたみ（よく使う部品）★
   4. color     このページだけの色・文字（アイボリー・金・明朝体）
   5. hero      一番上（ブランドの看板）
   6. tabs      ページ内タブ（上のバーのすぐ下に、スクロールしても残る）
   7. heading   見出し・説明文（中央そろえの明朝体）
   8. band      アイボリーの帯（特長・出会い の背景）
   9. lineup    ラインナップの絞り込み
  10. feature   特長・ボッソの言葉
  11. finish    仕上げを選ぶ
  12. guide     ご購入について
  13. story     出会い・写真
  14. contact   お問い合わせ（黒い枠）★
  15. footer    バナー・フッター★
  16. motion    スクロールで出てくる動き（動きの調整は、ここの数字だけ）★
  17. reduce    動きを減らす設定（パソコン・スマホで「視差効果を減らす」にしている人向け）★

 【ほかのページと同じ部分】★印
  ・★印の部分は、全ページの style.css に、まったく同じものがある（番号だけはページごとに違う）
  ・★印の部分を直したら、ほかのページの style.css にも、そのまま貼り付ける
  ・ページによっては使わない部品もあるが、全ページで同じにしておく（貼り付けるだけで済むように）

 【書き方】
  ・部分ごとに「スマホ → マウスを乗せたとき → パソコン（768px以上）」の順
  ・数字の読み方
     .2s  … 0.2秒（s は秒）
     .12  … 色の濃さ・透明度（0 = 透明 〜 1 = そのまま）
     1.04 … 大きさの倍率（1 = そのまま、1.04 = 4%大きく）
     1fr  … 残りの幅を分ける割合（1fr 1fr ＝ 半分ずつ）
     .2em … 文字の大きさを1とした長さ（.2em ＝ 文字0.2個分）
  ・マウスを乗せたときの動き（全ページ共通の決まり）
     写真 … 少し大きくなる（1.04倍）／ バナー … 曇る ／ 文字のリンク・ボタン … 少し薄くなる
     タブ … 下線が出る ／ 選ぶボタン … 枠が濃くなる ／ 写真・枠は、横や上下に動かさない
========================================================== */


/* ==========================================================
 0. setting … 色・文字・上のバーの高さ ★
========================================================== */
:root {
 --red: #dd1321;   /* 赤（ボタン・強調） */
 --dred: #750b0b;  /* 濃い赤（価格） */
 --gold: #f7bf83;  /* 金（黒い見出しの英語・お問い合わせの番号） */
 --line: #d8d7d6;  /* 線 */
 --gray: #f4f4f3;  /* うすい灰色（背景） */
 --text: #333;     /* 文字の色 */
 --en: 'Oswald', sans-serif;      /* 英語の文字 */
 --ja: 'Noto Sans JP', sans-serif; /* 日本語の文字 */
 --hd: 97px;       /* 上のバー＋カテゴリバーの高さ（ページの下の JavaScript が、実際の高さに合わせて入れ直す） */
 --tb: 0px;        /* ページ内タブの高さ（タブがあるページだけ、ページの下の JavaScript が入れる） */
 --tab: var(--red); /* ページ内タブの下線の色（G&Pページは、4. color で金に変える） */
}

@media print, screen and (min-width: 768px) {
:root {
 --hd: 110px;
}
}


/* ==========================================================
 1. base … ページ全体の基本 ★
========================================================== */
*,
*::before,
*::after {
 box-sizing: border-box; /* 幅に、枠と余白を含める */
}
html {
 -webkit-text-size-adjust: 100%; /* スマホを横にしたとき、文字が勝手に大きくならないように */
}
body {
 margin: 0;
 color: var(--text);
 font-family: var(--ja);
 font-size: 14px;
 line-height: 1.8;
 background: #fff;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote {
 margin: 0;
 padding: 0;
}
ul, ol {
 list-style: none;
}
img {
 max-width: 100%;
 height: auto;
 vertical-align: top;
 border: 0;
}
a {
 color: var(--text);
 text-decoration: none;
 transition: opacity .2s ease; /* 薄くなる速さ（.2s ＝ 0.2秒） */
}
button {
 font-family: inherit;
}
strong, b {
 font-weight: 700;
}
a:focus-visible, button:focus-visible, summary:focus-visible { /* キーボードで選んだとき、金の枠 */
 outline: 3px solid var(--gold);
 outline-offset: 2px;
}
/* ページ内の移動先（#contact など）が、上のバー・ページ内タブに隠れないようにする（上のバーの高さ ＋ タブの高さ ＋ 10px） */
[id] {
 scroll-margin-top: calc(var(--hd) + var(--tb) + 10px);
}

/* マウスを乗せたとき: リンクが少し薄くなる（.85 ＝ 85%の濃さ） */
a:hover {
 opacity: .85;
}

@media print, screen and (min-width: 768px) {
body {
 font-size: 16px;
}
}


/* ==========================================================
 2. header … 上のバー・カテゴリバー・パンくずリスト ★
    上のバーとカテゴリバーは、スクロールしても画面の上に残す（「お問い合わせ」をいつでも押せるように）
========================================================== */
.ks_header {
 position: sticky;
 top: 0;
 z-index: 70; /* ほかの部品より手前に出す */
 background: #fff;
}

/* 上のバー（ロゴ ／ お問い合わせ） */
.ks_top {
 display: flex;
 align-items: center;
 justify-content: space-between; /* ロゴは左、ボタンは右 */
 gap: 12px;
 padding: 8px 14px;
 border-bottom: 1px solid var(--line);
 background: #fff;
}
.ks_logo img {
 display: block;
 width: auto;
 height: 32px; /* ロゴの高さ */
}
a.ks_top_btn {
 display: inline-block;
 padding: 8px 16px;
 border-radius: 4px;
 font-size: 13px;
 font-weight: 700;
 line-height: 1.5;
 color: #fff;
 background: var(--red);
 white-space: nowrap;
}

/* カテゴリバー（黒い帯。入りきらないときは、横にスクロール） */
.ks_cat {
 background: #111;
}
.ks_cat ul {
 display: flex;
 overflow-x: auto;
 scrollbar-width: none; /* スクロールバーは出さない */
}
.ks_cat ul::-webkit-scrollbar {
 display: none;
}
.ks_cat li {
 flex: none; /* 幅を縮めない */
}
.ks_cat a {
 display: block;
 padding: 11px 16px;
 border-bottom: 3px solid transparent; /* 下線の場所（ふだんは透明） */
 font-size: 13px;
 line-height: 1.5;
 white-space: nowrap;
 color: #fff;
}
.ks_cat a.is-current { /* 今のページ: 赤い下線 */
 border-bottom-color: var(--red);
 opacity: 1;
}

/* パンくずリスト（KingStone PROJECT › KingStone Music Shop › …。トップにはない） */
.ks_crumb {
 padding: 12px 14px 0;
 font-size: 12px;
 line-height: 1.7;
 color: #666;
}
.ks_crumb ol {
 display: flex;
 flex-wrap: wrap;
 gap: 2px 6px;
 max-width: 1080px;
 margin: 0 auto;
}
.ks_crumb li + li::before { /* 間の「›」 */
 content: "›";
 margin-right: 6px;
 color: #999;
}
.ks_crumb a {
 color: #666;
 text-decoration: underline;
 text-underline-offset: 3px;
}

/* マウスを乗せたとき: カテゴリに赤い下線 */
.ks_cat a:hover {
 border-bottom-color: var(--red);
 opacity: 1;
}

@media print, screen and (min-width: 768px) {
.ks_top {
 padding: 10px 32px;
}
.ks_logo img {
 height: 40px;
}
a.ks_top_btn {
 padding: 10px 24px;
 font-size: 14px;
}
.ks_cat ul {
 max-width: 1080px;
 margin: 0 auto;
 padding: 0 16px;
}
.ks_cat a {
 padding: 12px 20px;
 font-size: 14px;
}
.ks_crumb {
 padding: 16px 32px 0;
 font-size: 13px;
}
}


/* ==========================================================
 3. parts … よく使う部品 ★
    ボタン・バッジ・部分の枠・見出し・注意書き・商品カード・仕様の表・折りたたみ・ページ内タブ
    （ページによっては使わない部品もある。全ページ同じものを置いておく）
========================================================== */

/* ボタン（赤） */
a.ks_btn {
 display: inline-block;
 padding: 13px 26px;
 border: 2px solid var(--red);
 border-radius: 4px; /* 角の丸み */
 font-size: 15px;
 font-weight: 700;
 line-height: 1.4;
 text-align: center;
 color: #fff;
 background: var(--red);
 cursor: pointer;
 transition: opacity .2s ease;
}
a.ks_btn.is-line { /* 白地に赤い枠 */
 color: var(--red);
 background: #fff;
}
a.ks_btn.is-sm { /* 小さいボタン */
 padding: 9px 14px;
 font-size: 13px;
}
a.ks_btn.is-block { /* 横いっぱいのボタン */
 display: block;
}

/* バッジ（赤い小さな札。「ボッソ使用モデル」） */
.ks_badge {
 display: inline-block;
 padding: 1px 8px;
 border-radius: 3px;
 font-family: var(--ja);
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0;
 line-height: 1.8;
 color: #fff;
 background: var(--red);
}

/* 部分の枠（中身の最大幅と、上下の余白） */
.ks_sec {
 max-width: 1080px;
 margin: 0 auto;
 padding: 30px 16px 10px; /* 上 左右 下 */
}

/* 見出し（黒い帯。上に金の英語） */
.ks_h2 {
 margin: 0 0 18px;
 padding: 14px 16px;
 font-size: 18px;
 font-weight: 700;
 line-height: 1.4;
 color: #fff;
 background: #000;
}
.ks_h2 small {
 display: block;
 font-family: var(--en);
 font-size: 11px;
 font-weight: 500;
 letter-spacing: .25em;
 color: var(--gold);
}
/* 小見出し（左に赤い線） */
.ks_h3 {
 margin: 26px 0 12px;
 padding-left: 10px;
 border-left: 4px solid var(--red);
 font-size: 16px;
 font-weight: 700;
 line-height: 1.5;
}
/* 注意書き（小さい灰色の文） */
.ks_note {
 margin-top: 12px;
 font-size: 12px;
 line-height: 1.8;
 color: #666;
}
/* 文の中のリンク（赤・下線）。注意書きの中のリンクも同じ */
.ks_note a,
.ks_link {
 color: var(--red);
 text-decoration: underline;
 text-underline-offset: 3px; /* 文字と下線の間 */
}

/* 商品カード（スマホは2列、パソコンは3列） */
.ks_cards {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 28px 12px; /* 上下の間 左右の間 */
}
.ks_card {
 display: flex;
 flex-direction: column;
 padding-bottom: 18px;
 border-bottom: 1px solid var(--line);
}
.ks_card[hidden] { /* 絞り込みで隠したカード */
 display: none;
}
a.ks_card_img { /* 写真（白い枠） */
 display: block;
 padding: 10px;
 border: 1px solid var(--line);
 background: #fff;
 overflow: hidden; /* 写真が大きくなっても、枠からはみ出さない */
}
.ks_card_img img {
 display: block;
 width: 100%;
 aspect-ratio: 1 / 1; /* 正方形にそろえる */
 object-fit: contain; /* 写真を切らずに、枠の中に収める */
 transition: transform .3s ease; /* 大きくなる速さ（.3s ＝ 0.3秒） */
}
.ks_card_type { /* TRUMPET Bb */
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 4px 8px;
 margin-top: 10px;
 font-family: var(--en);
 font-size: 11px;
 letter-spacing: .15em;
 color: #888;
}
.ks_card_name {
 margin-top: 2px;
 font-size: 14px;
 font-weight: 700;
 line-height: 1.5;
}
.ks_card_name a {
 color: #222;
}
.ks_card_spec {
 margin-top: 4px;
 font-size: 12px;
 line-height: 1.7;
 color: #666;
}
.ks_card_price {
 margin-top: 8px;
 font-size: 12px;
 line-height: 1.6;
 color: #666;
}
.ks_card_price b { /* 「時価」 */
 margin-right: 6px;
 font-size: 16px;
 color: var(--dred);
}
.ks_card_btn {
 margin-top: auto; /* ボタンを、カードの一番下にそろえる */
 padding-top: 12px;
}

/* 仕様の表（左に項目名、右に中身） */
.ks_spec {
 display: grid;
 grid-template-columns: 6.5em 1fr; /* 項目名の幅（6.5em ＝ 文字6.5個分）｜中身（残り全部） */
 border-top: 1px solid var(--line);
 font-size: 13px;
 line-height: 1.7;
}
.ks_spec dt,
.ks_spec dd {
 padding: 8px 10px;
 border-bottom: 1px solid var(--line);
}
.ks_spec dt {
 font-weight: 700;
 background: var(--gray);
}

/* 折りたたみ（よくある質問・保証） */
.ks_acc details {
 border-bottom: 1px solid var(--line);
}
.ks_acc summary {
 position: relative;
 padding: 14px 36px 14px 4px; /* 右は、矢印の分あける */
 font-size: 15px;
 font-weight: 700;
 line-height: 1.6;
 list-style: none;
 cursor: pointer;
}
.ks_acc summary::-webkit-details-marker {
 display: none;
}
.ks_acc summary::after { /* 右の矢印（開くと、上向きに回る） */
 content: "";
 position: absolute;
 right: 10px;
 top: 50%;
 width: 9px;
 height: 9px;
 border-right: 2px solid #333;
 border-bottom: 2px solid #333;
 transform: translateY(-70%) rotate(45deg);
 transition: transform .3s ease; /* 回る速さ */
}
.ks_acc details[open] summary::after {
 transform: translateY(-30%) rotate(-135deg);
}
.ks_acc .body {
 padding: 0 4px 16px;
 font-size: 13px;
 line-height: 1.95;
}
.ks_acc .body p + p {
 margin-top: 10px;
}
.ks_acc .dots li { /* 「・」の付いた箇条書き */
 position: relative;
 padding-left: 1.1em;
}
.ks_acc .dots li::before {
 content: "・";
 position: absolute;
 left: 0;
}

/* ページ内タブ（G&P・トップ・Trumpet・Flugelhorn。スクロールしても、上のバーのすぐ下に残る）
   今見ている場所のタブに下線（ページの下の JavaScript が切り替える）。下線の色は 0. setting の --tab */
.ks_tabs {
 position: sticky;
 top: var(--hd);   /* 上のバーの高さ（0. setting の --hd）の分だけ下に止める */
 z-index: 30;      /* 本文より手前に出す（上のバーよりは奥） */
 border-bottom: 1px solid var(--line);
 background: #fff;
}
.ks_tabs ul {
 display: flex;
 max-width: 1080px;
 margin: 0 auto;
 overflow-x: auto;      /* 入りきらないときは、横にスクロール */
 scrollbar-width: none; /* スクロールバーは出さない */
}
.ks_tabs ul::-webkit-scrollbar {
 display: none;
}
.ks_tabs li {
 flex: none; /* タブの幅を縮めない */
}
.ks_tabs a {
 display: block;
 padding: 12px 16px;
 border-bottom: 3px solid transparent; /* 下線の場所（ふだんは透明） */
 font-size: 13px;
 font-weight: 700;
 line-height: 1.5;
 white-space: nowrap;
 color: #333;
}
.ks_tabs a.is-current { /* 今見ている場所 */
 border-bottom-color: var(--tab);
 color: #000;
}

/* マウスを乗せたとき: ボタン・写真・商品名・ページ内タブ */
a.ks_btn:hover {
 opacity: .85; /* 少し薄くなる（上下には動かさない） */
}
a.ks_card_img:hover img {
 transform: scale(1.04); /* 写真が4%大きくなる */
}
.ks_card_name a:hover { /* 商品名が赤くなり、下線が出る */
 color: var(--red);
 text-decoration: underline;
 opacity: 1;
}
.ks_tabs a:hover { /* ページ内タブ: 上のカテゴリバーと同じく、下線が出る */
 opacity: 1;
 border-bottom-color: var(--tab);
 color: #000;
}

@media print, screen and (min-width: 768px) {
.ks_sec {
 padding: 56px 32px 14px;
}
.ks_h2 {
 margin-bottom: 28px;
 padding: 18px 25px;
 font-size: 24px;
}
.ks_h3 {
 font-size: 20px;
}
.ks_cards {
 grid-template-columns: repeat(3, 1fr);
 gap: 40px 20px;
}
.ks_card_name {
 font-size: 17px;
}
.ks_card_spec {
 font-size: 13px;
}
.ks_spec {
 font-size: 15px;
}
.ks_acc .body {
 font-size: 15px;
}
.ks_tabs a {
 padding: 14px 22px;
 font-size: 14px;
}
}


/* ==========================================================
 4. color … このページだけの色・文字
========================================================== */
:root {
 --gp-ivory: #f7f3ec;       /* アイボリー（看板・帯の背景） */
 --gp-ivory-line: #e6dccb;  /* アイボリーの部分の、区切り線 */
 --gp-gold: #a8844a;        /* 金（細い線・英語の小見出し） */
 --gp-serif: 'Noto Serif JP', serif; /* 明朝体（見出し） */
 --tab: var(--gp-gold);     /* ページ内タブの下線の色（0. setting の赤を、このページでは金に変える） */
}


/* ==========================================================
 5. hero … 一番上（ブランドの看板）
    左: ロゴ・見出し・説明・4つの特長・ボタン ／ 右: 商品の写真3枚
    スマホは、上下に並ぶ
========================================================== */
.gp_hero {
 margin-top: 12px; /* パンくずリストとの間 */
 border-bottom: 1px solid var(--gp-ivory-line);
 background: var(--gp-ivory);
}
.gp_hero_in {
 display: grid;
 gap: 26px; /* 文章と写真の間 */
 max-width: 1080px;
 margin: 0 auto;
 padding: 34px 16px 38px; /* 上 左右 下 の余白 */
}

/* ロゴ・見出し */
.gp_hero_logo {
 margin-bottom: 14px;
}
.gp_hero_logo img {
 display: block;
 width: auto;
 height: 44px; /* ロゴの高さ（幅は自動） */
}
.gp_hero_en { /* ITALIAN HANDMADE */
 font-family: var(--en);
 font-size: 12px;
 letter-spacing: .35em; /* 文字の間隔（.35em ＝ 文字0.35個分） */
 color: var(--gp-gold);
}
.gp_hero h1 {
 margin-top: 8px;
 font-family: var(--gp-serif);
 font-size: 30px;
 font-weight: 600;
 line-height: 1.45;
 color: #1a1a1a;
}
.gp_hero h1::after { /* 見出しの下の、金の細い線（幅64px・太さ1px） */
 content: "";
 display: block;
 width: 64px;
 height: 1px;
 margin-top: 18px;
 background: var(--gp-gold);
}
.gp_hero_lead {
 margin-top: 16px;
 font-size: 14px;
 line-height: 2;
 color: #444;
}

/* 4つの特長（2列×2段。左に金の線） */
.gp_hero_points {
 display: grid;
 grid-template-columns: repeat(2, 1fr); /* 2列 */
 gap: 14px 18px; /* 上下の間 左右の間 */
 margin-top: 22px;
}
.gp_hero_points li {
 padding-left: 12px;
 border-left: 2px solid var(--gp-gold);
}
.gp_hero_points .en {
 display: block;
 font-family: var(--en);
 font-size: 11px;
 letter-spacing: .2em;
 line-height: 1.6;
 color: var(--gp-gold);
}
.gp_hero_points .ja {
 display: block;
 margin-top: 2px;
 font-size: 13px;
 font-weight: 700;
 line-height: 1.6;
 color: #222;
}

/* ボタン（横に並べ、入りきらなければ折り返す） */
.gp_hero_btns {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 margin-top: 24px;
}

/* 商品の写真3枚（白い台紙に、うすい影）
   マウスを乗せたときは、ほかの商品写真（3. parts の ks_card_img）と同じく、写真が台紙の中で少し大きくなる */
.gp_hero_imgs {
 display: grid;
 grid-template-columns: repeat(3, 1fr); /* 3枚を横に並べる */
 gap: 10px;
 align-self: center;
}
.gp_hero_imgs a {
 display: block;
 padding: 8px; /* 台紙の余白 */
 background: #fff;
 box-shadow: 0 6px 18px rgba(80, 60, 30, .12); /* 影: 下に6pxずらし、18pxぼかす。.12 ＝ 影の濃さ */
 overflow: hidden; /* 写真が大きくなっても、台紙からはみ出さない */
}
.gp_hero_imgs img {
 width: 100%;
 aspect-ratio: 1 / 1; /* 正方形にそろえる */
 object-fit: contain; /* 写真を切らずに、枠の中に収める */
 transition: transform .3s ease; /* 大きくなる速さ（.3s ＝ 0.3秒。ほかの商品写真と同じ） */
}

/* マウスを乗せたとき: 写真が少し大きくなる（台紙は動かさない） */
.gp_hero_imgs a:hover {
 opacity: 1; /* 1. base の「リンクが薄くなる」を、ここでは止める */
}
.gp_hero_imgs a:hover img {
 transform: scale(1.04); /* 1.04 ＝ 4%大きく（ほかの商品写真と同じ） */
}

@media print, screen and (min-width: 768px) {
.gp_hero_in {
 grid-template-columns: 1.1fr 1fr; /* 文章：写真 ＝ 1.1：1 の幅 */
 gap: 48px;
 padding: 64px 32px 66px;
}
.gp_hero_logo img {
 height: 56px;
}
.gp_hero h1 {
 font-size: 46px;
}
.gp_hero_lead {
 font-size: 16px;
}
.gp_hero_points .ja {
 font-size: 15px;
}
}


/* ==========================================================
 6. tabs … ページ内タブ
    見た目は 3. parts の ks_tabs（★ 全ページ共通）。このページでは、下線の色だけ金にしている（4. color の --tab）
========================================================== */


/* ==========================================================
 7. heading … 見出し・説明文（中央そろえの明朝体）
========================================================== */
.gp_h2 {
 margin: 0 0 24px;
 font-family: var(--gp-serif);
 font-size: 22px;
 font-weight: 600;
 line-height: 1.5;
 text-align: center;
 color: #1a1a1a;
}
.gp_h2 small { /* 上の英語（LINE UP など） */
 display: block;
 margin-bottom: 4px;
 font-family: var(--en);
 font-size: 11px;
 font-weight: 500;
 letter-spacing: .35em;
 color: var(--gp-gold);
}
.gp_h2::after { /* 見出しの下の、金の細い線（幅48px・太さ1px） */
 content: "";
 display: block;
 width: 48px;
 height: 1px;
 margin: 14px auto 0;
 background: var(--gp-gold);
}
.gp_lead {
 max-width: 760px; /* 長くなりすぎないように、幅を決める */
 margin: 0 auto 22px;
 line-height: 2;
 text-align: center;
}

@media print, screen and (min-width: 768px) {
.gp_h2 {
 margin-bottom: 34px;
 font-size: 30px;
}
}


/* ==========================================================
 8. band … アイボリーの帯（特長・出会い の背景）
========================================================== */
.gp_band {
 margin-top: 40px;
 padding-bottom: 30px;
 border-top: 1px solid var(--gp-ivory-line);
 border-bottom: 1px solid var(--gp-ivory-line);
 background: var(--gp-ivory);
}

@media print, screen and (min-width: 768px) {
.gp_band {
 margin-top: 60px;
 padding-bottom: 50px;
}
}


/* ==========================================================
 9. lineup … ラインナップの絞り込み（すべて／Trumpet／Flugelhorn）
    押したボタンが黒くなり、商品が絞り込まれる（JavaScriptで切り替え）
========================================================== */
.gp_filter {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 8px;
 margin-bottom: 20px;
}
.gp_chip {
 padding: 7px 18px;
 border: 1px solid #999;
 border-radius: 999px; /* 両端を丸く */
 font-size: 13px;
 font-weight: 700;
 line-height: 1.5;
 color: #333;
 background: #fff;
 cursor: pointer;
 transition: background .2s ease, color .2s ease, border-color .2s ease; /* 黒に変わる速さ（.2s ＝ 0.2秒） */
}
.gp_chip.is-on { /* 選んでいるボタン */
 border-color: #000;
 color: #fff;
 background: #000;
}
/* マウスを乗せたとき: 仕上げのボタンと同じく、枠が濃くなる */
.gp_chip:hover {
 border-color: #000;
}

.gp_count { /* 「5点」 */
 align-self: center;
 font-size: 13px;
 color: #666;
}


/* ==========================================================
 10. feature … 特長・ボッソの言葉
========================================================== */
.gp_feat {
 max-width: 860px;
 margin: 0 auto;
}
.gp_feat_item + .gp_feat_item {
 margin-top: 30px; /* 特長と特長の間 */
}
.gp_feat_ttl {
 padding-left: 12px;
 border-left: 2px solid var(--gp-gold);
 font-family: var(--gp-serif);
 font-size: 17px;
 font-weight: 600;
 line-height: 1.5;
 color: #1a1a1a;
}
.gp_feat_txt {
 margin-top: 8px;
 line-height: 1.95;
}

/* ボッソの言葉（白い枠に、金の線） */
.gp_quote {
 max-width: 860px;
 margin: 30px auto 0;
 padding: 20px 22px;
 border-left: 3px solid var(--gp-gold);
 background: #fff;
}
.gp_quote p {
 font-family: var(--gp-serif);
 font-size: 16px;
 font-weight: 600;
 line-height: 1.9;
}
.gp_quote cite {
 display: block;
 margin-top: 6px;
 font-size: 12px;
 font-style: normal;
 color: #666;
}

@media print, screen and (min-width: 768px) {
.gp_feat_ttl {
 font-size: 20px;
}
.gp_quote p {
 font-size: 18px;
}
}


/* ==========================================================
 11. finish … 仕上げを選ぶ
    左: 仕上げの一覧（押すと赤い枠）／ 右: 選んだ仕上げと、問い合わせボタン
    スマホは、上下に並ぶ
========================================================== */
.gp_opt {
 display: grid;
 gap: 16px;
}

/* 仕上げの一覧 */
.gp_opt_list {
 display: grid;
 gap: 8px;
}
.gp_opt_list button {
 display: flex;
 align-items: center;
 justify-content: space-between; /* 名前は左、料金は右 */
 gap: 12px;
 width: 100%;
 padding: 12px 14px;
 border: 1px solid var(--line);
 border-radius: 4px;
 font-size: 14px;
 line-height: 1.5;
 text-align: left;
 color: #333;
 background: #fff;
 cursor: pointer;
 transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.gp_opt_list button.is-on { /* 選んでいる仕上げ: 赤い枠と、うすい赤の背景 */
 border-color: var(--red);
 background: #fff6f6;
 box-shadow: 0 0 0 2px rgba(221, 19, 33, .18); /* 枠の外側に、2pxのうすい赤（.18 ＝ 濃さ） */
}
.gp_opt_list .p { /* 料金 */
 flex: none;
 font-family: var(--en);
 font-weight: 700;
 color: var(--dred);
}

/* マウスを乗せたとき: 枠が少し濃くなる */
.gp_opt_list button:hover {
 border-color: #999;
}

/* 選んだ仕上げ */
.gp_opt_sum {
 align-self: start;
 padding: 18px;
 border: 1px solid var(--gp-ivory-line);
 border-radius: 4px;
 background: var(--gp-ivory);
}
.gp_opt_sum .lbl { /* 「選択中の仕上げ」 */
 font-size: 12px;
 color: #666;
}
.gp_opt_sum .name {
 font-size: 17px;
 font-weight: 700;
 line-height: 1.5;
}
.gp_opt_sum .price {
 margin-top: 6px;
 font-size: 22px;
 font-weight: 700;
 line-height: 1.4;
 color: var(--dred);
}
.gp_opt_sum .small {
 margin-top: 8px;
 font-size: 12px;
 line-height: 1.8;
 color: #666;
}
.gp_opt_sum a.ks_btn {
 display: block;
 margin-top: 14px;
}

@media print, screen and (min-width: 768px) {
.gp_opt {
 grid-template-columns: 1.3fr 1fr; /* 一覧：選んだ仕上げ ＝ 1.3：1 の幅 */
 gap: 28px;
}
.gp_opt_sum {
 position: sticky; /* 一覧をスクロールしても、選んだ仕上げが見えたままになる */
 top: calc(var(--hd) + 72px); /* 上のバーとタブの下に止まる */
}
}


/* ==========================================================
 12. guide … ご購入について（4つの枠。上に金の線）
========================================================== */
.gp_guide {
 display: grid;
 gap: 12px;
}
.gp_guide li {
 padding: 16px;
 border: 1px solid var(--line);
 border-top: 3px solid var(--gp-gold);
 background: #fff;
}
.gp_guide h3 {
 font-size: 15px;
 font-weight: 700;
 line-height: 1.5;
}
.gp_guide p {
 margin-top: 4px;
 font-size: 13px;
 line-height: 1.9;
}

@media print, screen and (min-width: 768px) {
.gp_guide {
 grid-template-columns: repeat(4, 1fr); /* 4つを横に並べる */
 gap: 16px;
}
}


/* ==========================================================
 13. story … 「G&P」との出会い・写真
========================================================== */
.gp_story {
 max-width: 800px;
 margin: 0 auto;
}
.gp_story p {
 margin-top: 14px; /* 段落の間 */
 line-height: 2;
}
.gp_story p:first-child {
 margin-top: 0;
}
.gp_story .talk { /* 会話の枠（明朝体・左に金の線） */
 margin-top: 14px;
 padding: 6px 16px;
 border-left: 3px solid var(--gp-gold);
 font-family: var(--gp-serif);
 font-weight: 600;
 background: #fff;
}
.gp_story .talk_row { /* 1行（スマホ: 話した人の下に言葉 ／ パソコン: 左に話した人、右に言葉） */
 padding: 10px 0;
}
.gp_story .talk_row + .talk_row { /* 行と行の間に、うすい線 */
 border-top: 1px solid var(--gp-ivory-line);
}
.gp_story .talk p { /* 会話の中の段落は、上の「段落の間」をなくす */
 margin-top: 0;
}
.gp_story .who { /* 話した人（金・小さめ） */
 font-size: 13px;
 letter-spacing: .1em;
 color: var(--gp-gold);
}
.gp_story .sign { /* 「記 土濃塚隆一郎」 */
 text-align: right;
 font-size: 13px;
}

/* 写真（スマホは2列、パソコンは4列） */
.gp_photos {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 8px;
 max-width: 1000px;
 margin: 24px auto 0;
}
.gp_photos img {
 width: 100%;
 aspect-ratio: 4 / 3; /* 横4：縦3 の形にそろえる */
 object-fit: cover;   /* はみ出す部分は切る */
}
.gp_photos_cap {
 margin-top: 8px;
 font-size: 12px;
 text-align: center;
 color: #666;
}

@media print, screen and (min-width: 768px) {
.gp_story .talk_row {
 display: grid;
 grid-template-columns: 5em 1fr; /* 話した人の幅（5em ＝ 文字5個分）｜言葉 */
 gap: 12px;
}
.gp_story .who {
 font-size: 14px;
 line-height: 2; /* 言葉の1行目と、高さをそろえる */
}
.gp_photos {
 grid-template-columns: repeat(4, 1fr);
}
}


/* ==========================================================
 14. contact … お問い合わせ（黒い枠） ★
    ※ 右下の写真の場所（url）だけは、ページのフォルダによって書き方が変わる
       トップ … assets/img/ ／ g-and-p・trumpet など … ../assets/img/ ／ 商品ページ … ../../assets/img/
========================================================== */
.ks_contact {
 margin: 40px 16px 0;
 padding: 50px 18px 34px;
 color: #fff;
 background: #000 url(../assets/img/contact_bg.jpg) no-repeat 100% 100% / 150% auto; /* 右下に写真（スマホは1.5倍の大きさ） */
}
.ks_contact_items { /* 3つのこと（スマホは縦、パソコンは横に3つ） */
 display: grid;
 gap: 40px;
 max-width: 1030px;
 margin: 0 auto 34px;
}
.ks_contact_item {
 padding: 30px 18px 20px;
 border: 1px solid #959593;
 border-radius: 8px;
}
.ks_contact_item .num { /* 金の番号（枠の上の線に重ねる） */
 margin: -52px 0 8px;
 font-family: var(--en);
 font-size: 40px;
 font-style: italic;
 line-height: 1.2;
 text-align: center;
 color: var(--gold);
}
.ks_contact_item .text {
 font-size: 13px;
 line-height: 2.1;
}
.ks_contact_btn {
 text-align: center;
}
.ks_contact_btn a {
 display: inline-block;
 min-width: 240px;
 padding: 16px 30px;
 border-radius: 8px;
 font-size: 17px;
 font-weight: 700;
 line-height: 1.4;
 color: #fff;
 background: var(--red);
}
.ks_contact_note {
 margin-top: 14px;
 font-size: 13px;
 text-align: center;
}
.ks_contact_note a {
 color: #fff;
 text-decoration: underline;
}
.ks_copy { /* 「内容をコピー」: 文字のリンクに見せるボタン（上の .ks_contact_note a と同じ見た目） */
 -webkit-appearance: none;
 appearance: none;
 margin: 0;
 padding: 0;
 border: 0;
 font: inherit;
 color: #fff;
 text-decoration: underline;
 background: none;
 cursor: pointer;
}
.ks_copy_toast { /* コピーしたあとのお知らせ（6秒で消える。画面のどこかを押してもすぐ閉じる） */
 max-width: 640px;      /* お知らせの幅（PCで1行に収まる幅。広げすぎると読みにくい） */
 margin: 10px auto 0;
 padding: 10px 14px;
 border-radius: 8px;    /* お問い合わせのボタンと同じ角 */
 font-size: 13px;
 line-height: 1.7;
 color: #fff;
 background: rgba(255, 255, 255, .15);   /* 暗い背景の上で、少しだけ明るく */
 text-align: center;
}
.ks_copy_toast[hidden] {
 display: none;
}
.ks_contact_gap { /* 決済と、お問い合わせの間 */
 height: 40px;
}

@media print, screen and (min-width: 768px) {
.ks_contact {
 max-width: 1180px;
 margin: 70px auto 0;
 padding: 70px 50px 40px;
 background-size: auto; /* 写真は、そのままの大きさ */
}
.ks_contact_items {
 grid-template-columns: repeat(3, 1fr);
 gap: 20px;
 margin-bottom: 44px;
}
.ks_contact_item {
 padding: 40px 20px 26px;
 border-radius: 10px;
}
.ks_contact_item .num {
 margin-top: -70px;
 font-size: 46px;
}
.ks_contact_item .text {
 font-size: 15px;
}
.ks_contact_btn a {
 padding: 20px 80px;
 border-radius: 10px;
 font-size: 20px;
}
.ks_contact_note {
 font-size: 16px;
}
.ks_contact_gap {
 height: 56px;
}
}


/* ==========================================================
 15. footer … バナー・フッター ★
========================================================== */
.ks_bnr {
 padding: 20px 16px 0;
 text-align: center;
}
.ks_bnr:last-of-type {
 padding-bottom: 20px;
}
.ks_footer {
 margin-top: 20px;
 padding: 30px 0;
 font-size: 13px;
 text-align: center;
 color: #fff;
 background: #000;
}
.ks_footer ul {
 margin: 0 0 16px;
}
.ks_footer li {
 display: inline-block;
 padding: 0 1em;
}
.ks_footer li + li { /* リンクとリンクの間に、縦線 */
 border-left: 1px solid #fff;
}
.ks_footer a {
 color: #fff;
}

@media print, screen and (min-width: 768px) {
.ks_bnr {
 padding: 40px 50px 0;
}
.ks_bnr:last-of-type {
 padding-bottom: 40px;
}
.ks_footer {
 padding: 50px 0;
 font-size: 14px;
}
.ks_footer ul {
 margin-bottom: 26px;
}
}


/* ==========================================================
 16. motion … スクロールで、順番に出てくる動き ★

 【しくみ】
  ・HTMLで class="ef" を付けた部分が、画面に入ると、下から上がりながら出てくる
    （ページの下の JavaScript が、画面に入った部分に is-active を付ける）
  ・HTMLの style="--d:.4s" は、出始めるまでの待ち時間（0.4秒待ってから出る）
      同じ段に並ぶものは .2s ずつずらすと、左から順に出る
  ・class="ef is-fade" は、上がらずに、その場でふわっと出る（ロゴ）
  ・<html> に efct-on が付いたときだけ動く（<head> の1行）。JavaScriptが動かないときは、最初から全部見える

 【調整】下の :root の数字だけ変えれば、ページ全体の動きが変わる（時間は「s」＝秒で書く）
========================================================== */
:root {
 --ef-move: 50px;    /* 下から上がる距離。大きく → 遠くから上がる／0 → 上がらずに出るだけ */
 --ef-move-btn: 14px;/* 商品カードのボタンだけの上がる距離（これより大きいと、カードの下の線にかかる） */
 --ef-rise: 1.4s;    /* 上がりきるまでの時間。大きく → ゆっくり／小さく → きびきび */
 --ef-show: 1s;      /* 見えるようになるまでの時間（透明 → はっきり） */
 --ef-logo: .8s;     /* ロゴが、ふわっと出る時間 */
 --ef-curve: cubic-bezier(.4, .6, .6, 1);
                     /* 動き方: 最後をゆっくり止める（止まる瞬間の「カクン」を防ぐ）
                        linear にすると一定の速さになるが、止まる瞬間にカクンとする */
 --ef-hover: .2s;    /* 出終わったあと、マウスを乗せて薄くなる・曇る速さ */
}
/* 出る前（隠れている） */
.efct-on .ef {
 opacity: 0;
 transform: translateY(var(--ef-move));
 transition:
  transform var(--ef-rise) var(--ef-curve) var(--d, .2s),
  opacity var(--ef-show) linear var(--d, .2s);
}
.efct-on .ef.is-fade { /* ロゴ: 上がらずに、その場でふわっと出る */
 transform: none;
 transition: opacity var(--ef-logo) ease var(--d, 0s);
}
.efct-on .ks_card_btn.ef { /* 商品カードのボタン: 上がる距離を小さく */
 transform: translateY(var(--ef-move-btn));
}
/* 画面に入った（出てくる） */
.efct-on .ef.is-active {
 opacity: 1;
 transform: translateY(0);
}
/* 出終わった（マウスを乗せたときの変化を、ふだんの速さに戻す） */
.efct-on .ef.is-done {
 transition:
  transform var(--ef-rise) var(--ef-curve) var(--d, .2s),
  opacity var(--ef-hover) ease;
}


/* ==========================================================
 17. reduce … 動きを減らす設定 ★
    パソコン・スマホで「動きを減らす」にしている人には、動きを付けない
========================================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
 transition: none !important;
 scroll-behavior: auto !important;
}
}

/* 「別のアドレスへ送る」の下に、小さく「内容をコピー」（2026-10-25） */
.ks_copy_small {
 display: block;
 margin-top: 2px;
 font-size: .82em;      /* 「別のアドレスへ送る」の約8割の大きさ */
}
/* 一番下のバナー（kingstone-project.jp の全ページでそろえる。2026-10-25）
   PC: 2つを横に並べる（KINGSTONE PROJECT が左、tonozuka.net が右）。並び全体の幅は 1000px（お問い合わせの枠と同じくらい）。1つは約490px
   スマホ: 上下に並べ、画面の幅いっぱい */
.ks_bnrs {
 padding: 20px 16px;
}
.ks_bnrs .ks_bnr,
.ks_bnrs .ks_bnr:last-of-type {
 padding: 0;
}
.ks_bnrs .ks_bnr + .ks_bnr {
 margin-top: 12px;      /* スマホ: バナーとバナーのすき間 */
}
.ks_bnrs img {
 width: 100%;
}
@media print, screen and (min-width: 768px) {
.ks_bnrs {
 display: flex;
 gap: 20px;             /* PC: バナーとバナーのすき間 */
 max-width: 1040px;     /* 1000px＋左右の余白 20px×2 */
 margin: 0 auto;
 padding: 40px 20px;
}
.ks_bnrs .ks_bnr {
 flex: 1 1 0;           /* 2つを同じ幅に */
}
.ks_bnrs .ks_bnr + .ks_bnr {
 margin-top: 0;
}
}