.elementor-14 .elementor-element.elementor-element-18886de{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--flex-wrap:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:999;}.elementor-14 .elementor-element.elementor-element-b34d649{--display:flex;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:80px;--padding-right:0px;}.elementor-14 .elementor-element.elementor-element-9639089{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-14 .elementor-element.elementor-element-9f97b9d{width:100%;max-width:100%;}.elementor-14 .elementor-element.elementor-element-9f97b9d img{width:100%;}.elementor-14 .elementor-element.elementor-element-a615fc1{--display:flex;--align-items:flex-end;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:080px;}.elementor-14 .elementor-element.elementor-element-f8f19db{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-14 .elementor-element.elementor-element-b34d649{--width:430px;}.elementor-14 .elementor-element.elementor-element-a615fc1{--width:500px;}}@media(max-width:767px){.elementor-14 .elementor-element.elementor-element-18886de{--min-height:60px;}.elementor-14 .elementor-element.elementor-element-b34d649{--width:250px;--min-height:60px;--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:0px;}.elementor-14 .elementor-element.elementor-element-b34d649.e-con{--align-self:center;}}/* Start custom CSS for html, class: .elementor-element-f8f19db *//* ============================
   グローバルナビ（PC：縦書き）
   ============================ */

/* コンテナ（横一列に並べる） */
.vnav ul{
  display:flex;
  padding:0;
  margin:0;
  list-style:none;
}

/* ★ PC時のメニュー間隔は margin だけで管理（共通） */
.vnav ul li + li{
  margin-left:30px;            /* 基本の余白：Chrome 等用 */
}

/* リンク共通（縦書き） */
.vnav a{
  writing-mode: vertical-rl;   /* 縦書き */
  text-orientation: upright;
  font-size:16px;
  letter-spacing:0.2em;
  color:#333333;               /* 通常：#333333 */
  text-decoration:none;
  position:relative;
  padding-top:100px;           /* 上に線を出す余白 */
}

/* 上部の縦ライン（ホバー／アクティブで伸びる） */
.vnav a::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:1px;
  height:0;
  background:#5799d9;          /* ホバー用ライン色 */
  transition:height .25s ease, background .25s ease;
}

/* ホバー：文字とラインを青に */
.vnav a:hover{
  color:#5799d9;
}
.vnav a:hover::before{
  height:90px;                 /* 好きな長さに調整 */
}

/* アクティブ状態（現在ページ） */
.vnav li.is-active a{
  color:#999999;               /* activeはグレー */
}
.vnav li.is-active a::before{
  height:32px;
  background:#999999;          /* ラインもグレー */
}

/* メニュー開閉用チェックボックスは非表示 */
.vnav-toggle-input{
  display:none;
}

/* スマホメニュー内CTA（デフォは非表示） */
.vnav-cta{
  display:none;
}

/* ============================
   右固定サイドボタン（PC用）
   ============================ */

/* コンテナ：右端固定 */
.fixed-side-buttons{
  position:fixed;
  top:50%;
  right:0;
  transform:translateY(-50%);
  z-index:999;
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* 共通ボタン（縦レイアウト版・右固定用） */
.side-btn{
  width:56px;
  height:180px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;      /* 中央寄せ */
  gap:16px;                    /* アイコンと文字の間 */
  padding:14px 8px 16px;
  box-sizing:border-box;
  color:#fff;
  text-decoration:none;
  border-radius:10px 0 0 10px; /* 左だけ角丸 */
  overflow:hidden;
  position:relative;
  transition:
    background-color .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
  box-shadow:0 0 0 rgba(0,0,0,0.1);
}

/* アイコンと文字は常に白 */
.side-btn__icon img{
  display:block;
  width:28px;
  height:auto;
  filter:brightness(0) invert(1); /* 白く見せる（SVG次第で不要） */
  transition:transform .25s ease;
}
.side-btn__text{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-size:14px;
  letter-spacing:0.2em;
  color:#fff;
}

/* 色：通常状態 */
.side-btn--contact{ background:#5799d9; }  /* お問い合わせ */
.side-btn--works{   background:#2eaea0; }  /* 施工実績 */

/* ホバー：背景色＋ちょい動き */
.side-btn:hover{
  transform:translateX(-3px);    /* 左にスライド */
  box-shadow:-4px 4px 12px rgba(0,0,0,0.25);
}
.side-btn--contact:hover{ background:#3f7ec0; }
.side-btn--works:hover{   background:#259685; }

/* アイコンを上にふわっと動かす */
.side-btn:hover .side-btn__icon img{
  transform:translateY(-4px);
}

/* ============================
   横書きバージョンのボタン（中身横並び）
   － スマホメニュー内などで使用
   ============================ */

/* 横書きボタン（アイコン＋テキストを中央揃え） */
.side-btn.side-btn--horizontal{
  display:flex;
  flex-direction:row !important;   /* 縦→横に強制 */
  justify-content:center;          /* 中央揃え */
  align-items:center;
  gap:10px;
  width:100%;
  height:auto;
  padding:10px 14px;
  border-radius:8px;
  transform:none;
}

.side-btn.side-btn--horizontal .side-btn__icon img{
  width:22px;
  height:auto;
}

.side-btn.side-btn--horizontal .side-btn__text{
  writing-mode:horizontal-tb !important;  /* 縦書き指定を上書き */
  text-orientation:mixed;
  font-size:14px;
  letter-spacing:0.08em;
}

/* ============================
   スマホレイアウト（〜768px）
   ============================ */

@media (max-width:768px){

  /* PC用の横並びナビをリセット */
  .vnav ul{
    display:block;
    padding:20px;
    margin:0;
    list-style:none;
  }

  /* 縦並びになるので横方向マージンは不要 */
  .vnav ul li + li{
    margin-left:0;
  }

  .vnav a{
    writing-mode:horizontal-tb;     /* スマホでは横書き */
    text-orientation:mixed;
    padding-top:0;
    display:block;
    padding:12px 0;
  }
  .vnav a::before{
    display:none;                   /* スマホでは上部ラインなし */
  }

  /* メニュー本体：右からスライド（ボタンの60px下から） */
  .vnav{
    position:fixed;
    top:60px;                                   /* 上のボタンの下から */
    right:0;
    width:70%;
    max-width:280px;
    height:calc(100vh - 60px);
    background:#F1F1F1;
    box-shadow:-6px 0 20px rgba(0,0,0,.15);
    transform:translateX(100%);
    transition:transform .3s ease;
    z-index:998;
  }

  /* チェックが入ったらメニュー表示（右から出てくる） */
  .vnav-toggle-input:checked ~ .vnav{
    transform:translateX(0);
  }

  /* ===== 60×60の青いボタン（右上固定） ===== */
  .vnav-toggle{
    position:fixed;
    top:0;
    right:0;
    width:60px;
    height:60px;
    background:#5799d9;          /* ボタン背景 */
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:999;
  }

  /* 2本ライン（真ん中の線＋疑似要素） */
  .vnav-toggle__line{
    position:relative;
    width:26px;
    height:2px;
    background:#ffffff;
    transition:background .2s ease;
  }
  .vnav-toggle__line::before,
  .vnav-toggle__line::after{
    content:"";
    position:absolute;
    left:0;
    width:26px;
    height:2px;
    background:#ffffff;
    transition:transform .25s ease, top .25s ease, bottom .25s ease;
  }
  .vnav-toggle__line::before{
    top:-8px;
  }
  .vnav-toggle__line::after{
    bottom:-8px;
  }

  /* ホバー（狭いPC幅で見たとき用） */
  .vnav-toggle:hover{
    background:#4184c7;
  }

  /* チェックが入ったとき → 2本ラインがXに変形 */
  .vnav-toggle-input:checked + .vnav-toggle .vnav-toggle__line{
    background:transparent;       /* 真ん中の線を消す */
  }
  .vnav-toggle-input:checked + .vnav-toggle .vnav-toggle__line::before{
    top:0;
    transform:rotate(45deg);
  }
  .vnav-toggle-input:checked + .vnav-toggle .vnav-toggle__line::after{
    bottom:0;
    transform:rotate(-45deg);
  }

  /* ★スマホメニュー内CTAを表示（横並びボタン） */
  .vnav-cta{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:10px 20px 20px;
    border-top:1px solid #ddd;
    margin-top:10px;
  }

  /* ★スマホでは右固定ボタンは非表示 */
  .fixed-side-buttons{
    display:none;
  }
}

/* ============================
   Safari 専用：隙間だけ少し広げる（PC幅のみ）
   ============================ */

@media (min-width:769px){
  body.is-safari .vnav ul li + li{
    margin-left:50px;   /* Safari で狭く見えるぶんだけ＋α の余白 */
  }
}
/* Safari のときだけ、ナビ全体を少し左へ（右側マージンを広げる） */
@media (min-width:769px){
  body.is-safari .vnav{
    margin-right:40px;   /* 数字はお好みで：20〜80pxくらいで調整 */
  }
}/* End custom CSS */