@charset "UTF-8";

/* 共通部分 */

* {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  overflow-x: hidden; /* 横方向のはみ出しを隠す */
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: clamp(0.875rem, 3vw, 1rem);
  font-style: normal;
  line-height: 1.85;
  color: #43321c;
  margin: 0;
  padding: 0;
}

.site-wrapper {
  overflow: clip; /* hiddenの代わりに clip を使うとstickyを殺さないことが多い */
  width: 100%;
}

.mincho {
  font-family: "ten-mincho-text", serif;
  font-weight: 200;
  font-style: normal;
  color: #43321c;
}

.serif {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.en-title {
  font-family: "Marcellus", serif;
  font-weight: 300;
  /* writing-mode: vertical-rl; */
  /* text-orientation: mixed; 英語が横に倒れた状態で縦に並ぶ */
  /* transform: rotate(0deg); 向きを調整したい場合 */
  font-size: 1.875rem;
  color: #43321c;
  letter-spacing: 0.03em;
  line-height: 1;
  margin: 0;
  padding: 0;
}

.en {
  font-family: "Akatab", sans-serif;
}

a {
  text-decoration: none;
}

/* ヘッダー */
.header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo_text img {
  width: 156.92px;
  height: auto;
}

.main-nav {
  display: none; /* PCではロゴを絶対に出さない */
}

.pc-nav ul {
  display: flex;
  justify-content: space-between;
  gap: 29.26px;
  list-style: none;
  margin: 0;
  padding: 0;
  letter-spacing: 0.08em;
  font-size: 0.875rem;
  transition: opacity 0.4s ease, visibility 0.4s ease; /* ふわっと消える設定 */
  opacity: 1;
  visibility: visible;
}

.pc-nav ul.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* クリックもできないようにする */
}

.pc-nav ul a,
.pc-nav ul a:visited {
  color: #43321c;
}

.pc-nav ul a:hover {
  color: #e83828;
}

.hamburger {
  display: none ; /* PCではMENUボタンを絶対に出さない */
}

@media screen and (max-width: 953px) {
  .pc-nav {
    display: none; /* スマホではPC用ナビゲーションを消す */
  }

  .main-nav {
    /* 以前のナビゲーションを隠すための設定 */
    position: fixed;
    top: 0;
    right: -100%; /* 画面の右外側に追い出す */
    width: 100%;
    height: 100vh;
    background-color: #f8f4ef;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9998;
    transition: right 0.5s ease;
    /* 既存の padding-left: 15% などが残っているとズレるのでリセット */
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .menu-logo {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease 0.2s; /* メニューが開いてから少し遅れてふわっと出す演出 */
    text-align: center;
    margin-bottom: 20px;
  }

  .menu-logo img {
    width: 100%; 
    height: auto;
  }

  /* MENUが開いた時だけ画面内に入れる */
  .main-nav.is-active {
    right: 0  !important; /* 画面の右端にぴったりつける */
  }

  .main-nav.is-active .menu-logo {
    display: inline;
    opacity: 1;
    visibility: visible;
  }
  
  /* リスト項目も縦並びに調整 */
  .main-nav ul {
    display: flex !important;    /* 横並びから縦並びに */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    list-style: none;
    padding: 0 !important;       /* PC版の余白（15%など）をリセット */
    margin: 0;
    width: 100%;
    opacity: 1 !important;
    visibility: visible !important;
    gap: 0;
  }

  .main-nav ul li {
    margin: 10px 0;             /* メニュー間の上下の間隔 */
    width: auto;
  }

  .main-nav ul li a {
    display: block;
    color: #43321c !important;   /* ★重要：文字色を濃い茶色に固定 */
    font-size: 1.25rem;           /* スマホで見やすい大きさ */
    text-decoration: none;
    font-family: "Marcellus", serif;
  }

  .hamburger-btn {
    margin-top: 20px !important;
  }

  .hamburger-btn .btn-detail span {
    font-size: 1rem;
  }

  .hamburger-btn .btn-detail {
    padding: 30px 65px; /* ボタン内の余白（上下 左右） */
  }

  .hamburger-contact-text {
    font-size: 0.875rem;
    color: #43321c;
    margin-top: 10px;
  }

  .hamburger {
    display: block !important; /* スマホでMENUボタンを表示 */
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    cursor: pointer;
  }

  .hamburger-text {
    font-family: "Akatab", sans-serif; /* サイトのフォントに合わせる */
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    color: #43321c;
    margin: 0;
    transition: all 0.3s;
  }

  /* 3. ハンバーガーボタン（MENU）のなめらかな変化を設定 */
  .hamburger {
    transition: opacity 0.4s ease, visibility 0.4s ease !important;
  }

  /* 4. フッターが見えたら、右上のMENUボタンをふわっと消して触れなくする */
  .hamburger.is-footer-visible {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* 5. 万が一メニューが開いたままフッターに到達した場合、メニュー画面も一緒に隠す（保険） */
  .main-nav.is-footer-visible {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  /* --- 初期状態 --- */
  opacity: 0;
  visibility: hidden; /* クリックなどを無効化 */
  box-sizing: border-box;
  padding: 0 3%;
  /* ふわっと出すための設定 */
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

/* JavaScriptでこのクラスがついた時 */
.header.show-header {
  opacity: 1;
  visibility: visible;
  transform: translateY(0); /* 定位置（一番上）に降りてくる */
}

/* 1. PC版・スマホ共通：ヘッダー全体のなめらかな変化を設定 */
.header {
  transition: opacity 0.8s ease, transform 0.8s ease, visibility 0.8s ease !important;
}

/* 2. PC版・スマホ共通：フッターが見えたらヘッダーごと上に隠す */
.header.is-footer-visible {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-100%) !important; /* 上にシュッと引っ込む */
}

/* ファーストビュー */
#fv {
  height: 910dvh;
  width: 100%;
  position: relative;
}

#fv::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 白色の膜。最後の0は不透明度（最初は透明） */
  /* background-color: rgba(255, 255, 255, 0); */
  z-index: 0; /* ビデオ(-1)より上で、文字(10)より下 */
  pointer-events: none; /* クリックを邪魔しない */
  transition: background-color 0.1s linear; /* 変化を滑らかに */
  background-color: var(--white-overlay, rgba(248, 244, 239, 0));
}

#video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -999;
  transition: filter 0.1s linear;
}

#hide {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh; /* dvhでも可 */
  z-index: 10; /* ビデオより上で、サードコンテンツより下の数値 */
  pointer-events: none; /* 下の要素の操作を邪魔しないように */
}

/* キャッチコピー */
.catch-copy {
  position: absolute;
  display: flex;
  flex-direction: column;
  left: 7%;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 1s ease;
}

.catch-copy h1 {
  font-size: clamp(1.3rem, 2.5vw, 2.5rem);
  letter-spacing: 0.05em;
  opacity: 1;
  white-space: nowrap; /* 文字が途中で改行されないようにする */
  color: #43321C;
  display: inline-block;
  background-color: rgba(248, 244, 239, 0.7);
  padding: 0px 10px;
  line-height: 1.8;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  margin: 5px 0;
  width: max-content; /* 中身の文字の最大幅に合わせる命令 */
}


/* 隠れる時の状態 */
.catch-copy.hide {
  opacity: 0;
  /* 重要：配置のための transform は維持して、移動させない */
  pointer-events: none;
}

/* 大きいテキストロゴ */
.logo_text2 {
  position: absolute;
  top: 5%;
  left: 7%;
  opacity: 1;
  transition: opacity 1s ease;
  filter: drop-shadow(0px 0px 15px rgba(248, 244, 239, 0.5));
}

/* 隠れる時の状態 */
.logo_text2.hide {
  opacity: 0;
  pointer-events: none;
}

.logo_text2 img {
  width: 278px;
  height: auto;
}

#second-copy {
  display: flex;
  justify-content: center; /* 左右中央 */
  align-items: center; /* 上下中央 */
  height: 100vh; /* 画面1杯分の高さを持たせる */
}

.sub-copy {
  /* 初期状態は透明 */
  opacity: 0;
  transition:
    opacity 2s ease,
    transform 2s ease;
  transform: translate(-50%, calc(-50%));

  /* 固定位置にする場合（動画の上で入れ替えたい場合） */
  position: fixed;
  top: 50%;
  left: 50%;
  width: fit-content;
  height: 0; /* 高さを0にして、下の要素（サード）を上に詰める */
  /* 文字の設定 */
  font-size: clamp(1.2rem, 2vw, 1.875rem);
  color: #faf8f7;
  letter-spacing: 0.05em;
  line-height: 1.89;
  margin: 0;
  pointer-events: none;
  z-index: 50; /* 他の要素に隠されないように */
  white-space: nowrap; /* 文字が途中で改行されないようにする */
}

.sub-copy.show {
  opacity: 1;
  transform: translate(-50%, -50%);
}

/* 退出状態 */
.sub-copy.exit {
  opacity: 0;
}

/* 3つ目のコンテンツ全体のレイアウト */
.third-content {
  position: sticky; /* 固定してスクロールで見せる */
  top: 0%;
  width: 100%;
  height: 100vh;
  /* display: flex; */
  /* align-items: center; */
  opacity: 0;
  transition: opacity 2s ease;
  pointer-events: none;
  z-index: 100 !important; /* ビデオより確実に大きい数字 */
  /* visibility: hidden; */
  /* margin-top: -50vh; */
}

/* --- 追加：表示された時の状態 --- */
.third-content.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* --- 右側：メッセージのスタイル --- */
.right-panel {
  width: 100%;
  height: 100%;
  display: flex;
  /* flex: 1; */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 auto;
  box-sizing: border-box;
  position: relative;
  z-index: 101;
}

.message-block {
  margin-bottom: 0.6rem; /* ブロックごとの間隔を少し広げてゆったりさせる */
  opacity: 0; /* 最初は隠す */
  transition:
    opacity 2s ease,
    transform 2s ease;
  z-index: 101 !important;
}

.right-panel p {
  color: #faf8f7;
  line-height: 2.11; /* スクリーンショットに合わせたゆったりした行間 */
  font-size: clamp(1rem, 3vw, 1.125rem);
  letter-spacing: 0.05em;
  text-align: center; /* 左揃え */
}

/* JSで付与する表示用クラス */
.message-block.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.message-block,
.third-content {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: opacity, transform;
}

@media (max-width: 767px) {
  /* 親要素の重なり順を整理 */
  #fv {
    z-index: 1;
    height: 620dvh; /* スマホでの高さを調整 */
    overflow: visible !important;
  }

  /* キャッチコピー */
  .catch-copy {
    position: absolute;
    left: 5%;
    top: 60%;
    transform: translateY(-50%);
  }

  /* 隠れる時の状態 */
  .catch-copy.hide {
    opacity: 0;
    /* 重要：配置のための transform は維持して、移動させない */
    pointer-events: none;
  }

  /* 大きいテキストロゴ */
  .logo_text2 {
    position: absolute;
    bottom: 5%;
    left: 5%;
    opacity: 1;
    transition: opacity 1s ease;
  }

  /* 隠れる時の状態 */
  .logo_text2.hide {
    opacity: 0;
    pointer-events: none;
  }

  .logo_text2 img {
    width: 326px;
    height: auto;
  }

  .sub-copy {
    text-align: center;
  }

  /* サードコンテンツを画面の最前面に固定 */
  .third-content {
    position: -webkit-sticky; /* iOS対策 */
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    z-index: 9999; /* 他のすべての要素（ヘッダー以外）より上にする */
    display: flex;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease;
  }

  /* クラスがついたら強制表示 */
  .third-content.active {
    opacity: 1;
    visibility: visible;
    /* テスト用に赤色にしてみる。表示されたら元の茶色 #43321c に戻す */
    color: red;
    pointer-events: auto;
  }

  /* 右側パネルが消えないようにする */
  .right-panel {
    opacity: 1;
    visibility: visible;
    display: flex;
    width: 100%;
  }

  /* メッセージが白飛びして見えないのを防ぐ */
  .right-panel p {
    color: #faf8f7;
  }

  /* テキストが確実に見えるように色を濃く、重なりを上に */
  .message-block {
    z-index: 10000;
  }

  .message-block.show {
    opacity: 1;
    transform: translateY(0);
  }

  .sp-br {
    display: block;
  }

  /* 動画の膜（overlay）が文字を隠さないように調整 */
  #fv::after {
    z-index: 5;
  }
}

main {
  position: relative;
  z-index: 200; /* third-content(z-index: 100) より大きくする */
  background: #f8f4ef; /* ★重要：背景色を指定しないと下の動画や文字が透けます */
  height: auto;
  width: 100%;
  overflow: hidden;
}

/* about --------------------------------------------------------*/
#about {
  height: auto;
  width: 100%;
  position: relative;
  padding-top: clamp(80px, 15vw, 200px);
}

#two-circle {
  width: 100%;
  height: auto;
  padding-top: 80px;
  padding-bottom: 100px;
}

.left-panel {
  display: flex;
  /* flex: 1;  */
  height: 100%; /* 親の100vhいっぱいの高さを持たせる */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 auto;
  opacity: 1;
  transition:
    opacity 1.5s ease,
    transform 1.5s ease;
}

/* 表示された時 */
/* .left-panel.show { */
/* opacity: 1; */
/* transform: translateY(0); */
/* } */

/* 上下のテキスト */
.intro-text,
.outro-text {
  font-size: clamp(1rem, 2vw, 1.25rem);
  margin: 0;
  letter-spacing: 0.05em;
  color: #43321c;
  /* 円の中央から少し左にずらす設定 */
  /* transform: translateX(-20px); */
  /* もしくは margin-right: 40px; でも寄せられます */
}

/* 円を並べるコンテナ */
.venn-diagram {
  display: flex;
  margin: 20px 0;
}

/* 円の共通スタイル */
.circle {
  width: clamp(180px, 20vw, 280px);
  height: clamp(180px, 20vw, 280px);
  border: 1px solid rgba(63, 61, 61, 0.6);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.4rem;
  background-color: rgba(255, 255, 255, 0.1); /* ほんのり色をつける場合 */
  transition: all 0.5s ease;
}

/* 円を重ねる設定 */
/* .left-circle { */
  /* margin-right: -5%; ここで重なり具合を調整 */
/* } */

/* .right-circle { */
  /* margin-left: -5%; ここで重なり具合を調整 */
/* } */

/* 円の中の文字調整 */
.circle span {
  line-height: 1.5;
  font-size: clamp(1rem, 2vw, 1.25rem);
  letter-spacing: 0.07em;
  line-height: 1.5;
  color: #43321c;
}

#about-container {
  width: 100%;
  position: relative;
  /* コンテンツが広がりすぎないように最大幅を設定（Figma 1440px） */
  /* margin: 0 auto; */
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 1440px; /* 全体の最大幅 */
  height: auto;
  margin: 0 auto;
  /* padding: 40px 5%; */
  /* gap: 40px; */
}

.about-group {
  /* position: relative; */
  flex: 1;
  flex-shrink: 0; /* タイトルが横に潰れないように固定 */
  padding: 150px 0% 60px 25%; /* 画像がはみ出すための遊び */
}

.title-unit {
  display: flex;
  align-items: center;
  flex-shrink: 0; /* タイトルが潰れないように */
  padding-left: 3%;
  width: 100%; /* ★追加：これで右端まで領域を確保する */
  box-sizing: border-box; /* ★追加：パディングを含めた幅計算にする */
}

.title-unit .title-line {
  display: flex; /* 文字と線を横並びにする */
  align-items: center; /* 文字と線の上下中央を揃える */
  flex-grow: 1; /* ★変更：width: 100%よりflex-growの方が確実です */
  gap: 30px; /* 文字と線の間の隙間 */
}

.title {
  font-family: "Marcellus", serif;
  font-size: clamp(1.25rem, 2vw, 1.875rem); /* スマホで小さく、PCで大きく */
  font-weight: 200;
  color: #43321c;
  white-space: nowrap; /* 文字が途中で改行されないようにする */
  letter-spacing: 0.04em;
  line-height: 1;
}

.title-unit .title-line::after {
  content: "";
  flex: 1; /* ★重要：右側の余っているスペースをすべて線にする */
  height: 1px; /* 線の太さ */
  background-color: #aea395;
}

/* .ja-title { */
/* writing-mode: vertical-rl; 縦書き・右から左へ改行 */
/* text-orientation: upright; 文字を正位置（上向き）に保つ */
/* letter-spacing: 0.1em; 縦書きは少し字間を空けると綺麗です */
/* font-size: 0.875rem; */
/* margin: 0; */
/* padding: 0; */
/* } */

/* .red { */
/* color: #e83828; */
/* } */

.bg-image {
  position: absolute; /* 浮かせる */
  z-index: 1; /* テキスト（2）より下に */
  width: 40%; /* グループの幅に対する割合（レスポンシブ対応） */
  height: auto;
  /* opacity: 0.8; 重なりを見せるために少し薄くしても良い */
}

.about-pic {
  /* display: block; margin: auto を効かせるために必要 */
  /* margin-left: auto; 左側の余白を自動（最大）にする ＝ 右に寄る */
  /* margin-right: 0; 右側はくっつける */
  /* margin-top: 20px; */
  top: 0; /* 上にくっつける */
  left: auto; /* 左側は自動（最大）にする ＝ 右に寄る */
  right: 0;
  width: 50%;
  max-width: 700px;
  height: auto;
  object-fit: cover;
}

.about-content {
  display: flex;
  flex-direction: row;
  /* justify-content: space-between; */
  gap: clamp(3.125rem, 15vw, 12.5rem);
  margin-top: 50px;
  margin-bottom: 150px;
}

.sub-title {
  /* margin-top: 10%; */
  /* padding-left: 5%; 左側に寄せる */
  /* position: relative; */
  z-index: 2; /* 画像より前面に出す */
  font-size: clamp(1.6125rem, 3vw, 2.375rem); /* スマホで小さく、PCで大きく */
  letter-spacing: 0.3em;
  line-height: 1.7;
  /* margin-bottom: 70px; */
  color: #43321c;
  /* margin-top: 50px; */
  margin: 0;
  /* margin-right: auto; 右側を自動（最大）にして左へ押し出す */
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.about-pic2 {
  width: 30%;
  max-width: 300px;
  height: auto;
  /* padding-left: clamp(3%, 5%, 13%); */
  /* padding-top: 80px; */
  aspect-ratio: auto;
  object-fit: contain;
  /* --- 修正ポイント2：親のFlexの影響をリセットする --- */
  /* align-self: flex-start; 親の「stretch（引き伸ばし）」に逆らう */
  bottom: 0; /* 下にくっつける */
  left: 0;
}

.about-pic3 {
  width: 30%;
  max-width: 300px;
  height: auto;
  left: 15%;
  bottom: -5%;
}

.text-box {
  display: flex;
  flex-direction: column;
  /* flex: 1; */
  width: 50%;
  max-width: 720px;
  padding-right: 5%;
  /* padding-left: 3%; */
  padding-top: 600px;
}

.text1 {
  font-size: clamp(0.875rem, 3vw, 1rem);
  letter-spacing: 0.03em;
  line-height: 2.02;
  /* margin-bottom: 35px; */
  color: #43321c;
}

.text2 p {
  font-size: clamp(0.875rem, 3vw, 1rem);
  margin-bottom: 0;
  margin-top: 0;
  color: #43321c;
  line-height: 2.02;
}

.text2 :nth-child(1) {
  margin-top: 16px;
}

.bold {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  font-size: clamp(0.875rem, 3vw, 1rem);
  line-height: 2.02;
  color: #43321c;
  margin: 0.3em 0em;
}

/* .bold span::before { */
/* content: "●"; */
/* font-size: clamp(0.6rem, 3vw, 0.8rem); */
/* text-align: center; */
/* color: #43321c; */
/* margin-right: 5px; */
/* } */

/* PCでは改行しない */
.sp-br {
  display: none;
}

.btn {
  margin-top: 40px;
}

.btn-detail {
  display: inline-flex; /* 文字と画像を横並びにする */
  align-items: center; /* 上下の中央を揃える */
  justify-content: center;
  padding: 30px 65px; /* ボタン内の余白（上下 左右） */
  border: 1px solid #595757; /* 赤い枠線 */
  border-radius: 50px; /* カプセル型 */
  color: #43321c; /* 文字の色 */
  text-decoration: none; /* 下線を消す */
  transition: opacity 0.4s ease; /* ホバー時の動きを滑らかに */
  white-space: nowrap; /* 文字が途中で改行されないようにする */
}

.btn-detail span {
  font-size: 1rem;
  letter-spacing: 0.1em;
  white-space: nowrap; /* 文字が途中で改行されないようにする */
}

/* 親要素を抜いて、ボタンのクラスだけで指定する */
.btn-detail .arrow {
  width: 18px; /* !important をつけて他の干渉を断ち切る */
  height: auto;
  margin-left: 20px;
  display: inline-block; /* サイズを確実に適用させる */
}

/* マウスを乗せた時の演出（お好みで） */
.btn-detail:hover {
  cursor: pointer;
  /* opacity: 0.5; 少し薄くする */
}

.btn-detail:hover img {
  transform: translateX(8px);
}

@media (max-width: 768px) {
  #about {
    padding-top: 30%;
  }
  #about-container {
    flex-direction: column; /* 縦並びに変更 */
  }

  .bg-image {
    position: static;
  }

  .about-pic {
    /* タブレット〜スマホでは、画像の位置を中央に戻すなど
       デザインを簡略化する方が綺麗に見える場合が多いです */
    /* margin-left: auto;
    margin-right: auto; */
    /* margin-top: 20px; マイナスマージンを解除 */
    margin-left: auto; /* 左側を自動にして右へ寄せる */
    padding-right: 0;
    width: 80%; /* スマホの画面幅に対して90%の大きさに調整 */
    order: 0;
  }

  .about-group {
    padding: 15% 0 6% 0; /* 画像がはみ出すための遊び */
  }

  .sub-title {
    text-align: left;
    padding-left: 5vw;
    /* margin-bottom: 20px; */
    font-size: 1.6125rem; /* スマホ用に少し小さく */
    letter-spacing: 0.1em;
    /* margin: 60px auto 20px auto; 上下のマージンを調整して中央寄せ */
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    text-align: left;
    order: 1;
  }

  .about-content {
    display: flex;
    flex-direction: column;
    /* align-items: flex-start; これで子要素が左に寄る */
    /* padding: 0 0px 0 5%; 画面端の余白 */
    margin-top: 20px;
    margin: 0 auto;
  }

  .text-box {
    order: 2;
    width: 100%;
    text-align: left; /* 文字自体の並び */
    padding-top: 0px;
  }

  .text1,
  .text2 {
    padding-left: 5vw;
  }

  .text2 p:last-child {
    line-height: 2.02;
  }

  /* スマホの時だけ改行を発動させる */
  .sp-br {
    display: block;
  }

  .sp-br-non {
    display: none;
  }

  .about-pic2 {
    width: 50%; /* スマホでは横幅いっぱい、または少し小さめに */
    /* max-width: none; PC版の制限を解除 */
    margin-right: auto; /* ★左側を自動にして右へ寄せる */
    padding-top: 15%;
    order: 3;
  }

  .about-pic3 {
    width: 50%; /* スマホ横幅いっぱい、または少し小さめに */
    /* max-width: none; PC版の制限を解除 */
    margin-left: 40%; 
    margin-top: -13%;
    order: 4;
  }

  /* 5. ボタンの調整 */
  .btn {
    display: flex;
    justify-content: center; /* ボタン自体を左に置く */
    margin-top: 50px;
  }

  .btn-detail {
    padding: 25px 55px; /* ボタン内の余白（上下 左右） */
  }

  .btn-detail span {
    font-size: 0.875rem;
    white-space: nowrap; /* 文字が途中で改行されないようにする */
  }
}

/* open ---------------------------------------------------------------------*/
#open {
  height: auto;
  width: 100%;
  position: relative;
  padding-top: 50px;
  background-color: #fff;
  margin-top: clamp(80px, 15vw, 200px);
}

.title-unit {
  overflow: hidden;
}

.title-unit .line-title {
  position: relative;
  padding-left: 100px; /* 線の長さ＋余白分 */
}

.title-unit .line-title::before {
  content: "";
  position: absolute;
  left: -100vw; /* 画面の外（左側）へ思い切り伸ばす */
  right: calc(100% - 80px); /* 文字から80px手前で止める */
  top: 50%;
  height: 1px;
  background-color: #aea395;
}
/* ※この場合、親要素に overflow: hidden; が必要です */

#open-container {
  width: 100%;
  max-width: 1440px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 0 auto;
  height: auto;
  /* border-radius: 50px; */
  padding-bottom: 80px;
  /* background-color: #fff; */
}

.calendar-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

/* 窓の設定 */
.calendar-window {
  width: 100%; /* 画面幅（親要素）に対して100%にする */
  max-width: 954px; /* PCでの最大サイズは維持 */
  height: auto; /* 高さを固定せず、中身の画像に合わせる */
  aspect-ratio: 954 / 650; /* ★重要：画像の縦横比をブラウザに教える */
  overflow: hidden;
  position: relative;
  /* display: block; 念のため追加 */
}

/* 画像を縦に並べる廊下 */
#calendar-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.calendar-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 45px;
  justify-content: center;
  z-index: 3;
  transform: translateX(50px);
}

.this-month,
.next-month {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.this-month img {
  transform: rotate(-90deg);
}

.next-month img {
  transform: rotate(90deg);
}

.calendar-nav img {
  width: 15px;
  height: auto;
}

.nav-month,
.nav-month img {
  color: #aea395; /* 薄いグレー */
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

/* ★アクティブ（現在表示中）のスタイル */
.nav-month.active,
.nav-month img .active {
  color: #43321c; /* 濃い色 */
  transform: scale(1.1); /* ほんの少し大きくするとより分かりやすい */
}

.this-month img:hover,
.next-month img:hover {
  cursor: pointer; /* ボタンのホバー時（クリックできる感を出す） */
}

.calendar-img {
  position: absolute; /* 画像を同じ位置に重ねる */
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
  /* ★ふわっとさせる設定 */
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 1; /* 通常は下 */
  pointer-events: none; /* 重なっている下の画像がクリックの邪魔をしないように */
}

/* ★activeクラスがついた時だけ見える */
.calendar-img.active {
  opacity: 1;
  z-index: 2; /* 表示される月を上に持ってくる */
  pointer-events: auto;
}

.schedule {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
  z-index: 3;
  transform: translateX(-40px);
}

.schedule-text {
  background-color: #e7e1d9;
  padding: 40px;
  border-radius: 28px;
  /* max-width: 352px; */
  height: auto;
  box-sizing: border-box;
}

.schedule-text .small {
  font-size: clamp(0.6875rem, 3vw, 0.9375rem);
  letter-spacing: 0.08em;
  color: #a7710c;
  margin: 0;
}

.openhour {
  font-size: clamp(1.25rem, 3vw, 1.5625rem);
  letter-spacing: 0.015em;
  margin: 0;
}

.openhour span {
  font-size: 1rem;
  letter-spacing: 0.015em;
  padding-left: 5px;
}

.annotation {
  font-size: 0.8125rem;
  letter-spacing: 0.005em;
  line-height: 1.81;
  margin: 0;
}

.open-access .small {
  margin-top: 30px;
  margin-bottom: 3px;
}

.open-access p {
  margin: 0;
}

.map {
  align-self: baseline; /* 画像の位置を下に寄せる */
}

.open-access img {
  width: 15px;
  height: auto;
  color: #988772;
}

.open-access span {
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  padding-left: 5px;
  color: #43321c;
}

.contact-area {
  text-align: center;
}

.contact-area p {
  margin: 0;
}

.contact-area .btn {
  margin-top: 8px;
}

.contact-area .btn-detail {
  padding: 25px 60px;
  gap: 20px;
}

.contact-area .btn-detail span {
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  transform: translateX(15px);
}

@media (max-width: 1439px) {
  .calendar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1024px;
  }

  /* 窓の設定 */
  .calendar-window {
    order: -1;
    /* transform: translateX(10px); */
  }

  .calendar-nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 45px;
    transform: none;
  }

  .this-month,
  .next-month {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
  }

  .this-month img {
    transform: rotate(-180deg);
  }

  .next-month img {
    transform: rotate(0deg);
  }

  .schedule {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /* gap: 50px; */
    margin-top: 50px;
    padding: 0 10vw;
    transform: none;
    width: 100%;
  }

  .schedule-text {
    /* flex: 1; */
    /* padding: 40px 60px; */
    margin-left: clamp(10px, 10vw, 120px);
    white-space: nowrap; /* 文字が途中で改行されないようにする */
  }

  .contact-area {
    flex: 1;
    margin: auto;
  }
}

@media (max-width: 768px) {
  #open {
    margin-top: 30%;
  }
  
  .calendar-wrapper {
    margin-top: 30px;
  }

  .schedule {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin-top: 30px;
    transform: none;
  }

  .title-unit .line-title {
    position: relative;
    padding-left: 50px; /* 線の長さ＋余白分 */
  }

  .title-unit .line-title::before {
    content: "";
    position: absolute;
    left: -100vw; /* 画面の外（左側）へ思い切り伸ばす */
    right: calc(100% - 40px); /* 文字から80px手前で止める */
    top: 50%;
    height: 1px;
    background-color: #aea395;
  }

  .calendar-img {
    width: 100%;
    height: auto;
    /* これがトリミングの魔法 */
    object-fit: cover;
    transform: scale(
      1.2
    ); /* 画像を少し大きくして、トリミングされる部分を増やす */
  }

  #calendar-track {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .calendar-nav {
    margin-top: 20px;
    transform: none;
  }

  .nav-month {
    font-size: 0.75rem;
  }

  .schedule-text {
    margin: 0 5vw;
  }

  .open-access p {
    font-size: 1rem;
  }

  .contact-area {
    flex: 1;
    margin: auto;
  }
}

/* instagram ------------------------------------------------------------------------*/
#instagram {
  width: 100%;
  position: relative;
  margin-top: clamp(80px, 15vw, 200px);
}

#instagram-container {
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  text-align: center;
  padding: 4vw 0;
  border-top: solid 1px #aea395;
  border-bottom: solid 1px #aea395;
}

.inst-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

.instagram-icon {
  width: 44px;
  height: auto; /* 縦横比を崩さないために必須 */
  color: #43321c;
}

.inst-title h1 {
  font-family: "Marcellus", serif;
  font-weight: 300;
  font-size: 3.25rem;
  letter-spacing: 0.08em;
  color: #43321c;
  /* margin-top: -15px; */
  margin-bottom: 0;
  transform: translateY(0px);
}

#instagram-container p {
  letter-spacing: 0.03em;
  /* margin-top: -10px; */
  margin: 35px 5%;
}

.insta-scroll-container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  /* margin-top: 30px; */
  /* overflow-x: auto; 横スクロールを有効にする */
  padding-bottom: 10px; /* スクロールバーと画像の間に余白を作る */
}

.instagram-btn {
  margin-top: 25px;
}

@media screen and (max-width: 1300px) {
  .inst-title h1 {
    font-size: 2.1375rem;
  }

  .instagram-icon {
    width: 35px;
    height: auto; /* 縦横比を崩さないために必須 */
    color: #43321c;
  }
}

@media screen and (max-width: 1024px) {
  /* --- 追加：親要素の制限を解除 --- */
  #instagram-container {
    max-width: 100% !important; /* 1100pxの制限を解除 */
    overflow: hidden; /* コンテナからはみ出した分を管理 */
    display: block !important; /* flexによる中央固定を解除 */
    padding-left: 0 !important;
    padding-right: 0 !important;
    border: none !important;
  }

  /* --- 修正：スクロールコンテナ --- */
  .insta-scroll-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: scroll !important; /* autoより強力なscrollを指定 */
    scroll-snap-type: x mandatory;
    padding-bottom: 20px !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;

    /* 重要：親の幅を無視して子を並べる */
    width: 100% !important;
    min-width: 100% !important;
  }

  /* 左右のスペーサー */
  .insta-scroll-container::before,
  .insta-scroll-container::after {
    content: "";
    flex: 0 0 15vw !important;
    min-width: 15vw !important; /* 確実に幅を確保 */
    display: block;
  }

  /* 各投稿の箱 */
  .insta-item {
    flex: 0 0 70vw !important;
    min-width: 70vw !important; /* 縮ませないために追加 */
    max-width: 70vw !important;
    scroll-snap-align: center;
    padding: 0 10px;
    box-sizing: border-box;
    position: relative;
  }

  /* Instagram本体 */
  .insta-item blockquote.instagram-media,
  .insta-item iframe {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .inst-title {
    justify-content: center !important; /* タイトルも中央に */
  }
}

@media screen and (max-width: 500px) {
  .inst-title h1 {
    font-size: 1.875rem;
  }

  .instagram-icon {
    width: 27px;
    height: auto; /* 縦横比を崩さないために必須 */
    color: #43321c;
  }
}

/* pp -----------------------------------------------------------------*/
#pp {
  width: 100%;
  margin-top: clamp(80px, 15vw, 200px);
  box-sizing: border-box;
}

.pp-container {
  width: 100%;
  max-width: 1440px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 0;
  margin: 0 auto;
}

.profile-content,
.price-content {
  /* flex: 1; */
  max-width: 50%; /* 写真の最大サイズを指定 */
}

.price-content {
  padding-top: 100px;
}

.image-wrapper {
  position: relative; /* 子要素（mask, text）の基準点にする */
  width: fit-content; /* 画像のサイズに合わせる */
  overflow: hidden; /* 角を丸くした時にはみ出さないようにする */
  padding: 0;
}

/* 画像自体の設定 */
.image-wrapper img {
  width: 100%; /* 親要素の幅に合わせる */
  height: auto;
  display: block;
  z-index: -1;
}

/* フィルム（曇らせる）の設定 */
.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* 画像（0）より上に */
  background-color: rgba(
    216,
    212,
    212,
    0.3
  ); /* 黒ではなく、ごく薄い白（0.1）にする */
  backdrop-filter: blur(2px); /* ここでガラスのようなぼかし（3px）をかける */
}

.text-unit {
  position: absolute;
  top: 0;
  left: 30px;
  z-index: 2; /* フィルム（1）より上に */
  text-align: left; /* 中身を中央揃えに */
  padding-top: 24px;
  padding-bottom: 10px;
  border-left: solid 1px #595757;
  background-color: rgba(248, 244, 239, 0.8);
}

/* --- 文字色の調整 --- */
/* 写真の上に置くため、文字色は白（#fff）に統一するのがおすすめです */
.text-unit p {
  color: #43321c;
  font-size: clamp(0.875rem, 2.5vw, 1.0625rem);
  letter-spacing: 0.08em;
  line-height: 1.61;
  padding-left: 14px;
  margin-top: 8px;
  margin-bottom: 0;
  /* text-shadow: 1px 1px 2px rgba(65, 62, 62, 0.3); */
}

.text-unit h1 {
  color: #43321c;
  font-size: clamp(1.25rem, 2.5vw, 1.875rem);
  font-family: "Marcellus", serif;
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 14px;
  /* text-shadow: 1px 1px 2px rgba(65, 62, 62, 0.3); */
}

.pp-btn {
  position: absolute;
  bottom: 20px;
  right: 40px; /* 右下に配置 */
  z-index: 2; /* フィルム（1）より上に */
}

.pp-btn .btn-detail {
  border: none;
  padding: 0;
  text-decoration: none; /* 下線を消す */
  transition: all 0.3s ease; /* ホバー時の動きを滑らかに */
}

/* 親要素を抜いて、ボタンのクラスだけで指定する */
.pp-btn .btn-detail .arrow {
  border: solid 1px #595757;
  border-radius: 50px;
  padding: 30px;
  width: 100%;
  height: auto;
  /* margin-left: 15px; */
  display: inline-block; /* サイズを確実に適用させる */
  background-color: rgba(248, 244, 239, 0.4);
}

/* マウスを乗せた時の演出（お好みで） */
.pp-btn .btn-detail:hover {
  cursor: pointer;
}

.pp-btn .btn-detail:hover img {
  transform: translateX(8px);
}

@media screen and (max-width: 1023px) {
  .pp-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin: 0 auto;
  }

  .profile-content,
  .price-content {
    /* flex: 1; */
    max-width: 80%; /* 写真の最大サイズを指定 */
  }

  .price-content {
    padding-top: 0px;
  }
}

@media screen and (max-width: 500px) {
  .profile-content,
  .price-content {
    /* flex: 1; */
    max-width: 90%; /* 写真の最大サイズを指定 */
  }

  .text-unit {
    top: 0;
    left: 10px;
    padding-top: 10px;
  }

  .text-unit p {
    margin-top: 5px;
    margin-bottom: 0;
    /* text-shadow: 1px 1px 2px rgba(65, 62, 62, 0.3); */
  }

  .pp-btn {
    bottom: 10px;
    right: 15px; /* 右下に配置 */
  }

  .pp-btn .btn-detail .arrow {
    border: solid 1px #595757;
    border-radius: 50px;
    padding: 15px;
    width: 100%;
    height: auto;
    /* margin-left: 15px; */
    display: inline-block; /* サイズを確実に適用させる */
  }
}

/* FAQ -----------------------------------------------------------*/
#FAQ {
  width: 100%;
  position: relative;
  margin-top: clamp(80px, 15vw, 200px);
}

.background {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0; /* ★重要：下端を親要素の底に固定 */
  width: auto;
  max-width: none;
  height: 100%;
  object-fit: cover; /* ★重要：縦に伸びても画像が歪まないようにする */
  object-position: center top; /* 画像のどの部分を基準にするか */
  z-index: -1; /* 背景は一番下に */
}

#faq-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
  padding-top: 150px;
  padding-bottom: 180px;
}

#faq-container .title-unit {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 0;
  margin-bottom: 36px;
}

#faq-container .title-unit h1 {
  font-family: "Marcellus", serif;
  font-weight: 300;
  font-size: clamp(1.25rem, 2.5vw, 1.875rem);
  letter-spacing: 0.03em;
  color: #43321c;
  margin-bottom: 0;
}

#faq-container .title-unit p {
  margin-top: 5px;
  margin-bottom: 0;
}

/*アコーディオン全体*/
.accordion-area {
  list-style: none;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 5vw;
  box-sizing: border-box;
}

/* .accordion-area li {
  margin: 10px 0;
} */

.accordion-area section {
  border-bottom: 1px solid #aea395;
}

/*アコーディオンタイトル*/
.question {
  position: relative; /*+マークの位置基準とするためrelative指定*/
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  transition: all 0.5s ease;
  padding: 35px 70px 35px 40px;
  margin: 0;
}

.question h3 {
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  font-weight: 400;
  color: #424242;
  margin: 0;
}

.QA {
  font-family: "Marcellus", serif;
  font-weight: 300;
  color: #988772;
  font-size: 1.4375rem;
  /* margin: 0 10px 0 0; */
  display: inline-block; /* 余白を正しく反映させるため */
  vertical-align: middle; /* 文字の高さ中央を揃える */
  /* 記号が潰れないように幅を固定（必要に応じて調整してください） */
  flex-shrink: 0;
  width: 1.5em; /* Aの文字幅を確保 */
  margin: 0; /* 先ほど設定した余白をリセット */
  /* Qの文字と高さを合わせるための微調整 */
  display: inline-block;
  line-height: 1.2;
}

.Q {
  transform: translateY(0px); /* マイナス値で上に移動 */
}

.A {
  transform: translateY(2px);
}

/*アイコンの＋と×*/
.question::before,
.question::after {
  position: absolute;
  content: "";
  width: 15px;
  height: 2px;
  background-color: #333;
  top: 50%;
  transform: translateY(-50%); /* 垂直方向の真ん中に固定 */
  right: 30px; /* 右端からの距離 */
}

.question::before {
  top: 48%;
  right: 50px;
  transform: rotate(0deg);
}

.question::after {
  top: 48%;
  right: 50px;
  transform: rotate(90deg);
}

/*　closeというクラスがついたら形状変化　*/
.question.close::before {
  transform: rotate(45deg);
}

.question.close::after {
  transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.box {
  display: none; /*はじめは非表示*/
  margin: -28px 60px 7px 40px;
  padding: 5px 0; /* 左右のpaddingは0にしてmarginで位置を決める */
}

.box p {
  /* --- ここが重要：Flexboxで横に並べる --- */
  display: flex;
  align-items: flex-start; /* 上揃えにする */
  text-align: justify;
  font-size: 1rem;
  line-height: 1.85;
  letter-spacing: 0.03em;
}

#faq-container .faq-text {
  text-align: center;
  margin: 60px 10px 23px 10px;
}

#faq-container .btn {
  margin: 0 auto;
}

@media screen and (max-width: 475px) {
  .question {
    padding: 35px 30px 35px 0px;
  }

  .question::before,
  .question::after {
    right: 0px; /* 右端からの距離 */
  }

  .box {
    display: none; /*はじめは非表示*/
    margin: -28px 0px 7px 0px;
    padding: 5px 0; /* 左右のpaddingは0にしてmarginで位置を決める */
  }
}

/* reviews --------------------------------------------------------*/
#reviews {
  width: 100%;
  position: relative;
  padding-top: clamp(80px, 15vw, 200px);
}

.reviews-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 5vw;
}

.reviews-title-unit {
  text-align: center;
}

.title-with-lines {
  display: flex; /* 中身を横並びにする */
  align-items: center; /* 垂直方向の中央に揃える */
  text-align: center;
  color: #43321c;
  font-size: clamp(1.25rem, 2.5vw, 1.875rem);
  font-family: "Marcellus", serif;
  font-weight: 300;
  letter-spacing: 0.03em;
  margin-bottom: 0; /* 画像に近い色 */
  width: 80%;
}

.title-with-lines::before,
.title-with-lines::after {
  content: ""; /* 疑似要素に必須 */
  flex-grow: 1; /* 可能な限り横に広がる */
  height: 1px; /* 線の太さ */
  background-color: #aea395; /* 線の色（FAQのボーダー色に合わせると統一感が出ます） */
}

/* テキストとラインの間の余白を調整 */
.title-with-lines::before {
  margin-right: 20px;
}

.title-with-lines::after {
  margin-left: 20px;
}

.reviews-text {
  margin-top: 10px;
  text-align: center;
}

.reviews-container h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.875rem);
  font-weight: 300;
  letter-spacing: 0.03em;
  color: #0a1d0f;
  margin: 50px auto;
}

/* footer -----------------------------------------------------------*/
footer {
  position: relative;
  background-color: #f8f4ef;
  width: 100%;
  height: auto;
  /* min-height: 1500px; */
  padding-top: clamp(80px, 15vw, 200px);
  padding-bottom: 4px;
  z-index: 100;
}

.end-nav {
  display: flex;
  justify-content: flex-end;
  gap: 29.26px;
  list-style: none;
  margin: 0;
  padding: 0;
  letter-spacing: 0.08em;
  font-size: 0.875rem;
  order: 0;
}

.end-nav a,
.end-nav a:visited {
  color: #43321c;
}

.end-nav a:hover {
  color: #e83828;
}

.footer-container {
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
  padding: 0 3vw;
}

.footer-pic {
  /* position: absolute;
  bottom: 0;
  right: 0; */
  display: flex;
  align-self: flex-end;
  margin-right: -5vw;
  width: 85%;
  height: auto;
  object-fit: cover; /* ★重要：縦に伸びても画像が歪まないようにする */
  order: 1;
  /* z-index: 0; 背景は一番下に */
}

.sp-only {
  display: none;
}

.footer-info {
  position: absolute;
  bottom: 0;
  left: 5vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 473.58px;
  padding: 74px 90px;
  /* margin-top: 110px; */
  background-color: #fff;
  border-radius: 71px;
  z-index: 1;
  box-sizing: border-box;
}

.footer-info .footer-logo {
  width: 100%;
  max-width: 306px;
  height: auto;
  margin: 0;
}

.access {
  text-align: left;
  margin-top: 30px;
  margin-bottom: 25px;
}

.access p:nth-child(1) {
  margin-bottom: 12px;
}

.access p {
  margin: 0;
}

.map {
  align-self: baseline; /* 画像の位置を下に寄せる */
}

.access img {
  width: 15px;
  height: auto;
  color: #988772;
  transform: translateY(2px);
}

.access span {
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  padding-left: 5px;
  color: #43321c;
}

.footer-time {
  text-align: left;
  margin-bottom: 25px;
}

.footer-time p {
  margin: 0px;
}

.footer-contact-text {
  margin: 7px auto 0 auto;
}

.footer-info .btn {
  margin: 0 auto;
}

.footer-nav {
  padding-left: 15%;
  color: #0a1d0f;
  text-align: left;
}

.pagetop {
  position: absolute;
  top: -130px;
  left: 5vw;
}

.pagetop span {
  writing-mode: vertical-rl;
  text-orientation: mixed; /* 英語が横に倒れた状態で縦に並ぶ */
  transform: rotate(0deg); /* 向きを調整したい場合 */
  color: #0a1d0f;
}

.pagetop span:hover {
  transform: translateY(-3px);
}

.pagetop span:visited {
  color: #0a1d0f;
}

.copyright {
  text-align: center;
  margin: 7px auto;
}

@media screen and (max-width: 1300px) {
  .footer-info {
    padding: 50px 60px;
    max-width: 90%;
    order: 1;
  }

  .footer-info .footer-logo {
    width: 219.69px;
    height: auto;
  }

  .access {
    margin-top: 20px;
    margin-bottom: 10px;
  }

  .access p {
    font-size: 0.75rem;
  }

  .access span {
    font-size: 0.75rem;
  }

  .footer-time {
    margin-bottom: 15px;
  }

  .footer-time p {
    font-size: 0.75rem;
  }

  .footer-contact-text {
    font-size: 0.75rem;
  }

  .access p:nth-child(1) {
    margin-bottom: 8px;
  }

  .footer-btn .btn-detail {
    padding: 20px 55px; /* ボタン内の余白（上下 左右） *//
  }

  .footer-btn .btn-detail span {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
  }
}

@media screen and (max-width: 953px) {
  .footer-info {
    position: static;
    margin: -50vw auto 0 auto;
    order: 2;
  }

  .footer-pic {
    display: none;
    /* display: block; または inline-block */
    /* width: 100%;    必要に応じてサイズ調整 */
    /* margin-right: 0; */
    /* order: 0; */
  }

  .sp-only {
    display: block; /* または inline-block */
    width: 100%;    
    height: auto;
  }

  .pagetop {
    display: none;
  }

  .footer-nav {
    padding-left: 3vw;
  }

  .footer-nav .end-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 0;
    order: 1;
  }
}

@media screen and (max-width: 400px) {
  .footer-info {
    padding: 50px 50px;
  }

}  

/* 下層　about ------------------------------------------------------------------------------*/

#aboutpage-body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  overflow-x: hidden; /* 横方向のはみ出しを隠す */
}

/* ヘッダー */
.header2 {
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* background-color: #F8F4EF; */
  padding: 0 3%;
  z-index: 1000;
}

.header2 .logo_text img {
  width: 156.92px;
  height: auto;
}

.header2 .main-nav {
  display: none; /* PCではロゴを絶対に出さない */
}

.header2 .pc-nav ul {
  display: flex;
  justify-content: space-between;
  gap: 29.26px;
  list-style: none;
  margin: 0;
  padding: 0;
  letter-spacing: 0.08em;
  font-size: 0.875rem;
  transition: opacity 0.4s ease, visibility 0.4s ease; /* ふわっと消える設定 */
  opacity: 1;
  visibility: visible;
}

.header2 .pc-nav ul.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* クリックもできないようにする */
}

.header2 .pc-nav ul a,
.header2 .pc-nav ul a:visited {
  color: #43321c;
}

.header2 .pc-nav ul a:hover {
  color: #e83828;
}

.header2 .hamburger {
  display: none ; /* PCではMENUボタンを絶対に出さない */
}

@media screen and (max-width: 953px) {
  .header2 .pc-nav {
    display: none; /* スマホではPC用ナビゲーションを消す */
  }

  .header2 .main-nav {
    /* 以前のナビゲーションを隠すための設定 */
    position: fixed;
    top: 0;
    right: -100%; /* 画面の右外側に追い出す */
    width: 100%;
    height: 100vh;
    background-color: #f8f4ef;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9998;
    transition: right 0.5s ease;
    /* 既存の padding-left: 15% などが残っているとズレるのでリセット */
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .header2 .menu-logo {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease 0.2s; /* メニューが開いてから少し遅れてふわっと出す演出 */
    text-align: center;
    margin-bottom: 20px;
  }

  .header2 .menu-logo img {
    width: 100%; 
    height: auto;
  }

  /* MENUが開いた時だけ画面内に入れる */
  .header2 .main-nav.is-active {
    right: 0  !important; /* 画面の右端にぴったりつける */
  }

  .header2 .main-nav.is-active .menu-logo {
    display: inline;
    opacity: 1;
    visibility: visible;
  }
  
  /* リスト項目も縦並びに調整 */
  .header2 .main-nav ul {
    display: flex !important;    /* 横並びから縦並びに */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    list-style: none;
    padding: 0 !important;       /* PC版の余白（15%など）をリセット */
    margin: 0;
    width: 100%;
    opacity: 1 !important;
    visibility: visible !important;
    gap: 0;
  }

  .header2 .main-nav ul li {
    margin: 10px 0;             /* メニュー間の上下の間隔 */
    width: auto;
  }

  .header2 .main-nav ul li a {
    display: block;
    color: #43321c !important;   /* ★重要：文字色を濃い茶色に固定 */
    font-size: 1.25rem;           /* スマホで見やすい大きさ */
    text-decoration: none;
    font-family: "Marcellus", serif;
  }

  .header2 .hamburger-btn {
    margin-top: 20px !important;
  }

  .header2 .hamburger-btn .btn-detail span {
    font-size: 1rem;
  }

  .header2 .hamburger-btn .btn-detail {
    padding: 30px 65px; /* ボタン内の余白（上下 左右） */
  }

  .header2 .hamburger-contact-text {
    font-size: 0.875rem;
    color: #43321c;
    margin-top: 10px;
  }

  .header2 .hamburger {
    display: block !important; /* スマホでMENUボタンを表示 */
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    cursor: pointer;
  }

  .header2 .hamburger-text {
    font-family: "Akatab", sans-serif; /* サイトのフォントに合わせる */
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    color: #43321c;
    margin: 0;
    transition: all 0.3s;
  }

  /* メニューが開いている時（is-active）の文字を「CLOSE」にする演出 */
  /* JSで文字を書き換えるのが一番確実ですが、CSSだけでも可能です */
  .header2 .hamburger.is-active .hamburger-text {
    color: #e83828; /* 閉じるときはアクセントカラーに */
    border-bottom-color: #e83828;
  }
}

/* main -------------------------------------------------------------------------------*/
#about-main {
  position: relative;
  background: #f8f4ef;
  width: 100%;
  display: flow-root; /* 隙間対策 */

  /* --- ここを修正 --- */
  height: auto; /* 高さを中身の量に合わせる */
  min-height: 100vh; /* 念のため、最低でも画面1枚分は確保する */
  overflow: visible; /* 中身が切れないように念のため visible に（もし入っていれば） */
}

.breadcrumb {
  padding-left: 5%;
  padding-top: 80px;
}

.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-direction: row;
  gap: 5px;
  margin: 0;
  padding: 0;
}

.breadcrumb li {
  font-family: "Akatab", sans-serif;
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  padding: 0;
}

.breadcrumb li a:visited {
  color: #595757;
}

.breadcrumb li a:hover {
  color: #e83828;
}

#aboutpage {
  width: 100%;
  height: auto;
  padding-top: 50px;
  position: relative;
}

#aboutpage-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: clamp(3.125rem, 15vw, 15.625rem);
  height: auto;
  margin: 0 auto; /* 中央寄せ */
  width: 100%;             /* 親要素の幅を画面いっぱいに固定 */
  overflow: hidden;
}

.kaso-title-unit {
  width: fit-content;
  flex-shrink: 0;
  padding-left: 3%;
}

.kaso-title-unit h1 {
  writing-mode: vertical-rl;
  text-orientation: mixed; /* 英語が横に倒れた状態で縦に並ぶ */
  transform: rotate(0deg); /* 向きを調整したい場合 */
  font-size: clamp(1.25rem, 2.5vw, 1.875rem);
  line-height: 1;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;          /* 線と文字の中心を揃える */
}

.kaso-title-unit h1::before {
  content: "";
  display: block;
  width: 1px;                   /* 線の太さ */
  height: clamp(6.25rem, 120px, 12.5rem);                /* 線の長さ（自由に変更してください） */
  background-color: #43321c;    /* 線のお色味（文字色と合わせると綺麗です） */
  margin-bottom: clamp(1.875rem, 30px, 3.125rem);          /* 線と文字の間の隙間 */
}

.aboutpage-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: 95px;
  max-width: 70%;
  margin: 0 auto;
  /* box-sizing: border-box; */
}

.aboutpage-content h2 {
  font-size: clamp(1.4375rem, 2.5vw, 1.875rem);
  letter-spacing: 0.05em;
  color: #424242;
  margin: 0 0 70px 0;
}

.text3 {
  font-size: clamp(0.9375rem, 2.5vw, 1rem);
  letter-spacing: 0.03em;
  line-height: 2.12;
  margin-bottom: clamp(2.5rem, 40px, 3.125rem);
  color: #0a1d0f;
}

.text3 p {
  margin: 0;
}

.aboutpage-content div:nth-of-type(4) {
  margin-bottom: 0;
}

@media screen and (max-width: 768px) {
  .breadcrumb {
    display: none;
  }

  #aboutpage-container {
    flex-direction: column;
    gap: 0;
    box-sizing: border-box;
    padding-top: 70px;
  }

  .kaso-title-unit {
    padding-left: 0;
  }

  .kaso-title-unit h1 {
     writing-mode: horizontal-tb; /* ★ここで横書きに戻る */
     width: 100%;
  } 

  .kaso-title-unit h1::before {
    width: 40px;      
    height: 1px;       
    margin-right: 15px; 
    margin-bottom: 0;   
  }

  .aboutpage-content {
    padding-top: 95px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 70px 5vw 0 5vw;
    box-sizing: border-box;
  }

  .aboutpage-content h2 {
     margin: 0 0 40px 0;
  }

  .text3 {
  line-height: 1.89;
}


  .text3 .sp {
    display: none;
  }
}

/* our service */
.service {
  width: 100%;
  /* Flexboxの設定 */
  display: flex;
  flex-direction: column; /* 子要素（h2とtwo-box）を縦に並べる */
  align-items: center; /* 子要素を左右中央に配置 */
  justify-content: center; /* 全体を上下中央に配置（必要であれば） */
  gap: 40px; /* タイトルと下のボックスの間の距離 */
  padding: 0 20px;
  box-sizing: border-box; /* パディングを含めた幅計算にする */
  padding-top: clamp(80px, 15vw, 200px);
}

.service h2 {
  text-align: center;
  font-family: "Marcellus", serif;
  font-weight: 300;
  font-size: clamp(1.25rem, 2.5vw, 1.875rem);
  letter-spacing: 0.03em;
  color: #595757;
}

.two-box {
  display: flex;
  flex-direction: column;
  justify-content: center; /* ボックス同士を中央に寄せる */
  gap: 70px;
  padding: 0 5%;
  width: 100%; /* 親の幅いっぱいに広げる */
  max-width: 1500px; /* 広がりすぎないよう制限（デザインに合わせて調整） */
}

.box-style {
  display:flex;
  flex-direction: row;
  align-items: flex-start; /* ★これで子要素（画像）の縦の引き伸ばしが止まります */
  gap: 70px;
  width: 100%;
  height: auto;
  /* padding: 5%; */
}

.box-title {
  display: flex;
  align-items: baseline; /* 文字の下のラインを揃える */
  gap: 30px;
  margin-bottom: 0px; /* 下の英語(Body Session)との距離を調整 */
}

.box-title h4 {
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  color: #AEA395;
  padding: 0;
  margin: 0;
}

.box-title h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.875rem);
  letter-spacing: 0.05em;
  color: #424242;
  padding: 0;
  margin: 0;
}

.box-title .en {
  display: block; /* 強制的に改行させる */
  width: 100%; /* 横幅いっぱいにすることで次行へ */
  font-size: clamp(0.8125rem, 2.5vw, 1.0625rem);
  letter-spacing: 0.08em;
  color: #b3b3b3;
  padding: 0;
  margin-top: -5px; /* 上の漢字との隙間を調整 */
}

.box-text {
  margin: 30px auto;
  display: flex;
  flex-direction: column;
}

.text4 {
  letter-spacing: 0.03em;
  line-height: 1.71;
}

.text5 p {
  margin-bottom: 0;
  margin-top: 0;
  color: #0a1d0f;
  line-height: 1.71;
}

.list span::before {
  content: "⚫︎";
  font-size: 0.8rem;
  text-align: center;
  color: #0a1d0f;
  margin-right: 5px;
}

.list {
  margin: 0;
}

.text5 p:nth-child(1) {
  margin-bottom: 0;
  margin-top: 1rem;
}

.text5 p:nth-of-type(2) {
  margin-top: 0;
}

.box-style img {
  width: 50%; /* 親要素の幅いっぱいに広げる */
  max-width: 624.6px;
  height: auto; /* ★ここで高さを共通の数値に固定する */
  object-fit: cover; /* ★重要：縦に伸びても画像が歪まないようにする */
  /* display: block; 画像の下にできる謎の隙間を消す */
}

.left-pic {
  transform: translateY(23px);
}

@media screen and (max-width: 768px) {
  #two-circle {
  padding-top: 10px;
  padding-bottom: 80px;
}

.box-style {
  display:flex;
  flex-direction: column;
  gap: 30px;
}

.box-style img {
  width: 100%; /* 親要素の幅いっぱいに広げる */
  max-width: 624.6px;
  height: auto; /* ★ここで高さを共通の数値に固定する */
}

.box-title {
  gap: 15px;
}

.personal .personal-pic  {
  order: 0;
}

.personal .box-content {
  order: 1;
}
}

/* price------------------------------------------------------------- */

#pricepage {
  width: 100%;
  padding-top: clamp(80px, 15vw, 200px);
  position: relative;
}

#pricepage-container {
  background-color: #fff;
  border-radius: 73px;
  padding: 110px clamp(5%, 7%, 156px);
  max-width: 1139px;
  margin: 0 auto;
}

.price-content2 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 100px;
}

.price-text {
  width: 100%;
  max-width: 900px; /* コンテンツが右に広がりすぎない適度な幅 */
}

.menu h2 {
  font-size: clamp(1.25rem, 2.5vw, 1.875rem);
  letter-spacing: 0.05em;
  line-height: 1;
  padding-bottom: 0;
  margin-bottom: 0;
  margin-top: 0;
}

.menu p {
  font-size: clamp(0.8125rem, 2.5vw, 1.0625rem);
  letter-spacing: 0.08em;
  color: #b3b3b3;
  padding-top: 0;
  margin-top: 3px;
  margin-bottom: 0;
}

.menu-text {
  margin-top: 0;
  padding-top: 10px;
  font-size: clamp(0.875rem, 2.5vw, 1rem);
  letter-spacing: 0.03em;
  max-width: 900px;
}

.ryokin {
  font-size: 0.8125rem;
  margin-bottom: 0;
  padding-bottom: 0;
}

.menu-price {
  border-top: solid 1px #d9d9d9;
  border-bottom: solid 1px #d9d9d9;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20%;
}

.time p {
  font-size: clamp(0.875rem, 2.5vw, 1rem);
  letter-spacing: 0.02em;
  margin: 18px 0;
}

.time span {
  font-size: clamp(0.875rem, 2.5vw, 1rem);
}

.extra .small {
  font-size: 0.8125rem;
  color: #cc8820;
  margin-bottom: 0;
  padding-bottom: 0;
}

.extra :nth-child(2) {
  margin-top: 0;
  padding-top: -10px;
  font-size: clamp(0.875rem, 2.5vw, 1rem);
}

.prices p {
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  letter-spacing: 0.02em;
}

.prices :nth-child(3) {
  padding-top: 20px;
}

.jr {
  font-size: 0.9375rem;
  letter-spacing: 0.03em;
  padding: 0 5px;
}

.time2 p {
  font-size: clamp(0.875rem, 2.5vw, 1rem);
  letter-spacing: 0.03em;
  padding: 1px 0;
}

.time2 span {
  padding-left: 10px;
  font-size: clamp(1rem, 2.5vw, 1.125rem);
}

.time2 .color {
  color: #cc8820;
}

.time2 .black {
  color: #424242;
}

.time2 .jap {
  color: #424242;
  font-size: clamp(0.875rem, 2.5vw, 1rem);
}

.extra .set {
  color: #424242;
  margin-top: 5px;
}

.time2 > .extra {
  margin-top: 0;
  padding-top: 0;
}

.prices2 p {
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  margin: 16px 0;
}

.prices2 :nth-child(4) {
  padding-top: 25px;
}

.extra .set1 {
  color: #424242;
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 16px;
}

.extra :nth-child(4) {
  margin-bottom: 0;
}

.menu-price .sp {
  display: none;
}

@media screen and (max-width: 980px) {
  #pricepage-container {
    border-radius: 0;
  }

  .prices2 :nth-child(4) {
    padding-top: 15px;
  }

  .menu-price {
    width: 100%;  /* 画面幅いっぱいに広げる */
    /* box-sizing: border-box; */
    overflow-x: auto;/* ★魔法の言葉1：横方向にはみ出た分をスクロールさせる */
    overflow-y: hidden;  /* 縦方向のはみ出しは隠して、余計な縦スクロールを防ぐ */      
    white-space: nowrap;   /* ★魔法の言葉2：中身の要素を絶対に「改行」させず、横一行に並べる  */   
    -webkit-overflow-scrolling: touch; /* スクロールを滑らかにする（iOS・スマホ用のおまじない） */
  }

  .time2, .prices2 {
    display: inline-flex; /* ★ここをinline-flexに変更することで、はみ出た分がスクロール可能になる */
    flex-direction: column;
    align-items: flex-start;
    /* gap: 20%; */
  }

  .menu-price .sp {
     display: none;
  }

  .prices2 p {
    margin: 8px 0;
  }

  .time2 p:not(.extra p){
    margin: 8px 0;
    padding: 0;
  }

  .jr {
    padding: 0 5px;
  }
}


/* profile-------------------------------------------------------- */
#profile-main {
  overflow-x: hidden;
  box-sizing: border-box;
}

#profilepage {
  width: 100%;
  height: auto;
  padding: 100px 0; /* 上下の余白をしっかり取る */
  position: relative;
  background: #f8f4ef;
}

#profilepage-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  /* padding: 0 3vw; */
}

.profile-box {
  flex: 1;
  padding: 0 3vw;
}

.profile-content2 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 80px;
  width: 100%;
  max-width: 1139px;
  margin: 0 auto;
}

.profile-text {
  display: flex;
  flex-direction: column;
  color: #424242;
  width: 100%;
  max-width: 555.96px;
}

.profile-pic {
  width: 100%;
  max-width: 385.08px;
  height: auto;
  object-fit: cover; 
  border-radius: 73px;
}

.name h3 {
  font-size: clamp(1.875rem, 2.5vw, 2.25rem);
  letter-spacing: 0.03em;
  padding: 0;
  margin: 0;
}

.name p {
  padding: 0;
  margin: 0;
  transform: translateY(5px);
}

.name span {
  font-family: "Akatab", sans-serif;
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  letter-spacing: 0.06em;
  font-weight: 400;
  padding-left: 20px;
  color: #988772;
}

.message {
  border-top: solid 1px #AEA395;
  border-bottom: solid 1px #AEA395;
  color: #43321C;
  margin-top: 20px;
}

.other-row {
  display: flex;
  flex-direction: row;
  gap: 80px;
  margin-top: 28px;
  max-width: 1139px;
  margin: 0 auto;
  padding-top: 70px;
  gap: 126px;
}

.topic {
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  color: #988772;
  margin-bottom: 3px;
}

.other p {
  font-size: clamp(0.6875rem, 2.5vw, 1rem);
  letter-spacing: 0.05em;
  line-height: 1.81;
}

.other .topic::before,
.message .topic::before {
  content: "●";
  font-size: 0.8125rem;
  text-align: center;
  color: #988772;
  margin-right: 5px;
  margin-bottom: 0;
}

.other p:nth-child(2),
.message p:nth-child(2) {
  margin-top: 0;
}

@media screen and (max-width: 1140px) {
  #profilepage-container {
    flex-direction: column;
    gap: 50px;
  }

  #profilepage-container .kaso-title-unit {
    padding-left: 0;
    margin-left: -3vw;
  }

  #profilepage-container .kaso-title-unit h1 {
     writing-mode: horizontal-tb; /* ★ここで横書きに戻る */
     width: 100%;
  } 

  #profilepage-container .kaso-title-unit h1::before {
    width: 40px;      
    height: 1px;       
    margin-right: 15px; 
    margin-bottom: 0;   
  }
}

@media screen and (max-width: 886px) {
  #profilepage-container {
    padding: 0 5vw;
  }
 
  #profilepage-container .kaso-title-unit {
    margin-left: -5vw;
  }

  .profile-content2 {
    flex-direction: column;
    justify-content: center;
    gap: 30px;
  }

  .profile-pic {
    width: 100%;
  }

  .profile-pic {
    width: 80%;
    /* max-width: none; */
    height: auto;
    margin: 0 auto;
  }

  .profile-text {
    width: 100%;
    max-width: none;
  }

  .message {
    margin-top: 10px;
  }

  .other-row {
    flex-direction: column;
    gap: 30px;
    padding-top: 50px;
  }
}

@media screen and (max-width: 425px) {
  #profilepage-container {
    justify-content: center;
  }

  .profile-content2 {
    justify-content: center;
    gap: 30px;
  }

  .profile-pic {
    width: 90%;
    max-width: none;
    height: auto;
    margin: 0 auto;
  }

  .name {
    margin: 0 auto;
    transform: translateX(-10px);
  }
}