.elementor-14 .elementor-element.elementor-element-03dcce5{--display:flex;--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-58ff556 */* {
  box-sizing: border-box;
}

/* 必要なら、コンテンツが隠れる場合だけ padding-top:70px; を付ける */
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

/* ヘッダー（0位置は背景透明） */
.site-header {
  position: fixed;   /* フローティング */
  top: 0;
  left: 0;
  right: 0;
  height: 70px;
  background: transparent;   /* ← 0の位置は透明 */
  color: #fff;
  z-index: 999;
  transition: background 0.3s ease, color 0.3s ease;
}

.site-header__inner {
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header__left {
  display: flex;
  align-items: center;
  gap: 40px;
}

.site-header__logo img {
  height: 36px;
  display: block;
}

/* グローバルメニュー */
.site-header__nav {
  display: flex;
  gap: 24px;
  font-size: 14px;
}

.site-header__nav .nav-link {
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.site-header__nav .nav-link:hover {
  opacity: 0.8;
}

/* 右側グループ */
.site-header__right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* お問い合わせボタン（初期：白） */
.header-contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid #fff;
  text-decoration: none;
  background: transparent;
  transition: background 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}

.header-contact,
.header-contact__text {
  color: #fff;
}

.header-contact__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.header-contact__icon {
  width: 16px;
  height: auto;
  display: block;
}

/* ホバー：背景#56e6e7、文字白のまま、アイコン揺れ */
.header-contact:hover {
  background: #56e6e7;
  border-color: #56e6e7;
}

.header-contact:hover .header-contact__text {
  color: #fff;
}

.header-contact:hover .header-contact__icon {
  animation: mailShake 0.6s ease-in-out infinite;
}

/* 区切り線（初期：白） */
.header-divider {
  display: block;
  width: 1px;
  height: 32px;
  background: rgba(255, 255, 255, 0.6);
}

/* ハンバーガーメニュー（3本 → ホバーで×） */
.header-menu {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  width: 24px;
  height: 18px;
  display: inline-block;
}

.header-menu span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #fff;
  border-radius: 999px;
  transition: transform 0.3s ease, top 0.3s ease, opacity 0.3s ease, background 0.3s ease;
}

.header-menu span:nth-child(1) { top: 0; }
.header-menu span:nth-child(2) { top: 8px; }
.header-menu span:nth-child(3) { top: 16px; }

.header-menu:hover span:nth-child(1) {
  top: 8px;
  transform: rotate(45deg);
}
.header-menu:hover span:nth-child(2) {
  opacity: 0;
}
.header-menu:hover span:nth-child(3) {
  top: 8px;
  transform: rotate(-45deg);
}

/* メールアイコン揺れ */
@keyframes mailShake {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(-2px); }
  50%  { transform: translateY(0); }
  75%  { transform: translateY(2px); }
  100% { transform: translateY(0); }
}

/* ── スクロール後（白ヘッダー）── */

.site-header.is-scrolled {
  background: #fff;
  color: #333333;
}

/* Gメニュー文字：333 */
.site-header.is-scrolled .site-header__nav .nav-link {
  color: #333333;
}

.site-header.is-scrolled .site-header__nav .nav-link:hover {
  opacity: 0.7;
}

/* お問い合わせ（文字・枠：2877bc） */
.site-header.is-scrolled .header-contact,
.site-header.is-scrolled .header-contact__text {
  color: #2877bc;
}

.site-header.is-scrolled .header-contact {
  border-color: #2877bc;
  background: transparent;
}

/* ホバーしても色はそのまま（少し薄く） */
.site-header.is-scrolled .header-contact:hover {
  background: transparent;
  border-color: #2877bc;
  opacity: 0.85;
}

.site-header.is-scrolled .header-contact:hover .header-contact__text {
  color: #2877bc;
}

.site-header.is-scrolled .header-contact:hover .header-contact__icon {
  animation: mailShake 0.6s ease-in-out infinite;
}

/* 区切り線 = 2877bc */
.site-header.is-scrolled .header-divider {
  background: #2877bc;
}

/* バーガーライン = 333333 */
.site-header.is-scrolled .header-menu span {
  background: #333333;
}

/* SP時メニュー非表示など */
@media (max-width: 960px) {
  .site-header__nav {
    display: none;
  }
}
/* =========================
   右サイド固定ボタン
========================= */

.side-banner {
  position: fixed;
  top: 240px;              /* 位置は好みで調整：0に近づけたければ 40px などに */
  right: 0;
  z-index: 998;            /* ヘッダー(999)の少し下。かぶらなければ1000でもOK */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 30px 14px;
  background: #2877bc;
  border-radius: 20px 0 0 20px;
  text-decoration: none;
}

/* アイコン */
.side-banner__icon img {
  display: block;
  width: 32px;             /* 必要ならサイズ調整 */
  height: auto;
}

/* 文字は縦書き、色は白 */
.side-banner__label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 14px;
  color: #fff;
  letter-spacing: 0.2em;
  white-space: nowrap;
}

/* ホバー：背景だけ少し変化させる（文字色は変えない） */
.side-banner:hover {
  background: #2877bc;     /* 色そのままでもOK、少し暗くするなら #2368a5 など */
  opacity: 0.9;            /* ちょっとだけトーンを変える */
}

.side-banner:hover .side-banner__label {
  color: #fff;             /* 文字色は変えない */
}
/* 破格感：強調（縦文字でも目立つ装飾） */
.side-banner__label{
  font-weight: 800;
  font-size: 15px;              /* 少し大きく */
  letter-spacing: 0.28em;
  text-shadow:
    0 2px 0 rgba(0,0,0,0.18),
    0 6px 14px rgba(0,0,0,0.25); /* 立体感 */
}

/* 「破格の」だけをバッジ風にする（縦書きでも効く） */
.side-banner__label::before{
  content: "破格の";
  display: inline-block;
  margin-bottom: 10px;

  padding: 8px 6px;
  border-radius: 10px;

  background: #ff3b30;          /* セールっぽい赤 */
  color: #fff;

  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.1em;

  box-shadow:
    0 8px 18px rgba(0,0,0,0.25);
}

/* 「リビルトショップ」を目立たせる（外枠＋ハイライト） */
.side-banner__label{
  -webkit-text-stroke: 0.4px rgba(255,255,255,0.25); /* ほんのり輪郭 */
}
/* キラッと光る演出（常にたまに光る） */
.side-banner{
  position: fixed; /* 既にあるなら不要 */
  overflow: hidden;           /* 光を枠内に収める */
  isolation: isolate;         /* 重なりの安定 */
}

/* 光のスジ */
.side-banner::after{
  content: "";
  position: absolute;
  top: -40%;
  left: -120%;
  width: 60%;
  height: 180%;
  transform: rotate(22deg);

  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.15) 35%,
    rgba(255,255,255,0.75) 50%,
    rgba(255,255,255,0.15) 65%,
    rgba(255,255,255,0) 100%
  );

  pointer-events: none;
  z-index: 0;
  animation: bannerShine 4.5s ease-in-out infinite;
}

/* 中身を光より上に */
.side-banner > *{
  position: relative;
  z-index: 1;
}

/* 光が流れる */
@keyframes bannerShine{
  0%, 70% { left: -120%; opacity: 0; }
  75%     { opacity: 1; }
  85%     { left: 140%; opacity: 1; }
  100%    { left: 140%; opacity: 0; }
}
/* ぼけた光のスジ（差し替え） */
.side-banner::after{
  content: "";
  position: absolute;
  top: -55%;
  left: -140%;
  width: 85%;          /* 太め */
  height: 220%;
  transform: rotate(22deg);

  /* 幅広グラデ + ぼかし */
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.10) 30%,
    rgba(255,255,255,0.45) 50%,
    rgba(255,255,255,0.10) 70%,
    rgba(255,255,255,0) 100%
  );

  filter: blur(10px);          /* ここで“ボケ感” */
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;

  animation: bannerShine 4.8s ease-in-out infinite;
}

/* 既にあればそのままでOK */
@keyframes bannerShine{
  0%, 70% { left: -140%; opacity: 0; }
  75%     { opacity: 1; }
  85%     { left: 150%; opacity: 1; }
  100%    { left: 150%; opacity: 0; }
}
/* 「破格の」だけ：たまにブルブル */
.side-banner__label::before{
  animation: bargainBuzzInterval 2.5s infinite;
  transform-origin: center;
}

/* 普段は静止 → 一瞬ブルブル */
@keyframes bargainBuzzInterval{
  0%, 80% {
    transform: translate(0,0) rotate(0deg);
  }

  /* ここからブルブル開始 */
  82% { transform: translate(1px,-1px) rotate(-1deg); }
  84% { transform: translate(-1px,1px) rotate(1deg); }
  86% { transform: translate(1px,1px) rotate(0deg); }
  88% { transform: translate(-1px,-1px) rotate(-1deg); }
  90% { transform: translate(0,0) rotate(0deg); }

  100% {
    transform: translate(0,0) rotate(0deg);
  }
}/* End custom CSS */