@charset "UTF-8";

/* ヘッダースタイル */
header.sp-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: transparent;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 40;
  transition: background-color 0.3s ease;
  height: 60px;
}
.sp-header.scrolled {
  background-color: white;
}

.header-left {
  display: flex;
  align-items: center;
}



.logo img {
  height: 35px;
  width: auto;
  display: block;
}


.sp-header .visually-hidden {
  position: absolute; /* 要素を通常の流れから切り離す */
  width: 1px;         /* 要素の幅を最小限にする */
  height: 1px;        /* 要素の高さを最小限にする */
  padding: 0;         /* パディングをゼロにする */
  margin: -1px;       /* マージンを調整する (一部ブラウザ対応のため) */
  overflow: hidden;   /* 要素の領域からはみ出たコンテンツを隠す */
  /* 要素の表示領域をクリップして完全に非表示にする */
  clip: rect(0, 0, 0, 0);       /* 古いブラウザ/支援技術向け */
  clip-path: inset(50%);      /* 最新の標準的な手法 */
  white-space: nowrap;  /* テキストが折り返さないようにする */
  border: 0;          /* ボーダーをゼロにする */
}

/* ハンバーガーメニューアイコン */
.menu-button {
  position: relative;
  width: 30px;
  height: 24px; /* 3本線を上下に配置して×にするための高さ */
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex; /* 横幅固定のため */
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}
/* 3本線を絶対配置して中央回転するようにする */
.menu-button .line {
  position: absolute;
  left: 0;
  right: 0; 
  margin: 0 auto; 
  height: 2px;
  background-color: white; 
  border-radius: 3px;
  transform-origin: center center; /* 回転の中心をバーの真ん中に */
  transition: all 0.3s ease;
}
.line1 {
  top: 0; /* 一番上 */
}
.line2 {
  top: 50%; /* 真ん中 */
  transform: translateY(-50%); 
}
.line3 {
  bottom: 0; /* 一番下 */
}

/* メニュー展開時のアニメーション（×に変形） */
.menu-button.open .line1 {
  transform: translateY(10.5px) rotate(45deg);
}
.menu-button.open .line2 {
  opacity: 0;
}
.menu-button.open .line3 {
  transform: translateY(-10.5px) rotate(-45deg);
}

/* ドロワーメニューのスタイル */
#sp-drawer-menu {
  position: fixed;
  top: 59px;
  left: 0;
  width: 100%;
  background-color: white;
  z-index: 30;
  transform: translateY(-150%);
  opacity: 0;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  max-height: calc(100vh - 59px);
  overflow-y: auto;
  border-top: 1px solid #eaeaea;
}
#sp-drawer-menu.active {
  transform: translateY(0);
  opacity: 1;
}
.spMenu ul.spMainMenu {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  width: calc(100% - 60px);
}
.spMenu .spMainMenu li {
  border-bottom: 1px solid #666;
}
.spMenu .spMainMenu li a {
  display: block;
  text-decoration: none;
  color: #333;
  padding: 10px;
  padding-bottom: clamp(15px, 1.2755vw + 10.2168px, 20px);
  padding-top: clamp(15px, 1.2755vw + 10.2168px, 20px);
  font-size: clamp(14px, 1.0204vw + 10.1735px, 18px);
  font-weight: bold;
}
.spMenu .spMainMenu .submenu li { position: relative; }
.spMenu .spMainMenu .submenu li a {
  font-weight: normal;
  margin-left: 1em;
}
.spMenu .spMainMenu .submenu li:first-child { border-top: 1px solid #666; }
.spMenu .spMainMenu .submenu li:last-child { border: none; }
.spMenu .spMainMenu .submenu {
  display: none;
}
.spMenu .spMainMenu .accordion {
  display: block;
  padding: 10px;
  padding-bottom: clamp(15px, 1.2755vw + 10.2168px, 20px);
  padding-top: clamp(15px, 1.2755vw + 10.2168px, 20px);
  font-size: clamp(14px, 1.0204vw + 10.1735px, 18px);
  font-weight: bold;
  color: #333;
  cursor: pointer;
  position: relative;
}
.spMenu .spMainMenu .accordion::after {
  content: '';
  width: 17px;
  height: 17px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% auto;
  position: absolute;
  right: 10px;
  top: 24px;
  transition: transform 0.3s;
}
.spMenu .spMainMenu .active::after {
  transform: rotate(180deg);
}

/* 電話・お問い合わせボタン */
.spMenu .tel-button {
  margin: 20px 20px 20px;
  text-align: center;
}
.spMenu .tel-button a {
  display: inline-block;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.spMenu .tel-button a img{
	width:100%;
	height:auto;
	max-width:242px;
}
.spMenu .contact-button {
  margin: 0 20px 20px;
}
.spMenu .contact-button a {
  display: block;
  text-decoration: none;
  padding: 15px 0;
  background-color: #0e6e43;
  color: white;
  text-align: center;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
}