*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.9;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.qbd-container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--side-padding); }
.qbd-inner { max-width: var(--content-inner); margin: 0 auto; }
/* スマホ幅の左右余白: 本家.inner実測(2026-08-07)は690px以下でwidth:90% [QBD_WEB-146]。
   .qbd-innerはmax-widthと左右autoだけで幅指定が無いため、画面幅が上限未満だと画面幅と同じになり、
   375px幅では文字と画像が画面の端に張り付いていた。
   PC・タブレット幅(691〜1119px)にも同じ問題があるが、そちらは残課題一覧で別に管理する */
@media (max-width: 690px) {
  .qbd-inner { width: 90%; }
}

/* セクション共通タイトル: About/Beginners/News/Recommends はデフォルトcenter。Company/.qbd-companyのみ左揃えで上書き */
.qbd-section-en { font-family: var(--font-display); font-size: 20px; letter-spacing: 2px; color: var(--color-primary-light); text-align: center; }
.qbd-section-h2 { font-family: var(--font-heading); font-size: 32px; font-weight: 600; line-height: 1.4; letter-spacing: 1.6px; color: var(--color-primary); text-align: center; }
/* セクション説明文: H2直下の中央揃え段落 */
.qbd-section-intro { text-align: center; font-size: 16px; line-height: 1.9; color: var(--color-text); margin-top: 20px; }

/* 下層ページ共通のH2帯(本家subtitle02実測2026-07-15): 薄teal帯+左端に10px角の■。
   マージンは各ページ側の追加クラスで調整して再利用する */
/* ■は本家では帯の左端(left:0)だが、ユーザー決定(2026-07-15)で10px内側に空ける。照合時に戻さない */
/* スマホ幅の縮小は入れない。本家は375pxで22px/字間1.1px/padding 8px 8px 8px 25px/margin-bottom 30pxに
   縮むが、ユーザー決定(2026-08-19 / QBD_WEB-168)で28pxのまま据え置く。照合時に合わせない */
.qbd-h2-band { position: relative; background: var(--color-card-link-bg); color: var(--color-primary); font-family: var(--font-heading); font-size: 28px; font-weight: 500; line-height: 1.9; letter-spacing: .05em; text-align: left; padding: 10px 10px 10px 40px; margin: 0 0 var(--space-40); }
.qbd-h2-band::before { content: ""; position: absolute; left: 10px; top: calc(50% - 5px); width: 10px; height: 10px; background: var(--color-primary); }

.qbd-btn-primary {
  display: inline-block;
  background: var(--color-primary-light);
  color: var(--color-bg);
  border: 2px solid var(--color-primary-light);
  padding: 12px 45px;
  font-family: var(--font-heading);
  font-size: 16px;
  border-radius: 0;
  transition: 0.2s;
}
/* hover: 本家dlb_btn/main_btn実測(2026-07-14)の色反転(白背景+薄teal文字、枠は薄tealのまま) */
.qbd-btn-primary:hover { background: var(--color-bg); color: var(--color-primary-light); }
/* inbound(はじめての方へ)の「詳しく見る」: 本家btn01実測(2026-07-16)は色が濃いteal(--color-primary)で、
   共有.qbd-btn-primaryの薄teal既定と異なる。hoverは色反転せず半透明化(0.7)のみ */
.qbd-inbound-card-btn .qbd-btn-primary { background: var(--color-primary); border-color: var(--color-primary); }
.qbd-inbound-card-btn .qbd-btn-primary:hover { background: var(--color-primary); color: var(--color-bg); opacity: 0.7; }

/* 本家dlb_box3-6 .linka a実測(2026-07-15): 右寄せ+右端25pxにtealシェブロン(6px角・線幅2px・45度回転) */
.qbd-card-link {
  display: inline-block;
  position: relative;
  background: var(--color-card-link-bg);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  text-align: right;
  padding: 10px 45px 10px 20px;
  border-radius: 0;
  transition: 0.2s;
}
.qbd-card-link::after {
  content: '';
  width: 6px;
  height: 6px;
  border-style: solid;
  border-color: var(--color-primary);
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
  position: absolute;
  top: calc(50% - 3px);
  right: 25px;
  transition: all 0.2s ease;
}
/* hover: 本家bl-bigger実測(2026-07-14)は下線のみ */
.qbd-card-link:hover { text-decoration: underline; }

@media (max-width: 690px) {
  .qbd-container { padding: 0 20px; }
  .qbd-section-h2 { font-size: 24px; }
}

/* ==========================================================================
   Header
   ========================================================================== */
/* font-family: 本家は header.template_c2 全体に Noto Serif JP を指定しており、
   グローバルナビも明朝体になる。ロゴは画像、CTAボタンは .qbd-header-btn が
   font-heading を持つため、実質ここで書体が変わるのはナビのリンクのみ(実測 2026-07-27)。
   button要素(.qbd-nav-toggle)はfont-familyを継承しないため対象外 */
.qbd-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--header-height); background: var(--color-bg); font-family: var(--font-heading); }
/* 管理バー表示時: WPが追加するbody marginに加え固定ヘッダのtopをオフセット */
.admin-bar .qbd-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .qbd-header { top: 46px; } }
/* 本家ヘッダは #header_area を max-width:1280px・margin:auto で中央寄せするだけで、
   左右余白(ガター)を持たない。1280px以下ではロゴが画面左端、CTAボタンが画面右端に接する。
   旧実装は width:min(1280px, 100% - 32px) で常に16pxのガターを作っていたため、
   1280px幅でボタンが右端に届かず16pxの余白が残っていた(実測 2026-07-27)。
   なお side-padding(72.5px)を内側paddingにしていた更に前の実装では content幅が1135pxに縮み、
   グローバルナビ/CTAボタンが折り返していた(本家は1100px付近まで1行に収まる実測)。 */
.qbd-header-inner { display: flex; align-items: center; height: var(--header-height); width: 100%; max-width: var(--content-max); margin: 0 auto; }
/* ロゴは縮めない(本家 #header_logo は flex-shrink:0)。
   PC幅のサイズは本家実測(#header_logo{width:160px} + img{width:auto;height:auto})に合わせ、
   160pxのボックスに画像を収める。header.phpのwidth/height属性(200x48)はCSSで上書きする */
.qbd-header-logo { flex-shrink: 0; width: 160px; }
.qbd-header-logo img { max-width: 100%; width: auto; height: auto; display: block; }
/* 本家実測(.gnavi_area): margin-left:auto でナビ全体を右(CTAボタンの直前)へ寄せ、
   ul は justify-content:flex-end、li ごとに margin-right:2em(=32px)。
   最後のli(採用情報)にも32px付くため、採用情報とお問い合わせボタンの間も32px空く。
   旧実装は flex:1 + gap:20px + ul margin-left:24px でロゴ直後から左詰めだったため、
   採用情報の位置が本家より141px左にズレていた(実測 2026-07-27) */
.qbd-gnav { margin-left: auto; align-self: stretch; }
.qbd-gnav ul { display: flex; align-items: center; justify-content: flex-end; list-style: none; margin: 0; padding: 0; height: 100%; }
/* タブ・CTAともテキストの不自然な改行を防止(本家準拠で1行固定) */
.qbd-gnav li { flex-shrink: 0; height: 100%; margin-right: 32px; }
/* hover: 本家template_c2.css実測(2026-07-15): 文字#666→tealに加え、ヘッダ下端に3px下線が白→tealへフェード。
   下線はaの::afterを常時描画し非hover時は背景と同じ白で不可視にする本家方式(transitionはいずれも all .3s ease)。
   aをヘッダ全高に伸ばすことで下線がヘッダ最下端に接する */
/* ul a に限定しているのは、SPメニュー内の.qbd-gnav-actions(お問い合わせ等)も.qbd-gnav直下にあり、
   限定しないとhover色/::after下線がボタンにも適用されてしまうため(QBD_WEB-78で発覚) */
.qbd-gnav ul a { white-space: nowrap; font-size: 13px; height: 100%; display: flex; align-items: center; padding: 8px 0; position: relative; transition: all 0.3s ease; }
.qbd-gnav ul a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background-color: var(--color-bg); transition: all 0.3s ease; }
.qbd-gnav ul a:hover { color: var(--color-primary); }
.qbd-gnav ul a:hover::after { background-color: var(--color-primary); }
/* 表示中ページのタブは常時teal+下線(本家 li.main_current 相当。付与判定は qbd_gnav_current_class) */
.qbd-gnav li.is-current a { color: var(--color-primary); }
.qbd-gnav li.is-current a::after { background-color: var(--color-primary); }
/* CTAボタン: 本家(#contact_area/#contact_area2)準拠 — ヘッダ全高・幅170px・隙間なし・左にアイコン */
.qbd-header-actions { display: flex; gap: 0; flex-shrink: 0; align-self: stretch; }
.qbd-header-btn { display: inline-flex; align-items: center; justify-content: center; width: 170px; height: 100%; white-space: nowrap; font-family: var(--font-heading); font-size: 13px; font-weight: 700; border-radius: 0; }
.qbd-header-btn--primary { background: var(--color-primary); color: var(--color-bg); }
.qbd-header-btn--secondary { background: var(--color-primary-pale); color: var(--color-text); }
/* テキスト左に20pxアイコンを背景表示(本家 span 実装に準拠) */
.qbd-header-btn-txt { display: inline-block; line-height: 1.2; padding-left: 30px; background-repeat: no-repeat; background-position: left center; background-size: 20px auto; }
.qbd-header-btn--primary .qbd-header-btn-txt { background-image: url("../images/icon_mail.svg"); }
.qbd-header-btn--secondary .qbd-header-btn-txt { background-image: url("../images/icon_faq.svg"); }
.qbd-nav-toggle { display: none; }
body { padding-top: var(--header-height); }

/* ハンバーガー3本線アイコン(本家 .gnavi_btn_sp_in span×3実測: 26x20、4px高、top 0/8/16px)
   中央spanの::before/::afterではなく実要素3本にしているのは、開閉時のX変形(transform)を
   本家と同じ角度・移動量で再現するため(QBD_WEB-78) */
.qbd-nav-toggle-bars { position: relative; display: inline-block; width: 26px; height: 20px; margin: 0 auto 3px; }
.qbd-nav-toggle-bars span { position: absolute; left: 0; width: 100%; height: 4px; background-color: #333333; border-radius: 4px; transition: transform 0.4s ease, opacity 0.4s ease, top 0.4s ease; }
.qbd-nav-toggle-bars span:nth-child(1) { top: 0; }
.qbd-nav-toggle-bars span:nth-child(2) { top: 8px; }
.qbd-nav-toggle-bars span:nth-child(3) { top: 16px; }
.qbd-nav-toggle[aria-expanded="true"] .qbd-nav-toggle-bars span:nth-child(1) { top: -8px; transform: translateY(16px) rotate(-45deg); }
.qbd-nav-toggle[aria-expanded="true"] .qbd-nav-toggle-bars span:nth-child(2) { opacity: 0; }
.qbd-nav-toggle[aria-expanded="true"] .qbd-nav-toggle-bars span:nth-child(3) { top: 24px; transform: translateY(-16px) rotate(45deg); }

/* SPのみで開くお問い合わせ/よくあるご質問(本家 .gnavi_area 内 .gnavi_contact 実測準拠)。
   PCの.qbd-header-actionsと同じ.qbd-header-btnを再利用し、幅・高さのみメニュー内用に上書き */
.qbd-gnav-actions { display: none; }

/* 本家実測(2026-07-27): max-width:1119px でロゴ左に16px、ナビ項目間隔を2em→1emに詰める。
   inner にガターを持たない本家では、この margin-left がロゴの左余白そのものになる
   (ローカルにこのブレークポイントが無かったため、inner のガター撤去後にロゴが画面左端に張り付いていた) */
@media (max-width: 1119px) {
  .qbd-header-logo { margin-left: 16px; }
  .qbd-gnav li { margin-right: 16px; }
}

/* ヘッダー高さ(本家実測 2026-07-23: #header_area は max-width:690px で 85px→50px に縮小) */
@media (max-width: 690px) {
  :root { --header-height: 50px; }
}

/* ハンバーガー切替=979px(本家実測: max-width:979px で gnavi→display:none / gnavi_btn_sp→display:block) */
@media (max-width: 979px) {
  .qbd-gnav, .qbd-header-actions { display: none; }
  /* 本家実測(#header): SP幅ではヘッダー下に影が付き、コンテンツとの境界を作る */
  .qbd-header { box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1); }
  /* 本家 .gnavi_btn_sp 実測: アイコン(26x20)を上、テキストを下に積む縦積みレイアウト(幅70px・中央寄せ)。
     横並びflexにするとアイコンとテキストが同じ行の視覚的な塊になり、アイコン単体が本家より大きく見えるため(QBD_WEB-78) */
  /* 本家実測(.gnavi_btn_sp): position:absolute + right:12px で画面右端から12px。
     ここではflexのmargin-rightで同じ位置にする(inner がガターを持たないため12pxが実際の右余白になる) */
  .qbd-nav-toggle { display: block; width: 70px; margin-left: auto; margin-right: 12px; padding: 0; background: none; border: 0; text-align: center; line-height: 1; }
  .qbd-nav-toggle-label { display: block; font-size: 12px; }
  /* ロゴ画像: 本家実測(#header_logo img)は固定200x48ではなくheight:50pxにスケール(width autoで縮む)。
     ボックス幅はPCの160px固定を解除する(本家も max-width:979px で #header_logo{width:auto}) */
  .qbd-header-logo { width: auto; }
  .qbd-header-logo img { height: 50px; width: auto; max-width: none; display: block; padding: 8px 0; }
  .qbd-gnav.is-open { display: block; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-bg); }
  /* 本家実測: SPメニューはflexではなく通常のブロック表示(ul上端に区切り線、li毎に全幅+下線)。
     PC用flexのalign-items:centerを引き継いだままflex-directionだけcolumnにすると、
     各liが内容幅に縮んで画面中央に寄ってしまう(QBD_WEB-78で発覚) */
  .qbd-gnav.is-open ul { display: block; margin: 0; padding: 0; height: auto; border-top: 1px solid #eee; }
  .qbd-gnav.is-open ul li { width: 100%; height: auto; border-bottom: 1px solid #eee; }
  .qbd-gnav.is-open ul a { width: 100%; height: auto; display: block; padding: 10px 20px; font-size: 16px; transition: background-color 0.15s ease; }
  /* タッチ時のグレー表示: 本家実測 rgb(178,178,178)(QBD_WEB-79) */
  .qbd-gnav.is-open ul a:active { background-color: rgb(178, 178, 178); }
  .qbd-gnav ul a::after { display: none; }
  /* 本家実測(.gnavi_contact): 直前のliとの間24px、ボタン同士16px */
  .qbd-gnav.is-open .qbd-gnav-actions { display: flex; flex-direction: column; gap: 16px; padding: 24px 20px 20px; }
  .qbd-gnav.is-open .qbd-gnav-actions .qbd-header-btn { width: 100%; height: auto; padding: 15px; border-radius: 4px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
/* ロゴ行: 内側コンテナ内で左寄せ。padding20px+上境界線#cccは本家#footer_lead実測(2026-07-14、帯全高89px) */
.qbd-footer-lead { padding: 20px 0; border-top: 1px solid rgb(204, 204, 204); }
.qbd-footer-lead .qbd-inner { display: flex; align-items: center; }
.qbd-footer-lead img { width: 200px; height: auto; }
.qbd-footer-nav { background: var(--color-bg-light); padding: 60px 0; }
/* 列はコンテンツ幅+56px間隔。本家.footer_nav_blockはflex wrapで、各.fnav_unitがコンテンツ幅
   (1280pxで132/395/148/116px)+margin-right:56pxになっている(実測 2026-08-19 / QBD_WEB-169)。
   4列均等の1frだと全列262px固定で、「これまでプロショップやECサイトを利用していた方」が
   1280pxで2行に折り返していた。minmax(0,..)は幅が足りないときに本家のflex-shrinkと同じく
   縮んではみ出さないため。690px以下は1fr・gap:0で上書きするのでスマホ表示は変わらない */
.qbd-footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, max-content)); gap: 24px 56px; }
/* フッターナビ見出し: Noto Serif JP 16px 太字 + 本家準拠の丸＋白シェブロンアイコン */
.qbd-footer-cols h3 { position: relative; font-family: var(--font-heading); font-weight: 700; color: var(--color-text); font-size: 16px; margin: 14px 0 0; padding-left: 24px; }
.qbd-footer-cols h3:first-child { margin-top: 0; }
/* hover: 本家fnav_title実測(2026-07-15): 下線のみ(色は変わらない、transition all .2s ease) */
.qbd-footer-cols h3 a { color: inherit; transition: all 0.2s ease; }
.qbd-footer-cols h3 a:hover { text-decoration: underline; }
/* 見出しアイコン: tealの丸 */
.qbd-footer-cols h3::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border-radius: 50%; background: var(--color-primary); }
/* 見出しアイコン: 丸の中の白シェブロン */
.qbd-footer-cols h3::after { content: ""; position: absolute; left: 5px; top: 50%; width: 4px; height: 4px; border-top: 1.5px solid #fff; border-right: 1.5px solid #fff; transform: translateY(-50%) rotate(45deg); }
/* サブリンクリスト: 本家準拠のtealシェブロンマーカー(テキスト行高に揃える) */
.qbd-footer-cols ul { list-style: none; padding-left: 0; margin: 8px 0 0; }
.qbd-footer-cols ul li { position: relative; padding-left: 15px; font-size: 14px; line-height: 1.9; }
.qbd-footer-cols ul li::before { content: "\203A"; position: absolute; left: 1px; top: 0; color: var(--color-primary); font-weight: 400; }
/* hover: 本家fnav_list実測(2026-07-15): #666→薄teal(#9EC4C8)+下線(transition all .2s ease) */
.qbd-footer-cols ul li a { font-family: var(--font-body); font-size: 14px; color: var(--color-text); transition: all 0.2s ease; }
.qbd-footer-cols ul li a:hover { color: var(--color-primary-light); text-decoration: underline; }
.qbd-footer-info { background: var(--color-footer-bar); color: var(--color-bg); padding: 16px 0; }
.qbd-footer-info .qbd-inner { display: flex; justify-content: space-between; align-items: center; }
.qbd-footer-info-navi { display: flex; gap: 24px; }
/* hover: 本家footer_info_navi実測(2026-07-15): 下線のみ(白のまま、transition all .2s ease) */
.qbd-footer-info-navi a { color: var(--color-bg); font-size: 12px; transition: all 0.2s ease; }
.qbd-footer-info-navi a:hover { text-decoration: underline; }
.qbd-footer-info small { color: var(--color-bg); font-size: 12px; }

/* ページトップへ戻る: 本家 #topcontrol / a.pagetop 実測(2026-07-14、フェード/シェブロン位置/縮小breakpointは2026-07-23再実測)。
   右下固定(right10px/bottom40px)72x72、薄teal背景+白枠2px、teal上向きシェブロン。スクロール10px超で出現。
   フェードは本家scrolltopcontrol.jsのfadeduration([500,100])に合わせ表示0.5s/非表示0.1sの非対称。
   50x50への縮小は本家実測どおりmax-width:979px(タブレット境界)で発生する
   (SP690px以下で完全非表示にする本家仕様は、2026-07-23ユーザー判断により追随しない) */
.qbd-pagetop { position: fixed; right: 10px; bottom: 40px; z-index: 150; width: 72px; height: 72px; padding: 0; background: var(--color-primary-pale); border: 2px solid #fff; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 0.1s, visibility 0s linear 0.1s; }
.qbd-pagetop.is-visible { opacity: 1; visibility: visible; transition: opacity 0.5s; }
.qbd-pagetop::before { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 6px); margin: 0 auto; width: 24px; height: 24px; border-top: 2px solid var(--color-primary); border-right: 2px solid var(--color-primary); transform: rotate(-45deg); }
@media (max-width: 979px) {
  .qbd-pagetop { width: 50px; height: 50px; }
  .qbd-pagetop::before { width: 16px; height: 16px; top: calc(50% - 4px); }
}

@media (max-width: 690px) {
  .qbd-footer-lead img { width: 120px; } /* 本家実測: SP(690px以下)でロゴ120px幅 */
  /* 左右余白: 本家 .inner 実測(2026-07-23, 375px幅): left 18.75px/width 337.5px = 90%中央寄せ。
     .qbd-innerは他ページ本文でも共有されるクラスのため、ここではフッター配下のみにスコープする。
     footer_navだけは対象外(本家 #footer_nav .footer_nav_block はSPで width:100% に戻り、
     見出し行のタップ判定が画面端まで届く。QBD_WEB-82で誤って90%ガター内に収めてしまっていた) */
  .qbd-footer-lead .qbd-inner,
  .qbd-footer-info .qbd-inner { width: 90%; margin: 0 auto; }
  /* ナビ: 本家(template_c2.css max-width:690px)実測(2026-07-23)は.fnav_list{display:none}でサブ項目恒久非表示、
     見出し(.fnav_title a)のみ全幅1カラムの行(padding:15px 10px 15px 40px; border-top:1px solid #eee)として表示。
     JSトグルは無い(常時非表示) */
  .qbd-footer-cols { grid-template-columns: 1fr; gap: 0; }
  .qbd-footer-nav { padding: 0; } /* 本家.footer_nav_blockはSPでpadding:0(行がセクション端まで全幅) */
  .qbd-footer-cols ul { display: none; }
  .qbd-footer-cols h3 { margin: 0; padding-left: 0; }
  .qbd-footer-cols h3 a { display: block; padding: 15px 10px 15px 40px; border-top: 1px solid #eee; transition: background-color 0.15s ease; }
  /* 丸+白シェブロンアイコンは既存のものを流用(本家アイコン画像もteal丸+白矢印で一致、2026-07-23実測)。
     paddingがh3からaへ移った分、アイコン位置(left)を本家実測(20px付近)に合わせて右へ20pxオフセット */
  .qbd-footer-cols h3::before { left: 20px; }
  .qbd-footer-cols h3::after { left: 25px; }
  /* タップ時ハイライト(QBD_WEB-83): 本家は全<a>共通の -webkit-tap-highlight-color: rgba(0,0,0,.3) だが、
     tap-highlight-colorは実背景と合成されて見えるため、フッターナビの実背景#f5f5f5(--color-bg-light)に
     対して合成した値をheadless chromeで実測(2026-07-23、canvas合成): rgb(171,171,171)。
     ヘッダー(QBD_WEB-79)のrgb(178,178,178)は白背景での合成値のため流用不可(背景色が違うため値も異なる) */
  .qbd-footer-cols h3 a:active { background-color: rgb(171, 171, 171); }
  .qbd-footer-info .qbd-inner { flex-direction: column; gap: 8px; text-align: center; }
  .qbd-footer-info-navi { justify-content: center; }
  /* 最下部区切り線: 本家 #footer_info small 実測(2026-07-23) */
  .qbd-footer-info small { display: block; border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: 20px; padding-top: 8px; }
}

/* ==========================================================================
   Sections (home)
   ========================================================================== */
.qbd-section { padding: var(--space-100) 0; }
.qbd-section--gray { background: var(--color-bg-light); }
.qbd-hero { height: 640px; background-size: cover; background-position: center; display: flex; align-items: center; }
.qbd-hero-inner { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--side-padding); width: 100%; }
/* 見出しは本家(template_c2.css:579)がfont-style:italic。書体はLTCBodoni175W01の暫定置換のため
   傾きは揃うが字形は完全一致しない。スマホ幅はfont-styleを上書きしないのでここ1箇所で両幅に効く */
.qbd-hero-title { font-family: var(--font-display); font-size: 60px; font-style: italic; font-weight: 400; line-height: 1; letter-spacing: 3px; color: var(--color-primary); margin: 0; }
.qbd-hero-sub { font-family: var(--font-heading); color: var(--color-text); margin: 24px 0; }
.qbd-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: var(--space-60); }
/* About: 40px gap (spec実測値) */
.qbd-card-grid--about { gap: 40px; }
/* Beginners: ほぼgap無し(spec実測: 1.5px) */
.qbd-card-grid--beginners { gap: 2px; }
/* Aboutカード: flex縦積みでリンクを下端固定 */
.qbd-card { border: 1px solid var(--color-border); background: var(--color-bg); padding: 0 0 24px; }
/* hover: 本家dlb_box3-6実測(2026-07-15): カード全体hoverで影(transition all .3s ease)。
   「詳しく見る」の下線はバー自体にポインタが乗った時のみ(本家はbiggerlinkでa要素はバーだけのため) */
.qbd-card { transition: all 0.3s ease; }
.qbd-card:hover { box-shadow: 5px 2px 10px 2px rgba(0, 0, 0, 0.1); }
.qbd-card--flex { display: flex; flex-direction: column; padding-bottom: 0; }
.qbd-card--flex img { flex-shrink: 0; }
.qbd-card--flex .qbd-card-body { flex: 1; }
.qbd-card--flex .qbd-card-link { margin-top: auto; display: block; }
.qbd-card img { width: 100%; height: 220px; object-fit: cover; }
/* カードタイトル: spec left-indent 12px */
/* 本家dlb_box3-6実測(2026-07-15): 本文コンテナはpadding 25px 25px 0、タイトルは左に3pxの薄teal縦バー+字下げ12px */
.qbd-card-body { padding: 25px 25px 0; }
.qbd-card-title { display: flex; align-items: center; font-family: var(--font-heading); font-size: 20px; font-weight: 600; color: var(--color-primary); border-left: 3px solid var(--color-primary-light); padding: 0 0 0 12px; margin: 0 0 15px; line-height: 1.4; }
.qbd-card-text { padding: 0; font-size: 16px; line-height: 30.4px; color: var(--color-text); }
.qbd-icon-card { display: flex; flex-direction: column; align-items: center; gap: 16px; background: var(--color-bg); padding: 56px 40px; text-align: center; color: var(--color-text); transition: all 0.3s ease-in; }
.qbd-icon-card img { width: 140px; height: 140px; }
/* タイトル文字: 本家dlb_box4-2_title実測(2026-07-15): teal・Noto Serif 20px 太字・行間1.4 */
.qbd-icon-card span { font-family: var(--font-heading); font-size: 20px; font-weight: 700; line-height: 1.4; color: var(--color-primary); text-align: center; }
/* hover: 本家実測(2026-07-15): カード全体hoverで背景が白→薄teal(#9EC4C8)、タイトルは白+下線(transition all .3s ease-in) */
.qbd-icon-card:hover { background: var(--color-primary-light); }
.qbd-icon-card:hover span { color: var(--color-bg); text-decoration: underline; }
@media (max-width: 690px) {
  .qbd-card-grid { grid-template-columns: 1fr; }
  .qbd-card-grid--beginners { gap: 2px; }
  /* ヒーロー: 本家実測(2026-08-07、375px幅) [QBD_WEB-24]。
     高さ320px、テキストは幅90%(左右5%)。本家は上に80px空けた残りの領域でtable-cellの縦中央寄せに
     なるため(見出し上端が127px)、上padding 80px+align-items:centerで同じ位置にする。
     テキスト枠が狭いと見出し・リード文・ボタンが折り返して縦に伸びるため、幅を先に合わせる */
  .qbd-hero { height: 320px; padding-top: 80px; }
  .qbd-hero-inner { width: 90%; max-width: none; padding: 0; }
  .qbd-hero-title { font-size: 32px; line-height: 1.4; letter-spacing: 1.6px; margin: 0 0 10px; }
  .qbd-hero-sub { font-size: 13px; line-height: 1.6; margin: 0; }
  /* ボタンは内容幅(本家211.7px相当)。padding 14px 24px・行間1.2で高さ51pxになる */
  .qbd-hero .qbd-btn-primary { padding: 14px 24px; line-height: 1.2; margin-top: 20px; }
}

/* ==========================================================================
   S4 Recommends (Swiper carousel)
   ========================================================================== */
/* カード構成は本家dlb_media_01実測(2026-08-06): 画像 / カテゴリ帯 / 日付 / タイトル / 本文抜粋 / タグ [QBD_WEB-127] */
.qbd-recommends-carousel { margin-top: var(--space-60); position: relative; }
.qbd-recommends-swiper { position: relative; }
.qbd-recommend-thumb { position: relative; }
.qbd-recommend-slide img { width: 100%; height: 180px; object-fit: cover; }
.qbd-recommend-slide .qbd-thumb-ph { height: 180px; }
/* カテゴリ帯: 本家は画像下端に10px被せる位置(top:170px / 画像高さ180px) */
.qbd-recommend-cate { position: absolute; top: 170px; right: 0; }
.qbd-recommend-cate span { display: block; font-size: 10px; font-weight: 700; line-height: 1.2; color: var(--color-bg); background: var(--color-primary); padding: 4px 8px; }
/* テキスト枠の背景: 本家dlb_media_right実測(2026-08-06)はrgb(239,244,244) [QBD_WEB-145] */
.qbd-recommend-body { background: var(--color-card-link-bg); padding: 16px 10px 10px; }
/* テキスト枠の高さを一番高いカードに揃える(本家非踏襲・ユーザー決定2026-08-06 [QBD_WEB-145])。
   本家は本文量に応じて枠の高さが変わるが、背景色が付くと不揃いが目立つため揃える。
   Swiperが.swiper-slideにheight:100%を当てており、cross-sizeが指定済み扱いになってalign-items:stretchが
   効かないため、height:autoに戻してから伸ばす。
   .swiper-slideと詳細度が同じでswiper.min.cssが後読みのため、親クラスを足して勝たせる */
.qbd-recommends-swiper .swiper-wrapper { align-items: stretch; }
.qbd-recommends-swiper .qbd-recommend-slide { height: auto; }
.qbd-recommend-slide > a { display: flex; flex-direction: column; height: 100%; }
.qbd-recommend-body { flex: 1 1 auto; }
.qbd-recommend-date { display: block; font-size: 10px; line-height: 1; letter-spacing: .09em; color: #999; margin-bottom: 10px; }
.qbd-recommend-slide h3 { font-family: var(--font-heading); font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: .05em; margin: 0 0 8px; }
.qbd-recommend-text { font-size: 13px; line-height: 1.9; color: var(--color-text); margin: 0; }
.qbd-recommend-tags { margin: 10px 0 0; }
.qbd-recommend-tags span { display: inline-block; font-size: 12px; line-height: 1.9; color: var(--color-bg); background: var(--color-primary); padding: 0 10px; margin: 0 5px 5px 0; }
/* 左右送り: 本家slick実測 36px円+白いシェブロン、スライド枠の外側16px、既定opacity .75。
   縦位置は本家と同じくスライド領域の50%(ドットは枠外に出しているので補正は不要) */
.qbd-swiper-prev, .qbd-swiper-next { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; opacity: .75; z-index: 2; }
/* 枠外16pxに出せるのは.qbd-inner(最大1120px)の左右に余白がある1152px以上のときだけ。
   それ未満で出すと画面右端を超えて横スクロールが出る(スマホ幅を含む) */
.qbd-swiper-prev { left: 0; }
.qbd-swiper-next { right: 0; }
@media (min-width: 1152px) {
  .qbd-swiper-prev { left: -16px; }
  .qbd-swiper-next { right: -16px; }
}
.qbd-swiper-prev::before, .qbd-swiper-next::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--color-primary-light); }
.qbd-swiper-prev::after, .qbd-swiper-next::after { content: ""; position: absolute; top: 14px; width: 8px; height: 8px; border-style: solid; border-width: 2px 2px 0 0; border-color: var(--color-bg); }
.qbd-swiper-prev::after { left: 14px; transform: rotate(-135deg); }
.qbd-swiper-next::after { right: 14px; transform: rotate(45deg); }
.qbd-swiper-prev:hover, .qbd-swiper-next:hover { opacity: 1; }
/* PC幅のカード間隔は本家に合わせてカード側のpaddingで作る(swiper側のspaceBetweenは0)。
   スマホ・タブレットは既存のspaceBetweenのままにするため、この幅から適用する */
@media (min-width: 1025px) {
  .qbd-recommend-slide { padding: 0 8px; }
}
/* ページネーション: 本家slick-dots実測(2026-08-06)は16px円・間隔margin 0 5px・非アクティブrgb(221,221,221)・
   アクティブrgb(158,196,200)で、スライド枠の外(bottom:-35px)に置かれる。
   Swiperの既定は8px・rgb(0,122,255)なので、Swiperのカスタムプロパティで上書きする [QBD_WEB-145] */
.qbd-swiper-pagination {
  --swiper-pagination-bullet-size: 16px;
  --swiper-pagination-bullet-horizontal-gap: 5px;
  --swiper-pagination-color: var(--color-primary-light);
  --swiper-pagination-bullet-inactive-color: var(--color-border);
  --swiper-pagination-bullet-inactive-opacity: 1;
  /* bottomは.swiper-pagination-bullets.swiper-pagination-horizontal(2クラス)が効くため、
     単一クラスのbottom指定では勝てない。Swiper側の変数で渡す */
  --swiper-pagination-bottom: -35px;
  font-size: 0;
  line-height: 0;
}
/* ボタンまでの余白は本家80px(スライダーのmargin-bottom 51pxとボタン側mt80が相殺して80pxになる) */
.qbd-recommends-more { text-align: center; margin-top: var(--space-80); }
/* 本家dlb_btn実測(2026-08-06): 幅はコンテナの40%(1120pxで448px)、文字は左寄せ、右端10%に白いシェブロン。
   .qbd-btn-primaryは他ページと共有のためおすすめ枠限定で上書きする。
   タブレット・スマホ幅の本家値は未計測のため、PC幅(980px以上)だけに適用する */
@media (min-width: 980px) {
  /* 本家はw40_pctab(幅40%・左右auto)のラッパーの中でボタンが幅100%。%paddingは親幅基準なので、
     ボタン自身に width:40% を当てるとpaddingが1120pxの10%(=112px)になってしまう */
  .qbd-recommends-more { width: 40%; margin: var(--space-80) auto 0; }
  .qbd-recommends-more .qbd-btn-primary { display: block; position: relative; width: 100%; padding: 12px 10%; text-align: left; }
  .qbd-recommends-more .qbd-btn-primary::before { content: ""; position: absolute; top: calc(50% - 5px); right: 10%; width: 6px; height: 6px; border-style: solid; border-width: 2px 2px 0 0; border-color: var(--color-bg); transform: rotate(45deg); }
  .qbd-recommends-more .qbd-btn-primary:hover::before { border-color: var(--color-primary-light); }
}

/* ==========================================================================
   S6 Company / Recruit panels
   ========================================================================== */
.qbd-company { padding: var(--space-100) 0; }
/* 本家dlb_box2-2実測(2026-08-06): flex+wrap+align-items:center、画像もテキストも幅50%。
   560px固定の2列gridだと合計1120pxが縮まないため、980〜1119pxでコンテナからはみ出していた [QBD_WEB-127] */
/* 本家はalign-items:centerだが、本家は左右の高さが偶然そろうため差が出ない。
   ローカルは見出しの行高が違いテキスト側が6px低くなり、白背景が画像より短く見えるためstretchで揃える */
.qbd-panel { display: flex; flex-wrap: wrap; align-items: stretch; }
.qbd-panel--reverse { flex-direction: row-reverse; }
.qbd-panel-img { width: 50%; }
.qbd-panel-img img { width: 100%; height: 383px; object-fit: cover; display: block; }
/* テキスト側: 白背景+padding 100px 60px(本家実測)。課題の「白いパネルの上に配置」はこの背景で成立する */
.qbd-panel-text { width: 50%; background: var(--color-bg); padding: 100px 60px; display: flex; flex-direction: column; justify-content: center; }
/* ボタンは本家実測320px固定(カラム幅いっぱいに伸ばさない) */
.qbd-panel-text .qbd-btn-primary { width: 320px; max-width: 100%; padding: 12px 32px; }
/* Company/Recruitはタイトルを左揃えに上書き */
.qbd-company .qbd-section-en { text-align: left; margin: 0 0 4px; }
.qbd-company .qbd-section-h2 { text-align: left; margin: 0 0 32px; }
/* 見出しブロック: EN→H2を近接させる */
.qbd-panel-heading { display: flex; flex-direction: column; gap: 4px; }
.qbd-panel-heading .qbd-section-en { margin-bottom: 0; }
.qbd-panel-heading .qbd-section-h2 { margin-top: 0; margin-bottom: 32px; }
/* タブレット境界=979px(本家実測)。1カラム化の挙動は従来どおり(gridからflexへの書き換えのみ) */
@media (max-width: 979px) {
  .qbd-panel, .qbd-panel--reverse { flex-direction: column; }
  .qbd-panel-img, .qbd-panel-text { width: 100%; }
  .qbd-panel-text { padding: 32px 24px; }
}
/* スマホ幅の画像の高さ: 本家実測(2026-08-07、375px幅)は160px [QBD_WEB-24]。
   PC幅の383pxのままだと画像だけで画面の半分近くを占める */
@media (max-width: 690px) {
  .qbd-panel-img img { height: 160px; }
}

/* ==========================================================================
   S7 News / Info
   ========================================================================== */
.qbd-news-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; }
/* 見出しはリスト左端に揃える(本家dlb_rss_02_left実測)。共有の.qbd-section-*が中央揃えのため上書き [QBD_WEB-127] */
.qbd-news-list .qbd-section-en, .qbd-news-list .qbd-section-h2 { text-align: left; }
.qbd-news-list ul { list-style: none; padding: 0; }
/* 行全体をaで包みクリック可能に(本家はbiggerlink)。hoverで行背景が→#f5f5f5(本家dlb_rss dl実測2026-07-15、transition all .3s ease-in) */
.qbd-news-list li { border-bottom: 1px solid var(--color-border); transition: all 0.3s ease-in; }
.qbd-news-list li:hover { background: var(--color-bg-light); }
/* 日付の右の16pxはgapではなくmargin-rightで作る。ラベルをタイトルの外に出したため、
   gapだとラベルとタイトルの間隔(ラベル側のmargin-right 10px)も16pxに広がってしまう */
.qbd-news-list li a { display: flex; flex-wrap: wrap; padding: 12px 0; }
.qbd-news-list li a time { margin-right: 16px; }
/* スマホ幅では本家(dlb_rss dl実測2026-08-07、375px幅)と同じく日付+ラベルを上・タイトルを下の縦2段にする。
   横1行のままだとタイトルに使える幅が186pxしかなく、長いタイトルが入らない [QBD_WEB-24] */
@media (max-width: 690px) {
  .qbd-news-list li a { padding: 15px 12px 10px; }
  .qbd-news-list li .qbd-news-title { flex: 0 0 100%; padding: 3px 0; margin-top: 4px; }
}
/* タイトル: 本家rss_title実測(2026-07-15): 通常teal、文字上にポインタが乗った時のみ薄teal+下線(行hoverでは変化しない) */
.qbd-news-title { color: var(--color-primary); transition: all 0.2s ease; }
.qbd-news-title:hover { color: var(--color-primary-light); text-decoration: underline; }
/* カテゴリラベル(qbd_news_label_html()が出力。お知らせ一覧ページでも共用予定)。本家.rss_new実測(2026-07-15) */
.qbd-news-label { display: inline-block; vertical-align: middle; background: var(--color-primary); color: var(--color-bg); font-size: 10px; letter-spacing: 0.1em; padding: 3px 10px; margin-right: 10px; border-radius: 0; }
/* お知らせ一覧へボタン: 本家実測(2026-07-15)は右カラム先頭・カラム幅いっぱい(260x50)・上40px/下40px。
   下40pxはバナー列のgap8px+margin-bottom32pxで再現。リンクは8px上下padding+中央揃え */
.qbd-news-more { margin: 40px 0 32px; }
/* 色はQAバナー帯と同じ濃いteal(--color-primary)に揃える(このボタン限定。共有の.qbd-btn-primaryは薄teal) */
.qbd-news-more .qbd-btn-primary { display: block; padding: 8px 26px; text-align: center; background: var(--color-primary); border-color: var(--color-primary); }
.qbd-news-more .qbd-btn-primary:hover { background: var(--color-bg); color: var(--color-primary); }
/* バナー: 背景cover、固定高さ、テキストは本家準拠で下部のtealバーに配置(全面暗幕なし) */
.qbd-news-banners { display: flex; flex-direction: column; gap: 8px; }
.qbd-news-banner { display: flex; align-items: flex-end; background-size: cover; background-position: center; height: 190px; color: #fff; text-decoration: none; position: relative; overflow: hidden; }
/* 下部tealバー: 帯内に白文字を中央配置 */
.qbd-news-banner-text { display: block; width: 100%; box-sizing: border-box; background: var(--color-primary); color: #fff; text-align: center; font-family: var(--font-heading); font-size: 18px; font-weight: 500; letter-spacing: .05em; padding: 18px 8px; transition: background-color .2s ease; }
.qbd-news-banner:hover .qbd-news-banner-text { background: var(--color-primary-light); }

/* ==========================================================================
   S8 CTA
   ========================================================================== */
.qbd-cta { background-size: cover; background-position: center; padding: 80px 0; text-align: center; }
/* 縦間隔は各要素のmarginで本家再現(Contact下10px/h2下40px)。gapは使わない */
.qbd-cta-inner { display: flex; flex-direction: column; align-items: center; }
.qbd-cta .qbd-section-en { line-height: 1; margin: 0 0 10px; }
/* tel + ボタンを横並び(デスクトップ)。列間36pxは本家実測(2026-07-14) */
.qbd-cta-contact-row { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; justify-content: center; }
.qbd-cta .qbd-cta-contact-row { margin-top: 40px; }
.qbd-cta-tel-wrap { text-align: center; }
/* 電話ラベル: 本家実測 16px/Noto Serif JP */
.qbd-cta-tel-label { font-family: var(--font-heading); font-size: 16px; line-height: 1.9; color: var(--color-text); margin: 0 0 4px; }
.qbd-cta-tel { margin: 0; }
/* 電話番号: 本家実測 40px/Noto Serif JP/500/行高1.2 + 左に電話アイコン(本家 .in のpadding-left40px相当) */
.qbd-cta-tel a { font-family: var(--font-heading); font-size: 40px; font-weight: 500; line-height: 1.2; color: var(--color-primary); text-decoration: none; padding-left: 40px; background: url("../images/icon_tel.png") left center no-repeat; display: inline-block; }
/* CTA H2: サイズは共通の32pxのまま、色はグレー・marginなし(本家実測) */
.qbd-cta .qbd-section-h2 { color: var(--color-text); margin: 0; }
/* CTAボタン: 本家実測 幅324px/padding15px20px/背景・枠= color-primary/文字18px 500 白+メールアイコン */
.qbd-cta-btn { background: var(--color-primary); border-color: var(--color-primary); width: 324px; max-width: 100%; box-sizing: border-box; padding: 15px 20px; font-size: 18px; font-weight: 500; text-align: center; }
/* 本家cta_btn実測(2026-07-14): hoverで見た目は変化しないため、qbd-btn-primaryの色反転を打ち消す */
.qbd-cta-btn:hover { background: var(--color-primary); color: #fff; }
.qbd-cta-btn::before { content: ""; display: inline-block; width: 26px; height: 17px; background: url("../images/icon_cta_mail.svg") center / contain no-repeat; margin-right: 14px; vertical-align: -2px; }
@media (max-width: 690px) {
  .qbd-news-grid { grid-template-columns: 1fr; }
  /* 本家スマホはposition:static+margin-top:24px相当 */
  .qbd-news-more { margin-top: 24px; }
  .qbd-cta { padding: 48px 0; }
  .qbd-cta-tel a { font-size: 38px; }
  .qbd-cta-contact-row { flex-direction: column; gap: 24px; }
  .qbd-cta .qbd-section-h2 { font-size: 28px; }
  .qbd-cta-btn { width: 320px; }
}

/* ==========================================================================
   下層ページ: タイトル帯・パンくず
   ========================================================================== */
/* background-positionは本家#pagetitle実測(2026-07-23): 375px/1280px幅とも0% 50%(左寄せ)固定。モバイル専用の上書きではない */
.qbd-page-header { background-size: cover; background-position: left center; padding: 64px 0; }
/* ページ名は本家pagetitle実測(2026-07-15)どおり帯内で中央寄せ */
.qbd-page-title { font-family: var(--font-heading); font-size: 32px; font-weight: 600; letter-spacing: 1.6px; color: var(--color-primary); margin: 0; text-align: center; }
/* パンくず: 本家#locator実測(2026-07-15): ヘッダー直下の全幅帯(薄teal)、10px/#666、リンクは下線付き */
.qbd-breadcrumb { background: var(--color-card-link-bg); padding: 13px 0; font-size: 10px; color: var(--color-text); }
.qbd-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.qbd-breadcrumb li::after { content: '>'; margin-left: 6px; color: var(--color-text); }
.qbd-breadcrumb li:last-child::after { content: ''; }
.qbd-breadcrumb a { color: var(--color-text); text-decoration: underline; }
.qbd-breadcrumb [aria-current="page"] { color: var(--color-text); }
@media (max-width: 690px) {
  /* 本家実測(2026-08-18 / 375px / QBD_WEB-163): 帯の上下paddingは30px。
     帯の下端から本文先頭までの30pxは .qbd-lower-layout の padding-top で作っており、
     ここを変えても崩れない(QBD_WEB-128) */
  .qbd-page-header { padding: 30px 0; }
  .qbd-page-title { font-size: 24px; }
  /* 記事系の帯(page-header.phpにheading_level=pを渡す記事ページ・一覧ページ)は本家の
     字間がnormal・太さが500。当テーマの1.6px / 600のぶん幅を超えて、記事ページの帯(14文字)が
     2行に折り返していた(QBD_WEB-163の差分10)。
     下層13ページの帯はh1で、本家の字間は1.2px・太さ500と別値のためここでは触らない
     (2026-08-18の実測で判明。別途の判定を仰ぐ)。PC幅も既存の判断のまま変えない */
  p.qbd-page-title { font-weight: 500; letter-spacing: normal; }
  /* 本家#locator実測(2026-08-18 / 375px): 上下padding8px・行高14px */
  .qbd-breadcrumb { padding: 8px 0; line-height: 14px; }
  /* 本家#locator/#pagetitleの.inner実測(2026-07-23): 690px以下はwidth:90%(左右5%=375px幅で18.75px)。
     .qbd-innerは元々max-width中央寄せのみで左右%指定が無く、ビューポート未満の幅では左右余白が0になっていた */
  .qbd-breadcrumb .qbd-inner,
  .qbd-page-header .qbd-inner { width: 90%; }
}

/* ==========================================================================
   下層ページ: ページ内アンカーナビ
   ========================================================================== */
html { scroll-behavior: smooth; }
/* アンカー先が固定ヘッダに隠れない対策 */
:target { scroll-margin-top: calc(var(--header-height) + 16px); }
/* ボタン間隔は本家実測(2026-07-15)の8px。12pxだと取り扱いメーカーの
   「ヘアケア・カラーメーカー」(テキスト幅192px)がpadding80px込みで折り返す */
.qbd-page-nav ul { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.qbd-page-nav li { flex: 1; display: flex; }       /* align-items:stretch相当で高さ均一 */
.qbd-page-nav a { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--color-bg-light); color: var(--color-primary); border: 1px solid var(--color-primary); padding: 15px 32px 15px 48px; font-size: 16px; text-decoration: none; position: relative; transition: background-color .2s ease; }
/* アイコン: 本家実測(2026-07-15)は画像ではなくborder製の下向きシェブロン(6px角・線幅2px・135度回転)。hoverで白に */
.qbd-page-nav a::before { content: ''; position: absolute; left: 24px; top: calc(50% - 5px); width: 6px; height: 6px; border-style: solid; border-width: 2px 2px 0 0; border-color: var(--color-primary); transform: rotate(135deg); }
/* hover: 本家実測(2026-07-14)はteal塗り+白文字+シェブロンも白 */
.qbd-page-nav a:hover { background: var(--color-primary); color: #fff; }
.qbd-page-nav a:hover::before { border-color: #fff; }
@media (max-width: 690px) {
  /* 本家.menu_btn_332実測: スマホは1カラムでなく2カラム折り返し(3件目は単独で1行)。
     paddingも縮小しないと2カラム時に「九美堂について」等が折り返してボックスの高さが揃わない */
  .qbd-page-nav ul { flex-wrap: wrap; }
  .qbd-page-nav li { flex: 0 0 calc(50% - 4px); }
  .qbd-page-nav a { padding: 10px 5% 10px 2.5em; justify-content: flex-start; }
  .qbd-page-nav a::before { left: 1em; }
}

/* ==========================================================================
   下層ページ: about
   ========================================================================== */
.qbd-about-page { padding: var(--space-80) 0 var(--space-100); }
.qbd-about-main { max-width: 840px; margin: 0 auto var(--space-80); }
.qbd-about-main-img { width: 100%; height: auto; display: block; }
/* リード文: 本家dlb_box1_txt実測(2026-07-15): 白箱が画像下部に-160px重なる。文字はteal20px/行高2.2/中央 */
.qbd-about-main-text { position: relative; z-index: 2; background: var(--color-bg); margin: -160px 42px 0; padding: 56px 64px; box-shadow: 0 5px 20px rgba(0, 0, 0, .1); text-align: center; font-size: 20px; line-height: 2.2; color: var(--color-primary); }
/* 本家は979px/690pxで食い込み量とパディングを段階的に縮小する(本家.dlb_box1_txt実機のgetComputedStyleで確認)。
   本家はwidth:90%+margin:autoで側余白を作るため、自テーマもこの2段階だけ同じ技法に合わせる */
@media (max-width: 979px) {
  .qbd-about-main-text { width: 90%; margin: -80px auto 0; padding: 40px 32px; line-height: 2; }
}
@media (max-width: 690px) {
  .qbd-about-main-text { width: 90%; margin: -40px auto 0; padding: 24px 24px; font-size: 16px; line-height: 1.9; }
}
.qbd-about-h3 { font-family: var(--font-heading); font-size: 24px; font-weight: 500; color: var(--color-primary); line-height: 33.6px; letter-spacing: 1.2px; padding: 2px 0 2px 15px; border-left: 3px solid var(--color-primary-light); margin-bottom: 20px; }
.qbd-about-service { max-width: 840px; margin: 0 auto var(--space-50); }
.qbd-about-service-row { display: flex; gap: 24px; align-items: flex-start; }
.qbd-about-service-row img { width: 293px; height: 191px; flex-shrink: 0; object-fit: cover; }
.qbd-about-service-row p { font-size: 16px; line-height: 30.4px; color: var(--color-text); }
.qbd-about-analysis, .qbd-about-flow { max-width: 840px; margin: var(--space-100) auto 0; }
.qbd-about-analysis-row { display: flex; gap: 40px; margin-top: var(--space-40); }
.qbd-about-analysis-row figure { margin: 0; flex: 1; }
.qbd-about-analysis-row img { width: 100%; height: auto; }
.qbd-about-flow-row { display: flex; justify-content: center; gap: 48px; margin-top: var(--space-40); text-align: center; }
.qbd-about-step img { height: 50px; width: auto; }
@media (max-width: 690px) {
  /* align-itemsは画像を中央寄せするためのもので、本文中央寄せは意図していない。
     本家は縦積み後も本文は左寄せのまま(text-alignは付けない) [QBD_WEB-84] */
  .qbd-about-service-row { flex-direction: column; align-items: center; }
  .qbd-about-analysis-row { flex-direction: column; }
  .qbd-about-flow-row { flex-direction: column; align-items: center; gap: 24px; }
}

/* ==========================================================================
   下層ページ: 共通(イントロ/セクション)・テーブル・拠点エントリ・地図
   ========================================================================== */
.qbd-lower { padding: var(--space-60) 0 var(--space-100); }
.qbd-lower-intro { font-size: 16px; line-height: 30.4px; color: var(--color-text); margin-bottom: var(--space-40); }
.qbd-lower-section { margin-top: var(--space-80); }
/* 先頭セクションはレイアウトのpadding-top60pxと合算で本家実測(2026-07-15)の80pxにする [QBD_WEB-59] */
.qbd-lower-main > .qbd-lower-section:first-child { margin-top: 20px; }
.qbd-lower-section > .qbd-section-h2 { text-align: left; margin-bottom: var(--space-40); }

.qbd-table { width: 100%; border-collapse: collapse; }
.qbd-table th, .qbd-table td { border: 1px solid #fff; padding: 12px; text-align: left; vertical-align: top; font-size: 15px; line-height: 1.8; }
.qbd-table th { background: var(--color-primary); color: #fff; font-weight: 500; white-space: nowrap; width: 200px; }
.qbd-table td { background: var(--color-bg-light); color: var(--color-text); }

/* 本家実測(2026-07-15): 営業拠点一覧・会社案内ともテキスト列400px/地図列400pxの1:1(gap40px)。
   テキスト列が狭いと手動改行と合わさって孤立改行が出る [QBD_WEB-58] */
.qbd-office-entry { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin-bottom: var(--space-60); }

/* 会社案内: 沿革は本家の別部品「表No.07」(.dlb_table_07)準拠。会社概要の「表No.06」と違い
   塗りが無く、行を上下の細い罫線だけで区切る。本家実測(2026-08-20 / 1280px / QBD_WEB-101):
   td共通=padding20px・border-width 1px 0・border-color #ebebeb・vertical-align middle、
   年号セル=width20%・color #63939C・font-weight500・vertical-align top・white-space normal。
   文字サイズは本家16px/30.4pxだが、.qbd-table共有の15px/1.8のまま据え置く(ユーザー決定2026-08-20。
   同一ページの会社概要テーブルと文字サイズを揃えるため。照合時に合わせない)。
   テーブルのmargin-bottomも本家は30pxだが入れない。本家は次のh2までの間隔が
   30px+ラッパーのマージンで合計80pxになり、移行後はマージン0で既に80px一致しているため
   加えると30px広がる(2026-08-20実測) */
.qbd-history-table th,
.qbd-history-table td { background: none; border-width: 1px 0; border-color: #ebebeb; padding: 20px; vertical-align: middle; }
.qbd-history-table th { width: 20%; color: var(--color-primary); white-space: normal; vertical-align: top; }
/* 会社案内: 沿革の強調は本家準拠でフォントサイズ(本家はspan style="font-size:14pt"、非bold)。
   pのマージンを0にして行高だけで詰め、サイズ拡大による間延びを防ぐ [QBD_WEB-55] */
.qbd-history-table p { margin: 0; }
.qbd-history-head { font-size: 14pt; line-height: 1.9; }
/* 会社案内: 本社へのアクセス(本家実測2026-07-15): 列1:1は.qbd-office-entry基本スタイルに統合済み。
   住所は背景なし16px、「最寄り駅より」だけ薄グレー箱(padding20px/上30px) */
.qbd-office-addr { font-size: 16px; line-height: 1.9; color: var(--color-text); margin: 0; }
.qbd-office-station { background: var(--color-bg-light); padding: 20px; margin-top: 30px; font-size: 16px; line-height: 1.9; color: var(--color-text); }
.qbd-office-station p { margin: 0; }
.qbd-office-station .qbd-office-station-label { color: var(--color-primary); font-weight: 700; margin: 0 0 5px; }
.qbd-office-name { font-family: var(--font-heading); font-size: 22px; font-weight: 500; color: var(--color-primary); padding: 2px 0 2px 15px; border-left: 3px solid var(--color-primary-light); margin-bottom: 12px; }
/* 住所ボックス: 本家実測(2026-07-15)は padding20px/上margin30px/16px/内部pのマージン0(箱高131px) */
.qbd-office-box { background: var(--color-bg-light); padding: 20px; margin-top: 30px; font-size: 16px; line-height: 1.9; color: var(--color-text); }
.qbd-office-box p { margin: 0; }
.qbd-office-box .qbd-office-station-label { color: var(--color-primary); font-weight: 700; margin-top: 8px; }
.qbd-office-img { width: 100%; height: auto; margin-bottom: 16px; }
/* Googleマップ埋め込み: 本家実測(2026-07-14)。
   PCはiframeのwidth/height属性サイズで固定表示(営業拠点=400x350。幅400px以上・高さ約250px以上ないと
   Google側が住所カードを出さず「マップで開く」リンクに縮退する)。SPのみ16:9の可変ボックス。 */
.qbd-iframe-res { max-width: 100%; }
.qbd-iframe-res iframe { max-width: 100%; border: 0; display: block; }
/* 会社案内の本社アクセス: 本家は常時16:9可変(最大400px幅) */
.qbd-iframe-res--169 { position: relative; max-width: 400px; padding-top: min(56.25%, 225px); }
.qbd-iframe-res--169 iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 690px) {
  .qbd-iframe-res { position: relative; width: 100%; padding-top: 56.25%; }
  .qbd-iframe-res iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
}
.qbd-map-link { margin-top: 8px; font-size: 14px; }
.qbd-map-link a { color: var(--color-primary); text-decoration: none; }
.qbd-map-link a:hover { text-decoration: underline; }
.qbd-office-map--empty { display: none; }
.qbd-office-entry:has(.qbd-office-map--empty) { grid-template-columns: 1fr; }
/* 物流センター: text左 + 画像右の2カラム、地図なし
   本家実測(2026-08-20 / 1280px / QBD_WEB-172): .col2_ti は .col_l{width:67%} +
   .col_r{width:calc(100% - 24px - 67%);margin-left:24px} の非対称2列。内側840pxでは
   テキスト562.8px / 間隔24px / 画像253.19pxになる。画像は列幅いっぱい(width:100%)なので
   画像の寸法は列幅で決まる。1fr 1fr + gap40pxだと画像が400x311pxに拡大し、
   テキスト列が400pxに狭まって本文が2行から3行に折り返していた。
   align-itemsは本家が未指定(computed normal)なので、基本ルールのstartに任せる */
.qbd-office-entry--logistics { grid-template-columns: 67% calc(33% - 24px); gap: 24px; }
/* h3の既定margin-top(1em=22px)が残っていて見出しが本家より22px下がるため打ち消す。
   本家.dlb_subtitle3_02はmargin-top:0。.qbd-office-nameは全拠点と会社案内で共有していて
   サイズ差(22px対24px)・margin-bottom差(12px対20px)も残っているので、そちらを共有部品側で
   直すときはこの行専用の打ち消しは不要になる(2026-08-20判断 / QBD_WEB-172) */
.qbd-office-entry--logistics .qbd-office-name { margin-top: 0; }
.qbd-office-entry--logistics .qbd-office-img { width: 100%; height: auto; margin-bottom: 0; }
@media (max-width: 690px) {
  .qbd-table th { width: auto; }
  .qbd-table th, .qbd-table td { display: block; }
  /* 沿革のスマホ幅は本家実測(2026-08-20 / 375px / QBD_WEB-101):
     年号セル=padding 15px 12px 8px・罫線なし(先頭行だけ上罫線1px #ebebeb)、
     本文セル=padding 0 12px 15px・下罫線1px #ebebeb のみ。塗りは無い */
  .qbd-history-table th { width: auto; border-width: 0; border-style: none; padding: 15px 12px 8px; }
  .qbd-history-table tr:first-child th { border-top: 1px solid #ebebeb; }
  .qbd-history-table td { border-width: 0 0 1px; border-style: none none solid; padding: 0 12px 15px; }
  .qbd-office-entry { grid-template-columns: 1fr; gap: 16px; }
  .qbd-office-entry--logistics { grid-template-columns: 1fr; }
}

/* よくある質問(faq): 現行 dlb_content-32 相当のQ&Aブロック */
.qbd-faq-item + .qbd-faq-item { margin-top: var(--space-40); }
.qbd-faq-q { display: flex; align-items: center; }
.qbd-faq-a { display: flex; align-items: flex-start; margin-top: 16px; }
/* 本家.dlb_initials実測(2026-07-23): margin:0(pタグ既定マージンはリセットされている)。
   qbd-faq-qはalign-items:centerで隠れていたが、qbd-faq-aはflex-startのため既定マージン分だけ
   Aの四角が下にずれ、QとAの間が離れて/高さがずれて見える不具合だった */
.qbd-faq-mark { flex: 0 0 auto; width: 50px; height: 50px; margin: 0 16px 0 0; display: flex; align-items: center; justify-content: center; border: 2px solid var(--color-primary); font-weight: 700; font-size: 20px; line-height: 1; }
.qbd-faq-q .qbd-faq-mark { background: var(--color-primary); color: #fff; }
.qbd-faq-a .qbd-faq-mark { color: var(--color-primary); }
.qbd-faq-q-txt { min-width: 0; font-weight: 700; font-size: 18px; line-height: 1.6; color: var(--color-text); }
.qbd-faq-a-txt { min-width: 0; line-height: 1.6; color: var(--color-primary); }
.qbd-faq-q-txt p, .qbd-faq-a-txt p { margin: 0; }
@media (max-width: 690px) {
  .qbd-faq-mark { width: 30px; height: 30px; font-size: 18px; margin-right: 12px; }
}

/* ==========================================================================
   下層ページ: 2カラムレイアウト＋セクション別サイドナビ
   ========================================================================== */
/* 本家 #contents 実測(2026-07-14): 幅94%・max1120px・左右paddingなし。本文840px+gap40px+サイドバー240px */
.qbd-lower-layout { display: grid; grid-template-columns: minmax(0,1fr) 240px; gap: 40px; width: 94%; max-width: var(--content-inner); margin: 0 auto; padding: var(--space-60) 0 var(--space-100); }
.qbd-lower-main { min-width: 0; }
.qbd-lower-aside { }
/* サイドバー(セクション内ナビ): 本家 #subnav 実測(2026-07-14)。タイトルと項目でhoverの演出が異なる */
.qbd-subnav-title { font-size: 18px; margin: 0; }
.qbd-subnav-title a { display: block; padding: 15px 40px; text-align: center; color: var(--color-primary); text-decoration: none; border-top: 2px solid var(--color-primary); border-bottom: 1px solid var(--color-border); transition: 0.2s; }
/* タイトルhover: 黒背景+白文字(本家実測 rgb(19,24,26)) */
.qbd-subnav-title a:hover { background: rgb(19, 24, 26); color: #fff; }
.qbd-subnav-list { list-style: none; margin: 0; padding: 0; }
.qbd-subnav-list li { position: relative; }
/* 各項目の左に2px×高さ50%のアクセントバー(区切り線は無し) */
.qbd-subnav-list li::before { content: ""; position: absolute; left: 0; top: 25%; width: 2px; height: 50%; background: var(--color-primary-light); }
.qbd-subnav-list a { display: block; padding: 10px 25px 10px 18px; color: var(--color-text); text-decoration: none; transition: 0.2s; }
/* 項目hover: 淡teal背景+light teal文字。カレント項目は常時淡teal背景(文字色は変えない) */
.qbd-subnav-list a:hover { color: var(--color-primary-light); background: var(--color-card-link-bg); }
.qbd-subnav-list .is-current > a { background: var(--color-card-link-bg); }
@media (max-width: 979px) {
  .qbd-lower-layout { grid-template-columns: 1fr; gap: 32px; }
}
/* 本家 #contents.inner はmax-width:690pxで幅94%→90%に縮小する(本CSSの94%指定は
   デスクトップ実測のみを反映しており、この縮小が漏れていた)。90%固定のままだと
   本文幅が本家より広くなり、幅100%指定の画像(ヒーロー/サービス行/図解)が
   軒並み本家より大きく表示されていた [QBD_WEB-84] */
/* gapは本家実測(2026-08-18 / 375px / QBD_WEB-163): 本文カラム下端からサイドバー上端まで40px
   (本家は#contents_rightのmargin-top)。691〜979pxのタブレット幅は対象外のため
   979px以下の32pxはそのまま残す */
@media (max-width: 690px) {
  .qbd-lower-layout { width: 90%; gap: 40px; }
}

/* ==========================================================================
   下層ページ: about — セクション見出し・リード文
   ========================================================================== */
/* aboutページ内のh2は左揃え(2カラムmain内なので中央揃え不要) */
/* 帯の見た目は共通の.qbd-h2-bandに移管。ここではセクション間の上マージンのみ
   (本家実測2026-07-15: 商圏分析上・ご注文の流れ上とも直前コンテンツから100px) */
.qbd-about-section-h2 { margin-top: var(--space-100); }
.qbd-about-section-lead { font-size: 16px; line-height: 30.4px; color: var(--color-text); margin-bottom: var(--space-40); }

/* ==========================================================================
   下層ページ: about — 商圏分析フロー(bunflow)
   ========================================================================== */
/* 商圏分析3ステップ(本家template_c2.css .bunflow実測2026-07-15)。
   吹き出し(head)と本体を親グリッドの2行に直接配置し、3列の高さを揃える
   (=本家の「〇〇したいの下部がそろっている」状態。itemはdisplay:contentsで透過) */
.qbd-bunflow { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 30px; row-gap: 30px; margin-bottom: 70px; }
.qbd-bunitem { display: contents; }
.qbd-bunitem--01 > * { grid-column: 1; }
.qbd-bunitem--02 > * { grid-column: 2; }
.qbd-bunitem--03 > * { grid-column: 3; }
.qbd-bunhead { grid-row: 1; position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; background: var(--color-card-link-bg); color: var(--color-text); border-radius: 10px; padding: 30px 20px; font-size: 16px; font-weight: 500; line-height: 1.9; text-align: center; }
.qbd-bunhead p { margin: 0; width: 100%; }
.qbd-bunhead::after { content: ""; position: absolute; bottom: -20px; left: calc(50% - 12px); width: 0; height: 0; border-style: solid; border-width: 20px 12px 0; border-color: var(--color-card-link-bg) transparent transparent; }
.qbd-bunbody { grid-row: 2; position: relative; padding: 30px 25px; color: #fff; font-size: 14px; line-height: 1.9; }
/* 3列のアクセント色(teal/緑/ピンク)は本家template_c2.cssの固定値。このブロック専用色のためトークン化しない */
.qbd-bunitem--01 .qbd-bunbody { background: var(--color-primary); }
.qbd-bunitem--02 .qbd-bunbody { background: rgb(99, 156, 110); }
.qbd-bunitem--03 .qbd-bunbody { background: rgb(239, 125, 171); }
/* 1・2列目のみ右向き矢印の突起 */
.qbd-bunitem--01 .qbd-bunbody::after, .qbd-bunitem--02 .qbd-bunbody::after { content: ""; position: absolute; right: -20px; top: calc(50% - 12px); width: 0; height: 0; border-style: solid; border-width: 12px 0 12px 20px; }
.qbd-bunitem--01 .qbd-bunbody::after { border-color: transparent transparent transparent var(--color-primary); }
.qbd-bunitem--02 .qbd-bunbody::after { border-color: transparent transparent transparent rgb(99, 156, 110); }
.qbd-bunimg { display: block; width: auto; height: 50px; margin: 0 auto 8px; }
.qbd-buntitle { position: relative; text-align: center; font-size: 24px; font-weight: 600; color: #fff; margin: 0 0 30px; }
.qbd-buntitle::after { content: ""; position: absolute; bottom: -10px; left: calc(50% - 15px); width: 30px; height: 3px; background: #fff; }
.qbd-bunlead { text-align: center; font-size: 18px; font-weight: 500; line-height: 1.7; color: #fff; margin: 0 0 20px; }
.qbd-bunbody > p:last-child { font-size: 14px; line-height: 1.9; color: #fff; margin: 0; }
@media (max-width: 690px) {
  /* スマホは本家.bunflow実測に合わせ、吹き出し(head)を55%幅で右寄せし本体(body)に-20pxで食い込ませる */
  .qbd-bunflow { display: block; }
  .qbd-bunitem { display: block; margin-bottom: 20px; }
  .qbd-bunitem:last-child { margin-bottom: 0; }
  .qbd-bunhead { width: 55%; margin: 0 5% -20px auto; padding: 15px 20px; font-size: 13px; position: relative; z-index: 2; }
  .qbd-bunbody { padding-top: 40px; }
  .qbd-bunitem--01 .qbd-bunbody::after, .qbd-bunitem--02 .qbd-bunbody::after { right: auto; top: auto; left: calc(20% - 20px); bottom: -40px; border-width: 40px 20px 0 20px; }
  .qbd-bunitem--01 .qbd-bunbody::after { border-color: var(--color-primary) transparent transparent transparent; }
  .qbd-bunitem--02 .qbd-bunbody::after { border-color: rgb(99, 156, 110) transparent transparent transparent; }
}

/* ==========================================================================
   下層ページ: about — 図1/図2 2カラム
   ========================================================================== */
/* 既存 .qbd-about-analysis-row は max-width:840px / margin:var(--space-100) auto 0 で定義済み。
   2カラムmain内ではmax-widthを解除し、colの定義を補完する。 */
.qbd-about-analysis-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: var(--space-60); }
.qbd-about-col { }
.qbd-about-col-lead { font-size: 14px; line-height: 1.8; color: var(--color-text); margin: 0 0 12px; }
.qbd-about-col figure { margin: 0; }
.qbd-about-col img { width: 100%; height: auto; }
@media (max-width: 690px) {
  .qbd-about-analysis-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   下層ページ: about — ご注文の流れ 4ステップ
   ========================================================================== */
/* 本家dlb-flow_area_1実測(2026-07-15): 枠=薄teal1px、左に幅120pxの薄グレー箱、
   Stepは横書き18px bold teal+下に16x2pxダッシュ。2枚目以降は箱の上に▼、カード間40px */
.qbd-flow-area { display: flex; align-items: center; border: 1px solid var(--color-primary-light); margin: 0; }
.qbd-flow-area + .qbd-flow-area { margin-top: 40px; }
.qbd-flow-item { background: rgb(245, 248, 248); width: 120px; flex-shrink: 0; align-self: stretch; display: flex; align-items: center; justify-content: center; position: relative; padding: 16px 8px; }
.qbd-flow-area + .qbd-flow-area .qbd-flow-item::before { content: ""; position: absolute; top: -30px; left: calc(50% - 12px); width: 0; height: 0; border-style: solid; border-width: 20px 12px 0; border-color: var(--color-primary) transparent transparent; }
.qbd-flow-num { position: relative; font-size: 18px; font-weight: 700; letter-spacing: .1em; color: var(--color-primary); margin: 0 0 30px; }
.qbd-flow-num::after { content: ""; position: absolute; bottom: -15px; left: calc(50% - 8px); width: 16px; height: 2px; background: var(--color-primary); }
.qbd-flow-txt { padding: 24px; flex: 1; line-height: 1.9; color: var(--color-text); }
.qbd-flow-title { font-size: 20px; font-weight: 700; color: var(--color-primary); margin: 0 0 10px; line-height: 1.4; }
.qbd-flow-list { list-style: disc; padding-left: 1.4em; margin: 8px 0; }
.qbd-flow-list li { font-size: 16px; line-height: 1.9; }
.qbd-flow-sub { margin: 0 0 12px; }
/* 本文(.qbd-flow-txt)は文字サイズ指定なし=bodyの16px継承。本家実測でも
   タイトル(.qbd-flow-title)以外の本文・出荷/配送業務・注記は幅にかかわらず一貫して16px [QBD_WEB-84] */
.qbd-flow-note { color: var(--color-text); margin-top: 8px; }
@media (max-width: 690px) {
  /* 本家.dlb-flow_area_1実機実測(getComputedStyle): Stepラベルは全幅ヘッダー帯だが背景・中央寄せは維持し、
     カード間の▼矢印(::before)も非表示にしない。本文が下に積まれる点のみ変わる */
  .qbd-flow-area { flex-wrap: wrap; position: relative; }
  .qbd-flow-item { width: 100%; max-width: 100%; padding: 12px 18px; }
  .qbd-flow-num { margin: 0; }
  .qbd-flow-num::after { display: none; }
  .qbd-flow-txt { display: block; width: 100%; padding: 25px 20px; }
  .qbd-flow-title { font-size: 19.2px; }
}

/* ==========================================================================
   下層ページ: about — 取り扱いメーカーボタン
   ========================================================================== */
.qbd-about-maker-btn { margin-top: var(--space-60); text-align: center; }
.qbd-about-maker-btn .qbd-btn-primary { display: inline-block; padding: 14px 60px; }
@media (max-width: 690px) {
  /* 本家.dlb_btnはpadding:12px 10%(%指定)+スマホで幅100%+左寄せ+右10%位置に矢印アイコン。
     固定60pxパディングだと折り返すため追従し、矢印アイコンも実測(border製シェブロン45度回転)で追加 */
  .qbd-about-maker-btn .qbd-btn-primary { display: block; width: 100%; padding: 12px 10%; text-align: left; position: relative; }
  .qbd-about-maker-btn .qbd-btn-primary::before { content: ''; position: absolute; right: 10%; top: calc(50% - 4px); width: 6px; height: 6px; border-style: solid; border-width: 2px 2px 0 0; border-color: currentColor; transform: rotate(45deg); }
}

/* ==========================================================================
   下層ページ: about — サービスカード余白
   ========================================================================== */
.qbd-about-service { margin: 0 0 var(--space-50); }
.qbd-about-service--last { margin-bottom: var(--space-80); }
/* 画像は本家同様line449の固定293x191のまま(以前ここでwidth:100%に相対指定していたが、
   本家は2カラムmain内でも293px固定のため、上書きすると本家より大きく表示されていた) [QBD_WEB-84] */
@media (max-width: 690px) {
  /* 本家 br.pc/tab 相当: モバイルでは改行を無効化 */
  .qbd-pc-tab { display: none; }
}

/* ==========================================================================
   下層ページ: maker(取り扱いメーカー)
   ========================================================================== */
/* 7項目アンカーナビ: 3列折り返し(本家 menu_btn_331 相当: PC/タブレット3列→690pxで1列) */
.qbd-page-nav--grid ul { flex-wrap: wrap; }
.qbd-page-nav--grid li { flex: 0 0 calc((100% - 16px) / 3); }

/* セクション見出しはh2帯(本家 subtitle02)。間隔は本家実測(2026-07-16):
   前セクション末尾→帯100px、アンカーナビ最終行→最初の帯88px、帯直下のリード文の下マージン30px */
.qbd-maker-section { margin-top: var(--space-100); }
.qbd-page-nav + .qbd-maker-section { margin-top: 88px; }
.qbd-maker-section .qbd-lower-intro { margin-bottom: 30px; }

/* ブランド2カラムグリッド(本家 col2_m_221 相当: PC/タブレット2列→690pxで1列) */
.qbd-maker-grid { display: flex; flex-wrap: wrap; }
.qbd-maker-item { width: calc(50% - 20px); margin-right: 40px; }
.qbd-maker-item:nth-child(2n) { margin-right: 0; }
.qbd-maker-item:nth-child(n+3) { margin-top: 40px; }
/* ブランド名見出し(本家 dlb_subtitle4_02 相当: 20px/左ボーダー) */
.qbd-maker-name { font-family: var(--font-heading); font-size: 20px; font-weight: 500; color: var(--color-primary); line-height: 1.4; margin: 0 0 15px; padding-left: 12px; border-left: 3px solid var(--color-primary-light); }
.qbd-maker-name a { color: var(--color-primary); text-decoration: none; }
.qbd-maker-name a:hover { text-decoration: underline; }
.qbd-maker-figure { margin: 0; }
.qbd-maker-figure img { width: 100%; height: auto; display: block; }
/* ブランドロゴリンク: hoverで画像を減光(トランジションなし=即時は本家実測2026-07-16準拠)。
   減光量は本家0.8だと分かりづらいとのユーザー決定(2026-07-16)で0.6に強調(意図的な現行非踏襲) */
.qbd-maker-figure a:hover img { opacity: 0.6; }
@media (max-width: 979px) {
  .qbd-maker-item { width: calc(50% - 15px); margin-right: 30px; }
}
@media (max-width: 690px) {
  .qbd-page-nav--grid ul { flex-direction: row; }
  .qbd-page-nav--grid li { flex: 0 0 100%; }
  .qbd-maker-item { width: 100%; margin-right: 0; }
  .qbd-maker-item:nth-child(n+2) { margin-top: 30px; }
  .qbd-maker-name { font-size: 18px; }
}

/* ==========================================================================
   下層ページ: inbound 共通(サブタイトル/list_dots/ボタン中央/インラインCTA)
   ========================================================================== */
/* sp専用改行(本家 br.sp 相当): PCで非表示・モバイルで有効 */
.qbd-sp { display: none; }

/* セクション小見出し(本家 subtitle02 相当): 左揃え・tealボーダー下線 */
.qbd-subtitle02 { font-family: var(--font-heading); font-size: 24px; font-weight: 600; line-height: 1.5; letter-spacing: 1px; color: var(--color-primary); text-align: left; margin: 0 0 var(--space-40); padding-bottom: 12px; border-bottom: 2px solid var(--color-primary-light); }

/* 中央寄せボタン行(本家 dlb_btn / w40 mlrauto 相当) */
.qbd-btn-center { text-align: center; margin-top: var(--space-40); }

/* 本文内インラインCTA(本家 dlb_contact_area.block 相当。フッターCTA .qbd-cta とは別系統)
   本家実測 2026-07-28: 背景#EFF4F4 / 枠線1px solid #63939C / padding 30px 10px。
   直前ブロックとの間隔は本家が前要素のmargin-bottom(PC60px/スマホ30px)で作っているが、
   こちらは直前sectionにmargin-bottomが無いためCTA側のmargin-topで同値を再現する */
.qbd-inline-cta { background: #eff4f4; border: 1px solid var(--color-primary); padding: 30px 10px; margin-top: 60px; text-align: center; }
/* h2は共通の32pxのまま(本家 .top_title_center_underbar と同値)。下40pxは本家の見出しラッパーmargin-bottom相当。
   色は本家 .dlb_area_1.dlb_contact_area .top_title_center_underbar の#666666(フッターCTAと同じ扱い) */
.qbd-inline-cta .qbd-section-h2 { color: var(--color-text); text-align: center; margin: 0 0 40px; }
.qbd-inline-cta .qbd-section-en { text-align: center; }
/* 電話番号: 本家 .dlb_contact_area.block .dlb_contact_telnum は全幅32px固定(フッターCTAの40px/38pxとは別値) */
.qbd-inline-cta .qbd-cta-tel { margin-top: 5px; }
.qbd-inline-cta .qbd-cta-tel a { font-size: 32px; }
.qbd-inline-cta-hours { font-size: 12.8px; color: var(--color-text); margin: 5px 0 0; }
@media (max-width: 690px) {
  .qbd-subtitle02 { font-size: 20px; }
  .qbd-inline-cta { margin-top: 30px; }
  /* 本家 .dlb_contact_area.block .top_title_center_underbar は22px。letter-spacingは本家が.05em相当 */
  .qbd-inline-cta .qbd-section-h2 { font-size: 22px; letter-spacing: 1.1px; margin-bottom: 20px; }
  .qbd-inline-cta-hours { font-size: 9.6px; }
}

/* ==========================================================================
   下層ページ: inbound(1カラムランディング) — 注意書き + 大型カード4枚
   ========================================================================== */
.qbd-inbound { padding: var(--space-60) 0 var(--space-100); }
.qbd-inbound-notice { text-align: center; margin-bottom: var(--space-80); }
.qbd-inbound-notice p { margin: 0 0 4px; font-size: 16px; line-height: 1.9; }
/* 大型カード: 画像の上にテキストパネルを重ねる(本家dlb_box2-8実測2026-07-16: 画像80%幅+テキストパネル約43%幅が
   256px重なる。パネルはtop/bottom30px内側・カード高さいっぱい。imgr=パネル左/画像右、reverse=パネル右/画像左) */
.qbd-inbound-card { position: relative; margin-bottom: var(--space-80); }
.qbd-inbound-card-img { width: 80%; margin: 0; }
.qbd-inbound-card--imgr .qbd-inbound-card-img { margin-left: auto; }
.qbd-inbound-card--reverse .qbd-inbound-card-img { margin-right: auto; }
.qbd-inbound-card-img img { width: 100%; height: auto; display: block; }
.qbd-inbound-card-text {
  position: absolute; top: 30px; bottom: 30px; width: 43%;
  display: flex; flex-direction: column; justify-content: center;
  background: rgb(249, 249, 249); border: 1px solid #fff; box-shadow: 0 0 20px rgba(0, 0, 0, .1);
  padding: 32px 40px; text-align: center; z-index: 2;
}
.qbd-inbound-card--imgr .qbd-inbound-card-text { left: 0; }
.qbd-inbound-card--reverse .qbd-inbound-card-text { right: 0; }
.qbd-inbound-card-title { font-family: var(--font-heading); font-size: 26px; font-weight: 600; line-height: 1.5; color: var(--color-primary); margin: 0 0 20px; }
.qbd-inbound-card-title a { color: var(--color-primary); }
.qbd-inbound-card-title a:hover { text-decoration: underline; }
.qbd-inbound-card-desc { font-size: 16px; line-height: 1.9; color: var(--color-text); margin: 0 0 24px; }
/* 本家.btn01 a実測(2026-07-24、QBD_WEB-129/130): PC・スマホ問わずメディアクエリ無しの単一ルールで
   width:280px;max-width:100%;display:block;margin:0 auto(ボタン自体を中央揃え)+親div.txt_cの
   text-align:center(ボタン内の文字も中央揃え)。旧コメント「ボタンだけ左揃え」は誤測だったため訂正 */
.qbd-inbound-card-btn { text-align: center; }
.qbd-inbound-card-btn .qbd-btn-primary { display: block; width: 280px; max-width: 100%; margin: 0 auto; text-align: center; }
/* 本家実測(2026-07-24、QBD_WEB-131): 691〜979pxはパネル高さが画像に連動して縮む一方、文字が固定サイズの
   ままだと上下にはみ出る。本家はcommon.cssでパネルをwidth:420px;padding:16px 24pxに広げ(自テーマは43%幅の
   ままだと狭すぎ折り返し行数が増える)、template_c2.cssでtitle/desc文字をvw単位で画面幅に応じて縮小している */
@media (max-width: 979px) {
  .qbd-inbound-card-text { width: 420px; max-width: 90%; padding: 16px 24px; }
  .qbd-inbound-card-title { font-size: 2.4vw; margin-bottom: 10px; }
  .qbd-inbound-card-desc { font-size: 1.8vw; }
  .qbd-inbound-card-btn .qbd-btn-primary { font-size: 1.8vw; }
}
@media (max-width: 690px) {
  /* 本家#contents.inner実測(2026-07-24): 690px以下はwidth:90% */
  .qbd-inbound .qbd-inner { width: 90%; }
  /* 本家dlb_box2-8実測(2026-07-24): 690px以下はカード全体(画像+テキスト)にshadowが移り、
     テキストパネル自体のborder/paddingはデスクトップと別値(32px 24px)で維持されボーダーも残る */
  .qbd-inbound-card { display: flex; flex-direction: column; gap: 20px; box-shadow: 0 0 20px rgba(0, 0, 0, .1); }
  /* max-width/font-sizeは691〜979px用@media(このブロックより前)の値が残らないよう明示的に打ち消す */
  .qbd-inbound-card-text { position: static; top: auto; bottom: auto; width: 100%; max-width: none; box-shadow: none; border: 1px solid #fff; padding: 32px 24px; order: 2; }
  .qbd-inbound-card-img { width: 100%; order: 1; margin: 0; }
  .qbd-inbound-card-title { font-size: 22px; margin-bottom: 20px; }
  .qbd-inbound-card-desc { font-size: 16px; }
  .qbd-inbound-card-btn .qbd-btn-primary { font-size: 16px; }
  .qbd-sp { display: inline; }
}

/* ==========================================================================
   下層ページ: salon — リード(list_dots) + 4枚組
   ========================================================================== */
.qbd-salon-intro { margin-bottom: var(--space-60); font-size: 16px; line-height: 1.9; }
.qbd-salon-intro p { margin: 0 0 16px; }
/* 本家実測(2026-07-16): マーカーは「・」の文字(丸ドットではない)、色は本文と同じ */
.qbd-list-dots { list-style: none; margin: 16px 0; padding: 0; }
.qbd-list-dots li { font-size: 16px; line-height: 1.9; }
.qbd-list-dots li::before { content: "・"; color: var(--color-text); }
/* 4枚組は本家実測どおり2x2配置(1x4ではない) */
.qbd-salon-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 40px; text-align: center; }
/* 本家実測(2026-07-16): 画像は255x255の実サイズのまま列内で中央寄せ(列幅いっぱいに拡大しない) */
.qbd-salon-col-img { margin: 0 0 16px; }
.qbd-salon-col-img img { width: 255px; height: 255px; max-width: 100%; object-fit: cover; margin: 0 auto; }
.qbd-salon-col-title { font-family: var(--font-heading); font-size: 18px; font-weight: 700; color: var(--color-primary); margin: 0 0 8px; line-height: 1.5; }
.qbd-salon-col-desc { font-size: 14px; line-height: 1.8; color: var(--color-text); margin: 0; }
.qbd-salon-closing { font-size: 16px; line-height: 1.9; color: var(--color-text); margin-top: var(--space-40); }
/* 本家.col2_m_221実測(2026-07-24、QBD_WEB-103): 690px以下は.col:width:100%で1カラム化(2x2のまま崩れない) */
@media (max-width: 690px) {
  .qbd-salon-cols { grid-template-columns: 1fr; gap: 30px 0; }
}

/* ==========================================================================
   下層ページ: use_dealer/change_dealer — メリットカード(本家 dlb_content-56)
   ========================================================================== */
.qbd-merit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }
/* 本家dlb_c56_box実測(2026-07-22再実測): 枠なし・背景色#FCFCFC。2番目/3番目のカードのみ#F8F8F8のチェック柄 */
.qbd-merit-box { background: #FCFCFC; padding: 30px; }
.qbd-merit-box:nth-child(2), .qbd-merit-box:nth-child(3) { background: #F8F8F8; }
/* 本家dlb_c56_titlearea実測(2026-07-22): ヘッダーは塗り背景ではなくflex横並び。番号バッジのみtaal塗り、タイトルはteal文字色 */
.qbd-merit-head { display: flex; align-items: center; margin: 0 0 15px; }
/* 本家dlb_content-56 .dlb_c56_num実測(2026-07-22再実測、color_blockdl.cssの上書きが正): padding 10px 5px */
.qbd-merit-num { font-size: 13px; line-height: 1; background: var(--color-primary); color: #fff; border-radius: 4px; width: 80px; text-align: center; padding: 10px 5px; margin: 0 16px 0 0; }
.qbd-merit-title { font-family: var(--font-heading); font-size: 18px; font-weight: 700; color: var(--color-primary); margin: 0; line-height: 1.6; }
.qbd-merit-txt p { margin: 0; font-size: 15px; line-height: 1.9; color: var(--color-text); }
@media (max-width: 690px) {
  .qbd-merit-grid { grid-template-columns: 1fr; }
  .qbd-merit-box { padding: 20px; }
  .qbd-merit-head { flex-wrap: wrap; }
  .qbd-merit-num { font-size: 12px; width: 50px; margin: 0 0 10px; }
}

/* ==========================================================================
   下層ページ: use_dealer — フォロー(本家 dlb_box2-3) 画像+見出し+本文
   ========================================================================== */
/* 本家実測(2026-07-22再実測): 見出しは画像とは別列扱いにせず、本文と同じ列(qbd-box23-body)にまとめる */
.qbd-box23 { display: grid; grid-template-columns: 293px 1fr; column-gap: 24px; align-items: start; margin-bottom: var(--space-40); }
.qbd-box23-img { grid-column: 1; grid-row: 1; margin: 0; }
.qbd-box23-img img { width: 293px; max-width: 100%; height: auto; }
.qbd-box23-body { grid-column: 2; grid-row: 1; }
.qbd-box23-title { font-family: var(--font-heading); font-size: 22px; font-weight: 500; color: var(--color-primary); padding: 2px 0 2px 15px; border-left: 3px solid var(--color-primary-light); margin: 0 0 16px; }
.qbd-box23-txt p { margin: 0; font-size: 15px; line-height: 1.9; color: var(--color-text); }
/* 本家dlb_box2-3-ti実測(2026-07-22): 2番目のブロックは画像/文章が左右反転(ジグザグ配置) */
.qbd-box23--reverse { grid-template-columns: 1fr 293px; }
.qbd-box23--reverse .qbd-box23-img { grid-column: 2; }
.qbd-box23--reverse .qbd-box23-body { grid-column: 1; }
@media (max-width: 690px) {
  .qbd-box23 { grid-template-columns: 1fr; }
  .qbd-box23-img { grid-column: 1; grid-row: 1; }
  .qbd-box23-body { grid-column: 1; grid-row: 2; margin-top: 12px; }
  .qbd-box23-img img { width: 100%; }
  /* 実機実測(2026-07-28): --reverse修飾子のgrid-column指定(詳細度0,2,0)が単列リセットより優先されてしまうため明示的に上書き */
  .qbd-box23--reverse .qbd-box23-img { grid-column: 1; }
  .qbd-box23--reverse .qbd-box23-body { grid-column: 1; }
}

/* ==========================================================================
   下層ページ: change_dealer — 横3ステップフロー(矢印区切り, 本家 dlb-flow_area_3)
   ========================================================================== */
.qbd-flow3 { display: flex; align-items: stretch; gap: 0; }
.qbd-flow3-item { flex: 1; border: 1px solid var(--color-border); display: flex; flex-direction: column; }
.qbd-flow3-title { background: var(--color-primary); color: #fff; padding: 14px 12px; text-align: center; }
.qbd-flow3-title p { margin: 0; font-family: var(--font-heading); font-size: 18px; font-weight: 700; line-height: 1.4; }
.qbd-flow3-txt { padding: 16px; flex: 1; }
.qbd-flow3-txt p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--color-text); }
.qbd-flow3-arr { flex: 0 0 28px; align-self: center; width: 0; height: 0; border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-left: 14px solid var(--color-primary-light); margin: 0 7px; }
@media (max-width: 690px) {
  .qbd-flow3 { flex-direction: column; }
  .qbd-flow3-arr { align-self: center; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 14px solid var(--color-primary-light); border-bottom: 0; margin: 7px 0; }
}

/* ==========================================================================
   下層ページ: change_dealer — オススメ商品の mediaカード(静的・非リンク)
   ========================================================================== */
.qbd-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.qbd-media-card { border: 1px solid var(--color-border); background: var(--color-bg); display: flex; flex-direction: column; }
/* サムネの高さ上限はQBD_WEB-174、切り取らずに収めるのはQBD_WEB-180。上限=自身の幅(max-height:100cqw)。
   詳細は.qbd-post-row-thumbのコメント */
.qbd-media-img { margin: 0; position: relative; container-type: inline-size; }
/* 本家実測(2026-07-23): 固定高さ+クロップではなく、縦横比を保ったまま幅いっぱいに縮小。
   上限に当たった縦長も切り取らない(object-fit:contain / QBD_WEB-180) */
.qbd-media-img img { width: 100%; height: auto; max-height: 100cqw; object-fit: contain; display: block; transition: opacity 0.2s; }
/* アイキャッチ未設定の記事用。.qbd-thumb-phの既定はheight:100%だが、このfigureは高さを持たない
   ため文字1行分に潰れる。トップのおすすめ枠(.qbd-recommend-slide)と同じ180pxを与える */
.qbd-media-img .qbd-thumb-ph { height: 180px; }
/* 本家 a:hover img{opacity:.8} / a:hover{color:#9EC4C8} 実測(2026-07-23): カード全体がリンクのため
   hoverで画像が薄くなり、色指定のない本文(抜粋)がteal文字になる。タイトルは個別に色指定済みのため変化しない */
.qbd-media-card:hover .qbd-media-img img { opacity: .8; }
.qbd-media-card:hover .qbd-media-excerpt { color: var(--color-primary-light); }
.qbd-media-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.qbd-media-date { font-family: var(--font-display); font-size: 13px; color: var(--color-primary-light); }
/* 本家.mediatitle実測(2026-07-23): 文字色は#666666(グレー)。teal色ではない */
/* 体裁は本家実測(2026-08-19 / 1280px / QBD_WEB-170): 18px・太さ500・行高28.8px(1.6)・字間0.9px(.05em) */
.qbd-media-title { font-family: var(--font-heading); font-size: 18px; font-weight: 500; color: #666; line-height: 1.6; letter-spacing: .05em; margin: 0; }
.qbd-media-excerpt { font-size: 13px; line-height: 1.8; color: var(--color-text); margin: 0; }
/* 本家dlb_media_cate実測(2026-07-23再実測): カテゴリタグは画像下端に重ねるteal塗りの帯。
   right:0固定+幅は画像いっぱいまでで、1行に収まる間は右寄せ、収まらない画面幅では折り返して左寄せになる。
   本家は折り返して2行になっても画像への重なりは常に8pxで固定(bottom基準ではなくtop基準で
   配置し、行が増えた分は下方向にはみ出す)。bottom基準だと行数が増えるほど重なりが深くなり
   ズレるため、top: calc(100% - 8px) で画像下端から8px上の位置に固定する。
   帯全体に薄teal背景を敷き、バッジ間の隙間もその色で埋まるようにする */
.qbd-media-cate { display: flex; flex-wrap: wrap; gap: 6px; position: absolute; right: 0; top: calc(100% - 8px); max-width: 100%; background: var(--color-card-link-bg); }
.qbd-media-cate-item { font-size: 12px; line-height: 1.2; color: #fff; background: var(--color-primary); padding: 4px 8px; white-space: nowrap; flex-shrink: 0; }
.qbd-media-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.qbd-media-tag { font-size: 11px; color: #fff; background: var(--color-primary); padding: 2px 8px; }
/* 本家col3_m_331実測(2026-07-23): 979px以下でも2カラム化はせず3カラムのまま。690px以下で直接1カラムになる */
@media (max-width: 690px) {
  .qbd-media-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   下層ページ: recruit — 見出し(本家 dlb_subtitle3_02 / subtitle03)・人物像2カラム・バナー
   ========================================================================== */
/* h3 左ボーダー見出し(本家 dlb_subtitle3_02 相当) */
.qbd-subtitle3 { font-family: var(--font-heading); font-size: 24px; font-weight: 500; line-height: 1.4; color: var(--color-primary); margin: 0 0 20px; padding: 2px 0 2px 15px; border-left: 3px solid var(--color-primary-light); }
/* h3 丸ポチ見出し(本家 subtitle03 相当) */
.qbd-subtitle03 { position: relative; font-family: var(--font-heading); font-size: 22px; font-weight: 500; line-height: 1.4; color: var(--color-primary); margin: 0 0 10px; padding-left: 20px; }
.qbd-subtitle03::before { content: ""; position: absolute; left: 0; top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary-light); }
/* 求める人物像リード */
.qbd-recruit-lead { font-size: 16px; line-height: 1.9; color: var(--color-text); margin: 0 0 var(--space-40); }
/* 人物像カード: テキスト+画像の2カラム(本家 col2_m_221, img_l=画像左)
   本家実測(2026-08-20 / 1280px / QBD_WEB-173): .col2_m_221はdisplay:flex+flex-wrap:wrapのみで
   align-items未指定(computed normal)。画像列は行の高さまで伸び、画像は列の上端に置かれるため
   見出しと画像の上端が揃う。align-items:centerだと画像が41〜72px下がるので指定しない */
.qbd-recruit-row { display: flex; gap: 40px; margin-bottom: var(--space-50); }
.qbd-recruit-row:last-child { margin-bottom: 0; }
.qbd-recruit-row--imgl { flex-direction: row-reverse; }
.qbd-recruit-col-text { flex: 1; }
.qbd-recruit-col-text p { font-size: 16px; line-height: 1.9; color: var(--color-text); margin: 0; }
.qbd-recruit-col-img { flex: 1; margin: 0; }
.qbd-recruit-col-img img { width: 100%; height: auto; }
/* 中途/新卒の本文・バナー */
.qbd-lower-section .qbd-subtitle03 + p { font-size: 16px; line-height: 1.9; color: var(--color-text); margin: 0 0 16px; }
.qbd-recruit-banner { margin: 0 0 var(--space-50); }
.qbd-recruit-banner img { display: block; height: auto; }
@media (max-width: 690px) {
  .qbd-subtitle3 { font-size: 20px; }
  .qbd-subtitle03 { font-size: 18px; }
  /* 縦積み時にテキスト列を幅いっぱいにするためのstretch(本家も幅いっぱい) [QBD_WEB-92]。
     QBD_WEB-173でデスクトップ側のalign-items:centerを外したため引き継ぎは無くなったが、
     .qbd-recruit-rowの既定値に依存しないよう明示は残す */
  .qbd-recruit-row, .qbd-recruit-row--imgl { flex-direction: column; align-items: stretch; gap: 20px; }
}
/* お知らせ一覧(全幅)
   本家(https://www.qbdo.co.jp/news.html)実測(2026-07-23, getComputedStyle代替としてCSS実測):
   - 日付(.rss_date): 個別のcolor指定なし → bodyのcolor #666666 を継承
   - タイトルリンク(.rss_title a): color: #63939C(= --color-primary)
   - 1件目の項目にも他の項目と同じく上下に罫線が入るよう、区切り線はqbd-news-page(見出し帯直後、40px余白の位置)ではなく
     qbd-news-page-listの上端(1件目に隣接する位置)に付ける。色は既存の行間ボーダー(#e5e5e5)と統一 */
.qbd-news-page { padding: var(--space-40) 0; }
.qbd-news-page-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #e5e5e5; }
.qbd-news-page-item { display: flex; gap: 1.5em; align-items: baseline; padding: 1em 0; border-bottom: 1px solid #e5e5e5; }
/* 日付フォントサイズ: 本家.rss_dateはcolor同様font-sizeも個別指定なし(本文と同じ16px)と
   スマホ幅computed style diffで判明(QBD_WEB-109、2026-07-27)。従来の.9em(14.4px)縮小指定は本家に無い差異のため撤去 */
.qbd-news-page-item time { color: var(--color-text); white-space: nowrap; }
/* タイトルhover: 本家.rss_title a実測(2026-07-23)。通常teal(#63939C=--color-primary)→hoverで薄teal(#9EC4C8=--color-primary-light)+下線。
   下線はcolor.css/template_c2.cssのa:hover、遷移(.2s ease)はbase.css `a{transition:all .2s ease 0s}`由来。
   ホームページ側お知らせウィジェット.qbd-news-title(268-270行)と同じ変数・値で揃える */
.qbd-news-page-item a { color: var(--color-primary); transition: all 0.2s ease; }
.qbd-news-page-item a:hover { color: var(--color-primary-light); text-decoration: underline; }
/* タップ時ハイライト(QBD_WEB-109): 本家は全<a>共通で-webkit-tap-highlight-color:rgba(0,0,0,.3)が効き、
   タップ時にタイトル文字が一瞬白っぽくなるが、2026-07-27ユーザー判断により現行非踏襲(対応不要)とする */
.qbd-news-empty { padding: 2em 0; }
.qbd-news-empty { padding: 2em 0; }
/* 並び替え「新しい順|古い順」
   本家 .newold 実測(2026-08-17 / 1280px / QBD_WEB-152): 幅100%・右寄せ・16px/30.4px・
   rgb(102,102,102)で、下に15pxの余白。見出しの30px下に置かれ、その15px下から記事一覧が始まる。
   現在の並び順はテキストのまま、もう一方がrgb(158,196,200)のリンク(下線なし) */
.qbd-newold { margin: 0 0 15px; font-size: 16px; line-height: 30.4px; text-align: right; color: #666; }
.qbd-newold a { color: rgb(158, 196, 200); text-decoration: none; }
.qbd-newold a:hover { text-decoration: underline; }
/* ページネーション
   本家 .pager 実測(2026-08-17 / 1280px / QBD_WEB-151の修正8):
   右寄せ・下に15pxの余白。数字リンクは28×33px・13px/24.7px・padding4px 10px・罫線なしで
   背景#f5f5f5・文字rgb(158,196,200)。表示中のページだけ塗りと文字色が反転し、左右に5pxの余白が付く。
   送りは「次へ >>」(71×33px)。お知らせ一覧(page-news.php)も同じ部品を使う。
   本家は枠にfont-size:0を当てて項目間の余白を消し、枠の高さを項目の高さそのままにしている */
.qbd-pagination { display: block; margin: 0 0 15px; text-align: right; font-size: 0; line-height: 0; }
.qbd-pagination .page-numbers { display: inline-block; padding: 4px 10px; border: 0; background: #f5f5f5; color: rgb(158, 196, 200); font-size: 13px; line-height: 24.7px; text-decoration: none; }
/* 表示中のページは本家がspanのままdisplay:inline(高さが行送りで決まり、リンクより低い) */
.qbd-pagination .current { display: inline; margin: 0 5px; background: rgb(158, 196, 200); color: #fff; }
@media (max-width: 690px) {
  /* 本家.rss_box実測(2026-07-27、QBD_WEB-108): .qbd-innerはmax-width中央寄せのみで
     左右%指定が無く、690px以下で左右余白が0(edge-to-edge)になっていた */
  .qbd-news-page { width: 90%; }
  .qbd-news-page-item { flex-direction: column; gap: .2em; }
}
/* 区分アーカイブの記事一覧(おすすめ商品一覧・カテゴリ別一覧・タグ別一覧で共用)
   本家 #dcms_layoutPageBlock > article 実測(2026-08-17 / 1280px / QBD_WEB-151の修正1〜3):
   1件1行で幅840px・padding16px・1pxの#ddd罫線・下に16pxの余白。内側806pxを
   サムネ27%(218px)と情報70%(564px)で分け、あいだの3%(24px)が余白になる。
   本家はfigureをfloat:left・sectionをfloat:rightで組んでいるが、当テーマは同じ寸法になるflexで実装する。
   サムネの高さは原寸の縦横比のまま可変で、切り抜かない(実測90〜326px) */
.qbd-post-row { display: flex; align-items: flex-start; justify-content: space-between; box-sizing: border-box; padding: 16px; border: 1px solid #ddd; margin: 0 0 16px; }
/* サムネの高さ上限: 高さが幅を超えたところで打ち止めにする(縦長画像対策 / QBD_WEB-174)。
   container-type:inline-sizeでこのfigureをコンテナにし、max-height:100cqw(=自身の幅)を上限にする。
   固定pxだと幅が可変(PC 218px / スマホ103px)なので上限が追随しない。
   aspect-ratioで正方形に固定する案は、横長画像まで高くなる(実測218x118→218x218)ため採らない。
   実測(2026-08-20 / 1280px): 横長0.54=218x118のまま、正方形=218x218のまま、縦長1.9=413px→218px

   上限を超えた分は切り取らずに全体を収める(object-fit:contain / QBD_WEB-180)。商品写真の上下が
   切れるのは商品紹介として損なので、切り取るcoverから切り替えた(ユーザー決定 2026-08-21)。
   記事詳細のカバー画像(.qbd-single-thumb)がすでにcontainなので、これで一覧側と挙動が揃う。
   実測(2026-08-21 / ローカル): 縦長158x300は枠218x218(スマホ103x103)に全体が入り左右に余白、
   正方形300x300は218x218のまま、横長800x300は218x82でcover/containとも同一・行の高さも不変。
   aspect-ratio:4/3で枠を固定する案は行が218px→163pxに低くなり正方形まで縮むため採らない */
.qbd-post-row-thumb { flex: 0 0 27%; margin: 0; container-type: inline-size; }
.qbd-post-row-thumb a { display: block; }
.qbd-post-row-thumb img { display: block; width: 100%; height: auto; max-width: 100%; max-height: 100cqw; object-fit: contain; }
.qbd-post-row-info { flex: 0 0 70%; }
/* 日付は本家だと11px・行高11pxの黒。タイトルの上に置く */
.qbd-post-row-date { display: block; font-size: 11px; line-height: 11px; color: #000; }
.qbd-post-row-title { font-size: 20px; font-weight: 700; line-height: 28px; letter-spacing: 1px; color: #666; margin: 8px 0 24px; }
.qbd-post-row-title a { color: inherit; text-decoration: none; }
.qbd-post-row-title a:hover { text-decoration: underline; }
/* サムネが無い投稿のプレースホルダはカードと違い高さの基準が無いので、本家のサムネ最小(90px)に寄せる */
.qbd-post-row-thumb .qbd-thumb-ph { height: 90px; }
.qbd-thumb-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: #f0f0f0; color: #b0b0b0; font-family: var(--font-heading); font-size: 13px; letter-spacing: .12em; }
/* 区分索引サイドバー
   本家 #contents_right .side 実測(2026-08-07 / 1280px / QBD_WEB-147):
   ブロック間15px、見出しは幅240px・高さ40px・薄teal帯rgb(158,196,200)・白17.6px・中央、
   リストはpadding20px 15px・左右下に1pxの#eee罫線(上辺は帯が兼ねる) */
.qbd-tax-index-group { margin: 0 0 15px; }
.qbd-tax-index-h { height: 40px; line-height: 40px; margin: 0; padding: 0; text-align: center; background: rgb(158, 196, 200); color: #fff; font-size: 17.6px; font-weight: 400; }
.qbd-tax-index-list { list-style: none; margin: 0; padding: 20px 15px; border-width: 0 1px 1px; border-style: solid; border-color: #eee; }
.qbd-tax-index-list li { display: inline-block; }
.qbd-tax-index-list a { display: block; text-decoration: none; font-size: 13px; line-height: 15.6px; }
/* カテゴリ: tealのバッジ */
.qbd-tax-index-list-cat li { margin: 2px 2px 2px 0; }
.qbd-tax-index-list-cat a { padding: 5px 13px; border-radius: 2px; background: rgb(99, 147, 156); color: #fff; }
/* タグ: #マークつきのテキストリンク。本家は10pxのシャープ画像(icon_sharp.png)で、ここは文字で近似 */
.qbd-tax-index-list-tag li { margin: 0 10px 6px 0; }
.qbd-tax-index-list-tag a { position: relative; padding-left: 15px; color: rgb(158, 196, 200); }
.qbd-tax-index-list-tag a::before { content: "#"; position: absolute; left: 0; top: 0; font-size: 12px; line-height: 15.6px; }
/* ブロック下端の全件表示ボタン
   本家 #contents_right .side > a.btn 実測(2026-08-17 / 1280px / QBD_WEB-147の7番):
   240×57.39px・padding13px 16px・border 0 1px 1px の#eee・背景#fafafa・16px/30.4pxのrgb(158,196,200)。
   上辺の罫線はリスト側の下辺が兼ねる。矢印はspanの::before(4px角をrotate45degした山カッコ) */
.qbd-tax-index-btn { display: block; position: relative; box-sizing: border-box; padding: 13px 16px; border-width: 0 1px 1px; border-style: solid; border-color: #eee; background: rgb(250, 250, 250); color: rgb(158, 196, 200); font-size: 16px; font-weight: 400; line-height: 30.4px; text-align: center; text-decoration: none; }
.qbd-tax-index-btn > span { position: relative; }
.qbd-tax-index-btn > span::before { content: ""; position: absolute; left: -14px; top: 50%; margin-top: -3px; width: 4px; height: 4px; border-width: 2px 2px 0 0; border-style: solid; border-color: rgb(158, 196, 200); transform: rotate(45deg); }
/* 全件表示ボタンの遷移先(?archives=on)で本文上部に出すターム一覧
   本家 .archivelist .list 実測(2026-08-17): 下に20pxの余白、項目はmargin5px・padding5px 15px・
   1pxの#f5f5f5罫線・角丸3px・12px/16.8px・#555。表示中のタームだけ白文字+rgb(255,199,50) */
/* 上部一覧の見出し。本家 #contents_left > h1.fs120_bold.m30 実測(2026-08-17) */
.qbd-archivelist-h { margin: 0 0 30px; font-size: 19.2px; font-weight: 700; line-height: 36.48px; letter-spacing: .96px; color: #666; }
.qbd-archivelist { margin: 0 0 20px; }
.qbd-archivelist a { display: inline-block; margin: 5px; padding: 5px 15px; border: 1px solid #f5f5f5; border-radius: 3px; font-size: 12px; font-weight: 400; line-height: 16.8px; color: #555; text-decoration: none; }
.qbd-archivelist a.is-current { background: rgb(255, 199, 50); color: #fff; }
/* 一覧まわりのスマホ幅
   本家実測(2026-08-18 / 375px / QBD_WEB-161):
   本家は690px以下でも横並びを保ち、比率だけ 27%/70%/3% から 34%/62%/4% に振り替える
   (blog_layout.css `article .post_thumbnail{width:34%}` / `article .info{width:62%}`)。
   従来ここに入れていた縦積みの簡易フォールバックは、本家に無い体裁だったので撤去した。
   タイトルは18px・行高25.2px・上下margin6pxへ縮む(同 `article .info .title`)。
   一覧見出しh1は本家が .fs120_bold を使っており、layout.cssの690px以下で120%→100%(=16px)に落ちる。
   ?archives=on のターム一覧は項目のpaddingが 5px 15px→5px 10px、枠の下余白が20px→10pxになる
   (同 `.archivelist{margin-bottom:10px}` / `.archivelist .list a{padding:5px 10px}`) */
@media (max-width: 690px) {
  .qbd-post-row-thumb { flex: 0 0 34%; }
  .qbd-post-row-info { flex: 0 0 62%; }
  .qbd-post-row-title { margin: 6px 0; font-size: 18px; line-height: 25.2px; letter-spacing: .9px; }
  .qbd-archivelist-h { font-size: 16px; line-height: 30.4px; letter-spacing: .8px; }
  .qbd-archivelist { margin-bottom: 10px; }
  .qbd-archivelist a { padding: 5px 10px; }
}
/* 個別投稿
   本家 article#main 実測(2026-08-07 / 1280px / QBD_WEB-147):
   本文カラム840pxに対しpadding16px+1pxの#ddd罫線で、記事の内容は17px内側の806px幅から始まる */
.qbd-single { padding: 16px; border: 1px solid #ddd; margin: 0 0 16px; }
.qbd-single-title { font-size: 25.6px; font-weight: 700; line-height: 1.9; letter-spacing: .05em; color: #666; margin: 0 0 20px; }
.qbd-single-date { font-size: 14px; line-height: 1.9; color: #555; margin: 0 0 10px; }
/* カテゴリ・タグのバッジ列(本家は日付の直下)。項目は高さ22px・padding5px 12px・間隔5px。
   一覧の行(.qbd-post-row-terms)も同じ体裁なので相乗りする(QBD_WEB-151の修正2)。
   文字色は本家がrgb(245,245,245)。QBD_WEB-147では#fffで実装していたので本家に合わせた */
.qbd-single-termlist,
.qbd-post-row-terms { display: flex; flex-wrap: wrap; }
.qbd-single-termlist a,
.qbd-post-row-terms a { display: block; position: relative; margin: 0 5px 5px 0; padding: 5px 12px; font-size: 12px; font-weight: 700; line-height: 12px; color: #f5f5f5; text-decoration: none; }
.qbd-single-termlist-cat a,
.qbd-post-row-terms-cat a { background: rgb(99, 147, 156); }
.qbd-single-termlist-tag a,
.qbd-post-row-terms-tag a { background: rgb(204, 204, 204); }
/* 記事送り
   本家 ul#nextprev 実測(2026-08-17 / 1280px / QBD_WEB-148の実装1):
   幅840px・高さ30.4px・margin 24px 0 56px。「< 前の記事」を左端、「次の記事 >」を右端に置き、
   リンクは16px/30.4pxの太字rgb(102,102,102)で下線なし。端の記事では片方だけ出る。
   本家はli.prevをfloat:left・li.nextをfloat:rightで組んでいるが、同じ配置になるflexで実装する */
.qbd-post-nav { display: flex; justify-content: space-between; list-style: none; margin: 24px 0 56px; padding: 0; font-size: 16px; line-height: 30.4px; }
.qbd-post-nav-next { margin-left: auto; }
.qbd-post-nav a { color: #666; font-weight: 700; text-decoration: none; }
.qbd-post-nav a:hover { text-decoration: underline; }
/* 関連記事
   本家 div#relation 実測(2026-08-17 / 1280px / QBD_WEB-148の実装2):
   枠はmargin 40px 0 0。見出しは24px太字・letter-spacing1.2px・padding-bottom10px+3pxの#eee下線・
   下margin24px。カードは2列(各49%・間2%・行間24px)で、内部はサムネ35%+情報60%(間5%)。
   日付は11pxのrgb(119,119,119)でmargin-top-5px、タイトルは14px太字・行高26.6px・margin-top3px */
.qbd-related { margin: 40px 0 0; }
.qbd-related-h { margin: 0 0 24px; padding: 0 0 10px; border-bottom: 3px solid #eee; font-size: 24px; font-weight: 700; line-height: 24px; letter-spacing: 1.2px; color: #666; }
.qbd-related-list { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 2%; row-gap: 24px; }
.qbd-related-card a { display: flex; align-items: flex-start; justify-content: space-between; text-decoration: none; color: inherit; }
/* サムネの高さ上限はQBD_WEB-174、切り取らずに収めるのはQBD_WEB-180。上限=自身の幅(max-height:100cqw)。
   詳細は.qbd-post-row-thumbのコメント */
.qbd-related-thumb { flex: 0 0 35%; margin: 0; container-type: inline-size; }
.qbd-related-thumb img { display: block; width: 100%; height: auto; max-height: 100cqw; object-fit: contain; }
.qbd-related-thumb .qbd-thumb-ph { height: 60px; }
.qbd-related-body { flex: 0 0 60%; }
.qbd-related-date { display: block; margin: -5px 0 0; font-size: 11px; line-height: 20.9px; color: #777; }
.qbd-related-title { margin: 3px 0 0; font-size: 14px; font-weight: 700; line-height: 26.6px; color: #666; }
/* 記事ページのスマホ幅
   本家実測(2026-08-18 / 375px / QBD_WEB-162):
   記事タイトルは本家が .fs160_bold を使っており、layout.cssの690px以下で160%→140%(=22.4px)に落ちる。
   行高と字間はここでは指定しない。基底が line-height:1.9 / letter-spacing:.05em の相対値なので、
   font-sizeを変えるだけで本家と同じ42.56px / 1.12pxになる。
   関連記事は690px以下で1列になり、カードの下余白が24px→15pxへ。タイトルの上margin3pxも0になる
   (blog_layout.css `#relation article{float:none;width:100%;margin-bottom:15px}` /
    `.relationlist .txt{margin-top:0}`) */
@media (max-width: 690px) {
  .qbd-single-title { font-size: 22.4px; }
  .qbd-related-list { grid-template-columns: 1fr; row-gap: 15px; }
  .qbd-related-title { margin-top: 0; }
}
/* サイドバーの「記事検索」
   本家 div.blog_search 実測(2026-08-18 / 1280px / QBD_WEB-149):
   枠は240×52px・2pxの#eee罫線・下margin24px。中は入力欄82%+ボタン18%(いずれも高さ48px)で、
   82%/18%と入力欄のpadding 4%は幅236px(240-罫線4px)に対する比率。本家はfloatで並べているが
   当テーマはflexにする(相対位置は同じ)。
   ボタンは本家と同じく背景画像+text-indentで value を隠す。アイコンは本家の
   icon_search.png(白の虫眼鏡)を持ち込まず、既存のicon_mail.svg等と同じ流儀で自作した
   assets/images/icon_search.svg を使う(QBD_WEB-147の「他サイトの画像素材を持ち込まない」判断と同じ) */
.qbd-blog-search { display: flex; box-sizing: border-box; border: 2px solid #eee; margin: 0 0 24px; }
/* min-width:0 が無いとflexの自動最小サイズ(input本来の幅)で82%を下回れず、
   入力欄が218.88pxに広がって枠からはみ出す(2026-08-18に実機で確認) */
.qbd-blog-search-txt { flex: 0 0 82%; min-width: 0; box-sizing: border-box; height: 48px; padding: 0 4%; border: 0; background: #fff; font-size: 16px; line-height: 36px; color: #666; }
/* padding・font-size・colorは隠したvalueにしか効かないが、本家と同値にして機械diffを0件にする */
.qbd-blog-search-btn { flex: 0 0 18%; box-sizing: border-box; height: 48px; padding: 0; border: 0; font-size: 16px; color: #666; text-indent: -9999px; cursor: pointer; background-color: rgb(158, 196, 200); background-image: url("../images/icon_search.svg"); background-size: 24px; background-position: 50% 50%; background-repeat: no-repeat; }

/* サイドバーの「おすすめ記事」
   本家 #contents_right .side + ul.reco 実測(2026-08-17 / 1280px / QBD_WEB-148の実装3):
   枠は幅240px・下margin15px。見出しの帯はカテゴリ・タグと同じなので .qbd-tax-index-h を流用。
   リストはmargin 20px 0 0、各項目は下margin10pxで、サムネ35%+情報62%(間3%)。
   情報は12px太字・行高15.6pxのrgb(102,102,102) */
.qbd-reco { margin: 0 0 15px; }
.qbd-reco-list { list-style: none; margin: 20px 0 0; padding: 0; }
.qbd-reco-list li { margin: 0 0 10px; }
.qbd-reco-list a { display: flex; align-items: flex-start; justify-content: space-between; text-decoration: none; color: inherit; }
/* サムネの高さ上限はQBD_WEB-174、切り取らずに収めるのはQBD_WEB-180。上限=自身の幅(max-height:100cqw)。
   詳細は.qbd-post-row-thumbのコメント */
.qbd-reco-thumb { flex: 0 0 35%; margin: 0; container-type: inline-size; }
.qbd-reco-thumb img { display: block; width: 100%; height: auto; max-height: 100cqw; object-fit: contain; }
.qbd-reco-thumb .qbd-thumb-ph { height: 35px; }
.qbd-reco-info { flex: 0 0 62%; margin: 0; font-size: 12px; font-weight: 700; line-height: 15.6px; color: #666; }
/* カバー画像。本家は横806px・縦は元画像の比のまま(上限なし)。
   縦の上限420pxとobject-fit:containは現行非踏襲(QBD_WEB-147の修正8。お客様確認の対象) */
.qbd-single-thumb { margin: 25px 0 40px; }
/* カバー画像の高さ上限は420pxから320pxへ(2026-08-20判断 / QBD_WEB-174)。縦長1.9の画像は
   806x420(描画221x420)から806x320(描画168x320)になる。object-fit:containはQBD_WEB-133の
   中央寄せの解消根拠なので維持する(切らずに左右へ余白を出す) */
.qbd-single-thumb img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: contain; }
.qbd-single-body { line-height: 1.9; margin: 0 0 40px; }
/* QBD_SHOW_PRODUCT_LINKがfalseのあいだ未使用。掲載再開時に使うため残す(QBD_WEB-157) */
.qbd-single-productlink { margin: 1.5em 0 0; }
/* SNSシェアボタン(X / Facebook / はてな)
   本家 blog_layout.css の .sns_share 実測(2026-08-20 / QBD_WEB-165):
   ulはmargin-top:16px・flex・align-items:center、liはmargin-right:10px。
   上部(.head)はpadding-top:15pxでmargin-topを打ち消し、下部(.foot)はmargin-top:35px・
   padding-top:20px・上罫線1px(色は本家color.cssで#ddd)。
   690px以下で非表示になるのは一覧ページ側(article .info .sns_share)だけなので、
   記事詳細はスマホでも出す。スマホでFacebookのliだけ-5px上げるのも本家どおり */
.qbd-share { display: flex; align-items: center; list-style: none; margin: 16px 0 0; padding: 0; }
.qbd-share li { margin: 0 10px 0 0; }
.qbd-share-head { margin-top: 0; padding-top: 15px; }
.qbd-share-foot { margin-top: 35px; padding-top: 20px; border-top: 1px solid #ddd; }
@media (max-width: 690px) {
  .qbd-share li.qbd-share-fb { margin-top: -5px; }
}

/* ==========================================================================
   下層ページ: privacy / sitemap(1カラム静的ページ)
   ========================================================================== */
.qbd-static-page { padding: var(--space-60) 0 var(--space-100); }
.qbd-static-intro { font-size: 16px; line-height: 1.9; color: var(--color-text); margin: 0 0 40px; }
.qbd-static-section { margin: 0 0 50px; }
.qbd-static-section:last-child { margin-bottom: 0; }
.qbd-static-section p { font-size: 16px; line-height: 1.9; color: var(--color-text); margin: 0 0 10px; }
/* 番号リスト(本家list_decimal相当) */
.qbd-list-decimal { margin: 0; padding: 0; }
.qbd-list-decimal li { list-style-type: decimal; margin-left: 20px; font-size: 16px; line-height: 1.9; color: var(--color-text); }
/* サイトマップ(本家#sitemap相当。赤シェブロン+子階層インデント) */
.qbd-sitemap { list-style: none; margin: 0; padding: 0; }
.qbd-sitemap li { margin: 10px 0; padding: 0 0 0 15px; list-style-type: none; position: relative; font-size: 16px; line-height: 1.9; }
.qbd-sitemap li::before { content: ""; width: 4px; height: 4px; border-top: 2px solid #CA062B; border-right: 2px solid #CA062B; transform: rotate(45deg); position: absolute; top: 12px; left: 0; }
/* リンク文字色(QBD_WEB-113): 本家実測(2026-07-27)は階層問わずrgb(51,51,51)固定。
   本家footer(footer.template_c2)のfnav_titleと同じ見た目に見えるが、実際はsitemap本文側の別マークアップで
   footerのスコープ付きセレクタは効かず、素の<a>(継承色rgb(102,102,102))のままだった */
.qbd-sitemap li a { color: rgb(51, 51, 51); }
/* マウスオーバー時下線(QBD_WEB-110): 本家はグローバルa:hoverで下線が付くが、本テーマは
   a:hoverの下線復帰ルールが無いためサイトマップ限定で追加 */
.qbd-sitemap li a:hover { text-decoration: underline; }
.qbd-sitemap ul { list-style: none; margin: 0; padding: 0 0 5px 25px; }
.qbd-sitemap ul li { margin: 5px 0; }
/* 左右余白(QBD_WEB-113、2026-07-27diff): 本家は#sitemap(privacy/sitemap共通コンテナ)がスマホ幅で90%中央寄せ
   (337.5px/375px)だが、.qbd-static-pageには.qbd-news-page等と同じ90%指定が無く、edge-to-edgeになっていた */
@media (max-width: 690px) {
  .qbd-static-page { width: 90%; }
}

/* ==========================================================================
   スマホ: 見出し帯下の余白を全ページ30pxへ統一(QBD_WEB-128)
   ==========================================================================
   本家実測(2026-07-27、375px): 見出し帯下端〜本文最初の要素は全ページ30px。
   本家はコンテナpaddingではなく#pagetitle自身のmargin-bottom:30px(template_c2.css、
   max-width:979px)で作っており、直後の要素のmargin-topは隣接兄弟のマージン相殺で
   吸収される。本テーマはコンテナのpadding-top方式のため相殺が効かず、先頭要素の
   margin-topが加算されて60〜80pxに膨らんでいた(pの既定margin16px・先頭セクション
   補正20px・サイトマップli 10px・記事詳細の日付p 14.4px)。
   本家と同じmargin方式への変更は.qbd-lower-layoutがdisplay:grid(グリッドは
   マージン相殺しない)のため不可。よってスマホ幅だけpadding-topを30pxへ上書きし、
   上乗せ分のmargin-topを個別に打ち消す。PC・タブレット幅の表示は変更しない。
   お知らせ一覧は本家がタブUIで構造が異なるため、コンテナ上端(=リストの罫線位置)を
   30pxに合わせる(日付テキストは罫線1px+項目padding16pxの下に来る)。 */
@media (max-width: 690px) {
  .qbd-lower-layout { padding-top: 30px; }
  .qbd-lower { padding-top: 30px; }
  .qbd-static-page { padding-top: 30px; }
  .qbd-news-page { padding-top: 30px; }
  /* 土台30pxに上乗せされていた先頭要素のmargin-topを打ち消す */
  .qbd-lower-main > .qbd-lower-intro:first-child { margin-top: 0; }
  .qbd-lower-main > .qbd-lower-section:first-child { margin-top: 0; }
  .qbd-sitemap > li:first-child { margin-top: 0; }
  .qbd-single-date { margin-top: 0; }
}