@charset "utf-8";
/* スマートフォン専用（screen and (max-width:767px)）
   PC 用の指定は style.css。ここでは差分だけを上書きする。 */

.sp {
    display: block;
}

.pc {
    display: none !important;
}

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

/* Android のフォント指定バグ対策 */
p, li, dt, dd {
    max-height: 999999px;
}

img, image-slot, svg {
    max-width: 100%;
}


/* ============================================================
   ヘッダー（ハンバーガーメニュー）
   ページごとに見た目クラスの枝番が変わるため、
   構造フック（hdr*）を対象にする
   ============================================================ */

.hdrInner {
    flex-wrap: wrap;
    gap: 12px 10px;
    min-height: 60px;
    padding: 8px 16px;
}

.hdrLogo {
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

/* ロゴ上の小さなキャッチは非表示 */
.hdrCopy {
    display: none;
}

.hdrLogoIcon {
    width: 38px;
    height: 38px;
    font-size: 19px;
}

.hdrLogoName {
    font-size: 15px;
}

.hdrLogoEn {
    font-size: 9px;
    letter-spacing: .3em;
}

/* 開閉用チェックボックス本体は常に非表示 */
.navToggle {
    display: none;
}

/* ハンバーガーボタン */
.navBtn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    flex: 0 0 auto;
    cursor: pointer;
    order: 3;
}

.navBtnBar {
    display: block;
    width: 100%;
    height: 2px;
    background: #f4efe5;
    transition: transform .25s ease, opacity .25s ease;
}

.navToggle:checked ~ .navBtn .navBtnBar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.navToggle:checked ~ .navBtn .navBtnBar:nth-child(2) {
    opacity: 0;
}

.navToggle:checked ~ .navBtn .navBtnBar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ナビ本体・電話/CTA は開いたときだけ表示 */
.hdrNav,
.hdrR {
    display: none;
    width: 100%;
    order: 4;
}

.navToggle:checked ~ .hdrNav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    margin-top: 4px;
}

.navToggle:checked ~ .hdrR {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 0 16px;
}

.hdrNavLink {
    padding: 14px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    font-size: 15px;
}

.hdrTelW {
    align-items: flex-start;
}

.hdrBtn {
    justify-content: center;
}

/* メニューが画面を超えたらヘッダー内でスクロールできるようにする */
.hdr {
    max-height: 100vh;
    overflow-y: auto;
}


/* ============================================================
   動的スタイル（HTML側に style="...{{ }}..." が残る箇所）
   インライン指定が優先されるため !important で上書きする
   ============================================================ */

/* 画像と本文の左右入れ替えレイアウト → 1カラム化 */
.stDynGrid {
    grid-template-columns: 1fr !important;
}

/* 左右の並び替えを解除して DOM 順（本文 → 画像）に揃える */
.stDynW,
.svDynW {
    order: 0 !important;
}

/* 画像に重ねる英字バッジは必ず右上に固定 */
.stDynEn {
    left: auto !important;
    right: 0 !important;
    font-size: 11px !important;
    padding: 8px 14px !important;
}

/* FAQ の回答（開閉部）の左インデントを詰める */
.rcDynW,
.rvDynW {
    padding: 0 18px 22px !important;
}

/* 施工実績の写真スロット */
.wkDynImg {
    width: 100% !important;
}


/* ============================================================
   自動生成：段組み解除・折り返し・文字サイズ調整
   ============================================================ */

.cmnBtn {
    flex-wrap: wrap;
}

.cmnBtn2 {
    flex-wrap: wrap;
}

.cmnBtn3 {
    flex-wrap: wrap;
}

.cmnFlex {
    flex-wrap: wrap;
}

.cmnFlex3 {
    flex-wrap: wrap;
}

.cmnFlex4 {
    flex-wrap: wrap;
}

.cmnFlex5 {
    flex-wrap: wrap;
}

.cmnFlex6 {
    flex-wrap: wrap;
}

.cmnFlex7 {
    flex-wrap: wrap;
}

.cmnFlex10 {
    flex-wrap: wrap;
}

.cmnGrid {
    grid-template-columns: 1fr;
}

.cmnGrid2 {
    grid-template-columns: 1fr;
}

.cmnGrid3 {
    grid-template-columns: 1fr;
}

.cmnSec6 {
    flex-wrap: wrap;
}

.cmnW4 {
    font-size: 21px;
}

.cmnW12 {
    flex-wrap: wrap;
}

.cmp03Grid {
    grid-template-columns: 1fr;
}

.cmp03W2 {
    font-size: 25px;
}

.cmp04Grid {
    grid-template-columns: 1fr;
}

.cmp05Flex {
    flex-wrap: wrap;
}

.cmp06Btn {
    flex-wrap: wrap;
}

.cmp06Flex {
    flex-wrap: wrap;
}

.cmp06Flex3 {
    flex-wrap: wrap;
}

.cmp06Grid {
    grid-template-columns: 1fr;
}

.cmp06Grid2 {
    grid-template-columns: 1fr;
}

.cmp06Mark {
    flex-wrap: wrap;
}

.cmp06Tag {
    white-space: normal;
}

.cmp07Grid {
    grid-template-columns: 1fr;
}

.cmp08Btn {
    flex-wrap: wrap;
}

.cmp08Grid {
    grid-template-columns: 1fr;
}

.cmp08Grid2 {
    grid-template-columns: 1fr 1fr;
}

.cmp08Lbl {
    flex-wrap: wrap;
}

.ct01Sec {
    flex-wrap: wrap;
}

.ct03Btn {
    flex-wrap: wrap;
}

.ct03Flex {
    flex-wrap: wrap;
}

.ct03Flex3 {
    flex-wrap: wrap;
}

.ct03Grid {
    grid-template-columns: 1fr;
}

.ct03Link {
    font-size: 24px;
}

.ct03Mark {
    flex-wrap: wrap;
}

.ct04Flex {
    flex-wrap: wrap;
}

.ct04Grid {
    grid-template-columns: 1fr;
}

.ct05Btn {
    flex-wrap: wrap;
    min-width: 0;
}

.ct05Flex {
    flex-wrap: wrap;
}

.ct05Flex2 {
    flex-wrap: wrap;
}

.ct05Flex3 {
    flex-wrap: wrap;
}

.ct05Flex4 {
    flex-wrap: wrap;
}

.ct05Flex5 {
    flex-wrap: wrap;
}

.ct05Flex10 {
    flex-wrap: wrap;
}

.ct05Flex11 {
    flex-wrap: wrap;
}

.ct05Grid {
    grid-template-columns: 1fr;
}

.ct05Grid2 {
    grid-template-columns: 1fr;
}

.ct05Lbl7 {
    flex-wrap: wrap;
}

.ct05Lbl8 {
    flex-wrap: wrap;
}

.ct05Lbl12 {
    flex-wrap: wrap;
}

.ct05Lbl13 {
    flex-wrap: wrap;
}

.ct05Mark {
    flex-wrap: wrap;
}

.ct05Mark2 {
    flex-wrap: wrap;
}

.footerFlex2 {
    flex-wrap: wrap;
}

.footerGrid {
    grid-template-columns: 1fr;
}

.footerLogoEn {
    letter-spacing: .2em;
}

.footerLogoIcon {
    flex-wrap: wrap;
}

.headerBtn {
    flex-wrap: wrap;
}

.headerFlex4 {
    flex-wrap: wrap;
}

.headerInner {
    flex-wrap: wrap;
}

.headerLogoEn {
    letter-spacing: .2em;
}

.headerLogoIcon {
    flex-wrap: wrap;
}

.headerLogoRow {
    flex-wrap: wrap;
}

.headerNav {
    flex-wrap: wrap;
}

.headerNav2 {
    flex-wrap: wrap;
}

.headerNav3 {
    flex-wrap: wrap;
}

.headerR {
    flex-wrap: wrap;
}

.nd01Btn2 {
    flex-wrap: wrap;
}

.nd01En2 {
    flex-wrap: wrap;
}

.nd01Flex3 {
    flex-wrap: wrap;
}

.nd01Flex4 {
    flex-wrap: wrap;
}

.nd01Flex5 {
    flex-wrap: wrap;
}

.nd01Item {
    flex-wrap: wrap;
}

.nd01Item2 {
    flex-wrap: wrap;
}

.nd01Mark {
    flex-wrap: wrap;
}

.nd02Btn {
    flex-wrap: wrap;
}

.nd02Grid {
    grid-template-columns: 1fr;
}

.nd03Flex {
    flex-wrap: wrap;
}

.nd03Lbl2 {
    flex-wrap: wrap;
}

.nd03Lbl4 {
    flex-wrap: wrap;
}

.nw02Grid {
    grid-template-columns: 1fr;
}

.nw03Btn {
    flex-wrap: wrap;
}

.nw03En {
    flex-wrap: wrap;
}

.nw03En3 {
    flex-wrap: wrap;
}

.nw03Flex2 {
    flex-wrap: wrap;
}

.nw03Lbl8 {
    flex-wrap: wrap;
}

.nw03Lbl12 {
    flex-wrap: wrap;
}

.nw03Link2 {
    flex-wrap: wrap;
}

.nw03Link3 {
    grid-template-columns: 1fr;
}

.nw03Link4 {
    flex-wrap: wrap;
}

.nw03Link5 {
    flex-wrap: wrap;
}

.nw03Mark {
    flex-wrap: wrap;
}

.pp02AccHd {
    flex-wrap: wrap;
}

.pp02Flex {
    flex-wrap: wrap;
}

.pp02Flex2 {
    flex-wrap: wrap;
}

.pp02Flex3 {
    flex-wrap: wrap;
}

.pp02Flex4 {
    flex-wrap: wrap;
}

.pp02Flex5 {
    flex-wrap: wrap;
}

.pp02Flex7 {
    flex-wrap: wrap;
}

.pp02Flex9 {
    flex-wrap: wrap;
}

.pp02Grid {
    grid-template-columns: 1fr;
}

.pp02Item {
    flex-wrap: wrap;
}

.pp02Link {
    flex-wrap: wrap;
}

.pp02Link3 {
    flex-wrap: wrap;
}

.rc01Lbl {
    flex-wrap: wrap;
}

.rc03Grid {
    grid-template-columns: 1fr;
}

.rc03Mark {
    flex-wrap: wrap;
}

.rc04Grid {
    grid-template-columns: 1fr;
}

.rc05Flex {
    flex-wrap: wrap;
}

.rc05Grid {
    grid-template-columns: 1fr;
}

.rc05Mark {
    flex-wrap: wrap;
}

.rc06Flex {
    flex-wrap: wrap;
}

.rc06Grid {
    grid-template-columns: 1fr;
}

.rc06Mark {
    flex-wrap: wrap;
}

.rc07Flex {
    flex-wrap: wrap;
}

.rc07Grid {
    grid-template-columns: 1fr;
}

.rc08Flex2 {
    flex-wrap: wrap;
}

.rc08Layer {
    white-space: normal;
}

.rc09Grid {
    grid-template-columns: 1fr;
}

.rc10Flex {
    flex-wrap: wrap;
}

.rc10Grid {
    grid-template-columns: 1fr 1fr;
}

.rc12Btn {
    flex-wrap: wrap;
}

.rc12Btn2 {
    flex-wrap: wrap;
}

.rv01Layer3 {
    white-space: normal;
}

.rv01Link {
    flex-wrap: wrap;
}

.rv03Flex {
    flex-wrap: wrap;
}

.rv03Grid {
    grid-template-columns: 1fr;
}

.rv03Mark {
    flex-wrap: wrap;
}

.rv04Grid {
    grid-template-columns: 1fr;
}

.rv04Grid2 {
    grid-template-columns: 1fr 1fr;
}

.rv05Grid {
    grid-template-columns: 1fr;
}

.rv05Layer {
    white-space: normal;
}

.rv05Mark {
    flex-wrap: wrap;
}

.rv06Grid {
    grid-template-columns: 1fr 1fr;
}

.rv07En2 {
    font-size: 20px;
}

.rv07Grid {
    grid-template-columns: 1fr;
}

.rv07Grid2 {
    grid-template-columns: 1fr;
}

.rv08Flex {
    flex-wrap: wrap;
}

.rv08Grid {
    grid-template-columns: 1fr;
}

.rv08Grid2 {
    grid-template-columns: 1fr;
}

.rv09Btn {
    flex-wrap: wrap;
}

.rv10Btn {
    flex-wrap: wrap;
}

.rv10Btn2 {
    flex-wrap: wrap;
}

.st01Btn {
    flex-wrap: wrap;
}

.st01Btn2 {
    flex-wrap: wrap;
}

.st01Flex {
    flex-wrap: wrap;
}

.st01Layer3 {
    white-space: normal;
}

.st03Flex2 {
    flex-wrap: wrap;
}

.st04Flex {
    flex-wrap: wrap;
}

.st04Grid {
    grid-template-columns: 1fr;
}

.st04Layer {
    white-space: normal;
}

.stf02Grid {
    grid-template-columns: 1fr;
}

.stf03Grid {
    grid-template-columns: 1fr;
}

.stf04En {
    font-size: 20px;
}

.stf04Flex {
    flex-wrap: wrap;
}

.stf04Grid {
    grid-template-columns: 1fr;
}

.stf04Grid2 {
    grid-template-columns: 1fr 1fr;
}

.stf05Grid {
    grid-template-columns: 1fr 1fr;
}

.stf06Btn {
    flex-wrap: wrap;
}

.stf06Flex {
    flex-wrap: wrap;
}

.stf06Grid {
    grid-template-columns: 1fr;
}

.sv01Flex {
    flex-wrap: wrap;
}

.sv01Flex2 {
    flex-wrap: wrap;
}

.sv01Grid {
    grid-template-columns: 1fr;
}

.sv01Mark {
    flex-wrap: wrap;
}

.sv02Grid {
    grid-template-columns: 1fr 1fr;
}

.sv04Btn {
    flex-wrap: wrap;
}

.sv04Flex2 {
    flex-wrap: wrap;
}

.sv04Flex3 {
    flex-wrap: wrap;
}

.sv04Flex4 {
    flex-wrap: wrap;
}

.sv04Grid {
    grid-template-columns: 1fr;
}

.sv05Btn {
    flex-wrap: wrap;
    white-space: normal;
}

.sv05Btn2 {
    flex-wrap: wrap;
    white-space: normal;
}

.sv05Layer {
    white-space: normal;
}

.sv06Btn {
    flex-wrap: wrap;
}

.top01Btn {
    flex-wrap: wrap;
}

.top01Btn2 {
    flex-wrap: wrap;
}

.top01En3 {
    letter-spacing: .2em;
}

.top01Flex {
    flex-wrap: wrap;
}

.top01Flex2 {
    flex-wrap: wrap;
}

.top01Flex5 {
    flex-wrap: wrap;
}

.top01Grid {
    grid-template-columns: 1fr 1fr;
}

.top01Mark {
    flex-wrap: wrap;
}

.top02Flex {
    flex-wrap: wrap;
}

.top02Flex2 {
    flex-wrap: wrap;
}

.top02Grid {
    grid-template-columns: 1fr;
}

.top02Mark {
    flex-wrap: wrap;
}

.top03Grid {
    grid-template-columns: 1fr 1fr;
}

.top03W2 {
    font-size: 24px;
}

.top04Btn {
    flex-wrap: wrap;
    white-space: normal;
}

.top04Grid {
    grid-template-columns: 1fr 1fr;
}

.top04Layer {
    white-space: normal;
}

.top04Mark {
    flex-wrap: wrap;
}

.top05En {
    font-size: 21px;
}

.top05Flex {
    flex-wrap: wrap;
}

.top05Flex2 {
    flex-wrap: wrap;
}

.top05Grid {
    grid-template-columns: 1fr;
}

.top05Lbl {
    flex-wrap: wrap;
}

.top06Btn {
    flex-wrap: wrap;
}

.top07Grid {
    grid-template-columns: 1fr;
}

.top08Btn {
    flex-wrap: wrap;
}

.top08Flex {
    flex-wrap: wrap;
}

.top08Grid {
    grid-template-columns: 1fr 1fr;
}

.top09Grid {
    grid-template-columns: 1fr;
}

.top09Link {
    flex-wrap: wrap;
}

.wk03Btn {
    flex-wrap: wrap;
}

.wk03Btn2 {
    flex-wrap: wrap;
}

.wk03Lbl {
    flex-wrap: wrap;
}

.wk03Lbl4 {
    flex-wrap: wrap;
}

.wk04Grid {
    grid-template-columns: 1fr;
}