@charset "utf-8";
/* CSS Document */

/********************************************************************/
/* HTMLタグ要素 */
/********************************************************************/
body {
  padding: 0;
  margin: 0;
  background-color: #FFFFFF;
  color: #333333;
}

a, a:link, a:visited, a:hover, a:active {
  color: #666666;
  text-decoration: none;
  font-weight: bold;
  outline: none;
}
.use_hover a:hover { color: #333333; }

h1,h2,h3,h4,h5,h6 {
  font-weight: bold;
  margin-bottom: 5px;
}
h1 { font-size: 161.6%; }
h2 { font-size: 146.5%; }
h3 { font-size: 131%; }
h4 { font-size: 123.1%; }
h5 { font-size: 116%; }
h6 { font-size: 108%; }

/********************************************************************/
/* 大外 */
/********************************************************************/
#container { font-size: 108%; }

/********************************************************************/
/* トップページコンテンツ間余白 */
/********************************************************************/
.main_box, .side_box { margin-bottom: 25px; }

/********************************************************************/
/* キャッチフレーズ欄 */
/********************************************************************/
.copy { min-height: 18px; padding: 5px 5px 0; font-size: 85%; }

/********************************************************************/
/* ヘッダー */
/********************************************************************/
#header { position: relative; min-height: 80px; background-color: #FFFFFF; }

/********************************************************************/
/* ショップ名 */
/********************************************************************/
.shoplogo { padding: 5px; }
.use_hover .shoplogo a:hover img { opacity: 0.8; }

.shoptext { padding: 5px 0; min-height: 40px; margin-right: auto; }
.shoptext a { font-size: 116%; margin: 0; }

/********************************************************************/
/* 文字サイズ */
/********************************************************************/
.font_setting { padding: 5px 5px 10px; text-align: center; }
.header_font_setting .set_font_title { color: #000000; }

.set_font_normal,.set_font_large{
  width:45px;height:30px;background-repeat:no-repeat;background-position:left top;
  -webkit-background-size:45px 60px;background-size:45px 60px;
}
.set_font_normal { background-image:url(img/font_default.gif); }
.set_font_large { margin-left:5px;background-image:url(img/font_large.gif); }

.use_hover .font_setting .set_font_normal:hover,
.use_hover .font_setting .set_font_large:hover,
.font_setting .nav_on { background-position:left bottom; }

/********************************************************************/
/* ヘッダーナビ */
/********************************************************************/
.inner_header_nav .nav_btn { color:#666666; }
.use_hover .inner_header_nav .nav_btn:hover { background-color:#F5F5F5; }

/********************************************************************/
/* 検索 */
/********************************************************************/
.search_bar .search { background-color:#F5F5F5; }

/********************************************************************/
/* グローバルナビゲーション */
/********************************************************************/
.global_nav { background-color:#333333; }
.top_page_body .global_nav { border-bottom:none; }

.inner_global_nav .nav_btn{
  background-image:url(img/navi_line_bg.gif);
  background-position:right center;
  background-repeat:no-repeat;
  border-bottom:3px solid #333333;
  color:#FFFFFF;
  font-weight:normal;
  text-align:center;
}
.use_hover .inner_global_nav .nav_btn:hover{
  border-bottom:3px solid #FFFFFF;
  color:#FFFFFF;
}
.global_nav_item:first-child .nav_btn{
  background-image:url(img/navi_line_bg.gif),url(img/navi_line_bg.gif);
  background-position:right center,left center;
}

/********************************************************************/
/* 開閉ナビゲーション */
/********************************************************************/
.inner_popup_nav_area,.inner_popup_menu_area{
  background-color:#FFFFFF;
  color:#000000;
}
.inner_popup_nav .nav_btn{
  background-color:#FFFFFF;
  border-top:1px solid #E0DFE3;
  font-weight:normal;
}
.use_hover .inner_popup_nav .nav_btn:hover{ background-color:#F5F5F5; }

.nav_close_box .nav_close{ background-color:#222222; }
.use_hover .nav_close_box .nav_close:hover{ background-color:#333333; }

/********************************************************************/
/* メインナビゲーション */
/********************************************************************/
.inner_side_nav .nav_btn,
.inner_main_nav .nav_btn{
  background-color:#FFFFFF;
  border-bottom:1px solid #E0DFE3;
  color:#666666;
}
.use_hover .inner_side_nav .nav_btn:hover,
.use_hover .inner_main_nav .nav_btn:hover{
  border-bottom:1px solid #666666;
  color:#333333;
}

.freepage_nav .inner_freepage_nav .nav_btn{
  background-color:#FFFFFF;
  border-bottom:1px solid #E0DFE3;
  color:#666666;
}
.use_hover .freepage_nav .inner_freepage_nav .nav_btn:hover{
  border-bottom:1px solid #666666;
  color:#333333;
}

/********************************************************************/
/* カテゴリ、特集ナビゲーション */
/********************************************************************/
.itemlist_nav{ margin-top:15px; }
.inner_itemlist_nav .nav_btn{
  background-color:#FFFFFF;
  border-bottom:1px solid #E0DFE3;
  color:#666666;
}
.use_hover .inner_itemlist_nav .nav_btn:hover{
  border-bottom:1px solid #666666;
  color:#333333;
}

/********************************************************************/
/* サイドメニュー */
/********************************************************************/
.open_side_col .side_container{ background-color:#FFFFFF; }
.side_itemlist_nav{ padding:0 1px; }
.side_itemlist_nav .sub_menu_link{ padding:10px 24px 10px 10px; }
.side_itemlist_nav .sub_menu_link{
  background-color:#F5F5F5;
  border-top:none;
  border-left:1px solid #E0DFE3;
  border-right:1px solid #E0DFE3;
  border-bottom:1px solid #E0DFE3;
}
/* ★修正：background-color:F; は無効なので正しい色へ */
.use_hover .side_itemlist_nav .side_itemlist_nav_link:hover{ background-color:#F5F5F5; }

/********************************************************************/
/* フッターナビゲーション */
/********************************************************************/
.footer_nav{ background-color:#F5F5F5; }
.footer_nav_item .nav_btn{ border-bottom:1px solid #E0DFE3; }
.use_hover .footer_area .nav_btn:hover{ border-bottom:1px solid #666666; }

/********************************************************************/
/* タイトル */
/********************************************************************/
.page_title h1,
.page_title h2,
.main_box h2{ background-color:transparent; }

.page_box .page_title h1:before,
.page_box .page_title h2:before,
.main_box .section_title h2:before{
  position:absolute; top:20px; display:block; width:100%; height:1px;
  content:""; background-color:#000000;
}
.itemdetail .page_title h1:before,
.lower_link_box .main_box .section_title h2:before{ background-color:transparent; }

.page_title h1 .title_text,
.page_title h2 .title_text,
.main_box h2 .title_text{
  display:inline-block;
  padding:0 18px;
  background-color:#FFFFFF;
  position:relative; z-index:1;
}

.side_box h2,.main_box h2{
  padding:10px 0;
  margin-top:30px;
  margin-bottom:10px;
  color:#000000;
  text-align:center;
}
@media screen and (min-width:710px){
  .side_box h2,.main_box h2{ margin-top:50px; }
}

.main_desc{ margin-bottom:10px; text-align:center; }
@media screen and (min-width:710px){ .main_desc{ margin-bottom:30px; } }
.main_desc li{ text-align:left; }

/********************************************************************/
/* （中略）…ここは元の標準CSSが続く想定。 */
/* あなたの元CSSの「おちゃのこ標準部分」はこのまま残してください。 */
/********************************************************************/


/* =======================================================================
   ▼▼▼ ここから「追加・上書き」統合ブロック（壊れないよう整理済み）
   ======================================================================= */

/* --------- 共通：横はみ出し保険（スマホで横揺れ対策） --------- */
html, body { max-width: 100%; overflow-x: hidden; }

/* -----------------------------------------------------------------------
  1) ベル宝飾：スマホ下部固定CTAバー（緑に戻す）
------------------------------------------------------------------------ */
#mobile-cta-bar{ display:none; }
@media (max-width:768px){
  :root{ --cta-bar-h: 68px; }

  #mobile-cta-bar{
    display:block;
    position:fixed; left:0; right:0; bottom:0;
    z-index:9999;
    background:#fff;
    border-top:1px solid #e0d1b1;
    padding:8px;
  }
  #mobile-cta-bar .cta-row{
    display:flex; gap:8px; justify-content:space-between;
  }
  #mobile-cta-bar a{
    flex:1;
    display:flex; align-items:center; justify-content:center;
    padding:10px 8px;
    border-radius:8px;
    text-decoration:none;
    font-weight:700;
    background:#004923;              /* ★緑 */
    color:#fff;
  }
  #mobile-cta-bar a.cta-ghost{
    background:#fff;
    color:#004923;
    border:1px solid #004923;
  }

  /* CTAバー分の余白確保 */
  body{
    padding-bottom: calc(var(--cta-bar-h) + env(safe-area-inset-bottom));
  }

  /* ページトップボタンを上に逃がす（既存と競合しにくい） */
  .fixed_corner_button{
    bottom: calc(var(--cta-bar-h) + 12px + env(safe-area-inset-bottom)) !important;
    z-index: 10001 !important;
  }
  #pagetop,#pageTop,.pagetop,.page-top,.totop,.to-top,.js-pagetop,a.pagetop{
    bottom: calc(var(--cta-bar-h) + 12px + env(safe-area-inset-bottom)) !important;
    z-index: 10000 !important;
  }
}

/* -----------------------------------------------------------------------
  2) トップページ：来店予約・SNS案内（あなたのHTMLブロック専用）
  ※ .container/.section を全体に当てず、#reservation #more-info 配下に限定
------------------------------------------------------------------------ */
#reservation.section,
#more-info.section{
  margin: 12px auto;
  padding: 14px 15px;
  border-radius: 10px;
  border: 1px solid #ddd;
  background: #fff;
}
#reservation.section.section-light-bg{ background:#f8f8f8; }

#reservation .section-title,
#more-info .section-title{
  text-align:center;
  margin: 0 0 14px;
  font-size: 1.2em;
  font-weight: 800;
  color:#333;
}

/* 予約ボタン（赤） */
#reservation .cta-button.secondary{
  display:inline-block;
  background:#cc0000 !important;
  color:#fff !important;
  padding:12px 20px;
  border-radius:8px;
  font-weight:800;
  text-decoration:none;
  max-width: 320px;
}
#reservation .cta-button.secondary:hover{ filter: brightness(0.95); }

/* More Information グリッド */
#more-info .info-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
}
@media (min-width:710px){
  #more-info .info-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
#more-info .info-card{
  text-align:center;
  padding:16px;
  border:1px solid #ddd;
  border-radius:10px;
  background:#fafafa;
}
#more-info .info-card h3{
  font-size:1.1em;
  margin: 0 0 10px;
}
#more-info .info-card p{ margin: 0 0 12px; }

#more-info .social-links{
  display:flex;
  justify-content:center;
  gap:16px;
}
#more-info .social-links img{
  width:44px;
  height:44px;
  object-fit:contain;
}

/* -----------------------------------------------------------------------
  3) オーダーメイドページ（.bh-order専用）※他ページに波及しません
------------------------------------------------------------------------ */
.bh-order.container{
  max-width: 960px;
  margin: 0 auto;
  padding: 18px 15px;
  box-sizing: border-box;
  color:#333;
  line-height: 1.8;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}

/* 見出し */
.bh-order h1{
  font-size: 1.6em;
  margin: 0 0 10px;
  text-align:center;
}
.bh-order .lead{
  text-align:center;
  margin: 0 0 18px;
  padding: 14px 12px;
  background:#fbfaf6;
  border:1px solid #efe7d6;
  border-radius:12px;
}
.bh-order .link-accent{
  color:#785706 !important;
  text-decoration: none;
  font-weight: 800;
}
.bh-order .link-accent:hover{ text-decoration: underline; }

/* 目次 */
.bh-order .table-of-contents{
  margin: 16px 0 22px;
  padding: 14px 14px;
  border:1px solid #e0d1b1;
  background:#f7f3e8;
  border-radius:12px;
}
.bh-order .table-of-contents h2{
  margin: 0 0 10px;
  font-size: 1.05em;
  color:#4c3808;
  border: none;
  padding: 0;
  background: transparent;
}
.bh-order .table-of-contents ul{ margin:0; padding-left: 18px; }
.bh-order .table-of-contents a{
  color:#4c3808 !important;
  text-decoration: underline;
  font-weight: 800;
}

/* セクションカード */
.bh-order .section{
  margin: 14px 0;
  padding: 16px;
  background:#fff;
  border:1px solid #ddd;
  border-radius: 12px;
}

/* 職人紹介 */
.bh-order .craftsman-section{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}
.bh-order .craftsman-section img{
  width:100%;
  height:auto;
  border-radius: 10px;
  border: 1px solid #e6e0d2;
  display:block;
}
.bh-order .craftsman-profile h3{
  margin: 0 0 8px;
  color:#4c3808;
  font-size: 1.1em;
}
.bh-order .craftsman-profile p{ margin: 0 0 10px; }
.bh-order .craftsman-profile .award{
  margin: 10px 0 0;
  font-weight: 800;
  color:#c10026;
}
@media (min-width:710px){
  .bh-order .craftsman-section{
    grid-template-columns: 360px 1fr;
  }
}

/* 選ばれる理由 */
.bh-order #features > h2,
.bh-order #examples > h2,
.bh-order #process > h2,
.bh-order #pricing > h2,
.bh-order #consult > h2{
  margin: 0 0 12px;
  padding: 0 0 8px;
  color:#4c3808;
  font-size: 1.15em;
  border-bottom: 2px solid #8a6d3b;
  background: transparent;
}
.bh-order .features-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width:710px){
  .bh-order .features-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.bh-order .feature-item{
  border:1px solid #e6e0d2;
  border-radius: 12px;
  padding: 14px;
  background:#fff;
}
.bh-order .feature-icon{ font-size: 26px; line-height:1; margin-bottom: 6px; }
.bh-order .feature-item h3{ margin: 6px 0 6px; font-size: 1.05em; color:#4c3808; }
.bh-order .feature-item p{ margin:0; }

/* 実績カード */
.bh-order .example-item{
  margin: 14px 0;
  padding: 14px;
  border:1px solid #e6e0d2;
  border-radius: 12px;
  background:#fbfaf6;
}
.bh-order .example-item h3{ margin: 0 0 10px; color:#4c3808; font-size: 1.08em; }
.bh-order .example-item img{
  width:100%;
  height:auto;
  display:block;
  border-radius: 10px;
  border:1px solid #e6e0d2;
  margin: 10px 0 12px;
}
.bh-order .example-details{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap: 6px 10px;
  margin: 10px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid #e6e0d2;
}
.bh-order .example-details dt{ font-weight:800; }
.bh-order .example-details dd{ margin:0; }
.bh-order .example-details .price{ font-weight:900; color:#c10026; }

/* 流れ */
.bh-order .process ol{
  margin: 0;
  padding-left: 20px;
}
.bh-order .process li{ margin: 10px 0; }

/* 料金 */
.bh-order #pricing ul{
  margin: 10px 0 0;
  padding-left: 18px;
}
.bh-order #pricing li{ margin: 8px 0; }
.bh-order #pricing b{ color:#c10026; }

/* ボタン */
.bh-order .button-wrapper{ margin: 12px 0 0; text-align:center; }
.bh-order .button{
  display:inline-block;
  padding: 12px 18px;
  border-radius: 999px;
  background:#4c3808;
  color:#fff !important;
  font-weight:800;
  text-decoration:none;
}
.bh-order .button:hover{ filter: brightness(1.05); }

/* お問い合わせブロック */
.bh-order .subhead{
  margin: 14px 0 6px;
  font-size: 1.05em;
  color:#4c3808;
}
.bh-order .contact{
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  border:1px solid #e6e0d2;
  background:#fff;
  text-align:center;
}
.bh-order .contact a{ color:#004923 !important; text-decoration: underline; }

/* モバイル微調整 */
@media (max-width:480px){
  .bh-order.container{ padding: 14px 12px; }
  .bh-order .example-details{ grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------
  4) 既存：お問い合わせ注記／発送注意（あなたの要件のまま、壊れない形に整理）
------------------------------------------------------------------------ */
.notice-box-v2 .notice-reply-hours{
  margin: 0 0 12px;
  font-weight: 800;
  color: #d60000;
  line-height: 1.6;
  text-align: left;
  font-size: inherit;
}

.shipping-notice{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #222;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}
.shipping-notice .notice-title{
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 6px 0;
}
.shipping-notice .notice-list{
  list-style: none;
  padding: 0;
  margin: 0;
}
.shipping-notice .notice-list li{ margin: 0; }
.shipping-notice strong{
  color: #c00;
  font-weight: 700;
}

/* -----------------------------------------------------------------------
  5) YouTube（商品説明欄）レスポンシブ（HTMLコメントをCSSコメントへ修正）
------------------------------------------------------------------------ */
/* YouTube（商品説明欄）レスポンシブ＋大きくなりすぎ防止 */
.pd-yt{
  width: 100%;
  max-width: 720px;
  margin: 12px auto 0;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}
@supports not (aspect-ratio: 16 / 9){
  .pd-yt{ height: 0; padding-top: 56.25%; }
}
.pd-yt iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 768px){
  .pd-yt{ max-width: 100%; border-radius: 8px; }
}

/* ボタン文字がグレーになる対策（iOS/Safari含む） */
.pd-cta .pd-btn,
.pd-cta .pd-btn:link,
.pd-cta .pd-btn:visited,
.pd-cta .pd-btn:hover,
.pd-cta .pd-btn:active,
.pd-cta .pd-btn:focus{
  color:#fff !important;
  -webkit-text-fill-color:#fff;
  text-decoration:none;
  opacity:1;
}
.pd-cta .pd-btn *{
  color:#fff !important;
  -webkit-text-fill-color:#fff;
}

/* =======================================================================
   ▲▲▲ 追加・上書きここまで
   ======================================================================= */
/* =========================================================
   Bell81 共通：崩れ/横はみ出し対策（安全な下支え）
   ========================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

img { max-width: 100%; height: auto; }

html, body { overflow-x: hidden; }

a { color: inherit; }
a:hover { opacity: .9; }

/* よくある「container 定義消失」で崩れるのを防ぐ */
.container{
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px;
}

/* =========================================================
   トップページ：スマホサイト用 来店予約・SNS案内エリア
   （提示コード：#reservation / #more-info）
   ========================================================= */
.section{
  padding: 28px 0;
}

.section-light-bg{
  background: #f7f8f7;
}

.section-title{
  margin: 0 0 14px;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: .02em;
}

.cta-button{
  display: inline-block;
  text-decoration: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 800;
  line-height: 1;
  border: 1px solid transparent;
  transition: transform .05s ease, opacity .2s ease;
}
.cta-button:active{ transform: translateY(1px); }

.cta-button.secondary{
  background: #ffffff;
  color: #004923;          /* Bell宝飾：グリーン */
  border-color: #cfe0d8;
}

.info-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 12px;
}

.info-card{
  background: #ffffff;
  border: 1px solid #e7ede6;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

.info-card h3{
  margin: 0 0 8px;
  font-size: 16px;
}
.info-card p{
  margin: 0 0 12px;
  color: #333;
  line-height: 1.75;
}

.social-links{
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.social-links a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid #e7ede6;
  background: #fff;
}
.social-links a img{
  width: 28px;
  height: 28px;
  object-fit: contain;
}

@media (min-width: 768px){
  .info-grid{ grid-template-columns: repeat(3, 1fr); }
  .section-title{ font-size: 22px; }
}

/* =========================================================
   スマホ下部固定CTA：ベル宝飾は“緑”に戻す
   ※クラス名が違う場合、下のセレクタを実物に合わせてください
   ========================================================= */
:root{
  --bh-green: #004923;
  --bh-green-dark: #003b1d;
  --bh-border: #e7ede6;
}

/* ありがちな命名をまとめて緑化（必要なら残す/削る） */
#sp-fixed-cta a,
.sp-fixed-cta a,
.fixed-cta a,
.bottom-fixed-cta a{
  background: var(--bh-green);
  color: #fff;
  border-color: var(--bh-green);
}
#sp-fixed-cta a:hover,
.sp-fixed-cta a:hover,
.fixed-cta a:hover,
.bottom-fixed-cta a:hover{
  background: var(--bh-green-dark);
}

/* =========================================================
   オーダーメイドページ（.bh-order）※前に頂いたコード用
   「CSSが効かない」を防ぐため .bh-order 配下で完結
   ========================================================= */
.bh-order{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px;
}

.bh-order h1{
  margin: 10px 0 8px;
  font-size: 26px;
  line-height: 1.3;
}

.bh-order .lead{
  margin: 0 0 16px;
  line-height: 1.9;
  color: #333;
}

.bh-order .link-accent{
  color: #785706;
  font-weight: 800;
  text-decoration: none;
}
.bh-order .link-accent:hover{ text-decoration: underline; }

.bh-order .table-of-contents{
  background: #f7f3e8;
  border: 1px solid #e0d1b1;
  border-radius: 14px;
  padding: 14px 14px 10px;
  margin: 18px 0 26px;
}
.bh-order .table-of-contents h2{
  margin: 0 0 8px;
  font-size: 16px;
}
.bh-order .table-of-contents ul{
  margin: 0;
  padding-left: 18px;
  line-height: 1.9;
}
.bh-order .table-of-contents a{
  color: #333;
  text-decoration: none;
  font-weight: 700;
}
.bh-order .table-of-contents a:hover{ text-decoration: underline; }

.bh-order .section{
  padding: 0;
  margin: 28px 0;
}

.bh-order .craftsman-section{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}
.bh-order .craftsman-section img{
  border-radius: 14px;
  border: 1px solid var(--bh-border);
}
.bh-order .craftsman-profile{
  background: #fff;
  border: 1px solid var(--bh-border);
  border-radius: 14px;
  padding: 14px;
}
.bh-order .craftsman-profile h3{ margin: 0 0 8px; }
.bh-order .craftsman-profile p{ margin: 0 0 10px; line-height: 1.85; }
.bh-order .craftsman-profile .award{
  margin: 8px 0 0;
  font-weight: 800;
  color: #004923;
}

.bh-order .features-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 12px;
}
.bh-order .feature-item{
  background: #fff;
  border: 1px solid var(--bh-border);
  border-radius: 14px;
  padding: 14px;
}
.bh-order .feature-icon{
  font-size: 22px;
  margin-bottom: 6px;
}
.bh-order .feature-item h3{ margin: 0 0 8px; }
.bh-order .feature-item p{ margin: 0; line-height: 1.85; }

.bh-order .example-item{
  background: #fff;
  border: 1px solid var(--bh-border);
  border-radius: 14px;
  padding: 14px;
  margin: 14px 0;
}
.bh-order .example-item h3{ margin: 0 0 10px; }
.bh-order .example-item img{
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--bh-border);
  margin: 8px 0 10px;
}
.bh-order .example-details{
  margin: 10px 0 0;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 6px 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--bh-border);
}
.bh-order .example-details dt{ font-weight: 800; }
.bh-order .example-details dd{ margin: 0; }
.bh-order .example-details .price{ font-weight: 900; }

.bh-order .button-wrapper{
  text-align: center;
  margin: 14px 0;
}
.bh-order .button{
  display: inline-block;
  background: #004923;
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid #004923;
}

.bh-order .process ol{
  margin: 10px 0 0;
  padding-left: 18px;
  line-height: 1.9;
}
.bh-order .pricing ul{
  margin: 8px 0 0;
  padding-left: 18px;
  line-height: 1.9;
}
.bh-order .consult .subhead{
  margin: 18px 0 8px;
  font-size: 16px;
}
.bh-order .consult .contact{
  background: #f7f8f7;
  border: 1px solid var(--bh-border);
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 12px;
}

@media (min-width: 768px){
  .bh-order .craftsman-section{ grid-template-columns: 1.1fr .9fr; }
  .bh-order .features-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   オーダー・リフォーム「事例ページ」(description-*)
   ========================================================= */
.description-body{
  background: #ffffff;
}
.description-container{
  max-width: 820px;
  margin: 0 auto;
  padding: 18px 16px 30px;
  line-height: 1.9;
  color: #222;
}

.description-container h2{
  margin: 22px 0 10px;
  font-size: 20px;
  line-height: 1.35;
  padding-left: 10px;
  border-left: 4px solid #004923;
}
.description-container h3{
  margin: 16px 0 6px;
  font-size: 16px;
  line-height: 1.5;
}
.description-container p{ margin: 0 0 12px; }

.description-customer-voice{
  margin: 18px 0;
  padding: 14px;
  border-radius: 14px;
  background: #f7f8f7;
  border: 1px solid var(--bh-border);
}
.description-customer-voice h3{
  margin: 0 0 8px;
  font-size: 16px;
}

.description-btn{
  display: inline-block;
  margin: 6px 6px;
  padding: 12px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 900;
  border: 1px solid #004923;
  background: #004923;
  color: #fff;
}
.description-btn:hover{ opacity: .92; }

.description-info-box{
  background: #fff;
  border: 1px solid var(--bh-border);
  border-radius: 14px;
  padding: 10px;
  overflow-x: auto; /* 小画面で表が潰れないように */
}

.description-spec-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 520px; /* スマホで横スクロール許可 */
}
.description-spec-table th,
.description-spec-table td{
  border-bottom: 1px solid var(--bh-border);
  padding: 10px 10px;
  vertical-align: top;
}
.description-spec-table th{
  width: 160px;
  background: #f7f8f7;
  font-weight: 900;
}
.description-note{
  margin-top: 8px;
  font-size: 14px;
  color: #444;
}
.description-note ul{
  margin: 0;
  padding-left: 18px;
}

.description-flow{
  margin: 10px 0 0;
  padding-left: 18px;
}
.description-flow li{
  margin: 10px 0;
}
.description-flow h3{
  margin: 0 0 4px;
  font-size: 16px;
}

@media (max-width: 480px){
  .description-container{ padding: 14px 14px 26px; }
  .description-container h2{ font-size: 18px; }
  .description-btn{ width: 100%; max-width: 360px; }
}

/* =========================================================
   商品ページ（pd-*）※提示コード用
   ========================================================= */
.pd-container{
  max-width: 920px;
  margin: 0 auto;
  padding: 16px;
}

.pd-main{
  background: #fff;
  border: 1px solid var(--bh-border);
  border-radius: 16px;
  padding: 16px;
}

.pd-sec{
  padding: 16px 0;
  border-bottom: 1px solid var(--bh-border);
}
.pd-sec:last-child{ border-bottom: 0; }

.pd-h{
  margin: 0 0 10px;
  font-size: 16px;
  letter-spacing: .06em;
  color: #004923;
}

.pd-note{
  margin: 10px 0 0;
  font-size: 14px;
  color: #444;
}

.pd-list{
  margin: 0;
  padding-left: 18px;
  line-height: 1.9;
}

.pd-spec{
  margin: 10px 0 0;
}
.pd-spec-row{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px 12px;
  padding: 10px 0;
  border-top: 1px dashed var(--bh-border);
}
.pd-spec-row:first-child{ border-top: 0; }
.pd-spec dt{ font-weight: 900; }
.pd-spec dd{ margin: 0; }

.pd-yt{
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--bh-border);
  background: #000;
}
.pd-yt iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.pd-gallery{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 10px;
}
.pd-fig{
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--bh-border);
}
.pd-fig img{
  width: 100%;
  display: block;
}

.pd-addr{ margin: 8px 0 0; }

.pd-btn{
  display: inline-block;
  text-decoration: none;
  background: #004923;
  color: #fff;
  font-weight: 900;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid #004923;
}

@media (min-width: 640px){
  .pd-main{ padding: 18px; }
  .pd-gallery{ grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   お問い合わせ注記（notice-box-v2）
   「ここだけ小さく見える」対策：font-size を他と揃える
   ========================================================= */
.notice-box-v2{
  border: 1px solid #e0c995;
  background: #fffaf0;
  border-radius: 14px;
  padding: 15px;
  margin: 16px 0 24px;
  font-family: inherit;
  font-size: 13px; /* ★小さくならないよう統一 */
  line-height: 1.85;
  color: #222;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

.notice-box-v2 h2{
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.4;
}

.notice-reply-hours{
  margin: 10px 0 12px;
  font-weight: 900;
  color: #b00020; /* 赤 */
}

.notice-box-v2 ul{
  margin: 0;
  padding-left: 18px;
}
.notice-box-v2 li{
  margin: 10px 0;
}

.notice-box-v2 a{
  color: #004923;
  font-weight: 900;
  text-decoration: none;
}
.notice-box-v2 a:hover{ text-decoration: underline; }

.notice-footer{
  margin: 14px 0 0;
  font-weight: 700;
}
.notice-footer-note{
  margin: 6px 0 0;
  font-size: 14px;
  color: #444;
}