/*
Theme Name: 小山石材 SWELL Child
Description: 真心工房 小山石材 — SWELLカスタム子テーマ。オレンジ×モスグリーンの和モダンデザイン。
Author: 真心工房 小山石材
Template: swell
Version: 1.0.0
*/

/* =============================================
   デザイントークン
============================================= */
:root {
  --c-orange:        #d94e18;
  --c-orange-light:  #e8703e;
  --c-orange-pale:   #fdf3ef;
  --c-green:         #3b5c45;
  --c-green-pale:    #edf2ee;
  --c-stone:         #888c86;
  --c-stone-light:   #d0d3cc;
  --c-stone-pale:    #f5f5f3;
  --c-cream:         #fafaf8;
  --c-ink:           #1a1c19;
  --c-ink-mid:       #4a4e48;

  --f-serif: 'Noto Serif JP', 'Yu Mincho', '游明朝', serif;
  --f-sans:  'Noto Sans JP', 'Hiragino Kaku Gothic Pro', sans-serif;
}

/* =============================================
   ベース
============================================= */
body {
  font-family: var(--f-sans) !important;
  color: var(--c-ink) !important;
  background: #fff !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: var(--f-serif) !important;
  font-weight: 300 !important;
  letter-spacing: 0.04em !important;
  color: var(--c-ink) !important;
  line-height: 1.45 !important;
}

p, li, td, th, label, input, textarea, select {
  font-family: var(--f-sans) !important;
  line-height: 1.85 !important;
}

a { color: var(--c-orange); transition: color 0.2s, opacity 0.2s; }
a:hover { color: var(--c-orange-light); }

/* =============================================
   ヘッダー
============================================= */
#site-header,
.l-header {
  background: rgba(255,255,255,0.97) !important;
  backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid var(--c-stone-light) !important;
  box-shadow: none !important;
}

/* ロゴ左のオレンジライン */
.p-siteLogo,
.c-siteLogo {
  position: relative;
  padding-left: 14px !important;
}
.p-siteLogo::before,
.c-siteLogo::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 26px;
  background: var(--c-orange);
  border-radius: 1px;
}

/* サイト名テキスト */
.p-siteLogo__name,
.c-siteLogo__name {
  font-family: var(--f-serif) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--c-ink) !important;
  letter-spacing: 0.06em !important;
}

/* グローバルナビ */
.p-headerNav__item > a,
.l-headerNav__item > a,
.p-globalNav__item > a {
  font-size: 13px !important;
  color: var(--c-ink-mid) !important;
  letter-spacing: 0.06em !important;
  font-weight: 400 !important;
  font-family: var(--f-sans) !important;
  transition: color 0.2s !important;
}
.p-headerNav__item > a:hover,
.l-headerNav__item > a:hover,
.p-globalNav__item > a:hover {
  color: var(--c-orange) !important;
}

/* ナビ内CTAボタン（お問い合わせ等） */
.p-headerNav__item.is-btn > a,
.l-headerNav__item.is-btn > a,
.p-headerNav__item--cta > a {
  background: var(--c-orange) !important;
  color: #fff !important;
  padding: 8px 18px !important;
  border-radius: 2px !important;
  font-size: 13px !important;
}
.p-headerNav__item.is-btn > a:hover,
.l-headerNav__item.is-btn > a:hover {
  background: var(--c-orange-light) !important;
  color: #fff !important;
}

/* ヘッダー電話番号 */
.p-headerTel,
.l-headerTel {
  font-family: var(--f-serif) !important;
  font-size: 16px !important;
  color: var(--c-ink) !important;
  letter-spacing: 0.04em !important;
}
.p-headerTel__icon { color: var(--c-orange) !important; }

/* モバイルメニューボタン */
.p-hamburgerBtn span,
.c-hamburgerBtn span {
  background: var(--c-ink) !important;
}
.p-spMenu,
.c-spMenu {
  background: var(--c-ink) !important;
}
.p-spMenu a,
.c-spMenu a {
  color: rgba(255,255,255,0.85) !important;
  font-family: var(--f-sans) !important;
  font-size: 15px !important;
}
/* スマホメニューのアクセントバー */
.p-spMenu__title,
.c-spMenu__title {
  background: var(--c-orange) !important;
  font-weight: 500 !important;
}

/* =============================================
   ボタン全般
============================================= */
.c-btn,
.wp-block-button__link,
.c-btn--primary,
input[type="submit"],
button[type="submit"],
.p-contactForm__submit {
  background: var(--c-orange) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 2px !important;
  font-family: var(--f-serif) !important;
  letter-spacing: 0.08em !important;
  transition: background 0.25s, transform 0.2s !important;
}
.c-btn:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background: var(--c-orange-light) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

/* アウトラインボタン */
.c-btn--outline {
  background: transparent !important;
  border: 1px solid var(--c-orange) !important;
  color: var(--c-orange) !important;
}
.c-btn--outline:hover {
  background: var(--c-orange) !important;
  color: #fff !important;
}

/* LINEボタン（クラス指定時） */
.c-btn--line {
  background: #06c755 !important;
}
.c-btn--line:hover {
  background: #05b34c !important;
}

/* =============================================
   メインコンテンツ
============================================= */
.l-siteMain,
#main {
  background: #fff;
}

/* 投稿・固定ページ本文 */
.p-articleBody,
.entry-content,
.wp-block-post-content {
  font-size: 16px;
  line-height: 1.9;
  color: var(--c-ink-mid);
}

/* 見出しの装飾 */
.p-articleBody h2,
.entry-content h2 {
  font-family: var(--f-serif) !important;
  font-size: clamp(20px, 2.5vw, 28px) !important;
  font-weight: 300 !important;
  color: var(--c-ink) !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--c-stone-light) !important;
  margin-top: 48px !important;
  margin-bottom: 24px !important;
}
.p-articleBody h2::before,
.entry-content h2::before {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: var(--c-orange);
  margin-bottom: 10px;
}

.p-articleBody h3,
.entry-content h3 {
  font-family: var(--f-serif) !important;
  font-size: clamp(17px, 2vw, 22px) !important;
  font-weight: 400 !important;
  color: var(--c-ink) !important;
  border-left: 3px solid var(--c-orange) !important;
  padding-left: 14px !important;
  margin-top: 36px !important;
  margin-bottom: 16px !important;
}

/* 強調 */
.p-articleBody strong,
.entry-content strong {
  color: var(--c-ink) !important;
  font-weight: 500 !important;
}

/* 引用 */
blockquote {
  border-left: 3px solid var(--c-orange) !important;
  background: var(--c-orange-pale) !important;
  padding: 20px 24px !important;
  font-family: var(--f-serif) !important;
  font-size: 16px !important;
  color: var(--c-ink) !important;
  font-weight: 300 !important;
}

/* リスト */
.p-articleBody ul li::marker,
.entry-content ul li::marker {
  color: var(--c-orange) !important;
}

/* テーブル */
.wp-block-table td,
.wp-block-table th {
  border-color: var(--c-stone-light) !important;
}
.wp-block-table th {
  background: var(--c-stone-pale) !important;
  font-family: var(--f-serif) !important;
  font-weight: 400 !important;
  color: var(--c-ink) !important;
}

/* =============================================
   SWELLのCTAブロック
============================================= */
.wp-block-swell-blocks-cta,
.swl-block-cta {
  background: var(--c-orange-pale) !important;
  border-left: 3px solid var(--c-orange) !important;
}

/* =============================================
   SWELLのFAQブロック
============================================= */
.wp-block-swell-blocks-faq .c-faq__q,
.swl-block-faq .c-faq__q {
  background: var(--c-stone-pale) !important;
  color: var(--c-ink) !important;
  font-family: var(--f-sans) !important;
}
.wp-block-swell-blocks-faq .c-faq__q::before,
.swl-block-faq .c-faq__q::before {
  color: var(--c-orange) !important;
  background: var(--c-orange-pale) !important;
}
.wp-block-swell-blocks-faq .c-faq__a::before,
.swl-block-faq .c-faq__a::before {
  color: var(--c-green) !important;
  background: var(--c-green-pale) !important;
}

/* =============================================
   SWELLのラベル・バッジ
============================================= */
.c-catLabel,
.p-cat-labels .c-catLabel {
  background: var(--c-orange) !important;
  color: #fff !important;
  border-radius: 1px !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
}

/* =============================================
   パンくずリスト
============================================= */
.p-breadcrumb,
.c-breadcrumb {
  font-size: 12px !important;
  color: var(--c-stone) !important;
}
.p-breadcrumb a,
.c-breadcrumb a {
  color: var(--c-stone) !important;
}
.p-breadcrumb a:hover,
.c-breadcrumb a:hover {
  color: var(--c-orange) !important;
}

/* =============================================
   ページヘッダー（アーカイブ・固定ページタイトル）
============================================= */
.p-pageHeader,
.l-pageHeader {
  background: var(--c-stone-pale) !important;
  border-bottom: 1px solid var(--c-stone-light) !important;
}
.p-pageHeader__title,
.l-pageHeader__title {
  font-family: var(--f-serif) !important;
  font-weight: 300 !important;
  color: var(--c-ink) !important;
  letter-spacing: 0.06em !important;
}

/* =============================================
   カード（施工事例・ブログ一覧）
============================================= */
.p-postCard,
.c-postCard {
  border: 1px solid var(--c-stone-light) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  transition: box-shadow 0.3s, transform 0.2s !important;
  box-shadow: none !important;
}
.p-postCard:hover,
.c-postCard:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.08) !important;
  transform: translateY(-2px) !important;
}
.p-postCard__title,
.c-postCard__title {
  font-family: var(--f-serif) !important;
  font-weight: 400 !important;
  color: var(--c-ink) !important;
  font-size: 15px !important;
}

/* =============================================
   ページネーション
============================================= */
.c-pagination .current,
.wp-block-query-pagination-numbers .page-numbers.current {
  background: var(--c-orange) !important;
  color: #fff !important;
  border-color: var(--c-orange) !important;
  border-radius: 2px !important;
}
.c-pagination a,
.wp-block-query-pagination-numbers .page-numbers {
  color: var(--c-orange) !important;
  border-color: var(--c-stone-light) !important;
  border-radius: 2px !important;
  transition: background 0.2s !important;
}
.c-pagination a:hover,
.wp-block-query-pagination-numbers .page-numbers:hover {
  background: var(--c-orange) !important;
  color: #fff !important;
  border-color: var(--c-orange) !important;
}

/* =============================================
   フッター
============================================= */
#site-footer,
.l-footer {
  background: #111312 !important;
  color: rgba(255,255,255,0.55) !important;
}

/* フッターウィジェットエリア */
.p-footerContent,
.l-footerContent {
  background: #111312 !important;
  padding-top: 56px !important;
  padding-bottom: 40px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* フッターの見出し */
.p-footerWidget__title,
.widget-title,
#site-footer h2,
#site-footer h3 {
  font-family: var(--f-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  color: rgba(255,255,255,0.85) !important;
  border: none !important;
  padding: 0 0 12px !important;
  margin-bottom: 16px !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

/* フッターリンク */
#site-footer a {
  color: rgba(255,255,255,0.5) !important;
  transition: color 0.2s !important;
  font-size: 13px !important;
}
#site-footer a:hover {
  color: rgba(255,255,255,0.9) !important;
}

/* フッターテキスト */
#site-footer p,
#site-footer li {
  color: rgba(255,255,255,0.5) !important;
  font-size: 13px !important;
  line-height: 1.8 !important;
}

/* コピーライトバー */
.p-footerCopyright,
.l-footerCopyright {
  background: #0c0e0c !important;
  color: rgba(255,255,255,0.3) !important;
  font-size: 11px !important;
  border-top: none !important;
  padding: 16px 0 !important;
}
.p-footerCopyright a {
  color: rgba(255,255,255,0.3) !important;
}

/* フッターのオレンジライン */
#site-footer::before {
  content: '';
  display: block;
  height: 3px;
  background: var(--c-orange);
}

/* =============================================
   コンタクトフォーム（Contact Form 7）
============================================= */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
.wpcf7-form select {
  border: 1px solid var(--c-stone-light) !important;
  border-radius: 2px !important;
  font-family: var(--f-sans) !important;
  font-size: 15px !important;
  padding: 12px 16px !important;
  width: 100% !important;
  background: #fafafa !important;
  color: var(--c-ink) !important;
  transition: border-color 0.2s !important;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  border-color: var(--c-orange) !important;
  outline: none !important;
  background: #fff !important;
}
.wpcf7-form input[type="submit"] {
  background: var(--c-orange) !important;
  color: #fff !important;
  padding: 14px 40px !important;
  font-family: var(--f-serif) !important;
  font-size: 15px !important;
  letter-spacing: 0.1em !important;
  border: none !important;
  cursor: pointer !important;
  border-radius: 2px !important;
  transition: background 0.2s, transform 0.2s !important;
}
.wpcf7-form input[type="submit"]:hover {
  background: var(--c-orange-light) !important;
  transform: translateY(-1px) !important;
}

/* =============================================
   LP専用ページ（ヘッダーナビ非表示）
   body.page-template-lp に適用
============================================= */
body.page-template-lp .l-headerNav,
body.page-template-lp .p-headerNav {
  display: none !important;
}
body.page-template-lp #site-footer .p-footerContent {
  display: none !important;
}

/* =============================================
   SWELLのFAQブロック：アコーディオン動作
   （構造化データはそのまま維持）
============================================= */

/* 回答を初期非表示 */
.c-faq__item .c-faq__a {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.35s ease, padding 0.3s !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 開いた状態 */
.c-faq__item.is-open .c-faq__a {
  max-height: 800px !important;
  padding-top: 16px !important;
  padding-bottom: 20px !important;
}

/* Q行のホバー */
.c-faq__q {
  transition: background 0.2s !important;
  user-select: none !important;
}
.c-faq__q:hover {
  background: var(--c-stone-pale) !important;
}

/* 開閉矢印 */
.c-faq__q::after {
  content: '▾' !important;
  float: right !important;
  color: var(--c-orange) !important;
  font-size: 14px !important;
  transition: transform 0.3s !important;
  margin-left: 12px !important;
}
.c-faq__item.is-open .c-faq__q::after {
  transform: rotate(180deg) !important;
}

/* =============================================
   スクロールバー
============================================= */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--c-stone-pale); }
::-webkit-scrollbar-thumb { background: var(--c-stone-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-orange); }

/* =============================================
   フォーカスリング
============================================= */
:focus-visible {
  outline: 2px solid var(--c-orange) !important;
  outline-offset: 2px !important;
}