.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 *//* ============================
   共通設定
   ============================ */
:root { --main-blue: #5799d9; --main-green: #2eaea0; }

.vnav-toggle-input { display: none; }

/* ============================
   PC：縦書きグローバルナビ
   ============================ */
.vnav ul {
  display: flex;
  padding: 0; margin: 0;
  list-style: none;
}

.vnav ul li + li { margin-left: 35px; }

.vnav a {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 16px;
  letter-spacing: 0.25em;
  color: #333;
  text-decoration: none;
  position: relative;
  padding-top: 100px;
  transition: color 0.3s ease;
}

/* 上部の縦ライン（ベース） */
.vnav a::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 1px; height: 0;
  background: var(--main-blue);
  transition: height 0.3s ease, background 0.3s ease;
}

/* ホバー：ラインが伸びる */
.vnav a:hover { color: var(--main-blue); }
.vnav a:hover::before { height: 90px; }

/* --- アクティブ（現在地）の設定 --- */
.vnav li.is-active a,
.vnav li.current-menu-item a {
  color: var(--main-blue) !important;
  font-weight: bold;
}
.vnav li.is-active a::before,
.vnav li.current-menu-item a::before {
  height: 85px; /* アクティブ時は常にラインを表示 */
  background: var(--main-blue);
}

/* ============================
   右固定サイドボタン（PC用）
   ============================ */
.fixed-side-buttons {
  position: fixed; top: 50%; right: 0;
  transform: translateY(-50%);
  z-index: 99;
  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: 15px; padding: 15px 5px;
  color: #fff; text-decoration: none;
  border-radius: 10px 0 0 10px;
  transition: 0.3s ease;
}

.side-btn--contact { background: var(--main-blue); }
.side-btn--works { background: var(--main-green); }

.side-btn:hover { transform: translateX(-5px); box-shadow: -5px 5px 15px rgba(0,0,0,0.2); }

.side-btn__icon img { width: 26px; filter: brightness(0) invert(1); }
.side-btn__text { writing-mode: vertical-rl; font-size: 14px; letter-spacing: 0.1em; }

/* ============================
   スマホレイアウト（～768px）
   ============================ */
@media (max-width: 768px) {
  .fixed-side-buttons { display: none; }

  /* スマホメニュー本体 */
  .vnav {
    position: fixed; top: 60px; right: 0;
    width: 75%; max-width: 300px;
    height: calc(100vh - 60px);
    background: #f8f8f8;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 99;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
  }

  .vnav-toggle-input:checked ~ .vnav { transform: translateX(0); }

  .vnav ul { display: block; padding: 30px 20px; }
  .vnav ul li + li { margin-left: 0; border-top: 1px solid #eee; }

  .vnav a {
    writing-mode: horizontal-tb;
    padding: 15px 10px;
    display: block;
    font-size: 15px;
  }
  .vnav a::before { display: none; }

  /* スマホのアクティブ表示 */
  .vnav li.is-active a {
    background: rgba(87, 153, 217, 0.08);
    border-left: 4px solid var(--main-blue);
    padding-left: 15px;
  }

  /* ハンバーガーボタン */
  .vnav-toggle {
    position: fixed; top: 0; right: 0;
    width: 60px; height: 60px;
    background: var(--main-blue);
    display: flex; align-items: center; justify-content: center;
    z-index: 99;
  }
  .vnav-toggle__line { position: relative; width: 26px; height: 2px; background: #fff; }
  .vnav-toggle__line::before, .vnav-toggle__line::after {
    content: ""; position: absolute; left: 0; width: 26px; height: 2px; background: #fff;
    transition: 0.3s;
  }
  .vnav-toggle__line::before { top: -8px; }
  .vnav-toggle__line::after { bottom: -8px; }

  .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: 20px; }
  .side-btn--horizontal {
    flex-direction: row !important; height: auto; width: 100%;
    padding: 12px; border-radius: 8px;
  }
  .side-btn--horizontal .side-btn__text { writing-mode: horizontal-tb; }
}
/* ============================
   1. 右固定サイドボタン (PC専用)
   ============================ */
.fixed-side-buttons {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 99;
  display: flex; 
  flex-direction: column; 
  gap: 8px;
}

/* スマホ幅(768px以下)では「右固定」を完全に消す */
@media (max-width: 768px) {
  .fixed-side-buttons {
    display: none !important;
  }
}

/* ============================
   2. スマホメニュー内CTA (スマホ専用)
   ============================ */
/* デフォルト（PC幅）では「メニュー内ボタン」を絶対に隠す */
.vnav-cta {
  display: none !important;
}

/* スマホ幅(768px以下)の時だけ、メニュー内で表示させる */
@media (max-width: 768px) {
  .vnav-cta {
    display: flex !important; /* !importantで強制 */
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border-top: 1px solid #ddd;
    margin-top: 10px;
  }
}

/* 横並びボタンのスタイル調整（共通） */
.side-btn.side-btn--horizontal {
  display: flex;
  flex-direction: row !important;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: auto;
  padding: 12px;
  border-radius: 8px;
}
/* ============================
   1. 右固定サイドボタン (PC専用)
   ============================ */
.fixed-side-buttons {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 99;
  display: flex; 
  flex-direction: column; 
  gap: 8px;
}

/* スマホ幅(768px以下)では「右固定」を完全に非表示 */
@media (max-width: 768px) {
  .fixed-side-buttons {
    display: none !important;
  }
}

/* ============================
   2. スマホメニュー内CTA (スマホ専用)
   ============================ */
/* PC幅ではメニュー内のボタンを絶対に隠す（2重表示防止） */
.vnav-cta {
  display: none !important;
}

/* スマホ幅の時だけ表示 */
@media (max-width: 768px) {
  .vnav-cta {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border-top: 1px solid #ddd;
    margin-top: 10px;
  }
}

/* ============================
   3. ボタン内の文字色・アイコン色を「白」に固定
   ============================ */
/* 共通：文字を白く、太く */
.side-btn__text {
  color: #ffffff !important; /* 何があっても白 */
  font-weight: 600;
}

/* 共通：アイコンを白く（画像が黒い場合の反転処理） */
.side-btn__icon img {
  filter: brightness(0) invert(1) !important;
}

/* 横並びボタン（スマホ用）のスタイル微調整 */
.side-btn.side-btn--horizontal {
  display: flex;
  flex-direction: row !important;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: auto;
  padding: 12px;
  border-radius: 8px;
  text-decoration: none; /* 下線を消す */
}

/* 背景色設定 */
.side-btn--contact { background-color: #5799d9 !important; }
.side-btn--works   { background-color: #2eaea0 !important; }

/* ホバー時の挙動 */
.side-btn:hover {
  opacity: 0.9;
  color: #ffffff !important;
}/* End custom CSS */