@charset 'UTF-8';
/*
    Template: swell
    Theme Name: Misono Base
    Theme URI: https://swell-theme.com/
    Description: 株式会社美園ベース Theme
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* Refactor: styles moved to old_style.css on 2026-03-15 */
/* @import "style_old.css"; */

/*********************************
見出し 設定
*********************************/
/* PC base */
:root {
  --fz-h1: 40px;
  --fz-h2: 32px;
  --fz-h3: 26px;
  --fz-h5: 18px;
  --fz-h4: 22px;
  --lh-heading: 1.4;
  --ls-h1h2: 0.04em;
  --ls-h3h4h5: 0.03em;
}

/* SP base */
@media (max-width: 767px) {
  :root {
    --fz-h1: 28px;
    --fz-h2: 24px;
    --fz-h3: 20px;
    --fz-h4: 18px;
    --fz-h5: 16px;
  }
}

/**********************************************************************************************/
/* 全体 */
/**********************************************************************************************/
/* ディスプレイ */
/* 元々入っているもの sp_only pc_only */
/* 追加 */
.display-none{
  display: none;
}

/* 全ページ */
.l-content {
  padding-top: 0em;
}

/* パンくずとコンテンツの間の余白 */
.blog .l-content,
.post-type-archive-t_voice .l-content,
.post-type-archive-t_works .l-content,
.post-type-archive-t_useful .l-content,
.single-post .l-content,
.single-t_voice .l-content,
.single-t_works .l-content,
.single-t_useful .l-content,
.archive .l-content {
  padding-top: 3em;
}

/* 詳細ページの下余白 */
main.single--t-works,
main.single--t-voice,
main.single--t-useful,
.single-post main {
  padding-bottom: 50px;
}

.post_content h2 {
  font-size: var(--fz-h2);
}

/* 768px以上の画面（PC）では改行を消す */
@media screen and (min-width: 768px) {
  .br-sp {
    display: none;
  }
}

/* ブログパーツの中にフルワイドを置いたときの二重余白の解消 */
/* 下側の余白消し。これはブログパーツ自体の余白を消す */
.p-blogParts.post_content {
  margin-bottom: 0;
}

/* 上側の余白消し。これはブログパーツ内の余白を消す */
.p-blogParts.post_content > * {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

/* footerサービスリストの余白埋め */
#section-footer-service-list {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  margin-bottom: -25px !important;
}

#section-worksarea {
  margin-top: -35px !important;
}

/* 画像のマウスオーバーで少しだけZoom */
.link-zoom img{
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.link-zoom:hover img{
    transform: scale(1.02);
    filter: brightness(1.05);
}

/*********************************
Heading Typography
サイト全体の見出し(hタグ)
*********************************/

/*** 共通 ***/
.wp-block-heading {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  line-height: var(--lh-heading);
  color: #222;
}

/*** h1 ***/
h1.wp-block-heading {
  font-size: var(--fz-h1);
  margin: 2.4em 0 1.4em;
  letter-spacing: var(--ls-h1h2);
}

/*** h2 ***/
h2.wp-block-heading {
  font-size: var(--fz-h2);
  margin: 2em 0 1.2em;
  letter-spacing: var(--ls-h1h2);
}

/*** h3 ***/
h3.wp-block-heading {
  font-size: var(--fz-h3);
  margin: 1.8em 0 0.8em;
  letter-spacing: var(--ls-h3h4h5);
}

/*** h4 ***/
h4.wp-block-heading {
  font-size: var(--fz-h4);
  margin: 1.6em 0 0.6em;
  letter-spacing: var(--ls-h3h4h5);
}

/*** h5 ***/
h5.wp-block-heading {
  font-size: var(--fz-h5);
  margin: 1.4em 0 0.6em;
  letter-spacing: var(--ls-h3h4h5);
}

/*** SWELL セクション配置 ***/
.wp-block-heading.is-style-section_ttl {
  text-align: center;
}

/* --------------------------------------------------------
 * Header CTA buttons (PC only) ※画像ボタン用に最適化
 * -------------------------------------------------------- */

/* モバイルでは非表示 */
.header-cta {
  display: none;
}


@media screen and (min-width: 769px) {
  /* CTA全体（横並び） */
  .header-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 24px;
  }

  /* ボタン本体 */
  .header-cta__btn {
    display: inline-block;
  }

  /* 画像ボタン */
  .header-cta__btn img {
    display: block; /* 下の余白防止 */
    height: 50px; /* 高さ統一 */
    width: auto;

    transform: translateY(-4px); /* ←ズレ補正（ここ微調整OK） */

    transition:
      transform 0.2s ease,
      opacity 0.2s ease;
  }

  /* hover時（自然なボタン感） */
  .header-cta__btn:hover img {
    transform: translateY(-4px) scale(1.03); /* 上位置維持＋少し拡大 */
    opacity: 0.9;
  }
}

/*********************************
Block style mapping (SWELL is-style-*)
SWELLの装飾を上書き。コンテンツ制作時に見出しタグをセットするだけで適用される装飾
*********************************/

/* is-style-default => c-heading-default 相当 */
h2.wp-block-heading.is-style-default {
  position: relative;
  padding-left: 20px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e6e6e6;
}
h2.wp-block-heading.is-style-default::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 70%;
  transform: translateY(-50%);
  background: #f5d333;
}

h3.wp-block-heading.is-style-default {
  position: relative;
  padding-bottom: 8px;
  border-bottom: solid 4px #e6e6e6;
}
h3.wp-block-heading.is-style-default::after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 4px #f5d333;
  bottom: -4px;
  width: 25%;
}

h4.wp-block-heading.is-style-default {
  position: relative;
  padding-left: 18px;
}
h4.wp-block-heading.is-style-default::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 10px;
  transform: translateY(-50%);
  background: #f5d333;
}

/* is-style-section_ttl => c-heading-default-ttl 相当（h2/h3 分離） */
h2.wp-block-heading.is-style-section_ttl {
  position: relative;
  padding-bottom: 12px;
}
h2.wp-block-heading.is-style-section_ttl::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100px;
  height: 6px;
  transform: translateX(-50%);
  background: #f5d333;
  border-radius: 3px;
}

h3.wp-block-heading.is-style-section_ttl {
  position: relative;
  padding-bottom: 10px;
}
h3.wp-block-heading.is-style-section_ttl::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 90px;
  height: 4px;
  transform: translateX(-50%);
  background: #f5d333;
}

/**********************************************************************************************/
/* 全体レイアウト */
/**********************************************************************************************/
/* フッター余白詰め(copyrightとfooter間) */
.l-content {
  margin-bottom: 0px;
}
.w-beforeFooter {
  margin-top: 0px;
  margin-bottom: 0px;
}

/*** メニュー ***/
.c-gnav > .menu-item > a .ttl {
  font-weight: bold;
}

/*** footerブロック ***/
.footer_companyinfo p {
  line-height: 120%;
  margin-bottom: 0.5em;
}

/* for SP */
@media screen and (max-width: 767px) {
  .footer_companyinfo .company_logo {
    max-width: 250px;
    margin: auto;
  }
}

.footer_companyinfo .company_name {
  font-size: 1.4rem;
  font-weight: 900;
}

.footer_companyinfo .address {
  font-size: 1rem;
}

.footer_companyinfo .tel {
  margin-top: 1.5rem;
  font-size: 1.6rem;
  font-weight: 900;
}

.footer_companyinfo .fax {
  font-size: 1rem;
}

/**********************************************************************************************/
/* 汎用パーツ */
/**********************************************************************************************/

/*********************************
カード基本デザイン
カスタマイズの際は親divにて[works_card]のclassを付ける
*********************************/
.hp-swiper .swiper-wrapper {
  padding: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
}

/*** カードレイアウト 施工事例一覧（3 → 2 → 1）***/
.useful_card,
.works_card,
.voice_card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 900px) {
  .useful_card,
  .works_card,
  .voice_card {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .useful_card,
  .works_card,
  .voice_card {
    grid-template-columns: 1fr;
  }
}

/* 共通項目 */
.t-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.25s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  height: 100%;
}

.t-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/*** 画像エリア 4:3比率 ***/
.t-card__media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-bottom: 3px solid #f5d333;
}

.t-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

/*** hover演出 画像ズーム＋影 ***/
.t-card:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

.t-card:hover .t-card__media img {
  transform: scale(1.05);
}

/*** 本文エリア ***/
.t-card__body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/*** バッジエリア ***/
.t-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/*** バッジ共通 ***/
.t-card__badge {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 10px;
  line-height: 1;
  font-weight: 600;
}

/*** サービスタイプバッジ ***/
.t-card__badge--service,
.p-works__term--service,
.p-voice__term--service {
  background: #1f4f7a;
  color: #fff;
}

/*** エリアバッジ ***/
.t-card__badge--area,
.p-works__term--area,
.p-voice__term--area {
  background: #e9eef4;
  color: #333;
}

/*** PICKUPバッジ ***/
.t-card__badge--pickup {
  position: absolute;
  top: 15px;
  left: 10px;
  background: #005fcf;
  color: #fff;
  font-size: 15px;
  padding: 5px 10px;
  border-radius: 4px;
  font-weight: bold;
  z-index: 10; /* マウスオーバーで消える対策 */
  transform: rotate(-10deg);
}

/*** NEWバッジ ***/
.t-card__badge--new {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #e60023;
  color: #fff;
  font-size: 15px;
  padding: 5px 10px;
  border-radius: 4px;
  font-weight: bold;
  z-index: 10; /* マウスオーバーで消える対策 */
}

/*** タイトル ***/
.t-card__title,
h3.t-card__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
}

/*** タイトル2行制限 カード高さ揃え ***/
.t-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* SWELL装飾上書き */
h3.t-card__title {
  margin-top: 5px;
}
h3.t-card__title::before {
  background: none;
}

.t-card__meta {
  text-align: end;
  font-size: 0.8em;
}

.t-card__comment {
  line-height: 1.6;
  min-height: 3.2em; /* 2 lines */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/****** スマホ調整 ******/
@media (max-width: 600px) {
  .t-card__body {
    padding: 14px 16px 16px;
  }

  .t-card__title {
    font-size: 15px;
  }

  .t-card__badge {
    font-size: 11px;
  }
}

/*********************************
tile（リッチカラム用タイルUI）
*********************************/

/*** カラム内側 ***/
.swell-block-columns.tile > .swell-block-columns__inner {
  align-items: stretch;
}

/*** タイル本体 ***/
.swell-block-columns.tile .swell-block-column {
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* SWELL装飾上書き */
.swell-block-columns.tile .swell-block-column > * {
  margin-top: 0;
  margin-bottom: 0;
}

/*** ラベル ***/
.swell-block-columns.tile .reason-label {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 10px;
  border-radius: 3px;
  background: #ffe830;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #333333;
  text-align: center;
}

/*** 画像 ***/
.swell-block-columns.tile .wp-block-image {
  margin-bottom: 14px;
}

.swell-block-columns.tile .wp-block-image img {
  width: 100%;
  height: auto;
}

/*** タイトル ***/
/* tile内のHタグは折り返しがあるので、全てh3の少し小さめ */
.swell-block-columns.tile :is(h2, h3, h4, h5, h6, .wp-block-heading) {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e5e5;
  font-size: calc(var(--fz-h3) * 0.8);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: #333333;
  text-align: center;
}

/*** 本文 ***/
.swell-block-columns.tile p:not(.reason-label) {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #444444;
  text-align: left;
}

.swell-block-columns.tile p:last-child {
  flex-grow: 1;
}

/* PCのみタイトル高さ揃え */
@media print, (min-width: 768px) {
  .swell-block-columns.tile :is(h2, h3, h4, h5, h6, .wp-block-heading) {
    min-height: 2.9em;
  }
}

/* for SP  */
@media screen and (max-width: 767px) {
  .swell-block-columns.tile .swell-block-column {
    padding: 20px 18px;
  }

  .swell-block-columns.tile p:not(.reason-label) {
    font-size: 0.9rem;
  }
}

/************************************************/
/* リスト */
/************************************************/

/*********************************
list-board（ボード風リスト）
*********************************/

/*** ボックス ***/
.wp-block-list.list-board {
  padding: 24px 26px;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/*** リスト余白調整 ***/
.wp-block-list.list-board li {
  margin-top: 0.4em;
}

/* for SP  */
@media screen and (max-width: 767px) {
  .wp-block-list.list-board {
    padding: 20px 18px;
  }
}
/************************************************/
/* dlテーブル */
/* dlを使用したテーブル */
/************************************************/
.c-dltable,
.c-dltable > dt,
.c-dltable > dd {
  box-sizing: border-box;
}

.c-dltable > dt,
.c-dltable > dd {
  padding: 1em;
  margin: 0px 0px 0px 0px;
}

.c-dltable > dt {
  background-color: #f7f7f7;
  color: #333333;
}

.c-dltable > dd {
  background-color: #ffffff;
  color: #333333;
}

dl.c-dltable > dd > ul {
  margin-bottom: 0px;
}

/* for SP 縦並びにする */
@media screen and (max-width: 767px) {
  .c-dltable > dt {
    border: 1px solid #dbdbdb;
    border-bottom: none;
  }
  .c-dltable > dd {
    border: 1px solid #dbdbdb;
    border-top: none;
  }
  .c-dltable > dt,
  .c-dltable > dd {
    text-align: center;
  }
  .c-dltable > dd > ul {
    text-align: left;
  }
}

/* for PC */
@media print, (min-width: 768px) {
  .c-dltable {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #dbdbdb;
  }
  .c-dltable > dt,
  .c-dltable > dd {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-top: 1px solid #dbdbdb;
  }

  .c-dltable > dt {
    width: 20%;
  }
  .c-dltable > dd {
    width: 80%;
    border-right: 1px solid #ffffff;
  }
}

.c-dltable-form {
  margin-bottom: 30px;
}

.c-dltable-company {
  max-width: 860px; /* 760〜960pxくらいで好みに調整OK */
  margin-left: auto;
  margin-right: auto;
}

/* PC時：ddの長文がある場合の見やすさ（任意） */
@media print, (min-width: 768px) {
  .c-dltable-company > dd {
    overflow-wrap: anywhere; /* 住所やURLなどの長い文字列対策 */
  }
}

/************************************************/
/* アーカイブの絞り込みフィルター(施工事例・お客様の声) */
/************************************************/

/* ===== 絞り込み（archive_filter） ===== */
.archive_filter {
  margin: 20px 0 26px;
  padding: 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  background: #fff;
}

.archive_filter__row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}

@media (max-width: 900px) {
  .archive_filter__row {
    grid-template-columns: 1fr 1fr;
  }
  .archive_filter__btns {
    grid-column: 1 / -1;
    display: flex;
    gap: 10px;
  }
}
@media (max-width: 560px) {
  .archive_filter__row {
    grid-template-columns: 1fr;
  }
  .archive_filter__btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

.archive_filter__labelText {
  display: block;
  font-size: 12px;
  opacity: 0.85;
  margin: 0 0 6px;
}

.archive_filter__select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 6px;
  background: #fff;
}

.archive_filter__btn {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: #fff;
  cursor: pointer;
  white-space: nowrap;
}

.archive_filter__btn--apply {
  border-color: rgba(0, 102, 204, 0.35);
  background: rgba(0, 102, 204, 0.08);
  color: #0066cc;
}
.archive_filter__btn--apply:hover {
  background: rgba(0, 102, 204, 0.14);
}

.archive_filter__btn--reset:hover {
  background: rgba(0, 0, 0, 0.04);
}

.archive_filter__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  margin-top: 12px;
}

.archive_filter__resultTitle {
  font-size: 13px;
  opacity: 0.9;
}

.archive_filter__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.archive_filter__chipsLabel {
  font-size: 12px;
  opacity: 0.75;
}

/* ================================
3カラムリスト（SWELL用）
.list-columns-3 を付けたリストをカラム化
================================ */

/* グリッド化 */
.list-columns-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* PC 3列 */
  gap: 12px 24px; /* 縦 横 */
}

/* liの余白リセット（SWELL対策） */
.list-columns-3 li {
  margin: 0;
}

/* タブレット */
@media (max-width: 960px) {
  .list-columns-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* スマホ */
@media (max-width: 599px) {
  .list-columns-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/**********************************************************************************************/
/* ブログパーツ用 */
/**********************************************************************************************/
/************************************************/
/* 地域密着のエリアマップ(マップの上にピン)  */
/************************************************/
#section-worksarea {
  z-index: 5;
}

/* セクション */
.worksareamap {
  text-align: center;
}

/* タイトル */
.worksareamap__title {
  margin-bottom: 30px;
}

/* マップエリア */
.worksareamap__area {
  position: relative; /* 人物配置の基準 */
  max-width: 1000px;
  margin: 0 auto;
  margin-top: 100px;
}

/* マップ */
.worksareamap__map {
  width: 1000px;
  height: auto;
  display: block;
}

/* 人物 */
.worksareamap__person {
  position: absolute;
  top: -200px;
  right: -90px;
  width: 500px;
  height: auto;
  z-index: -10;
}

/* スマホ調整 */
@media (max-width: 768px) {
  .worksareamap__area {
    margin-top: 150px;
  }

  .worksareamap__person {
    top: -130px;
    right: 0px;
    width: 300px;
  }
}

/*********************************
Visual Image 挿絵
*********************************/

/*** 共通 ***/
figure.c-visual {
  position: absolute;
  z-index: 1;
  max-width: 300px;
  margin: 0;
  pointer-events: none;
}

figure.c-visual img {
  display: block;
  width: 100%;
  height: auto;
}

/* for SP  */
@media screen and (max-width: 767px) {
  figure.c-visual {
    position: relative;
    display: block;
    max-width: 250px;
    margin: 20px auto 0;
    right: auto;
    left: auto;
    top: auto;
    bottom: auto;
  }
}

/*** visual-worry01 ***/
/* for PC */
@media (min-width: 768px) {
  figure.c-visual.visual-worry01 {
    right: -100px;
    bottom: -120px;
  }
}

/* for SP  */
@media screen and (max-width: 767px) {
  figure.c-visual.visual-worry01 {
    margin-top: -80px;
  }
}

/*** visual-visual-illust-contact-telとPC cta-footer ***/
/* for PC */
@media (min-width: 768px) {
  figure.c-visual.visual-illust-contact-tel {
    left: -210px;
    bottom: -80px;
  }
  figure.c-visual.visual-illust-contact-pc {
    right: -200px;
    bottom: -80px;
  }
}

/* for SP  */
@media screen and (max-width: 767px) {
  figure.c-visual.visual-illust-contact-tel {
    position: absolute;
    max-width: 130px;
    left: -20px;
    bottom: -50px;
  }
  figure.c-visual.visual-illust-contact-pc {
    position: absolute;
    max-width: 130px;
    right: -20px;
    bottom: -40px;
  }
}

/**********************************************************************************************/
/* 各ページ用 */
/**********************************************************************************************/

/*********************************/
/* トップページ */
/*********************************/

/*************** section index_mainimg ***************/
.index_mainimg {
  height: 90vh;
}

/* for SP */
@media screen and (max-width: 767px) {
  .index_mainimg {
    height: 75vh;
  }
}

/*** HERO 基本枠 ***/
.pvr-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #000; /* 上下切れた時の背景 */
}

.pvr-hero-stage {
  position: relative;
  width: 100%;
  height: 100%;
}

/*** 背景画像（中央固定） ***/
.pvr-hero-bg {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  z-index: 0;
  pointer-events: none;
  /* 描画安定 */
  will-change: transform;
  backface-visibility: hidden;
}

/* for SP */
@media screen and (max-width: 767px) {
  .pvr-hero-bg {
    top: 47.5%;
    left: 50%;
    transform: translate(-50%, -52.5%);
  }
}

.pvr-hero-bg img {
  display: block;
  width: 100vw;
  height: auto;
  max-width: none;
  user-select: none;
}

/*** 透過PNGテキスト ***/
.pvr-hero-text {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;

  will-change: transform;
  backface-visibility: hidden;
}

.pvr-hero-text img {
  display: block;
  height: auto;
  max-width: none;
  width: 100vw;
}

/*** SP：1200px未満 横幅フィット＋ヒーロー高さ80vh ***/
@media (max-width: 1199px) {
  .pvr-hero {
    height: 80vh;
    height: 80svh;
    height: 80dvh;

    min-height: 600px;
  }

  .pvr-hero-bg img,
  .pvr-hero-text img {
    width: 100vw;
    max-width: 100vw;
  }
}

/*** SEO / アクセシビリティ ***/
.pvr-hero-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;

  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*************** section ***************/
/* トップページキャッチ部分(黄色背景) */

#index_catch p {
  font-size: 20px;
}

/* for SP */
@media screen and (max-width: 767px) {
  #index_catch h2 {
    font-size: 1.3rem;
    text-align: center;
  }

  #index_catch p {
    font-size: 1rem;
    text-align: center;
  }
}

/*** index_catch：すりガラス透過 ***/
/* ベース（ヒーローの上に被さる） */
#index_catch {
  position: relative;
  z-index: 5;
  background: rgba(255, 215, 20, 0.9) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: 0px; /* 次ブロック(エリアマップ)との余白詰め */
}

@media (min-width: 768px) {
  #index_catch {
    margin-top: -15vh;
  }
}
/* SPはヒーローが80vhなので、余計に引き上げない */
@media (max-width: 767px) {
  #index_catch {
    margin-top: -12vh;
  }
}

/* backdrop-filterが効かない環境のフォールバック */
@supports not (backdrop-filter: blur(1px)) {
  #index_catch {
    background: rgba(254, 227, 22, 0.85) !important;
  }
}

/* --------------------------------
トップページ 
workslist 背景装飾
-------------------------------- */

/* 親要素を基準にする */
#section-workslist-index {
  position: relative;
  overflow: hidden; /* はみ出し防止 */
}

/* 左上の背景画像 */
#section-workslist-index::before {
  content: "";
  position: absolute;
  top: -100px;
  left: -150px;
  width: 800px; /* 画像サイズ */
  height: 600px;

  background-image: url("./assets/img/visual-shiroari01_1200x700.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;

  z-index: 1;
  pointer-events: none;
}

/* 右下の背景画像 */
#section-workslist-index::after {
  content: "";
  position: absolute;
  bottom: 40px;
  right: -40px;
  width: 400px; /* 画像サイズ */
  height: 400px;

  background-image: url("./assets/img/visual-pipe-cleaning01_1000x1000.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;

  z-index: 0;
  pointer-events: none;
}

/* --------------------------------
 SP調整
-------------------------------- */
@media (max-width: 768px) {
  /* 左上画像 */
  #section-workslist-index::before {
    top: -70px;
    left: -150px;
    width: 420px;
    height: 320px;
    opacity: 0.6;
  }

  /* 右下画像 */
  #section-workslist-index::after {
    bottom: -60px;
    right: 0px;
    width: 240px;
    height: 240px;

    opacity: 0.7;
  }
}

/* --------------------------------
エリアマップ 背景装飾　左右にクルマ
-------------------------------- */
/* 親要素を基準にする */
#section-worksarea {
  position: relative;
  overflow: hidden; /* はみ出し防止 */
}

/* 左上の背景画像 シロアリカー */
#section-worksarea::before {
  content: "";
  position: absolute;
  top: 40%;
  left: 0px;
  width: 400px; /* 画像サイズ */
  height: 200px;

  background-image: url("./assets/img/visual-car-shiroari_1000x500.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;

  z-index: 1;
  pointer-events: none;
}

/* 右上の背景画像 パイプカー */
#section-worksarea::after {
  content: "";
  position: absolute;
  top: 60%;
  right: 0px;
  width: 400px; /* 画像サイズ */
  height: 200px;

  background-image: url("./assets/img/visual-car-pipe-cleaning_1000x500.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;

  z-index: 0;
  pointer-events: none;
}


/* --------------------------------
 SP調整
-------------------------------- */
@media (max-width: 768px) {
  /* SP 左上の背景画像 シロアリカー */
  #section-worksarea::before {
    top: 10px;
    left: 0px;
    width: 150px;
    height: 75px;
    opacity: 0.8;
  }

  /* SP 右上の背景画像 パイプカー */
  #section-worksarea::after {
    top: 10px;
    right: 0px;
    width: 150px;
    height: 75px;

    opacity: 0.8;
  }
}


/*************** section ***************/
/* pc only */
@media print, (min-width: 768px) {
  #section-worry figure.offset {
    position: relative;
    top: 50px;
  }
}

/*************** section thatswhy ***************/
.arrow-section {
  position: relative;
  background: #222;
  color: #fff;
  padding: 60px 20px;
  overflow: hidden; /* 重要 */
  z-index: 100;
}

/* 上側を下向き▽に切り欠く */
.arrow-section::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 45px; /* 深さ調整 */
  background: #f1f8f9; /* 上のセクション背景色 */
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* スマホ用（▽を浅くする） */
@media (max-width: 768px) {
  .arrow-section::before {
    height: 25px; /* ←ここを浅く */
  }
}

/*************** section ***************/
/* ハウスマップ */

/* ラッパー */
.housemap {
  position: relative;
}

/* 画像はブロックの幅にフィット */
.housemap img {
  width: 100%;
  height: auto;
  display: block;
}

/* for PC */
@media (min-width: 768px) {
  /* PCのみボタンが被るので半透明 */
  .house_cross-section01 {
    background-color: #fff;
    opacity: 0.5;
  }
}

.bubble_housemap_guide{
  position: absolute;
  z-index: 2;
  top: 5%;
  right: 5%;
}

.bubble_housemap_guide img{
  max-width: 300px;
}

/* for SP スマホでは吹き出しださない */
@media (max-width: 768px) {
  .bubble_housemap_guide{
    display: none;
  }
}

/* ボタン群：PCでは画像の上に重ねる */
.housemap__buttons {
  position: absolute;
  inset: 0; /* 画像の枠いっぱいを基準にする */
  pointer-events: none; /* ここをONにすると画像上でもクリック可能に調整しやすい */
}

.housemap__buttons .is-style-btn_solid a {
  background-color: #ffe830;
}

.housemap__buttons .is-style-btn_solid a {
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5);
}

/* ボタン自体はクリック可能に戻す */
.housemap__buttons a,
.housemap__buttons .swell-block-button,
.housemap__buttons .swell-block-button__link {
  pointer-events: auto;
}

/* ボタン共通：絶対配置 */
.housemap__buttons .swell-block-button {
  position: absolute;
}

.housemap__buttons .swell-block-button__link {
  border: 2px solid #fff;
  color: #333333;
  /* 0 10px 25px rgba(0, 0, 0, 0.15); */
}

/* ---- ここから位置指定（PC） ---- */
/* ※数値は仮。画像に合わせて調整してください */
.btn_index_housemap_shiroari {
  left: 88%;
  top: 89%;
}
.btn_index_housemap_pipe-cleaning {
  left: 13%;
  top: 89%;
}
.btn_index_housemap_gaiju-gaichu {
  left: 12%;
  top: 71%;
}
.btn_index_housemap_gaiheki {
  left: 18%;
  top: 49%;
}
.btn_index_housemap_shikke-taisaku {
  left: 40%;
  top: 89%;
}
.btn_index_housemap_taishin-hokyo {
  left: 63%;
  top: 89%;
}
.btn_index_housemap_yane {
  left: 22%;
  top: 17%;
}
.btn_index_housemap_dannetsu {
  left: 41%;
  top: 35%;
}
.btn_index_housemap_haipin-kaishu {
  left: 90%;
  top: 68%;
}

/* ちょい調整用（必要なら） */
.housemap__buttons .swell-block-button {
  transform: translate(-50%, -50%); /* left/top を“中心基準”にしたい場合 */
}

/* =========================
   SP：画像下に通常表示で並べる
   ========================= */
@media (max-width: 767px) {
  /* ① 画像上配置を解除して、通常フローへ戻す */
  .housemap__buttons {
    position: static;
    inset: auto;
    pointer-events: auto;

    /* ② 画像の下に並べるレイアウト */
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr; /* 縦1列 */
    justify-items: center; /* 中央寄せ */
    gap: 10px; /* 余白（8〜12推奨） */
  }

  /* ③ absolute/座標/transform を解除 */
  .housemap__buttons .swell-block-button {
    position: static;
    left: auto;
    top: auto;
    transform: none;

    /* ④ 幅を揃える */
    width: min(92%, 500px);
    margin: 0 !important;
  }

  /* ⑤ リンクを押しやすく */
  .housemap__buttons .swell-block-button__link {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 44px;
    padding: 12px 14px;
    line-height: 1.2;
    margin: 0 !important;
  }

  /* ⑥ 念のため：個別クラスの座標指定をSPでは無効化 */
  .btn_index_housemap_shiroari,
  .btn_index_housemap_pipe-cleaning,
  .btn_index_housemap_gaiju-gaichu,
  .btn_index_housemap_gaiheki,
  .btn_index_housemap_exterior-reform,
  .btn_index_housemap_interior-reform,
  .btn_index_housemap_yane,
  .btn_index_housemap_exterior-cleaning,
  .btn_index_housemap_haipin-kaishu {
    left: auto !important;
    top: auto !important;
  }

  /* スマホ時のみ 2カラム */
  .housemap__buttons .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .housemap__buttons .swell-block-button {
    width: 100% !important;
    margin: 0 !important;
  }

  .housemap__buttons .swell-block-button__link {
    width: 100%;
    text-align: center;
  }
}

/*************** section ***************/
/* ---------- PICKUP (バナー) ---------- */
.pvr-pickup {
  margin: 0 0 24px;
}

.pvr-pickup-swiper {
  overflow: visible; /* 0.5枚チラ見えを活かす */
}
.pvr-hero.is-fixed {
  will-change: transform;
}
/* カード：枠はそのまま、hover時に影だけ足す */
.pvr-pickup-card {
  display: block;
  border-radius: 10px;
  overflow: hidden; /* 画像拡大しても枠からはみ出さない */
  transform: translateZ(0); /* にじみ防止 */
  transition:
    box-shadow 0.35s ease,
    transform 0.35s ease;
  will-change: transform;
}

/* 画像：ここを拡大させる */
.pvr-pickup-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform 0.6s ease; /* ←スムーズ拡大の本体 */
  will-change: transform;
}

/* hover：画像だけ拡大（カードは微調整程度） */
@media (hover: hover) and (pointer: fine) {
  .pvr-pickup-card:hover img {
    transform: scale(1.08);
  }

  .pvr-pickup-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px); /* ほんの少しだけ持ち上げ（不要なら削除OK） */
  }
}

/* キーボード操作でも同様（アクセシビリティ） */
.pvr-pickup-card:focus-visible img {
  transform: scale(1.08);
}
.pvr-pickup-card:focus-visible {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  outline: none;
}


/*********************************/
/* バッジ */
/*********************************/
/* 対象サービスバッジ */
.p-works__term--service,
.p-voice__term--service {
  background: #1f4f7a;
  color: #fff;
}

/* エリアバッジ */
.p-works__term--area,
.p-voice__term--area {
  background: #e9eef4;
  color: #333;
}

/* 2026-03-15 card comment clamp */
.t-card__comment {
  line-height: 1.6;
  min-height: 3.2em; /* 2 lines */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/*********************************/
/* サービスページ */
/*********************************/
/* ステップの枠付ける */
#section-step .swell-block-step,
#section-step2 .swell-block-step {
  background-color: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
  max-width: 900px;
  margin: 10px auto 30px auto;
}

/*********************************
p-works
*********************************/

/*** 共通 ***/
.p-works {
  max-width: 900px;
  margin: auto;
}

/*** タイトルエリア ***/
.p-works__header {
  margin-bottom: 32px;
}

.p-works__title {
  margin-bottom: 12px;
  font-size: 1.8rem;
  line-height: 1.4;
}

.p-works__terms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.p-works__term {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  line-height: 1;
}

.p-works__term--service {
  background: #1f4b8f;
  color: #fff;
}

.p-works__term--area {
  background: #f0f0f0;
}

/*** 代表画像 ***/
.p-works__thumb {
  margin-bottom: 40px;
}

.p-works__thumb img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/*** 見出し ***/
.p-works__heading {
  margin-bottom: 16px;
  font-size: 1.3rem;
}

/*** 施工情報 ***/
.p-works__meta {
  margin-bottom: 48px;
}

/*** BeforeAfter コンポーネント ***/

/*** コンポーネント ***/

/*** 各ブロック ***/
.c-beforeAfter__item {
  width: 100%;
  margin-bottom: 20px;
}

/*** 場所ラベル ***/
.c-beforeAfter__label {
  margin-bottom: 10px;
  font-weight: 600;
}

/*** 2カラム ***/
.c-beforeAfter__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/*** Before / After 画像 ***/
.c-beforeAfter__before,
.c-beforeAfter__after {
  position: relative;
}

.c-beforeAfter__before img,
.c-beforeAfter__after img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/*** Before After ラベル ***/
.c-beforeAfter__tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  color: #fff;
}

.c-beforeAfter__tag--before {
  background: #666;
}

.c-beforeAfter__tag--after {
  background: #1f4b8f;
}

/*** 概要 ***/
.p-works__desc {
  margin-bottom: 48px;
}

.p-works__descBody {
  line-height: 1.9;
}

/*** 担当コメント ***/
.p-works__staff {
  margin-bottom: 48px;
}

.p-works__staffBody {
  line-height: 1.9;
}

/*** Before After ***/
.p-works__photos {
  margin-bottom: 56px;
}

/*** 本文 ***/
.p-works__content {
  margin-top: 40px;
}

/*** 戻るリンク ***/
.p-works__back {
  margin-top: 40px;
}

.p-works__back a {
  font-size: 0.9rem;
  text-decoration: none;
}

/*********************************
p-voice
*********************************/

/*** タイトルエリア ***/
.p-voice__header {
  margin-bottom: 32px;
}

.p-voice__title {
  margin-bottom: 12px;
  font-size: 1.8rem;
  line-height: 1.4;
}

.p-voice__terms {
  display: flex;
  gap: 8px;
}

.p-voice__term {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  line-height: 1;
}

.p-voice__term--service {
  background: #1f4b8f;
  color: #fff;
}

.p-voice__term--area {
  background: #f0f0f0;
}

/*** メインエリア ***/
.p-voice__main {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.p-voice__photo img {
  max-width: 400px;
  height: auto;
}

.p-voice__body {
  flex: 1;
}

.p-voice__profile {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}

.p-voice__surveyImage img {
  max-width: 100%;
  height: auto;
  text-align: center;
}

/*** アンケート画像 ***/
.p-voice__survey {
  margin-top: 48px;
  padding: 32px;
  border-radius: 10px;
  background: #f7f7f7;
}

/* 画像ラッパー */
.p-voice__surveyImage {
  display: flex;
  justify-content: center;
}

/* 画像リンク */
.p-voice__surveyImage a {
  display: inline-block;
  padding: 14px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* 画像 */
.p-voice__surveyImage img {
  display: block;
  width: 100%;
  max-width: 620px;
  height: auto;
  border-radius: 4px;
}

/*** お客様の声本文（便箋デザイン） ***/
.p-voice__text {
  position: relative;
  transform: rotate(-0.3deg);
  padding: 40px 34px 28px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  font-size: 18px;
  line-height: 2;
  background-image: linear-gradient(to bottom, #e8e8e8 1px, transparent 1px);
  background-size: 100% 2em;
}

/* 便箋左ライン */
.p-voice__text::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 22px;
  width: 4px;
  background: #f2d34c;
  content: "";
}

/* 本文 */
.p-voice__text p {
  margin: 0;
  padding-left: 20px;
}

/* プロフィール */
.p-voice__profile {
  margin-top: 18px;
  padding-left: 20px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #666;
  text-align: right;
}

/* for SP  */
@media screen and (max-width: 767px) {
  .p-voice__main {
    flex-direction: column;
  }

  .p-voice__photo img {
    max-width: 100%;
  }
}

/*********************************
単記事：戻る / Prev / Next
*********************************/
.p-works__back,
.p-voice__back {
  margin-top: 32px;
}

.p-works__back a,
.p-voice__back a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fafafa;
  color: #333;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
}

.p-works__back a:hover,
.p-voice__back a:hover {
  background: #f2f2f2;
  border-color: #d5d5d5;
}

.c-postNav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}

.c-postNav__prev a,
.c-postNav__next a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #ffffff;
  color: #333;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
}

.c-postNav__prev a:hover,
.c-postNav__next a:hover {
  background: #f7f7f7;
  border-color: #d5d5d5;
}

@media (max-width: 600px) {
  .c-postNav {
    flex-direction: column;
  }
  .c-postNav__prev a,
  .c-postNav__next a {
    width: 100%;
    justify-content: center;
  }
  .p-works__back a,
  .p-voice__back a {
    width: 100%;
    justify-content: center;
  }
}

/*********************************
カスタム投稿 ウィジェットエリア加工
*********************************/
/* 右サイドバー見出しサイズ */

.widget--tax-list {
  margin-bottom: 50px;
}

.widget--tax-list h2,
.widget_block h2 {
  border-bottom: 1px solid #f5d333;
  font-size: calc(var(--fz-h2) * 0.6);
}

.tax-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.6;
}
.tax-list__item {
  border-bottom: 1px solid #e8e8e8;
  padding: 6px 0;
}
.tax-list__item a {
  color: #222;
  text-decoration: none;
  display: block;
  padding: 5px;
}
.tax-list__item a:hover {
  color: #1f4b8f;
}

/* 親行（＋/−行） */
.tax-list__item--parent {
  position: relative;
  padding-right: 28px;
}
.acd-label {
  display: block;
  padding: 6px 0;
  cursor: pointer;
}
.acd-label:after {
  content: "＋";
  position: absolute;
  right: 0;
  top: 6px;
  font-weight: 700;
  color: #666;
}
.acd-check:checked + .acd-label:after {
  content: "－";
}

/* 子リスト */
.acd-content {
  margin-top: 4px;
  padding-left: 10px;
  border-left: 2px solid #e8e8e8;
}
.tax-list--area-children {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.tax-list--area-children li {
  padding: 4px 0;
}
.tax-list--area-children a {
  color: #444;
  font-size: 13px;
}
.tax-list--area-children a:hover {
  color: #1f4b8f;
}

/* スマホ微調整 */
@media (max-width: 767px) {
  .tax-list {
    font-size: 13px;
  }
  .tax-list--area-children a {
    font-size: 12.5px;
  }
}

/* 都道府県アコーディオン */
.acd-check {
  display: none;
}
.acd-label {
  display: block;
  margin-bottom: 1px;
  position: relative;
}
.acd-label:after {
  box-sizing: border-box;
  content: "＋";
  display: block;
  padding: 10px 20px;
  position: absolute;
  right: 0;
  top: 0px;
}
.acd-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 10px;
  transition:
    max-height 0.3s ease,
    opacity 0.3s ease;
  visibility: hidden;
}
.acd-check:checked + .acd-label:after {
  content: "－";
}
.acd-check:checked + .acd-label + .acd-content {
  max-height: 800px;
  opacity: 1;
  padding: 10px;
  visibility: visible;
}

/* voice/work 共通：エリアアコーディオン */
.area-accordion {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.65;
}
.area-accordion__item {
  border-bottom: 1px solid #e8e8e8;
  padding: 8px 0;
}
.area-accordion__item a {
  color: #222;
  text-decoration: none;
}
.area-accordion__item a:hover {
  color: #1f4b8f;
}
.area-accordion__item--parent {
  position: relative;
  padding-right: 32px;
}
.acd-label {
  display: block;
  padding: 6px 0;
  cursor: pointer;
}
.acd-label:after {
  content: "＋";
  position: absolute;
  right: 0;
  top: 0px;
  font-weight: 700;
  color: #666;
}
.acd-check:checked + .acd-label:after {
  content: "－";
}
.acd-content {
  margin-top: 6px;
  padding-left: 12px;
  border-left: 2px solid #e8e8e8;
}
.area-accordion__children {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
.area-accordion__children li {
  padding: 5px 0;
}
.area-accordion__children a {
  color: #444;
  font-size: 14px;
}
.area-accordion__children a:hover {
  color: #1f4b8f;
}

@media (max-width: 767px) {
  .area-accordion {
    font-size: 14px;
  }
  .area-accordion__children a {
    font-size: 13px;
  }
}

/* PC固定サイドボタン */
.pc-fixed-sidebuttons {
  position: fixed;
  top: 15%;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  opacity: 1;
  pointer-events: auto;
}
.pc-fixed-sidebuttons__item {
  display: block;
  width: 60px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
  overflow: hidden;
}
.pc-fixed-sidebuttons__item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}
@media (min-width: 769px) {
  .pc-fixed-sidebuttons {
    display: flex;
  }
}

/* for SP  */
@media screen and (max-width: 767px) {
  .pc-fixed-sidebuttons {
    display: none; /*スマホで非表示*/
  }
}

/***********************************/
/* 問い合わせフォーム */
/***********************************/
/* for SP  */
@media screen and (max-width: 767px) {
  button,
  input,
  optgroup,
  select,
  textarea {
    width: 100%;
  }
}

/* セクションごとに背景色付ける */
/* SWELLのフルワイドで透過率を0%のときはこれが適用されます。 */
/* #section-hero {
  background-color: #fffdf4;
} */
#section-concern {
  background-color: #fefaf0; /* 薄いアイボリーベージュ（やわらかい導入） */
}
#section-risk {
  background-color: #f4f4f4; /* 薄いライトグレー（注意喚起・冷静な印象） */
}
#section-reason {
  background-color: #fffdf6; /* ほぼ白に近いクリーム色（信頼・安心感） */
}
#section-inspection {
  background-color: #fef9ee; /* 薄いベージュ（丁寧さ・やさしさ） */
}
#section-step {
  background-color: #fff7e8; /* 薄いペールイエロー（流れ・親しみ） */
}
#section-price {
  background-color: #f5f5f5; /* 薄いグレー（価格の信頼感・落ち着き） */
}
#section-plan {
  background-color: #fefaf1; /* 薄いアイボリー（比較しやすい柔らかさ） */
}
#section-uservoice {
  background-color: #fff8ec; /* 薄いウォームベージュ（共感・ぬくもり） */
}
#section-faq {
  background-color: #f6f6f6; /* ごく薄いグレー（読みやすさ重視） */
}
#section-cta {
  background-color: #fff6e3; /* やや濃いペールイエロー（行動を促す） */
}
#section-knowledge {
  background-color: #f5f5f7; /* 薄いクールグレー（情報・知識系） */
}
#section-worksareamap {
  background-color: #fff9ee; /* 薄いクリームベージュ（安心感・やさしさ） */
}

/* シングルページ(お客様の声/施工実績)のタイトルズレ調整 */
.single h1.wp-block-heading,
.post-type-archive-t_useful h1.wp-block-heading {
  margin-top: 0px;
  font-size: calc(var(--fz-h1) * 0.8);
}

/********************************************/
/* ショートコードCTAボタン */
/********************************************/
/* CTA共通 */
.cta {
  margin: 40px 0;
  padding: 24px;
  border-radius: 8px;
}

.cta__lead {
  text-align: center;
  font-weight: bold;
  margin-bottom: 20px;
}

.cta__grid {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.cta__item {
  flex: 1;
  min-width: 240px;
  background: #fff;
  padding: 16px;
  border-radius: 6px;
  text-align: center;
}

/* ボタン本体：余白リセット */
.cta__btn {
  display: block;
  margin: 10px 0;
  padding: 0; /* ← テキスト用padding削除 */
  text-decoration: none;
  border-radius: 4px;
}

/* 画像ボタン */
.cta__btn img {
  display: block; /* ← 下の隙間防止（重要） */
  width: 100%; /* ← レスポンシブ */
  height: auto;

  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

/* hover（headerと統一） */
.cta__btn:hover img {
  transform: scale(1.03);
  opacity: 0.9;
}

/* inline */
.cta--inline {
  text-align: center;
  background: #f7f7f7;
  position: relative;
  max-width: 1000px;
  margin: 20px auto 20px;
}

/* footer強調 */
.cta--footer {
  background: #eeeeee;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* hero */
.cta--hero {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  z-index: 2;
  background-color: #fff;
  position: relative;
  max-width: 1000px;
  margin: -180px auto 100px;
  padding: 32px;
}

@media (max-width: 767px) {
  .cta--hero {
    max-width: none;
    margin: 20px 16px 20px;
    padding: 24px;
  }
}

.fullwide-ctafooter {
  /* CTA footer用グラデーション黄色 */
  background: linear-gradient(
    356.44deg,/* 360のほぼ真上方向、少しだけおしゃれに */ 
    #f7c948 44.33%,/* 下側（やや濃い・影） */
     #ffdb00 81.92% /* 上側（明るい・メイン） */
  );
}

/* サービスページ配下はオリジナルでhero設置するので、デフォルトタイトルエリアは非表示 */
.page_service #top_title_area {
  display: none;
}

/* ================================
 【共通】heroベース
================================ */

/* hero全体 */
#section-hero {
  position: relative;
  overflow: hidden;
}

/* 画像共通 */
#section-hero .hero-img {
  width: 100%;
  margin: 0;
  position: relative;
}

#section-hero .hero-img img {
  width: 100%;
  height: 75vh;
  min-height: 580px;
  object-fit: cover;
  object-position: 50% 50%; /* 基本：中央 */
  display: block;
}

/* 画像の暗さ */
#section-hero .hero-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}

/* ================================
 ▼ 画像トリミング制御
================================ */

/* 1300px以下 */
@media screen and (max-width: 1300px) {
  #section-hero .hero-img img {
    object-position: 50% 40%;
  }
}

/* 1024px以下 */
@media screen and (max-width: 1024px) {
  #section-hero .hero-img img {
    object-position: 50% 80%;
  }
}

/* ================================
 テキスト共通
================================ */

/* PCではh1非表示 */
@media screen and (min-width: 768px) {
  #section-hero h1 {
    display: none;
  }
}

/* SP用タイトル */
@media screen and (max-width: 767px) {
  .hero-title-sp {
    position: absolute;
    top: 70px;
    right: 10%;
    transform: translateY(-50%);
    z-index: 2;
    font-size: 16px;
    color: #fff;
  }
}

/* テキスト共通 */
.hero-text {
  position: absolute;
  z-index: 2;
  width: 100%;
  max-width: 700px;
  padding: 0 20px;
}

.hero-text .wp-block-group__inner-container {
  background: none;
  padding: 0;
}

/* ================================
 heroタイトルとh2の余白を完全リセット
================================ */

/* タイトル画像（figure）の余白削除 */
#section-hero .hero-title-pc {
  margin: 5px;
}

/* h2の余白削除 */
#section-hero .hero-text h2 {
  margin-top: 0;   /* ← 上の余白を削除 */
}


/* PC文字視認性 */
@media screen and (min-width: 959px) {
  .hero-text h2,
  .hero-text p {
    color: #fff !important;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
  }
}



/* ================================
 【SP】レイアウト（完全分離）
================================ */
@media screen and (max-width: 960px) {
  /* 画像：トリミング発生させる */
  #section-hero .wp-block-image img {
    height: 380px;
    object-position: 50% 85%;
  }


  /* テキスト：縦積みに変更 */
  .hero-text {
    position: static; /* ← absolute解除 */
    transform: none;
    margin: 20px auto 0;
    max-width: 90%;
    text-align: center;
  }

  .hero-text h2 {
    font-size: 20px;
  }

  .hero-text p {
    font-size: 14px;
  }
}

/* SPの微調整用 メイン画像なので、680のブレイクポイントも追加 */
@media screen and (max-width: 680px) {
  #section-hero .hero-img img {
    object-fit: cover;
  }
  /* 親をトリミング用の箱にする */
  #section-hero .hero-img {
    height: 380px;        /* ← 高さ固定 */
    overflow: hidden;     /* ← はみ出しカット */
    position: relative;
  }

  /* 画像は横基準で表示 */
  #section-hero .hero-img img {
    width: 100%;
    height: auto;         /* ← 高さ固定をやめる */
    min-height: 0;        /* ← これ重要（上書き） */
    object-fit: unset;    /* ← cover解除 */

    position: absolute;
    bottom: 0;            /* ← 下基準にする（上が切れる） */
    left: 0;
  }
}

/* ================================
 【PC】ページ別調整
================================ */
@media screen and (min-width: 959px) {
    /* default */
  .hero-img + .hero-text {
    top: 45%;
    left: 70%;
    transform: translate(-50%, -50%);
  }
  

  /* pipe-cleaning */
  .hero-img-service-pipe-cleaning + .hero-text {
    top: 52%;
    left: 67%;
    transform: translate(-50%, -50%);
  }

  /* shiroari */
  .hero-img-service-shiroari img {
    object-position: 70% 50%;
  }

  .hero-img-service-shiroari + .hero-text {
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}


/* ================================
 ブロック全体にリンクを適用
 親要素(グループにu-card-linkのclass付与)
 グループ内のリンクに u-stretched-linkを付与
 (テキストでも画像でもOK)
================================ */
/* 親要素（カード全体）のスタイル */
.u-card-link {
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    cursor: pointer;
    transform: translateY(0);
    opacity: 1;
}

/* ホバー時の演出 */
.u-card-link:hover {
    transform: translateY(-4px) scale(1.02);
    opacity: 0.9;
}

/* クラスをつけたブロックの「中にあるリンク(aタグ)」を拡張 */
.u-stretched-link a::after { 
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: auto; /* 明示的にクリックを受け付ける */
    transition: opacity 0.2s ease;
}


/* footerサービスリストのボックスメニュー */
.footer_servicelist_pickup strong,
.footer_servicelist_basic strong{
  display: inline-block;
  margin-bottom: 10px;
  font-size: 1.1rem;
}



/************************************************/
/* 問い合わせフォームのカスタマイズ */
/************************************************/

/*ラベル(テキスト)部分を太字にする*/
.wpcf7{
	font-weight: bold;
}

/*フォームの下に余白を入れる*/
.wpcf7 input {
 margin-bottom: 15px;/*ここが余白サイズなので好みで調整*/
}

/*フォームの幅を広くする(100%)*/
/*テキスト*/
.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
        width: 100%;
}
/*テキストエリア*/
.wpcf7-textarea {
        width: 100%;
}

.wpcf7 input{
    width: 100%; 
}

.c-dltable-form input{
    width: auto;
}

/* 問い合わせフォーム必須 */
.haveto{
    font-size:10px;
    padding:5px;
    background:#E03523;
    color:#fff;
    border-radius:2px;
    margin-right:5px;
    position:relative;
    bottom:1px;
}

/*送信ボタンを目立たせる*/
.submit_button_box{
    width: 100%;
    margin: 20px auto 25px auto;
    text-align: center;
}
.wpcf7 .wpcf7-submit{
    width: 50%;
    padding: 10px;
    margin: 20px auto 25px auto;
    border-radius: 5px;/*ボタンの角に丸み*/
    background-color: #2282B7;/*ボタン色*/
    color: #fff;/*ボタン文字色*/
    font-size: 1.1rem;/*ボタン文字サイズ*/
    font-weight: bold;/*ボタン文字を太く*/
}

div.wpcf7 .wpcf7-spinner {
    display: block;
}

.form-type-text input{
    width: 100%;
}

/* チェックボックス縦並び */
.wpcf7-list-item {
    display: block;
    margin: 0 0 0 1em;
    text-align: left;
    font-weight: normal;
}