@charset "utf-8";
/* ==========================================================
 /shop/flugelhorn/style.css … Flugelhornページ（/shop/flugelhorn/index.html）の見た目
 ・このページの見た目は、このファイル1つで完結（ほかのCSSは読み込まない）
 ・カテゴリページ（Trumpet・Flugelhorn・今後のカテゴリー）は、4〜6 の部分も同じ（クラス名 ct_〜）
   → 4〜6 を直したら、ほかのカテゴリページの style.css も同じように直す
 ・画像は /shop/assets/img/ と /shop/G_P_files/ にある（このページからは ../assets/img/ と ../G_P_files/）

 【目次】ページの上から順
   0. setting   色・文字・上のバーの高さ（ここを変えると、ページ全体が変わる）★
   1. base      ページ全体の基本★
   2. header    上のバー・カテゴリバー・パンくずリスト（スクロールしても上に残る）★
   3. parts     ボタン・バッジ・見出し・商品カード・仕様の表・折りたたみ・ページ内タブ（よく使う部品）★
   4. head      ページの見出し（FLUGELHORN／フリューゲルホルン／◯点）◆
   5. list      商品一覧の場所 ◆
   6. product   商品（1商品ずつ、縦に並べる。パソコンは 写真｜説明 の2列）◆
   7. contact   お問い合わせ（黒い枠）★
   8. footer    バナー・フッター★
   9. motion    スクロールで出てくる動き（動きの調整は、ここの数字だけ）★
  10. reduce    動きを減らす設定（パソコン・スマホで「視差効果を減らす」にしている人向け）★

 【ほかのページと同じ部分】★印
  ・★印の部分は、全ページの style.css に、まったく同じものがある（番号だけはページごとに違う）
  ・★印の部分を直したら、ほかのページの style.css にも、そのまま貼り付ける
  ・ページによっては使わない部品もあるが、全ページで同じにしておく（貼り付けるだけで済むように）
 【カテゴリページで同じ部分】◆印
  ・◆印の部分は、カテゴリページ（Trumpet・Flugelhorn・今後のカテゴリー）の 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. head … ページの見出し ◆
========================================================== */
.ct_head {
 max-width: 1080px;
 margin: 0 auto;
 padding: 18px 16px 4px; /* 上 左右 下 の余白 */
}
.ct_head_en { /* TRUMPET などの英語 */
 font-family: var(--en);
 font-size: 12px;
 letter-spacing: .3em; /* 文字の間隔（.3em ＝ 文字0.3個分） */
 color: var(--red);
}
.ct_head h1 {
 margin-top: 2px;
 padding-left: 12px;
 border-left: 5px solid var(--red); /* 左の赤い線 */
 font-size: 24px;
 font-weight: 700;
 line-height: 1.35;
 color: #000;
}
.ct_head_lead {
 margin-top: 8px;
 font-size: 13px;
 line-height: 1.8;
 color: #666;
}
.ct_head_lead b { /* 「3点」 */
 margin-left: 6px;
 color: #333;
}

@media print, screen and (min-width: 768px) {
.ct_head {
 padding: 28px 32px 6px;
}
.ct_head h1 {
 font-size: 32px;
}
.ct_head_lead {
 font-size: 14px;
}
}


/* ==========================================================
 5. list … 商品一覧の場所 ◆
========================================================== */
.ct_list {
 max-width: 1080px;
 margin: 0 auto;
 padding: 12px 16px 10px;
}

@media print, screen and (min-width: 768px) {
.ct_list {
 padding: 16px 32px 14px;
}
}


/* ==========================================================
 6. product … 商品（1商品ずつ、縦に並べる） ◆
    スマホ: 写真の下に説明 ／ パソコン: 左に写真、右に説明
========================================================== */
.ct_prod {
 display: grid;
 gap: 18px; /* 写真と説明の間 */
 padding: 26px 0 30px;
 border-bottom: 1px solid var(--line); /* 商品の区切り線 */
}
.ct_prod:first-child {
 padding-top: 6px;
}
/* ページ内の移動先（#flora-1176 など）が上のバーに隠れないようにする設定は、1. base の [id] */

/* 写真（白い枠） */
.ct_prod_img {
 display: block;
 padding: 16px; /* 枠の余白 */
 border: 1px solid var(--line);
 background: #fff;
 overflow: hidden; /* 写真が大きくなっても、枠からはみ出さない */
}
.ct_prod_img img {
 display: block;
 width: 100%;
 aspect-ratio: 1 / 1; /* 正方形にそろえる */
 object-fit: contain; /* 写真を切らずに、枠の中に収める */
 transition: transform .3s ease; /* 大きくなる速さ（.3s ＝ 0.3秒。ほかの商品写真と同じ） */
}

/* ブランド（G&P ／ ITALY・バッジ・G&Pについて） */
.ct_prod_brand {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 4px 10px; /* 上下の間 左右の間 */
 font-family: var(--en);
 font-size: 12px;
 letter-spacing: .2em;
 color: #888;
}
.ct_prod_brand a { /* 「G&Pについて」 */
 font-family: var(--ja);
 font-size: 12px;
 letter-spacing: 0;
 color: var(--red);
 text-decoration: underline;
 text-underline-offset: 3px;
}

/* 商品名・ひとこと・説明 */
.ct_prod_name {
 margin-top: 6px;
 font-size: 22px;
 font-weight: 700;
 line-height: 1.4;
 color: #000;
}
.ct_prod_name a {
 color: #000;
}
.ct_prod_catch { /* ひとこと（左に赤い線） */
 margin-top: 10px;
 padding-left: 10px;
 border-left: 4px solid var(--red);
 font-size: 14px;
 font-weight: 700;
 line-height: 1.8;
}
.ct_prod_text {
 margin-top: 10px;
 font-size: 13px;
 line-height: 1.95;
}
.ct_prod .ks_spec { /* 仕様の表（見た目は 3. parts） */
 margin-top: 14px;
}

/* 価格・ボタン */
.ct_prod_price {
 display: flex;
 flex-wrap: wrap;
 align-items: baseline; /* 「時価」と小さい文字の、文字の下をそろえる */
 gap: 4px 10px;
 margin-top: 16px;
 font-size: 13px;
 color: #666;
}
.ct_prod_price b { /* 「時価」 */
 font-size: 24px;
 line-height: 1.3;
 color: var(--dred);
}
.ct_prod_btns {
 display: grid;
 gap: 8px;
 margin-top: 14px;
}
.ct_prod_btns a.ks_btn {
 display: block;
}

/* マウスを乗せたとき: 写真が少し大きくなる ／ 商品名が赤くなり、下線が出る（商品カードと同じ） */
a.ct_prod_img:hover img {
 transform: scale(1.04); /* 1.04 ＝ 4%大きく（ほかの商品写真と同じ） */
}
.ct_prod_name a:hover {
 opacity: 1; /* 「リンクが薄くなる」を、ここでは止める */
 color: var(--red);
 text-decoration: underline;
}

@media print, screen and (min-width: 768px) {
.ct_prod {
 grid-template-columns: 1.1fr 1fr; /* 写真：説明 ＝ 1.1：1 の幅 */
 gap: 40px;
 align-items: start;
 padding: 44px 0 48px;
}
.ct_prod_img {
 padding: 24px;
}
.ct_prod_name {
 font-size: 30px;
}
.ct_prod_catch {
 font-size: 16px;
}
.ct_prod_text {
 font-size: 15px;
}
.ct_prod_btns {
 grid-template-columns: 1fr 1fr; /* ボタンを2つ横に並べる */
}
}


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


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


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


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