/*=============================================================
  index.css — chinretu.co.jp トップページ専用
  元ページのデザイン完全再現 ＋ レスポンシブデザイン対応
  基準横幅: 700px（元ページ準拠） → モバイルで流動対応
=============================================================*/

/* ====== リセット ====== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ====== ベース ====== */
html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: "MS PGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: #ffffff;
  /* タイル背景導入後は背景画像をタイルBGに置き換え */
  background-color: #040812;
  min-width: 320px;
}

/* ======================================================
   タイル背景（トップページ用）
   mail-form.html と同じ並び順：1→4→2→5→3→6→10→7→9→8
   明るさはお問い合わせページより少し明るめに調整
   ====================================================== */

/* タイル背景グリッド（fixed・全画面） */
#tile-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2px;
  pointer-events: none;
  background: #040812;
}
@media screen and (max-width: 768px) {
  #tile-bg {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 1fr);
  }
}
#tile-bg .tile-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  /* お問い合わせページ(0.55)より少し明るく・前回(0.70)より少し暗く */
  filter: brightness(0.62) saturate(0.80);
  background: #040812;
}

/* 暗幕オーバーレイ（前回(0.58)より少し濃く） */
#tile-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, rgba(4,8,30,.66) 0%, rgba(2,5,20,.58) 100%);
  pointer-events: none;
}

a { color: #00ccff; text-decoration: none; }
a:hover { color: #ffff00; text-decoration: underline; }
img { max-width: 100%; height: auto; vertical-align: middle; border: none; }

/* ====== ページ外枠 ====== */
#page-wrap {
  position: relative; /* タイル背景の上にコンテンツを重ねる */
  z-index: 2;
  width: min(700px, 100%);
  margin: 0 auto;
}

/* ====== h2（各セクション見出し） ====== */
.section-h2 {
  font-size: clamp(13px, 3vw, 15px);
  font-weight: bold;
  color: #ffff99;
  background: rgba(0,0,60,0.85);
  border-left: 4px solid #4466aa;
  border-bottom: 1px solid #4466aa;
  padding: 7px 12px;
  margin: 8px 0 0;
  line-height: 1.5;
}
#examples-section h2 {
  font-size: clamp(14px, 3.5vw, 18px);
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 8px;
}
.cta-h2 {
  font-size: clamp(13px, 3vw, 15px);
  color: #ffccdd;
  margin-bottom: 6px;
  font-weight: bold;
}

/* ====== h3（特価品・納入実例） ====== */
.tokka-h3 {
  font-size: 11px;
  font-weight: bold;
  color: #aaccff;
  background: rgba(0,0,40,0.6);
  padding: 3px 8px;
  border-left: 3px solid #4466aa;
  margin: 6px 0 0;
}
.delivery-h3 {
  font-size: clamp(12px, 2.5vw, 14px);
  font-weight: bold;
  color: #ffccaa;
  background: rgba(30,10,0,0.7);
  border-left: 4px solid #cc6633;
  padding: 6px 10px;
  margin: 14px 0 6px;
  line-height: 1.5;
}

/* ====== 区切り線 ====== */
.hr-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: #4466aa;
  border: none;
  margin: 6px 0;
}

/* ====== h1（SEO: ページ最上部） ====== */
#site-h1 {
  font-size: clamp(11px, 2vw, 13px);
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  padding: 4px 6px;
  background: rgba(0,0,30,0.7);
  line-height: 1.5;
}
#site-h1 a { color: #ffffff; }

/* ====== SNSバー（上部・SEO有利） ====== */
#sns-top-bar {
  background: rgba(0,0,40,0.85);
  border: 1px solid #224488;
  padding: 8px 10px;
  text-align: center;
}
#sns-top-bar p {
  font-size: 12px;
  color: #aaccff;
  margin-bottom: 7px;
}
.sns-btn-row {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;   /* スマホで1行に収める */
  gap: 4px;
}
/* 極小画面では折り返しを許可 */
@media screen and (max-width: 360px) {
  .sns-btn-row { flex-wrap: wrap; }
}
.sns-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;       /* 90%縮小: 5px→4px, 12px→8px */
  border-radius: 4px;
  font-size: 11px;         /* 90%縮小: 12px→11px */
  font-weight: bold;
  color: #fff !important;
  text-decoration: none !important;
  transition: opacity .2s, transform .2s;
  white-space: nowrap;
}
.sns-btn:hover { opacity: .85; transform: translateY(-2px); }
.sns-btn svg { width: 13px; height: 13px; display: block; flex-shrink: 0; }
.sns-btn--fb  { background: #1877f2; }
.sns-btn--ig  { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.sns-btn--x   { background: #111; border: 1px solid #555; }
.sns-btn--pin { background: #e60023; }

/* ====== ロゴ行 ====== */
#logo-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(0,0,20,0.8);
  flex-wrap: wrap;
}
#logo-row .logo-img { flex-shrink: 0; }
#logo-row .logo-img img { height: 52px; width: auto; }
#logo-row .logo-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
  justify-content: flex-end; /* madeinjapan を右寄せ */
  margin-left: auto;
}
#logo-row .logo-right img { height: 52px; width: auto; max-width: 100%; }

/* ====== 当社周辺図ボタン ====== */
.map-btn {
  display: inline-block;
  background: linear-gradient(180deg, #4a5060 0%, #2a3040 100%);
  color: #ffff00 !important;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 8px;
  border: 1px solid #556688;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 3px rgba(0,0,0,0.4);
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.map-btn:hover {
  background: linear-gradient(180deg, #5a6878 0%, #3a4858 100%);
  color: #ffff99 !important;
  text-decoration: none !important;
}

/* ====== 店舗情報バー ====== */
#info-bar {
  background: rgba(0,0,40,0.20);
  border: 1px solid #335588;
  border-top: none;
  padding: 6px 10px;
  font-size: 12px;
  color: #ffffff;
  line-height: 1.8;
  text-align: center;
}
#info-bar a { color: #00ccff; }
#catchcopy {
  background: rgba(0,0,60,0.85);
  border: 1px solid #335588;
  border-top: none;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  /* padding を左右ゼロにして #page-wrap と完全同幅を確保 */
  padding: 6px 0;
  min-height: 36px;
  display: block;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
/* テキスト本体: nowrap + 小さい vw で一行に収める
   文字数30字、最小幅320px → 320÷30≒10.7px → 3.35vw
   余裕を見て 3.0vw（320px時≒9.6px）、最小8px */
#catchcopy span {
  display: block;
  white-space: nowrap;
  /* 全角・半角混在で実質約42文字相当
     320px ÷ 42 ≒ 7.6px → 7.6÷320×100 = 2.4vw
     余裕を見て 2.2vw（320px時≒7.0px）*/
  font-size: clamp(6.5px, 2.2vw, 11px);
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

/* ====== セールバナー ====== */
#sale-banner { text-align: center; }
#sale-banner a { display: block; }
#sale-banner img { width: 100%; height: auto; display: block; transition: opacity .2s; }
#sale-banner a:hover img { opacity: .82; }

/* ====== 作例ナビ ====== */
#sakurei-nav {
  display: flex;
  flex-wrap: wrap;
}
.sakurei-cell {
  flex: 1 1 180px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid #c8961e;
  border-right: none;
  background: linear-gradient(160deg, #3d2e00 0%, #1e1600 45%, #2a1e00 100%);
  box-shadow: inset 0 1px 0 rgba(255,240,140,0.25), inset 0 -1px 0 rgba(0,0,0,0.6), 2px 0 6px rgba(0,0,0,0.5);
  padding: 0;
  font-size: clamp(12px, 2.5vw, 14px);
  font-weight: bold;
}
.sakurei-cell:last-child { border-right: 1px solid #c8961e; }
/* ガラス反射（上部ハイライト） */
.sakurei-cell::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 48%;
  background: linear-gradient(180deg,
    rgba(255,248,180,0.42) 0%,
    rgba(255,240,120,0.22) 55%,
    rgba(255,255,255,0)    100%);
  pointer-events: none;
  z-index: 1;
}
/* ガラス反射（斜めハイライト） */
.sakurei-cell::after {
  content: '';
  position: absolute;
  top: 0; left: -30%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg,
    rgba(255,255,220,0.0)  0%,
    rgba(255,240,120,0.13) 45%,
    rgba(255,255,220,0.0)  100%);
  pointer-events: none;
  z-index: 1;
}
.sakurei-cell a {
  display: block;
  width: 100%;
  padding: 13px 6px;
  color: #5ab4f5;
  text-decoration: none;
  position: relative;
  z-index: 2;
  text-shadow:
    0 -1px 0   rgba(160,220,255,0.6),
    0  2px 3px rgba(0,0,0,1),
    0  4px 8px rgba(0,0,0,0.9),
    0  8px 18px rgba(0,0,0,0.7),
    0  0   10px rgba(30,100,200,0.25);
  letter-spacing: 1.5px;
  transition: color .2s, background .2s, text-shadow .2s;
}
.sakurei-cell a:hover {
  color: #90d4ff;
  background: linear-gradient(160deg,
    rgba(20,40,10,0.5) 0%,
    rgba(5,15,5,0.5)   100%);
  text-decoration: none;
  text-shadow:
    0 -1px 0   rgba(180,235,255,0.7),
    0  3px 5px rgba(0,0,0,1),
    0  6px 12px rgba(0,0,0,0.85),
    0  10px 22px rgba(0,0,0,0.65),
    0  0   16px rgba(50,140,255,0.55);
}
.sakurei-cell a:active {
  background: rgba(0,0,0,0.4);
  color: #3a90d0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}
.sakurei-light {
  width: 100%;
  border: 1px solid #335588;
  border-top: none;
  background: #000;
  padding: 0;
  text-align: center;
  line-height: 0; /* 画像下の隙間をなくす */
}
.sakurei-light a { display: block; }
.sakurei-light a img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity .2s;
}
.sakurei-light a:hover img { opacity: .85; }

/* ====== 産学官バナー ====== */
#sangakukan { text-align: center; }
#sangakukan a { display: block; }
#sangakukan img { width: 100%; height: auto; display: block; transition: opacity .2s; }
#sangakukan a:hover img { opacity: .82; }

/* ====== サイズ別・業種別 ====== */
#cat-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px 0;
}
.cat-cell {
  flex: 1 1 180px;
  text-align: center;
  border: 1px solid #556688;
  background: linear-gradient(180deg, #4a5060 0%, #2a3040 50%, #1e2530 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 4px rgba(0,0,0,0.5);
  padding: 0;
  font-size: clamp(12px, 2.5vw, 14px);
  font-weight: bold;
}
.cat-cell a {
  display: block;
  width: 100%;
  padding: 11px 6px;
  color: #ddeeff;
  text-decoration: none;
  transition: background .15s, color .15s, box-shadow .15s;
}
.cat-cell a:hover {
  background: linear-gradient(180deg, #5a6878 0%, #3a4858 50%, #2e3c4c 100%);
  color: #ffff99;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 2px 4px rgba(0,0,0,0.5);
}
.cat-cell a:active {
  background: linear-gradient(180deg, #1e2530 0%, #2a3040 100%);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

/* ====== 4枚バナーグリッド ====== */
#four-banners {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.banner-item { display: block; overflow: hidden; aspect-ratio: 347 / 200; }
.banner-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .2s; }
.banner-item:hover img { opacity: .85; }

/* ====== PrivateMuseum + 納入実例 ====== */
#pm-row {
  display: flex;
  flex-wrap: wrap;
  background: rgba(0,0,20,0.20);
  border: 1px solid #335588;
}
#pm-row .pm-cell {
  flex: 2 1 300px;
  padding: 8px;
  text-align: center;
  border-right: 1px solid #335588;
  /* PrivateMuseum バナーと同系のダークグリーン・半透明 */
  background: rgba(26,46,26,0.20);
}
#pm-row .del-cell {
  flex: 1 1 150px;
  padding: 8px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 納入実例バナーと同系のダークベージュ・半透明 */
  background: rgba(42,36,24,0.20);
}
#pm-row img { max-width: 100%; height: auto; transition: opacity .2s; }
#pm-row a:hover img { opacity: .82; }

/* ====== オーダーバナー ====== */
#order-banner { text-align: center; }
#order-banner a { display: block; }
#order-banner img { width: 100%; height: auto; display: block; max-width: 694px; margin: 0 auto; transition: opacity .2s; }
#order-banner a:hover img { opacity: .82; }

/* ====== 製品バナー 3列グリッド ====== */
#product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.prod-cell { aspect-ratio: 225 / 100; overflow: hidden; }
.prod-cell a { display: block; width: 100%; height: 100%; }
.prod-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .2s; }
.prod-cell:hover img { opacity: .85; }
.prod-cell--text {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 中間の暗さのダークグレー */
  background: linear-gradient(180deg, #383838 0%, #242424 50%, #1a1a1a 100%);
  border: 1px solid #555555;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 4px rgba(0,0,0,0.5);
  aspect-ratio: 225 / 100;
  transition: background .15s;
}
.prod-cell--text a {
  color: #ffff00;
  font-size: clamp(12px, 2.5vw, 14px);
  font-weight: bold;
  text-align: center;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  transition: color .15s;
}
.prod-cell--text:hover {
  background: linear-gradient(180deg, #484848 0%, #343434 50%, #2a2a2a 100%);
}
.prod-cell--text a:hover { color: #ffffff; text-decoration: none; }

/* ====== 全幅バナー ====== */
.full-banner { text-align: center; }
.full-banner a { display: block; }
.full-banner img { width: 100%; height: auto; display: block; transition: opacity .2s; }
.full-banner a:hover img { opacity: .82; }

/* ====== 特価品 ＋ 会社特徴 ====== */
#tokka-section {
  display: flex;
  gap: 0;
  background-color: rgba(0,0,20,0.20);
  border: 1px solid #335588;
  overflow: visible;  /* 子要素の幅計算を妨げない */
  width: 100%;
  box-sizing: border-box;
}
/* 左カラム：特価品リスト */
#tokka-list {
  flex: 0 0 170px;
  border-right: 2px solid #4466aa;
}
.tokka-item {
  padding: 8px 6px;
  border-bottom: 1px solid #223366;
  text-align: center;
}
.tokka-item img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  display: block;
  margin: 0 auto 4px;
  border: 1px solid #445566;
}
.tokka-item a { display: block; }
.tokka-name { font-size: 12px; color: #ffff99; font-weight: bold; padding: 3px 0; }
.tokka-old  { font-size: 11px; color: #ffffff; }
.tokka-price{ font-size: 16px; color: #ffff00; font-weight: bold; }
.tokka-note { font-size: 10px; color: #cccccc; }
.tokka-link a { color: #00ffff; font-size: 12px; font-weight: bold; }
.tokka-link a:hover { color: #ffff00; }
/* 右カラム：会社特徴 */
#features-col {
  flex: 1 1 0%;          /* 残り幅をすべて使う */
  min-width: 0;          /* flex折り返し防止に必須 */
  padding: 4px 6px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  box-sizing: border-box;
  overflow: hidden;
}
#features-col strong { color: #00ffff; }
#features-col a { color: #00ffff; }
.feat-line {
  /* PC時: 右カラム幅 ≈ 514px / 22文字 ≈ 23px → 3.3vw */
  font-size: clamp(11px, 3.3vw, 21px);
  padding: 0;
  margin: 0;
  border-bottom: 1px dotted rgba(100,130,200,0.25);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  line-height: 1.35;   /* 行間を少し広げて可読性向上 */
}
.feat-line:last-child { border-bottom: none; }

/* ====== リンクバー類 ====== */
.linkbar {
  background: rgba(0,0,40,0.8);
  border: 1px solid #335588;
  border-top: none;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
}
.linkbar a { color: #00ccff; font-size: 14px; font-weight: bold; }
.linkbar a:hover { color: #ffff00; }

#contact-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 4px 0;
  border: none;
}
.contact-nav-cell {
  flex: 1 1 120px;
  text-align: center;
  padding: 0;
  font-size: clamp(12px, 2.5vw, 14px);
  font-weight: bold;
  /* ブルーグレーのボタン */
  border: 1px solid #4477aa;
  background: linear-gradient(180deg, #354a60 0%, #1e3048 50%, #162438 100%);
  box-shadow: inset 0 1px 0 rgba(150,200,255,0.18), 0 2px 4px rgba(0,0,0,0.5);
}
.contact-nav-cell a {
  display: block;
  width: 100%;
  padding: 10px 4px;
  color: #aaccff;
  text-decoration: none;
  transition: background .15s, color .15s;
}
/* お問い合わせボタンのみ赤味グレー */
.contact-nav-cell--inquiry {
  border: 1px solid #885555;
  background: linear-gradient(180deg, #603535 0%, #3e2020 50%, #301818 100%);
  box-shadow: inset 0 1px 0 rgba(255,180,180,0.18), 0 2px 4px rgba(0,0,0,0.5);
}
.contact-nav-cell--inquiry a { color: #ffbbbb; }
#contact-nav .contact-nav-cell--inquiry a:hover {
  background: linear-gradient(180deg, #ff3333 0%, #cc0000 50%, #aa0000 100%);
  color: #ffffff;
  text-decoration: none;
}
.contact-nav-cell--inquiry a:active {
  background: linear-gradient(180deg, #301818 0%, #3e2020 100%);
}
.contact-nav-cell a:hover {
  background: linear-gradient(180deg, #4a6080 0%, #2e4868 50%, #223858 100%);
  color: #ffff99;
  text-decoration: none;
}
.contact-nav-cell a:active {
  background: linear-gradient(180deg, #162438 0%, #1e3048 100%);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

/* ====== スワロフスキーバナー ====== */
#swarovski { text-align: center; }
#swarovski a { display: block; }
#swarovski img { width: 100%; height: auto; display: block; transition: opacity .2s; }
#swarovski a:hover img { opacity: .82; }

/* ====== 特商法バー ====== */
#tokushou {
  padding: 4px 0;
  text-align: center;
}
/* 黄色味掛かったグレーボタン */
#tokushou a {
  display: inline-block;
  background: linear-gradient(180deg, #5a5438 0%, #3a3420 50%, #2c2818 100%);
  color: #ffe680 !important;
  font-size: 13px;
  font-weight: bold;
  padding: 8px 22px;
  border: 1px solid #7a6a30;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,240,100,0.2), 0 2px 4px rgba(0,0,0,0.5);
  text-decoration: none !important;
  transition: background .15s, color .15s;
}
#tokushou a:hover {
  background: linear-gradient(180deg, #6e6840 0%, #4a4428 50%, #3a3420 100%);
  color: #ffffff !important;
  text-decoration: none !important;
}
#tokushou a:active {
  background: linear-gradient(180deg, #2c2818 0%, #3a3420 100%);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

/* ====== Facebook リンクボタンエリア ====== */
#fb-btn-area {
  background: rgba(0,0,30,0.85);
  border: 1px solid #335588;
  padding: 14px 12px;
}
#fb-btn-lead {
  font-size: 13px;
  font-weight: bold;
  color: #aaccff;
  margin-bottom: 12px;
  line-height: 1.6;
}
.fb-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
/* Facebook公式ページボタン */
.fb-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 5px;
  font-size: clamp(13px, 2.5vw, 15px);
  font-weight: bold;
  text-decoration: none !important;
  transition: background .15s, transform .15s;
  flex: 1 1 220px;
  justify-content: center;
  background: linear-gradient(180deg, #2a4a8a 0%, #1a3070 50%, #122460 100%);
  border: 1px solid #4466bb;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(150,180,255,0.2), 0 2px 6px rgba(0,0,0,0.5);
}
.fb-link-btn:hover {
  background: linear-gradient(180deg, #3a5a9a 0%, #2a4080 50%, #1e3470 100%);
  color: #ffff99 !important;
  transform: translateY(-2px);
  text-decoration: none !important;
}

/* ====== Facebook過去ログ バナーボタン（視認性高・格上げ） ====== */
.fb-log-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  margin-top: 2px;
  text-decoration: none !important;
  border-radius: 6px;
  /* 少し明るめのブルーグレーで公式ページボタンと差別化 */
  background: linear-gradient(135deg, #1e3a5a 0%, #162a44 60%, #0e1e30 100%);
  border: 1px solid #4488bb;
  box-shadow: inset 0 1px 0 rgba(150,210,255,0.18), 0 3px 8px rgba(0,0,0,0.5);
  transition: background .15s, transform .15s, box-shadow .15s;
}
.fb-log-banner:hover {
  background: linear-gradient(135deg, #2a4a6a 0%, #1e3a54 60%, #162a40 100%);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(150,210,255,0.25), 0 5px 12px rgba(0,0,0,0.5);
  text-decoration: none !important;
}
/* Facebookアイコン部分 */
.fb-log-banner__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: #1877f2;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
/* テキスト本体 */
.fb-log-banner__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fb-log-banner__title {
  display: block;
  font-size: clamp(13px, 2.8vw, 16px);
  font-weight: bold;
  color: #ffffff;
  line-height: 1.3;
}
.fb-log-banner__desc {
  display: block;
  font-size: clamp(11px, 2.2vw, 13px);
  color: #aaccee;
  line-height: 1.5;
}
/* 右矢印 */
.fb-log-banner__arrow {
  flex-shrink: 0;
  font-size: 18px;
  color: #aaccff;
  transition: transform .15s, color .15s;
}
.fb-log-banner:hover .fb-log-banner__arrow {
  transform: translateX(4px);
  color: #ffff99;
}
.fb-log-banner:hover .fb-log-banner__title { color: #ffff99; }

/* ====== Instagram（showcase.htm等と同一スタイル） ====== */
#ig-wrap {
  background: rgba(20,0,15,0.85);
  border: 1px solid #cc3366;
  padding: 10px;
}
#ig-title {
  font-size: 13px;
  color: #ffffff;
  padding-bottom: 6px;
  line-height: 1.7;
}
#ig-title strong { color: #ff99cc; }
.ig-link {
  font-size: 13px;
  margin-bottom: 8px;
}
.ig-link a { color: #ff99cc; font-weight: bold; }
.ig-link a:hover { color: #ffff00; }
.insta-update { font-size: 12px; color: #cccccc; }
/* showcase.htm と同じ insta-widget-wrap */
.insta-widget-wrap {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  display: block;
}
.insta-widget-wrap iframe {
  display: block;
  width: 100%;
  border: none;
}

/* ====== ショーケースラボ・マイスタジオ ====== */
#lab-studio {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #335588;
  background: rgba(0,0,30,0.8);
}
#lab-studio .lab-cell {
  flex: 1 1 200px;
  padding: 10px;
  text-align: center;
  border-right: 1px solid #335588;
}
#lab-studio .lab-cell:last-child { border-right: none; }
#lab-studio .lab-cell img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
#lab-studio .studio-cell {
  flex: 1 1 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  font-size: clamp(12px, 2.5vw, 14px);
  font-weight: bold;
}
#lab-studio .studio-cell a { color: #ffff00; }
#lab-studio .studio-cell a:hover { color: #fff; text-decoration: underline; }

/* ====== お知らせ ====== */
#oshirase {
  background: rgba(0,0,30,0.85);
  border: 1px solid #335588;
}
.oshirase-title {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: #ffff99;
  padding: 8px;
  background: rgba(0,0,50,0.8);
  border-bottom: 1px solid #335588;
}
.oshirase-body {
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.8;
  border-bottom: 1px solid #223366;
  text-align: center;
  color: #ffffff;
}
.oshirase-body:last-child { border-bottom: none; }
.oshirase-body a { color: #00ccff; }
/* スマホで左寄せ（PCはcenter維持） */
@media screen and (max-width: 600px) {
  .oshirase-left { text-align: left; }
}
.cyan-text { color: #00ffff; }

/* ====== ミニカーファン ====== */
#minicar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0,0,30,0.85);
  border: 1px solid #335588;
  border-top: none;
}
#minicar img { flex-shrink: 0; width: 73px; height: auto; }
#minicar p { font-size: 13px; color: #ffffff; }
#minicar strong { color: #ffff99; }

/* ====== ショールーム写真 ====== */
#showroom {
  background: rgba(0,0,30,0.85);
  border: 1px solid #335588;
  border-top: none;
  padding: 10px;
  text-align: center;
  font-size: 12px;
  color: #ffffff;
  line-height: 1.6;
}
.showroom-block {
  margin-bottom: 14px;
  display: inline-block;
  width: 100%;
}
.showroom-block:last-child { margin-bottom: 0; }
.showroom-block img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 0;  /* 下マージンゼロ → キャプション密着 */
}
.showroom-cap {
  margin: 3px 0 0;
  padding: 0;
  font-size: 12px;
  color: #ffffff;
  line-height: 1.6;
}

/* ====== お問い合わせCTA ====== */
#contact-cta {
  background: linear-gradient(135deg, #330020, #550033);
  border: 1px solid #cc3366;
  padding: 14px 12px;
  text-align: center;
}
#contact-cta h2 { font-size: clamp(13px, 3vw, 15px); color: #ffccdd; margin-bottom: 6px; }
#contact-cta p  { font-size: 12px; color: #ccaaaa; margin-bottom: 6px; }
/* ご予約のお願い：白色で目立たせる */
.cta-reserve {
  font-size: 13px !important;
  color: #ffffff !important;
  font-weight: bold;
  margin-bottom: 10px !important;
}
.btn-contact {
  display: inline-block;
  background: #cc3366;
  color: #fff !important;
  font-size: clamp(13px, 3vw, 14px);
  font-weight: bold;
  padding: 9px 20px;
  border-radius: 4px;
  text-decoration: none !important;
  margin: 4px;
  transition: background .2s;
}
.btn-contact:hover { background: #ff6699; }
.btn-contact--sub { background: #333399; }
.btn-contact--sub:hover { background: #5555cc; }

/* ====== 実例セクション ====== */
#examples-section {
  background: rgba(0,0,20,0.85);
  border: 1px solid #335588;
  padding: 10px;
  text-align: center;
}
#examples-section h2 {
  font-size: clamp(14px, 3.5vw, 18px);
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 8px;
}
.examples-sub {
  font-size: clamp(13px, 3vw, 15px);
  color: #ffff00;
  font-weight: bold;
  margin: 10px 0 6px;
}
.examples-note {
  font-size: clamp(13px, 3vw, 16px);
  color: #ffffff;
  font-weight: bold;
  margin: 8px 0;
}
.tiled-img { width: 100%; height: auto; display: block; margin: 0 auto 8px; }

/* 納入先カテゴリ */
#delivery-cats {
  background: rgba(0,0,25,0.85);
  border: 1px solid #335588;
  border-top: none;
  padding: 10px 14px;
}
.cat-title-hojin { font-size: 14px; font-weight: bold; color: #ff9999; margin-bottom: 6px; }
.cat-title-kojin  { font-size: 14px; font-weight: bold; color: #ff9999; margin: 14px 0 6px; }
.delivery-cat-list {
  list-style: none;
  padding: 0 0 10px 8px;
  font-size: 13px;
  color: #ffffff;
  line-height: 2;
}
.delivery-cat-list li::before { content: "・"; }
.delivery-cat-list li strong { color: #ffff99; }
.kojin-note { font-size: 12px; color: #cccccc; padding-left: 8px; margin-bottom: 10px; }

/* 実例グリッド（CSS Grid でレスポンシブ） */
.delivery-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  margin-bottom: 12px;
}
.delivery-cell {
  background: rgba(0,0,20,0.7);
  border: 1px solid #223355;
  padding: 4px;
  font-size: 11px;
  color: #ffffff;
  line-height: 1.4;
}
.delivery-cell a { display: block; }
.delivery-cell img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  margin-bottom: 4px;
  border: 1px solid #445566;
  transition: opacity .2s;
}
.delivery-cell a:hover img { opacity: .8; }
.delivery-num { font-weight: bold; color: #99ccff; font-size: 10px; }

.more-link {
  display: flex;
  gap: 3px;
  margin-bottom: 16px;
  padding: 4px 0;
}
.more-link a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 6px;
  font-size: clamp(12px, 2.5vw, 14px);
  font-weight: bold;
  text-decoration: none;
  /* 緑色掛かったグレーボタン */
  border: 1px solid #447755;
  background: linear-gradient(180deg, #3a5040 0%, #223428 50%, #192a20 100%);
  box-shadow: inset 0 1px 0 rgba(150,255,180,0.15), 0 2px 4px rgba(0,0,0,0.5);
  color: #aaffcc;
  transition: background .15s, color .15s;
}
.more-link a:hover {
  background: linear-gradient(180deg, #4a6050 0%, #324840 50%, #27382e 100%);
  color: #ffff99;
  text-decoration: none;
}
.more-link a:active {
  background: linear-gradient(180deg, #192a20 0%, #223428 100%);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

/* ====== FAQ（よくあるご質問） ====== */
#faq-section {
  background: rgba(0,0,20,0.85);
  border: 1px solid #335588;
  border-top: none;
  /* h2.section-h2 と完全同幅に揃える */
  width: 100%;
  box-sizing: border-box;
  display: block;
}

/* Q ボタン（赤味グレー・クリッカブル） */
.faq-q {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  padding: 16px 18px;   /* 内部余白を広げて見やすく */
  font-size: clamp(12px, 2.5vw, 14px);
  font-weight: bold;
  text-align: left;
  cursor: pointer;
  border: none;
  border-bottom: 1px solid #445566;
  /* 無彩色グレー */
  background: linear-gradient(180deg, #505560 0%, #303540 50%, #242830 100%);
  color: #ddeeff;
  box-shadow: inset 0 1px 0 rgba(200,220,255,0.15);
  transition: background .15s, color .15s;
  font-family: inherit;
}
.faq-q:hover {
  background: linear-gradient(180deg, #606870 0%, #404858 50%, #343c48 100%);
  color: #ffff99;
}
/* Q のアイコン */
.faq-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: rgba(150,180,220,0.25);
  border: 1px solid #6688aa;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: bold;
  color: #aaccee;
  line-height: 1;
}
.faq-qtext {
  flex: 1;
  line-height: 1.5;
}
.faq-arrow {
  flex-shrink: 0;
  font-size: 11px;
  color: #99bbdd;
  transition: transform .25s ease;
  display: inline-block;
}

/* A パネル */
.faq-a {
  padding: 14px 18px 18px;
  border-bottom: 1px solid #334455;
  background: rgba(10,15,30,0.7);
  display: block;
  box-sizing: border-box;
  width: 100%;
}
.faq-a[hidden] { display: none; }

/* Aアイコン＋テキスト列を横並びにする行 */
.faq-a-body {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
}

/* Aアイコン */
.faq-aicon {
  flex-shrink: 0;           /* 絶対に縮まない */
  width: 24px;
  height: 24px;
  background: rgba(100,200,100,0.2);
  border: 1px solid #446644;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: bold;
  color: #aaffaa;
  line-height: 1;
  margin-top: 2px;
}

/* テキスト列（回答文＋TELボタン）*/
.faq-a-text {
  flex: 1;                  /* 残り幅をすべて使う */
  min-width: 0;             /* flex縮小バグ防止 */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 回答文 */
.faq-a p {
  font-size: clamp(12px, 2.3vw, 14px);
  color: #ffffff;
  line-height: 1.8;
  margin: 0;
  word-break: break-all;    /* 長い文字列の強制折り返し */
  overflow-wrap: break-word;
}

/* ご来店予約TELボタン（無彩色グレー・改行対応） */
.faq-tel-btn {
  display: inline-flex;
  flex-direction: column;   /* 縦積みで改行 */
  align-items: center;
  gap: 4px;
  padding: 12px 20px;
  margin-top: 0;
  text-decoration: none !important;
  border-radius: 5px;
  border: 1px solid #556677;
  background: linear-gradient(180deg, #505560 0%, #303540 50%, #242830 100%);
  color: #ddeeff !important;
  box-shadow: inset 0 1px 0 rgba(200,220,255,0.18), 0 2px 4px rgba(0,0,0,0.5);
  transition: background .15s, transform .15s;
  width: 100%;
  box-sizing: border-box;
}
.faq-tel-btn:hover {
  background: linear-gradient(180deg, #606870 0%, #404858 50%, #343c48 100%);
  color: #ffff99 !important;
  transform: translateY(-2px);
  text-decoration: none !important;
}
/* ボタン内の1行目（アイコン＋テキスト） */
.faq-tel-line1 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(13px, 2.5vw, 15px);
  font-weight: bold;
}
/* ボタン内の2行目（TEL番号） */
.faq-tel-line2 {
  font-size: clamp(14px, 3vw, 17px);
  font-weight: bold;
  letter-spacing: 0.05em;
  color: #ffff99;
}
.faq-tel-btn svg { flex-shrink: 0; }

.faq-item {
  width: 100%;
  box-sizing: border-box;
  display: block;
}

/* 最後のアイテムの下線なし */
.faq-item:last-child .faq-q { border-bottom: none; }
.faq-item:last-child .faq-a  { border-bottom: none; }

/* ====== コラムテキスト ====== */
#column-text {
  background: rgba(0,0,20,0.85);
  border: 1px solid #335588;
  padding: 12px 16px;
  font-size: 13px;
  color: #ffffff;
  line-height: 2;
}
#column-text p { margin-bottom: 10px; }
#column-text strong { color: #00ccff; }
#column-text a { color: #00ccff; }
.pink { color: #ff9999; }

/* ====== フッター ====== */
#site-footer {
  background: rgba(0,0,20,0.9);
  border-top: 2px solid #335588;
  padding: 12px;
  text-align: center;
  font-size: 11px;
  color: #aaaaaa;
}
#site-footer a { color: #8888cc; }
#site-footer a:hover { color: #ffff00; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin-bottom: 8px; }
.footer-nav a { color: #8888cc; font-size: 12px; }
.footer-domain {
  display: inline-block;
  border: 1px solid #ffffff;
  padding: 2px 8px;
  color: #ffff00;
  font-weight: bold;
  margin: 6px 0;
}

/* ====== 固定ボタン ====== */
#pagetop {
  position: fixed; bottom: 20px; right: 20px;
  background: #335588; color: #fff;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
  transition: background .2s; z-index: 900;
}
#pagetop:hover { background: #5599cc; text-decoration: none; color: #fff; }

#fixed-contact {
  position: fixed; bottom: 20px; left: 20px; z-index: 900;
}
#fixed-contact a {
  display: flex; align-items: center; gap: 5px;
  background: #cc3366; color: #fff;
  padding: 8px 12px; border-radius: 50px;
  font-size: 12px; font-weight: bold; text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
  transition: background .2s; color: #fff !important;
}
#fixed-contact a:hover { background: #ff6699; }

/*=============================================
  レスポンシブ
=============================================*/

/* タブレット 〜 600px */
@media screen and (max-width: 600px) {
  /* feat-line: スマホ時は全幅使えるので vw を大きくする
     390px幅 / 22文字 ≈ 17.7px → 4.5vw、最大19px */
  .feat-line { font-size: clamp(11px, 3.8vw, 17px); line-height: 1.4; }

  #four-banners { grid-template-columns: 1fr 1fr; }

  #product-grid { grid-template-columns: 1fr 1fr; }

  .delivery-grid { grid-template-columns: repeat(4, 1fr); }

  #tokka-section { flex-direction: column; }
  #tokka-list { flex: none; border-right: none; border-bottom: 2px solid #4466aa; }
  .tokka-item { display: flex; align-items: center; gap: 10px; text-align: left; }
  .tokka-item img { width: 80px; height: 80px; flex-shrink: 0; }
  #features-col { padding: 10px; }

  #pm-row .pm-cell { flex: 1 1 100%; border-right: none; border-bottom: 1px solid #335588; }
  #pm-row .del-cell { flex: 1 1 100%; }

  .sakurei-cell { flex: 1 1 100%; border-right: 1px solid #c8961e; border-top: 1px solid #c8961e; }
  .cat-cell { flex: 1 1 100%; border-top: 1px solid #335588; }
}

/* スマートフォン 〜 420px */
@media screen and (max-width: 420px) {
  body { font-size: 12px; }

  #sns-top-bar { padding: 6px 8px; }
  .sns-btn { font-size: 11px; padding: 4px 9px; }

  #logo-row .logo-img img { height: 32px; }
  #logo-row .logo-right img { height: 32px; }

  #four-banners { grid-template-columns: 1fr; }
  .banner-item { aspect-ratio: 16 / 9; }

  #product-grid { grid-template-columns: 1fr 1fr; }

  .delivery-grid { grid-template-columns: repeat(3, 1fr); }

  .contact-nav-cell { flex: 1 1 50%; }

  #minicar { flex-direction: column; align-items: flex-start; }

  .sns-btn-row { gap: 5px; }
}

/* 極小 〜 320px */
@media screen and (max-width: 320px) {
  .delivery-grid { grid-template-columns: repeat(2, 1fr); }
  #product-grid  { grid-template-columns: 1fr; }
}