@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    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
*/

/* ===============  ビフォーアフター専用スタイル  =============== */
.my-ba-container{
  max-width: 800px;
  margin: 40px auto;
  position: relative;
  font-family: sans-serif;
  user-select: none;
}
.my-ba-wrapper{
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16/9;
  touch-action: none;
}
.my-ba-img{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}
.my-ba-img--after{ clip-path: inset(0 0 0 var(--clip,50%)); }

.my-ba-slider{
  position: absolute;
  inset: 0 auto 0 var(--clip,50%);
  transform: translateX(-50%);
  width: 4px; background:#fff; box-shadow:0 0 0 1px #000;
  pointer-events: none; z-index: 3;
}

.my-ba-range{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: ew-resize; touch-action: none;
  -webkit-appearance: none; z-index: 4;
}

.my-ba-label{
  position: absolute; top: 12px;
  padding: 4px 12px; font-size: 14px; font-weight: 700;
  background: rgba(0,0,0,.65); color: #fff; border-radius: 4px;
  pointer-events: none; user-select: none; line-height: 1; z-index: 5;
}
.my-ba-label--before{ left: 12px; }
.my-ba-label--after { right: 12px; }

.my-ba-range:focus-visible + .my-ba-slider{
  box-shadow: 0 0 0 3px dodgerblue;
}
/* １）もし .image111 を img 要素に直接つけている場合 */
.image111 {
  display: block;            /* 不要なら削除OK */
  border-radius: 8px !important;
}

/* ２）もし .image111 がラッパー要素で、その中に <img> がある場合 */
/* figure でも img でも、.image111 がついている要素に適用してください */
.image111 {
  display: inline-block;               /* 必要に応じて block でもOK */
  border-radius: 8px !important;       /* 画像と枠の角丸 */
  
  /* 上：0 / 右：6px / 下：6px / 左：0 */
  border-style: solid !important;
  border-width: 0 6px 6px 0 !important;
  
  /* 6px幅の枠に、45°の3pxストライプ＋6px間隔のグラデ */
  border-image-source: repeating-linear-gradient(
    45deg,
     #0081cb 0,
     #0081cb 3px,
    transparent 3px,
    transparent 9px
  ) !important;
  border-image-slice: 6 !important;     /* 枠幅と同じ */
  border-image-repeat: round !important;
}

.image111 img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px !important;       /* 画像そのものの角丸 */
}
/************************************************************
  右端追従バナー – Final (2025-05-25)
************************************************************/

/* ─── 基本レイアウト（最初は非表示） ─── */
.floating-banner{
  position:fixed !important;
  right:0 !important;
  bottom:auto !important; top:auto !important;

  width:80px; height:150px; padding:10px 0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;

  text-decoration:none;
  border-radius:6px 0 0 6px;
  box-shadow:0 3px 8px rgba(0,0,0,.18);
  box-sizing:border-box; overflow:hidden; z-index:9999;

  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .6s ease;
}

/* ─── フェードイン後 ─── */
.floating-banner.is-visible{
  opacity:1 !important;            /* ← 上書き保証 */
  visibility:visible !important;
  pointer-events:auto !important;
}

/* ─── 中身 ─── */
.floating-banner__icon{width:28px;height:28px;margin-bottom:6px;}
.floating-banner__text{
  writing-mode:vertical-rl;text-orientation:upright;
  font-size:14px; line-height:1.05; color:#fff;
}

/* ─── 個別バナー ─── */
.floating-banner--contact{
  top:35% !important; transform:translateY(-20%);
  background:rgba(17,178,135,.6);
}
.floating-banner--contact:hover{background:rgba(17,178,135,.8);}

.floating-banner--request{
  top:calc(35% + 140px) !important;        /* 1段目+余白 */
  background:rgba(5,128,183,.6);
}
.floating-banner--request:hover{background:rgba(5,128,183,.8);}
.ui {
  /* １）ベースの背景色（ドットの背景色） */
  background-color: #18b6f5; /* ライトイエロー（必要に応じて変更可） */

  /* ２）ドットを作る設定 */
  /* radial-gradient(circle, ドット色 半径, 透明 半径) */
  background-image:
    radial-gradient(
      circle,
      #4fb9ff 2px, /* ドットの色と半径（この例では半径2pxのイエロードット） */
      transparent 2px
    );

  /* ３）ドットの間隔（縦横の距離） */
  background-size: 20px 20px; /* 20pxごとに一つのドットが並ぶ */
  
  /* （必要に応じて余白や枠線を付ける場合） */
  padding: 20px;               /* 内側余白の例 */
  border: 2px solid #008cff;   /* オレンジ系の枠線例 */
  border-radius: 4px;          /* 角を少し丸くする例 */
}
@media (max-width: 768px) {
  .ui {
    padding-top:    0        !important;
    padding-right:  0        !important;
    padding-left:   0        !important;
    padding-bottom: 20px     !important; /* お好みのサイズに */
  }
}
.iu {

  /* ドット設定 */
  background-image: radial-gradient(
    circle,
    #F66E11 2px,    /* ドット色と半径 */
    transparent 2px /* 透明で下地を透かす */
  ) !important;

  /* ドットの間隔 */
  background-size: 20px 20px !important;

  /* 余白・枠線 */
  padding: 20px !important;
  border: 2px solid #F66E11 !important;
  border-radius: 4px !important;
}

/* スマホ時だけパディングを消す */
@media (max-width: 768px) {
  .iu {
    padding-top:    0        !important;
    padding-right:  0        !important;
    padding-left:   0        !important;
    padding-bottom: 20px     !important; /* お好みのサイズに */
  }
}

.tr {
  /* 文字色を濃いグレーに設定 */
  color: #333333;
  font-size: 24px; /* 必要に応じて文字サイズを調整 */

  /* ─────────────────────────────────────
     text-shadow を使って “外側に広い白い縁取り” を作る
     ───────────────────────────────────── */
  text-shadow:
    /* オフセットを 2px にして上下左右＋斜めに白を置く */
    -2px -2px 0 #ffffff,
     2px -2px 0 #ffffff,
    -2px  2px 0 #ffffff,
     2px  2px 0 #ffffff,
    -2px  0   0 #ffffff,
     2px  0   0 #ffffff,
     0    -2px 0 #ffffff,
     0     2px 0 #ffffff,

    /* さらにオフセットを 3px に増やして重ねると、より幅広い縁取りになる */
    -3px -3px 0 #ffffff,
     3px -3px 0 #ffffff,
    -3px  3px 0 #ffffff,
     3px  3px 0 #ffffff,
    -3px  0   0 #ffffff,
     3px  0   0 #ffffff,
     0    -3px 0 #ffffff,
     0     3px 0 #ffffff;
}
/* ======================== hfdhdh 見出し ======================== */
.hfdhdh{
  position: relative;                 /* ↓の ::after を基準に */
  display: block;
  width: 100%;                       /* 全幅帯にしたい場合。狭めたければ任意で変更 */
  margin: 40px 0;                    /* 外側余白はお好みで */
  padding: 14px 20px;                /* 内側余白（上下 左右）*/
  background: #ec7000;	            /* 背景色（添付と同系オレンジ）*/
  color: #fff;                       /* 文字色 */
  font-size: 22px;                   /* 見出しサイズは任意 */
  font-weight: 700;
  text-align: center;                /* 中央寄せ */
}

/* ▼ 下向き三角形ポインタ */
.hfdhdh::after{
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);       /* 中央揃え */
  width: 0; height: 0;               /* 三角形は border で作る */
  border: 20px solid transparent;
  border-top: 20px solid #ec7000;
  bottom: -35px;
}

/* ======================= hikghkh 吹き出し ======================= */
.hikghkh{
  position: relative;          /* ← 擬似要素の基準にする */
  max-width: 980px;            /* お好みで幅を調整 */
  padding: 24px 32px !important;          /* 内側余白（上下 左右）*/
  background: #ffffff;         /* 吹き出し内部の色 */
  border: 2px solid #3e3e3e;   /* 枠線色と太さ */
  border-radius: 10px;         /* 角丸 */
  box-sizing: border-box;      /* 枠線を含めて幅計算 */
  font-family: "Zen Kaku Gothic New","Yu Gothic","Noto Sans JP",sans-serif; /* 任意 */
}

/* ▼ 外枠ライン（後ろ側）*/
.hikghkh::before{
  content:'';
  position:absolute;
  left:-22px;           /* ↔ 22px はボックスの border 太さ + 20px */
  top:30px;             /* 位置はお好みで微調整 */
  border:22px solid transparent;
  border-right:22px solid #3e3e3e;   /* 枠線と同じ色              */
  z-index:0;            /* ← ★後ろへ */
}

/* ▼ 内側（三角の白い面）*/
.hikghkh::after{
  content:'';
  position:absolute;
  left:-20px;           /* ↔ 外枠 −2px でピッタリ重ねる          */
  top:32px;             /* 外枠より 2px 下げると境界が綺麗        */
  border:20px solid transparent;
  border-right:20px solid #ffffff;   /* ボックス背景と同じ色       */
  z-index:1;            /* ← ★前面へ（ここが今回のポイント）     */
}
/* ==========  ffwe ─ ホバーアニメーション  ========== */
.ffwe{
  transition: transform .35s cubic-bezier(.4,0,.2,1),     /* なめらかな動き */
              filter   .35s cubic-bezier(.4,0,.2,1);
  will-change: transform, filter;                         /* パフォーマンスヒント */
}

.ffwe:hover{
  transform: translateY(-4px) scale(1.03);                /* ① ふわっと浮く */
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.12));        /* ② 影を落とす（色は既存 #000 の透過）*/
}
/* ─────────────────────────────────────────────────────
   既存の .wef と .htf 定義にホバーアニメーションを追加
───────────────────────────────────────────────────── */

/* 共通：ホバー時にスムーズにアニメーションするためのトランジションを追加 */
.wef,
.htf {
  transition: all 0.3s ease;
}

/* ─────────────────────────────────────────────────────
   .wef のスタイル（既存定義）
───────────────────────────────────────────────────── */
.wef {
  /* 背景色を薄いグレーに */
  background-color: #ffffff !important;
  /* 内側の余白（上下10px、左右15px）を確保 */
  padding: 10px 15px !important;
  /* 外枠を1pxの白実線に */
  border: 1px solid #ffffff !important;
  /* 角を丸くする */
  border-radius: 30px !important;
  /* テキストを横並びにするときなど */
  display: inline-block !important;
  /* 必要に応じて文字を中央揃えに */
  /* text-align: center; */
}

/* ─────────────────────────────────────────────────────
   .wef のホバー時アニメーション
───────────────────────────────────────────────────── */
.wef:hover {
  /* 影を少し強くして浮き上がらせる */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  /* ほんの少し上に持ち上げる */
  transform: translateY(-3px);
  /* 必要に応じて背景色微調整 */
  /* background-color: #f8f8f8 !important; */
}

/* ─────────────────────────────────────────────────────
   .htf のスタイル（既存定義）
───────────────────────────────────────────────────── */
.htf {
  /* 赤系の背景色 */
  background-color: #F66E11 !important;
  /* 白い外枠（太さは2px） */
  border: 2px solid #ffffff !important;
  /* 角を丸く */
  border-radius: 30px !important;
  /* 内側余白：上下50px、左右16px */
  padding: 50px 16px !important;
  /* テキストを白に */
  color: #ffffff !important;
  /* テキスト幅に合わせる */
  display: inline-block !important;
  /* 行間を詰めて表示 */
  line-height: 1.2 !important;
  /* 軽い影を追加しておく */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* ─────────────────────────────────────────────────────
   .htf のホバー時アニメーション
───────────────────────────────────────────────────── */
.htf:hover {
  /* 影を強めてさらに浮き上がらせる */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
  /* 3% 拡大して少し奥行きを出す */
  transform: scale(1.03);
  /* 必要に応じて背景色を少し明るくシフト */
  /* background-color: #d32f2f !important; */
}
.fdfsg {
  line-height: 1.2 !important; /* 行間を狭くする（必要に応じて数値をさらに小さく） */
}

.ghfh {
  margin: 0 auto;             /* 水平方向に自動で余白をとる */
  /* 以下はもともとの枠線や余白など */
  background-color: transparent !important;
  border: 2px solid #ffffff !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
}
/* #breadcrumb 要素を非表示に */
#breadcrumb {
  display: none !important;
}
.hghtssf {
  margin-top: -50px !important;
}
@media screen and (max-width: 768px) {
  .fef {
    background-image: none !important;
  }
}
.fghd{
      line-height: 0.4;  
}

@media screen and (max-width: 768px) {
  .yy {
    /* 1）画像サイズを小さく */
    background-size: 200px auto !important;
    /* 2）背景位置を「中央下」に変更 */
    background-position: center bottom !important;
    /* 3）コンテンツと背景画像が重ならないよう余白を確保 */
    /*    下部に (画像高さ＋余裕分) を追加してください。 */
    padding-bottom: 160px !important;
  }
  .htf {
  /* 赤系の背景色 */
  padding: 30px 16px !important;
}}
@media screen and (max-width: 768px) {
  .fdfsg {
    line-height: 1.4 !important; /* スマホ時に行間を広げる */
  }
.tr {

  font-size: 18px; /* 必要に応じて文字サイズを調整 */
}
}

/* tel:リンクの色を白に（もしくはお好きな色に変更） */
a[href^="tel:"] {
  color: #333 !important;
  text-decoration: none !important; /* 下線も消したいなら追加 */
}
/* ――――――――――――――――――――――――― */
/* .bbb クラスのリンクを白文字に上書き */
/* ――――――――――――――――――――――――― */
.bbb,
.bbb a,
a.bbb {
  color: #ffffff !important;    /* 白文字 */
}

/* Gutenberg の「ボタン」ブロックに .bbb を付けている場合 */
.wp-block-button.bbb .wp-block-button__link {
  color: #ffffff !important;
}

/* もしリンクに直接 .bbb を付けているならこちらも */
a.bbb {
  text-decoration: none;        /* 下線消すなら */
}

.aaaaa {
  /* 外側の余白を上下とも 5px にする */
  margin-top: -20px !important;
  margin-bottom: 5px !important;

  /* もし内側の余白も狭くしたいなら下記を追加 */
  /* padding-top: 5px !important; */
  /* padding-bottom: 5px !important; */
}
.fdgsd{
  /* 外側の余白を上下とも 5px にする */
  margin-top: -20px !important;
}
.hutosa{
font-weight: bold;
}
.pppss{
text-align: left !important;
}
.fdfdf{
text-align: left !important;
}

    .hgh {
text-align: left !important;
    }

 .gffh {
  background-color: #bedce940;
  padding: 30px !important;
  border-radius: 5px; /* 角を丸くする場合 */
}
@media screen and (max-width: 768px) {
 .gffh  {
  padding: 5px !important;
  }
	.hfdhdh {
  /* フォントサイズに対する行間の倍率 */
  line-height: 1.2;
}
	}
.hfgdfga {
  /* 横方向のオフセット 縦方向のオフセット ぼかしの大きさ 色 */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
@media (max-width: 768px) {
  .l-content {
    padding-top: 0 !important;
  }
}
/* ─────────────────────────────────────────
 * スマホ専用：見積りフッターバナー（完全版）
 * 　アイコン＝左／テキスト＝右 の横並びレイアウト
 * ───────────────────────────────────────── */
@media (max-width: 768px){

  /* ===== バナー全体 ===== */
  .my-sp-footer{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    gap: 6px;

    background: #ffffff;
    border-top: 3px solid #0044aa;
    padding: 6px 8px 4px;
    box-shadow: 0 0 6px rgba(0,0,0,.25);

    font-family: "Zen Kaku Gothic New", "Yu Gothic", sans-serif;
  }

  /* ===== 電話ブロック ===== */
  .footer-tel{
    flex: 1 1 auto;
    text-decoration: none;
    color: #0054b8;
  }
  .footer-tel .icon-tel{
    width: 32px;
    height: auto;
    vertical-align: middle;
  }
  .footer-tel .tel-number{
    font-size: 25px;
    font-weight: bold;
    vertical-align: middle;
  }
  .footer-tel .tel-hours{
    display: block;
    margin-top: -8px;
    font-size: 10px;
    font-weight: 400;
    color: #333;
  }

  /* ===== 共通ボタン (LINE / メール)  ===== */
  .footer-btn{
    flex: 0 0 80px;     /* ← 幅を 120px → 80px に */
    height: 40px;       /* ← 高さを 44px → 40px に */
    border-radius: 8px;
    display: flex;
    flex-direction: row;    /* ← 横並びにするポイント */
    justify-content: center;
    align-items: center;
    gap: 6px;               /* アイコンと文字の間隔 */
    padding: 0 6px;     /* ← 左右の余白も少し減らす */
    text-decoration: none;
    line-height: 1.2;
    color: #ffffff;
    font-weight: 700;
  }
  .footer-btn:hover{
    opacity: .85;
  }
  .btn-text{
    font-size: 11px;    /* ← 12px → 11px など */
    white-space: nowrap;    /* 自動改行させたくない場合は保持 */
  }
  .icon-line,
  .icon-mail{
    width: 20px;        /* ← 24px → 20px */
    height: 20px;       /* 同上 */
    margin: 0;          /* 下マージンは消してピタッと */
  }
  /* ===== LINE ボタン ===== */
  .footer-line{ background:#00b900; }
  .icon-line{
    width: 18px; height: 18px;
    margin: 0;             /* 下余白を打ち消し */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 32' fill='%23ffffff'%3E%3Cpath d='M18 0C8.06 0 0 6.97 0 15.57c0 4.91 2.82 9.24 7.17 12.1-.32 1.13-2.04 7.19-2.33 8.31 0 0-.04.35.2.48.24.13.49.08.49.08.65-.09 8.13-5.4 9.48-6.28 1.09.15 2.21.22 3.36.22 9.94 0 18-6.97 18-15.57S27.94 0 18 0z'/%3E%3C/svg%3E") no-repeat center/contain;
  }

  /* ===== メールボタン ===== */
  .footer-mail{ background:#f54771; }
  .footer-mail .icon-mail{
    width: 18px; height: 18px;
    margin: 0;             /* 下余白を打ち消し */
    display: block;
  }
  .icon-line::before,
.icon-mail::before{
  content:none !important;
  display:none !important;
}
}
@media (max-width: 768px) {
  .c-fixBtn {
    display: none !important;
  }
}
.fdfdg {
  background-color: rgba(27,127,204,.8) !important;   /* 背景色 */
  border: 1px solid #ddd!important;      /* 外枠線 */
  border-radius: 6px!important;         /* 角を丸く */
  padding: 16px!important;              /* 内側の余白（上下左右） */
  box-shadow: 0 2px 4px rgba(0,0,0,0.08)!important; 
  font-size: 16px!important;          /* 文字サイズ */
  line-height: 1.6!important;         /* 行間 */
}
.ffadss {
  border-top: 2px solid #fff !important;
  border-bottom: 2px solid #fff !important;
  padding: 0.5em 0 !important;
}
@media (max-width: 599px){
  html body .post_content dl > :last-child,
  html body .post_content div > :last-child{
    margin-bottom: 0 !important;
  }
}
.dsdsf{
    margin-bottom: 0 !important;
  }


/********************************************************
 *  ▼ そのまま WordPress「追加 CSS」に貼り付けてください ▼
 *    ① 親（.afrh を直下に含む要素）にだけ中央寄せ用の Flex を当てる
 *       └ :has() 疑似クラスを利用（主要ブラウザ対応済み）
 *    ② .afrh の見た目・サイズ・スキマ調整
 ********************************************************/

/* ① 親を捕まえて中央寄せ  ─────────────────────── */
div:has(> .afrh),
section:has(> .afrh),
.wp-block-group:has(> .afrh),
.wp-block-columns:has(> .afrh){
  display: flex !important;          /* Flex レイアウト化          */
  flex-wrap: wrap !important;        /* 折り返し可                  */
  justify-content: center !important;/* 横方向を中央寄せ            */
  gap: 20px 12px !important;         /* 縦 20px・横 12px のスキマ   */
  margin: 0 auto !important;         /* 親自身も中央揃え（左右）    */
}

/* ② カード本体 .afrh  ─────────────────────── */
.afrh{
  flex: 0 0 auto !important;         /* Flex 子として幅固定に       */
  width: 350px !important;           /* カード横幅（数値で調整可） */
  /* height: 360px !important;       ← 必要なら高さ固定            */

  /* 見た目 */
  background: #ffffff !important;
  border: px solid #F66E11 !important;
  padding: 1.5rem !important;
  border-radius: 12px !important;
  box-shadow: 12px 12px 0 0 #F66E11 !important;

  /* カード内要素配置（任意） */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  transition: transform .25s ease, box-shadow .25s ease  !important;
}

/* ② ホバー時の変化 */
.afrh:hover{
  transform: translate(-6px, -6px) !important;     /* 左上へ 6px 浮かす */
  box-shadow: 18px 18px 0 0 #F66E11 !important;    /* 影も大きく “追従” */
}

/* 画像がはみ出さない保険 */
.afrh img{
  max-width: 100% !important;
  height: auto !important;
}

/* ───────── 旧ブラウザ (IE 等) フォールバック ─────────
   :has() が効かない環境向けに、body 全体へ影響しない方法が無いため、
   どうしても旧環境対応が必要な場合は  
     1) 親に「wp-block-group など」の追加クラスを付ける  
     2) そのクラスに flex + center を指定  
   といった従来手法で調整してください。                      */

/* ──────────────────────────────────────────────
 * .gfhdjt  ＜固定サイズ・ pill 型ラベル＞
 *  ・幅220px／高さ48px（※上下パディングで調整）
 *  ・背景：濃ブラウン (#6B3A00)
 *  ・白文字／太字／中央揃え
 *  ・ホバー効果なし
 * ────────────────────────────────────────────── */
.gfhdjt{
  display: inline-block !important;   /* 横並びしやすく */
  width: 270px !important;            /* ★固定幅 */
  padding: 12px 0 !important;         /* ★上下で高さ48px */
  background: #f66e11 !important;     /* 濃いブラウン背景 */
  color: #ffffff !important;          /* 文字は白 */
  font-size: 16px !important;         /* お好みで */
  font-weight: 700 !important;        /* 太字 */
  text-align: center !important;      /* 中央揃え */
  border-radius: 9999px !important;   /* pill 型（完全に丸める） */
  line-height: 1 !important;          /* 行間を詰める */

  /* ホバー時変化なし ─ 何も書かなければ OK */
}

/* 文字が折り返さないようにしたい場合は追加 */
.gfhdjt{
  white-space: nowrap !important;
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
   .gfhjjyt   ── “薄い斜めストライプ + 波ボーダー部も同柄” 完全版
   SWELL の「境界線の形状 → 波」を使うと、
   自動で ::before / ::after に単色の波がかぶさるため
   そこも同じストライプで塗り直す。

   ▼ ポイント
     1) 本体にストライプ背景
     2) SWELL が生成する波用 ::before / ::after も
        同じ repeating-linear-gradient を強制上書き

   ※ SWELL の波ボーダーは .gfhjjyt::before と ::after に付くので
     これをそのまま上書きすれば OK（class 名は変わりません）。
   ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* 1) セクション本体にストライプ ------------------------------ */
.gfhjjyt{


  /* 薄い 45° ストライプ */
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.22) 0px,
    rgba(255,255,255,0.22) 8px,
    transparent 8px,
    transparent 16px
  ) !important;
}

/* 2) 波ボーダー用の ::before / ::after もストライプで上書き ---- */
.gfhjjyt::before,
.gfhjjyt::after{
  /* SWELL が入れる波のベースを塗り替える */
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.22) 0px,
    rgba(255,255,255,0.22) 8px,
    transparent 8px,
    transparent 16px
  ) !important;

  /* 単色指定を打ち消す（念のため） */
  background-color: transparent !important;
}
/* ──────────────────────────────────────────────
 * .kjkuyk   ＜太字＋テキストシャドウ＞
 *   - フォントを 700（＝bold）
 *   - 白っぽいハイライト風シャドウを下方向に 2 重
 *     （お好みで色・距離・ぼかしを調整してください）
 * ────────────────────────────────────────────── */
.kjkuyk{
  font-weight: 700 !important;            /* ★ 太字にする                     */

  /* ★ テキストシャドウ
       1) うっすら外側にぼかし (0,1px,4px)
       2) さらに少し離して強調   (0,3px,6px)
       ─ 見づらければ色不透明度(.3 → .5)や距離を上げ下げで調整 */
  text-shadow:
    0 1px 4px rgba(0,0,0,.3),
    0 3px 6px rgba(0,0,0,.3) !important;
}
/* ── .adaw テキストの左側に、大きめで反転した画像を表示 ── */
.adaw{
  display:inline-flex;      /* テキストと擬似要素を横並び */
  align-items:center;       /* 垂直中央揃え */
}

.adaw::before{              /* ← 左側に置くので ::before を使用 */
  content:"";
  display:inline-block;
  width:60px;               /* さらに大きくしたい場合はここを変更 */
  height:60px;
  margin-right:12px;        /* テキストとの間隔 */
  background:url("https://evercoat.snb-c.jp/wp-content/uploads/2025/06/rhrehreh.png")
            no-repeat center/contain;
  transform:scaleX(-1);     /* 左右反転（不要なら削除） */
}
.has-white-color {
	font-weight:bold;
	}
	/* ───────── ojku ボックス ───────── */


	/* ───────── yjyjf ─ 最大幅1000px＋中央寄せ ───────── */
.yjyjf{
  max-width:1000px !important;  /* ❶ 最大幅 1000px */
  width:100% !important;        /* ❷ ビューポートに合わせて伸縮 */
  margin:0 auto !important;     /* ❸ 左右 auto で中央寄せ */

  /* 任意の内側余白や装飾が必要なら追加してください
     padding:24px !important;
     background:#fff !important;
     border-radius:8px !important;
  */
}
/* ───────── ojku ボックス ───────── */
.ojku{
  background:#ffffff !important;      /* 白背景 */
  border-radius:8px !important;       /* 角丸 */
  box-sizing:border-box !important;
  overflow:hidden !important;         /* 画像も角丸でクリップ */
}
.ojku::after {
  content: "" !important;
  display: block !important;
  height: 24px !important;     /* 好きな余白量に調整 */
  margin: 0 !important;
  padding: 0 !important;
}


/* ───────── 画像（fghr） ───────── */
.fghr{
  width:100% !important;              /* 親幅いっぱい */
  height:auto !important;             /* 比率維持 */
  display:block !important;           /* 余計な隙間を防ぐ */
  border-radius:8px !important;       /* 画像自体にも角丸 */
  object-fit:cover !important;        /* 切り抜きでフィット（縦横比が違う場合に便利） */
}
.fdgafege {
  line-height: 1.2 !important;  /* さらに詰めたいときは1.1や1.0でもOK */
}

/* ───────── 吹き出し本体 ───────── */
.gtkhtjhj {
  position:       relative     !important;
  display:        table        !important; /* 幅を内容分だけにして、margin auto で中央 */
  margin:         0 auto 24px  !important; /* 上0／左右自動／下24px */
  padding:        10px 25px     !important;
  background:     #ffffff      !important;
  color:          #0044aa      !important;
  border:         2px solid #0044aa !important;
  border-radius:  20px         !important;
  font-size:      14px         !important;
  line-height:    1            !important;
  white-space:    nowrap        !important;
  text-align:     center       !important;
  box-sizing:     border-box   !important;
	  margin: 0 auto 8px !important;

}

/* ───────── 外枠用三角形（枠線色） ───────── */
.gtkhtjhj::before {
  content:        ""                      !important;
  position:       absolute                !important;
  bottom:         -10px                   !important;
  left:           50%                     !important;
  transform:      translateX(-50%)        !important;
  border-width:   10px 10px 0 10px        !important;
  border-style:   solid                   !important;
  border-color:   #0044aa transparent transparent transparent !important;
}

/* ───────── 背景用三角形（背景色） ───────── */
.gtkhtjhj::after {
  content:        ""                      !important;
  position:       absolute                !important;
  bottom:         -8px                    !important;
  left:           50%                     !important;
  transform:      translateX(-50%)        !important;
  border-width:   8px 8px 0 8px           !important;
  border-style:   solid                   !important;
  border-color:   #ffffff transparent transparent transparent !important;
}
/* ───────── Zen Maru Gothic 全ウェイト（400-900 想定）を読み込む ───────── */
/* Google Fonts にないウェイトは自動で最寄り値（700 など）へフォールバック */
@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&display=swap");

/* ───────── .okkhgj にフォントを適用 ───────── */
.okkhgj{
  font-family:"Zen Maru Gothic", sans-serif !important;  /* 書体を固定 */
  /* ↓ ここは必要に応じて書き換え。例では最太の 900 を指定 */
  font-weight:900 !important;                            /* 400-900 まで自由に指定可 */
}
.ghfhdjt{
  font-family:"Zen Maru Gothic", sans-serif !important;  /* 書体を固定 */
  /* ↓ ここは必要に応じて書き換え。例では最太の 900 を指定 *//* 400-900 まで自由に指定可 */
}

/* ───────── 親カード .pjkgh ───────── */
.pjkgh{
  /* ❶ 角丸をゼロにしてフラットなボックスへ */
  border-radius:0 !important;

  /* ❷ パディングを完全にゼロにして
        オレンジ帯 (.jyjtj) が左右いっぱいに広がるように */
  padding:0 !important;

  /* ❸ カードの背景や幅計算などは従来通り */
  background:#ffffff !important;
  box-sizing:border-box !important;
}

/* ───────── オレンジ帯 .jyjtj ───────── */
.jyjtj{
  display:block          !important;
  width:100%             !important;  /* 親幅いっぱいに */
  margin:0               !important;  /* 余白ゼロで密着 */

  background:#F66E11     !important;  /* 指定オレンジ */
  color:#ffffff          !important;
  font-size:22px         !important;
  font-weight:700        !important;
  text-align:center      !important;
  line-height:1.2        !important;

  /* 帯の高さを決める上下パディング */
  padding:20px 0         !important;

  /* 角丸不要なので 0 に */
  border-radius:0        !important;
}
/* ───────── ihgtgd の下余白を狭く ───────── */
.ihgtgd{
  margin-bottom: -28px !important;   /* ← ここを 0〜8px くらいに調整。
                                      もっと詰めたい場合は 4px や 0 に */
}

/* もし「要素そのものを上に寄せたい」場合は下のように書き替える
.ihgtgd{
  margin-top: -28px !important;     上方向へ 8px だけ引き上げ
}
*/
/* ───────── スマホ (幅 ≤768px) では .ihgtgd の負マージンを無効化 ───────── */
@media (max-width: 768px){
  .ihgtgd{
    margin-bottom: -20px !important;   /* 0 に戻して段差を解消 */
  }
}


/* ───────── スマホ幅 (max-width:768px) だけ上書き ───────── */
@media screen and (max-width: 768px) {
  .yyjydfg,
  .jyjtj,
  .ijgjebb {
    padding: 5px 0 !important;
  }
}

/* ───────── オレンジ帯 .jyjtj ───────── */
.yyjydfg{
  display:block          !important;
  width:100%             !important;  /* 親幅いっぱいに */
  margin:0               !important;  /* 余白ゼロで密着 */

  background:#8dcfd9     !important;  /* 指定オレンジ */
  color:#ffffff          !important;
  font-size:22px         !important;
  font-weight:700        !important;
  text-align:center      !important;
  line-height:1.2        !important;

  /* 帯の高さを決める上下パディング */
  padding:20px 0;        

  /* 角丸不要なので 0 に */
  border-radius:0        !important;
}

.ijgjebb{
  display:block          !important;
  width:100%             !important;  /* 親幅いっぱいに */
  margin:0               !important;  /* 余白ゼロで密着 */

  background:#ff8888    !important;  /* 指定オレンジ */
  color:#ffffff          !important;
  font-size:22px         !important;
  font-weight:700        !important;
  text-align:center      !important;
  line-height:1.2        !important;

  /* 帯の高さを決める上下パディング */
  padding:20px 0;        

  /* 角丸不要なので 0 に */
  border-radius:0        !important;
}

.hjtjerh{
  /* 見た目 */
  background:#ffffff !important;   /* 背景を白に */

  /* レイアウト */
  max-width:1000px !important;     /* 最大幅を 1000px に制限 */
  width:100% !important;           /* それ以下の画面では親幅いっぱいに */
  margin:0 auto !important;        /* 左右 auto で “横方向センター配置” */

  /* 内側のテキストや要素も中央寄せしたい場合は： */
  text-align:center !important;

  /* 追加オプション（必要に応じて） */
  /* padding:16px !important;      内側余白 */
  /* border-radius:8px !important; 角丸 */
  box-sizing:border-box !important;
}
.fgrhhkl{
  border-radius:12px !important;   /* 四隅を 12px 丸める（数値はお好みで） */
  overflow:hidden !important;      /* 中身を丸枠でクリップ（img がはみ出す場合に必須） */
}
@media (max-width: 768px){
  /* カラム共通の SWELL ルールを “上書き” するので !important を付ける */
  .swell-block-columns .afrh{
    margin: 0 !important;     /* ← これで .afrh だけ余白を無効化 */
  }
}
/* ───────── スマホ (幅 ≤768px) 用に .afrh を小さく ───────── */
@media (max-width: 768px){

  .afrh{


    /* もしくは高さ自動化したい場合は上行を削除して
       padding だけ詰めることも可能 */

    /* 余白も少しタイトに */
    padding: 1rem !important;      /* 上下左右 1rem に変更 */

    /* オプション：影を薄くする、角丸を小さくする 等も可
    box-shadow: 8px 8px 0 0 #F66E11 !important;
    border-radius: 8px !important;
    */
  }

  /* 内部画像も高さにフィットさせたい場合は追加で */
  .afrh img{
    max-height: 140px !important;  /* 数値を好みで調整 */
    object-fit: cover !important;
  }
}
.fdggeg{
  line-height:1.3 !important;                 /* 行間を詰める */
  text-shadow:0 2px 4px rgba(0,0,0,.45) !important;
  /*  ↑ X 0 ／Y 2px ／ぼかし 4px ／濃さ 45%  */
}
.ufdw{
  margin-top: -150px !important;   /* ← 好きな数値に調整 */
}
.ihghhhs{
  position: relative !important;  /* 既に relative/absolute なら省略可 */
  top: -20px !important;           /* ↓ 好きな数値で下へ移動 */
}
.ffrghs{
  border: 4px solid #F66E11 !important; /* ← 太さ4px／色F66E11 */
  padding: .5em 1em;                   /* ← 文字がくっつかないよう余白確保 */
  box-sizing: border-box;              /* ← 枠線を含めて幅計算 */
}
.fghtkinjg{
  background: #ffffff !important;
  padding: 1.5rem !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.15) !important;
  box-sizing: border-box !important;
}
/* ────────────────────────────────────────────────────────────
 * .fghtkinj
 *   — 白背景カード
 *   — 太めオレンジ枠（6 px #F66E11）
 *   — 幅を絞って中央配置
 *   — ドロップシャドウ
 *   — 左上にロゴ画像（ehtjtj.webp）※さらに「もう少し上」に調整
 *──────────────────────────────────────────────────────────── */
.fghtkinj{
  /* レイアウト & 装飾 */
  background: #ffffff !important;
  border: 6px solid #F66E11 !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.15) !important;
  padding: 1.5rem !important;
  box-sizing: border-box !important;

  /* 幅を狭めてセンター配置 */
  width: 80% !important;          /* 必要なら 60% などに調整 */
  max-width: 1000px !important;   /* さらに狭めたい場合は変更 */
  margin: 0 auto !important;      /* 横方向センター */

  /* ロゴ用疑似要素の基準点 */
  position: relative !important;
}
/* ── スマホ (例：599px 以下) では幅指定を打ち消す ── */
@media (max-width: 599px){
  .fghtkinj{
    width: auto !important;      /* 100% でも可。auto で指定を実質解除 */
    max-width: none !important;  /* 必要なら合わせて無効化 */
  }
}

/* 左上ロゴ画像（さらに上へ寄せた版） */
.fghtkinj::before{
  content: "" !important;
  position: absolute !important;
  top: -4.5rem !important;  /* ← ★ ここを 0.25rem に変更して「もう少し上」 */
  left: -3rem !important;    /* 枠線からの左余白 */

  width: 150px !important;  /* 画像サイズ：変更可 */
  height: 150px !important;

  background: url("https://evercoat.snb-c.jp/wp-content/uploads/2025/06/ehtjtj.webp")
              no-repeat center/contain !important;

  pointer-events: none !important;  /* クリックを邪魔しない */
  z-index: 2 !important;            /* ボックス内の他要素より前面 */
}
/* ─────────────────────────────────────────
 * スマホ時：右端追従バナー（2本）を消す
 *──────────────────────────────────────── */
@media (max-width: 768px){
  .floating-banner,
  .floating-banner--contact,
  .floating-banner--request{
    display: none !important;
  }
  .fghtkinj::before{
      top: -5.8rem !important;  /* ← ★ ここを 0.25rem に変更して「もう少し上」 */
  left: -1rem !important;    /* 枠線からの左余白 */

  width: 120px !important;  /* 画像サイズ：変更可 */
  height: 120px !important;
}
.kuykytk {
  line-height: 1.2 !important;  /* 数値を小さくすると行間が狭くなる */
}
	/* ===== 在籍職人 – prefix/suffix を含めたカウントアップ ===== */
.staff-count-box {
  text-align: center;
  line-height: 1.2;
}
.staff-count-box img {
  width: 160px;
  max-width: 90%;
  height: auto;
}
.staff-caption {
  margin-top: 0.3em;
}

/* ラベル（在籍職人） */
.staff-label {
  font-size: 0.75rem !important;
  font-weight: 600;
  color: #E95E0C !important;
}

/* 約／数字／名 を横並びに */
.staff-prefix,
.staff-number,
.staff-suffix {
  display: inline-block;
  vertical-align: middle;
  font-weight: 800;
  color: #E95E0C;
}

/* Prefix／Suffix は数字より少し小さめ */
.staff-prefix,
.staff-suffix {
  font-size: 2.5rem !important;  /* お好みで調整 */
  margin: 0 0.1em;
}

/* 数字部分 */
.staff-number {
  font-size: 4rem !important;    /* 大きめに */
  min-width: 1.2em;               /* 桁幅ブレ防止 */
}

/* モバイル時 */
@media (max-width: 480px) {
  .staff-prefix,
  .staff-number,
  .staff-suffix {
    /* 全体的に少し縮小 */
    transform: scale(0.8);
    display: inline-block;
  }
}