@charset "UTF-8";
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html,
body {
  height: 100%;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

#root,
#__next {
  isolation: isolate;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  text-rendering: optimizeSpeed;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
}

img:not([alt]) {
  filter: blur(10px);
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

#root,
#__next {
  isolation: isolate;
}

/*** The new CSS reset - version 1.5.1 (last updated 1.3.2022) ***/
*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) {
  /*all: unset;
  display: revert*/
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

a,
button {
  cursor: pointer;
}

a {
  color: initial;
  text-decoration: none;
}

ol,
ul,
menu {
  list-style: none;
}

ul,
li {
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
}

table {
  border-collapse: collapse;
}

textarea {
  white-space: revert;
}

meter {
  -webkit-appearance: revert;
  appearance: revert;
}

::placeholder {
  color: unset;
}

:where([hidden]) {
  display: none;
}

:where([contenteditable]) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
}

:where([draggable=true]) {
  -webkit-user-drag: element;
}

input,
button,
select,
textarea {
  font: inherit;
  border: none;
  border-radius: 0;
  outline: none;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

textarea {
  resize: vertical;
}

input[type=checkbox],
input[type=radio] {
  display: none;
}

input[type=submit],
input[type=button],
label,
button,
select {
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

.sp {
  display: block;
}

.pc {
  display: none;
}

@media screen and (min-width: 769px) {
  .sp {
    display: none;
  }
  .pc {
    display: block;
  }
}
html {
  font-size: 16px;
}

body {
  font-family: "Zen Kaku Gothic New", sans-serif;
}

p {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 2.2;
  color: #000;
  letter-spacing: 0.2em;
}

a[href^="tel:"] {
  pointer-events: none;
}
@media (max-width: 768px) {
  a[href^="tel:"] {
    pointer-events: auto;
  }
}

button {
  color: "Zen Kaku Gothic New", sans-serif;
}

/*==================================================
　5-3-10 線が伸びて枠線になる
===================================*/
.frame-line {
  position: relative;
}
.frame-line::before, .frame-line::after {
  content: "";
  /*絶対配置で線の位置を決める*/
  position: absolute;
  background: #f4f2f0;
  /*線の形状*/
  width: 0;
  height: 1px;
  /*アニメーションの指定*/
  transition: all 0.2s linear;
}
.frame-line::before {
  right: 0;
  bottom: 0;
}
.frame-line::after {
  left: 0;
  top: 0;
}
.frame-line span {
  display: block;
}
.frame-line span::before, .frame-line span::after {
  content: "";
  /*絶対配置で線の位置を決める*/
  position: absolute;
  background: #537480;
  /*線の形状*/
  width: 1px;
  height: 0;
  /*アニメーションの指定*/
  transition: all 0.1s linear;
}
.frame-line span::before {
  left: 0;
  bottom: 0;
}
.frame-line span::after {
  right: 0;
  top: 0;
}

/*現在地とhoverした際の線の変化*/
.frame-line:hover::before,
.frame-line:hover::after {
  width: 100%;
}

.frame-line:hover::after {
  transition-delay: 0s;
  /*すぐ線を出現させる*/
}

.frame-line:hover::before {
  transition-delay: 0.3s;
  /*線の出現を0.3秒遅らせる*/
}

.frame-line:hover span::before,
.frame-line:hover span::after {
  height: 100%;
}

.frame-line:hover span::before {
  transition-delay: 0.5s;
  /*線の出現を0.5秒遅らせる*/
}

.frame-line:hover span::after {
  transition-delay: 0.2s;
  /*線の出現を0.2秒遅らせる*/
}

/* ボタン全体のスタイル */
.button-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  /* 下線を削除 */
  color: #6c7a89;
  /* テキストの色 */
  font-size: 14px;
  /* フォントサイズ */
  font-weight: 400;
  /* フォントの太さ */
  transition: color 0.3s ease, transform 0.3s ease;
  /* ホバー時のなめらかな色変化 */
}

.button-link:hover {
  color: #3e4c59;
  /* ホバー時のテキスト色 */
  transform: translateY(3px);
  /* ホバー時に下に移動 */
}

/* 丸い背景部分 */
.button-link__circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  /* 円の幅 */
  height: 40px;
  /* 円の高さ */
  border-radius: 50%;
  /* 円形を作成 */
  background-color: #ffffff;
  /* 背景色 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 影を追加 */
  margin-right: 10px;
  /* テキストとの間隔 */
  transition: background-color 0.3s ease, transform 0.3s ease;
  /* ホバー時のアニメーション */
}

.button-link:hover .button-link__circle {
  background-color: #f1f5f8;
  /* ホバー時の背景色 */
  transform: scaleY(1.1);
  /* ホバー時に縦に少し伸ばす */
}

/* 矢印のスタイル */
.button-link__arrow {
  color: #6c7a89;
  /* 矢印の色 */
  font-size: 18px;
  /* 矢印のサイズ */
  font-weight: bold;
  transition: color 0.3s ease;
  /* ホバー時の色変化 */
}

.button-link:hover .button-link__arrow {
  color: #3e4c59;
  /* ホバー時の矢印色 */
}

/* テキスト部分のスタイル */
.button-link__text {
  font-size: 14px;
  /* テキストサイズ */
  font-weight: 400;
  /* テキストの太さ */
}

.arrow-right {
  position: relative;
  display: inline-block;
  width: 60.4px;
  height: 2px;
  margin: 2.9px 0;
  border-radius: 9999px;
  background-color: #EEF1F4;
}
.arrow-right::before, .arrow-right::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  right: 0;
  width: 15px;
  height: 2px;
  border-radius: 9999px;
  background-color: #EEF1F4;
  transform-origin: calc(100% - 0.5px) 50%;
  z-index: 2;
}
.arrow-right::before {
  transform: rotate(45deg);
}
.arrow-right::after {
  transform: rotate(-45deg);
}

/* コンテンツページ タイトル */
.Title {
  text-align: center;
  background: #f8e6d3;
  margin: 0 auto 80px;
  padding: 80px 0 0;
  position: relative;
}
@media (max-width: 768px) {
  .Title {
    padding: 100px 0 0;
  }
}
@media (max-width: 480px) {
  .Title {
    margin: 0 auto 40px;
  }
}
.Title h1 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  color: #FF8000;
  letter-spacing: 0.2em;
}
@media (max-width: 768px) {
  .Title h1 {
    font-size: 28px;
    padding: 0 20px 30px;
  }
}

.Btn_Orange {
  display: inline-block;
  padding: 12px 20px;
  text-align: center;
  text-decoration: none;
  border-radius: 40px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  letter-spacing: 0.2em;
  background-color: #FF8000;
  border: 1px solid #FF8000;
}
.Btn_Orange:hover {
  background-color: #fff;
  color: #FF8000;
  border: 1px solid #FF8000;
}

.Btn_Black {
  display: inline-block;
  padding: 12px 20px;
  text-align: center;
  text-decoration: none;
  border-radius: 40px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #000;
  letter-spacing: 0.2em;
  background-color: #fff;
  border: 1px solid #000;
}
.Btn_Black:hover {
  background-color: #000;
  color: #fff;
  border: 1px solid #fff;
}

.Btn_Orange_Icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #FF8000;
  letter-spacing: 0.2em;
  gap: 8px;
  padding: 12px 20px;
  text-align: center;
  text-decoration: none;
  border-radius: 40px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #fff;
  border: 1px solid #FF8000;
}
.Btn_Orange_Icon svg {
  width: 20px;
  height: 20px;
  fill: #FF8000;
  transition: fill 0.3s ease;
}
.Btn_Orange_Icon:hover {
  background-color: #FF8000;
  color: #fff;
  border: 1px solid #fff;
}
.Btn_Orange_Icon:hover svg {
  fill: #fff;
}

/* Instagram ボタン（通常） */
.Btn_IG {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  letter-spacing: 0.02em;
}
.Btn_IG svg {
  width: 24px;
  height: 24px;
  fill: none;
  /* IGはストロークが多いので */
  stroke: #fff;
  stroke-width: 2;
  transition: stroke 0.3s ease, fill 0.3s ease;
  margin: 5px 0 0 0;
}

.nav-morph__link,
.nav-morph__line .Btn_Orange,
.nav-morph__line a,
.nav-morph__line button {
  position: relative;
  z-index: 10;
  /* 装飾より前面へ */
  pointer-events: auto;
  /* 念のため明示 */
}

/* 基本設定 */
.wave {
  position: relative;
  --wave-color: #f8e6d3;
  /* 波そのものの色（パスの色） */
  --wave-gap-color: #ffffff;
  /* 透過側＝帯の中の地色だけを塗る */
  --wave-height: clamp(90px, 12vw, 180px);
  /* 波の深さ */
}

/* ※ セクション全体は塗らない（背景色は指定しない） */
/* .wave { background-color: ... } は使わない */
/* 空でも高さを確保したいとき用（任意） */
.wave--spacer {
  min-height: var(--wave-height);
}

/* ========= 上端に配置（下向き） ========= */
.wave--top {
  padding-top: var(--wave-height);
}

/* 帯レイヤー（透過側の色を“帯の中だけ”に塗る） */
.wave--top::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  /* 上端に帯を配置 */
  height: var(--wave-height);
  background-color: var(--wave-gap-color);
  /* ← ここで透過側の色だけ変わる */
  z-index: 0;
}

/* この部分を変更：上波（色はCSSで塗る） */
.wave--top::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--wave-height);
  /* 画像は使わず、色はCSS、形はマスクで表現 */
  background: none;
  background-color: var(--wave-color);
  /* ← ここで“クリーム色”を自由に変更 */
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="%23000" d="M0,96L26.7,122.7C53.3,149,107,203,160,197.3C213.3,192,267,128,320,128C373.3,128,427,192,480,197.3C533.3,203,587,149,640,149.3C693.3,149,747,203,800,192C853.3,181,907,107,960,90.7C1013.3,75,1067,117,1120,154.7C1173.3,192,1227,224,1280,229.3C1333.3,235,1387,213,1413,202.7L1440,192L1440,0L0,0Z"/></svg>') no-repeat center top/100% 100%;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="%23000" d="M0,96L26.7,122.7C53.3,149,107,203,160,197.3C213.3,192,267,128,320,128C373.3,128,427,192,480,197.3C533.3,203,587,149,640,149.3C693.3,149,747,203,800,192C853.3,181,907,107,960,90.7C1013.3,75,1067,117,1120,154.7C1173.3,192,1227,224,1280,229.3C1333.3,235,1387,213,1413,202.7L1440,192L1440,0L0,0Z"/></svg>') no-repeat center top/100% 100%;
  z-index: 1;
}

/* ========= 下端に配置（向きは下向きのまま） ========= */
.wave--bottom {
  padding-bottom: var(--wave-height);
}

/* 帯レイヤー（透過側の色を“帯の中だけ”に塗る） */
.wave--bottom::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  /* 下端に帯を配置 */
  height: var(--wave-height);
  background-color: var(--wave-gap-color);
  /* ← ここで透過側の色だけ変わる */
  z-index: 0;
}

/* この部分を変更：下波（位置は下端、向きは下向きのまま） */
.wave--bottom::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: var(--wave-height);
  background: none;
  background-color: var(--wave-color);
  /* ← ここで“クリーム色”を自由に変更 */
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="%23000" d="M0,96L26.7,122.7C53.3,149,107,203,160,197.3C213.3,192,267,128,320,128C373.3,128,427,192,480,197.3C533.3,203,587,149,640,149.3C693.3,149,747,203,800,192C853.3,181,907,107,960,90.7C1013.3,75,1067,117,1120,154.7C1173.3,192,1227,224,1280,229.3C1333.3,235,1387,213,1413,202.7L1440,192L1440,0L0,0Z"/></svg>') no-repeat center bottom/100% 100%;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="%23000" d="M0,96L26.7,122.7C53.3,149,107,203,160,197.3C213.3,192,267,128,320,128C373.3,128,427,192,480,197.3C533.3,203,587,149,640,149.3C693.3,149,747,203,800,192C853.3,181,907,107,960,90.7C1013.3,75,1067,117,1120,154.7C1173.3,192,1227,224,1280,229.3C1333.3,235,1387,213,1413,202.7L1440,192L1440,0L0,0Z"/></svg>') no-repeat center bottom/100% 100%;
  z-index: 1;
}

/* コンテンツを前面に */
.wave > * {
  position: relative;
  z-index: 2;
}

.Wave_Line {
  position: relative;
}

/* -------------------------------------- */
/* コンテンツ用アニメーション (下からピョコン出現) */
/* -------------------------------------- */
/* .animate-content: 初期状態（隠れている状態とトランジション設定） */
.animate-content {
  opacity: 0;
  transform: translateY(50px) scale(0.9);
  /* 下から50px、90%サイズからスタート */
  /* トランジション設定: 勢いのあるバウンスカーブ(cubic-bezier)を適用 */
  transition: opacity 0.3s ease-out, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* transformに強いバウンスカーブを適用 */
  /* 遅延時間の設定（JavaScriptから取得したカスタムプロパティを transition-delay に適用） */
  transition-delay: var(--delay, 0s);
}

/* -------------------------------------- */
/* 見出し用アニメーション (Y軸回転/X軸回転でドミノ表示) */
/* -------------------------------------- */
/* ラッパー要素 (.animate-title): 縦書きの基本設定 */
.animate-title {
  display: block;
  /* 縦書き設定 (デフォルト) */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 1.9;
  min-height: 10rem;
  /* 3D変換のための視点(perspective)と安定性の設定 */
  perspective: 800px;
  -webkit-perspective: 800px;
  /* Safari対応 */
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  /* Safari対応 */
}

/* ラッパー要素 (.animate-title-h): 横書きの見出し用クラス (新規追加) */
.animate-title-h {
  display: inline-block;
  /* 中央寄せのため inline-block */
  writing-mode: horizontal-tb;
  /* 横書きに上書き */
  white-space: nowrap;
  /* 強制的に改行を抑制 */
  /* 3D変換の設定 */
  perspective: 800px;
  -webkit-perspective: 800px;
  /* Safari対応 */
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  /* Safari対応 */
}

/* 個別文字要素 (.char) の初期状態 - JSが自動で追加するクラス */
/* ★ これは横書きのデフォルト設定として機能します (rotateY) ★ */
.char {
  display: inline-block;
  /* transformを可能にする */
  opacity: 0;
  /* 🚀 3D強制設定: Safariの描画問題を回避 */
  will-change: transform, opacity;
  /* 横書きの初期状態 (Y軸回転) */
  transform: rotateY(-90deg) rotateZ(0.01deg) translateZ(0.1px);
  -webkit-transform: rotateY(-90deg) rotateZ(0.01deg) translateZ(0.1px);
  /* Safari対応 */
  backface-visibility: hidden;
  /* 要素の裏側を見せない設定で描画の安定化 */
  -webkit-backface-visibility: hidden;
  /* Safari対応 */
  /* 横書きのドミノ倒しアニメーションの基点 (デフォルト) */
  transform-origin: 0% 50%;
  /* トランジション設定: Y軸回転と透明度をアニメーションさせる */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  -webkit-transition: opacity 0.6s ease-out, -webkit-transform 0.6s ease-out;
  /* Safari対応 */
  /* 遅延時間の設定（JavaScriptで一文字ずつ計算して設定されます） */
  transition-delay: var(--delay, 0s);
}

/* -------------------------------------- */
/* 縦書き専用の回転軸と基点調整 (rotateX を適用) */
/* -------------------------------------- */
.animate-title .char {
  /* 縦書きの初期状態 (X軸回転に強制変更) */
  transform: rotateX(-90deg) rotateZ(0.01deg) translateZ(0.1px);
  -webkit-transform: rotateX(-90deg) rotateZ(0.01deg) translateZ(0.1px);
  /* 縦書き (vertical-rl) 環境で、文字の論理的な開始位置 (右上の角) を基点にする */
  transform-origin: 0% 0%;
}

/* -------------------------------------- */
/* .is-visible: 出現状態 (両アニメーション共通で適用) */
/* -------------------------------------- */
/* コンテンツ出現の最終状態 */
.animate-content.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ドミノ出現の最終状態 (横書き) */
.char.is-visible {
  opacity: 1;
  /* 最終状態ではZ軸回転を0に戻す */
  transform: rotateY(0deg) rotateZ(0deg) translateZ(0.1px);
  -webkit-transform: rotateY(0deg) rotateZ(0deg) translateZ(0.1px);
  /* Safari対応 */
}

/* ドミノ出現の最終状態 (縦書き - X軸回転をリセット) */
.animate-title .char.is-visible {
  opacity: 1;
  /* 最終状態ではX軸回転を0に戻す */
  transform: rotateX(0deg) rotateZ(0deg) translateZ(0.1px);
  -webkit-transform: rotateX(0deg) rotateZ(0deg) translateZ(0.1px);
}

/* スクロールを発生させるためのダミー要素 */
.spacer {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #3b82f6;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.Menu_Icon {
  text-align: center;
  background: #ffffff;
  position: fixed;
  padding: 10px 12px 15px;
  border: none;
  border-radius: 0 0 35px 35px;
  top: 0;
  right: 100px;
  border: 1px solid #e6e6e6;
  z-index: 11;
}
@media (max-width: 768px) {
  .Menu_Icon {
    right: 75px;
    padding: 8px 10px 15px;
  }
}
.Menu_Icon a {
  display: flex;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 5px;
}
.Menu_Icon a img {
  width: 45px;
}
@media (max-width: 768px) {
  .Menu_Icon a img {
    width: 35px;
  }
}
.Menu_Icon a span {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #FF8000;
  letter-spacing: 0.08em;
}

/* ========== HAMBURGER (重ね文字でズレ防止) ========== */
.hamburger-morph {
  position: fixed;
  top: 0;
  right: 20px;
  z-index: 1000;
  padding: 5px 10px 25px;
  border: none;
  border-radius: 0 0 35px 35px;
  background: #FF8000;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform 0.3s ease, padding-bottom 0.3s ease;
}
@media (max-width: 768px) {
  .hamburger-morph {
    right: 10px;
    padding: 5px 3px 25px;
  }
}
.hamburger-morph:hover {
  /*transform: translateY(8px);
  padding-bottom: 33px;
  */
}

/* アイコンサイズ（ボタン高さは固定しない） */
.hamburger-morph__icon {
  width: 45px;
  height: 45px;
  display: block;
}
@media (max-width: 768px) {
  .hamburger-morph__icon {
    width: 35px;
    height: 35px;
  }
}

/* 3本線（白）＋既存のアニメ継承 */
.hamburger-morph__line {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s ease, opacity 0.2s ease;
}
.hamburger-morph__line:nth-child(1) {
  stroke-dasharray: 60 207;
}
.hamburger-morph__line:nth-child(2) {
  stroke-dasharray: 60 60;
}
.hamburger-morph__line:nth-child(3) {
  stroke-dasharray: 60 207;
}

.hamburger-morph.active .hamburger-morph__line:nth-child(1) {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
}
.hamburger-morph.active .hamburger-morph__line:nth-child(2) {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
}
.hamburger-morph.active .hamburger-morph__line:nth-child(3) {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
}

/* ▼ラベル（MENU/close を重ねてフェード切替） */
.hamburger-morph__label {
  position: relative;
  top: -5px;
  display: inline-block;
  min-width: 4.2em;
  text-align: center;
  line-height: 1;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  letter-spacing: 0.08em;
}

.label-menu,
.label-close {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  transition: opacity 0.25s ease;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  letter-spacing: 0.05em;
}

.label-menu {
  opacity: 1;
}

.label-close {
  opacity: 0;
}

.hamburger-morph.active .label-menu {
  opacity: 0;
}

.hamburger-morph.active .label-close {
  opacity: 1;
}

/* 擬似要素で MENU/close を出していた人は無効化 */
.hamburger-morph::after {
  content: none !important;
}

/* ========== NAV OVERLAY ========== */
.nav-morph {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  background: #FF8000;
  clip-path: circle(0% at calc(100% - 44px) 44px);
  transition: clip-path 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 900;
  /* ★追加：閉じている間は非スクロール／背面へのバウンス伝播を防止 */
  overflow: hidden;
  overscroll-behavior: contain;
  /* ★追加：100vh問題の回避（対応ブラウザでは100dvhを使用） */
  /* 初期状態 共通 */
  /* ① タイトル */
  /* ② リスト (ul 全体のみアニメ) */
  /* li 個別アニメーションは削除 */
}
@supports (height: 100dvh) {
  .nav-morph {
    height: 100dvh;
  }
}
.nav-morph.active {
  clip-path: circle(150% at calc(100% - 44px) 44px);
  /* ★追加：開いている間だけオーバーレイ内を縦スクロール可（iOS慣性含む） */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-morph__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  text-align: center;
  flex-direction: column;
  gap: 40px;
  /* ※レイアウト変更禁止のため追加・変更なし */
}
@media (max-width: 768px) {
  .nav-morph__wrapper {
    height: auto;
    flex-direction: row;
    gap: 30px;
    padding: 40px 0;
  }
}
.nav-morph__title, .nav-morph__list, .nav-morph__line {
  width: 80%;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  /* ※横幅や余白は現状維持（崩れ回避のため変更なし） */
}
.nav-morph.active .nav-morph__title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}
.nav-morph.active .nav-morph__title a {
  max-width: 280px;
}
@media (max-width: 768px) {
  .nav-morph.active .nav-morph__title a {
    width: 60%;
  }
}
.nav-morph__list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.nav-morph.active .nav-morph__list {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}
.nav-morph__item {
  width: 50%;
  border-bottom: 2px solid #fff;
  position: relative;
  /* ★ hover時のふわっとアニメーション */
}
.nav-morph__item:first-child, .nav-morph__item:nth-child(2) {
  border-top: 2px solid #fff;
}
@media (max-width: 768px) {
  .nav-morph__item:nth-child(2) {
    border-top: none;
  }
}
.nav-morph__item:nth-child(odd)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 2px;
  background: linear-gradient(180deg, #FF8000 10%, #fff 10%, #fff 90%, #FF8000 90%);
}
@media (max-width: 768px) {
  .nav-morph__item:nth-child(odd)::after {
    display: none;
  }
}
@media (max-width: 768px) {
  .nav-morph__item {
    width: 100%;
  }
}
.nav-morph__item a {
  width: 100%;
}
.nav-morph__item .nav-morph__link {
  transition: transform 0.3s ease;
}
.nav-morph__item:hover .nav-morph__link {
  transform: translateY(-4px);
}
.nav-morph.active .nav-morph__line {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.9s;
}
.nav-morph__link {
  width: 30%;
  padding: 20px;
  position: relative;
  display: inline-block;
  text-decoration: none;
  overflow: hidden;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  letter-spacing: 0.05em;
}
.nav-morph__line {
  width: 80%;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.nav-morph__line .Btn_Orange_Icon {
  width: min(320px, 100%);
  margin: 0 auto 10px;
}
.nav-morph.active .nav-morph__line {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.8s;
}

.Menu_Float_img1 {
  position: absolute;
  top: 2%;
  left: 2%;
  width: 10%;
}
@media (max-width: 768px) {
  .Menu_Float_img1 {
    width: 16%;
  }
}

.Menu_Float_img2 {
  position: absolute;
  top: 8%;
  right: 1%;
  width: 22%;
}
@media (max-width: 768px) {
  .Menu_Float_img2 {
    right: 0;
    width: 28%;
  }
}

.Menu_Float_img3 {
  position: absolute;
  bottom: 7%;
  left: 2%;
  width: 12%;
}
@media (max-width: 768px) {
  .Menu_Float_img3 {
    left: 1%;
    width: 17%;
  }
}

.Menu_Float_img4 {
  position: absolute;
  bottom: 8%;
  right: 3%;
  width: 12%;
}
@media (max-width: 768px) {
  .Menu_Float_img4 {
    right: 1%;
    width: 16%;
  }
}

/* ================================
   フッター
================================ */
.Top_Footer {
  position: relative;
  background: #fff;
}
.Top_Footer__inner {
  padding: 20px;
}
.Top_Footer__inner p {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 2.2;
  color: #000;
  letter-spacing: 0.2em;
}

.Footer {
  background: #f8e6d3;
  padding: 40px 40px 20px;
}
@media (max-width: 768px) {
  .Footer {
    padding: 40px 30px 20px;
  }
}
.Footer__Inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.Footer__Inner__Left {
  width: 45%;
}
@media (max-width: 768px) {
  .Footer__Inner__Left {
    width: 100%;
    margin-bottom: 10px;
  }
}
.Footer__Inner__Left img {
  width: 50%;
  margin: auto;
}
@media (max-width: 768px) {
  .Footer__Inner__Left img {
    margin: 0 auto 30px;
  }
}
.Footer__Inner__Right {
  width: 55%;
}
@media (max-width: 768px) {
  .Footer__Inner__Right {
    width: 100%;
  }
}
.Footer__Inner__Right p {
  margin-bottom: 20px;
}
.Footer__Inner__Right ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 0px;
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  .Footer__Inner__Right ul {
    gap: 10px 0;
  }
}
.Footer__Inner__Right ul li {
  width: 50%;
}
@media (max-width: 768px) {
  .Footer__Inner__Right ul li {
    width: 100%;
  }
}
.Footer__Inner__Right ul li a {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #000;
  letter-spacing: 0.2em;
  transition: all 0.3s ease;
}
.Footer__Inner__Right ul li a:before {
  content: "●";
}
.Footer__Inner__Right ul li a:hover {
  opacity: 0.5;
}
@media (max-width: 768px) {
  .Footer__Inner__Right ul li a {
    font-size: 15px;
  }
}
.Footer__Inner__Right ul li:last-child a {
  position: relative;
  padding: 0 0 0 25px;
}
.Footer__Inner__Right ul li:last-child a:before {
  content: "";
  position: absolute;
  top: 1px;
  left: -1px;
  background-image: url(/img/icon_inst.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 20px;
  height: 20px;
  display: inline-block;
}
@media (max-width: 768px) {
  .Footer__Inner__Right ul li:last-child a:before {
    content: "";
    left: -2px;
    width: 18px;
    height: 18px;
  }
}
.Footer__Inner__Right .SNS-Cont {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.Footer__Inner__Right .SNS-Cont a {
  white-space: nowrap;
}
.Footer__Inner__Right .SNS-Cont a:first-child {
  width: 55%;
  border: none;
  flex-wrap: nowrap;
}
@media (max-width: 768px) {
  .Footer__Inner__Right .SNS-Cont a:first-child {
    width: 100%;
    margin-bottom: 10px;
  }
}
.Footer__Inner__Right .SNS-Cont a:last-child {
  width: 40%;
}
@media (max-width: 768px) {
  .Footer__Inner__Right .SNS-Cont a:last-child {
    width: 100%;
  }
}
.Footer__Inner__Bottom {
  width: 100%;
  margin-top: 20px;
}
.Footer__Inner__Bottom p {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 2.2;
  color: #000;
  letter-spacing: 0.2em;
}
@media (max-width: 768px) {
  .Footer__Inner__Bottom p {
    font-size: 10px;
  }
}

/* ================================
   FV
================================ */
.Top__Fv {
  background: #f8e6d3;
}

/* ================================
   私たちについて
================================ */
.Top__About__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
}
@media screen and (min-width: 769px) {
  .Top__About__inner {
    padding: 80px 20px;
    margin: 0 auto -80px;
  }
}
@media (max-width: 768px) {
  .Top__About__inner {
    padding: 60px 30px;
    margin: 0 auto;
  }
}
.Top__About__inner p {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 2.2;
  color: #000;
  letter-spacing: 0.2em;
}
.Top__About__inner .Top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .Top__About__inner .Top {
    margin-bottom: 30px;
  }
}
.Top__About__inner .Top .Left {
  width: 63%;
  padding-left: 10%;
}
@media (max-width: 768px) {
  .Top__About__inner .Top .Left {
    width: 100%;
    padding-left: 0;
    order: 2;
  }
}
.Top__About__inner .Top .Right {
  width: 32%;
  display: flex;
  align-items: center;
}
@media (max-width: 768px) {
  .Top__About__inner .Top .Right {
    width: 100%;
    order: 1;
    margin-bottom: 30px;
  }
}
.Top__About__inner .Top .Right h2 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 2;
  color: #FF8000;
  letter-spacing: 0.2em;
}
@media (max-width: 768px) {
  .Top__About__inner .Top .Right h2 {
    font-size: 22px;
  }
}
.Top__About__inner .Bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.Top__About__inner .Bottom .Left {
  width: 48%;
}
@media (max-width: 768px) {
  .Top__About__inner .Bottom .Left {
    width: 100%;
    order: 1;
    margin-bottom: 30px;
  }
}
.Top__About__inner .Bottom .Left img {
  width: 80%;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .Top__About__inner .Bottom .Left img {
    width: 100%;
  }
}
.Top__About__inner .Bottom .Right {
  width: 50%;
  padding: 0 5%;
}
@media (max-width: 768px) {
  .Top__About__inner .Bottom .Right {
    width: 100%;
    padding: 0;
    order: 2;
  }
}
.Top__About__inner .Bottom .Right a {
  margin-top: 30px;
}
.Top__About__inner .Article {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 1.9;
}
.Top__About .Float_img1 {
  position: absolute;
  top: 7%;
  left: 3%;
  width: 5%;
}
@media (max-width: 768px) {
  .Top__About .Float_img1 {
    top: 7%;
    left: 6%;
    width: 9%;
  }
}
@media (max-width: 480px) {
  .Top__About .Float_img1 {
    top: 7%;
    width: 11%;
  }
}
.Top__About .Float_img2 {
  position: absolute;
  bottom: -2%;
  left: -1%;
  width: 30%;
}
@media (max-width: 768px) {
  .Top__About .Float_img2 {
    bottom: 24%;
    left: -7%;
    width: 45%;
  }
}
@media (max-width: 480px) {
  .Top__About .Float_img2 {
    bottom: 28%;
    width: 60%;
  }
}

/* ================================
   商品紹介（スライダー＋カードフリップ）
================================ */
.Top__Product {
  background-color: #f8e6d3;
}
.Top__Product__inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 0 80px;
  position: relative;
  text-align: center;
}
@media (max-width: 768px) {
  .Top__Product__inner {
    padding: 40px 0 40px;
  }
}
.Top__Product__inner h2 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 38px;
  font-weight: 600;
  line-height: 1;
  color: #FF8000;
  letter-spacing: 0.2em;
  margin-bottom: 80px;
}
@media (max-width: 768px) {
  .Top__Product__inner h2 {
    font-size: 28px;
    margin-bottom: 60px;
  }
}
.Top__Product__inner .Slide_Container {
  margin-bottom: 80px;
}
@media (max-width: 768px) {
  .Top__Product__inner .Slide_Container {
    margin-bottom: 40px;
  }
}
.Top__Product .Float_img3 {
  position: absolute;
  top: -23%;
  right: 5%;
  width: 100%;
  max-width: 280px;
}
@media (max-width: 768px) {
  .Top__Product .Float_img3 {
    top: -16%;
    right: inherit;
    left: 1%;
    width: 38%;
    max-width: inherit;
  }
}
@media (max-width: 480px) {
  .Top__Product .Float_img3 {
    top: -16%;
    right: inherit;
    left: -7%;
    width: 48%;
    max-width: inherit;
  }
}
.Top__Product .Float_img4 {
  position: absolute;
  bottom: 4%;
  left: 6%;
  width: 20%;
  max-width: 210px;
}
@media (max-width: 768px) {
  .Top__Product .Float_img4 {
    position: relative;
    width: 30%;
    bottom: inherit;
    left: inherit;
  }
}
@media (max-width: 480px) {
  .Top__Product .Float_img4 {
    position: relative;
    width: 55%;
    bottom: inherit;
    left: inherit;
  }
}
.Top__Product .Float_img5 {
  position: absolute;
  bottom: 7%;
  right: 6%;
  width: 9%;
  max-width: 90px;
}
@media (max-width: 768px) {
  .Top__Product .Float_img5 {
    position: relative;
    width: 12%;
    bottom: inherit;
    left: inherit;
    padding-top: 25px;
    max-width: inherit;
  }
}
@media (max-width: 480px) {
  .Top__Product .Float_img5 {
    position: relative;
    width: 25%;
    bottom: inherit;
    left: inherit;
    padding-top: 20px;
    max-width: inherit;
  }
}

.Float_box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 30px 30px 0;
}

/* ================================
    新着情報 / Instagram
================================ */
.Top__Instagram {
  text-align: center;
  padding: 100px 0 60px;
  overflow: hidden;
}
.Top__Instagram h2 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  color: #FF8000;
  letter-spacing: 0.2em;
  margin: 0 auto 80px;
}
@media (max-width: 768px) {
  .Top__Instagram h2 {
    font-size: 26px;
    line-height: 1.4;
    padding: 0 30px;
    margin-bottom: 70px;
  }
}
.Top__Instagram__inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 0;
  text-align: center;
}
.Top__Instagram__inner .Slide_Container {
  margin-bottom: 80px;
}
.Top__Instagram .Btn_Black {
  margin-top: 40px;
}

/* ================================
    オフィシャルアプリ
================================ */
.Top__App {
  background-color: #f4f2f0;
}
.Top__App__inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 80px 40px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
}
@media (max-width: 768px) {
  .Top__App__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 30px 0;
  }
}
.Top__App__inner .Left {
  width: 50%;
  margin-bottom: 40px;
  text-align: left;
}
@media (max-width: 768px) {
  .Top__App__inner .Left {
    width: 100%;
  }
}
.Top__App__inner .Left h3 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: #000;
  letter-spacing: 0.2em;
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  .Top__App__inner .Left h3 {
    font-size: 22px;
    line-height: 1.6;
  }
}
.Top__App__inner .Left p {
  margin-bottom: 20px;
}
.Top__App__inner .Left p:last-child {
  color: #FF8000;
  margin-top: 20px;
  margin-bottom: 0;
  text-align: center;
}
@media (max-width: 768px) {
  .Top__App__inner .Left p:last-child {
    font-size: 16px;
    line-height: 1.4;
  }
}
.Top__App__inner .Left .App_Download {
  width: 50%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 15px;
}
@media (max-width: 480px) {
  .Top__App__inner .Left .App_Download {
    width: 80%;
  }
}
.Top__App__inner .Right {
  width: 30%;
  text-align: center;
}
@media (max-width: 768px) {
  .Top__App__inner .Right {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .Top__App__inner .Right img {
    width: 60%;
    margin: auto;
  }
}

/* ================================
    お店の紹介
================================ */
.Top__Shop {
  position: relative;
  background: #fff;
  /* ====== Responsive ====== */
}
.Top__Shop__inner {
  position: relative;
  max-width: auto;
  margin: 0 auto;
  padding: 0;
}
.Top__Shop__title {
  position: absolute;
  top: 40px;
  left: 40px;
  margin: 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  color: #FF8000;
  letter-spacing: 0.08em;
  z-index: 2;
}
.Top__Shop__map {
  width: 90%;
  height: 600px;
  overflow: hidden;
}
@media (max-width: 768px) {
  .Top__Shop__map {
    width: 100%;
  }
}
.Top__Shop__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.Top__Shop__card {
  position: absolute;
  bottom: -30px;
  right: 80px;
  width: 350px;
  background: #f8e6d3;
  padding: 32px;
  border-radius: 12px;
  z-index: 3;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: column;
}
.Top__Shop__logo {
  width: 100%;
  padding: 20px;
  margin-bottom: 30px;
}
.Top__Shop__logo img {
  max-width: 220px;
  width: 55%;
  margin: auto;
  height: auto;
}
.Top__Shop__body p {
  line-height: 1.6;
  margin: 0 0 15px;
}
.Top__Shop__links {
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.Top__Shop__links a {
  color: #FF8000;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.Top__Shop__links a:hover {
  border-color: currentColor;
}
.Top__Shop__links span {
  color: #ff7a00;
}
@media (max-width: 1200px) {
  .Top__Shop__title {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    color: #000;
    letter-spacing: 0.08em;
    top: 30px;
    left: 30px;
  }
  .Top__Shop__card {
    right: 40px;
    width: 400px;
    padding: 24px;
  }
}
@media (max-width: 768px) {
  .Top__Shop__title {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    color: #000;
    letter-spacing: 0.08em;
    top: 20px;
    left: 20px;
  }
  .Top__Shop__map {
    height: 400px;
  }
  .Top__Shop__card {
    position: relative;
    bottom: 55px;
    top: auto;
    right: auto;
    width: calc(100% - 24px);
    margin: -5px auto 24px;
  }
}
@media (max-width: 480px) {
  .Top__Shop__title {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: #000;
    letter-spacing: 0.08em;
  }
  .Top__Shop__map {
    height: 300px;
  }
  .Top__Shop__card {
    padding: 16px;
    margin: -5px auto -40px;
  }
  .Top__Shop__body p {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    color: #000;
    letter-spacing: 0.2em;
  }
}

/* ===== 無限マルキー基盤 ===== */
:root {
  --gap: 80px;
  /* カード間の余白 */
  --speed: 300s;
  /* 流れる速さ（短い=速い） */
}

/* タブレット（例: 768–1023px） */
@media (max-width: 1023.98px) {
  :root {
    --gap: 48px;
    --speed: 300s;
    /* 任意：少し速く/遅く調整 */
  }
}
/* スマホ（～767px） */
@media (max-width: 767.98px) {
  :root {
    --gap: 24px;
    --speed: 250s;
  }
}
.marquee {
  overflow: hidden;
  width: 100%;
  /* スマホの覗き（左右30px） */
  padding-inline: 0;
}

@media (max-width: 767.98px) {
  .marquee {
    padding-inline: 30px;
  }
  /* ← 覗き30px */
}
.marquee__track {
  display: flex;
  gap: var(--gap);
  width: max-content;
  /* 中身の幅にフィット */
  animation: marquee var(--speed) linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
  /* 2周分のちょうど半分だけ送る */
}
/* ===== スライド1枚の箱（横並びに固定） ===== */
.Slide_Item {
  flex: 0 0 auto;
  /* 折り返さない・縮まない */
}

/* ===== 余白（Slickのpadding/margin方式を引き継ぐ） ===== */
.Slide_Item {
  padding-inline: 0;
}

/* ===== カードのサイズ（レスポンシブに伸縮） ===== */
.Card {
  /* width: clamp(200px, 24vw, 320px);*/
  /* 画面に応じて自動調整 */
  position: relative;
  display: block;
  text-decoration: none;
}

/* ===== ここから“フリップ”は今までのまま ===== */
.Slide_Item {
  max-width: 360px;
  perspective: 1000px;
}
@media (max-width: 768px) {
  .Slide_Item {
    max-width: 240px;
  }
}

.Card__inner {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.Card_Front {
  position: relative;
  /* 表はフローに残す＝高さの基準 */
  transform: rotateY(0deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.Card_Back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.Card img,
.Card_Front img,
.Card_Back img {
  width: 100%;
  height: auto;
  /* 比率はオリジナルのまま */
  display: block;
  border-radius: 138px 138px 0 0;
}

/* PCなどhoverある環境：ホバーでだけ回転（スライドは止めない） */
@media (hover: hover) {
  .Card:hover .Card__inner {
    transform: rotateY(180deg);
  }
}
/* アニメーション苦手設定に配慮 */
@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
  .Card__inner {
    transition: none;
  }
}
/* ================================
    ポップアップ
================================ */
:root {
  --fdp-radius: 20px;
  --fdp-blur: 12px;
  --fdp-accent: #ff7a00;
}

.fdp-Modal {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  z-index: 2000;
  padding: clamp(16px, 4vw, 32px);
  /*.fdp-Btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 14px 16px;
      border-radius: 12px;
      text-decoration: none;
      color: #fff;
      background: #111;
      font-weight: 700;
      transition: transform .2s ease, background .2s ease;
      &:hover {
          transform: translateY(-2px) scale(1.02);
      }
      &.fdp-BtnPrimary {
          background: var(--fdp-accent);
      }
  }*/
}
.fdp-Modal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(var(--fdp-blur));
  backdrop-filter: blur(var(--fdp-blur));
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 1;
}
.fdp-Modal:target {
  display: grid;
}
.fdp-Modal:target::before {
  opacity: 1;
}
.fdp-Modal:target .fdp-Dialog {
  transform: none;
  opacity: 1;
}
.fdp-Modal:target .fdp-Dialog,
.fdp-Modal:target .fdp-Media img,
.fdp-Modal:target .fdp-Title,
.fdp-Modal:target .fdp-Price,
.fdp-Modal:target .fdp-Price2,
.fdp-Modal:target .fdp-Desc,
.fdp-Modal:target .fdp-Footer {
  animation: fdp-pop 0.28s ease both;
}
.fdp-Modal .fdp-Overlay {
  position: absolute;
  inset: 0;
  display: none;
  z-index: 1;
}
.fdp-Modal:target .fdp-Overlay {
  display: block;
}
.fdp-Modal .fdp-Dialog {
  position: relative;
  z-index: 2;
  width: min(900px, 92vw);
  max-height: min(86vh, 820px);
  background: #f8e6d3;
  border-radius: var(--fdp-radius);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: grid;
  grid-template-rows: auto 1fr auto;
  transform: translateY(12px) scale(0.98);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.22, 0.9, 0.3, 1), opacity 0.3s ease;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
@supports (height: 100svh) {
  .fdp-Modal .fdp-Dialog {
    max-height: min(90svh, 820px);
  }
}
.fdp-Modal .fdp-Topbar {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 3;
}
.fdp-Modal .fdp-Close {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.66);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  text-decoration: none;
  color: transparent;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, background 0.2s ease;
}
.fdp-Modal .fdp-Close::before, .fdp-Modal .fdp-Close::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: #fff;
}
.fdp-Modal .fdp-Close::before {
  transform: rotate(45deg);
}
.fdp-Modal .fdp-Close::after {
  transform: rotate(-45deg);
}
.fdp-Modal .fdp-Close:hover {
  transform: scale(1.06);
  background: rgba(0, 0, 0, 0.78);
}
.fdp-Modal .fdp-Media {
  margin: 0;
  aspect-ratio: 16/9;
  background: #111;
}
@media (max-width: 768px) {
  .fdp-Modal .fdp-Media {
    aspect-ratio: 16/14;
  }
}
.fdp-Modal .fdp-Media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fdp-Modal .fdp-Body {
  margin: 40px auto;
  padding: 0 40px;
  max-width: 600px;
  margin-inline: auto;
  display: grid;
  gap: 30px;
  text-align: left;
}
.fdp-Modal .fdp-Meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: center;
  grid-template-areas: "title price";
}
.fdp-Modal .fdp-Title {
  grid-area: title;
  margin: 0;
  font-weight: 800;
  font-size: clamp(18px, 3.2vw, 22px);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  color: #000;
  letter-spacing: 0.08em;
  line-height: 1.2;
}
.fdp-Modal .fdp-Price {
  grid-area: price;
  text-align: right;
  font-weight: 800;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  color: #000;
  letter-spacing: 0.08em;
}
@media (max-width: 640px) {
  .fdp-Modal .fdp-Meta {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "price";
  }
  .fdp-Modal .fdp-Price {
    text-align: left;
  }
}
.fdp-Modal .fdp-Price2 {
  margin: 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
  color: #000;
  letter-spacing: 0.2em;
}
.fdp-Modal .fdp-Desc {
  margin: 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
  color: #000;
  letter-spacing: 0.2em;
}
.fdp-Modal .fdp-Footer {
  max-width: 600px;
  margin: 0 auto 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@keyframes fdp-pop {
  from {
    transform: translateY(8px) scale(0.985);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fdp-Modal * {
    animation: none !important;
    transition: none !important;
  }
}
body:has(.fdp-Modal:target) {
  overflow: hidden;
}

.About__Cont__Inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 40px;
  margin: 0 auto 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .About__Cont__Inner {
    margin: 0 auto;
    padding: 0 30px;
  }
}
.About__Cont__Inner:nth-child(2) .Text h2 {
  text-align: right;
}
.About__Cont .Text,
.About__Cont .Img {
  width: 48%;
}
@media (max-width: 768px) {
  .About__Cont .Text,
  .About__Cont .Img {
    width: 100%;
    margin-bottom: 40px;
  }
}
.About__Cont .Text h2,
.About__Cont .Img h2 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  color: #FF8000;
  letter-spacing: 0.2em;
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  .About__Cont .Text {
    order: 1;
  }
}
@media (max-width: 768px) {
  .About__Cont .Img {
    order: 2;
  }
}
.About__Cont .Link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 20px;
}
.About__Cont .Link a {
  width: 48%;
}
@media (max-width: 768px) {
  .About__Cont .Link a {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .About__Cont .Link a:first-child {
    margin-bottom: 10px;
  }
}

.About_Float_img1 {
  position: absolute;
  top: 70%;
  right: 7%;
  width: 13%;
  max-width: 180px;
}
@media (max-width: 768px) {
  .About_Float_img1 {
    width: 25%;
  }
}
@media (max-width: 480px) {
  .About_Float_img1 {
    width: 30%;
  }
}

.About_Float_img2 {
  position: absolute;
  top: -36%;
  right: 2%;
  width: 23%;
}
@media (max-width: 768px) {
  .About_Float_img2 {
    top: -16%;
    width: 35%;
  }
}
@media (max-width: 480px) {
  .About_Float_img2 {
    top: -17%;
    right: 0;
    width: 50%;
  }
}

.Product__Intro__Inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 100px 40px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}
@media (max-width: 768px) {
  .Product__Intro__Inner {
    padding: 60px 30px;
  }
}
.Product__Intro__Left {
  width: 80%;
  padding-left: 10%;
}
@media (max-width: 768px) {
  .Product__Intro__Left {
    width: 100%;
    padding-left: 0;
    order: 2;
  }
}
.Product__Intro__Left p {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 2.2;
  color: #000;
  letter-spacing: 0.2em;
}
.Product__Intro__Right {
  width: 20%;
}
@media (max-width: 768px) {
  .Product__Intro__Right {
    width: 100%;
    margin-bottom: 30px;
    order: 1;
  }
}
.Product__Intro__Right h2 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 2;
  color: #FF8000;
  letter-spacing: 0.2em;
}
@media (max-width: 768px) {
  .Product__Intro__Right h2 {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 2;
    color: #FF8000;
    letter-spacing: 0.2em;
  }
}
.Product__Intro .Article {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 1.9;
}
@media (max-width: 768px) {
  .Product__Intro .Article {
    writing-mode: initial;
  }
}

.Product__Item {
  background: #f8e6d3;
  text-align: center;
  padding: 0 0 60px;
}
@media (max-width: 768px) {
  .Product__Item {
    padding: 40px 0 60px;
  }
}
.Product__Item h2 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  color: #FF8000;
  letter-spacing: 0.2em;
}
@media (max-width: 768px) {
  .Product__Item h2 {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 2;
    color: #FF8000;
    letter-spacing: 0.2em;
  }
}
.Product__Item__Menu {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin: 20px auto 0;
}
@media (max-width: 768px) {
  .Product__Item__Menu {
    display: block;
  }
}
.Product__Item__Menu li a {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  color: #FF8000;
  letter-spacing: 0.2em;
}
@media (max-width: 768px) {
  .Product__Item__Menu li a {
    font-size: 18px;
  }
}
.Product__Item__Menu li::after {
  content: "／";
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  color: #FF8000;
  letter-spacing: 0.2em;
  margin: 0 10px;
}
@media (max-width: 768px) {
  .Product__Item__Menu li::after {
    display: none;
  }
}
.Product__Item__Menu li:last-child::after {
  display: none;
}
.Product__Item__Inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
}
@media (max-width: 768px) {
  .Product__Item__Inner {
    padding: 0 30px;
  }
}
.Product__Item__Inner .List {
  width: 100%;
  margin: 60px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
@media (max-width: 768px) {
  .Product__Item__Inner .List {
    gap: 30px;
  }
}
.Product__Item__Inner .List::after {
  content: "";
  display: block;
  width: 30%;
  /* .boxに指定したwidthと同じ幅を指定する */
  height: 0;
}
.Product__Item__Inner .List .Item {
  width: 30%;
}
@media (max-width: 768px) {
  .Product__Item__Inner .List .Item {
    width: 100%;
    max-width: 80%;
    margin: auto;
  }
}
.Product__Item__Inner .List .Item .Card__inner {
  margin-bottom: 20px;
}
.Product__Item__Inner .List .Item p {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: #000;
  letter-spacing: 0.2em;
}
.Product__Item__Inner .Btn_Orange {
  max-width: 220px;
  width: 100%;
}

.Holecake,
.Gift {
  background: #fff;
  padding: 80px 0 0;
}
@media (max-width: 768px) {
  .Holecake,
  .Gift {
    padding: 40px 0 0;
  }
}

.fdp-Price2 ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.fdp-Price2 ul li {
  width: 49%;
  padding: 10px 0;
  border-bottom: 1px solid #000000;
  text-align: center;
}
@media (max-width: 768px) {
  .fdp-Price2 ul li {
    width: 100%;
  }
}

.Product_Float_img1 {
  position: absolute;
  top: 26%;
  left: 2%;
  width: 8%;
}
@media (max-width: 768px) {
  .Product_Float_img1 {
    top: 6%;
    left: inherit;
    right: 2%;
    width: 16%;
  }
}
@media (max-width: 480px) {
  .Product_Float_img1 {
    width: 25%;
  }
}

.Product_Float_img2 {
  position: absolute;
  top: 25%;
  right: 18%;
  width: 5%;
}
@media (max-width: 768px) {
  .Product_Float_img2 {
    display: none;
  }
}

.Product_Float_img3 {
  position: absolute;
  top: 0%;
  right: 2%;
  width: 100%;
  max-width: 250px;
}
@media (max-width: 768px) {
  .Product_Float_img3 {
    top: -19%;
    right: 0%;
    width: 100%;
    max-width: 240px;
  }
}
@media (max-width: 480px) {
  .Product_Float_img3 {
    top: -65%;
    right: 0;
    width: 63%;
    max-width: inherit;
  }
}

.Product_Float_img4 {
  position: absolute;
  top: -51%;
  left: -4%;
  width: 27%;
}
@media (max-width: 768px) {
  .Product_Float_img4 {
    display: none;
  }
}

.Product_Float_img4_2 {
  display: none;
  position: absolute;
}
@media (max-width: 768px) {
  .Product_Float_img4_2 {
    top: -6%;
    left: -4%;
    width: 37%;
    display: block;
  }
}
@media (max-width: 480px) {
  .Product_Float_img4_2 {
    top: -47%;
    left: -25px;
    width: 49%;
    display: block;
  }
}

.Product_Float_img5 {
  position: absolute;
  top: -230px;
  left: -2%;
  width: 22%;
}
@media (max-width: 768px) {
  .Product_Float_img5 {
    position: absolute;
    top: -200px;
    left: -3%;
    width: 29%;
  }
}
@media (max-width: 480px) {
  .Product_Float_img5 {
    position: absolute;
    top: -200px;
    left: -3%;
    width: 34%;
  }
}

.Shop__Cont h2 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  color: #FF8000;
  letter-spacing: 0.2em;
  margin-bottom: 20px;
}
.Shop__Cont__Inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 40px;
  margin: 0 auto 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .Shop__Cont__Inner {
    margin: 0 auto;
    padding: 0 30px;
  }
}
.Shop__Cont__Inner:nth-child(2) .Text h2 {
  text-align: right;
}
.Shop__Cont .Fv {
  width: 100%;
  margin-bottom: 80px;
  position: relative;
}
@media (max-width: 768px) {
  .Shop__Cont .Fv {
    margin-bottom: 40px;
  }
}
.Shop__Cont .Fv img {
  width: 80%;
  margin: auto;
}
@media (max-width: 768px) {
  .Shop__Cont .Fv img {
    width: 100%;
  }
}
.Shop__Cont .Text {
  width: 50%;
  position: relative;
}
@media (max-width: 768px) {
  .Shop__Cont .Text {
    width: 100%;
    margin-bottom: 40px;
  }
}
.Shop__Cont .Text h2 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  color: #FF8000;
  letter-spacing: 0.2em;
  margin-bottom: 30px;
}
.Shop__Cont .Text .Date p {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  color: #000;
  letter-spacing: 0.2em;
}
.Shop__Cont .Text p {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 2.2;
  color: #000;
  letter-spacing: 0.2em;
  margin-bottom: 30px;
}
.Shop__Cont .Text ul li:first-child a {
  margin-bottom: 10px;
}
.Shop__Cont .Text ul li a {
  width: 50%;
}
@media (max-width: 768px) {
  .Shop__Cont .Text ul li a {
    width: 60%;
  }
}
@media (max-width: 480px) {
  .Shop__Cont .Text ul li a {
    width: 60%;
  }
}
.Shop__Cont .Img {
  width: 35%;
}
@media (max-width: 768px) {
  .Shop__Cont .Img {
    width: 100%;
  }
}
.Shop__Cont .Img img {
  margin-bottom: 20px;
}

.Shop_Float_img1 {
  position: absolute;
  bottom: 2%;
  left: 0;
  width: 11% !important;
}
@media (max-width: 768px) {
  .Shop_Float_img1 {
    position: absolute;
    bottom: 5%;
    left: -2%;
    width: 15% !important;
  }
}
@media (max-width: 480px) {
  .Shop_Float_img1 {
    position: absolute;
    bottom: 7%;
    left: -3%;
    width: 20% !important;
  }
}

.Shop_Float_img2 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 33%;
}
:root {
  --vh0: 0;
  --vhpx: calc(var(--vh0) * 1px);
}

html.no-overscroll,
body.no-overscroll {
  overscroll-behavior-y: none;
}

html {
  scrollbar-gutter: stable both-edges;
}

/* Base */
body {
  overflow-x: hidden;
}

.viewport-full {
  width: 100vw;
  height: calc(var(--vh0) * 1px);
}

/* Opening Overlay */
#loading-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  z-index: 1000;
  opacity: 0;
}
#loading-overlay #logo {
  max-width: 40vw;
  width: clamp(180px, 40vw, 420px);
  opacity: 0;
}
#loading-overlay #logo img {
  width: 100%;
  height: auto;
  display: block;
}

/* First View */
#fv {
  background: #f8e6d3;
  position: fixed;
  inset: 0;
  z-index: 10;
  visibility: visible;
  pointer-events: auto;
}

/* Trees */
.leaf {
  position: absolute;
  width: min(40vw, 360px);
  opacity: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translate(var(--tx, 0), var(--ty, 0)) scale(0.9) rotate(var(--rot, 0deg));
  animation: none;
  /* 右上は少し斜め上からスライドイン */
}
.leaf.tr > img {
  object-position: right center;
  --px: 24px;
}
.leaf.tl {
  top: 8%;
  left: 18%;
  --tx: -55%;
  --ty: -55%;
  --rot: -10deg;
  width: min(20vw, 180px);
}
.leaf.tr {
  top: 5%;
  right: 10px;
  --tx: 55%;
  --ty: -18%;
  --rot: -6deg;
}
.leaf.bl {
  bottom: 2%;
  left: -55px;
  /*width: min(40vw, 450px);*/
  width: 20%;
  --tx: -55%;
  --ty: 55%;
  --rot: 8deg;
}
.leaf.br {
  bottom: 0;
  right: 0;
  --tx: 55%;
  --ty: 55%;
  --rot: -6deg;
  width: min(40vw, 540px);
}
.leaf > img {
  will-change: transform;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes leafIn {
  50% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0);
  }
}
/* House */
#house {
  transition: opacity 0.6s ease-out;
  opacity: 0;
}
#house img {
  width: clamp(280px, 90vw, 1000px);
  max-width: 100%;
  height: auto !important;
  display: block;
  object-fit: contain;
}

/* Curtain（画像比に連動） */
#curtain {
  background: url("https://images.weserv.nl/?url=flags1989.xsrv.jp/images/FV_maku.png") center top/contain no-repeat;
  width: 100vw;
  height: var(--curtainHpx, var(--vhpx));
  /* ← ここがSass安全 */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  transform: translate3d(0, calc(-1 * var(--curtainHpx, var(--vhpx))), 0);
  /* ← ここも安全 */
  transition: transform 1s ease-in-out;
  will-change: transform;
}

/* パフォーマンス最適化 */
#fv,
#below-content {
  contain: paint;
}

.no-transition {
  transition: none !important;
}

/* Below content */
#below-content {
  background-color: transparent;
  min-height: 100vh;
  position: relative;
  z-index: 1;
  backface-visibility: hidden;
  transform: translateZ(0);
}
#below-content::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: calc(var(--hero-height, 100svh));
  background: #f7fafc;
  z-index: 0;
  pointer-events: none;
}
#below-content > * {
  position: relative;
  z-index: 1;
}

/* Fixed hero */
#hero-fixed {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  height: calc(var(--vh0) * 1px);
}
#hero-fixed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  will-change: transform;
}

/* セクション内の <img> は非表示（ダブル表示防止） */
#hero-wide img {
  display: none !important;
}

/* SVG colors */
.svg-fill-primary {
  fill: #8bc34a;
}

.svg-fill-secondary {
  fill: #4caf50;
}

.svg-house-roof {
  fill: #d84315;
}

.svg-house-body {
  fill: #ffcc80;
}

.svg-house-window {
  fill: #4fc3f7;
}

.vh-lock {
  height: calc(var(--vh0) * 1px) !important;
  min-height: calc(var(--vh0) * 1px) !important;
}

/* OP前は幕/FV/固定背景を隠す（ちら見え防止） */
html.pre-op #fv,
html.pre-op #curtain,
html.pre-op #hero-fixed {
  visibility: hidden !important;
}/*# sourceMappingURL=style.css.map */