@charset "utf-8";
/* ==========================================================================
   株式会社サンビック  静的サイト用スタイル
   旧サイト（幅900px固定）の配色・構成を引き継ぎ、スマートフォンに対応させたもの
   PC / スマホの切り替えは 768px
   ========================================================================== */

:root {
  --green: #690;           /* フッター・強調の緑 */
  --green-line: #7DA270;   /* 枠線の緑 */
  --green-light: #8cc63f;
  --bg: #F8F8EF;
  --text: #333;
  --link: #009;
  --font-base: verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* リセット・基本
---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, div, p, h1, h2, h3, ul, ol, li, table, th, td, figure, figcaption { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; border: 0; vertical-align: bottom; }
button { font: inherit; }
html { overflow-y: scroll; -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--font-base); font-size: 14px; line-height: 1.6; }
a { color: var(--link); text-decoration: none; }
a:hover { color: #F30; text-decoration: underline; }

/* 全体の枠
---------------------------------------------------------------------- */
#wrapper {
  max-width: 900px; margin: 0 auto; background: #fff;
  border-left: 1px solid var(--green-line); border-right: 1px solid var(--green-line);
}

/* ヘッダー */
#header { display: flex; align-items: center; justify-content: space-between; min-height: 105px; padding: 10px 25px 8px 15px; }
#header .logo { font-size: 0; line-height: 0; }
#header .tell { line-height: 0; }

/* トップのメイン画像 */
#main_image img { display: block; width: 100%; }

/* メニュー（旧サイトの画像ボタンをCSSで再現） */
#navi ul { display: flex; border-bottom: 1px solid #ddd; }
#navi li { width: 150px; }
#navi a {
  display: block; height: 45px; line-height: 42px; text-align: center;
  font-size: 15px; letter-spacing: .15em; color: #666; text-decoration: none;
  background: linear-gradient(#fff, #eee); border-right: 1px solid #ddd; border-bottom: 3px solid transparent;
}
#navi a:hover,
#navi li.current a { color: #5a9a00; border-bottom-color: #6aa500; background: linear-gradient(#fff, #f3f3ee); }

/* パンくず */
.bread_crumb { padding: 10px 20px 0; font-size: 11px; }
.bread_crumb ol { display: flex; flex-wrap: wrap; }
.bread_crumb li + li::before { content: ">"; margin: 0 6px; color: #999; }

/* メイン
---------------------------------------------------------------------- */
#container { padding-bottom: 20px; }
#main { padding: 15px 20px 0; }
.two_col { display: flex; flex-direction: row-reverse; gap: 20px; align-items: flex-start; }
.main_col { flex: 1 1 auto; min-width: 0; }

/* 見出し（旧サイトのタイトル画像をCSSで再現） */
.tit {
  margin: 0 0 12px; padding: 0 12px; height: 40px; line-height: 40px;
  font-size: 18px; font-weight: normal; letter-spacing: .2em; color: #4d8a00;
  background: linear-gradient(#fdfdf6, #ecebd6); border: 1px solid #dcdcc4; border-left: 6px solid var(--green-light);
}
.tit + * { margin-top: 0; }
* + .tit { margin-top: 25px; }

/* 表 */
.Ctable { width: 100%; border-collapse: collapse; color: #444; }
.Ctable th,
.Ctable td { padding: 8px 10px; text-align: left; vertical-align: top; line-height: 1.6; border-bottom: 1px dotted #999; }
.Ctable th { width: 8em; font-weight: bold; white-space: nowrap; }
.Ctable.history th { width: 9em; }

.more { margin: 12px 0 0; text-align: right; }

/* サイドの店舗一覧 */
.shop_side { flex: 0 0 190px; }
.side_tit {
  height: 36px; line-height: 36px; margin: 0 0 4px; text-align: center;
  font-size: 15px; letter-spacing: .2em; color: #fff;
  background: linear-gradient(#7fb233, #5a8f1c); border-radius: 2px;
}
.shop_side li { border-bottom: 1px dotted #ccc; }
.shop_side a { display: block; padding: 8px 14px 10px; text-align: center; font-size: 12px; }
.shop_side a span { display: block; padding: 4px 0 0 0; text-align: left; }
.shop_side a span::before { content: "▶"; margin-right: 4px; font-size: 9px; color: var(--green-light); }
.shop_side img { display: block; width: 160px; margin: 0 auto; }

/* 店舗の枠（旧 .qa-box） */
.qa-box { margin-bottom: 20px; border: 1px solid #ddd; }
.box_tit {
  position: relative; padding: 8px 10px 8px 30px; font-size: 14px; font-weight: bold; color: #333;
  background: linear-gradient(#fff, #f1f1e8); border-top: 3px solid var(--green-light);
}
.box_tit::before {
  content: ""; position: absolute; left: 10px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  border-radius: 50%; background: #f60; box-shadow: inset 0 0 0 3px #fc9;
}
.wrap { display: flex; gap: 16px; padding: 14px 26px 7px; }
.wrap .photo { flex: 0 0 240px; }
.wrap .textbox { flex: 1 1 auto; }
.wrap .textbox p { padding-bottom: 6px; }

/* 店舗詳細 */
.shop_detail { display: flex; gap: 20px; padding: 14px 20px; }
.gallery { flex: 0 0 340px; }
.gallery_main { text-align: center; }
.gallery_main img { display: block; margin: 0 auto; border: 5px solid #eee; }
.gallery_main figcaption { margin: 8px 0; font-weight: bold; text-align: center; }
.gallery_thumbs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.gallery_thumbs button { display: block; padding: 3px; border: 1px solid #ccc; background: #fff; cursor: pointer; }
.gallery_thumbs button[aria-current="true"] { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.gallery_thumbs img { display: block; width: 60px; height: 45px; object-fit: cover; }
.shop_info { flex: 1 1 auto; min-width: 0; }
.shop_info p { margin-bottom: 10px; }
.map iframe { display: block; width: 100%; max-width: 425px; height: 250px; }
.blog_link { margin: 0 0 20px; font-weight: bold; font-style: italic; }
.notfound { margin: 0 0 20px; }

.back_btn { margin: 20px 0 10px; text-align: center; }
.back_btn a {
  display: inline-block; min-width: 240px; padding: 9px 20px; color: #fff; font-size: 15px; letter-spacing: .1em;
  background: linear-gradient(#7fb233, #5a8f1c); border-radius: 3px; text-decoration: none;
}
.back_btn a::before { content: "◀"; margin-right: 8px; font-size: 11px; }
.back_btn a:hover { color: #fff; opacity: .85; }

/* フッター
---------------------------------------------------------------------- */
#footer { background: var(--green); color: #fff; text-align: center; font-size: 11px; }
#footer ul { display: flex; justify-content: center; flex-wrap: wrap; padding: 16px 10px 6px; }
#footer li { padding: 0 8px; border-left: 1px solid #fff; letter-spacing: .1em; }
#footer li:first-child { border-left: 0; }
#footer a { color: #fff; }
#footer a:hover { color: #FF6; }
#footer p { padding: 3px 10px 16px; }

/* ======================================================================
   スマートフォン（767px以下）
   ====================================================================== */
@media screen and (max-width: 767px) {
  body { font-size: 15px; }
  #wrapper { border: 0; }

  #header { min-height: 0; padding: 10px 10px 8px; gap: 10px; }
  #header .logo img { width: 140px; }
  #header .tell img { width: 140px; }

  #navi li { flex: 1 1 0; width: auto; }
  #navi a { font-size: 14px; letter-spacing: .05em; }
  #navi li:last-child a { border-right: 0; }

  .bread_crumb { padding: 10px 12px 0; }
  #main { padding: 12px 12px 0; }
  .two_col { display: block; }
  .shop_side { margin-top: 25px; }
  .shop_side ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
  .shop_side a { padding: 8px 0 10px; }
  .shop_side img { width: 100%; }

  .tit { font-size: 16px; }
  .Ctable th,
  .Ctable td { display: block; width: 100%; border-bottom: 0; }
  .Ctable th { padding-bottom: 0; color: #4d8a00; }
  .Ctable td { padding-top: 2px; border-bottom: 1px dotted #999; }
  .Ctable.history th { width: 100%; }

  .wrap,
  .shop_detail { display: block; padding: 12px; }
  .wrap .photo { margin-bottom: 10px; }
  .wrap .photo img { width: 100%; }
  .gallery { margin-bottom: 15px; }
  .gallery_main img { width: 100%; }
  .map iframe { max-width: none; }
  .back_btn a { min-width: 0; width: 100%; }
}