@charset "UTF-8";
/* ============================================================
   style-v2.css — クラフトファーム編集分の追加スタイルシート
   宮崎本店（8cleanservice.jp／テーマ eightcs-theme）

   このファイルの役割（2026-09-07 オーナー方針・2026-09-15 導入）
   ------------------------------------------------------------
   - 既存の `style.css`・`responsive.css` は保守元（日向自動車学校IT部）の領域。こちらは触らない。
   - クラフトファームが追加・変更するCSSは、すべてこのファイルに書く。
   - 読み込みは `functions.php` の `theme_enqueue_assets()` から。
     `style.css`・`responsive.css` より後に出力される。よって同じ詳細度なら本ファイルが勝つ。
   - 双方が別々のファイルを持つことで、同時に作業しても互いの変更を消さない。
     ファイル名は固定（v3・v4と増やさない）。

   このファイルに書くときの注意
   ------------------------------------------------------------
   - `style.css`・`responsive.css` 側の既存ルールを打ち消す場合、順序だけでなく**詳細度**で
     勝てているか必ず確認する（後に読まれても詳細度が低ければ負ける）。
   - `style.css`・`responsive.css` の全量コピーは絶対にしない（保守元の更新が画面に出なくなる）。
   - 東海店（tokai-8cleanservice.jp）はテーマが別（`tokai-eightcs-theme`）のため対象外。
     導入する場合は東海店側に同じ構成で別途作る。

   2026-09-15 追記：以下は #1パッケージ（許可資格／ゴミ屋敷／遺品整理の新規3ページ用スタイル）が
   これまで `style.css`・`responsive.css` を直接編集していた分を、このファイルへ移設したもの
   （中身は変更せず、置き場所だけを移した。移設元は本番バックアップ2026-08-11取得分との差分）。
   ============================================================ */

/* ===== 元 style.css からの移設分（デスクトップ・共通） ===== */
/*
gomiyashiki
----------------------------------------------------------- */
.gomiyashiki .sec01 {padding: 45px 0 0;}
.gomiyashiki .sec02 {padding: 45px 0 0;}
.gomiyashiki .sec03 {padding: 45px 0 0;}
.gomiyashiki .sec04 {padding: 45px 0 0;}
.gomiyashiki .sec05 {padding: 45px 0 0;}
.gomiyashiki .sec06 {padding: 45px 0 0;}
.gomiyashiki .sec07 {padding: 45px 0 0;}
.gomiyashiki .sec08 {padding: 45px 0 0;}
.gomiyashiki .sec09 {padding: 45px 0 0;}
.gomiyashiki .sec10 {padding: 45px 0 0;}
/*
tokushu-seiso
----------------------------------------------------------- */
.tokushu-seiso .sec01 {padding: 45px 0 0;}
.tokushu-seiso .sec02 {padding: 45px 0 0;}
.tokushu-seiso .sec03 {padding: 45px 0 0;}
.tokushu-seiso .sec04 {padding: 45px 0 0;}
.tokushu-seiso .sec05 {padding: 45px 0 0;}
.tokushu-seiso .sec06 {padding: 45px 0 0;}
.tokushu-seiso .sec07 {padding: 45px 0 0;}
.tokushu-seiso .sec08 {padding: 45px 0 0;}
.tokushu-seiso .sec09 {padding: 45px 0 0;}
.tokushu-seiso .sec10 {padding: 45px 0 0;}
/*
ihinseiri
----------------------------------------------------------- */
.ihinseiri .sec01 {padding: 45px 0 0;}
.ihinseiri .sec02 {padding: 45px 0 0;}
.ihinseiri .sec03 {padding: 45px 0 0;}
.ihinseiri .sec04 {padding: 45px 0 0;}
.ihinseiri .sec05 {padding: 45px 0 0;}
.ihinseiri .sec06 {padding: 45px 0 0;}
.ihinseiri .sec07 {padding: 45px 0 0;}
.ihinseiri .sec08 {padding: 45px 0 0;}
.ihinseiri .sec09 {padding: 45px 0 0;}
.ihinseiri .sec10 {padding: 45px 0 0;}
/*
fuyohin
----------------------------------------------------------- */
.fuyohin .sec01 {padding: 45px 0 0;}
.fuyohin .sec02 {padding: 45px 0 0;}
.fuyohin .sec03 {padding: 45px 0 0;}
.fuyohin .sec04 {padding: 45px 0 0;}
.fuyohin .sec05 {padding: 45px 0 0;}
.fuyohin .sec06 {padding: 45px 0 0;}
.fuyohin .sec07 {padding: 45px 0 0;}
.fuyohin .sec08 {padding: 45px 0 0;}
/*
kyoka
----------------------------------------------------------- */
.kyoka .sec01 {padding: 45px 0 0;}
.kyoka .sec02 {padding: 45px 0 0;}
.kyoka .sec03 {padding: 45px 0 0;}
.kyoka .sec04 {padding: 45px 0 0;}
.kyoka .sec05 {padding: 45px 0 0;}
.kyoka .sec06 {padding: 45px 0 0;}
.kyoka .sec07 {padding: 45px 0 0;}
.kyoka .sec08 {padding: 45px 0 0;}

/*
gomiyashiki
----------------------------------------------------------- */
/*
sec01
----------------------------------------------------------- */
.gomiyashiki .sec01 {
    margin-top: 75px;
}
/*
tokushu-seiso
----------------------------------------------------------- */
/*
sec01
----------------------------------------------------------- */
.tokushu-seiso .sec01 {
    margin-top: 75px;
}
/*
ihinseiri
----------------------------------------------------------- */
/*
sec01
----------------------------------------------------------- */
.ihinseiri .sec01 {
    margin-top: 75px;
}
/*
fuyohin
----------------------------------------------------------- */
/*
sec01
----------------------------------------------------------- */
.fuyohin .sec01 {
    margin-top: 75px;
}
/*
kyoka
----------------------------------------------------------- */
/*
sec01
----------------------------------------------------------- */
.kyoka .sec01 {
    margin-top: 75px;
}
/*
証明書画像の枠線（2026-09-02追加）
白地の書類（産廃許可証・遺品整理士・事件現場特殊清掃士）がページ背景に溶けるため、
外周に1pxのグレー罫線を引く。色は既存テーマで使用実績のある #ccc に合わせている。
----------------------------------------------------------- */
.imgbd {
    border: 1px solid #ccc;
}
/*
保有許可欄の証明書画像（2026-09-02追加）
.flex.col-2の欄いっぱい（570px）に画像が広がっていたため、幅を絞って余白で調整する。
.m0a（margin:0 auto）と組み合わせて中央寄せになる。
----------------------------------------------------------- */
.license-img {
    max-width: 320px;
}

/* ===== 元 responsive.css からの移設分（max-width: 767px） ===== */
@media screen and (max-width: 767px){
    /*
    gomiyashiki
    ----------------------------------------------------------- */
    .gomiyashiki .sec01 {padding: 30px 0 0;}
    .gomiyashiki .sec02 {padding: 30px 0 0;}
    .gomiyashiki .sec03 {padding: 30px 0 0;}
    .gomiyashiki .sec04 {padding: 30px 0 0;}
    .gomiyashiki .sec05 {padding: 30px 0 0;}
    .gomiyashiki .sec06 {padding: 30px 0 0;}
    .gomiyashiki .sec07 {padding: 30px 0 0;}
    .gomiyashiki .sec08 {padding: 30px 0 0;}
    .gomiyashiki .sec09 {padding: 30px 0 0;}
    .gomiyashiki .sec10 {padding: 30px 0 0;}
    /*
    tokushu-seiso
    ----------------------------------------------------------- */
    .tokushu-seiso .sec01 {padding: 30px 0 0;}
    .tokushu-seiso .sec02 {padding: 30px 0 0;}
    .tokushu-seiso .sec03 {padding: 30px 0 0;}
    .tokushu-seiso .sec04 {padding: 30px 0 0;}
    .tokushu-seiso .sec05 {padding: 30px 0 0;}
    .tokushu-seiso .sec06 {padding: 30px 0 0;}
    .tokushu-seiso .sec07 {padding: 30px 0 0;}
    .tokushu-seiso .sec08 {padding: 30px 0 0;}
    .tokushu-seiso .sec09 {padding: 30px 0 0;}
    .tokushu-seiso .sec10 {padding: 30px 0 0;}
    /*
    ihinseiri
    ----------------------------------------------------------- */
    .ihinseiri .sec01 {padding: 30px 0 0;}
    .ihinseiri .sec02 {padding: 30px 0 0;}
    .ihinseiri .sec03 {padding: 30px 0 0;}
    .ihinseiri .sec04 {padding: 30px 0 0;}
    .ihinseiri .sec05 {padding: 30px 0 0;}
    .ihinseiri .sec06 {padding: 30px 0 0;}
    .ihinseiri .sec07 {padding: 30px 0 0;}
    .ihinseiri .sec08 {padding: 30px 0 0;}
    .ihinseiri .sec09 {padding: 30px 0 0;}
    .ihinseiri .sec10 {padding: 30px 0 0;}
    /*
    fuyohin
    ----------------------------------------------------------- */
    .fuyohin .sec01 {padding: 30px 0 0;}
    .fuyohin .sec02 {padding: 30px 0 0;}
    .fuyohin .sec03 {padding: 30px 0 0;}
    .fuyohin .sec04 {padding: 30px 0 0;}
    .fuyohin .sec05 {padding: 30px 0 0;}
    .fuyohin .sec06 {padding: 30px 0 0;}
    .fuyohin .sec07 {padding: 30px 0 0;}
    .fuyohin .sec08 {padding: 30px 0 0;}
    /*
    kyoka
    ----------------------------------------------------------- */
    .kyoka .sec01 {padding: 30px 0 0;}
    .kyoka .sec02 {padding: 30px 0 0;}
    .kyoka .sec03 {padding: 30px 0 0;}
    .kyoka .sec04 {padding: 30px 0 0;}
    .kyoka .sec05 {padding: 30px 0 0;}
    .kyoka .sec06 {padding: 30px 0 0;}
    .kyoka .sec07 {padding: 30px 0 0;}
    .kyoka .sec08 {padding: 30px 0 0;}
}

/* 【2026-09-26】ihinseiri「サービスの流れ」の3列カード用補正（.flow-cards）は縦タイムライン（.flow-line・ファイル末尾）に変えたため削除 */

/*
kyoka sec08「各サービスのご案内」：/option/ の option-card（common.css）を4枚で使うための補正（2026-09-25）
common.css は3列前提（3枚目ごとに右線なし・最後の3枚は下線なし）のため、4列／2列に合わせて区切り線を指定し直す。
PC（1200px〜）：4列・右線のみ（最後だけなし）／タブレット：2列×2段／スマホ：common.css のまま（1列・最後だけ線なし）
----------------------------------------------------------- */
@media screen and (min-width: 1200px) {
    .svc-cards .option-card:nth-child(n) {border-right: 1px dashed var(--green); border-bottom: none;}
    .svc-cards .option-card:last-child {border-right: none;}
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
    .svc-cards .option-card:nth-child(n) {border-right: 1px dashed var(--green); border-bottom: 1px dashed var(--green);}
    .svc-cards .option-card:nth-child(2n) {border-right: none;}
    .svc-cards .option-card:nth-last-child(-n + 2) {border-bottom: none;}
}

/*
.flow-cards（ihinseiri）・.svc-cards（kyoka）共通：カード間の隙間を0に（2026-09-25）
.flex の gap（PC 30px）があると、破線（各カードの右端）と次のカードの間に隙間ができ、2枚目以降の中身が破線の中央から gap/2 右にずれて見える。
--grid-gap を0にして、破線＝カードの境目にする（列幅の計算式も同じ変数を使うため幅は自動で100%/列数になる）
----------------------------------------------------------- */
.svc-cards {--grid-gap: 0px;}

/*
【2026-09-25】Point＋黄色背景（/moving/ .sec03 と同じ見た目）ihinseiri・kyoka 共通
----------------------------------------------------------- */
.point-sec {background: var(--yellow02); padding: 45px 0; margin-top: 45px;}
.point-sec .cmn-cat {display: flex; justify-content: center; align-items: center; font-family: "Barlow Condensed", sans-serif; font-weight: 200; font-size: 1.8rem; font-style: normal; padding: 5px 15px; margin-right: 15px; border: 1px solid var(--green); width: 90px;}
.point-sec .acc-box-ttl {display: flex; align-items: center; font-size: 2.4rem; font-weight: bold; color: var(--green); margin-bottom: 30px; text-align: left;}
.point-cards {--grid-gap: 0px;}
@media screen and (max-width: 767px) {
    .point-sec {padding: 30px 0; margin-top: 30px;}
    .point-sec .cmn-cat {font-size: 1.6rem; width: 90px;}
    .point-sec .acc-box-ttl {margin-bottom: 15px; font-size: 2rem;}
}
/* kyoka sec04（Notice→Point 写真1枚＋文章）：.kyoka .sec04 の padding-bottom:0 を上書き */
.kyoka .sec04.point-sec {padding: 45px 0; margin-top: 45px;}
@media screen and (max-width: 767px) {
    .kyoka .sec04.point-sec {padding: 30px 0; margin-top: 30px;}
}

/*
【2026-09-25】kyoka sec07 会社情報：/about/ の会社概要表と同じ見た目（style.css .about table の複製。項目名の下に緑線・内容の下に灰線）。項目名の列幅は、オーナー指摘「thが長すぎる」で 33.3333%→20% に変更（/about/ とは異なる）
----------------------------------------------------------- */
.kyoka .sec07 table {width: 100%; table-layout: fixed; border-collapse: collapse; border-spacing: 0;}
.kyoka .sec07 th {padding: 20px 0; width: 20%; vertical-align: top; border-bottom: 1px solid var(--green); color: var(--green); text-align: left;}
.kyoka .sec07 td {position: relative; padding: 20px 0 20px 20px; border-bottom: 1px solid #ccc;}
.kyoka .sec07 td::after {position: absolute; content: ""; bottom: -5px; left: 0; width: 10px; height: 10px; background: #fff;}
@media screen and (max-width: 767px) {
    .kyoka .sec07 table,
    .kyoka .sec07 tbody,
    .kyoka .sec07 th,
    .kyoka .sec07 td,
    .kyoka .sec07 tr {display: block;}
    .kyoka .sec07 th {width: 100%; padding: 15px 0 10px 0;}
    .kyoka .sec07 td {width: 100%; padding: 10px 0 15px 0;}
    .kyoka .sec07 td::after {display: none;}
}

/*
【2026-09-25】kyoka sec03 保有許可・sec02 保有資格：「証書プレート」型カード（.plate-*）
左＝淡い緑の台紙に許可証を書類として置く／右＝区分ラベル・許可名（明朝）・許可番号（数字を大きく）を左揃えで階層化
PC は2枚横並び、768〜1199px は1枚ずつ縦に、スマホもカード内の左右2列は維持
----------------------------------------------------------- */
.plate-list {display: grid; grid-template-columns: 1fr 1fr; gap: 30px;}
.plate-card {display: grid; grid-template-columns: 42% 1fr; background: #fff; border: 1px solid #dcebe3; border-radius: 6px; overflow: hidden; box-shadow: 0 10px 30px rgba(var(--main), .08);}
.plate-card-doc {margin: 0; display: flex; align-items: center; justify-content: center; padding: 30px 24px;
    background-color: var(--green05);
    background-image: repeating-linear-gradient(135deg, rgba(var(--main), .05) 0 1px, transparent 1px 9px);}
.plate-card-doc img {display: block; width: 100%; max-width: 190px; height: auto; background: #fff; padding: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 12px 24px -6px rgba(0, 66, 34, .25);}
.plate-card-body {display: flex; flex-direction: column; justify-content: center; padding: 34px 32px;}
.plate-card-cat {display: flex; align-items: center; gap: 10px; font-size: 1.4rem; font-weight: bold; letter-spacing: .12em; color: var(--green); margin-bottom: 16px;}
.plate-card-icon {display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #fff; font-size: 1.4rem; letter-spacing: 0;}
.plate-card-name {position: relative; word-break: keep-all; font-family: "Shippori Mincho", serif; font-size: 2.2rem; font-weight: 600; line-height: 1.5; color: #222; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid #dcebe3;}
.plate-card-name::after {content: ""; position: absolute; left: 0; bottom: -1px; width: 36px; height: 3px; background: var(--green);}
.plate-card-no dt {font-size: 1.2rem; letter-spacing: .2em; color: #888; margin-bottom: 2px;}
.plate-card-no dd {font-family: "Barlow Condensed", sans-serif; font-size: 3rem; font-weight: 500; line-height: 1.2; letter-spacing: .04em; color: var(--green03);}
.plate-card-no-jp {font-family: "Noto Sans JP", sans-serif; font-size: 1.4rem; font-weight: bold; letter-spacing: 0; margin: 0 3px; color: var(--green);}
@media screen and (max-width: 1199px) {
    .plate-list {grid-template-columns: 1fr; gap: 20px;}
    .plate-card {grid-template-columns: 36% 1fr;}
}
@media screen and (max-width: 767px) {
    .plate-list {gap: 15px;}
    .plate-card {grid-template-columns: 40% 1fr;}
    .plate-card-doc {padding: 18px 14px;}
    .plate-card-body {padding: 20px 16px;}
    .plate-card-cat {font-size: 1.2rem; gap: 8px; margin-bottom: 10px;}
    .plate-card-icon {flex-basis: 28px; width: 28px; height: 28px; font-size: 1.2rem;}
    .plate-card-name {font-size: 1.7rem; padding-bottom: 12px; margin-bottom: 12px;}
    .plate-card-no dd {font-size: 2.4rem;}
    .plate-card-no-jp {font-size: 1.2rem;}
}

/* 保有資格（sec02）用の差分（2026-09-25）
オーナー指摘「トンマナが同じすぎて混乱」→ 外枠（白地・角丸・影）だけ共通にし、中身で区別する。
人を見せるカード＝写真を左端いっぱいに敷く（台紙・白フチなし）＋差し色は金（--gold）。書類（保有許可）＝緑の台紙のまま */
.plate-card--staff {grid-template-columns: 38% 1fr; border-color: #eee3c8; box-shadow: 0 10px 30px rgba(201, 164, 76, .14);}
.plate-card--staff .plate-card-doc {display: block; position: relative; padding: 0; background: none;}
.plate-card--staff .plate-card-doc img {width: 100%; max-width: none; height: 100%; min-height: 300px; padding: 0; background: none; box-shadow: none; object-fit: cover; object-position: center 20%;}
.plate-card--staff .plate-card-doc::after {content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 4px; background: var(--gold);}
.plate-card--staff .plate-card-cat {color: #8a6d22;}
.plate-card--staff .plate-card-icon {background: var(--gold);}
.plate-card--staff .plate-card-name {border-bottom-color: #eee3c8; font-family: "Noto Sans JP", sans-serif; font-weight: bold;} /* 2026-09-26 オーナー指示：保有資格の氏名は明朝→ゴシック太（保有許可は明朝のまま） */
.plate-card--staff .plate-card-name::after {background: var(--gold);}
.plate-card-quals dt {display: flex; align-items: center; gap: 10px; font-size: 1.6rem; font-weight: bold; color: #333;}
.plate-card-quals dt i {display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--gold02); color: #8a6d22; font-size: 1.3rem;}
.plate-card-quals dd {font-size: 1.4rem; line-height: 1.8; color: #555; margin: 6px 0 0 38px;}
.plate-card-quals dd + dt {margin-top: 18px;}
@media screen and (max-width: 1199px) {
    .plate-card--staff {grid-template-columns: 32% 1fr;}
}
@media screen and (max-width: 767px) {
    .plate-card--staff {grid-template-columns: 1fr;}
    .plate-card--staff .plate-card-doc img {height: 240px; min-height: 0; object-position: center 25%;}
    .plate-card--staff .plate-card-doc::after {top: auto; left: 0; width: auto; height: 4px;}
    .plate-card-quals dt {font-size: 1.5rem;}
    .plate-card-quals dd {margin-left: 0;}
}
/* 保有資格（sec02）：1人1段・写真左右交互（2026-09-26 オーナー指示「A案」。保有許可は2カラムのまま）
768px以上だけに効かせ、スマホの縦積みは上の指定のまま。段の左右ずらしは 2026-09-26 オーナー指示「ずらさずに揃えて」で撤去 */
@media screen and (min-width: 768px) {
    .plate-list--staff {grid-template-columns: 1fr; gap: 40px;}
    .plate-card--staff {grid-template-columns: 34% 1fr;}
    .plate-card--staff .plate-card-body {padding: 40px 48px;}
    .plate-card--staff:nth-child(even) {grid-template-columns: 1fr 34%;}
    .plate-card--staff:nth-child(even) .plate-card-doc {order: 2;}
    .plate-card--staff:nth-child(even) .plate-card-doc::after {right: auto; left: 0;}
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
    .plate-card--staff .plate-card-body {padding: 30px 28px;}
}

/*
【2026-09-25】kyoka sec05 資格証（画像）：額装ギャラリー
金の細線の額（資格＝金。sec02 保有資格カードと同じ差し色）＋白いマット、証書は額の中に contain で収めて3枚の大きさをそろえる。
押すと原寸画像を別タブで表示（右下の虫眼鏡）。下に美術館の作品札のような札（資格名＝明朝／保有者名）
----------------------------------------------------------- */
.cert-gallery {display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 30px;}
.cert-frame {position: relative; display: block; padding: 14px; background: #fff; border: 1px solid #e3d6b4;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 14px 30px -12px rgba(138, 109, 34, .28);
    transition: transform .35s ease, box-shadow .35s ease;}
.cert-frame::before {content: ""; position: absolute; inset: 6px; border: 1px solid rgba(201, 164, 76, .45); pointer-events: none;}
.cert-frame-mat {margin: 0; aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; padding: 22px; background: #f4f6f4;}
.cert-frame-mat img {display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 8px 18px -6px rgba(0, 0, 0, .22);}
.cert-frame-zoom {position: absolute; right: 22px; bottom: 22px; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
    background: var(--gold); color: #fff; font-size: 1.5rem; opacity: .85; transform: scale(.9); transition: opacity .3s ease, transform .3s ease;}
.cert-frame:hover, .cert-frame:focus-visible {transform: translateY(-4px); box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 22px 40px -14px rgba(138, 109, 34, .38);}
.cert-frame:hover .cert-frame-zoom, .cert-frame:focus-visible .cert-frame-zoom {opacity: 1; transform: scale(1);}
.cert-frame:focus-visible {outline: 2px solid var(--gold); outline-offset: 4px;}
.cert-label {margin-top: 18px; text-align: center;}
.cert-label::before {content: ""; display: block; width: 28px; height: 2px; margin: 0 auto 12px; background: var(--gold);}
.cert-label-name {display: block; word-break: keep-all; overflow-wrap: anywhere; font-family: "Shippori Mincho", serif; font-size: 1.8rem; font-weight: 600; line-height: 1.5; color: #222;}
.cert-label-holder {display: block; margin-top: 4px; font-size: 1.3rem; letter-spacing: .08em; color: #8a6d22;}
@media (prefers-reduced-motion: reduce) {
    .cert-frame, .cert-frame-zoom {transition: none;}
    .cert-frame:hover, .cert-frame:focus-visible {transform: none;}
}
@media screen and (max-width: 1199px) {
    .cert-gallery {gap: 30px 20px;}
    .cert-frame-mat {padding: 16px;}
    .cert-label-name {font-size: 1.6rem;}
}
@media screen and (max-width: 767px) {
    .cert-gallery {grid-template-columns: repeat(2, 1fr); gap: 24px 15px;}
    .cert-gallery li:last-child:nth-child(odd) {grid-column: 1 / -1; justify-self: center; width: calc(50% - 7.5px);}
    .cert-frame {padding: 8px;}
    .cert-frame::before {inset: 3px;}
    .cert-frame-mat {padding: 10px;}
    .cert-frame-zoom {right: 12px; bottom: 12px; width: 30px; height: 30px; font-size: 1.2rem; opacity: 1; transform: none;}
    .cert-label {margin-top: 12px;}
    .cert-label::before {margin-bottom: 8px;}
    .cert-label-name {font-size: 1.4rem;}
    .cert-label-holder {font-size: 1.1rem;}
}

/*
【2026-09-26】kyoka sec07 会社情報：オーナー指示で背景に色（Point セクションと同じ淡い黄 --yellow02 の帯）
.kyoka .sec07 の padding-bottom:0 を上書き。表の td::after（線の始まりを白で隠す飾り）は背景と同じ黄色に
----------------------------------------------------------- */
.kyoka .sec07.company-sec {background: var(--yellow02); padding: 45px 0; margin-top: 45px;}
.kyoka .sec07.company-sec td::after {background: var(--yellow02);}
.kyoka .sec07.company-sec .pb45 {padding-bottom: 30px;}
@media screen and (max-width: 767px) {
    .kyoka .sec07.company-sec {padding: 30px 0; margin-top: 30px;}
    .kyoka .sec07.company-sec .pb45 {padding-bottom: 20px;}
}

/*
【2026-09-26】ihinseiri sec06（旧 sec08）「作業事例・お客様の声」：トップページ sec13「作業料金例」と同じスライダー（swiper02・ex-box）を使う。
スライダー・矢印・スクロールバーを .ex-slider で囲み、スクロールバーと矢印の位置の基準にする（トップは見出し込みの container 基準で矢印が 50%+65px。こちらは見出しを含まないので 50% に）
----------------------------------------------------------- */
.ex-slider {position: relative; padding-bottom: 15px;}
.ex-slider .swiper-button-prev,
.ex-slider .swiper-button-next {top: 50%;}

/* -----------------------------------------------------------
【2026-09-26】ihinseiri「サービスの流れ」以下の区切り
オーナー指摘「境目がわかりにくい」→ トップページと同じ薄い黄色（--yellow02）の帯と白を交互に（同日「作業事例を黄に」「薄い緑はやめて白と黄だけ」）。
同日、/reform/・/moving/・/aircon/ と同じ型に再編（.care-* は区画ごと廃止）したので並びは
sec01〜04（とは？・サービス内容 Service01〜03）白／point-sec 黄／sec05 サービスの流れ 白／sec06 作業事例 黄／sec07 よくあるご質問 白（同日、一度アイコンのカードにして番号を詰めたが、/aircon/ と同じ写真付きに戻した）。上下の余白も広げる
----------------------------------------------------------- */
/* 【2026-09-26】ゴミ屋敷（gomiyashiki）も /ihinseiri/ と同じ型に再編したため、同じ並び・余白を共有 */
/* 【2026-09-26】特殊清掃（tokushu-seiso）・不用品回収（fuyohin）も同じ型に再編。fuyohin だけ sec07「対応エリア」（白）が1区画多いため sec08 まで対象に含める */
.ihinseiri .sec05,
.ihinseiri .sec06,
.ihinseiri .sec07,
.gomiyashiki .sec05,
.gomiyashiki .sec06,
.gomiyashiki .sec07,
.tokushu-seiso .sec05,
.tokushu-seiso .sec06,
.tokushu-seiso .sec07,
.fuyohin .sec05,
.fuyohin .sec06,
.fuyohin .sec07,
.fuyohin .sec08 {padding: 80px 0;}
.ihinseiri .sec06,
.gomiyashiki .sec06,
.tokushu-seiso .sec06,
.fuyohin .sec06 {background: var(--yellow02);}
.ihinseiri .sec07 .btn-wrap,
.gomiyashiki .sec07 .btn-wrap,
.tokushu-seiso .sec07 .btn-wrap,
.fuyohin .sec08 .btn-wrap {padding-bottom: 0;}
@media screen and (max-width: 767px) {
    .ihinseiri .sec05,
    .ihinseiri .sec06,
    .ihinseiri .sec07,
    .gomiyashiki .sec05,
    .gomiyashiki .sec06,
    .gomiyashiki .sec07,
    .tokushu-seiso .sec05,
    .tokushu-seiso .sec06,
    .tokushu-seiso .sec07,
    .fuyohin .sec05,
    .fuyohin .sec06,
    .fuyohin .sec07,
    .fuyohin .sec08 {padding: 45px 0;}
}

/* 【2026-09-26】ihinseiri Point 3ポイントのイラスト（.point-ill）：写真から SVG イラストに変更。丸枠の大きさをそろえる */
.point-ill img {width: 180px; height: auto;}
@media screen and (max-width: 767px) {
    .point-ill img {width: 150px;}
}

/* -----------------------------------------------------------
【2026-09-26】ihinseiri sec05「サービスの流れ」：中央の線を軸にした互い違いのタイムライン（.flow-line）
オーナー指示「①→②→③と流れている感じが出ていない・3カラムにとらわれず最適解を」→ 縦1列にしたが、同日「左に寄っている・余白が多くて寂しい」
→ PC・タブレット（768px〜）：2列グリッド。各カードは2行分の高さで、1行ずつずらして左右交互に置く（1：左1〜2行／2：右2〜3行／3：左3〜4行…）＝互い違いに詰まって幅いっぱいに
   中央の線（.flow-rail）の上に番号の丸（.flow-no）、カードの内側の辺に線へ向かう小さな三角
→ スマホ：線を左に寄せた1列
・.is-animated（JS が付ける）のときだけ、線の塗り（.flow-rail-fill）がスクロールに合わせて伸び、未到達のカードは薄く・通過で点灯
----------------------------------------------------------- */
.flow-line {--col-gap: 96px; --no: 52px; position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(90px, auto); column-gap: var(--col-gap); max-width: 1080px; margin-left: auto; margin-right: auto;}
.flow-rail {position: absolute; top: 10px; bottom: 10px; left: 50%; width: 4px; margin-left: -2px; border-radius: 4px; background: #dcebe3; overflow: hidden;}
.flow-rail-fill {position: absolute; inset: 0; background: linear-gradient(var(--green02), var(--green)); transform-origin: top;}

.flow-step {position: relative; grid-row: var(--i) / span 2; grid-column: 1; padding: 12px 0;}
.flow-step:nth-child(odd) {grid-column: 2;}
.flow-no {position: absolute; z-index: 1; top: 34px; width: var(--no); height: var(--no); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: "Barlow Condensed", sans-serif; font-size: 2.6rem; font-weight: 600; line-height: 1; color: #fff; background: var(--green); box-shadow: 0 0 0 6px #fff; transition: background .5s;}
.flow-step:nth-child(even) .flow-no {right: calc(var(--col-gap) / -2 - var(--no) / 2);}
.flow-step:nth-child(odd) .flow-no {left: calc(var(--col-gap) / -2 - var(--no) / 2);}

.flow-card {position: relative; height: 100%; padding: 26px 30px 28px; background: #fff; border: 1px solid #d5e8dd; border-radius: 10px; box-shadow: 0 10px 24px -14px rgba(0, 66, 34, .25); transition: opacity .6s, transform .6s, box-shadow .6s;}
.flow-card::before {content: ""; position: absolute; top: 52px; width: 14px; height: 14px; background: #fff; border: 1px solid #d5e8dd; transform: rotate(45deg);}
.flow-step:nth-child(even) .flow-card::before {right: -8px; border-left: none; border-bottom: none;}
.flow-step:nth-child(odd) .flow-card::before {left: -8px; border-right: none; border-top: none;}

.flow-head {display: flex; align-items: center; gap: 16px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px dashed #cfe3d8;}
.flow-icon {flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; color: var(--green); background: var(--green05);}
.flow-label {font-family: "Barlow Condensed", sans-serif; font-size: 1.5rem; font-weight: 500; letter-spacing: .12em; line-height: 1; color: var(--green02); margin-bottom: 6px;}
.flow-head h3 {font-size: 2.1rem; font-weight: bold; line-height: 1.4; color: var(--green);}
.flow-card > p {margin-bottom: 0;}

/* ゴール（完了報告）：カードを緑の地に */
.flow-step.is-goal .flow-card,
.flow-step.is-goal .flow-card::before {background: var(--green); border-color: var(--green);}
.flow-step.is-goal .flow-card {color: #fff;}
.flow-step.is-goal .flow-head {border-bottom-color: rgba(255, 255, 255, .4);}
.flow-step.is-goal .flow-icon {background: #fff;}
.flow-step.is-goal .flow-label {color: var(--yellow);}
.flow-step.is-goal .flow-head h3 {color: #fff;}
.flow-step.is-goal .flow-no {background: var(--green03);}

.flow-note {display: flex; align-items: center; justify-content: center; gap: 20px; max-width: 1080px; margin: 50px auto 0; padding: 24px 30px; font-weight: bold; color: var(--green03); background: var(--yellow02); border-radius: 10px;}
.flow-note i {flex: 0 0 auto; font-size: 2.6rem; color: var(--green);} /* 【2026-09-26】オーナー指摘「握手アイコンと文字が近すぎる」→ 間隔を広げ、アイコンが縮まないように */

/* スクロール演出（JS が .is-animated を付けたときだけ） */
.flow-line.is-animated .flow-rail-fill {transform: scaleY(0); transition: transform .15s linear;}
.flow-line.is-animated .flow-no {background: #b9d9c6;}
.flow-line.is-animated .flow-card {opacity: .35; transform: translateY(14px);}
.flow-line.is-animated .is-reached .flow-no {background: var(--green);}
.flow-line.is-animated .is-goal.is-reached .flow-no {background: var(--green03);}
.flow-line.is-animated .is-reached .flow-card {opacity: 1; transform: none;}

@media screen and (min-width: 768px) and (max-width: 1199px) {
    .flow-line {--col-gap: 72px; --no: 44px;}
    .flow-card {padding: 22px 22px 24px;}
    .flow-no {font-size: 2.2rem;}
}
@media screen and (max-width: 767px) {
    .flow-line {--no: 40px; display: block; padding-left: 58px;}
    .flow-rail {left: 20px; top: 20px; bottom: 20px;}
    .flow-step {padding: 0 0 18px;}
    .flow-step:last-child {padding-bottom: 0;}
    .flow-step:nth-child(n) .flow-no {left: -58px; right: auto; top: 22px; font-size: 2rem; box-shadow: 0 0 0 5px #fff;}
    .flow-card {padding: 18px 18px 20px;}
    .flow-card::before {top: 34px; width: 12px; height: 12px;}
    .flow-step:nth-child(n) .flow-card::before {left: -7px; right: auto; border: 1px solid #d5e8dd; border-right: none; border-top: none;}
    .flow-step.is-goal .flow-card::before {border-color: var(--green);}
    .flow-head {gap: 12px; padding-bottom: 10px; margin-bottom: 10px;}
    .flow-icon {width: 46px; height: 46px; font-size: 1.9rem;}
    .flow-label {font-size: 1.3rem;}
    .flow-head h3 {font-size: 1.8rem;}
    /* 【2026-09-26】オーナー指摘「スマホで文字が大きすぎる」→ 本文16px・太字のままだと狭い帯で大きく見えるので 14px に */
    .flow-note {margin-top: 30px; padding: 16px 18px; gap: 18px; justify-content: flex-start; text-align: left; font-size: 1.4rem; line-height: 1.7;}
    .flow-note i {font-size: 2rem;}
}

/* -----------------------------------------------------------
【2026-09-26】ihinseiri sec06「作業事例・お客様の声」：専用カード（.case-*）
オーナー指示「作業事例・お客様の声を洗練させて」。スライダー（swiper02）はトップと同じ動きのまま、1件の中身だけ組み直す（ex-box は6ページ共用のため触らない）
・薄黄の地（.sec06）に白いカード。上：地名の札＋見出し＋件数／下：左に写真（BEFORE・AFTER は2枚並び＋間に矢印）、右に料金（緑の帯）・間取り・作業人数・タグ・本文
・スライダーの矢印は PC（1200px〜）でカードの外に出す（写真にかぶらないように）
・本文中のお客様のお言葉は mark.case-voice で蛍光ペン風に
----------------------------------------------------------- */
.case-slider .swiper-slide {padding: 6px 4px 22px;}
.case-card {position: relative; padding: 34px 40px 36px; background: #fff; border-radius: 14px; box-shadow: 0 14px 30px -18px rgba(90, 80, 0, .35);}

.case-head {position: relative; padding-right: 110px; padding-bottom: 20px; border-bottom: 1px dashed #cfe3d8;}
.case-area {display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; margin-bottom: 10px; font-size: 1.4rem; font-weight: bold; line-height: 1.4; color: var(--green); background: var(--green05); border-radius: 4px;}
.case-ttl {font-size: 2.4rem; font-weight: bold; line-height: 1.5; color: var(--green03);}
.case-count {position: absolute; top: 0; right: 0; font-family: "Barlow Condensed", sans-serif; font-size: 2.4rem; font-weight: 600; letter-spacing: .06em; line-height: 1; color: var(--green);}
.case-count span {margin-left: 4px; font-size: 1.6rem; font-weight: 400; color: var(--green02);}

.case-main {display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: start; margin-top: 28px;}
.case-photos {position: relative; display: grid; gap: 12px;}
.case-photos.is-pair {grid-template-columns: 1fr 1fr;}
.case-photos.is-pair::after {content: "\f054"; position: absolute; top: 50%; left: 50%; z-index: 1; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: "Font Awesome 7 Free"; font-weight: 900; font-size: 1.3rem; color: #fff; background: var(--green); box-shadow: 0 0 0 4px #fff;}
.case-photo {position: relative; margin: 0; overflow: hidden; border-radius: 10px;}
.case-photo img {display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2;}
.case-photos.is-pair .case-photo img {aspect-ratio: 4 / 5;}
.case-photo-label {position: absolute; top: 10px; left: 10px; padding: 3px 10px; font-family: "Barlow Condensed", sans-serif; font-size: 1.5rem; font-weight: 600; letter-spacing: .1em; line-height: 1.3; color: #fff; background: rgba(40, 40, 40, .78); border-radius: 3px;}
.case-photo-label.is-after {background: var(--green);}

.case-data {display: flex; flex-direction: column; gap: 16px;}
.case-price {display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 22px; color: #fff; background: var(--green); border-radius: 10px;}
.case-price-label {font-size: 1.5rem; font-weight: bold;}
.case-price-num {font-family: "Barlow Condensed", sans-serif; font-size: 4.6rem; font-weight: 600; letter-spacing: .02em; line-height: 1;}
.case-price-num span {margin-left: 4px; font-family: "Noto Sans JP", sans-serif; font-size: 1.7rem; font-weight: bold;}
.case-spec {display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0;}
.case-spec > div {padding: 12px 16px; border: 1px solid #dcebe3; border-radius: 8px;}
.case-spec dt {display: flex; align-items: center; gap: 6px; font-size: 1.3rem; font-weight: bold; color: var(--green); margin-bottom: 4px;}
.case-spec dd {margin: 0; font-size: 1.8rem; font-weight: bold; line-height: 1.4; color: #222;}
.case-tags {display: flex; flex-wrap: wrap; gap: 8px;}
.case-tags li {padding: 4px 10px; font-size: 1.3rem; line-height: 1.5; color: var(--green03); background: var(--yellow02); border-radius: 4px;}

.case-text {padding-top: 16px; line-height: 1.9; border-top: 1px dashed #cfe3d8;}
@media screen and (min-width: 1200px) {
    /* 2列のときは写真を右列（料金〜本文）の高さまで伸ばす */
    .case-main {align-items: stretch;}
    .case-photos {height: 100%; grid-auto-rows: 1fr;}
    .case-photo img,
    .case-photos.is-pair .case-photo img {aspect-ratio: auto; min-height: 300px;}
    .case-slider .swiper-button-prev {left: -30px;}
    .case-slider .swiper-button-next {right: -30px;}
}
.case-voice {padding: 0 2px; font-weight: bold; color: inherit; background: linear-gradient(transparent 58%, var(--yellow) 58%);}

@media screen and (min-width: 768px) and (max-width: 1199px) {
    .case-card {padding: 28px 28px 30px;}
    .case-main {grid-template-columns: 1fr; gap: 20px;}
    .case-ttl {font-size: 2.1rem;}
}
@media screen and (max-width: 767px) {
    .case-slider .swiper-slide {padding: 4px 2px 16px;}
    /* スマホは矢印が料金の帯に重なるので隠す（スワイプ・下のスクロールバー・CASE n / 3 で送れることが分かる） */
    .case-slider .swiper-button-prev,
    .case-slider .swiper-button-next {display: none;}
    .case-card {padding: 20px 16px 22px; border-radius: 10px;}
    .case-head {padding-right: 64px; padding-bottom: 14px;}
    .case-area {font-size: 1.3rem; padding: 3px 10px; margin-bottom: 8px;}
    .case-ttl {font-size: 1.8rem;}
    .case-count {font-size: 1.9rem;}
    .case-count span {font-size: 1.3rem;}
    .case-main {grid-template-columns: 1fr; gap: 16px; margin-top: 18px;}
    .case-photos {gap: 8px;}
    .case-photos.is-pair::after {width: 28px; height: 28px; margin: -14px 0 0 -14px; font-size: 1.1rem; box-shadow: 0 0 0 3px #fff;}
    .case-photo-label {font-size: 1.3rem; top: 6px; left: 6px; padding: 2px 8px;}
    .case-price {padding: 12px 16px;}
    .case-price-label {font-size: 1.4rem;}
    .case-price-num {font-size: 3.6rem;}
    .case-price-num span {font-size: 1.5rem;}
    .case-spec > div {padding: 10px 12px;}
    .case-spec dd {font-size: 1.6rem;}
    .case-tags li {font-size: 1.2rem;}
    .case-text {padding-top: 14px; font-size: 1.5rem; line-height: 1.8;}
}

/* tokushu-seiso sec01「こんな時にご相談ください」（2026-09-26追加）
   page-area.php の .sb-section-head + .sec02-list（チェックマーク箇条書き）パターンを流用し、
   style.css 側では .index .sec02 / .area .sec02 にしかスコープされていないため、このページ用に同等のスタイルを追加。
----------------------------------------------------------- */
.tokushu-seiso .sec01 .consult-list-head {margin: 40px 0 -30px;}
.tokushu-seiso .sec01 .sec02-bg {background: #fff; padding: 45px; border-radius: 10px;}
.tokushu-seiso .sec01 .sec02-list-item {position: relative; font-weight: bold; border-bottom: 2px dotted var(--green); margin: 0; padding: 0 0 15px 30px; font-size: 1.8rem;}
.tokushu-seiso .sec01 .sec02-list-item::before {position: absolute; content: "\f058"; font: var(--fa-font-solid); top: 6px; left: 0; color: var(--green);}
@media screen and (max-width: 767px) {
    .tokushu-seiso .sec01 .consult-list-head {margin: 30px 0 -20px;}
    .tokushu-seiso .sec01 .sec02-bg {padding: 24px;}
    .tokushu-seiso .sec01 .sec02-list-item {font-size: 1.5rem; padding: 0 0 12px 26px;}
}

/*
ihinseiri sec01「遺品整理・生前整理とは？」— 左に文・右に写真（参考：/about/ 代表挨拶）【2026-09-27】
----------------------------------------------------------- */
.intro-msg {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    max-width: 1080px;
    margin: 0 auto;
}
.intro-msg-txt {
    container-type: inline-size;
}
.intro-msg-ttl {
    font-weight: bold;
    /* 見出し本体は2行固定（2026-09-27 オーナー指示）。1行18字が列幅に収まるよう列幅に合わせて縮める */
    font-size: min(2.4rem, 4.9cqi);
    line-height: 1.7;
    padding-bottom: 30px;
}
.intro-msg-sub {
    display: block;
    color: var(--green);
}
.intro-msg-txt p {
    line-height: 1.9;
}
.intro-msg-img img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 540 / 400;
    object-fit: cover;
}
@media screen and (max-width: 1024px) {
    .intro-msg {gap: 30px;}
}
@media screen and (max-width: 767px) {
    .intro-msg {grid-template-columns: 1fr; gap: 20px;}
    .intro-msg-img {order: -1;}
    .intro-msg-ttl {padding-bottom: 15px;}
}

/*
ihinseiri 前半（sec01〜04・point-sec）の区画間の余白【2026-09-27】
オーナー指摘「sec同士の間が近い」→ 45px のままだった前半を広げる。
「とは？」→「サービス内容」は大きな区切りなので 120px、Service01〜03 の間は 80px、Service03 → 黄の帯（point-sec）は 100px
----------------------------------------------------------- */
/* 同日オーナー指定（開発ツールで調整した値）：sec02 上 120px → 80px、「サービス内容」見出し（.uldot-head・全20ページ共用のため ihinseiri 限定）の下 45px → 60px */
.ihinseiri .sec02 {padding-top: 80px;}
.ihinseiri .uldot-head {margin-bottom: 60px;}
.ihinseiri .sec03,
.ihinseiri .sec04 {padding-top: 80px;}
.ihinseiri .point-sec {margin-top: 100px;}
@media screen and (max-width: 767px) {
    .ihinseiri .sec02 {padding-top: 50px;}
    .ihinseiri .uldot-head {margin-bottom: 30px;}
    .ihinseiri .sec03,
    .ihinseiri .sec04 {padding-top: 50px;}
    .ihinseiri .point-sec {margin-top: 60px;}
}

/*
スマホ専用の改行【2026-10-01】
クライアント要望：/kyoka/ の見出し「エイトクリーンサービスの資格・許可について」をスマホでは「エイトクリーンサービスの／資格・許可について」の2行にする（PCは現状のまま）。
.section-head-sub は inline-flex で <br> が効かないため、PHP側で文言を1つの span に包み、その中の <br class="sp-br"> をスマホだけ有効にする
----------------------------------------------------------- */
.sp-br {display: none;}
@media screen and (max-width: 767px) {
    .sp-br {display: inline;}
}