@charset "utf-8";
/* ==========================================================
 /shop/style.css … ショップのトップ（/shop/index.html）の見た目
 ・このページの見た目は、このファイル1つで完結（ほかのCSSは読み込まない）
 ・画像は /shop/assets/img/ と /shop/G_P_files/ にある

 【目次】ページの上から順
   0. setting   色・文字・上のバーの高さ（ここを変えると、ページ全体が変わる）
   1. base      ページ全体の基本
   2. header    上のバー・カテゴリバー（スクロールしても上に残る）
   3. parts     ボタン・バッジ・見出し・商品カード・折りたたみ（よく使う部品）
   4. hero      写真・ロゴ・店名
   5. intro     お店の紹介と、4つのこと
   6. category  商品カテゴリー
   7. gandp     G&Pのバナー
   8. flow      ご購入の流れ
   9. owner     運営について
  10. contact   お問い合わせ（黒い枠）
  11. footer    バナー・フッター
  12. motion    スクロールで出てくる動き（動きの調整は、ここの数字だけ）
  13. reduce    動きを減らす設定（パソコン・スマホで「視差効果を減らす」にしている人向け）

 【ほかのページと同じ部分】★印
  ・2. header、3. parts、10. contact、11. footer、12. motion は、ほかのページの style.css にも同じものがある
  ・★印の部分を直したら、ほかのページの style.css も同じように直す

 【書き方】
  ・部分ごとに「スマホ → マウスを乗せたとき → パソコン（768px以上）」の順
  ・数字の読み方
     .2s  … 0.2秒（s は秒）
     .7   … 色の濃さ・透明度（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. hero … 写真の中央に、ロゴ・店名・G&P
========================================================== */
.tp_hero {
 position: relative;
 color: #fff;
 text-align: center;
 background: #000 url(assets/img/main.jpg) no-repeat 50% 50% / cover; /* 写真を、枠いっぱいに */
}
.tp_hero::before { /* 写真の上に重ねる黒（.55 ＝ 55%の濃さ。大きく → 暗く／小さく → 写真が明るく見える） */
 content: "";
 position: absolute;
 inset: 0;
 background: rgba(0, 0, 0, .55);
}
.tp_hero_in {
 position: relative;
 max-width: 1000px;
 margin: 0 auto;
 padding: 44px 16px 46px; /* 上 左右 下 の余白 */
}
.tp_hero_logo img {
 display: inline-block;
 width: 170px; /* ロゴの幅 */
 height: auto;
}
.tp_hero_title {
 margin-top: 20px; /* ロゴと店名の間 */
 font-weight: 700;
}
.tp_hero_title .kind { /* 管楽器専門店（スマホは、小さく1行目に） */
 display: block;
 font-size: 15px;
 font-weight: 400;
 letter-spacing: .2em;
 color: #ddd;
}
.tp_hero_title .name { /* キングストーン ミュージック ショップ */
 display: block;
 margin-top: 4px;
 font-size: 23px;
 line-height: 1.45;
}
.tp_hero_title .w { /* 言葉の途中で改行させない */
 display: inline-block;
}
.tp_hero_title .en { /* KingStone Music Shop */
 display: block;
 margin-top: 8px;
 font-family: var(--en);
 font-size: 20px;
 font-weight: 500;
 letter-spacing: .1em;
 color: #e8e8e8;
}
.tp_hero_title .gp { /* G&P正規代理店（上に細い線） */
 display: inline-block;
 margin-top: 18px;
 padding-top: 16px;
 border-top: 1px solid rgba(255, 255, 255, .45);
 font-size: 16px;
 line-height: 1.6;
}

@media print, screen and (min-width: 768px) {
.tp_hero_in {
 padding: 92px 32px 96px;
}
.tp_hero_logo img {
 width: 300px;
}
.tp_hero_title {
 margin-top: 26px;
}
/* パソコンでは「管楽器専門店 キングストーン…」を、同じ大きさで1行に並べる */
.tp_hero_title .kind,
.tp_hero_title .name {
 display: inline-block;
 font-size: 36px;
 line-height: 1.3;
}
.tp_hero_title .kind {
 font-weight: 700;
 letter-spacing: .03em;
 color: #fff;
}
.tp_hero_title .name {
 margin: 0 0 0 .4em; /* 「管楽器専門店」との間（.4em ＝ 文字0.4個分） */
}
.tp_hero_title .en {
 margin-top: 12px;
 font-size: 30px;
}
.tp_hero_title .gp {
 margin-top: 26px;
 padding-top: 22px;
 font-size: 22px;
}
}


/* ==========================================================
 5. intro … お店の紹介と、4つのこと
========================================================== */
.tp_intro {
 padding: 36px 16px 32px;
 background: #f6f4f0; /* うすいベージュ */
}
.tp_intro_in {
 max-width: 1080px;
 margin: 0 auto;
}
.tp_intro_lead {
 font-size: 16px;
 font-weight: 700;
 line-height: 1.85;
 word-break: keep-all;     /* 言葉の途中で改行させない */
 overflow-wrap: anywhere;  /* 入りきらないときだけ、途中でも改行する */
}
.tp_intro_sub {
 margin-top: 12px;
 font-size: 12px;
 line-height: 1.8;
 color: #666;
}

/* 4つのこと（スマホは2列×2段。線で区切る） */
.tp_intro_list {
 display: grid;
 grid-template-columns: 1fr 1fr; /* 2列 */
 margin-top: 22px;
 border-top: 1px solid #d8d2c8;
}
.tp_intro_list li {
 position: relative; /* 下の「欄全体を押せる」の基準 */
 display: flex;
 flex-direction: column;
 padding: 14px 12px;
 border-bottom: 1px solid #d8d2c8;
 transition: background-color .2s ease;
}
.tp_intro_list li:nth-child(odd) { /* 左の列の右側に、縦線 */
 border-right: 1px solid #d8d2c8;
}
.tp_intro_list .en {
 font-family: var(--en);
 font-size: 12px;
 letter-spacing: .22em;
 color: var(--red);
}
.tp_intro_list h3 {
 margin-top: 4px;
 font-size: 15px;
 font-weight: 700;
 line-height: 1.5;
 transition: color .2s ease; /* 赤くなる速さ（.2s ＝ 0.2秒） */
}
.tp_intro_list p {
 display: none; /* スマホでは説明文を出さない */
}
.tp_intro_list a {
 align-self: flex-start;
 margin-top: auto; /* リンクを、欄の一番下にそろえる */
 padding-top: 8px;
 font-size: 12px;
 font-weight: 700;
 color: var(--red);
 white-space: nowrap;
}
.tp_intro_list a span { /* リンクの下線 */
 padding-bottom: 2px; /* 文字と下線の間 */
 border-bottom: 1px solid var(--red);
 transition: border-color .2s ease;
}
.tp_intro_list a::before { /* 欄全体を押せるようにする（リンクの見えない面を、欄いっぱいに広げる） */
 content: "";
 position: absolute;
 inset: 0;
}
.tp_intro_list a[href^="mailto:"]::after { /* メールのリンクには、封筒の絵（文字ではないので文字化けしない） */
 content: "";
 display: inline-block;
 width: 15px;
 height: 11px;
 margin-left: 6px;
 vertical-align: -1px;
 background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 11'%3E%3Crect x='.75' y='.75' width='13.5' height='9.5' rx='1' fill='none' stroke='%23dd1321' stroke-width='1.5'/%3E%3Cpath d='M1.2 1.4 7.5 6.2l6.3-4.8' fill='none' stroke='%23dd1321' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}

/* マウスを乗せたとき: 欄が少し明るくなり、見出しが赤く、リンクの下線が消える */
.tp_intro_list li:hover {
 background-color: rgba(255, 255, 255, .7); /* 白を70%の濃さで重ねる（大きく → もっと白く） */
}
.tp_intro_list li:hover h3 {
 color: var(--red);
}
.tp_intro_list li:hover a {
 opacity: 1; /* 「リンクが薄くなる」を、ここでは止める */
}
.tp_intro_list li:hover a span {
 border-bottom-color: transparent; /* 下線を消す */
}

@media print, screen and (min-width: 768px) {
.tp_intro {
 padding: 72px 32px 70px;
}
.tp_intro_lead {
 font-size: 25px;
 text-align: center;
}
.tp_intro_sub {
 font-size: 15px;
 text-align: center;
}
/* パソコンは4列で、間に縦線 */
.tp_intro_list {
 grid-template-columns: repeat(4, 1fr); /* 4列 */
 margin-top: 48px;
 border-top: 0;
}
.tp_intro_list li,
.tp_intro_list li:nth-child(odd) {
 padding: 18px 24px;
 border: 0;
 border-left: 1px solid #d8d2c8;
}
.tp_intro_list li:first-child {
 border-left: 0;
}
.tp_intro_list h3 {
 margin-top: 6px;
 font-size: 17px;
}
.tp_intro_list p {
 display: block; /* パソコンでは説明文を出す */
 margin-top: 10px;
 font-size: 14px;
 line-height: 1.9;
 color: #555;
}
.tp_intro_list a {
 padding-top: 14px;
 font-size: 14px;
}
}


/* ==========================================================
 6. category … 商品カテゴリー（白い背景・横長の行）
========================================================== */
.tp_cat {
 padding: 48px 16px 24px;
 background: #fff;
}
.tp_cat_in {
 max-width: 1080px;
 margin: 0 auto;
}

/* 見出し */
.tp_cat_head {
 text-align: center;
}
.tp_cat_head .en {
 font-family: var(--en);
 font-size: 13px;
 letter-spacing: .25em;
 color: var(--red);
}
.tp_cat_head h2 {
 margin-top: 6px;
 font-size: 24px;
 font-weight: 700;
}
.tp_cat_head h2::after { /* 見出しの下の赤い線（幅40px・太さ3px） */
 content: "";
 display: block;
 width: 40px;
 height: 3px;
 margin: 16px auto 0;
 background: var(--red);
}
.tp_cat_head p {
 margin-top: 16px;
 font-size: 14px;
 color: #666;
}

/* 行（写真｜名前・説明｜›） */
.tp_cats {
 display: grid;
 margin-top: 26px;
 border-top: 2px solid #111; /* 一覧の上の、黒い線 */
}
.tp_cats li {
 border-bottom: 1px solid #ddd; /* 行の区切り線 */
}
.tp_cats a {
 display: grid;
 grid-template-columns: 84px 1fr 16px; /* 写真の幅｜名前・説明（残り全部）｜› の幅 */
 grid-template-rows: auto auto;        /* 1段目 = 名前、2段目 = 説明 */
 column-gap: 14px;
 align-items: center;
 padding: 12px 0;
 color: var(--text);
 transition: background .2s ease;
}
.tp_cats .img {
 grid-row: 1 / 3; /* 写真は、名前と説明の2段分の高さ */
 display: block;
 width: 84px;
 height: 84px;
 overflow: hidden; /* 写真が大きくなっても、枠からはみ出さない */
 background: #f5f5f5;
}
.tp_cats .img img {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: contain; /* 写真を切らずに、枠の中に収める */
 transition: transform .3s ease; /* 大きくなる速さ（.3s ＝ 0.3秒） */
}
.tp_cats .name {
 grid-column: 2;
 align-self: end;
 font-family: var(--en);
 font-size: 21px;
 font-weight: 500;
 letter-spacing: .04em;
 line-height: 1.3;
 transition: color .2s ease;
}
.tp_cats .desc {
 grid-column: 2;
 align-self: start;
 margin-top: 2px;
 font-size: 12px;
 line-height: 1.6;
 color: #666;
}
.tp_cats .ext { /* （別サイト）（Instagram） */
 color: #a8844a;
}
.tp_cats_arrow {
 grid-column: 3;
 grid-row: 1 / 3;
 font-size: 22px;
 line-height: 1;
 color: var(--red);
}

/* マウスを乗せたとき: 行が少し色づき、写真が少し大きく、名前が赤くなる */
.tp_cats a:hover {
 opacity: 1; /* 「リンクが薄くなる」を、ここでは止める */
 background: #faf8f5;
}
.tp_cats a:hover .img img {
 transform: scale(1.04); /* 1.04 ＝ 4%大きく（ピックアップの写真と同じ） */
}
.tp_cats a:hover .name {
 color: var(--red);
}

@media print, screen and (min-width: 768px) {
.tp_cat {
 padding: 76px 32px 40px;
}
.tp_cat_head h2 {
 font-size: 30px;
}
.tp_cat_head p {
 font-size: 15px;
}
/* パソコンは2列 */
.tp_cats {
 grid-template-columns: 1fr 1fr;
 column-gap: 40px; /* 左右の列の間 */
 margin-top: 40px;
}
.tp_cats a {
 grid-template-columns: 150px 1fr 24px;
 column-gap: 24px;
 padding: 20px 0;
}
.tp_cats .img {
 width: 150px;
 height: 150px;
}
.tp_cats .name {
 font-size: 30px;
}
.tp_cats .desc {
 margin-top: 6px;
 font-size: 14px;
}
.tp_cats_arrow {
 font-size: 30px;
}
}


/* ==========================================================
 7. gandp … G&Pのバナー
========================================================== */
.tp_gp {
 display: block;
}
.tp_gp img {
 display: block;
 width: 100%;
 transition: opacity .2s ease;
}
.tp_gp_text {
 margin: 16px 0 14px;
 line-height: 1.95;
}

/* マウスを乗せたとき: 以前のサイトのバナーと同じく、画像が少し曇る */
.tp_gp:hover {
 opacity: 1; /* 枠ではなく、画像だけを曇らせる */
}
.tp_gp:hover img {
 opacity: .8; /* .8 ＝ 80%の濃さ（小さく → もっと曇る） */
}


/* ==========================================================
 8. flow … ご購入の流れ（番号つき）
========================================================== */
.tp_flow {
 display: grid;
 gap: 10px;
 counter-reset: flow; /* 番号を1から数える */
}
.tp_flow li {
 position: relative;
 padding: 14px 14px 14px 56px; /* 左は、番号の丸の分あける */
 background: var(--gray);
 counter-increment: flow;
}
.tp_flow li::before { /* 赤い丸の番号（直径30px） */
 content: counter(flow);
 position: absolute;
 left: 14px;
 top: 14px;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 30px;
 height: 30px;
 border-radius: 50%;
 font-family: var(--en);
 font-size: 15px;
 line-height: 1;
 color: #fff;
 background: var(--red);
}
.tp_flow h3 {
 font-size: 15px;
 font-weight: 700;
 line-height: 1.5;
}
.tp_flow p {
 margin-top: 2px;
 font-size: 13px;
 line-height: 1.8;
}

@media print, screen and (min-width: 768px) {
.tp_flow {
 grid-template-columns: repeat(4, 1fr); /* 4列に並べる */
 gap: 12px;
}
.tp_flow li {
 padding: 56px 16px 18px; /* 番号の丸を、上に置く */
}
.tp_flow p {
 font-size: 14px;
}
}


/* ==========================================================
 9. owner … 運営について（文章と写真）
========================================================== */
.tp_owner {
 display: grid;
 gap: 16px;
 align-items: center;
}
.tp_owner_text p + p {
 margin-top: 10px; /* 段落の間 */
}
.tp_owner_img img {
 display: block;
 width: 100%;
 aspect-ratio: 4 / 3; /* 写真を 横4：縦3 の形にそろえる */
 object-fit: cover;
}

@media print, screen and (min-width: 768px) {
.tp_owner {
 grid-template-columns: 1.3fr 1fr; /* 文章：写真 ＝ 1.3：1 の幅 */
 gap: 36px;
}
}


/* ==========================================================
 10. 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;
}
}


/* ==========================================================
 11. 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;
}
}


/* ==========================================================
 12. 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;
}


/* ==========================================================
 13. 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;
}
}