.elementor-277 .elementor-element.elementor-element-dde0b8e{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for html, class: .elementor-element-aa3b0d9 *//* --- Variables & Reset --- */
:root { --main-gold: #9b9458; --drawer-bg: #3b3a39; }

/* --- Header & Navigation --- */
.yh-header { position: sticky; top: 0; z-index: 1000; background: #fff; }
.yh-sideaddr {
  position: fixed; left: 20px; top: 0; width: 56px; padding: 20px 0;
  display: flex; align-items: flex-start; transition: transform .3s, opacity .25s;
}
.yh-sideaddr span { writing-mode: vertical-rl; font-size: 11px; color: #4b5563; line-height: 1.6; }
.yh-header.is-scrolled .yh-sideaddr { transform: translateX(-150%); opacity: 0; }

.yh-nav { max-width: 1200px; margin: 0 auto; padding: 10px 24px 10px 100px; }
.yh-nav-list { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 3.5vw, 40px); list-style: none; padding: 0; margin: 0; }
.yh-nav-list li { position: relative; }
.nav-logo img { height: clamp(36px, 5vw, 48px); width: auto; display: block; }

.yh-nav a, .menu-parent {
  color: #374151 !important; text-decoration: none; font-weight: 500; font-size: 15px;
  display: flex; align-items: center; gap: 6px; padding: 10px 0; transition: 0.3s; cursor: pointer;
}
.yh-nav a:hover, .yh-nav a.is-active-page, .menu-parent.is-active-page { color: var(--main-gold) !important; }

/* --- Sub Menu (Pull Down) --- */
.sub-menu {
  display: none !important; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: #fff; min-width: 240px; box-shadow: 0 15px 35px rgba(0,0,0,0.1);
  padding: 15px 0; border-radius: 6px; z-index: 1100; margin-top: 10px; list-style: none;
}
.sub-menu.is-open { display: block !important; animation: subFadeUp 0.3s ease; }
@keyframes subFadeUp { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

.sub-menu li a {
  padding: 14px 25px !important; color: #4b5563 !important; font-size: 14px; text-align: left;
  transition: 0.3s; border-bottom: 1px solid #f9f9f9; display: block;
}
.sub-menu li a:hover, .sub-menu li a.is-active-page { background: #fcfcf7 !important; color: var(--main-gold) !important; padding-left: 32px !important; }

/* --- Quick Rail & Hamburger --- */
.right-rail {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 9999;
  display: grid; grid-auto-rows: 74px; width: 74px; border-top-left-radius: 14px; border-bottom-left-radius: 14px;
  box-shadow: 0 4px 18px rgba(0,0,0,.18); overflow: hidden;
}
.rail-item { display: grid; place-items: center; text-decoration: none; color: #fff; font-size: 10px; font-weight: 600; border: none; cursor: pointer; }
.rail-item--menu { background: var(--drawer-bg); position: relative; }
.rail-item--mail { background: #06d6d6; }
.rail-item--line { background: #06C755; }

.hamburger-icon { width: 30px; height: 24px; position: relative; margin-bottom: 4px; }
.hamburger-icon span { position: absolute; left: 0; width: 100%; height: 2px; background: #fff; border-radius: 2px; transition: 0.4s; }
.hamburger-icon span:nth-child(1) { top: 0; }
.hamburger-icon span:nth-child(2) { top: 11px; }
.hamburger-icon span:nth-child(3) { top: 22px; }

/* × Animation */
.rail-item--menu.is-open .hamburger-icon span:nth-child(1) { top: 11px; transform: rotate(45deg); }
.rail-item--menu.is-open .hamburger-icon span:nth-child(2) { opacity: 0; transform: translateX(-10px); }
.rail-item--menu.is-open .hamburger-icon span:nth-child(3) { top: 11px; transform: rotate(-45deg); }
.rail-item--menu.is-open .menu-text { opacity: 0; }
.rail-item--menu.is-open::after { content: "CLOSE"; position: absolute; bottom: 10px; font-size: 10px; color: #fff; }

/* --- Drawer (Black with lines) --- */
.ae-drawer {
  position: fixed; top: 0; right: -340px; width: 320px; height: 100%;
  background: var(--drawer-bg); z-index: 9998; transition: 0.4s ease-out; padding-top: 60px; overflow-y: auto;
}
.ae-drawer.is-show { right: 0; }
.ae-drawer__hdg { color: #fff; border-left: 4px solid #169e7e; padding-left: 20px; margin: 0 25px 30px; font-size: 14px; }
.ae-drawer__links { list-style: none; padding: 0; border-top: 1px solid rgba(255,255,255,0.1); }
.ae-drawer__links > li { border-bottom: 1px solid rgba(255,255,255,0.1); }
.ae-drawer__links a { display: block; padding: 18px 25px; color: #fff; text-decoration: none; font-size: 14px; transition: 0.3s; }
.ae-drawer__links a:hover { color: #169e7e; background: rgba(255,255,255,0.05); }

.ae-drawer-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); opacity: 0; visibility: hidden; z-index: 9997; transition: 0.3s; }
.ae-drawer-overlay.is-show { opacity: 1; visibility: visible; }
:root { --main-gold: #9b9458; --drawer-bg: #3b3a39; --yamatake-green: #169e7e; }

/* --- Quick Rail (MAIL/LINE間隔修正) --- */
.right-rail {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 9999;
  display: flex; flex-direction: column; width: 74px;
  background: #fff; border-radius: 14px 0 0 14px; box-shadow: 0 4px 18px rgba(0,0,0,0.2); overflow: hidden;
}

.rail-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 74px; text-decoration: none; color: #fff; border: none; cursor: pointer;
  padding: 8px 0; /* 全体のパディングを調整 */
  gap: 2px; /* ★アイコンと文字の隙間を最小限に */
}

.rail-item img { width: 24px; height: auto; display: block; }
.rail-item span { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; }

.rail-item--menu { background: var(--drawer-bg); }
.rail-item--mail { background: #06d6d6; }
.rail-item--line { background: #06C755; }

/* --- Drawer Active Style --- */
/* ドロワー内のリンク共通（通常時） */
.ae-drawer__links a {
  display: block; padding: 16px 25px; color: #fff !important;
  text-decoration: none; font-size: 14px; transition: 0.3s;
}

/* ★ドロワー内のアクティブ（現在地）とホバー */
.ae-drawer__links a:hover,
.ae-drawer__links a.is-active-page {
  color: var(--yamatake-green) !important;
  background: rgba(255, 255, 255, 0.05);
}

/* 子メニュー（インデント）内のアクティブ */
.ae-drawer__child li a.is-active-page {
  color: var(--yamatake-green) !important;
  font-weight: bold;
}

/* --- Drawer General Reset --- */
.ae-drawer {
  position: fixed; top: 0; right: -340px; width: 320px; height: 100%;
  background: var(--drawer-bg); z-index: 9998; transition: 0.4s ease-out; padding: 60px 0;
}
.ae-drawer.is-show { right: 0; }
.ae-drawer__links, .ae-drawer__child { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.ae-drawer__links li::before, .ae-drawer__child li::before { content: none !important; }
.ae-drawer__links > li { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }

/* 子メニュー背景 */
.ae-drawer__child { background: rgba(0,0,0,0.15); }
.ae-drawer__child li a { padding: 12px 25px 12px 45px !important; color: rgba(255,255,255,0.7) !important; font-size: 13px; }

/* --- Hamburger Animation --- */
.hamburger-icon { width: 26px; height: 18px; position: relative; margin-bottom: 2px; }
.hamburger-icon span { position: absolute; left: 0; width: 100%; height: 2px; background: #fff; transition: 0.3s; }
.hamburger-icon span:nth-child(1) { top: 0; }
.hamburger-icon span:nth-child(2) { top: 8px; }
.hamburger-icon span:nth-child(3) { top: 16px; }

.is-open .hamburger-icon span:nth-child(1) { top: 8px; transform: rotate(45deg); }
.is-open .hamburger-icon span:nth-child(2) { opacity: 0; }
.is-open .hamburger-icon span:nth-child(3) { top: 8px; transform: rotate(-45deg); }
/* --- レスポンシブ用：モバイル表示の制御 --- */
@media screen and (max-width: 767px) {
  /* 1. ロゴ以外（会社情報と他のナビ項目）を非表示 */
  .yh-sideaddr,
  .yh-nav-list > li:not(.nav-logo) {
    display: none !important;
  }

  /* 2. ヘッダーのレイアウト調整 */
  .yh-header {
    display: flex !important;
    justify-content: center !important;
    padding: 15px 0 !important;
  }

  .yh-nav, .yh-nav-list {
    display: block !important; /* リスト全体は消さない */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 3. ロゴの出し分け */
  .logo-pc { display: none !important; } /* PC用を隠す */
  .logo-sp { display: block !important; height: 40px; width: auto; } /* SP用を表示 */
}

.right-rail {
    width: 64px;
    grid-auto-rows: 64px; /* ここを調整 */
    border-radius: 8px 0 0 8px;
    display: grid; /* これを維持 */
  }

  .rail-item {
    display: flex !important;      /* gridの中で中身をFlexで制御 */
    flex-direction: column;       /* 縦並びにする */
    align-items: center;          /* 横位置を中央に */
    justify-content: center;      /* 縦位置を中央に */
    padding: 0 !important;        /* paddingによる崩れを防ぐ */
    gap: 2px;                     /* アイコンと文字の隙間 */
    height: 64px;                 /* 高さ固定 */
  }

  .rail-item img {
    width: 20px !important;       /* アイコンサイズを少し小さめに */
    height: 20px !important;
    display: block;
  }

  .rail-item span {
    font-size: 9px;
    line-height: 1;               /* 行高さを詰める */
    transform: none;              /* scaleを外して調整 */
  }

  /* ハンバーガーアイコンもFlex内で中央配置させる */
  .hamburger-icon {
    width: 28px;
    height: 12px;
    position: relative;
    margin-bottom: 10px;             /* マージンでずれないようにする */
  }
/* ==================================================
   レスポンシブ・スタイル統合版
   ================================================== */

/* --- 1. ロゴの出し分け設定 --- */

/* PC表示時：モバイル用ロゴを非表示 */
@media screen and (min-width: 768px) {
  .logo-sp { display: none !important; }
}

/* モバイル表示時：PC用ロゴを非表示 */
@media screen and (max-width: 767px) {
  .logo-pc { display: none !important; }
}

/* --- 2. ヘッダー調整（モバイル） --- */
@media screen and (max-width: 767px) {
  .yh-sideaddr,
  .yh-nav-list > li:not(.nav-logo) {
    display: none !important;
  }

  .yh-header {
    display: flex !important;
    justify-content: center !important;
    padding: 15px 0 !important;
  }

  .yh-nav, .yh-nav-list {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* --- 3. クイックメニュー（モバイル） --- */
@media screen and (max-width: 767px) {
  .right-rail {
    width: 64px;
    grid-auto-rows: 64px;
    border-radius: 8px 0 0 8px;
    display: grid !important;
  }

  .rail-item {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    gap: 2px;
    height: 64px;
  }

  .rail-item img {
    width: 20px !important;
    height: 20px !important;
    display: block;
  }

  .rail-item span {
    font-size: 9px;
    line-height: 1;
    transform: none;
  }

  .hamburger-icon {
    width: 28px;
    height: 12px;
    position: relative;
    margin-bottom: 12px;
  }
}
@media screen and (max-width: 767px) {
  .right-rail {
    /* JavaScriptで操作するために必要なプロパティ */
    opacity: 1;
    visibility: visible;
    /* transitionはCSSに含めておくとJavaScriptで設定しなくてもスムーズになります */
    transition: opacity 0.3s, visibility 0.3s;
    
    /* ...その他の設定 */
  }
}
/* --- サイドメニューのレイアウト修正 --- */

/* 1. 「コンセプト住宅」等の親階層の見た目を整える */
.ae-drawer__no-link {
  display: block;
  padding: 18px 25px;
  color: #fff !important;
  font-size: 14px;
  cursor: default;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* 2. サブメニュー（子階層）の挙動を安定させる */
.ae-drawer__child {
  display: block !important; /* 強制的に表示ブロックとして扱う */
  background: rgba(0, 0, 0, 0.15);
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 3. 子要素のリンクの余白を再調整 */
.ae-drawer__child li a {
  display: block;
  padding: 12px 25px 12px 45px !important; /* 左側にインデントを作る */
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 13px;
  text-decoration: none;
}

/* 4. 親要素の直後にくるリストの境界線を整理 */
.ae-drawer__links > li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ad36e6f *//* ===== FOLLOW ME (standalone) ===== */
:root{
  --follow-line-h: 120px;     /* 縦ラインの長さ */
  --follow-font-size: 12px;   /* 文字サイズ */
  --follow-gap: 50px;         /* 文字・線・アイコンの間隔 */
  --follow-offset-x: -30px;   /* 画面左からのはみ出し（微調整用） */
}

.follow{
  position: fixed;
  left: var(--follow-offset-x);
  top: 60%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--follow-gap);
  z-index: 2000;
}

.follow__text{
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  letter-spacing: 2px;
  font-size: var(--follow-font-size);
  color: #111;
  transform: rotate(90deg);
  transform-origin: center;
  line-height: 1;
}

.follow__line{
  width: 2px;
  height: var(--follow-line-h);
  background: linear-gradient(to bottom,
    rgba(22,158,126,0) 0%,
    rgba(22,158,126,1) 50%,
    rgba(22,158,126,0) 100%);
  background-size: 100% 200%;
  animation: followFlow 1.5s linear infinite;
}

@keyframes followFlow{
  0%{ background-position: 0 0; }
  100%{ background-position: 0 200%; }
}

.follow__ig img{
  width: 22px;
  height: 22px;
  display: block;
}

/* 任意：モバイルで非表示にする場合 */
@media (max-width: 1024px){
  .follow{ display: none; }
}

/* 動きを苦手なユーザー向け */
@media (prefers-reduced-motion: reduce){
  .follow__line{ animation: none !important; }
}/* End custom CSS */