@charset "utf-8";

@font-face {
  font-family: 'AngelicaC'; /* フォント名 */
  src: url('../assets/AngelicaC.woff2?v=0') format('woff2'),
       url('../assets/AngelicaC.woff?v=0') format('woff'),
       url('../assets/AngelicaC.ttf?v=0')   format('truetype'); /* 通常のフォントファイル */
  font-weight: normal; /* 通常のウェイト */
  font-style: normal; /* 通常のスタイル */
}


html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input,
select {
  vertical-align: middle;
}

/*以上がリセットCSS*/

/* 予約ボタン（回転SVG） */
.reserve-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 150px;
    height: 150px;
    z-index: 2300;
    cursor: pointer;
    transform: translate(-20px, -20px);
    fill: #fff;
    color: #fff;
  }
  
  .reserve-button svg {
    width: 100%;
    height: 100%;
    fill: #fff;
  }
  
  .reserve-button.dark-mode svg,
  .reserve-button.dark-mode text {
    fill: #a2212a;
    color: #a2212a;
  }
  
  .reserve-button text {
    fill: #fff;
    letter-spacing: 2px;
  }
  
  .reserve-button svg g.rotate-text {
    animation: spin-text 20s linear infinite;
    transform-origin: center center;
  }
  
  @keyframes spin-text {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  /* 12 枚目だけ非表示にするためのユーティリティ */
.reserve-button.hidden {
  display: none !important;
}
  
  /* オーバーレイメニュー */
  .menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #a2212a;
    display: none;
    z-index: 2000;
  }
  
  .menu-overlay.active {
    display: block;
  }
  
  .menu-overlay.active ~ .reserve-button {
    background-color: white !important;
    color: #a2212a !important;
    display: flex !important;
  }

  
  
  .menu-overlay .menu-center.overlay-version {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    font-family: 'AngelicaC';
    z-index: 2100;
  }
  
  .menu-overlay .menu-center .top-link,
  .menu-overlay .menu-center .bottom-label {
    writing-mode: vertical-rl;
    font-size: 20px;
    color: white;
  }
  
  .menu-overlay .menu-center .bottom-label {
    font-family: fot-klee-pro, sans-serif;
    font-weight: 600;
  }
  
  .menu-overlay .menu-close {
    position: fixed;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -52%);
    font-size: 64px;
    color: white;
    cursor: pointer;
    z-index: 2200;
    font-family: 'Helvetica Neue', system-ui, sans-serif;
    font-weight: 100;
    text-decoration: none;
  }
  
  .overlay-nav-row {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -51%);
    width: 85%;
    display: flex;
    justify-content: space-between;
    z-index: 2100;
    padding: clamp(120px, 18vh, 220px) 0;
  
    
  }
  
  .overlay-nav-row .nav-left,
  .overlay-nav-row .nav-right {
    display: flex;
    flex-direction: row;
    
  }
  .overlay-nav-row .nav-left{
    margin: 0;
    transform: translateX(-5%);
    gap: clamp(1vw, 6vw, 150px);
  }
  .overlay-nav-row .nav-right {
    margin: 0;
    transform: translateX(-2%);
    gap: clamp(1vw, 8vw, 150px);
  }
  .overlay-nav-row a {
    color: white;
    font-size: 20px;
    font-family: 'Times New Roman',     /* 英語用（スペース必ずクオート） */
    fot-klee-pro,          /* 日本語用（ハイフンのみならクオート省略可） */
    sans-serif;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
  }
  
  /* --- iOS端末向けにdvh対応（必要なら） --- */
@supports (-webkit-touch-callout: none) {
    @media screen and (max-width: 1024px) and (orientation: portrait) {
      .menu-center,
      .menu-center.overlay-version {
        height: 100dvh;
      }
    }
  }

  @media screen and (min-width: 768px) and (max-width: 1024px) {
    /* nav-left/nav-right の項目間隔を少し狭く */
  .menu-overlay .overlay-nav-row .nav-left,
  .menu-overlay .overlay-nav-row .nav-right {
    gap: 2rem !important;
  }

  /* ×ボタンと隣接する項目には最低1emの余白を確保 */
  .menu-overlay .overlay-nav-row .nav-left a:last-child {
    margin-right: 1em !important;
  }
  .menu-overlay .overlay-nav-row .nav-right a:first-child {
    margin-left: 1em !important;
  }
  }

  /* --- 中央固定メニュー（通常） --- */
.menu-center {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    color: #B38A5A;
    font-family: 'AngelicaC';
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100vh;
    pointer-events: none;
  }
  
  .menu-center .top-link,
  .menu-center .menu-icon {
    pointer-events: auto;
  }
  
  .top-link,
  .bottom-label {
    font-size: 20px;
    writing-mode: vertical-rl;
    transform: rotate(0deg);
    color: #B38A5A;
    text-decoration: none;
  }

  .top-link{
    margin-top: 25px;
  }
  
  .bottom-label {
    font-family: fot-klee-pro, sans-serif;
    font-weight: 600;
    margin-bottom: 25px;
  }
  
  .menu-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  
  .menu-icon .line {
    width: 30px;
    height: 2.5px;
    background: #B38A5A;
    margin-bottom: 2px;
  }
  
  .menu-icon .eight {
    font-size: 48px;
    color: #B38A5A;
    transition: transform 0.3s ease;
    transform-origin: center;
  }
  
  .menu-icon:hover .eight {
    transform: rotate(90deg) translateX(-3px) translateY(2px);
  }
  
  .menu-label {
    font-size: 16px;
    color: #B38A5A;
    margin-top: -2px;
  }
  
/* News リンク本体を相対配置に */
.nav-link--news {
  position: relative;
  display: inline-block;     /* 必要に応じて */
}

/* + を小さく・右上に */
.nav-link--news-plus {
  position: absolute;
  top: 0;                    /* 親要素の上端 */
  right: -0.7em;             /* 文字 1 つ分くらい右へ */
  font-size: 0.7em;          /* 本文の60% サイズ */
  line-height: 0.9;            /* 高さを合わせる */
}

  /* スクロール */
  .scroll-container {
  height: 100svh;                   /* 最新ブラウザでの正確なビューポート高さ */
  height: 100vh;                    /* フォールバック */
  overflow-y: auto;                 /* スクロール可能に */
  overflow-x: hidden;               /* 横スクロールを無効化 */
  scroll-snap-type: y mandatory;    /* 垂直方向に強制スナップ */
  overscroll-behavior-y: contain;   /* バウンス時の伝播抑制 */
  scroll-behavior: smooth;          /* 滑らかなスクロール */
  -webkit-overflow-scrolling: auto; /* iOS慣性スクロールを無効化 */
}

/* 各スナップ要素 */
.snap {
  height: 100svh;       /* セクションをビューポートいっぱいに */
  height: 100vh;        /* フォールバック */
  scroll-snap-align: start;  /* 上端揃えでスナップ */
  scroll-snap-stop: always;  /* 大きなスクロールでも必ず止める */
}
  

  /*メニュー縦書きタイトル*/
  .fixed-page-label {
    position: fixed;
    top: 30px;
    left: 50px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 20px;
    font-weight: bold;
    color: white;
    z-index: 999;
    font-family: 'AngelicaC', serif;
    letter-spacing: 0.1em;
    user-select: none;
    pointer-events: none;
  }

/* Prevent horizontal overflow */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overscroll-behavior-x: none;
    }

/* ========== 固定タイトル (Plan / Movie) ========== */
/* 親要素 */
.service-titles-fixed {
  position: fixed;
  top: 50%;
  left: 8%;
  transform: translateY(-50%);
  display: flex;
  gap: 4vw;
  z-index: 900;
  pointer-events: none;
}

/* 子要素は “必ず” 親を含めた上でグルーピング */
.service-titles-fixed .service-title-plan,
.service-titles-fixed .service-title-movie {
  font-family: 'AngelicaC', sans-serif;  /* 英語フォント指定 */
  font-size:   3.2vw;
  color:       #fff;
  white-space: nowrap;
  letter-spacing: .08em;
}

.service-titles-fixed.hide {
  display: none !important;
}

img,svg{ user-select:none; }


 /* ========== 1 枚目 ========== */
.section-s1{
    background-color: #a2212a !important;
    color: #fff !important;
    }

 .content-wrapper-s1{
    display:flex;
    width:100%;
    height:100%;
    align-items:center;
    justify-content:flex-end;
    padding-right:15%;
}

 .right-s1-1{
    display:flex;
    flex-direction:column;
    gap:3vh;
}

.feature-list-s1{
    display:flex;
    flex-direction:column;
    gap:2vh;}

 .feature-item{
    display:flex;
    align-items:center;
    gap:1.2vw;
    font-size:1.1vw;
    font-family:fot-klee-pro,sans-serif;
}

 .icon-s1 img{
    width:2.5vw;
    height:2.5vw;
    object-fit:contain;
}

 /* ========== 2 枚目 ========== */
 .content-wrapper-s2{
    display:flex;
    width:100%;
    height:auto;
    align-items:center;
    justify-content:right;
  margin: 0;
  padding-top: 35vh;
  transform:none;
}

.right-s2-1 {

  padding-left: 60%;
  text-align: left;
}

 .body-s2-1{
    font-size:1.1vw;
    line-height:2;
    max-width:75%;
    font-family:fot-klee-pro,sans-serif;
    color: #fff;
}



  body{
    background-color: #a2212a;
  }


  /* ==========3,4,5枚目========== */
  /* 共通：背景と文字色 */
.section-s3,
.section-s4,
.section-s5 {
  background-color: #a2212a;
  color: white;
}

/* 共通：左右 2 列レイアウト */
.content-wrapper-s3,
.content-wrapper-s4,
.content-wrapper-s5 {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
}

/* 3 & 5 枚目：左動画 / 右テキスト */
.left-s3,
.left-s5 {
  width: 50%;
  display: flex;
  justify-content: left;
  padding-left: 6%;
}
.right-s3 {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 10%;
}

.right-s5 {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 5%;
}

/* 4 枚目：左右入れ替え */
.left-s4 {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: left;
  padding-left: 8%;
}

.right-s4 {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;

}

/* 動画 iframe */
.video-s3 iframe,
.video-s4 iframe,
.video-s5 iframe {
  width: 40vw;
  height: auto;
  aspect-ratio: 16 / 9;
  max-width: 45vw;
  border: none;
}

/* テキスト装飾 */
.subtitle-s3,
.subtitle-s4,
.subtitle-s5 {
  font-family: 'AngelicaC', sans-serif;
  font-size: 1.2vw;
  margin-bottom: 0.5vw;
}
.title-s3,
.title-s4,
.title-s5 {
  font-family: 'AngelicaC', sans-serif;
  font-size: 3vw;
  margin: 0.5vw 0;
}
.body-s3-small,
.body-s4-small,
.body-s5-small {
  font-family: fot-klee-pro, sans-serif;
  font-size: 1vw;
  margin-bottom: 1vw;
}

/* 撮影スポット画像 */
.image-s3,
.image-s4,
.image-s5 {
  margin-top: 1vh;
}

.image-s4 img {
  width: 85%;
  height: auto;
  object-fit: contain;
}

.image-s5 img {
  width: 85%;
  height: auto;
  object-fit: contain;
}

.image-s3 img{
  width: 65%;
  height: auto;
  object-fit: contain;
}

@media screen and (max-width: 1024px) {
  /* 全スナップ共通で左右並びをキープ */
  .content-wrapper-s1,
  .content-wrapper-s2,
  .content-wrapper-s3,
  .content-wrapper-s4,
  .content-wrapper-s5 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
  }

  /* テキスト側は約30%、メディア側は約65% */
  .left-s1, .left-s2,
  .left-s3, .left-s4, .left-s5 {
    width: 30% !important;
  }
  .right-s1-1, .right-s2-1,
  .right-s3-1, .right-s4-1, .right-s5-1 {
    width: 65% !important;
  }

  /* iframe／video は横幅いっぱいに */
  iframe, .movie-video-6, .video-4-2 video {
    width: 100% !important;
    height: auto !important;
  }

  /* アイコンや文字サイズを少し小さく調整 */
  .feature-item,
  .body-s2-1,
  .feature-text-s1 {
    font-size: 1vw;
  }
  .icon-s1 img {
    width: 4vw;
    height: 4vw;
  }
}


/* --- オーバーレイ共通スタイル（修正） --- */
.image-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.image-overlay.show {
  opacity: 1;
  visibility: visible;
}

.image-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 6px;
}


/* === 6 枚目 共通スタイル === */
.section-s6 {
  background-color: #a2212a;
  color: #fff;
}

/* 横並びレイアウト */
.content-wrapper-s6 {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  /* 1～5 枚目と同様に snap ごとに高さ 100vh が効いている想定 */
}

/* 左カラム (タイトル) */
.left-s6 {
  width: 50%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 4vw;           /* Plan と Photo の間隔 */
  padding-left: 8%;
}

/* Plan / Photo の見た目 */
.service-title-plan,
.service-title-photo {
  font-family: 'AngelicaC', sans-serif;
  color: #fff;
  font-size: 3.2vw;
  white-space: nowrap;
  letter-spacing: 0.08em;
  margin: 0; /* 見出し同士の余白は gap で制御 */
}

/* 右カラム (画像) */
.right-s6 {
  width: 50%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 0;
  padding-left: 8%;
}

.right-s6 img {
  max-width: 85%;
  height: auto;
  object-fit: contain;
}

/* === レスポンシブ対応 === */
@media screen and (max-width: 1024px) {
  /* すべての Snap で横並びを維持 */
  .content-wrapper-s6 {
    padding: 0 0;
  }
  /* 左カラムを約 30%、右カラムを約 65% に */
  .left-s6  { width: 50% !important; }
  .right-s6 { width: 50% !important; }
  /* 画像は最大幅いっぱいに */
  .right-s6 img {
    width: 100% !important;
  }
}

@media screen and (max-width: 768px) {
  /* 更に狭い時も同じレイアウトを維持 */
  .content-wrapper-s6 {
    padding: 0;
  }
  .service-title-plan,
  .service-title-photo {
    font-size: 5vw; /* 文字を少し大きくして見やすく */
  }
}

/* ========== 7 枚目 スタイル ========== */
/* 7 枚目：背景・文字色 */
.section-s7 {
  background-color: #a2212a;
  color: #fff;
}

/* 左右二分割レイアウト */
.content-wrapper-s7 {
  display: flex;
  width: 100%;
  height: 100vh;
  align-items: center;
}

/* 左カラム */
.left-s7 {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 右カラム */
.right-s7 {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 左タイトル */
.title-s7-hairmake {
  font-family: 'AngelicaC', sans-serif;
  font-size: 2.8vw;
  letter-spacing: 0.08em;
  margin: 0;
  white-space: nowrap;
  color: #fff;
}

/* 右アウトラインSVG */
.text-svg-s7 {
  width: auto;
  height: 3vh;     /* フォントサイズに合わせて調整 */
  user-select: none;
}

/* ===== レスポンシブ ===== */
@media (max-width: 1024px) {
  .content-wrapper-s7 {
    padding: 0;
  }
  .title-s7-hairmake {
    font-size: 4.2vw;
  }
  .text-svg-s7 {
    height: 3vh;
    padding-left: 10%;
  }
}




/* ========== 8 枚目 スタイル ========== */
.section-s8 {
  background-color: #e8e9e9;
  color: #a2212a;
}
.content-wrapper-s8 {
  display: flex;
  width: 100%;
  height: 100vh;
  align-items: center;
  box-sizing: border-box;
}

/* 左カラム */
.left-s8 {
  width: 45%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 8%;
  gap: 6vh;
}

/* 各パート */
.part-s8 {
  display: flex;
  align-items: flex-start;
  gap: 2vw;
}
.number-s8 {
  font-family: 'AngelicaC', sans-serif;
  font-size: 2vw;
  color: #a2212a;
  line-height: 1;
  white-space: nowrap;
}
.text-s8 {
  width: 70%;
  font-family: 'fot-klee-pro', sans-serif;
}
.text-s8 .title-s8 {
  font-size: 1.25vw;
  margin: 0 0 0.5vw;
}
.text-s8 .body-s8 {
  font-size: 0.95vw;
  line-height: 1.8;
  margin: 0;
}

/* 右カラム */
.right-s8 {
  width: 55%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 15%;
}
.image-s8 img {
  width: 85%;
  height: auto;
  object-fit: contain;
}

/* ===== レスポンシブ調整 ===== */
@media (max-width: 1024px) {
  .content-wrapper-s8 {
    padding: 0 5%;
  }
  .left-s8, .right-s8 {
    width: 45%;
  }
  .number-s8 {
    font-size: 3vw;
  }
  .text-s8 .title-s8 {
    font-size: 2vw;
  }
  .text-s8 .body-s8 {
    font-size: 1.2vw;
    line-height: 1.6;
  }
  .image-s8 img {
    width: 90%;
  }
}

@media (max-width: 768px) {
  /* 横並び維持しつつ左右幅を調整 */
  .left-s8, .right-s8 {
    width: 50%;
  }
  .number-s8 {
    font-size: 3vw;
  }
  .text-s8 .title-s8 {
    font-size: 2vw;
    
  }
  .text-s8 .body-s8 {
    font-size: 1.5vw;
    width: 100%;
    line-height: 1.2em;
  }
  .image-s8 img {
    width: 100%;
  }
}

/* ==============================================
   8 枚目（light 背景）到達時のみ縦ラベル・予約ボタンを a2212a に
   ============================================== */

/* トグル用クラスを body に付与します */
body.slide8-light .fixed-page-label {
  color: #a2212a !important;
}

body.slide8-light .reserve-button svg,
body.slide8-light .reserve-button text {
  fill: #a2212a !important;
  color: #a2212a !important;
}


/* ========== 9 枚目 調整後 (2列レイアウト固定) ========== */
.section-s9 {
  background-color: #a2212a;
  color: #fff;
}

/* 全体コンテナ */
.content-wrapper-s9 {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center;            /* 垂直中央揃え */
  width: 100%;
  height: 100%;
  padding: 0 0 0 20%;
  gap: 2vw;
}

.left-s9 {
  width: 10%;
  display: flex;
  justify-content: flex-start;   /* 左寄せ */
  align-items: center;           /* 垂直中央揃え */
  padding-right: 25vw;              /* 左に少しマージン */
                   /* 余計なマージンはリセット */
}


.title-s9 {
  font-family: 'AngelicaC', sans-serif;
  font-size: 2.8vw;
  margin: 0;
}

/* 右側：グリッドで 2 列3行 */
.right-s9 {
  display: grid;
  grid-template-columns: 1fr 1fr;        /* 2 列 */
  column-gap: 1vw;                     /* 列間 */
  width: 80%;
  margin-right: auto;  /* 左側の余白を最大化 */
  margin-left: 10%;
}


/* 共通パート設定 */
.part-s9 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* ── 1 列目（part1 と part2）の行間 */
.part-s9-1,
.part-s9-2 {
  margin-bottom: 3vw;   /* ここで 1→2 の間隔を大きく */
}

/* ── 2 列目（part3〜5）の行間 */
.part-s9-3,
.part-s9-4 {
  margin-bottom: 3vw; /* ここで 3→4 と 4→5 の間隔を狭く */
}

/* ── 最後のパートは余白不要 */
.part-s9-5 {
  margin-bottom: 3vw;
}

/* 見出し */
.heading-s9 {
  font-family: fot-klee-pro, sans-serif;
  font-size: 1.4vw;
  margin-bottom: 0.5vw;
  line-height: 1.2;
}

/* 本文 */
.text-s9 {
  font-family: fot-klee-pro, sans-serif;
  font-size: 1vw;
  line-height: 1.4;
  margin: 0 0 1vw;
  white-space: normal; /* 改行を有効に */
  width: 85%;
}

/* 1. テーブルそのものにも枠線を指定して壊れを防ぐ */
.table-s9 {
  font-family: fot-klee-pro, sans-serif;
  width: 85%;
  table-layout: fixed;          /* セル幅を固定して端数を減らす */
  border-collapse: collapse;
  border-spacing: 0;            /* 念のためスペーシングもリセット */
  border: 1px solid #fff;       /* テーブル全体に枠 */
  margin: 0.5vw 0 1vw;
letter-spacing: normal;
font-feature-settings: "palt";
}

/* 2. セルにも確実に枠線を描画 */
.table-s9 td,
.table-s9 th {
  border: 1px solid #fff !important; /* !important で上書き漏れを防止 */
  padding: 0.9em 0.9em;
  text-align: center;
  vertical-align: middle;
  font-size: 1vw;
  word-break: break-word;       /* 長い文字列でも幅内に折り返し */
}

/* 3. 代替手段として box-shadow や outline を使う */
/*    （特にサブピクセル描画で border が消える場合に有効） */
.table-s9 td {
  /* 内側に 1px の影で“擬似的”に枠線を描画 */
  box-shadow: inset 0 0 0 1px #fff;
  /* outline: 1px solid #fff; outline-offset: -1px; を使う方法もアリ */
}

.text-s9{
  width: 85%;
}

/* ボタン */
.btn-s9-overlay {
  align-self: flex-start;
  background-color: #b38a5a;
  color: #a2212a;
  font-family: 'fot-klee-pro', sans-serif;
  font-size: 0.9vw;
  padding: 0.3em 0.8em;
  border: none;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease;
}
.btn-s9-overlay:hover {
  background-color: transparent;
  color: #b38a5a;
  border: 1px solid #b38a5a;
}

/* オーバーレイ */
.overlay-s9 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5000;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease;
}
.overlay-s9.show {
  visibility: visible;
  opacity: 1;
}
.overlay-s9 img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
}

/* ========== レスポンシブ調整 ========== */
/* ブレイクポイント：1024px 以下 */
@media (max-width: 1024px) {
  .content-wrapper-s9 {
    padding: 0 3% 0 25%;
    gap: 1.5vw;
  }
  .left-s9 {
    width: 15%;
    padding-right: 20vw;
  }
  .title-s9 {
    font-size: 3.5vw;
  }
  .right-s9 {
    width: 80%;
    column-gap: 0.8vw;
  }
  .heading-s9 {
    font-size: 2vw;
  }
  .text-s9 {
    font-size: 1.2vw;
    width: 90%;
  }
  .table-s9 {
    width: 80%;
    font-size: 1.2vw;
  }
  .btn-s9-overlay {
    font-size: 1.5vw;
    padding: 0.5em 1em;
  }
}

/* ブレイクポイント：768px 以下 */
@media (max-width: 768px) {
  .content-wrapper-s9 {
    padding: 0 5%;
    gap: 1vw;
  }
  .left-s9 {
    width: 20%;
    padding-right: 25vw;
    margin-left: 15vw;
  }
  .title-s9 {
    font-size: 3.5vw;
  }
  .right-s9 {
    width: 60%;
    column-gap: 0vw;
  }
  .heading-s9 {
    font-size: 1.5vw;
  }
  .text-s9 {
    font-size: 1.4vw;
    line-height: 1;
    
  }
  .table-s9 {
    width: 90%;
  }
  .btn-s9-overlay {
    font-size: 1.4vw;
    padding: 0.6em 1em;
  }
}

/* ========== 10 枚目 ========== */
.section-s10 {
  background-color: #a2212a;
  color: white;
}

.content-wrapper-s10 {
  display: flex;
  width: 100%;
  height: 100%;
}

/* 左・右カラム共通 */
.left-s10,
.right-s10 {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直中央 */
  align-items: center;     /* 水平中央 */
  text-align: center;
}

/* 英語タイトル */
.title-s10,
.heading-s10 {
  font-family: 'AngelicaC', sans-serif;
  font-size: 2.8vw;
  margin: 0;
}

/* 下部日本語サブタイトル */
.subtitle-s10 {
  font-family: 'fot-klee-pro', sans-serif;
  font-size: 1.1vw;
  margin: 1vw 0 0;
  line-height: 1;
}

/* ========== レスポンシブ調整 ========== */
@media (max-width: 1024px) {
  .title-s10,
  .heading-s10 { font-size: 3vw; }
  .subtitle-s10    { font-size: 1.2vw; }
}

@media (max-width: 768px) {
  .title-s10,
  .heading-s10 { font-size: 3vw; }
  .subtitle-s10    { font-size: 1.2vw; }
}


/* ========== 11 枚目 ========== */
*, *::before, *::after {
  box-sizing: border-box;
}

.section-s11,
.content-wrapper-s11 {
  padding: 0;
  margin:  0;
}

.section-s11 {
  background-color: #a2212a;
  color: white;
  padding: 0;           /* 左右の余白をリセット */
  overflow-x: hidden;
}

.content-wrapper-s11 {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  box-sizing: border-box;
}

/* 左カラム：3 枚の重ね合わせ */
.left-s11 {
  position: relative;
  width: 60%;           /* 左側は約 60% */
  height: 100%;
}

/* 画像1：大きく左寄せ */
.img1-s11 {
  position: absolute;
  top: 50%;
  left: 0;              /* 画面左端にピッタリ */
  transform: translateY(-50%);
  width: 65%;           /* ご指定の幅に */
  height: auto;
  object-fit: cover;
  z-index: 9999;
  
}



/* 画像2：image1 上に重ね、左端・垂直中央 */
.img2-s11 {
  position: absolute;
  left: 0;               
  top: 46%;
  transform: translateY(-40%);
  width: 25%;           /* 小さく */
  height: auto;
  object-fit: contain;
  z-index: 0;
}

/* 画像3：image1 の右上に重ね */
.img3-s11 {
  position: absolute;
  left: 55%;            /* 画面左からの位置に */
  top: 5%;             /* 少し下げる */
  width: 23%;
  height: auto;
  object-fit: contain;
  z-index: 0;
}

/* 右カラム：中央揃え */
.right-s11 {
  width: 35%;           /* 右側は約 35% */
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 0;     /* 右余白リセット */

}

/* 画像4：中央揃え */
.img4-s11 {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  margin-left: -40%;     /* 左へ 5% オフセット */
}

/* 11 枚目（page-s11）のみで重なり順を定義 */
.page-s11 .fixed-page-label {
  z-index: 1;    /* ラベルを背面寄りへ */
}

/* 11 枚目専用：画像の前後関係 */
.page-s11 .img3-s11 { z-index: 5; }
.page-s11 .img1-s11 { z-index: 10; }
.page-s11 .img2-s11 { z-index: 20; } /* もっとも手前 */

/* ========== レスポンシブ ========== */
@media (max-width: 1024px) {
  .content-wrapper-s11 {
    padding:3% 0;
    gap: 2%;
  }
  .left-s11 {
    width: 55%;
  }
  .right-s11 {
    width: 40%;
  }
  .img1-s11 { left: 0; width: 75%; }
  .img2-s11 { width: 30%; }
  .img3-s11 { left: 60%;
    top: 3%;
    width: 25%; }
  .img4-s11 {
      margin-left: -20%;
      width: 85%;
      height: auto;
    }
}

@media (max-width: 768px) {
  .left-s11 {
    width: 50%;
  }
  .right-s11 {
    width: 45%;
  }
  .img1-s11 { width: 85%; }
  .img2-s11 { width: 32%; }
  .img3-s11 {
    left: 60%;
    top: 5%;
    width: 30%;
  }
  .img4-s11 {
    margin-left: -10%;
  }
}

/* ========== 12 枚目スタイル ========== */
/* 12 枚目でのみ適用 */
.slide12-light .fixed-page-label {
  color: #a2212a !important;
}

.slide12-light .reserve-button,
.slide12-light .reserve-button svg,
.slide12-light .reserve-button text {
  /* 予約ボタンも赤に */
  fill: #ffffff !important;
  color: #ffffff !important;
}

.section-s12 {
  background-color: #e8e9e9;
  color: #a2212a;
  position: relative;
}

/* 全体レイアウト：左右2カラム */
.content-wrapper-s12 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 5%;
  box-sizing: border-box;
  gap: 4vw;
}

/* 左カラム：タイトル */
.left-s12 {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 10%;
}
.title-s12 {
  font-family: 'AngelicaC', sans-serif;
  font-size: 3vw;
  margin: 0;
  white-space: nowrap;
}

/* 右カラム：メイン画像＋バナー */
.right-s12 {
  width: 45%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2vw;
}
.image-s12 {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* バナーにドロップシャドウ */
.banner-s12 img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
  cursor: pointer;
}

/* ========== レスポンシブ ========== */
@media (max-width: 1024px) {
  .content-wrapper-s12 { gap: 3vw; padding: 0 5%; }
  .left-s12 { width: 40%;
    padding-right: 30%; }
  .right-s12 { width: 45%; 
  }
  .title-s12 { font-size: 3.2vw; }
}
@media (max-width: 768px) {
  .content-wrapper-s12 { gap: 1vw; }
  .left-s12 { width: 35%; }
  .right-s12 { width: 45%; }
  .title-s12 { font-size: 3.2vw; }
}


/* ============ Mobile 一覧レイアウト（max-width:768px） ============ */
@media screen and (max-width: 768px) {

  /* 1. 予約ボタンを左下に */
  .reserve-button {
    right: auto !important;
    left: 20px !important;
    bottom: 20px !important;
    transform: none !important;
  }
  
  .reserve-button {
    width: 80px !important;
    height: 80px !important;
  }
  .reserve-button svg {
    width: 100% !important;
    height: 100% !important;
  }
  
  .menu-center {
    position: static !important;
    display: block   !important;
    transform: none  !important;
  }
  
  /* ── 上端リンクを画面上端に固定 ── */
  .menu-center .top-link {
    position: fixed    !important;
    top:      10px        !important;
    right:    18px      !important;
    z-index: 10000     !important;
    white-space: nowrap!important;
    font-size:   14px  !important;
    line-height: 1     !important;
    margin:      0     !important;
    padding:     4px 0 !important;
  }
  
  /* ── ハンバーガーを画面縦中央に固定 ── */
  .menu-center .menu-icon {
    position: fixed    !important;
    top:      50%      !important;
    right:    18px      !important;
    transform: translateY(-50%) !important;
    z-index: 10000     !important;
    display: flex      !important;
    flex-direction: column!important;
    align-items:    center   !important;
    margin:         0        !important;
    padding:        0        !important;
  }
  .menu-center .menu-icon .line {
    width:  20px !important;
    height: 2px  !important;
    margin: 1px 0 !important;
  }
  .menu-center .menu-icon .eight {
    font-size:   32px !important;
    line-height: 1    !important;
  }
  .menu-center .menu-icon .menu-label {
    font-size:   10px !important;
    line-height: 1     !important;
    white-space: nowrap!important;
    margin:      1px 0 !important;
    padding:     0     !important;
  }
  
  /* ── 下端ラベルを画面下端に固定 ── */
  .menu-center .bottom-label {
    position: fixed    !important;
    bottom:   10px        !important;
    right:    18px      !important;
    z-index: 10000     !important;
    white-space: nowrap!important;
    font-size:   14px  !important;
    line-height: 1     !important;
    margin:      0     !important;
    padding:     4px 0 !important;
  }
  
  
  /* 3. 全スライドを縦レイアウトに切り替え */
  .slide-content,
  .content-wrapper-s1,
  .content-wrapper-s2,
  .content-wrapper-s3,
  .content-wrapper-s4,
  .content-wrapper-s5,
  .content-wrapper-s6,
  .content-wrapper-s7,
  .content-wrapper-s8,
  .content-wrapper-s9,
  .content-wrapper-s10,
  .content-wrapper-s11,
  .content-wrapper-s12 {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  /* 各カラムを幅100%に */
  .slide-content > div,
  .content-wrapper-s1 > div,
  .content-wrapper-s2 > div,
  .content-wrapper-s3 > div,
  .content-wrapper-s4 > div,
  .content-wrapper-s5 > div,
  .content-wrapper-s6 > div,
  .content-wrapper-s7> div,
  .content-wrapper-s8> div,
  .content-wrapper-s9> div,
  .content-wrapper-s10> div,
  .content-wrapper-s11> div,
  .content-wrapper-s12> div {
    width: 100% !important;
  }
  
  /* モバイル版: オーバーレイメニュー */
  
    /* PC用縦バーは隠し、オーバーレイ用縦バー（overlay-version）を表示 */
   
    .menu-overlay .menu-center.overlay-version {
      display: flex !important;
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      flex-direction: column !important;
      justify-content: space-between !important;
      align-items: center !important;
      background-color: #a2212a !important;
      z-index: 2000 !important;
      padding: 0 20px !important;
      box-sizing: border-box !important;
    }
  
   /* 閉じるボタン（×） */
   .menu-overlay.active .menu-close {
    display: block !important;
    position: fixed !important;
    top: 50% !important;               /* 垂直中央 */
    right: 18px !important;             /* 右から18px */
    left: auto !important;              /* 左位置クリア */
    transform: translate(0, -72%) !important; /* 縦方向中央合わせ */
    font-size: 43px !important;
    color: white !important;
    z-index: 2100 !important;
    cursor: pointer !important;
  }
  
  
    /* メニュー項目: 縦並び、左から20px、中央縦配置 */
    .menu-overlay .overlay-nav-row {
      position: fixed !important;
      top: 50% !important;
      left: 80px !important;
      transform: translateY(-50%) !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 32px !important; /* 広めの間隔 */
      margin: 0 !important;
      padding: 0 !important;
      background: none !important;
      z-index: 2000 !important;
    }
  
    .menu-overlay .overlay-nav-row .nav-left,
    .menu-overlay .overlay-nav-row .nav-right {
      display: flex !important;
      flex-direction: column !important;
      gap: 40px !important;
    }
  
    .menu-overlay .overlay-nav-row a {
      color: white !important;
      font-size: 24px !important; /* 文字サイズ大きく */
      text-decoration: none !important;
      line-height: 1.2 !important;
      margin: 0 !important;
      padding: 0 !important;
    }
  
    /* プラス記号の位置調整 */
    .menu-overlay .overlay-nav-row .nav-link--news-plus {
      position: absolute !important;
      top: 0 !important;
      left: 5.5em !important;
      font-size: 0.7em !important;
      line-height: 1 !important;
    }
  
  /* Toggle between main and overlay menus using :has */
  /* main menu hidden when overlay active */
  body:has(.menu-overlay.active) .menu-center:not(.overlay-version) {
    display: none !important;
  }
  /* overlay-version shown only when overlay active */
  body:has(.menu-overlay.active) .menu-center.overlay-version {
    display: flex !important;
  }
  /* overlay-version hidden when overlay not active */
  body:not(:has(.menu-overlay.active)) .menu-center.overlay-version {
    display: none !important;
  }
  

/* Fixed titles at top-right, avoiding bar */
.service-titles-fixed {
  top: 50px !important;
  left: auto !important;
  right: 50px !important;
  transform: translateY(10%);
  gap: 2vw !important;
  margin: 0;
}

/* 子要素のフォントサイズを拡大（containerではなく子要素に適用） */
.service-titles-fixed .service-title-plan,
.service-titles-fixed .service-title-movie {
  font-size: 6vw !important; /* スマホ版専用サイズ */
}
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.feature-item{
  gap: 12px!important;
}
/* Right-side 4 feature items: static centering within section */
.section-s1 .right-s1-1 {
  position: static !important;
  transform: translateX(-20px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 2vh !important;
  margin: auto !important;
}
/* Increase icon & text size */
.section-s1 .feature-text-s1 {
  font-size: 3.2vw !important;
  
}
.section-s1 .icon-s1 img {
  width: 6vw !important;
  height: 6vw !important;
}



  /* Section S2: vertical center, left offset, larger text */
  .section-s2 .content-wrapper-s2 {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    height: 100vh !important;
    padding-left: 6% !important;
    padding-right: 10% !important;
    box-sizing: border-box;
    max-width: 95% !important;
    width: 95% !important;
  }
  .section-s2 .right-s2-1 {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    
    padding-left: 5vw !important;
  }
  .section-s2 .body-s2-1 {
    font-size: 2.8vw !important;
    line-height: 2 !important;
    max-width: 100% !important;
    width: 100% !important;
font-feature-settings: "palt";
letter-spacing: normal;
    
  }


  /* Section 3 - Mobile */
  .section-s3 .content-wrapper-s3 {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-end !important;
    padding: 5% 5% 0 !important;
    box-sizing: border-box !important;
    height: 100vh !important;
    transform: translate(-8%,8%) !important;
  }
  .section-s3 .video-s3 iframe {
    width: 60vw !important;
    height: auto !important;
    align-self: flex-end !important;
    aspect-ratio: 16/9 !important;
    max-height: 60vh !important;
    transform: translate(65%,30%) !important;
  }
  .section-s3 .right-s3 {
    width: 100% !important;
    align-self: flex-start !important;
    margin-top: 20px !important;
    transform: translate(0%,20%) !important;
  }
  .section-s3 .subtitle-s3 {
    font-size: 3vw !important;
    margin-bottom: 5px !important;
    text-align: left !important;
  }
  .section-s3 .title-s3 {
    font-size: 6vw !important;
    margin-bottom: 5px !important;
    text-align: left !important;
  }
  .section-s3 .body-s3-small {
    font-size: 3.5vw !important;
    line-height: 1.4 !important;
    text-align: left !important;
    margin-bottom: 10px !important;
  }
  .section-s3 .image-s3 img {
    width: 65vw !important;
    height: auto !important;
    object-fit: contain !important;
    align-self: flex-start !important;
  }

  /* Section 4 - Mobile */
  .section-s4 .content-wrapper-s4 {
    display: flex !important;
    flex-direction: column-reverse !important;
    justify-content: flex-start !important;
    align-items: flex-end !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    height: auto !important;
    max-height: 100vh !important;
    transform: none !important;
    margin-top: 15vh;
  }
  .section-s4 .video-s4 iframe {
    width: 65vw !important;
    aspect-ratio: 16/9 !important;
    max-height: 55vh !important;
    align-self: flex-end !important;
    transform: translate(25%,-55%) !important;
    
  }
  .section-s4 .left-s4 {
    width: 100% !important;
    align-self: flex-start !important;
    margin-top: 0px !important;
    transform: translate(0,0) !important;
  }
  .section-s4 .subtitle-s4 {
    font-size: 3vw !important;
    margin-bottom: 5px !important;
    text-align: left !important;
  }
  .section-s4 .title-s4 {
    font-size: 6vw !important;
    margin-bottom: 5px !important;
    text-align: left !important;
  }
  .section-s4 .body-s4-small {
    font-size: 3.5vw !important;
    line-height: 1.4 !important;
    text-align: left !important;
    margin-bottom: 10px !important;
  }
  .section-s4 .image-s4 img {
    width: 75vw !important;
    height: auto !important;
    object-fit: contain !important;
    align-self: flex-start !important;
    transform: translate(0%,10%) !important;
  }

  /* Section 5 - Mobile */
  .section-s5 .content-wrapper-s5 {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-end !important;
    padding: 10% 5% 0 !important;
    box-sizing: border-box !important;
    height: 100vh !important;
    transform: translate(-3,0) !important;
  }
  .section-s5 .video-s5 iframe {
    width: 65vw !important;
    aspect-ratio: 16/9 !important;
    max-height: 65vh !important;
    align-self: flex-end !important;
    transform: translate(65%,15%) !important;
  }
  .section-s5 .right-s5 {
    width: 100% !important;
    align-self: flex-start !important;
    margin-top: 20px !important;
    transform: translate(0,20%) !important;
  }
  .section-s5 .subtitle-s5 {
    font-size: 3vw !important;
    margin-bottom: 5px !important;
    text-align: left !important;
  }
  .section-s5 .title-s5 {
    font-size: 6vw !important;
    margin-bottom: 5px !important;
    text-align: left !important;
  }
  .section-s5 .body-s5-small {
    font-size: 3.5vw !important;
    line-height: 1.4 !important;
    text-align: left !important;
    margin-bottom: 10px !important;
  }
  .section-s5 .image-s5 img {
    width: 80vw !important;
    height: auto !important;
    object-fit: contain !important;
    align-self: flex-start !important;
  }
  
  /* Container becomes relative for absolute positioning */
  .section-s6 {
    position: relative;
  }
  .section-s6 .content-wrapper-s6 {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 0 !important;
    height: 100vh;
    box-sizing: border-box;
  }
  /* Position Plan/Photo top-right without fixed across pages */
  .section-s6 .left-s6 {
    position: absolute;
    top: 50px;
    right: 45px;
justify-content: flex-end;
    gap: 2vw;
  }
  .section-s6 .service-title-plan,
  .section-s6 .service-title-photo {
    font-size: 6vw;
  }
  /* Center image vertically and left-align */
  .section-s6 .right-s6 {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 90vw;
    justify-content: flex-start;
  }
  .section-s6 .right-s6 img {
    content: url('../photo/service-photo-mb.png');
    width: 100%;
    height: auto;
  }


/* Section 7: container relative for absolute children */
.section-s7 {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.section-s7 .content-wrapper-s7 {
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
  height: 100%;
}
/* Title at top-right */
.section-s7 .left-s7 {
  position: absolute;
  top: 50px;
  right: 45px;
  width: auto;
  justify-content: flex-end;
}
.section-s7 .title-s7-hairmake {
  font-size: 6vw;
}
/* SVG center of screen */
.section-s7 .right-s7 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-55%, -50%);
  justify-content: center;
}
.section-s7 .text-svg-s7 {
  height: 2vh;
}


.section-s8 { 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  min-height: 100vh; 
  padding: 0; 
  overflow: hidden; 
  background-color: #e8e9e9; }

  .content-wrapper-s8 { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    height: auto; 
    padding: 0 11%; 
    width: 90%;
    max-width: 100%;
    box-sizing: border-box;
    gap: 30px;
    transform: translateY(-3%) !important;
  }

    .left-s8 {
      transform: translate(15%,12%) !important; /* 全体右に10% */
      padding-left: 0;
      gap: 30px;
    }

  .number-s8 { 
    font-size: 4.3vw !important; 
    text-align: left !important; 
  }
  .text-s8 .title-s8 { 
    font-size: 2.7vw !important; 
    text-align: left !important; 
  }

  .text-s8 .body-s8 { 
    font-size: 2.7vw !important; 
    line-height: 1.4; 
    text-align: left !important;
     width: auto;
    max-width: 100%;
    margin: 0 !important;
    font-feature-settings: "palt";
    }

  .image-s8 img { 
    width: 60vw !important; 
    height: auto; 
    margin-top: 10px !important; /* 画像の上間隔10px */
    transform: translate(-15%,7%) !important; /* 画像10%左 */
  }

  .left-s8, .right-s8 { 
    width: 100%; 
    flex-direction: column; 
    align-items: flex-start; 
    justify-content: center; 
    max-width: 100%;
    transform: translateX(-5%);
  }

  /* ==== 9 枚目 調整後 (2列レイアウト固定) ==== */


.section-s9 {
  position: relative;    /* ← ここを追加 */
  background-color: #a2212a;
  color: #fff;
}

.content-wrapper-s9 {
  display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 0 5% !important;
    gap: 10px !important;
    height: 100vh !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

.left-s9 {
  width: 60%; 
  justify-content: flex-end;
  align-items: flex-end;
  padding-right:20px;

}

.title-s9 {
  position: absolute !important;
    top: 55px !important;
    right: 55px !important;
    font-size: 6vw !important;
    margin: 0 !important;
}

.right-s9 {
  display: flex !important;
    flex-direction: column !important;
    width: 95% !important;
    position: absolute !important;
  top: 30vh !important;
  margin-top: 0 !important;
    gap: 10px !important;
    transform: translate(15%, -20%);
    max-width: 95%;
    padding: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    align-items: center !important;
}

.part-s9 {
  width: 100% !important;
    padding: 5px 0 !important;
}

.part-s9-1,
.part-s9-2 {
  margin-bottom: 1vw;
}

.part-s9-3,
.part-s9-4 {
  margin-bottom: 1vw;
}

.part-s9-5 {
  margin-bottom: 1vw;
}

.heading-s9 {
  font-family: 'fot-klee-pro', sans-serif;
  font-size: 3vw;
  margin-bottom: 1vw;
  line-height: 1.2;
}

.text-s9 {
  font-size: 2.6vw !important;
    line-height: 1.6 !important;
    width: 70% !important;
}

.table-s9 {
  font-family: 'fot-klee-pro', sans-serif;
  width: 90%;
  border-collapse: collapse;
  height: auto;
  max-width: 50vw!important; /* お好みで調整 */
  table-layout: fixed;
  margin: 0 0 1vw 0 !important;

  /* 左側のテキストと揃うように */
  margin-left: 0 !important;
}

.table-s9 td {
  width: 100% !important;
    font-size: 2.2vw !important;
    border: 1px solid #fff;  /* ← ここを必ず “1px” に */
}
.table-s9 th {
  border: 1px solid #fff;  /* ← ここを必ず “1px” に */
}
/* テーブル各列の幅を明示指定（念のため） */
.table-s9 td:first-child {
  width: 35%;    /* １列目は全体の 35% */
}
.table-s9 td:last-child {
  width: 65%;    /* ２列目は全体の 65% */
}

.btn-s9-overlay {
  font-size: 2.2vw !important;
    padding: 0.5vh 1vh !important;
    align-self: flex-end !important;
    transform: translateX(-20%) !important;
    margin: 0 !important;
    margin-right: 23vw !important;
}

.btn-s9-overlay:hover {
  background-color: transparent;
  color: #b38a5a;
  border: 1px solid #b38a5a;
}

/* テーブル枠を細くし、セル内のパディングを縮小 */
.table-s9 td {
  border-width: 0.5px !important;
  padding: 0.5em !important;
}

/* brタグによる強制改行を無効化し、自然改行を有効化 */
.part-s9 .text-s9 br {
  display: none !important;
}


/* 1. Stack everything vertically & center */
.section-s10 .content-wrapper-s10 {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
  height: 100vh !important;
  padding: 0 16px !important;
  box-sizing: border-box;
  gap: 20px;
  transform: translate(-3%,2%);
}

/* 2. Title top-right, but not fixed */
.section-s10 .title-s10 {
  position: absolute !important;
  top: 45px !important;
  right: 45px !important;
  margin: 0 !important;
  font-size: 5vw !important;
  white-space: nowrap;
  text-align: right;
}

/* 3. Push the right column copy into the center */
.section-s10 .right-s10 {
  width: 100% !important;
  text-align: center !important;
  padding: 0 !important;
  flex-direction: column-reverse !important;
  gap: 10px;
  transform: translate(-1%, -30%) !important;
}
.heading-s10{
  font-size: 6.2vw !important;
}

.subtitle-s10{
  font-size: 4vw !important;
  font-feature-settings: "palt";

} 

/* 11枚目 */
.content-wrapper-s11 {
  width: 100%;
  height: 100vh;
  
}
.img1-s11 { width: 85vw !important; }
.img2-s11 { width:40vw !important; }
.img3-s11 {
  top: 35px !important;
transform: translateX(-30%);
  width: 40vw !important;
}

/* 11.5枚目 */
.content-wrapper-s11-5 {
  padding: 0 16px;
  box-sizing: border-box;
}
.right-s11-5 img {
  width: 80vw !important;
}

 /* 11.5 枚目を縦横中央に表示 */
 .snap11-5 {
  display: flex !important;
  justify-content: center;
  align-items: center;
  height: 100vh !important;
  padding: 0 16px;
  box-sizing: border-box;}

 /* 11枚目（section.snap11）の右画像を隠す */
 section.snap11 .right-s11 {
  display: none !important;
}
/* 11.5枚目（section.snap11-5）を縦中央に表示 */
section.snap11-5 {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 0 16px;
  box-sizing: border-box;
  margin-left: 10vw;
}
/* 11.5枚目内の右画像だけ有効化 */
section.snap11-5 .right-s11 {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

/* 全体を縦レイアウトに */
.section-s12 .content-wrapper-s12 {
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
  gap: 16px !important;
  height: 100vh !important;
  box-sizing: border-box !important;
  transform: translate(-3%,-2%);
}

/* タイトルを右上に */
.section-s12 .left-s12 {
  position: absolute !important;
  top: 65px !important;
  right: 45px !important;
  margin: 0 !important;
  font-size: 8vw !important;
  white-space: nowrap;
  text-align: right;

}
.section-s12 .title-s12 {
  position: absolute !important;
    top: 10px !important;
    right: 16px !important;
    margin: 0 !important;
    font-size: 6vw !important;
    white-space: nowrap;
    z-index: 1000;
}

/* 画像＋バナーを縦積み中央揃え */
.section-s12 .right-s12 {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-top: 60px !important;  /* タイトルとの間隔 */
  overflow-y: auto !important;
}
/* 画像を大きく */
.section-s12 .image-s12 {
  width: 80vw !important;          /* 画面幅の90%まで */
  max-width: none !important;
  height: auto !important;
  margin: 0 auto !important;
}
/* バナーも大きく */
.section-s12 .banner-s12 {
  width: 85vw !important;          /* 画面幅の80%まで */
  max-width: none !important;
  display: block !important;
  margin: 0 auto !important;
  transform: translateX(-2%) !important;
  padding: 0 !important;
}
.section-s12 .banner-s12 img {
  width: 100% !important;
  height: auto !important;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25)) !important;
}
 /* Snap12を画面一杯に固定し、はみ出し禁止 */
 .snap12,
 .section-s12,
 .section-s12 .content-wrapper-s12 {
   height: 100vh !important;
   overflow: hidden !important;
 }

}


/* ─── デフォルト（PC 向け） ─── */
/* 11枚目の右カラムは隠す */
.snap11 .right-s11 {
  display: none !important;
}
/* 11.5枚目は隠す */
.snap11-5 {
  display: none !important;
}

@media screen and (min-width: 769px) {
  /* 11枚目の right-s11 は必ず表示 */
  section.snap11 .right-s11 {
    display: flex !important;
  }
  /* 11.5枚目は隠す */
  section.snap11-5 {
    display: none !important;
  }





  
}
@media screen and (max-width: 768px) {
  /* ① ページ全体で横スクロール禁止 */
  html, body {
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
  }

  /* ② スクロールコンテナを 100vh に固定 */
  .scroll-container {
    height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-snap-type: y mandatory !important;
    overscroll-behavior: contain !important;
  }

  /* ③ 各スナップセクションを厳密に 100vh に */
  .scroll-container .snap {
    min-height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
  }

  /* ④ 最終スナップの下余白を完全に消す */
  .scroll-container .snap:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* ⑤ モバイルで不要な大きな translate をリセット */
  /* （必要に応じて他の .section-sX も同様にリセットしてください） */
  .section-s3 .content-wrapper-s3,
  .section-s4 .content-wrapper-s4,
  .section-s5 .content-wrapper-s5 {
    transform: none !important;
  }
}

/* ---------- Tablet (768px〜1024px) ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* Right features to right half center */
  .section-s1 .content-wrapper-s1 {
    justify-content: flex-end !important;
    padding-left: 15% !important;
    margin: 0 !important;
    transform: translateX(18%);
  }
  .feature-text-s1 {
    font-size: 1.6vw !important;
  }

  /* Section S2: adjust right text width */
  .section-s2 .content-wrapper-s2 {
    justify-content: center !important;
    padding-left: 10px !important;
    padding-right: 10% !important;
    max-width: 100% !important;
    width: 100% !important;
    transform: translateX(5%);
  }
  .section-s2 .right-s2-1 {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    padding-top: 35vh;
  }
  .section-s2 .body-s2-1 {
    font-size: 1.8vw !important;
    max-width: 100% !important;
    width: 100% !important;
    line-height: 1.6 !important;
    font-feature-settings: "palt";
  }

 /* Increase videos & text/Image half by 15% */
 .video-s3 iframe,
 .video-s4 iframe,
 .video-s5 iframe {
   width: 40vw !important;
   height: auto;
   aspect-ratio: 16 / 9;
 }
 /* Move section-s4 video right by 10% to avoid bar overlap */
 .section-s4 .video-s4 iframe {
   transform: translateX(10%) !important;
 }
 /* Increase map/ text container width by 15% */
 .right-s3{
   transform: scale(1.5) !important;
   transform-origin: top left;
   transform: translateX(25%) !important;
    width: 70% !important;
 }


 .left-s4 {
   transform: scale(1.7) !important;
   transform-origin: top left;
   transform: translateX(-12%) !important;
   width: 70% !important;
 }

 .right-s5 {
   transform: scale(1.2) !important;
   transform-origin: top left;
   transform: translateX(20%) !important;
   width: 60% !important;
 }

 .left-s3,.left-s5{
  transform: translateX(-20%) !important;
  
 }


  .title-s7-hairmake {
    font-size: 3.2vw;
  }

  .text-svg-s7 {
    height: 2.0vh;
    padding-left: 10%;
  }

  .content-wrapper-s8 {
    padding: 0 5%;
  }
  /* Shift left column 10% to the left */
  .left-s8 {
    transform: translateX(-15%) !important;
    padding-left: 8%;
    max-width: 90% !important;
    width: 90% !important;
  }
  /* Widen text to avoid wrapping */
  .text-s8 {
    width: 75% !important;
    height: auto !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: left !important;
    gap: 10px;
  }
  /* Enlarge numbers and titles */
  .number-s8 {
    font-size: 3vw;
  }
  .text-s8 .title-s8 {
    font-size: 1.8vw;
    font-feature-settings: "palt";
  }
  .text-s8 .body-s8 {
    font-size: 1.2vw;
    line-height: 1.8;
  }
  /* Make right image 20% larger */
  .image-s8 img {
    width: 35vw !important;
  height: auto !important;
  object-fit: contain !important;
  transform: translateX(-15%) !important;
  }

}