@charset "UTF-8";

/* =========================================
   デザイントークン
   移行前サイトの実際の設定値をそのまま引き継ぐ
   ========================================= */
:root{
--color-brand:#937960;
--color-brand-dark:#7c6552;
--color-gold:#bf975f;
--color-gold-dark:#976f37;
--color-text:#000;
--color-text-sub:#333;
--color-text-mute:#999;
--color-line:#ddd;
--color-bg:#fff;
--color-bg-sub:#f3f3f3;
--color-bg-wash:#f6f6f6;
--color-bg-page:#f9f9f9;
--color-gold-line:#cda435;
--color-line-brand:#00b900;
--color-shop-badge:#4caf6d;
--color-contact-tel:#0ea5e9;
--color-contact-web:#8b5cf6;
--font-base:Arial,"Hiragino Sans","Yu Gothic Medium","游ゴシック Medium",YuGothic,"Meiryo",sans-serif;
--font-serif:"Times New Roman",Times,"Yu Mincho","游明朝","游明朝体","Hiragino Mincho Pro",serif;
--header-height:80px;
--header-height-sp:60px;
--content-width:930px;
--side-cta-width:81px;
--z-header:1000;
--z-side-cta:900;
--z-drawer:2000;
--z-contact-bar:1500;
--contact-bar-height:88px;
}

/* =========================================
   リセット
   ========================================= */
*,
*::before,
*::after{ box-sizing:border-box;}

html{ -webkit-text-size-adjust:100%;}

body,
h1,h2,h3,h4,h5,h6,
p,figure,blockquote,dl,dd{ margin:0;}

ul[class],
ol[class]{ list-style:none; margin:0; padding:0;}

img,
picture,
video{ max-width:100%; height:auto; display:block;}

input,
button,
textarea,
select{ font:inherit; color:inherit;}

button{ background:none; border:none; padding:0; cursor:pointer;}

table{ border-collapse:collapse;}

/* =========================================
   ベース
   ========================================= */
body{ margin:0; padding:var(--header-height) 80px 0; font-family:var(--font-base); font-size:14px; line-height:1.8; color:var(--color-text); background:var(--color-bg); overflow-x:hidden; -webkit-font-smoothing:antialiased;}

a{ color:inherit; text-decoration:none; transition:opacity .2s ease;}

a:hover{ opacity:.6;}

a:focus-visible,
button:focus-visible,
input:focus-visible{ outline:2px solid var(--color-brand); outline-offset:2px;}

.site-main{ display:block;}

.icon{ flex:0 0 auto;}

/* =========================================
   ユーティリティ
   ========================================= */
.u-visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

.skip-link{ position:absolute; left:-9999px; top:0; z-index:9999; padding:12px 20px; background:var(--color-brand); color:#fff;}

.skip-link:focus{ left:0;}

/* スマホでだけ改行する <br class="u-br-sp"> 用 */
.u-br-sp{ display:none;}

/* =========================================
   ヘッダー
   ========================================= */
.header{ position:absolute; top:0; left:0; z-index:var(--z-header); width:100%; height:var(--header-height); background:var(--color-bg);}

.header__inner{ position:relative; height:100%;}

.header__logo{ position:absolute; left:0; top:0; z-index:2; margin:0; height:var(--header-height); font-size:inherit; font-weight:normal;}

.header__logo-link{ display:flex; align-items:center; height:var(--header-height); padding:0 30px;}

.header__logo-link img{ max-height:40px; width:auto;}

/* --- ドロワー開閉ボタン（PCでは非表示） --- */
.header__drawer-toggle{ display:none;}

/* =========================================
   グローバルメニュー
   ========================================= */
/* left:50% を使うと使える幅も残り50%に制限されるため、
   width:max-content で中身の分だけ幅を確保する（メニューの折り返し防止） */
.gnav{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:max-content; height:var(--header-height); z-index:1;}

.gnav__list{ display:flex; height:100%;}

.gnav__list > li{ position:relative;}

.gnav__list > li > a{ display:flex; align-items:center; height:var(--header-height); padding:0 19px; font-size:16px; line-height:1; white-space:nowrap;}

.gnav__list > li.current-menu-item > a,
.gnav__list > li.current-menu-parent > a,
.gnav__list > li.current-menu-ancestor > a{ color:var(--color-brand);}

/* --- サブメニュー --- */
.gnav__list .sub-menu{ position:absolute; top:var(--header-height); left:0; width:250px; background:var(--color-bg-sub); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .2s ease,transform .2s ease,visibility .2s; z-index:100;}

.gnav__list > li:hover .sub-menu,
.gnav__list > li:focus-within .sub-menu{ opacity:1; visibility:visible; transform:translateY(0);}

.gnav__list .sub-menu li{ line-height:1.6;}

.gnav__list .sub-menu a{ display:block; padding:15px 20px 13px; font-size:14px;}

.gnav__list .sub-menu a:hover{ background:rgba(0,0,0,.04); opacity:1;}

/* =========================================
   ヘッダー検索フォーム
   ========================================= */
.header__search{ position:absolute; right:0; top:0; z-index:2;}

.header__search-toggle{ display:flex; align-items:center; justify-content:center; width:var(--header-height); height:var(--header-height); color:var(--color-text);}

.searchform{ display:none; position:absolute; right:0; top:var(--header-height); width:300px; background:var(--color-bg); border:1px solid var(--color-line); box-shadow:0 6px 20px -10px rgba(0,0,0,.3);}

.header__search.is-open .searchform{ display:flex;}

.searchform__input{ flex:1 1 auto; min-width:0; height:50px; padding:0 16px; border:none; background:none; font-size:14px;}

.searchform__submit{ display:flex; align-items:center; justify-content:center; width:50px; height:50px; color:var(--color-text);}

/* =========================================
   サイドCTA（画面右の固定ボタン）
   ========================================= */
.side-cta{ position:absolute; right:0; top:var(--header-height); z-index:var(--z-side-cta);}

.side-cta__link{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:var(--side-cta-width); height:80px; color:var(--color-brand); border-bottom:1px solid var(--color-line); text-align:center;}

.side-cta__link:first-child{ border-top:1px solid var(--color-line);}

.side-cta__link .icon{ margin-bottom:8px;}

.side-cta__label{ font-size:12px; font-weight:600; line-height:1.5;}

/* =========================================
   フッター
   ========================================= */
.footer{ margin-top:80px; padding:60px 0 40px; border-top:1px solid var(--color-line);}

.footer__inner{ width:100%; max-width:var(--content-width); margin:0 auto;}

.footer__list{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px 28px; margin-bottom:50px;}

.footer__list a{ font-size:14px;}

.footer__company-title{ margin-bottom:20px; font-size:18px; font-weight:600; text-align:center;}

.footer__table-wrap{ overflow-x:auto;}

.footer__table{ width:100%; font-size:13px; line-height:1.8;}

.footer__table th,
.footer__table td{ padding:12px 16px; border:1px solid var(--color-line); text-align:left; vertical-align:top;}

.footer__table th{ width:230px; background:var(--color-bg-wash); font-weight:600; white-space:nowrap;}

.footer__copyright{ margin-top:40px; font-size:12px; color:var(--color-text-mute); text-align:center;}

/* =========================================
   ページトップボタン
   ========================================= */
.pagetop{ position:fixed; right:20px; bottom:20px; z-index:800; display:flex; align-items:center; justify-content:center; width:48px; height:48px; background:var(--color-brand); color:#fff; border-radius:50%; opacity:0; visibility:hidden; transition:opacity .3s ease,visibility .3s;}

.pagetop.is-visible{ opacity:1; visibility:visible;}

.pagetop:hover{ opacity:.75;}

/* =========================================
   トップページ：画面下部の固定お問い合わせバー
   電話 ／ LINE ／ WEB の3つ。トップページだけに出す
   ========================================= */
.contact-bar{ position:fixed; left:0; right:0; bottom:0; z-index:var(--z-contact-bar); padding:8px 12px calc(8px + env(safe-area-inset-bottom)); pointer-events:none;}

/* auto-fit にしておくと、非公開のボタンが1つ減っても自動で幅が埋まる */
.contact-bar__inner{ display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr)); gap:10px; max-width:1080px; margin:0 auto; pointer-events:auto; filter:drop-shadow(0 6px 18px rgba(0,0,0,.16));}

.contact-bar__tile{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px; padding:14px 16px; border-radius:16px; background:var(--color-bg); color:var(--color-text); transition:transform .1s ease,box-shadow .3s ease;}

.contact-bar__tile:hover{ opacity:1; transform:translateY(-1px);}

.contact-bar__tile--tel:hover{ box-shadow:0 0 12px var(--color-contact-tel);}

.contact-bar__tile--line:hover{ box-shadow:0 0 12px var(--color-line-brand);}

.contact-bar__tile--web:hover{ box-shadow:0 0 12px var(--color-contact-web);}

.contact-bar__icon{ display:grid; place-items:center; width:32px; height:32px; border-radius:9px; color:#fff;}

.contact-bar__tile--tel .contact-bar__icon{ background:var(--color-contact-tel);}

.contact-bar__tile--line .contact-bar__icon{ background:var(--color-line-brand);}

.contact-bar__tile--web .contact-bar__icon{ background:var(--color-contact-web);}

.contact-bar__title{ display:block; font-size:16px; font-weight:700; line-height:1.2;}

.contact-bar__sub{ display:block; margin-top:2px; color:var(--color-text-mute); font-size:13px; line-height:1.4;}

/* バーがフッターを隠さないよう、トップページだけ下に余白を足す */
.home .footer{ padding-bottom:calc(var(--contact-bar-height) + 40px);}

.home .pagetop{ bottom:calc(var(--contact-bar-height) + 12px);}

/* =========================================
   ドロワーメニュー（スマホ用）
   ========================================= */
.drawer{ position:fixed; top:0; right:0; z-index:var(--z-drawer); width:min(320px,86vw); height:100dvh; padding:0 0 40px; background:var(--color-bg); overflow-y:auto; transform:translateX(100%); transition:transform .3s ease;}

.drawer.is-open{ transform:translateX(0);}

.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:10px 10px 10px 16px; border-bottom:1px solid var(--color-line);}

.drawer__logo img{ max-height:34px; width:auto;}

.drawer__close{ display:flex; align-items:center; justify-content:center; width:44px; height:44px;}

.searchform--drawer{ display:flex; position:static; width:auto; margin:16px; border:1px solid var(--color-line); box-shadow:none;}

.drawer__cta{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin:0 16px 20px; background:var(--color-line);}

.drawer__cta-link{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:14px 6px; background:var(--color-bg); color:var(--color-brand); font-size:12px; font-weight:600;}

.drawer__list li{ border-bottom:1px solid var(--color-line);}

.drawer__list a{ display:block; padding:15px 20px; font-size:15px;}

.drawer__list .sub-menu a{ padding-left:36px; font-size:14px; color:var(--color-text-sub);}

.drawer-overlay{ position:fixed; inset:0; z-index:calc(var(--z-drawer) - 1); background:rgba(0,0,0,.5); opacity:0; transition:opacity .3s ease;}

.drawer-overlay.is-open{ opacity:1;}

/* スマホでドロワーを開いている間は背面をスクロールさせない */
body.is-drawer-open{ overflow:hidden;}

/* =========================================
   共通セクション（トップページ・下層ページで共用）
   ========================================= */
.section{ padding:60px 0; border-bottom:1px solid var(--color-line);}

.section:last-of-type{ border-bottom:none;}

.section__inner{ width:90%; max-width:1000px; margin:0 auto;}

.section__title{ margin:0 0 40px; color:#c9a063; font-family:var(--font-serif); font-size:32px; font-weight:600; line-height:1.7; text-align:center;}

.section__button{ margin-top:40px; text-align:center;}

/* =========================================
   ボタン（旧テーマの .design_button の見た目を再現）
   ========================================= */
.btn{ position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; width:280px; max-width:100%; height:60px; padding:0 1.5em; overflow:hidden; border:1px solid var(--color-brand); border-radius:6px; color:var(--color-brand); font-size:16px; line-height:1.5; text-align:center; transition:color .3s ease,border-color .3s ease;}

.btn::before{ content:""; position:absolute; top:-1px; left:calc(-100% - 110px); z-index:-1; display:block; width:calc(100% + 70px); height:calc(100% + 2px); background:var(--color-brand-dark); transform:skewX(45deg); transition:left .5s cubic-bezier(.22,1,.36,1);}

.btn:hover{ opacity:1; border-color:var(--color-brand-dark); color:#fff;}

.btn:hover::before{ left:-35px;}

/* =========================================
   ヒーロー画像（トップページ）
   ========================================= */
.hero{ height:730px; margin-bottom:45px; overflow:hidden;}

.hero__image{ width:100%; height:100%; object-fit:cover; object-position:center top;}

/* =========================================
   LINE友達追加バナー
   ========================================= */
.line-banner{ padding:30px 20px; text-align:center;}

.line-banner__button{ display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; max-width:400px; padding:15px 20px; border-radius:50px; background:#06c755; box-shadow:0 4px 10px rgba(6,199,85,.3); color:#fff; font-size:16px; font-weight:bold; line-height:1.4; transition:background-color .3s ease,transform .3s ease,box-shadow .3s ease;}

.line-banner__button:hover{ opacity:1; background:#05b34c; transform:translateY(-2px); box-shadow:0 6px 15px rgba(6,199,85,.4);}

/* =========================================
   コンセプト文
   ========================================= */
.concept{ margin:40px 0 0; font-size:16px; letter-spacing:.2rem; line-height:1.8; text-align:center;}

/* =========================================
   買取品目一覧・ブランド買取一覧
   ========================================= */
.genre-list{ display:flex; flex-wrap:wrap; width:80%; max-width:1000px; margin:0 auto;}

.genre-list__item{ display:flex; align-items:center; width:33.3333%; padding:15px; border:1px solid #eee; border-radius:5px; background:var(--color-bg); box-shadow:0 2px 5px rgba(0,0,0,.05); color:var(--color-text-sub); transition:transform .3s ease,box-shadow .3s ease;}

.genre-list__item:hover{ opacity:.8; transform:translateY(-3px); box-shadow:0 5px 10px rgba(0,0,0,.1);}

.genre-list__thumb{ flex:0 0 auto; width:60px; height:60px; margin-right:20px; overflow:hidden; border-radius:50%; background:var(--color-bg-sub);}

.genre-list__thumb img{ width:100%; height:100%; object-fit:cover;}

.genre-list__title{ margin:0; font-size:16px; font-weight:bold; line-height:1.5;}

/* =========================================
   お役立ちコラム一覧（トップページ）
   ========================================= */
.column-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}

.column-list__link{ display:block; color:var(--color-text-sub);}

.column-list__link:hover{ opacity:1;}

.column-list__thumb{ aspect-ratio:3 / 2; overflow:hidden; border-radius:4px; background:var(--color-bg-sub);}

.column-list__thumb img{ width:100%; height:100%; object-fit:cover;}

.column-list__body{ padding:14px 2px 0;}

.column-list__meta{ display:flex; align-items:center; gap:10px; margin-bottom:8px;}

.column-list__cat{ padding:3px 10px; background:#6cbf6c; color:#fff; font-size:12px; font-weight:bold;}

.column-list__date{ color:#666; font-size:13px;}

.column-list__title{ margin:0; font-size:16px; line-height:1.6; transition:color .3s ease;}

.column-list__link:hover .column-list__title{ color:#c9a063;}

/* =========================================
   誘導バナー（初めての方へ／お客様の声）
   ========================================= */
.section--feature{ padding-bottom:0;}

.feature{ display:flex; flex-wrap:wrap;}

.feature__item{ flex:1 1 0%; padding-bottom:80px; color:var(--color-text);}

.feature__item:hover{ opacity:1;}

.feature__item + .feature__item{ border-left:1px solid var(--color-line);}

.feature__thumb{ aspect-ratio:646 / 330; overflow:hidden;}

.feature__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}

.feature__item:hover .feature__thumb img{ transform:scale(1.05);}

.feature__title{ position:relative; top:-80px; left:50%; z-index:10; display:inline-block; min-width:270px; height:80px; margin-bottom:-80px; padding:0 30px; transform:translateX(-50%); background:var(--color-bg); font-family:var(--font-serif); font-size:22px; font-weight:600; line-height:80px; text-align:center; white-space:nowrap;}

.feature__desc{ margin-top:20px; padding:0 80px; line-height:2.4;}

.feature__item .btn{ display:flex; max-width:calc(100% - 160px); margin:28px auto 0;}

.feature__item:hover .btn{ border-color:var(--color-brand-dark); color:#fff;}

.feature__item:hover .btn::before{ left:-35px;}

/* =========================================
   お知らせ一覧（横スクロール）
   旧テーマは splide（37KB）のカルーセル。
   CSSの scroll-snap に置き換えたのでJSは不要。
   ========================================= */
.section--news{ background:#fff9f9;}

.news-list{ display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 40px) / 3); gap:20px; padding-bottom:10px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;}

.news-list__card{ scroll-snap-align:start;}

.news-list__thumb{ display:block; aspect-ratio:465 / 183; overflow:hidden; background:var(--color-bg-sub);}

.news-list__thumb img{ width:100%; height:100%; object-fit:cover;}

.news-list__cat{ display:inline-block; margin-top:12px; padding:3px 10px; border:1px solid var(--color-gold); color:var(--color-gold); font-size:12px; line-height:1.5;}

.news-list__body{ padding-top:10px;}

.news-list__title{ margin:0 0 8px; font-size:16px; line-height:1.6;}

.news-list__date{ color:var(--color-text-mute); font-size:13px;}

/* =========================================
   トップページ：店舗一覧
   （元はここに「アクセス（地図）」があった。
     本番が2026-08-20に店舗一覧へ差し替えたため入れ替えている）
   ========================================= */
.shop-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px;}

.shop-list__item{ display:flex; flex-direction:column;}

.shop-list__thumb{ display:block; aspect-ratio:3 / 2; overflow:hidden; background:var(--color-bg-sub);}

.shop-list__thumb img{ width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .5s ease;}

.shop-list__thumb:hover img{ transform:scale(1.05);}

.shop-list__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:14px 0 8px;}

.shop-list__badge{ display:inline-block; padding:3px 12px; border-radius:2px; background:var(--color-shop-badge); color:#fff; font-size:12.5px; font-weight:600; line-height:1.6;}

.shop-list__hours{ color:var(--color-text-mute); font-size:13px;}

.shop-list__name{ margin:0; font-size:18px; font-weight:700; line-height:1.6;}

.shop-list__name a{ color:var(--color-text);}

.shop-list__name a:hover{ color:var(--color-brand);}

/* =========================================
   下層ページ：ページヘッダー（背景画像つき）
   ========================================= */
.page-header{ position:relative; display:flex; align-items:center; justify-content:center; height:400px; overflow:hidden;}

.page-header__image{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover;}

.page-header::after{ content:""; position:absolute; inset:0; z-index:2; background:rgba(0,0,0,.3);}

/* 買取カテゴリの単体ページ用。高さを抑えた版 */
.page-header--small{ height:160px;}

.page-header--small::after{ background:rgba(0,0,0,.2);}

/* お役立ちコラム系。画像を置かず、旧サイトと同じ高さ85pxの帯にする。
   色はサイトのリンク色 #c91414 を上、それを暗くした #8e1212 を下にした縦グラデーション */
.page-header--plain{ height:85px; background:linear-gradient(180deg,#c91414 0%,#8e1212 100%);}

.page-header--plain::after{ display:none;}

.page-header__catch{ position:relative; z-index:3; margin:0; padding:0 20px; color:#fff; font-family:var(--font-serif); font-size:34px; font-weight:600; line-height:1.6; text-align:center;}

/* =========================================
   下層ページ：シンプル見出し（背景画像なし）
   ========================================= */
.page-title{ margin:0; padding-top:120px; border-top:1px solid var(--color-line); font-family:var(--font-serif); font-size:28px; font-weight:600; line-height:1.5; text-align:center;}

/* =========================================
   パンくずリスト
   旧テーマはアイコンフォントで矢印と家マークを出していたが、
   フォント41KBを廃止したのでCSSで矢印を描き、家マークは文字「ホーム」にした。
   ========================================= */
.breadcrumb{ border-bottom:1px solid var(--color-line); color:var(--color-gold);}

.breadcrumb__list{ display:flex; align-items:center; flex-wrap:wrap; width:min(var(--content-width),calc(100% - 40px)); min-height:60px; margin:0 auto; padding:8px 0; font-size:14px;}

.breadcrumb__item{ display:flex; align-items:center;}

.breadcrumb__item + .breadcrumb__item::before{ content:""; display:block; width:6px; height:6px; margin:0 12px; border-top:1px solid var(--color-text); border-right:1px solid var(--color-text); transform:rotate(45deg);}

.breadcrumb__link{ color:var(--color-text);}

/* =========================================
   下層ページ：本文エリア
   ========================================= */
.page-body{ padding:120px 0;}

.page-body--wash{ background:var(--color-bg-page);}

.page-body__inner{ width:min(var(--content-width),calc(100% - 120px)); margin:0 auto;}

/* 本文中の見出し（旧テーマの .post_content h2 の見た目をそのまま引き継ぐ） */
.page-body__title,
.entry h2{ margin:50px 0 25px; padding:10px; border-left:7px solid var(--color-gold-line); background:var(--color-bg-wash); color:#222; font-size:24px; font-weight:bold; line-height:1.5; text-align:left;}

.page-body__title--center{ text-align:center;}

.page-body__inner > .page-body__title:first-child,
.entry > h2:first-child{ margin-top:0;}

.entry h3{ margin:40px 0 20px; padding-left:15px; border-left:5px solid var(--color-gold-line); color:var(--color-text-sub); font-size:20px; font-weight:bold;}

.entry h4{ margin:30px 0 15px; color:var(--color-text-sub); font-size:18px; font-weight:bold;}

.entry p,
.page-body__inner > p{ margin-bottom:2em;}

.entry a{ text-decoration:underline;}

/* =========================================
   カード型ページ（初めての方へ／買取方法）
   旧テーマではこのページ専用CSSが body 全体の背景と余白を書き換えていたため、
   ヘッダーやフッターまで影響していた。カード部分だけに範囲を限定した。
   ========================================= */
.page-card{ max-width:900px; margin:0 auto; padding:40px; border-radius:12px; background:var(--color-bg); box-shadow:0 4px 16px rgba(0,0,0,.1);}

.page-card__title{ margin:0 0 20px; font-size:28px; font-weight:bold; line-height:1.5;}

.page-card__note{ margin:40px 0 0; padding-top:20px; border-top:1px solid var(--color-line); color:#666; font-size:14px;}

/* =========================================
   選ばれる理由（初めての方へ）
   ========================================= */
.reason{ margin-bottom:30px; padding:20px; border-left:4px solid #c9a063; border-radius:8px; background:#fff8f0;}

.reason__title{ margin:0 0 10px; color:#c2954b; font-size:20px; font-weight:bold; line-height:1.5;}

.reason__text{ margin:0; color:#555; font-size:15px;}

/* =========================================
   買取方法（店舗買取／出張買取）
   ========================================= */
.method{ margin-bottom:30px; padding:20px; border:1px solid #e0d2b8; border-radius:8px; background:#fdf8f1;}

.method__tag{ display:inline-block; margin:0 0 10px; padding:4px 10px; border-radius:20px; background:#c9a063; color:#fff; font-size:14px;}

.method__title{ margin:0 0 25px; padding:10px; border-left:7px solid var(--color-gold-line); background:var(--color-bg-wash); color:#222; font-size:24px; font-weight:bold; line-height:1.5;}

.method__lead{ margin:0 0 2em;}

.method__subtitle{ margin:40px 0 20px; padding-left:15px; border-left:5px solid var(--color-gold-line); color:var(--color-text-sub); font-size:20px; font-weight:bold;}

.method__flow,
.method__for{ margin:0; padding-left:1.5em; list-style:disc;}

.method__flow li,
.method__for li{ margin-bottom:12px;}

/* =========================================
   よくある質問（アコーディオン）
   旧テーマは jQuery で開閉していたが、HTML標準の <details> に置き換えた。
   ========================================= */
.faq{ margin:0;}

.faq__item{ position:relative; margin-bottom:-1px; border:1px solid var(--color-line); background:var(--color-bg);}

.faq__question{ position:relative; display:block; padding:27px 60px 25px 30px; font-size:16px; font-weight:500; line-height:1.8; cursor:pointer; list-style:none; transition:color .3s ease;}

.faq__question::-webkit-details-marker{ display:none;}

.faq__question:hover{ color:var(--color-gold);}

/* 右端の「＋」印。開いているときは横棒だけになり「−」に見える */
.faq__question::before,
.faq__question::after{ content:""; position:absolute; top:50%; right:30px; display:block; width:14px; height:1px; background:currentColor; transform:translateY(-50%); transition:transform .3s ease;}

.faq__question::after{ transform:translateY(-50%) rotate(90deg);}

.faq__item[open] .faq__question{ color:var(--color-gold);}

.faq__item[open] .faq__question::after{ transform:translateY(-50%) rotate(0);}

.faq__answer{ padding:20px 30px; border-top:1px solid var(--color-line); background:#f8f8f8; font-size:16px; line-height:2.4;}

.faq__answer p{ margin:0;}

/* =========================================
   お客様の声
   ========================================= */
.review-list{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; max-width:1200px; margin:0 auto;}

.review-card{ display:flex; flex-direction:column; align-items:center; width:300px; padding:20px; border-radius:12px; background:var(--color-bg); box-shadow:0 4px 10px rgba(0,0,0,.1); transition:transform .3s ease;}

.review-card:hover{ transform:translateY(-5px);}

.review-card__who{ margin:0 0 10px; font-weight:bold; text-align:center;}

.review-card__title{ margin:0 0 8px; font-size:16px; font-weight:bold; text-align:center;}

.review-card__text{ margin:0; color:var(--color-text-sub); font-size:14px; line-height:1.6;}

/* =========================================
   アクセス（地図・店舗情報）
   ========================================= */
.access-map{ width:100%; max-width:1200px; margin:0 auto 20px;}

.access-map iframe{ display:block; width:100%; height:600px; border:0;}

.shop-info{ margin:0;}

.shop-info__label{ margin:40px 0 20px; padding-left:15px; border-left:5px solid var(--color-gold-line); color:var(--color-text-sub); font-size:20px; font-weight:bold;}

.shop-info__value{ margin:0;}

.shop-info__tel{ text-decoration:underline;}

/* =========================================
   リンクの一覧（サイトマップ・外部リンク）
   ========================================= */
.sitemap,
.link-list{ margin:0; padding-left:1.5em; list-style:disc;}

.sitemap__item,
.link-list li{ margin-bottom:12px;}

.sitemap__link,
.link-list a{ text-decoration:underline;}

/* =========================================
   お問い合わせフォーム（Contact Form 7）
   フォーム本体はプラグインが出力するので、見た目だけをここで整える。
   ========================================= */
table.inquiry{ width:100%; margin-bottom:30px; border-collapse:collapse; table-layout:fixed; word-wrap:break-word;}

table.inquiry th,
table.inquiry td{ padding:12px; border:1px solid var(--color-line); vertical-align:middle;}

table.inquiry th{ width:35%; background:#f9f9f9; color:var(--color-text-sub); font-size:15px; font-weight:bold; text-align:left;}

table.inquiry td{ background:#f3f5f7;}

table.inquiry p{ margin:0;}

.haveto,
.any{ display:inline-block; margin-right:6px; padding:2px 6px; border-radius:4px; color:#fff; font-size:11px; font-weight:bold; vertical-align:middle;}

.haveto{ background:#f28b82;}

.any{ background:#8ab4f8;}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea{ width:100%; max-width:100%; padding:8px 10px; border:1px solid var(--color-line); border-radius:4px; background:var(--color-bg);}

#formbtn{ display:block; margin:20px auto 40px; padding:14px 36px; border:none; border-radius:6px; background:#8ab4f8; color:#fff; font-size:16px; text-align:center; cursor:pointer; transition:background-color .3s ease;}

#formbtn:hover{ background:#7aa3e6;}

/* =========================================
   買取カテゴリ一覧（/genre/）のカード
   ========================================= */
.cat-card{ padding:60px 0; border-bottom:1px solid var(--color-line);}

.cat-card:last-of-type{ border-bottom:none;}

.cat-card__title{ margin:0 0 25px; font-family:var(--font-serif); font-size:28px; font-weight:600; line-height:1.7;}

.cat-card__desc{ margin:0 0 25px; line-height:2.4;}

.cat-card__image img{ display:block; width:100%; height:auto; border-radius:8px;}

.cat-card__button{ margin:40px 0 0; text-align:center;}

/* =========================================
   買取カテゴリの説明文と一覧下のボタン
   ========================================= */
.cat-intro{ max-width:800px; margin:0 auto 40px; line-height:2.4; text-align:center;}

.page-body__button{ margin:50px 0 0; text-align:center;}

/* =========================================
   ここから下は旧・子テーマ（serum_tcd096-child/style.css）から
   移植したコラム関連のスタイル。
   ブレークポイント（768px / 900px / 600px）は移植元のままにしている。
   ========================================= */

/* =========================================
   お役立ちコラム：全体レイアウト（本文＋サイドバーの2カラム）
   ========================================= */
.om-container{ max-width:1200px; margin:50px auto; padding:0 20px; display:flex; justify-content:space-between; align-items:flex-start; gap:40px;}

.om-main{ width:70%;}

/* =========================================
   お役立ちコラム：一覧の見出し
   ========================================= */
.om-heading-area{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:10px;}

.om-heading-area h2{ font-size:24px; color:#333; margin:0; font-weight:bold;}

.om-count{ font-size:14px; color:#666; margin:0;}

.om-heading-line{ border:none; border-top:2px solid #ddd; margin-bottom:30px;}

/* =========================================
   お役立ちコラム：一覧のカード
   ========================================= */
.om-card{ display:flex; margin-bottom:30px; padding-bottom:30px; border-bottom:1px solid #eee;}

.om-card-img-link{ width:35%; flex-shrink:0; margin-right:25px; display:block;}

.om-card-img{ position:relative; aspect-ratio:3 / 2; overflow:hidden; background-size:cover; background-position:center;}

.om-card-img::before{ content:''; position:absolute; inset:-10%; background:inherit; background-size:cover; background-position:center; filter:blur(15px); z-index:0; opacity:0;}

.om-card-img.is-portrait::before{ opacity:1;}

.om-card-img img{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover; border-radius:4px;}

.om-card-img.is-portrait img{ object-fit:contain;}

.om-card-body{ flex:1;}

.om-card-meta{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; flex-direction:row-reverse;}

.om-date{ font-size:14px; color:#666;}

.om-cat-label{ background:#6cbf6c; color:#fff; font-size:12px; padding:3px 10px; font-weight:bold;}

.om-card-title{ margin:0 0 10px 0; font-size:18px; line-height:1.5;}

.om-card-title a{ color:#333; text-decoration:none; transition:0.3s;}

.om-card-title a:hover{ color:#c9a063;}

.om-card-excerpt{ font-size:14px; color:#555; line-height:1.6;}
@media (max-width: 768px){
.om-card-excerpt{ display:none;}
}

/* =========================================
   お役立ちコラム：サイドバーの人気記事
   ========================================= */
.om-pop-list{ list-style:none; padding:15px; margin:0; background:#fff;}

.om-pop-item{ margin-bottom:20px; border-bottom:1px dashed #eee; padding-bottom:15px;}

.om-pop-item:last-child{ margin-bottom:0; border-bottom:none; padding-bottom:0;}

.om-pop-item a{ display:flex; text-decoration:none; color:#333; gap:15px; align-items:flex-start;}

.om-pop-item a:hover{ opacity:0.7;}

.om-pop-img{ width:90px; flex-shrink:0;}

.om-pop-img img{ width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; border-radius:4px;}

.om-pop-info{ flex:1;}

.om-pop-cat{ display:inline-block; font-size:10px; color:#fff; background-color:#00bfa5; padding:2px 8px; border-radius:2px; margin-bottom:5px; vertical-align:top;}

.om-pop-title{ font-size:13px; line-height:1.5; margin:0; font-weight:bold; color:#333;}

/* =========================================
   お役立ちコラム：サイドバー
   ========================================= */
.om-sidebar{ width:28%; background:#fff;}

.om-sidebar-box{ background:#fff; border:1px solid #e5e5e5; padding:0; margin-bottom:30px;}

.om-side-title{ font-size:16px; font-weight:bold; padding:15px 20px; margin:0; background:#f9f9f9; border-bottom:1px solid #e5e5e5; color:#333;}

.om-cat-list{ list-style:none; padding:10px; margin:0;}

.om-cat-item{ margin-bottom:5px;}

.om-cat-item a{ display:block; padding:10px 15px; color:#fff; text-decoration:none; font-weight:bold; font-size:13px; border-radius:3px; position:relative; transition:opacity 0.3s;}

.om-cat-item a:hover{ opacity:0.85;}

.om-cat-item a::after{ content:"›"; position:absolute; right:15px; top:50%; transform:translateY(-53%) rotate(90deg); font-family:Arial, sans-serif; font-size:16px; line-height:1;}

.om-cat-item:nth-child(1) a{ background-color:#cda435;}

.om-cat-item:nth-child(2) a{ background-color:#00bfa5;}

.om-cat-item:nth-child(3) a{ background-color:#42a5f5;}

.om-cat-item:nth-child(4) a{ background-color:#9ccc65;}

.om-cat-item:nth-child(5) a{ background-color:#c62828;}

.om-cat-item:nth-child(6) a{ background-color:#4caf50;}

.om-cat-item:nth-child(7) a{ background-color:#ff9800;}

.om-cat-item:nth-child(8) a{ background-color:#795548;}

.om-cat-item:nth-child(9) a{ background-color:#b388ff;}

.om-cat-item:nth-child(10) a{ background-color:#007bff;}

.om-cat-item:nth-child(11) a{ background-color:#e91e63;}

.om-cat-item:nth-child(12) a{ background-color:#607d8b;}
@media (max-width: 768px){
.om-container{ flex-direction:column; gap:30px;}
.om-main,
.om-sidebar{ width:100%;}
.om-card-meta{ flex-direction:row;}
}

/* =========================================
   お役立ちコラム：PICK UP（横スクロール。JS不要のscroll-snapで動く）
   ========================================= */
.om-pickup-section{ background-color:#f5f5f7; padding:40px 0 60px; width:100%;}

.om-pickup-inner{ max-width:1200px; margin:0 auto; padding:0 20px;}

.om-pickup-header{ margin-bottom:25px;}

.om-pickup-heading{ font-size:28px; font-weight:800; color:#1a1a50; letter-spacing:0.05em; margin:0;}

.om-pickup-heading .sub{ font-size:14px; color:#666; margin-left:15px; font-weight:normal;}

.om-pickup-slider{ display:flex; gap:20px; overflow-x:auto; padding-bottom:20px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;}

.om-pickup-slider::-webkit-scrollbar{ height:6px;}

.om-pickup-slider::-webkit-scrollbar-thumb{ background:#ccc; border-radius:3px;}

.om-pickup-slider::-webkit-scrollbar-track{ background:transparent;}

.om-pickup-card{ flex:0 0 280px; background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 4px 15px rgba(0, 0, 0, 0.05); text-decoration:none; color:#333; transition:transform 0.3s ease, box-shadow 0.3s ease; scroll-snap-align:start;}

.om-pickup-card:hover{ transform:translateY(-5px); box-shadow:0 8px 25px rgba(0, 0, 0, 0.1);}

.om-pickup-img-box{ position:relative; width:100%; aspect-ratio:3 / 2; overflow:hidden; background-size:cover; background-position:center;}

.om-pickup-img-box::before{ content:''; position:absolute; inset:-10%; background:inherit; background-size:cover; background-position:center; filter:blur(15px); z-index:0; opacity:0;}

.om-pickup-img-box.is-portrait::before{ opacity:1;}

.om-pickup-img-box img{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover;}

.om-pickup-img-box.is-portrait img{ object-fit:contain;}

.om-pickup-cat{ position:absolute; top:0; left:0; z-index:2; background:#555; color:#fff; font-size:11px; font-weight:bold; padding:4px 12px; border-bottom-right-radius:4px;}

.om-pickup-body{ padding:15px;}

.om-pickup-date{ display:block; font-size:12px; color:#888; margin-bottom:8px; font-weight:bold;}

.om-pickup-title{ font-size:15px; font-weight:bold; line-height:1.4; margin:0 0 12px 0; height:3em; overflow:hidden; color:#222;}

.om-pickup-tags{ display:flex; flex-wrap:wrap; gap:6px;}

.om-tag{ font-size:11px; color:#666; background:#f0f0f0; padding:2px 8px; border-radius:4px; border:1px solid #e0e0e0;}
@media (max-width: 768px){
.om-pickup-card{ flex:0 0 85%;}
.om-pickup-heading{ font-size:20px;}
.om-pickup-heading .sub{ display:block; margin-left:0; margin-top:5px; font-size:12px;}
}

/* =========================================
   お役立ちコラム：記事ページ
   ========================================= */
.om-single-header{ margin-bottom:30px;}

.om-single-meta-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; font-family:"Hiragino Sans", "Meiryo", sans-serif;}

.om-single-cat{ background-color:#cda435; color:#fff; font-size:13px; font-weight:bold; padding:6px 15px; border-radius:2px; text-decoration:none; transition:opacity 0.3s;}

.om-single-cat:hover{ opacity:0.8;}

.om-single-date{ font-size:14px; color:#666; font-weight:500;}

.om-single-title{ font-size:20px; font-weight:bold; line-height:1.5; color:#333; margin:0 0 15px 0;}

.om-single-tags{ margin-bottom:20px;}

.om-tag-text{ display:inline-block; font-size:14px; color:#333; font-weight:bold; margin-right:15px;}

.om-single-line{ border:none; border-top:1px solid #ddd; margin:20px 0 30px;}

.om-single-thumbnail{ position:relative; aspect-ratio:3 / 2; overflow:hidden; margin-bottom:40px; background-size:cover; background-position:center;}

.om-single-thumbnail::before{ content:''; position:absolute; inset:-10%; background:inherit; background-size:cover; background-position:center; filter:blur(15px); z-index:0; opacity:0;}

.om-single-thumbnail.is-portrait::before{ opacity:1;}

.om-single-thumbnail img{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover; border-radius:4px; display:block;}

.om-single-thumbnail.is-portrait img{ object-fit:contain;}
@media (max-width: 900px){
.om-container{ flex-direction:column; padding:0 15px; gap:40px; margin:20px auto;}
.om-main,
.om-sidebar{ width:100%;}
.om-single-title{ font-size:20px;}
.om-single-meta-top{ margin-bottom:10px;}
.om-single-cat{ font-size:11px; padding:4px 10px;}
.om-single-date{ font-size:12px;}
}

/* =========================================
   お役立ちコラム：記事下のタグ一覧
   ========================================= */
.om-bottom-tags{ margin:40px 0 50px; padding:30px; background-color:#fcfcfc; border-radius:8px;}

.om-tags-label{ display:flex; align-items:center; font-size:18px; font-weight:bold; color:#333; margin-bottom:20px;}

.om-tags-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px;}

.om-tags-list li{ margin:0; padding:0;}

.om-tags-list li a{ display:inline-block; background-color:#fff; border:1px solid #ddd; border-radius:4px; padding:8px 16px; font-size:13px; color:#444; text-decoration:none; transition:all 0.2s ease;}

.om-tags-list li a:hover{ background-color:#1a1a50; color:#fff; border-color:#1a1a50; transform:translateY(-2px);}

/* =========================================
   お役立ちコラム：関連店舗
   ========================================= */
.om-shop-container{ margin:50px 0; border:2px solid #f0f0f0; border-radius:8px; overflow:hidden;}

.om-shop-title{ background:#f9f9f9; padding:15px 20px; margin:0; font-size:16px; font-weight:bold; color:#333; border-bottom:2px solid #f0f0f0; text-align:center;}

.om-shop-box{ display:flex; flex-wrap:wrap;}

.om-shop-box + .om-shop-box{ border-top:2px solid #f0f0f0;}

.om-shop-details{ flex:1; min-width:250px; padding:25px;}

.om-shop-name{ font-size:20px; font-weight:bold; margin:0 0 15px; color:#cda435;}

.om-shop-address{ font-size:14px; margin-bottom:15px; display:flex; align-items:flex-start; gap:5px;}

.om-shop-info{ font-size:13px; line-height:1.8; color:#555; background:#fffcf0; padding:10px; border-radius:4px;}

.om-shop-map{ flex:1; min-width:300px; height:250px;}

.om-shop-map iframe{ width:100% !important; height:100% !important; border:none; display:block;}
@media (max-width: 600px){
.om-shop-box{ flex-direction:column;}
.om-shop-map{ height:200px; min-width:100%;}
}

/* =========================================
   相互内部リンク（記事⇔買取カテゴリ）
   functions.php が本文の末尾に差し込む枠のスタイル。
   セレクタを2つ重ねているのは、本文の見出し装飾（.entry h2）を
   打ち消すために詳細度を上げる必要があるため。
   ========================================= */

.related-genre,
.related-articles{ width:90%; max-width:800px; margin:40px auto; padding:28px 30px; background:#faf7f1; border:1px solid #e7ddc9; border-radius:6px;}

.related-genre .related-genre__title,
.related-articles .related-articles__title{ margin:0 0 18px; padding:2px 0 2px 14px; font-size:18px; font-weight:bold; line-height:1.4; color:#333; background:none; border:none; border-left:4px solid #c9a063;}

.related-genre .related-genre__list,
.related-articles .related-articles__list{ margin:0; padding:0; list-style:none;}

.related-genre .related-genre__item,
.related-articles .related-articles__item{ position:relative; margin:0 0 12px; padding-left:20px; list-style:none;}

.related-genre .related-genre__item:last-child,
.related-articles .related-articles__item:last-child{ margin-bottom:0;}

.related-genre .related-genre__item::before,
.related-articles .related-articles__item::before{ content:'\203A'; position:absolute; left:2px; top:0; color:#c9a063; font-weight:bold;}

.related-genre .related-genre__item a,
.related-articles .related-articles__item a{ color:#333; text-decoration:none; transition:0.3s;}

.related-genre .related-genre__item a:hover,
.related-articles .related-articles__item a:hover{ color:#c9a063; text-decoration:underline;}

.related-articles .related-articles__item--summary{ margin-bottom:16px; padding-bottom:14px; border-bottom:1px dashed #e7ddc9;}

.related-articles .related-articles__badge{ margin-right:4px; color:#c9a063; font-weight:bold;}

.related-summary{ width:90%; max-width:800px; margin:40px auto 0; padding:24px 30px; background:#fff; border:1px solid #e7ddc9; border-radius:6px;}

.related-summary + .related-genre{ margin-top:16px;}

.related-summary .related-summary__title{ margin:0 0 16px; padding:2px 0 2px 14px; font-size:18px; font-weight:bold; line-height:1.4; color:#333; background:none; border:none; border-left:4px solid #c9a063;}

.related-summary .related-summary__list{ margin:0; padding:0; list-style:none;}

.related-summary .related-summary__item{ position:relative; margin:0 0 12px; padding-left:20px; list-style:none;}

.related-summary .related-summary__item:last-child{ margin-bottom:0;}

.related-summary .related-summary__item::before{ content:'\203A'; position:absolute; left:2px; top:0; color:#c9a063; font-weight:bold;}

.related-summary .related-summary__item a{ color:#333; text-decoration:none; transition:0.3s;}

.related-summary .related-summary__item a:hover{ color:#c9a063; text-decoration:underline;}

@media (max-width: 768px){
.related-genre,
.related-articles{ width:100%; padding:20px;}
.related-genre .related-genre__title,
.related-articles .related-articles__title{ font-size:16px;}
.related-summary{ width:100%; padding:20px;}
.related-summary .related-summary__title{ font-size:16px;}
}

/* =========================================
   コラム記事の目次（本文の最初のh2の直前に自動で入る）
   ========================================= */
.toc{ display:block; box-sizing:border-box; width:100%; margin:30px 0 50px; padding:20px 30px; border:1px solid #ddd; border-radius:4px; background:#fcfcfc;}

.toc__title{ position:relative; margin-bottom:15px; padding-bottom:10px; color:#333; font-size:18px; font-weight:bold; text-align:center;}

.toc__title::after{ content:""; display:block; width:60px; height:3px; margin:10px auto 0; background:var(--color-gold-line);}

.toc ul{ margin:0; padding:0; list-style:none; counter-reset:toc-counter;}

.toc li{ margin-bottom:0; padding:0;}

.toc a{ display:block; padding:10px 0; border-bottom:1px dashed #e5e5e5; color:#333; font-size:15px; text-decoration:none; transition:color .3s ease,padding-left .3s ease,background-color .3s ease;}

.toc a::before{ content:counters(toc-counter,".") ". "; margin-right:5px; counter-increment:toc-counter; color:var(--color-gold-line); font-weight:bold;}

.toc a:hover{ padding-left:5px; background:#fafafa; color:var(--color-gold-line);}

.toc ul ul{ margin-left:20px;}

.toc ul ul a{ color:#666; font-size:14px;}

/* =========================================
   コラム：カード内のタグ（タグ一覧ページだけ表示）
   ========================================= */
.om-card-tags{ margin-bottom:8px;}

/* =========================================
   ページ送り
   ========================================= */
.pagination{ margin:40px 0 0;}

.pagination ul{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0; padding:0; list-style:none;}

.pagination li{ margin:0;}

.pagination .page-numbers{ display:flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 10px; border:1px solid var(--color-line); background:var(--color-bg); color:var(--color-text); font-size:14px; line-height:1; text-decoration:none; transition:background-color .3s ease,color .3s ease;}

.pagination a.page-numbers:hover{ border-color:var(--color-gold-line); color:var(--color-gold-line);}

.pagination .page-numbers.current{ border-color:var(--color-gold-line); background:var(--color-gold-line); color:#fff;}

/* =========================================
   記事下のシェアボタン
   旧テーマのアイコンフォントをやめ、文字のボタンにしている
   ========================================= */
.share{ margin:40px 0 0;}

.share__label{ margin:0 0 12px; color:var(--color-text-sub); font-size:14px; font-weight:bold;}

.share__list{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none;}

.share__item{ margin:0;}

.share__link{ display:inline-flex; align-items:center; justify-content:center; min-width:76px; padding:8px 14px; border:1px solid #ddd; border-radius:4px; background:#fff; color:#444; font-size:13px; line-height:1; text-decoration:none; transition:background-color .2s ease,color .2s ease,border-color .2s ease;}

.share__link:hover{ opacity:1; border-color:currentColor; color:#fff;}

.share__link--x:hover{ background:#000; border-color:#000;}

.share__link--facebook:hover{ background:#1877f2; border-color:#1877f2;}

.share__link--hatena:hover{ background:#00a4de; border-color:#00a4de;}

.share__link--line:hover{ background:#06c755; border-color:#06c755;}

.share__link--pinterest:hover{ background:#e60023; border-color:#e60023;}

.share__link--note:hover{ background:#41c9b4; border-color:#41c9b4;}

.share__link--feedly:hover{ background:#2bb24c; border-color:#2bb24c;}

.share__link--rss:hover{ background:#f26522; border-color:#f26522;}

/* =========================================
   お知らせ：カテゴリー切り替えボタン
   幅が足りないときは横スクロールになる（旧テーマはJSで実現していた）
   ========================================= */
.news-nav{ margin-bottom:40px; overflow-x:auto; overscroll-behavior-x:contain;}

.news-nav__list{ display:flex; gap:1px; min-width:max-content; margin:0 auto; padding:0; list-style:none;}

.news-nav__item a{ display:block; padding:12px 24px; border:1px solid var(--color-line); background:var(--color-bg); color:var(--color-text); font-size:14px; line-height:1.5; white-space:nowrap; text-decoration:none; transition:background-color .3s ease,color .3s ease;}

.news-nav__item a:hover{ opacity:1; background:var(--color-bg-wash);}

.news-nav__item--current a{ border-color:var(--color-gold); background:var(--color-gold); color:#fff;}

/* =========================================
   お知らせ：一覧のカード
   ========================================= */
.news-archive{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px;}

.news-card{ display:flex; flex-direction:column; background:var(--color-bg);}

.news-card__thumb{ display:block; aspect-ratio:310 / 180; overflow:hidden; background:var(--color-bg-sub);}

.news-card__thumb img{ width:100%; height:100%; object-fit:cover;}

.news-card__body{ flex:1; padding:20px 0 0;}

.news-card__title{ margin:0 0 12px; font-size:17px; line-height:1.6;}

.news-card__title a{ color:var(--color-text); text-decoration:none;}

.news-card__title a:hover{ color:var(--color-gold);}

.news-card__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; color:var(--color-text-mute); font-size:13px;}

.news-card__cat{ padding-left:12px; border-left:1px solid var(--color-line); color:var(--color-text-mute);}

/* =========================================
   お知らせ：記事ページ
   ========================================= */
.news-single__header{ margin-bottom:30px; padding-bottom:25px; border-bottom:1px solid var(--color-line);}

.news-single__title{ margin:0 0 15px; font-size:28px; font-weight:600; line-height:1.5;}

.news-single__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:15px; color:var(--color-text-mute); font-size:14px;}

.news-single__cat{ padding-left:15px; border-left:1px solid var(--color-line); color:var(--color-text-mute);}

.news-single__image{ margin-bottom:40px;}

.news-single__image img{ display:block; width:100%; height:auto;}

.news-recent{ margin-top:70px;}

.news-recent__title{ margin:0 0 30px; font-family:var(--font-serif); font-size:24px; font-weight:600; text-align:center;}

/* =========================================
   前後の記事へのリンク
   ========================================= */
.post-nav{ display:flex; flex-wrap:wrap; margin-top:50px;}

.post-nav a{ display:flex; align-items:center; justify-content:center; box-sizing:border-box; width:50%; min-height:110px; padding:20px 30px; border:1px solid var(--color-line); color:var(--color-text); font-size:15px; line-height:1.6; text-align:center; text-decoration:none;}

.post-nav a:hover{ opacity:1; background:var(--color-bg-wash);}

.post-nav__prev + .post-nav__next a{ border-left:none;}

.post-nav__label{ display:block; margin-top:8px; color:var(--color-text-mute); font-size:12px;}

/* =========================================
   通常投稿・検索結果の一覧
   ========================================= */
.post-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px;}

.post-list__link{ display:block; color:var(--color-text); text-decoration:none;}

.post-list__link:hover{ opacity:1; color:var(--color-gold);}

.post-list__thumb{ aspect-ratio:3 / 2; overflow:hidden; background:var(--color-bg-sub);}

.post-list__thumb img{ width:100%; height:100%; object-fit:cover;}

.post-list__body{ padding-top:14px;}

.post-list__date{ color:var(--color-text-mute); font-size:13px;}

.post-list__title{ margin:6px 0 0; font-size:16px; line-height:1.6;}

.search-result__count{ margin:0 0 30px; color:var(--color-text-sub); font-size:15px;}

.search-again{ max-width:520px; margin:50px auto 0;}

.no-posts{ margin:0; line-height:2; text-align:center;}

/* =========================================
   監修者ページ
   ========================================= */
.supervisor__profile{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:30px; padding:30px; border:1px solid var(--color-line); border-radius:8px; background:var(--color-bg);}

.supervisor__image{ flex:0 0 auto; width:140px; margin:0; overflow:hidden; border-radius:50%;}

.supervisor__image img{ display:block; width:100%; height:auto; aspect-ratio:1 / 1; object-fit:cover;}

.supervisor__body{ flex:1; min-width:240px;}

.supervisor__career{ margin:0 0 8px; color:var(--color-text-mute); font-size:14px;}

.supervisor__name{ margin:0 0 15px; font-size:22px; font-weight:bold; line-height:1.4;}

.supervisor__kana{ font-size:15px; font-weight:normal;}

.supervisor__desc{ margin:0; line-height:2;}

/* =========================================
   Responsive: タブレット（〜1200px）
   ========================================= */
@media (max-width:1200px){
body{ padding-left:40px; padding-right:40px;}

.gnav__list > li > a{ padding:0 12px; font-size:15px;}

/* --- トップページ --- */
.hero{ height:600px; margin-bottom:35px;}

.section__title{ font-size:26px;}

.btn{ width:260px;}

.genre-list{ width:90%;}

.feature__title{ top:-70px; min-width:200px; height:70px; margin-bottom:-70px; font-size:20px; line-height:70px;}

.feature__desc{ padding:0 50px;}

.news-list{ grid-auto-columns:calc((100% - 20px) / 2);}

/* --- 下層ページ --- */
.page-header__catch{ font-size:29px;}

.news-archive{ grid-template-columns:repeat(2,1fr);}

.post-list{ grid-template-columns:repeat(2,1fr);}

.page-body{ padding:100px 0;}

.page-body__inner{ width:min(var(--content-width),calc(100% - 120px));}

.page-card{ padding:30px;}

.access-map iframe{ height:450px;}
}

/* =========================================
   Responsive: 小さめのノートPC（〜1000px）
   メニューがロゴや検索アイコンに重なる手前で、文字と余白を詰める
   ========================================= */
@media (max-width:1000px){
.header__logo-link{ padding:0 16px;}

.gnav__list > li > a{ padding:0 7px; font-size:14px;}
}

/* =========================================
   Responsive: 幅の狭いウィンドウ（〜900px）
   ドロワーに切り替わる800pxまで、メニューを収めきるための最後の調整
   ========================================= */
@media (max-width:900px){
.header__logo-link{ padding:0 10px;}

.gnav__list > li > a{ padding:0 5px; font-size:13px;}
}

/* =========================================
   Responsive: スマホ（〜800px）
   ========================================= */
@media (max-width:800px){
body{ padding:var(--header-height-sp) 0 0;}

.header{ height:var(--header-height-sp);}

.header__logo,
.header__logo-link{ height:var(--header-height-sp);}

.header__logo-link{ padding:0 16px;}

.header__logo-link img{ max-height:32px;}

.gnav{ display:none;}

.header__search{ right:var(--header-height-sp);}

.header__search-toggle{ width:var(--header-height-sp); height:var(--header-height-sp);}

.searchform{ top:var(--header-height-sp); width:100vw; right:calc(var(--header-height-sp) * -1);}

.header__drawer-toggle{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; position:absolute; right:0; top:0; width:var(--header-height-sp); height:var(--header-height-sp);}

.header__drawer-bar{ display:block; width:22px; height:1.5px; background:var(--color-text); transition:transform .3s ease,opacity .3s ease;}

.header__drawer-toggle[aria-expanded="true"] .header__drawer-bar:nth-child(1){ transform:translateY(6.5px) rotate(45deg);}

.header__drawer-toggle[aria-expanded="true"] .header__drawer-bar:nth-child(2){ opacity:0;}

.header__drawer-toggle[aria-expanded="true"] .header__drawer-bar:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg);}

/* トップページは下に固定バーがあるので、4つのボタンは出さない
   （画面下に横棒が2本並んでしまうのを防ぐ。旧テーマもスマホでは非表示だった） */
.home .side-cta{ display:none;}

/* バーの高さが変わるので、余白計算の元になる値も上書きする */
:root{ --contact-bar-height:74px;}

.contact-bar__inner{ gap:8px;}

.contact-bar__tile{ padding:12px 14px; border-radius:14px;}

.contact-bar__icon{ width:28px; height:28px;}

.contact-bar__title{ font-size:15px;}

.contact-bar__sub{ font-size:12px;}

/* サイドCTAは画面下部に横並びで固定する */
.side-cta{ position:fixed; right:0; left:0; top:auto; bottom:0; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--color-line); background:var(--color-bg);}

.side-cta__link{ width:auto; height:58px; border-bottom:none; border-right:1px solid var(--color-line);}

.side-cta__link:first-child{ border-top:none;}

.side-cta__link:last-child{ border-right:none;}

.side-cta__link .icon{ margin-bottom:3px; width:18px; height:18px;}

.side-cta__label{ font-size:10px;}

.footer{ margin-top:50px; padding:40px 16px 100px;}

.footer__list{ gap:10px 20px; margin-bottom:36px;}

.footer__table{ font-size:12px;}

.footer__table th,
.footer__table td{ display:block; width:auto; padding:10px 12px;}

.footer__table th{ border-bottom:none;}

.pagetop{ bottom:70px; right:14px; width:42px; height:42px;}

/* --- トップページ --- */
.u-br-sp{ display:inline;}

.hero{ height:auto; margin-bottom:0;}

.hero__image{ height:auto;}

.section{ padding:35px 0;}

.section__inner{ width:88%;}

.section__title{ margin-bottom:28px; font-size:20px;}

.section__button{ margin-top:32px;}

.btn{ width:240px; height:50px;}

.concept{ margin-top:24px; font-size:15px;}

.genre-list{ width:100%;}

.genre-list__item{ display:block; padding:15px 3px; text-align:center;}

.genre-list__thumb{ margin:0 auto 10px;}

.genre-list__title{ font-size:15px;}

.feature{ display:block;}

.feature__item{ padding-bottom:40px;}

.feature__item + .feature__item{ border-top:1px solid var(--color-line); border-left:none;}

.feature__title{ top:-50px; min-width:240px; height:50px; margin-bottom:-50px; font-size:16px; line-height:50px;}

.feature__desc{ padding:0 20px; line-height:2;}

.feature__item .btn{ max-width:calc(100% - 40px); margin-top:32px;}

.news-list{ grid-auto-columns:80%;}

.shop-list{ grid-template-columns:1fr; gap:28px;}

/* --- 下層ページ --- */
.page-header{ height:250px;}

.page-header--plain{ height:85px;}

.page-header--small{ height:140px;}

.page-header__catch{ font-size:24px;}

.news-archive{ grid-template-columns:1fr; gap:24px;}

.news-card{ flex-direction:row; gap:15px;}

.news-card__thumb{ flex:0 0 120px; aspect-ratio:1 / 1;}

.news-card__body{ padding:0;}

.news-card__title{ margin-bottom:8px; font-size:15px;}

.news-single__title{ font-size:20px;}

.news-recent__title{ font-size:20px;}

.post-list{ grid-template-columns:1fr; gap:24px;}

.post-nav a{ width:100%; min-height:80px;}

.post-nav__prev + .post-nav__next a{ border-top:none; border-left:1px solid var(--color-line);}

.supervisor__profile{ padding:20px; gap:20px;}

.supervisor__image{ width:100px;}

.cat-card{ padding:40px 0;}

.cat-card__title{ font-size:20px;}

.cat-intro{ margin-bottom:28px;}

.page-title{ padding-top:40px; font-size:20px;}

.breadcrumb__list{ min-height:50px; font-size:12px;}

.breadcrumb__item + .breadcrumb__item::before{ margin:0 8px;}

.page-body{ padding:40px 0;}

.page-body__inner{ width:min(var(--content-width),calc(100% - 40px));}

.page-body__title,
.entry h2{ margin:35px 0 20px; font-size:20px;}

.entry h3{ margin:30px 0 15px; font-size:18px;}

.page-card{ padding:20px;}

.page-card__title{ font-size:22px;}

.reason__title{ font-size:18px;}

.method__title{ font-size:20px;}

.method__subtitle{ font-size:18px;}

.faq__question{ padding:20px 50px 18px 20px; font-size:14px;}

.faq__question::before,
.faq__question::after{ right:20px;}

.faq__answer{ padding:20px; font-size:14px; line-height:2;}

.review-card{ width:100%;}

.access-map iframe{ height:320px;}

.shop-info__label{ margin:30px 0 15px; font-size:18px;}

table.inquiry th,
table.inquiry td{ display:block; width:100%; font-size:14px;}

table.inquiry th{ padding:8px 10px; border-bottom:none;}

table.inquiry td{ padding:10px;}

#formbtn{ width:100%;}
}

/* =========================================
   Responsive: 小さいスマホ（〜500px）
   ========================================= */
@media (max-width:500px){
.page-header{ height:200px;}

.page-header--plain{ height:85px;}

.page-header--small{ height:120px;}

/* 幅が足りないのでWEBボタンは隠す。電話とLINEの2つを大きく見せる
   （旧テーマも同じ幅で隠していた） */
.contact-bar__tile--web{ display:none;}

.contact-bar__sub{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
}

/* =========================================
   Responsive: お役立ちコラムの一覧
   旧サイトは 1024px以下で2列・768px以下で1列だった。
   ここだけ他のブロックと折り返し幅が違うので独立して書く
   ========================================= */
@media (max-width:1024px){
.column-list{ grid-template-columns:repeat(2,1fr);}
}

@media (max-width:768px){
.column-list{ grid-template-columns:1fr; gap:20px;}

.column-list__title{ font-size:15px;}
}

/* =========================================
   動きを減らす設定の端末に配慮する
   ========================================= */
@media (prefers-reduced-motion:reduce){
*,
*::before,
*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important;}
}