/* sample_showcase_main.css */

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  font-size: 14px; color: #e8e8e8;
  background-color: #111;
  background-image: url('https://www.chinretu.co.jp/bgound_way_bk.gif');
  background-attachment: fixed; background-repeat: repeat; min-height: 100vh;
}
a { color: #c8e6ff; text-decoration: none; }
a:hover { color: #fff; text-decoration: underline; }
.page-wrapper { max-width: 760px; margin: 0 auto; padding: 10px 15px 100px; }

.site-header { text-align: center; padding: 12px 0 8px; }
.site-header h1 { font-size: clamp(12px,2.5vw,15px); color: #ccc; font-weight: normal; line-height: 1.5; }
.site-header h1 a { color: #fff; }
.header-hr { border: none; border-top: 3px solid #555; margin: 8px 0; }

.page-title-bar {
  background-image: url('https://www.chinretu.co.jp/bgound_way_bk2.gif');
  padding: 10px 15px; margin: 10px 0; border-radius: 3px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
}
.page-title-bar h2 { color: #e3fcdc; font-size: 15px; }
.page-title-bar h2 span { font-size: 12px; color: #aaa; font-weight: normal; }
.nav-back { color: #fff; font-size: 13px; white-space: nowrap; }

.intro-box { padding: 15px 5px; color: #e0f0ff; font-size: 14px; line-height: 1.9; }
.intro-box strong { color: #fff; font-weight: bold; }
.intro-box .key-phrase { 
  border: 1px solid #336688; background: rgba(30,80,120,0.3); 
  display: inline-block; padding: 4px 10px; border-radius: 3px; margin: 4px 0; color: #aaddff;
}
.intro-box .highlight-link {
  color: #ffdd55 !important; border: 1px solid #887700;
  padding: 2px 8px; border-radius: 3px; background: rgba(255,200,0,0.1);
}
.section-hr { border: none; border-top: 2px solid #444; margin: 16px 0; }

/* TOKKA SPECIAL */
.special-box {
  background: rgba(180,30,30,0.18); border: 2px solid #8b0000;
  border-radius: 6px; padding: 14px 16px; margin: 14px 0; color: #ffcccc;
}
.special-box h3 { color: #ff8888; font-size: 14px; margin-bottom: 6px; }
.special-box a { color: #ffaa99; }

/* DELIVERY EXAMPLE */
.delivery-box {
  background: rgba(0,80,40,0.25); border: 1px solid #1a6b3a;
  border-radius: 6px; padding: 14px 16px; margin: 14px 0;
}
.delivery-box h3 { color: #80ffaa; font-size: 14px; margin-bottom: 8px; }
.delivery-box img { max-width: 100%; height: auto; border-radius: 3px; display: block; margin-bottom: 8px; }
.delivery-box .delivery-note { color: #ccffcc; font-size: 13px; line-height: 1.8; }
.delivery-box .delivery-update { color: #aaa; font-size: 12px; margin-top: 6px; }

/* INFO BOXES */
.info-image-box { margin: 14px 0; text-align: center; }
.info-image-box img { max-width: 100%; height: auto; border: 1px solid #444; border-radius: 3px; }
.info-image-box .caption { color: #e0e0e0; font-size: 13px; margin-top: 8px; font-weight: bold; }

.spec-note-box {
  background: rgba(255,255,255,0.05); border: 1px solid #444;
  border-radius: 4px; padding: 12px 14px; font-size: 13px; color: #ccc; line-height: 1.8; margin: 12px 0;
}
.spec-note-box strong { color: #fff; }

/* SAMPLE CASE GRID - 2 col */
.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
@media (max-width: 480px) { .case-grid { grid-template-columns: 1fr; } }

.case-card {
  background-image: url('https://www.chinretu.co.jp/bgound_way_bk2.gif');
  background-repeat: repeat; border-radius: 4px; overflow: hidden;
}
.case-card a { display: block; }
.case-card img { width: 100%; height: 190px; object-fit: contain; background: #1a1a1a; display: block; transition: opacity 0.2s; }
.case-card img:hover { opacity: 0.85; }
.case-card-info { padding: 8px 10px; }
.case-card-info .case-name { color: #e3fcdc; font-size: 13px; font-weight: bold; }
.case-card-info .case-size { color: #c8e6c9; font-size: 11px; margin-top: 3px; }
.case-card-info .inquiry-link { font-size: 12px; color: #aaddff; margin-top: 5px; display: block; }

.tokushou-row { font-size: 12px; margin: 8px 0; }
.tokushou-row a { color: #88aadd; }

.access-section {
  background: rgba(0,0,0,0.5); border: 1px solid #444; border-radius: 6px;
  padding: 15px; margin: 20px 0; text-align: center; color: #e0e0e0; font-size: 13px; line-height: 1.9;
}
.reserve-note {
  background: rgba(255,200,0,0.15); border: 1px solid #887700; border-radius: 4px;
  padding: 6px 12px; display: inline-block; margin-top: 8px; color: #ffdd55; font-size: 13px;
}
.phone-btn {
  display: inline-block; background: #196f3d; color: #fff !important; border: 1px solid #27ae60;
  border-radius: 4px; padding: 7px 18px; font-size: 14px; font-weight: bold; margin: 6px 4px; text-decoration: none !important;
}
.map-link-btn {
  display: inline-block; background: #1a5276; color: #fff !important; border: 1px solid #2980b9;
  border-radius: 4px; padding: 6px 16px; font-size: 13px; margin: 6px 4px; text-decoration: none !important;
}
.catalog-intro { background: rgba(255,255,255,0.04); border-left: 3px solid #4CAF50; padding: 8px 12px; margin: 12px 0; font-size: 13px; color: #ccc; line-height: 1.7; }

footer { text-align: center; color: #aaa; font-size: 12px; padding: 20px 0 40px; }
footer a { color: #c8dfff; }
.fixed-inquiry {
  position: fixed; bottom: 20px; left: 16px; z-index: 9999; background: #c0392b;
  color: #fff !important; font-size: 13px; font-weight: bold; padding: 10px 14px; border-radius: 50px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.5); text-decoration: none !important; line-height: 1.3; text-align: center; white-space: nowrap;
  display: inline-block;
}
.fixed-inquiry:hover { background: #e74c3c; }
.fixed-pagetop {
  position: fixed; bottom: 20px; right: 16px; z-index: 9999; background: #333; border: 2px solid #666;
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.5); font-size: 20px; color: #fff; text-decoration: none !important;
}
.fixed-pagetop:hover { background: #555; }