/*=============================================================
  toppage.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;
  background-image: url('bgound_way_bk2.gif');
  background-attachment: fixed;
  background-color: #0a0a1e;
  min-width: 320px;
}

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 {
  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: wrap;
  gap: 6px;
}
.sns-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 12px;
  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: 15px; height: 15px; 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: 41px; width: auto; }
#logo-row .logo-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}
#logo-row .logo-right img { height: 41px; 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.85);
  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;
  font-size: clamp(8px, 3.0vw, 14px);
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  /* overflow:hidden は親で設定済みなのでここでは不要 */
}

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

/* ====== 作例ナビ ====== */
#sakurei-nav {
  display: flex;
  flex-wrap: wrap;
}
.sakurei-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;
}
.sakurei-cell a {
  display: block;
  width: 100%;
  padding: 11px 6px;
  color: #ddeeff;
  text-decoration: none;
  transition: background .15s, color .15s, box-shadow .15s;
}
.sakurei-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);
}
/* クリック時の押し込み感 */
.sakurei-cell a:active {
  background: linear-gradient(180deg, #1e2530 0%, #2a3040 100%);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}
.sakurei-light {
  width: 100%;
  border: 1px solid #335588;
  border-top: none;
  background: rgba(0,0,30,0.8);
  padding: 8px 10px;
  font-size: clamp(11px, 2.2vw, 13px);
  font-weight: bold;
  text-align: center;
  line-height: 1.8;
}
.sakurei-light a { color: #ffffff; font-weight: bold; }
.sakurei-light a:hover { color: #ffff00; }

/* ====== 産学官バナー ====== */
#sangakukan { text-align: center; }
#sangakukan img { width: 100%; height: auto; display: block; }

/* ====== サイズ別・業種別 ====== */
#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.7);
  border: 1px solid #335588;
}
#pm-row .pm-cell {
  flex: 2 1 300px;
  padding: 8px;
  text-align: center;
  border-right: 1px solid #335588;
}
#pm-row .del-cell {
  flex: 1 1 150px;
  padding: 8px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
#pm-row img { max-width: 100%; height: auto; }

/* ====== オーダーバナー ====== */
#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; }

/* ====== 製品バナー 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: rgba(0,0,40,0.9);
  border: 1px solid #335588;
  aspect-ratio: 225 / 100;
}
.prod-cell--text a {
  color: #ffff00;
  font-size: clamp(12px, 2.5vw, 14px);
  font-weight: bold;
  text-align: center;
  padding: 8px;
  display: block;
}
.prod-cell--text a:hover { color: #ffffff; text-decoration: underline; }

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

/* ====== 特価品 ＋ 会社特徴 ====== */
#tokka-section {
  display: flex;
  gap: 0;
  background-image: url('bgound_way_bk.gif');
  background-color: rgba(0,0,20,0.85);
  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-cell--inquiry a:hover {
  background: linear-gradient(180deg, #7a4545 0%, #4e3030 50%, #3c2828 100%);
  color: #ffff99;
}
.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 img { width: 100%; height: auto; display: block; }

/* ====== 特商法バー ====== */
#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-wrap {
  background: rgba(0,0,30,0.8);
  border: 1px solid #335588;
  padding: 10px;
  text-align: center;
}
#fb-wrap iframe { display: block; margin: 0 auto; max-width: 100%; }

#fb-info {
  background: rgba(0,0,30,0.8);
  border: 1px solid #335588;
  border-top: none;
  padding: 8px 12px;
}
#fb-info .fb-title { font-size: 14px; font-weight: bold; color: #ffffff; padding: 6px 0; }
#fb-info .fb-title a { color: #00ccff; }
#fb-info .fb-note  { font-size: 12px; color: #cccccc; padding: 3px 0; }
#fb-info .fb-log   { font-size: 14px; font-weight: bold; padding: 8px 0; }
#fb-info .fb-log a { color: #00ccff; }

/* ====== Instagram ====== */
#ig-wrap {
  background: rgba(20,0,15,0.85);
  border: 1px solid #cc3366;
  padding: 10px;
}
#ig-title { font-size: 14px; font-weight: bold; color: #ff66aa; padding-bottom: 8px; }
#ig-title a { color: #ff66aa; }
#ig-title a:hover { color: #ffff00; }
.ig-embed-center { text-align: center; }
.ig-link { text-align: center; font-size: 12px; margin-top: 6px; }
.ig-link a { color: #ff99cc; }

/* ====== ショーケースラボ・マイスタジオ ====== */
#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);
}

/* ====== コラムテキスト ====== */
#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-top: 1px solid #335588; }
  .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; }
}