:root {
  --paper: #fffdfa;
  --bg: #faf8f2;
  --soft: #f2efe7;
  --line: #e5dfd2;
  --ink: #24221e;
  --muted: #69645b;
  --green: #88a84c;
  --green2: #78963d;
  --brown: #a57543;
  --blue: #5a9bd2;
  --shadow: 0 14px 34px rgba(39, 35, 25, .055);
  --serif: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --sans: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  --container: 1170px
}
* {
  box-sizing: border-box
}
html {
  scroll-behavior: smooth
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.85 var(--serif);
  -webkit-font-smoothing: antialiased
}
img {
  display: block;
  max-width: 100%
}
a {
  color: inherit;
  text-decoration: none
}
h1, h2, h3, p {
  margin: 0
}
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500
}

/* ==========================================================================
   サイト�E通アニメーション設定（これがなぁE��全セクションが止まります！E��E
   ========================================================================= */
/* 1. まだ画面に見えてぁE��ぁE��の初期状態（透�E �E�E下か左にズラしておく�E�E*/
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.reveal--left {
  transform: translateX(-40px);
}

/* 2. 【趁E��要】スクロールして画面に入った瞬間、一斉に表示させる�E通スイチE�� */
.reveal.is-visible {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}

.container {
  width: min(calc(100% - 72px), var(--container));
  margin: auto
}
.section {
  padding: 42px 0;
  border-top: 1px solid rgba(229, 223, 210, .7)
}
.section--soft {
  background: var(--soft)
}
.skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%)
}
.skip-link:focus {
  position: fixed;
  z-index: 999;
  top: 8px;
  left: 8px;
  background: #111;
  color: #fff;
  padding: 8px 12px
}


.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 248, 242, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(229, 223, 210, .7)
}
.header.is-scrolled {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .05)
}
.header__inner {
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px
}

/* ==========================================================================
   ヘッダーロゴ �E�E��ELiving Space」横並びカスタム�E�完�E版！E
   ========================================================================= */
/* ロゴ画像と追加チE��ストを、縦位置中央でピタチE��横並びにする */
.header__logo {
  display: flex !important;
  align-items: center !important;
  gap: 10px;                         /* ロゴ画像と斁E���E間�E忁E��よい隙間 */
  text-decoration: none !important;  /* リンクの下線を強制非表示 */
}

/* 既存�Eヘッダーロゴ画像�E縦横比を綺麗に保つ */
.header__logo img {
  height: 28px !important;           /* ヘッダーに合わせた上品な高さ調整�E�既存�Eサイズがあれ�Eそれに合わせてください�E�E*/
  width: auto !important;
}

/* 🔴 ヘッダー横に追加した、ELiving Space」�E斁E��スタイリング */
.header__logo-text {
  font-size: 16px;                   /* ヘッダーのナビゲーションに合わせた上品な大きさ */
  font-family: var(--serif);         /* ROOTSの世界観を崩さなぁE��しぁE�E朝佁E*/
  color: var(--ink);                 /* 他�E斁E��と同じ上品なインク色 */
  font-weight: 500;
  white-space: nowrap;               /* 画面幁E��狭くなっても絶対に途中で改行させなぁE*/
  letter-spacing: 0.02em;
  /* 画像�Eの「Roots」�E斁E���E高さと、目視で中央が綺麗に揁E��ようにわずかに下へ微調整 */
  transform: translateY(1px); 
}

/* ==========================================================================
   【レスポンシブ】スマ�E表示�E�E024px以下）での微調整
   ========================================================================= */
@media(max-width: 1024px) {
  /* スマ�E画面でハンバ�EガーメニューめE��ゴと被る�Eを防ぐため、文字サイズをスマ�Eトに調整 */
  .header__logo-text {
    font-size: 12px;
    gap: 8px;
  }
}


.header__nav {
  display: flex;
  align-items: center;
  gap: 25px;
  font-size: 12px
}
.header__nav a {
  white-space: nowrap
}
.header__toggle {
  display: none
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: 0;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  transition: .25s
}
.button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow)
}
.button--header, .button--green {
  background: var(--green2)
}
.button--blue {
  background: var(--blue)
}
.hero {
  position: relative;
  min-height: 720px;
  padding: 90px 0;
  overflow: hidden;
  isolation: isolate; /* 【重要】この1行で、�E部のプラスz-indexの重なり頁E��完�Eに保護しまぁE*/
}

/* ❷ 真ん中に挟�E白ぁE��ラチE�Eション�E�E-index: 2�E�E*/
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left:0;
  width: calc(100% - 50px);
  height: 100%;
  background: linear-gradient(to right, 
    rgba(255, 255, 255, 0.98) 10%, 
    rgba(255, 255, 255, 0.85) 30%, 
    rgba(255, 255, 255, 0) 60%
  );
  z-index: 2; /* 画像より上、テキストより丁E*/
  pointer-events: none;
}

/* コンチE��エリア */
/* ❸ 一番手前のコンチE��エリア�E�E-index: 3�E�E*/
.hero__grid {
  display: grid;
  grid-template-columns: 45% 1fr;
  gap: 22px;
  align-items: center; 
  position: relative;
  z-index: 3; /* グラチE�Eションのさらに上に引き上げ */
}
.hero__copy {
  padding-top: 0;
}
.hero__copy h1 {
  font-size: 54px;
  line-height: 1.5;
  letter-spacing: .03em;
  margin-bottom: 12px
}
.hero__copy p {
  font-size: 16px;
  color: var(--muted);
  margin-bottom: 20px
}
.hero__price {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--brown);
  background: #fff;
  border-radius: 10px;
  max-width: 400px;
  margin-bottom: 25px;

}
.hero__price > div {
  text-align: center;
  padding: 10px
}
.hero__price > div + div {
  border-left: 1px solid var(--line)
}
.hero__price span {
  display: block;
  font: 500 15px/1.8 var(--serif)
}
.hero__price strong {
  display: block;
  color: var(--brown);
  font: 500 32px/1.4 var(--serif);
	  	  margin-left: 20px;
}
.hero__price small {
  font-size: 10px
}
.hero__buttons {
  display: flex;
  gap: 10px
}
.hero__image {
  position: absolute;
  top: 0;
  left: 300px;
  width: calc(100% - 50px);
  height: 100%;
  z-index: 1; /* 一番奥に配置 */
  margin: 0;
  background: #ddd;
	
}

.hero__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0; /* 最初�E全員隠しておく */
  animation: heroSlider 25s infinite; /* 5极EÁE5私E�E�E25秒周期�E無限ルーチE*/
}

/* 【追加、E枚�Eループ�E繋ぎ目が絶対に途�Eれて裏地が見えなぁE��法�EマイナスチE��レイ計箁E*/
.hero__image img:nth-child(1) { animation-delay: 0s; }
.hero__image img:nth-child(2) { animation-delay: -20s; }
.hero__image img:nth-child(3) { animation-delay: -15s; }
.hero__image img:nth-child(4) { animation-delay: -10s; }
.hero__image img:nth-child(5) { animation-delay: -5s; }

/* 【追加、E枚あたり5秒（表示4私E�E�EクロスフェーチE秒）�E黁E��比率キーフレーム */
@keyframes heroSlider {
  0% { opacity: 0; }
  4% { opacity: 1; }   /* 1秒かけてフワチE��上品にフェードイン */
  20% { opacity: 1; }  /* 4秒間しっかりと静止して美しく魁E��めE*/
  24% { opacity: 0; }  /* 1秒かけて次の画像と重なりながらフェードアウチE*/
  100% { opacity: 0; }
}

.botanical {
  position: absolute;
  pointer-events: none
}
.botanical::before, .botanical::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(136, 168, 76, .25);
  border-radius: 100% 0 100% 0
}
.botanical--hero {
  left: 0;
  bottom: 18px;
  width: 70px;
  height: 100px
}
.botanical--hero::before {
  width: 52px;
  height: 17px;
  transform: rotate(-20deg);
  left: 8px;
  top: 44px
}
.botanical--hero::after {
  width: 44px;
  height: 15px;
  transform: rotate(18deg);
  left: 26px;
  top: 66px
}

/* ==========================================================================
   Aboutセクション�E�完�E版デザイン・全バグ解消�E最終決定版�E�E
   ========================================================================= */
.about {
  display: flex;
  flex-direction: column;
  gap: 40px;
  position: relative;
  padding: 40px 0;
  font-family: var(--serif);
}

/* 左上�E葉っぱあしらい�E�セクション全体�E左上に絶対配置�E�E*/
.about::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -100px; /* カンプ画像に合わせてタイトルの左上に配置 */
  width: 90px;  /* ご指定�E大きめサイズ */
  height: 200px;
  background: url('../assets/images/leaf-bottom-left.png') no-repeat center/contain;
  pointer-events: none;
  z-index: 10;
}

/* 右下�E葉っぱあしらい�E�セクション全体�E右下に絶対配置�E�E*/
.about::after {
  content: "";
  position: absolute;
  bottom: -10px;
  right: -100px; /* カンプ画像に合わせてセクションの右下に配置 */
  width: 300px; /* ご指定�E大きめサイズ */
  height: 80px;
  background: url('../assets/images/leaf-bottom-right.png') no-repeat center/contain;
  pointer-events: none;
  z-index: 10;
}

/* 上部�E��EチE��ー�E�下揃え�E置�E�E*/
.about__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
}
.about__intro {
  flex: 0 1 auto;
}

/* H2タイトル */
.about__intro h2 {
  font-size: 36px;
  font-weight: 500;
  margin-bottom: 12px;
  color: var(--ink);
}
.about__intro p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

/* 右側タイトル�E�E行に強制固定！E*/
.about__title {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 15px;
}
.about__title h3 {
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
  white-space: nowrap; /* 改行を絶対に防ぁE*/
}
.about__title h3 span {
  color: var(--green2);
  font-weight: 500;
}

/* 斜め線�Eあしらい�E�スラチE��ュ�E�E*/
.about__slash {
  display: inline-block;
  width: 2px;
  height: 18px;
  background: var(--green);
  opacity: 1;
}
.about__slash--left {
  transform: rotate(25deg);
}
.about__slash--right {
  transform: rotate(-25deg);
}

/* 中央�E�EスチE��プ（�E形チE��イン・画像完�E一致�E�E*/
.about__steps {
  margin-top: 20px;
  width: 100%;
}
.about__steps .baton__grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px; /* パ�EチE��士の絶妙な黁E��比間隁E*/
  position: relative;
}

.baton__item {
  flex-shrink: 0;
}

/* 【完�E一致】白背景 �E�E吁E��チE��プ�EチE�Eマ色の薁E��墁E��線を持つ正冁E*/
.baton__circle {
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: #ffffff;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 34px 10px 10px;
}
.baton__circle--green { border: 1px solid rgba(120, 150, 61, 0.28); }
.baton__circle--brown { border: 1px solid rgba(165, 117, 67, 0.28); }
.baton__circle--blue  { border: 1px solid rgba(90, 155, 210, 0.28); }

/* 【完�E一致】�Eの天頂にジャストフィチE��で重なる、�Eっくりとした可愛い立体ラベル */
.baton__label {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  padding: 5px 18px 6px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--sans);
  letter-spacing: 0.02em;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}
.baton__label--green { background: var(--green2); }
.baton__label--brown { background: var(--brown); }
.baton__label--blue  { background: var(--blue); }

/* イラストエリアのサイズ固定化 */
.baton__icon {
  height: 80px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.baton__icon img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

/* 冁E��の中の美しぁE�E朝体説明文 */
.baton__circle p {
  font-size: 13px;
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.5;
  text-align: center;
  margin: 0;
  font-weight: 500;
}

/* ==========================================================================
   スチE��プ間を直進で繋ぐ太ぁE��りつぶし矢印�E�EↁE、EↁE�E�E
   ========================================================================= */
.baton__arrow {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: -30px; /* ラベルの厚みによる中忁E�Eズレを完璧に相殺 */
}
.baton__arrow--green {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2378963d'%3E%3Cpath d='M4,11 h11 v-3 l6,4 l-6,4 v-3 h-11 z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.baton__arrow--brown {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a57543'%3E%3Cpath d='M4,11 h11 v-3 l6,4 l-6,4 v-3 h-11 z'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* ==========================================================================
   3ↁE間：曲線点緁E�E�E矢印先端 �E�E��半刁E��次へ」バチE���E��Eース定義�E�E
   ========================================================================= */
.baton__loop {
  width: 120px;
  height: 125px;
  flex-shrink: 0;
  position: relative;
  margin: -30px -10px 0;
}

/* 🔵 点線カーチE*/
.baton__loop::before {
  content: "";
  position: absolute;
  top: 15px;
  left: -5px;
  width: calc(100% + 10px);
  height: 70px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 70'%3E%3Cpath d='M5,10 Q65,68 122,28' fill='none' stroke='%235a9bd2' stroke-width='1.5' stroke-dasharray='3,3'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* 🔴 矢印の先端�E�▶�E�E
   ☁E��なたが調整した数値を�EースにPC用メイン設定として最優先�E置しました�E�E*/
.baton__loop-arrow {
  position: absolute;
  top: 45px;          /* 【縦位置】あなたが決定したジャストな高さ */
  left: 114px;        /* 【横位置、E*/
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%) rotate(-25deg); 
  background: #5a9bd2;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  z-index: 6;
}

/* 🟢 「半刁E��次へ」バチE�� */
.baton__loop-badge {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a4c567 0%, #7ca13c 100%);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  font-family: var(--serif);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.35;
  box-shadow: 0 6px 14px rgba(120, 150, 61, 0.2);
  z-index: 5;
}

/* 下部�E�まとめメチE��ージ */
.about__footer {
  text-align: center;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.about__footer p {
  font-size: 15px;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.about__footer span {
  color: var(--green2);
  font-weight: 500;
}

/* ==========================================================================
   既存�EアニメーションシスチE��との連動個別微調整�E�サークルレイアウト特化版�E�E
   ========================================================================= */
.about .reveal {
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), clip-path 1s ease;
}

/* H2と説明文�E�左からスライチE*/
.about__intro.reveal--left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.about__intro.reveal--left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* 右側サブタイトル�E�少し遁E��てフワチE��下かめE*/
.about__title.reveal {
  opacity: 0 !important;
  transform: translateY(20px);
  transition: opacity 1s ease 0.3s, transform 1s ease 0.3s;
}
.about__title.reveal.is-visible {
  opacity: 1 !important;
  transform: translateY(0);
}

/* 4つのサークル�E�下かめE枚ずつ綺麗に時間差�E�ディレイ�E�を伴ってフワチE��出現 */
.baton__item.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.baton__item.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 吁E��チE��プごとの完璧な時間差�E�ディレイ�E�設宁E*/
.about__steps .baton__grid article:nth-of-type(1) { transition-delay: 0.1s; }
.about__steps .baton__grid article:nth-of-type(2) { transition-delay: 0.25s; }
.about__steps .baton__grid article:nth-of-type(3) { transition-delay: 0.4s; }
.about__steps .baton__grid article:nth-of-type(4) { transition-delay: 0.55s; }

/* まとめメチE��ージ�E�最後にフワチE��表示 */
.about__footer.reveal {
  opacity: 0;
  transition: opacity 1.2s ease 0.8s;
}
.about__footer.reveal.is-visible {
  opacity: 1;
}

/* ==========================================================================
   Aboutセクション レスプレンシブ対応（スマ�E・タブレチE��用�E�E
   ========================================================================= */
@media(max-width:1400px) {
  .about::before, .about::after { display: none; } /* 画面外�E葉っぱのはみ出しを防止 */
}

@media(max-width:1024px) {
  .about__header { 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 16px; 
  }
  .about__title.reveal { 
    opacity: 1 !important; 
    transform: none !important; 
  }
  .about__title h3 { 
    white-space: normal; 
  }
  .about__slash { 
    display: none; 
  }
  
  /* 【スマ�E特化】窮屈な横並びを、上から下へ流れる一本のスマ�Eトな美しぁE��イムラインに変換 */
  .about__steps .baton__grid {
    flex-direction: column;
    gap: 20px;
    padding: 20px 0;
  }
  .baton__item {
    width: auto;
  }
  
  /* 矢印の方向を、デザインのクオリチE��を保ったまま自動で美しぁE��下向き（�E�E�」へ変更 */
  .baton__arrow {
    margin: 0;
    width: 22px;
    height: 22px;
  }
  .baton__arrow--green {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2378963d'%3E%3Cpath d='M11,4 v11 h-3 l4,6 l4,-6 h-3 v-11 z'/%3E%3C/svg%3E") no-repeat center/contain;
  }
  .baton__arrow--brown {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a57543'%3E%3Cpath d='M11,4 v11 h-3 l4,6 l4,-6 h-3 v-11 z'/%3E%3C/svg%3E") no-repeat center/contain;
  }
  
  /* スマ�E時�E褁E��な横向きの点線アーチを、垂直に下に走る美しぁE��点線にスマ�Eト�Eり替ぁE*/
  .baton__loop {
    width: 100%;
    height: auto;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .baton__loop::before {
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 110px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 100'%3E%3Cline x1='1' y1='0' x2='1' y2='100' stroke='%235a9bd2' stroke-width='2' stroke-dasharray='4,4'/%3E%3C/svg%3E") repeat-y center;
  }
  
  /* スマ�E画面の時�E、横並び用の三角矢印を綺麗に非表示にする */
  .baton__loop-arrow {
    display: none;
  }
  
  .baton__loop-badge {
    position: relative;
    transform: none;
    left: auto;
    bottom: auto;
  }
}
/* ==========================================================================
   Vision�E�EOOTSが目持E��も�E�E�セクション - 允E�E横並び・チE��イン完�E一致牁E
   ========================================================================== */
/* セクション全体�E背景をカンプ通りの白�E�Efff�E�に固宁E*/
#vision {
  background-color: #ffffff !important;
}

/* 【復旧】最初�E綺麗な横並び�E�EカラムGrid�E�に戻しまぁE*/
.vision {
  display: grid;
  grid-template-columns: 340px 1fr; /* 全体が庁E��った�E、左側チE��スト�E幁E��少しめE��りを持たせました */
  gap: 56px; /* 横幁E�E拡張に合わせて、テキストとカード�E間�E隙間も庁E��て開放感を出しまぁE*/
  align-items: flex-start;
  font-family: var(--serif); /* セクション全体を美しぁE�E朝体に統一 */
  max-width: 1320px !important; /* 他�Eセクションより一回り庁E��特別なコンチE��幁E��上書ぁE*/
  width: 100%;
  margin: 0 auto;
}

/* 左側�E�導�EブロチE�� */
.vision__intro h2 {
  font-size: 34px; /* AboutセクションのH2とサイズ・太さを完�E一致 */
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 8px;
}
.vision__intro h3 {
  font-size: 20px; /* カンプ�E「（佐賀の課題解決�E�」�E絶妙な存在感を再現 */
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 24px;
}
.vision__intro p {
  font-size: 15px;
  line-height: 1.8; /* カンプ通りの非常にめE��たりとした行間 */
  color: var(--ink);
  letter-spacing: 0.03em;
}

/* 右側�E�E連カードグリチE�� */
.vision__cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px; /* カード同士の間隔 */
}

/* 課題解決カード本佁E*/
.value-card {
  background: #faf8f5; /* カンプ�E温かみのある趁E��薁E��イボリー */
  border: 1px solid rgba(229, 223, 210, 0.5); /* 溶け込むような非常に薁E��ベ�Eジュの墁E��緁E*/
  border-radius: 16px; /* カンプ�E角丸比率 */
  padding: 24px 12px 20px;
  text-align: center;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 250px; /* カンプ�E縦長なカード比率を完�E再現 */
}

/* ① 一番上�Eカードタイトル */
.value-card h3 {
  color: var(--green2); /* カンプ�E優しくくすんだグリーン */
  font-size: 20px;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 16px;
  letter-spacing: 0.05em;
	font-family: var(--sans);
}

/* ② 真ん中のイラストエリア */
.value-card__img {
  width: 100%;
  height: 75px; /* イラストが綺麗に収まる高さ */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.value-card__img img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

/* ③ 一番下�E説明文 */
.value-card p {
  font-size: 13px;
  line-height: 1.65; /* カンプ�Eまとまり�E良ぁE��間 */
  color: var(--muted);
  margin: 0;
  font-weight: 500;
	font-family: var(--sans);
}

/* ==========================================================================
   Visionセクション レレスポンシブ対忁E
   ========================================================================== */
@media(max-width:1220px) {
  .vision {
    grid-template-columns: 1fr; /* タブレチE��以下では無琁E��横並びせず縦並びへ */
    gap: 32px;
  }
  .vision__cards {
    grid-template-columns: repeat(3, 1fr); /* 3列�E2列�E綺麗な折り返しに */
    gap: 16px;
  }
}
@media(max-width:768px) {
  .vision__cards {
    grid-template-columns: 1fr; /* スマ�Eでは1列縦並びに */
  }
  .value-card {
    min-height: auto;
    padding: 24px;
  }
}

/* ==========================================================================
   Business�E�EOOTSが行ってぁE��事業�E�セクション
   ========================================================================== */
.section--business {
  background-color: #ffffff; /* Visionと同じく白背景 */
  padding-bottom: 80px;
}

.business__title {
  text-align: center;
  font-size: 34px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 48px;
  font-family: var(--serif);
}

.business__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  width: 100%;
}

/* 【修正】丸角と薁E��グリーンの枠線、�E側の余白を最適匁E*/
.business-card {
  background: #ffffff; /* 枠線を綺麗に見せるため�E白背景 */
  border: 1px solid rgba(120, 150, 61, 0.25); /* サイト�Eグリーン�E�E-green2�E�をベ�Eスにした上品で薁E��グリーンの枠緁E*/
  border-radius: 16px; /* 他�Eカードと揁E��た美しぁE��见E*/
  padding: 28px 16px 24px; /* 枠線に斁E��がぶつからなぁE��ぁE���E側の余白をゆったり確俁E*/
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: none;
}

/* アイコンエリア */
.business-card__img {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.business-card__img img {
  height: 80px;
  width: auto;
  object-fit: contain;
}

/* カード�Eタイトル */
.business-card h3 {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
  line-height: 1.2;
  min-height: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* カード�E説明文 */
.business-card p {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  font-weight: 500;
}

/* ==========================================================================
   Businessセクション レレスポンシブ調整
   ========================================================================== */
@media(max-width: 1024px) {
  .business__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

@media(max-width: 768px) {
  .business__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .business__title {
    font-size: 28px;
  }
}

@media(max-width: 576px) {
  .business__grid {
    grid-template-columns: 1fr;
    gap: 24px; /* スマ�E時�Eカード同士の間隔 */
  }
  .business-card {
    padding: 32px 24px; /* スマ�E画面でカードが1列になった時、より綺麗に見える余白に調整 */
  }
}

/* ==========================================================================
   Guide�E�EITCHEN & SPACE 利用案�E�E�セクション - 小見�Eしバグ完�E修正牁E
   ========================================================================== */
.section--guide {
  background-color: #ffffff; /* カンプ通りの純白背景 */
  padding: 54px 0 64px;
}

.guide {
  display: flex;
  flex-direction: column;
  gap: 36px;
  max-width: var(--container); /* あなたが調整した1170px幁E�EコンチE��に完�E同期 */
  width: 100%;
  margin: 0 auto;
}

/* タイトル�E�E��ード文 */
.guide__header h2 {
  font-size: 34px;
  font-weight: 500;
  color: var(--ink);
  font-family: var(--serif); /* 美しぁE�E朝佁E*/
  margin-bottom: 12px;
  line-height: 1.2;
  letter-spacing: 0.03em;
}
.guide__header h2 span {
  font-size: 18px;
  font-weight: 500;
  margin-left: 4px;
}
.guide__header p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink);
  font-family: var(--serif);
}

/* 中央メイン�E��E真！E��金！E*/
.guide__main {
  display: grid;
  grid-template-columns: 1.25fr 1.45fr 1fr; /* 外観・冁E��・料��表の黁E��比率 */
  gap: 18px;
  align-items: stretch;
}

/* 【バグ修正】�E通revealのclip-pathによる料��小見�Eし�E刁E��取りを強制解除 */
.guide__main.reveal {
  clip-path: none !important;
}

.guide__photo {
  margin: 0;
}
.guide__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}

/* 料��ボックス */
.guide__price-box {
  position: relative;
  border: 1px solid rgba(120, 150, 61, 0.25); /* 薁E��グリーンの枠緁E*/
  border-radius: 14px;
  background: #ffffff;
  padding: 32px 14px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.guide__price-tag {
  position: absolute;
  top: -10px; /* 斁E��が枠線�E真ん中にくるよう微調整 */
  left: 24px;
  background: #ffffff; /* 重なった枠線を消すための背景白 */
  padding: 0 10px;
  font-size: 13px;
  color: var(--muted);
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1; /* 【重要】bodyの1.85をリセチE��して上下中央に配置 */
}
.guide__price-item {
  background: var(--bg); /* あなたが調整した温かみのあるアイボリー背景と完�E同期 */
  border-radius: 10px;
  padding: 14px 10px;
  text-align: center;
}
.guide__price-item span {
  display: block;
  font-size: 18px;
  font-family: var(--serif);
  color: var(--ink);
  margin-bottom: 2px;
}
.guide__price-item strong {
  font-size: 38px;
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.1;
}
.guide__price-item strong small {
  font-size: 16px;
  font-weight: 500;
  margin-left: 2px;
}
.guide__price-note {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  margin: 4px 0 0;
  font-family: var(--sans);
  font-weight: 500;
}

/* 下部インフォ�E�ご利用シーン、設備�E備品�E�E*/
.guide__info {
  display: grid;
  grid-template-columns: 1.22fr 1fr;
  gap: 18px;
}

/* 【バグ修正】�E通revealのclip-pathによる小見�Eし（ご利用シーン・設備備品E���E刁E��取りを完�Eに防ぁE*/
.guide__info.reveal {
  clip-path: none !important;
}

.guide__info-box {
  position: relative;
  border: 1px solid rgba(120, 150, 61, 0.25);
  border-radius: 14px;
  background: #ffffff;
  padding: 32px 14px 20px;
}
.guide__info-tag {
  position: absolute;
  top: -10px; /* 斁E��が枠線�E真ん中にくるよう微調整 */
  left: 24px;
  background: #ffffff;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1; /* 【重要】bodyの1.85をリセチE��して上下中央に配置 */
}
.guide__info-grid {
  display: grid;
  gap: 10px;
  text-align: center;
}
.guide__info-grid--scene {
  grid-template-columns: repeat(5, 1fr);
}
.guide__info-grid--facility {
  grid-template-columns: repeat(4, 1fr);
}
.guide__info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.guide__info-item img {
  height: 73px;
  width: auto;
  object-fit: contain;
  margin-bottom: 8px;
}
.guide__info-item span {
  font-size: 12px;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 700;
  white-space: nowrap;
}

/* 注意書ぁE*/
.guide__note {
  font-size: 12px;
  color: var(--muted);
  margin: -10px 0 0;
  font-family: var(--sans);
  font-weight: 500;
}

/* ==================================================
   Guide / ���p�ē�
================================================== */

.section--guide {
  background: var(--paper);
}

.guide__price-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 22px 20px;
}

.guide__price-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 28px;
  margin-bottom: 16px;
  padding: 0 12px;

  color: #fff;
  background: var(--green2);
  border-radius: 999px;

  font-size: 11px;
  font-weight: 700;
}

.guide__price-group + .guide__price-group {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.guide__price-group h3 {
  margin-bottom: 10px;

  color: var(--ink);
  font-size: 18px;
  line-height: 1.5;
}

.guide__price-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 12px;

  padding: 9px 0;
}

.guide__price-item + .guide__price-item {
  border-top: 1px solid rgba(229, 223, 210, 0.75);
}

.guide__price-item span {
  color: var(--muted);
  font-size: 12px;
}

.guide__price-item strong {
  color: var(--brown);
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.1;
}

.guide__price-item small {
  margin-left: 2px;
  font-size: 13px;
}

.guide__price-note {
  margin-top: 6px;

  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

.guide__student-note {
  margin-top: 16px;
  padding: 12px 14px;

  color: var(--green2);
  background: rgba(136, 168, 76, 0.09);
  border: 1px solid rgba(136, 168, 76, 0.25);
  border-radius: 12px;

  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
}


/* ==================================================
   Guide equipment accordion
================================================== */

.guide__equipment {
  margin-top: 24px;

  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);

  overflow: hidden;
}

.guide__equipment-summary {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  padding: 18px 22px;

  cursor: pointer;
  list-style: none;

  color: var(--ink);
  font-weight: 700;
}

.guide__equipment-summary::-webkit-details-marker {
  display: none;
}

.guide__equipment-summary span {
  line-height: 1.7;
}

.guide__equipment-summary i {
  position: relative;

  flex: 0 0 auto;

  width: 28px;
  height: 28px;

  border-radius: 50%;
  background: var(--green2);
}

.guide__equipment-summary i::before,
.guide__equipment-summary i::after {
  content: "";

  position: absolute;
  top: 50%;
  left: 50%;

  width: 12px;
  height: 2px;

  background: #fff;
  border-radius: 999px;

  transform: translate(-50%, -50%);
}

.guide__equipment-summary i::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.guide__equipment[open] .guide__equipment-summary i::after {
  opacity: 0;
}

.guide__equipment-body {
  padding: 0 22px 22px;
  border-top: 1px solid var(--line);
}

.guide__equipment-lead {
  margin: 18px 0;

  color: var(--muted);
  font-size: 12px;
  line-height: 1.9;
}


/* ���X�N���[���e�[�u�� */
.guide__table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

/* �X�N���[���ł��邱�Ƃ𕪂���₷������ */
.guide__table-scroll::after {
  content: "���ɃX�N���[���ł��܂�";
  display: none;

  padding: 8px 12px;

  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.guide__equipment-table {
  width: 100%;
  min-width: 960px;

  border-collapse: collapse;

  font-size: 12px;
  line-height: 1.7;
}

.guide__equipment-table th,
.guide__equipment-table td {
  padding: 10px 12px;

  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);

  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

.guide__equipment-table th:last-child,
.guide__equipment-table td:last-child {
  border-right: 0;
}

.guide__equipment-table tr:last-child td {
  border-bottom: 0;
}

.guide__equipment-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;

  color: var(--ink);
  background: var(--soft);

  font-weight: 700;
}

.guide__equipment-table tbody tr:nth-child(even) {
  background: #fbfaf6;
}

.guide__equipment-table td:nth-child(1),
.guide__equipment-table td:nth-child(4),
.guide__equipment-table td:nth-child(5) {
  text-align: center;
}

.guide__equipment-table th:nth-child(1),
.guide__equipment-table th:nth-child(4),
.guide__equipment-table th:nth-child(5) {
  text-align: center;
}

.fee {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 14px 13px;
  text-align: center;
  box-shadow: var(--shadow)
}
.fee h3 {
  font-size: 18px;
  margin-bottom: 6px
}
.fee > div {
  padding: 10px 4px
}
.fee > div + div {
  border-top: 1px solid var(--line)
}
.fee span {
  display: block;
  font: 500 11px/1.4 var(--serif)
}
.fee strong {
  display: block;
  color: var(--brown);
  font: 500 27px/1.1 var(--serif)
}
.fee small {
  font-size: 9px
}
.fee p {
  font-size: 9px;
  color: var(--muted);
  margin-top: 6px
}
.section--news {
  padding-top: 30px
}
.news__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 12px
}
.news__head h2 {
  font-size: 28px
}
.news__head a {
  color: var(--green2);
  font-size: 11px;
  font-weight: 700
}
.news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px
}
.news-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden
}
.news-card figure {
  position: relative;
  margin: 0
}
.news-card figure img {
  width: 100%;
  height: 220px;
  object-fit: cover
}
.news-card > a > div {
  padding: 10px 12px
}
.news-card h3 {
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 4px
}
.news-card time {
  font-size: 10px;
  color: var(--muted)
}
.category {
  position: absolute;
  left: 10px;
  top: 8px;
  color: #fff;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 9px;
  font-weight: 700
}
.category--green {
  background: var(--green2)
}
.category--blue {
  background: var(--blue)
}
.category--brown {
  background: #c87548
}
/* ==========================================================================
   FAQ�E�よくある質問）セクション - セクションまたぎリーフ対応版
   ========================================================================= */
.faq {
  position: relative;
  background: var(--paper);
  padding: 64px 0;
  /* 【最重要】下�EContactセクションより手前に持ち上げることで、E
     はみ出した下�E葉っぱが背景色に消されず、綺麗に跨ぁE��表示されまぁE*/
  z-index: 2; 
}

.faq__inner {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  align-items: flex-start;
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  position: relative; /* 2枚�E葉っぱを�E置する基準点 */
}

/* 🍃 1枚目の葉っぱ�E�上�E「よくある質問」�E左側に寁E��添ぁE��E*/
.faq__inner::before {
  content: "";
  position: absolute;
  top: -10px;   /* カンプ画像�E通り、見�Eしより少し高めの位置にセチE�� */
  left: -100px; /* 中央コンチE��の左外�E */
  width: 90px;
  height: 200px;
  background: url('../assets/images/leaf-bottom-left.png') no-repeat center/contain;
  pointer-events: none;
  z-index: 10;
}

/* 🍃 2枚目の葉っぱ�E�下�Eセクションへ大胁E��跨ぁE��「お問い合わせ」�E左側に敷く！E*/
.faq__inner::after {
  content: "";
  position: absolute;
  top: 170px;   /* 1枚目の葉っぱの真下に美しく連なるよぁE��縦位置を調整 */
  left: -100px; /* 1枚目と左右のラインを完�Eに統一 */
  width: 90px;
  height: 200px;
  background: url('../assets/images/leaf-bottom-left.png') no-repeat center/contain;
  /* カンプ画像�E葉�E流れに合わせて、少し角度を傾けたぁE��合�E以下を有効にしてください */
  /* transform: rotate(-15deg); */
  pointer-events: none;
  z-index: 10;
}

.faq__intro {
  position: relative;
}

.faq__inner h2 {
  font-size: 34px;
  font-weight: 500;
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.3;
}

/* 右側�E�Eカラム質問グリチE�� */
.faq__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
	align-items: start;
}

.faq__grid details {
  height: fit-content;
}

.faq details {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0;
  transition: box-shadow 0.25s ease;
}

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 48px 16px 20px;
  position: relative;
  font-size: 15px;
  font-weight: 500;
  font-family: var(--serif);
  color: var(--ink);
  line-height: 1.4;
}
.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.faq details[open] summary::after {
  transform: translateY(-30%) rotate(-135deg);
}

.faq details p {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--muted);
  font-family: var(--sans);
  margin: 0;
  padding: 4px 20px 20px 24px;
}

/* ==========================================================================
   Access�E�アクセス�E�セクション - パララチE��ス完�E対応版
   ========================================================================= */
.access {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 80px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* 📷 【追加】パララチE��ス背景の配置 �E�Eすりガラス風白マスク */
.access__bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}

.access__bg-image {
  position: absolute;
  top: -12%;
  left: 0;
  width: 100%;
  height: 124%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  will-change: transform;
}
/* 画像�E上に上品な白めE枚重ね、文字�E読みめE��さを神レベルに引き上げめE*/
.access__bg::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background: rgba(255, 255, 255, 0.86);
}


/* 【重要】中身のチE��ストや地図を背景画像よりも手前に浮か�E上がらせめE*/
.access__inner {
  position: relative;
  z-index: 2;
}

.access__header {
  margin-bottom: 48px;
}
.access__header h2 {
  font-size: 34px;
  font-weight: 500;
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.3;
  margin-bottom: 6px;
}
.access__sub {
  font-size: 13px;
  color: var(--muted);
  font-family: var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* 2カラムレイアウチE*/
.access__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items: start;
	margin-bottom: 50px;
}

/* マップエリア */
.access__map {
  width: 100%;
  height: 380px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.04);
}

/* 右側惁E��エリア */
.access__info {
  font-family: var(--serif);
  padding-top: 8px;
}
.access__building {
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}
.access__address {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 36px;
}

/* ルート情報 */
.access__routes {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.access__route h4 {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--green2);
  font-family: var(--sans);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.02em;
}
.access__route h4::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--green2);
  border-radius: 50%;
}
.access__route p {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
  font-family: var(--sans);
}
.access__note {
  font-size: 12px;
  color: var(--muted);
  display: block;
  margin-top: 4px;
}

.access__grid--second {
  margin-top: clamp(3rem, 6vw, 5rem);
}

/* ==========================================================================
   Accessセクション レスポンシブ対忁E
   ========================================================================= */
@media(max-width: 1024px) {
  .access {
    padding: 60px 0;
  }
  .access__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .access__map {
    height: 280px;
    order: 2;
  }
  .access__info {
    order: 1;
    padding-top: 0;
  }
  .access__address {
    margin-bottom: 28px;
  }
}

/* ==========================================================================
   Contact�E�お問い合わせ）セクション
   ========================================================================= */
.contact {
  background: #fbfaf6;
  /* 【重要】上�Eセクションから突き抜けてくる葉っぱを受け止めるため、E
     奥側の階層に沈める�Eジション設定を行いまぁE*/
  position: relative;
  z-index: 1; 
}

.contact__grid {
  display: grid;
  grid-template-columns: 500px 1fr;
  gap: 34px
}
.contact__intro > p {
  font-size: 14px;
  letter-spacing: .1em;
  color: var(--green2)
}
.contact__intro h2 {
  font-size: 30px;
  line-height: 1.45;
  margin: 6px 0 10px
}
.contact__intro span {
  font-size: 14px;
  color: var(--muted)
}
.contact__intro img {
  width: 80%;
  opacity: .13;
  margin-top: 16px
}
.form {
  display: grid;
  gap: 9px
}
.form label > span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px
}
.form b {
  font-size: 8px;
  background: var(--brown);
  color: #fff;
  border-radius: 999px;
  padding: 2px 5px
}
.form input, .form select, .form textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 5px;
  padding: 10px 12px;
  font: inherit;
  outline: none
}
.form input:focus, .form select:focus, .form textarea:focus {
  border-color: var(--green2);
  box-shadow: 0 0 0 3px rgba(120, 150, 61, .1)
}
.form__agree {
  display: flex !important;
  align-items: center;
  gap: 7px
}
.form__agree input {
  width: auto
}
.form__agree span {
  margin: 0 !important
}
.form__submit {
  width: 210px;
  justify-self: center
}
/* ==========================================================================
   Footer�E�フチE��ー�E�セクション - チE��インカンプ完�E一致牁E
   ========================================================================= */
.footer {
  background: #f4f0e5; /* あなたが調整した温かみのあるアースアイボリー */
  border-top: 1px solid var(--line);
  padding: 54px 0 24px;
}

/* 3カラム構造�E�左惁E��・中央5列ナビ�E右トップへ�E�E*/
.footer__inner {
  display: grid;
  grid-template-columns: 280px 1fr auto;
  gap: 32px;
  align-items: start;
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
}

/* 左側ブロチE�� */
.footer__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.footer__logo {
  width: 125px;
  height: auto;
  margin-bottom: 14px;
}
.footer__company {
  font-size: 13px;
  font-weight: 500;
  font-family: var(--serif);
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1;
}
.footer__address {
  font-size: 11px;
  font-style: normal;
  line-height: 1.6;
  color: var(--muted);
  font-family: var(--serif);
  letter-spacing: 0.02em;
}

/* 中央ナビゲーション�E�Eつの縦列が美しく横に並ぶ配置�E�E*/
.footer__nav {
  display: flex;
  justify-content: center;
  gap: 48px; /* 列同士の間隔 */
  flex: 1;
}
.footer__nav-col {
  display: flex;
  flex-direction: column;
  gap: 12px; /* 上下�Eリンクの隙間 */
}
.footer__nav-col a {
  font-size: 11.5px;
  font-family: var(--serif);
  color: var(--ink);
  letter-spacing: 0.04em;
  white-space: nowrap;
  line-height: 1.2;
  transition: color 0.25s ease;
}
.footer__nav-col a:hover {
  color: var(--green2);
}

/* 右側�E�トチE�E戻り�Eタン */
.footer__top-wrapper {
  display: flex;
  justify-content: flex-end;
}
.footer__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  transition: opacity 0.25s ease;
}
.footer__top:hover {
  opacity: 0.7;
}

/* 【CSS自作】カンプ通りの極細でミニマルな上向き矢印ラインアーチE*/
.footer__top-arrow {
  display: block;
  width: 16px;
  height: 28px;
  position: relative;
}
.footer__top-arrow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--ink);
  transform: translateX(-50%);
}
.footer__top-arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 1px;
  width: 7px;
  height: 7px;
  border-left: 1px solid var(--ink);
  border-top: 1px solid var(--ink);
  transform: translateX(-50%) rotate(45deg);
}
.footer__top-text {
  font-size: 9px;
  font-family: var(--serif);
  color: var(--ink);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* 最下部�E�SNS �E�Eコピ�EライチE*/
.footer__bottom {
  max-width: var(--container);
  width: 100%;
  margin: 28px auto 0;
}
.footer__bottom-inner {
  display: flex;
  align-items: center;
  padding-left: 280px; /* 【重要】PC画面では左ブロチE��の幁E��避けて、中央ナビの開始位置とスタートラインを完�E同期 */
  gap: 32px;
}

/* SNSアイコン3連�E�変数のインク色と完璧に馴染�Eように制御�E�E*/
.footer__sns {
  display: flex;
  align-items: center;
  gap: 16px;
}
.footer__sns a {
  display: inline-flex;
  color: var(--ink);
  transition: color 0.25s ease, transform 0.25s ease;
}
.footer__sns a:hover {
  color: var(--green2);
  transform: translateY(-1px);
}
.footer__sns svg {
  width: 18px;
  height: 18px;
}

.footer__copy {
  font-size: 10px;
  color: var(--muted);
  font-family: var(--sans);
  letter-spacing: 0.01em;
}
@media(max-width:1024px) {
  .container {
    width: min(calc(100% - 40px), var(--container))
  }
  .header__toggle {
    display: grid;
    gap: 4px;
    width: 40px;
    height: 40px;
    padding: 9px;
    border: 0;
    background: transparent
  }
  .header__toggle span {
    height: 1px;
    background: var(--ink)
  }
  .header__toggle b {
    font-size: 0
  }
  .header__nav {
    position: fixed;
    top: 78px;
    left: 20px;
    right: 20px;
    display: grid;
    gap: 12px;
    background: rgba(255, 253, 250, .98);
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    opacity: 0;
    transform: translateY(-15px);
    pointer-events: none;
    transition: .25s
  }
  .header__nav.is-open {
    opacity: 1;
    transform: none;
    pointer-events: auto
  }
  .hero__grid {
    grid-template-columns: 1fr
  }
  .hero__copy {
    order: 2
  }
  .hero__image {
    order: 1;
    min-height: 0;
    aspect-ratio: 16/9
  }
  .about, .vision, .contact__grid {
    grid-template-columns: 1fr
  }
  .vision__cards {
    grid-template-columns: repeat(3, 1fr)
  }
  .business__grid {
    grid-template-columns: repeat(2, 1fr)
  }
  .fee {
    grid-column: 1/-1
  }
  .news__grid {
    grid-template-columns: repeat(2, 1fr)
  }
}
@media(max-width:768px) {
  .hero__copy h1 {
    font-size: clamp(28px, 12vw, 40px)
  }
  .baton__grid {
    grid-template-columns: 1fr 1fr
  }
  .baton__grid article::before, .baton__last::after {
    display: none !important
  }
  .vision__cards {
    grid-template-columns: 1fr 1fr
  }
  .business__grid, .news__grid, .faq__grid, .footer__grid {
    grid-template-columns: 1fr
  }
  .footer nav {
    grid-template-columns: 1fr 1fr
  }
  .hero__buttons {
    display: grid
  }
  .button {
    width: 100%
  }
}
@media(max-width:576px) {
  .container {
    width: min(calc(100% - 28px), var(--container))
  }
  .section {
    padding: 34px 0
  }
  .header__inner {
    height: 64px
  }
  .header__logo img {
    width: 105px
  }
  .hero__grid {
    gap: 20px
  }
  .hero__price {
    max-width: none
  }
  .baton__grid, .vision__cards {
    grid-template-columns: 1fr
  }
  .contact__intro h2 {
    font-size: 27px
  }
  .form__submit {
    width: 100%
  }
  .footer nav {
    grid-template-columns: 1fr
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important
  }
}

@media(max-width:1024px) {
  /* �E�中略�E�他�Eスタイル�E�E*/

  /* 【追加・修正】スマ�E環墁E��は允E�E縦並びレイアウトを綺麗に維持すめE*/
  .hero {
    padding: 22px 0 28px;
    display: block; /* flexを解除 */
  }
  .hero::before {
    display: none; /* スマ�Eでは重�E合わせなぁE��め、白ぁE��ラチE�Eションを非表示に */
  }
  .hero__grid {
    grid-template-columns: 1fr;
  }
  .hero__copy {
    order: 2;
    padding-top: 20px;
  }
  .hero__image {
    position: relative; /* 絶対配置を解除して、�Eの位置�E�テキスト�E上）に戻ぁE*/
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    z-index: 1;
    order: 1;
    min-height: 0;
  }
	

}

/* ==========================================================================
   Kitchen & Spaceセクション�E�利用案�E�E�スマ�E・タブレチE��対忁E
   ========================================================================= */
@media(max-width: 1024px) {
  
  /* 1. 【最重要】�E省E枚と料��表を、ギューギューの横並びから「綺麗な縦1列」に強制変更 */
  .guide__main {
    display: flex !important;
    flex-direction: column !important; /* 上から頁E��に配置 */
    gap: 32px !important;              /* 吁E��ーチE�E間�E忁E��よい上下�E隙間 */
  }

  /* 2. 2枚�E縦長写真の器を、スマ�E画面の横幁E��っぱぁE��解き放つ */
  .guide__photo {
    width: 100% !important;
    max-width: 100% !important;
    height: 300px !important;         /* スマ�Eで見栁E��が良ぁE��品な高さに固宁E*/
    margin: 0 !important;
    border-radius: 16px;              /* カンプ画像�E美しぁE��丸をキーチE*/
    overflow: hidden;
  }
  .guide__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;                /* 縦横比を崩さず、器に合わせて綺麗に中央トリミング */
  }

  /* 3. 料��ボックスも潰れなぁE��ぁE��横幁E00%にする */
  .guide__price-box {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 32px 24px !important;    /* 冁E�Eの余白をスマ�E用に最適匁E*/
  }

  /* 4. 【つぁE��に救済】「ご利用シーン」と「設備」�E2つの箱も横並びなら、縦並びに修正 */
  .guide__info {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    margin-top: 40px !important;
  }
  .guide__info-box {
    width: 100% !important;
  }

  /* 5. アイコンが並ぶグリチE��が横に潰れるのを防ぎ、スマ�Eで押しやすい、E列、E列」に自動変化 */
  .guide__info-grid {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)) !important;
    gap: 16px !important;
  }
}

/* ==========================================================================
   FAQ�E�よくある質問）セクション スマ�E・タブレチE��対忁E
   ========================================================================= */
@media(max-width: 1024px) {
  
  /* 1. 質問カードたちが左右に並んでぁE��器を、強制皁E��上から下�E「縦1列」に変形 */
  .faq__grid,
  .faq__list,
  .faq__inner,
  .faq__content,
  .faq__items,
  .faq-container {
    display: flex !important;
    flex-direction: column !important;   /* 縦並びにする */
    grid-template-columns: 1fr !important; /* グリチE��持E��だった場合も1列に */
    gap: 24px !important;                 /* 質問同士の上下�E忁E��よい隙間 */
  }

  /* 2. 個、E�E質問箱�E�カード）�E横幁E��スマ�E画面ぁE��ぱぁE��庁E��めE*/
  .faq__item,
  .faq__card,
  .faq__box,
  .faq__qa {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* 3. もし「Q」と「A」�E斁E���E体が左右で横並びになってぁE��場合�E救渁E*/
  .faq__question,
  .faq__answer,
  .faq__q,
  .faq__a {
    width: 100% !important;
  }
}

/* ==========================================================================
   Footer�E�フチE��ー�E�セクション スマ�E・タブレチE��対忁E
   ========================================================================= */
@media(max-width: 1024px) {
  
  /* 1. 【最重要】フチE��ー冁E��の横並びを解除し、上から頁E��並ぶ縦1列にリセチE�� */
  .footer__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;    /* スマ�E時�E中央寁E��が最も美しく映えまぁE*/
    text-align: center !important;
    gap: 40px !important;               /* 吁E��ロチE��の間�E忁E��よい縦の余白 */
    padding: 40px 20px !important;
  }
	
	.footer__info {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;    /* ロゴめE��キスト�E塊を中央に揁E��めE*/
  text-align: center !important;     /* チE��スト�E体を真ん中寁E��にする */
}

/* 会社名テキスト！Eiving space Roots�E��E個別微調整 */
.footer__company {
  text-align: center !important;
  margin-top: 12px !important;       /* ロゴとの間�Eほどよい隙間 */
  width: 100% !important;
}

/* 住所チE��ストも念のため中央揁E��を完�E保証 */
.footer__address {
  text-align: center !important;
  margin-top: 8px !important;
  width: 100% !important;
}

  /* 2. 視線誘導を最適化する並び頁E�E並び替え！E:惁E�� ➁E2:ナビ ➁E3:トップへ戻る！E*/
  .footer__info { order: 1; width: 100% !important; }
  .footer__nav { order: 2; }
  .footer__top-wrapper { order: 3; }

  /* 3. ロゴと住所惁E��のスタイリング */
  .footer__logo {
    max-width: 150px !important;       /* スマ�E画面に合わせた上品なロゴサイズ */
    height: auto !important;
    margin: 0 auto 12px !important;
  }

  /* 4. 【大改造、E列�Eナビを、スマ�E画面で潰れなぁE��ぁE��美しぁE��E列グリチE��」へ自動変形 */
  .footer__nav {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 綺麗に2列に刁E�E */
    gap: 24px 32px !important;          /* 縦・横のリンク同士の絶妙な隙間 */
    width: 100% !important;
    max-width: 440px !important;        /* 横に庁E��りすぎるのを防止 */
    text-align: left !important;        /* 斁E���E始まりを揁E��て読みめE��ぁE*/
    padding: 0 16px !important;
  }
  
  .footer__nav-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  /* リンクの斁E��が小さく潰れるのを防ぎ、タチE�E領域を庁E��て「誤タチE�E」を防止 */
  .footer__nav-col a {
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    padding: 6px 0 !important;          /* 持E��押しやすいように上下に透�EなクチE��ョンを付丁E*/
    display: inline-block !important;
  }

  /* 5. ペ�Eジの先頭へ戻る�Eタン */
  .footer__top-wrapper {
    margin: 0 !important;
  }
  
  /* 6. 最下部�E�ENSアイコン �E�Eコピ�Eライト）を縦並び中央寁E��に */
  .footer__bottom-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 24px 20px !important;
    text-align: center !important;
  }
  
  .footer__sns {
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important;
  }
  .footer__sns a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 8px !important;            /* SNSアイコンをスマ�EでタチE�Eしやすく */
  }
}

/* ==========================================================================
   趁E��型スマ�E�E�画面幁E60px以下）での最終微調整
   ========================================================================= */
@media(max-width: 560px) {
  /* 画面幁E��極端に狭ぁE��マ�Eでは、E列並びすら解き放ち、完�Eな1列中央寁E��にすることで斁E��被りを100%防ぁE*/
  .footer__nav {
    grid-template-columns: 1fr !important;
    text-align: center !important;     /* 1列時は中央寁E��が最も綺麗でぁE*/
    gap: 16px !important;
  }
  .footer__nav-col {
    gap: 4px !important;
  }
}

/* ==================================================
   About
   Roots�����g�ޏz�Œ^�̐���
================================================== */

.section--about {
  background: var(--paper);
}

.about {
  position: relative;
}

/* ���e�L�X�g�{�E�摜��2�J���� */
.about__content {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: clamp(40px, 6vw, 86px);
}

/* ���e�L�X�g */
.about__text {
  max-width: 440px;
}

.about__eyebrow {
  margin-bottom: 12px;

  color: var(--green2);

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.about__text h2 {
  margin-bottom: 22px;

  font-size: clamp(25px, 3vw, 32px);
  line-height: 1.45;
  letter-spacing: 0.03em;
}

.about__text p {
  color: var(--muted);

  font-size: 14px;
  line-height: 2.05;
}

.about__text p + p {
  margin-top: 18px;
}

/* �E�摜 */
.about__cycle-image {
  position: relative;

  margin: 0;

  overflow: hidden;

  border-radius: 28px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.about__cycle-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* �摜�̂܂��ɏ����_�炩���]��������ꍇ */
.about__cycle-image--padded {
  padding: 24px;
}

/* ==================================================
   About responsive
================================================== */

@media (max-width: 1024px) {

  .about__content {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .about__text {
    max-width: 720px;
  }

  .about__cycle-image {
    max-width: 760px;
  }
}

@media (max-width: 768px) {

  .about__text h2 {
    font-size: clamp(30px, 9vw, 42px);
  }

  .about__text p {
    font-size: 13px;
    line-height: 2;
  }

  .about__cycle-image {
    border-radius: 20px;
  }
}

@media (max-width: 576px) {

  .about__content {
    gap: 28px;
  }

  .about__text h2 {
    font-size: 30px;
  }

  .about__cycle-image {
    border-radius: 16px;
  }
}

/* ==================================================
   Guide equipment accordion animation
   �ݔ��ꗗ�A�R�[�f�B�I���F������ƊJ��
================================================== */

.guide__equipment {
  overflow: hidden;
}

/* summary���̂̓��� */
.guide__equipment-summary {
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.guide__equipment-summary:hover {
  background-color: rgba(136, 168, 76, 0.06);
}

/* �{�{�^���̃A�j���[�V���� */
.guide__equipment-summary i {
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}

.guide__equipment[open] .guide__equipment-summary i {
  background-color: var(--brown);
  transform: rotate(180deg);
}

/* ���g�̏������ */
.guide__equipment-body {
  overflow: hidden;

  opacity: 0;
  transform: translateY(-8px);

  transition:
    height 0.42s ease,
    opacity 0.32s ease,
    transform 0.32s ease;
}

/* �J������̌����� */
.guide__equipment.is-open .guide__equipment-body {
  opacity: 1;
  transform: translateY(0);
}

/* �‚���r�� */
.guide__equipment.is-closing .guide__equipment-body {
  opacity: 0;
  transform: translateY(-8px);
}

/* ���������炷�ݒ�̐l�ɂ̓A�j���[�V�������Ȃ� */
@media (prefers-reduced-motion: reduce) {

  .guide__equipment-body,
  .guide__equipment-summary,
  .guide__equipment-summary i {
    transition: none !important;
  }
}

/* ==================================================
   Booking Calendar
   ���p��]���̃J�����_�[
================================================== */

.booking-calendar {
  margin-top: 4px;
  padding: 18px;

  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(39, 35, 25, 0.04);
}

.booking-calendar[hidden],
.booking-time[hidden] {
  display: none !important;
}

.booking-calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  margin-bottom: 10px;
}

.booking-calendar__month {
  margin: 0;

  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.booking-calendar__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  color: #fff;
  background: var(--green2);

  border: 0;
  border-radius: 999px;

  cursor: pointer;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    opacity 0.25s ease;
}

.booking-calendar__nav:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.booking-calendar__lead {
  margin: 0 0 10px;

  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}

.booking-calendar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  margin-bottom: 12px;

  color: var(--muted);
  font-size: 11px;
}

.booking-calendar__legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.booking-calendar__legend i {
  display: inline-block;

  width: 12px;
  height: 12px;

  border-radius: 50%;
}

.booking-calendar__legend .is-available {
  background: rgba(136, 168, 76, 0.22);
  border: 1px solid var(--green2);
}

.booking-calendar__legend .is-unavailable {
  background: rgba(165, 117, 67, 0.12);
  border: 1px solid var(--brown);
}

.booking-calendar__legend .is-selected {
  background: var(--green2);
}

.booking-calendar__week,
.booking-calendar__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.booking-calendar__week {
  margin-bottom: 6px;
}

.booking-calendar__week span {
  display: grid;
  place-items: center;

  min-height: 28px;

  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.booking-calendar__day {
  position: relative;

  display: grid;
  place-items: center;
  gap: 2px;

  min-height: 54px;
  padding: 6px 4px;

  background: #fbfaf6;
  border: 1px solid var(--line);
  border-radius: 10px;

  color: var(--ink);

  cursor: pointer;

  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.booking-calendar__day:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(39, 35, 25, 0.06);
}

.booking-calendar__day-number {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1;
}

.booking-calendar__day-mark {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.booking-calendar__day.is-available {
  background: rgba(136, 168, 76, 0.08);
  border-color: rgba(136, 168, 76, 0.4);
}

.booking-calendar__day.is-available .booking-calendar__day-mark {
  color: var(--green2);
}

.booking-calendar__day.is-unavailable {
  color: rgba(36, 34, 30, 0.45);
  background: rgba(165, 117, 67, 0.05);
  border-color: rgba(165, 117, 67, 0.22);

  cursor: not-allowed;
}

.booking-calendar__day.is-unavailable .booking-calendar__day-mark {
  color: var(--brown);
}

.booking-calendar__day.is-empty {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  cursor: default;
}

.booking-calendar__day.is-selected {
  color: #fff;
  background: var(--green2);
  border-color: var(--green2);
}

.booking-calendar__day.is-selected .booking-calendar__day-mark {
  color: #fff;
}

.booking-calendar__selected {
  margin: 12px 0 0;
  padding: 10px 12px;

  color: var(--green2);
  background: rgba(136, 168, 76, 0.08);
  border-radius: 10px;

  font-size: 12px;
  font-weight: 700;
}

/* ==================================================
   Booking Time
   ���p����
================================================== */

.booking-time {
  margin-top: 4px;
  padding: 16px 18px;

  background: #fbfaf6;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.booking-time__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.booking-time__note {
  margin: 10px 0 0;

  color: var(--muted);
  font-size: 11px;
  line-height: 1.8;
}

@media (max-width: 768px) {

  .booking-calendar {
    padding: 14px;
  }

  .booking-calendar__week,
  .booking-calendar__days {
    gap: 4px;
  }

  .booking-calendar__day {
    min-height: 48px;
    border-radius: 8px;
  }

  .booking-calendar__day-number {
    font-size: 14px;
  }

  .booking-calendar__day-mark {
    font-size: 11px;
  }

  .booking-time__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {

  .booking-calendar__month {
    font-size: 18px;
  }

  .booking-calendar__day {
    min-height: 44px;
    padding: 5px 3px;
  }
}

/* ========================================
   ���p���� ������
   �E�ŕʂ����������ď㉺����
   �E�R���[�L���O�����𒆉�����
======================================== */

/* ���z�S�̂������тŏ㉺������ */
.guide__price-item strong {
  display: inline-flex;
  align-items: center;
  gap: 0.12em;

  color: var(--brown);
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.1;
}

/* �~�Ɛŕʂ������߂� */
.guide__price-item strong small {
  display: inline-flex;
  align-items: center;

  margin-left: 0;
  font-size: 0.48em; /* �e34px�ɑ΂��Ė�16px */
  line-height: 1.1;
  white-space: nowrap;
}

/* �R���[�L���O���p�̗����s���������z�u */
.guide__price-group--coworking .guide__price-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;

  min-height: 86px;
  text-align: center;
}

/* ==================================================
   About section
   ���E���C�A�E�g���㉺���C�A�E�g�֕ύX
   �^�C�g�����y�[�W������
================================================== */

/* ���e�L�X�g�{�E�摜���A�㉺���тɕύX */
.about__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}

/* �e�L�X�g�G���A�𒆉��񂹂̕��� */
.about__text {
  max-width: 820px;
  margin-right: auto;
  margin-left: auto;
}

/* ABOUT ROOTS�̏����o���𒆉��� */
.about__eyebrow {
  text-align: center;
}

/* �^�C�g�����y�[�W������ */
.about__text h2 {
  max-width: 900px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 28px;

  text-align: center;
}

/* �{���͓ǂ݂₷���D��ō����� */
.about__text p:not(.about__eyebrow) {
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
  text-align: left;
}

/* �{�����m�̗]�� */
.about__text p:not(.about__eyebrow) + p {
  margin-top: 18px;
}

/* �z�}�摜�𒆉��ɔz�u */
.about__cycle-image {
  width: min(100%, 980px);
  margin-right: auto;
  margin-left: auto;
}

/* �摜�͉��������ς��ɂ��ꂢ�ɕ\�� */
.about__cycle-image img {
  width: 100%;
  height: auto;
  display: block;
}
/* �R���[�L���O�̍����x�� */
.guide__price-group--coworking .guide__price-item span {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

/* �R���[�L���O�̋��z */
.guide__price-group--coworking .guide__price-item strong {
  justify-content: center;
}

/* �R���[�L���O�̒��߂������� */
.guide__price-group--coworking .guide__price-note {
  text-align: center;
}

/* ========================================
   �C�x���g���p�̗����s���㉺�����ɑ�����
======================================== */

/* �C�x���g���p�̊e�����{�b�N�X */
.guide__price-group:not(.guide__price-group--coworking) .guide__price-item {
  display: flex;
  align-items: center;          /* �㉺���� */
  justify-content: space-between;
  gap: 18px;

  min-height: 86px;             /* �{�b�N�X�̍����𑵂��� */
  padding: 16px 18px;
}

/* �����́u1���o�X���i8���ԁj�v�Ȃ� */
.guide__price-group:not(.guide__price-group--coworking) .guide__price-item span {
  display: inline-flex;
  align-items: center;          /* ���x�������㉺���� */
  margin: 0;

  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* ���z�� */
.guide__price-group:not(.guide__price-group--coworking) .guide__price-item strong {
  display: inline-flex;
  align-items: center;          /* 4,800�~�^�ŕʂ��㉺���� */
  justify-content: flex-end;

  margin: 0;
  white-space: nowrap;
}

@media (max-width: 576px) {
  .guide__price-group:not(.guide__price-group--coworking) .guide__price-item {
    min-height: 78px;
    padding: 14px 14px;
    gap: 12px;
  }

  .guide__price-group:not(.guide__price-group--coworking) .guide__price-item span {
    font-size: 13px;
  }
}

/* �ݔ��ꗗ�A�R�[�f�B�I���Fsummary���e�L�X�g��2�s�ɂ��� */
.guide__equipment-summary-text {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* ���C���e�L�X�g */
.guide__equipment-summary-main {
  display: block;
}

/* �I�v�V�������� */
.guide__equipment-summary-option {
  display: block;
  font-size: 12px; !important;
  font-weight: 500;
  line-height: 1.6;
  color: #8a6a3f; /* �����������������n */
}

/* ==========================================================================
   Instagram / mobile menu state
   ========================================================================== */
.header__actions{display:none}.header__instagram{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:34px;height:34px;color:var(--ink);border-radius:50%;transition:color .25s ease,background-color .25s ease,transform .25s ease}.header__instagram svg{display:block;width:20px;height:20px;fill:currentColor}.header__instagram:hover{color:#fff;background:var(--green2);transform:translateY(-1px)}.header__instagram--mobile{display:none}.header__instagram--pc{display:inline-flex;margin-left:-8px}
@media(max-width:1024px){.header__actions{position:relative;z-index:52;display:flex;align-items:center;gap:4px;margin-left:auto}.header__instagram--mobile{display:inline-flex;width:40px;height:40px}.header__instagram--pc{display:none!important}.header__toggle{position:relative;display:block;width:40px;height:40px;padding:0}.header__toggle span{position:absolute;left:9px;width:22px;height:1px;margin:0;transform-origin:center;transition:top .3s ease,transform .3s ease,opacity .2s ease}.header__toggle span:nth-child(1){top:13px}.header__toggle span:nth-child(2){top:20px}.header__toggle span:nth-child(3){top:27px}.header__toggle.is-open span:nth-child(1){top:20px;transform:rotate(45deg)}.header__toggle.is-open span:nth-child(2){opacity:0;transform:scaleX(0)}.header__toggle.is-open span:nth-child(3){top:20px;transform:rotate(-45deg)}.header__nav{z-index:51}}

/* ==========================================================================
   Operating company
   ========================================================================== */
.operating-company{padding:clamp(54px,6vw,82px) 0;background:var(--bg);border-top:1px solid rgba(229,223,210,.7)}.operating-company__inner{display:grid;grid-template-columns:minmax(180px,260px) minmax(0,1fr);gap:clamp(40px,7vw,100px);align-items:start}.operating-company__eyebrow{margin-bottom:8px;color:var(--green2);font-family:var(--sans);font-size:10px;line-height:1.5;letter-spacing:.16em}.operating-company__heading h2{font-size:clamp(24px,2.5vw,32px);line-height:1.4;letter-spacing:.04em}.operating-company__content{width:100%;max-width:760px}.operating-company__introduction{max-width:680px;margin-bottom:38px}.operating-company__lead{margin-bottom:14px;font-size:16px;line-height:1.9}.operating-company__introduction p:not(.operating-company__lead){color:var(--muted);font-size:13px;line-height:2}.operating-company__profile{margin:0;border-top:1px solid var(--line)}.operating-company__row{display:grid;grid-template-columns:140px minmax(0,1fr);gap:24px;padding:15px 0;border-bottom:1px solid var(--line)}.operating-company__row dt,.operating-company__row dd{margin:0}.operating-company__row dt{color:var(--muted);font-family:var(--sans);font-size:11px;font-weight:500;line-height:1.8}.operating-company__row dd{font-size:12px;line-height:1.9}.operating-company__row a{text-decoration:underline;text-decoration-color:rgba(36,34,30,.3);text-underline-offset:4px}.operating-company__row a:hover{color:var(--green2)}
@media(max-width:768px){.operating-company{padding:48px 0}.operating-company__inner{grid-template-columns:1fr;gap:28px}.operating-company__introduction{margin-bottom:30px}.operating-company__row{grid-template-columns:110px minmax(0,1fr);gap:18px}}
@media(max-width:576px){.operating-company{padding:40px 0}.operating-company__row{grid-template-columns:1fr;gap:4px;padding:14px 0}.operating-company__row dt{color:var(--green2);font-size:10px}}

/* ==========================================================================
   Contact Form 7調整
   ========================================================================== */

.contact__form .wpcf7 {
  width: 100%;
}

.contact__form .wpcf7-form {
  margin: 0;
}

/* CF7が各入力欄の周囲に追加する要素 */
.contact__form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* 入力欄 */
.contact__form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance) {
  width: 100%;
}

/* テキストエリア */
.contact__form textarea {
  min-height: 180px;
  resize: vertical;
}

/* 同意欄 */
.contact__form .wpcf7-acceptance {
  display: block;
}

.contact__form .wpcf7-acceptance label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.contact__form .wpcf7-acceptance input {
  width: auto;
  flex-shrink: 0;
}

/* 送信ボタン */
.contact__form .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 210px;
  min-height: 46px;
  padding: 0 24px;
  color: #fff;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  background: var(--green2);
  border: 0;
  border-radius: 999px;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.contact__form .wpcf7-submit:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

.contact__form .wpcf7-submit:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  transform: none;
}

/* 入力エラー */
.contact__form .wpcf7-not-valid {
  border-color: #b85f4b !important;
}

.contact__form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 4px;
  color: #b85f4b;
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.6;
}

/* 送信結果メッセージ */
.contact__form .wpcf7-response-output {
  margin: 20px 0 0 !important;
  padding: 12px 16px !important;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.8;
  border-width: 1px !important;
  border-radius: 5px;
}

/* CF7の読み込みアイコン */
.contact__form .wpcf7-spinner {
  margin: 0 0 0 10px;
}

@media (max-width: 576px) {

  .contact__form .wpcf7-submit {
    width: 100%;
  }
}

/* reCAPTCHA v3の右下バッジを非表示 */
.grecaptcha-badge {
  visibility: hidden;
}

.form__recaptcha-note {
  margin-top: 16px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 10px;
  line-height: 1.8;
  text-align: center;
}

.form__recaptcha-note a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   法務ページ
   プライバシーポリシー・特定商取引法に基づく表記
   ========================================================================== */

/*
 * 本文エリアの基本幅
 * page.php側で .legal-page または .page-content が付いていなくても、
 * WordPress固定ページ本文に効くようにしています。
 */
.page .entry-content,
.page-content,
.legal-page__content {
  width: min(100%, 860px);
  margin-inline: auto;
  color: var(--ink);
  font-family: var(--serif);
}

/* ページタイトル */
.page .entry-title,
.page-content > h1,
.legal-page__title {
  margin: 0 0 clamp(36px, 5vw, 64px);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.45;
  letter-spacing: 0.04em;
}

/* 大見出し */
.page .entry-content h2,
.page-content h2,
.legal-page__content h2 {
  position: relative;
  margin: clamp(48px, 7vw, 76px) 0 24px;
  padding: 0 0 14px;
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.6;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--line);
}

/* 最初のh2だけ上余白を少し抑える */
.page .entry-content h2:first-child,
.page-content h2:first-child,
.legal-page__content h2:first-child {
  margin-top: 0;
}

/* 小見出し */
.page .entry-content h3,
.page-content h3,
.legal-page__content h3 {
  margin: 36px 0 16px;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.65;
  letter-spacing: 0.03em;
}

/* 段落 */
.page .entry-content p,
.page-content p,
.legal-page__content p {
  margin: 0 0 1.6em;
  font-size: 15px;
  line-height: 2.05;
  letter-spacing: 0.025em;
}

/* 見出し直後の段落 */
.page .entry-content h2 + p,
.page-content h2 + p,
.legal-page__content h2 + p,
.page .entry-content h3 + p,
.page-content h3 + p,
.legal-page__content h3 + p {
  margin-top: 0;
}

/* 箇条書き */
.page .entry-content ul,
.page .entry-content ol,
.page-content ul,
.page-content ol,
.legal-page__content ul,
.legal-page__content ol {
  margin: 0 0 2em;
  padding-left: 1.6em;
}

.page .entry-content li,
.page-content li,
.legal-page__content li {
  margin-bottom: 0.7em;
  font-size: 15px;
  line-height: 1.95;
  letter-spacing: 0.02em;
}

.page .entry-content li:last-child,
.page-content li:last-child,
.legal-page__content li:last-child {
  margin-bottom: 0;
}

/* 番号付きリスト */
.page .entry-content ol,
.page-content ol,
.legal-page__content ol {
  padding-left: 1.8em;
}

/* リンク */
.page .entry-content a,
.page-content a,
.legal-page__content a {
  color: var(--green2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: opacity 0.25s ease;
}

.page .entry-content a:hover,
.page-content a:hover,
.legal-page__content a:hover {
  opacity: 0.7;
}

/* 太字 */
.page .entry-content strong,
.page-content strong,
.legal-page__content strong {
  font-weight: 600;
}

/* 引用・補足ボックス */
.page .entry-content blockquote,
.page-content blockquote,
.legal-page__content blockquote {
  margin: 32px 0;
  padding: 24px 28px;
  color: var(--muted);
  background: var(--soft);
  border-left: 3px solid var(--green2);
}

.page .entry-content blockquote p,
.page-content blockquote p,
.legal-page__content blockquote p {
  margin-bottom: 0;
}

/* 区切り線 */
.page .entry-content hr,
.page-content hr,
.legal-page__content hr {
  margin: 48px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

/* テーブル */
.page .entry-content table,
.page-content table,
.legal-page__content table {
  width: 100%;
  margin: 28px 0 44px;
  border-collapse: collapse;
  border-top: 1px solid var(--line);
}

.page .entry-content th,
.page .entry-content td,
.page-content th,
.page-content td,
.legal-page__content th,
.legal-page__content td {
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.9;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.page .entry-content th,
.page-content th,
.legal-page__content th {
  width: 28%;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  background: var(--soft);
}

/* 制定日 */
.page .entry-content p:last-child,
.page-content p:last-child,
.legal-page__content p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   スマホ
   ========================================================================== */

@media (max-width: 768px) {

  .page .entry-content,
  .page-content,
  .legal-page__content {
    width: 100%;
  }

  .page .entry-title,
  .page-content > h1,
  .legal-page__title {
    margin-bottom: 36px;
    font-size: 30px;
    line-height: 1.5;
  }

  .page .entry-content h2,
  .page-content h2,
  .legal-page__content h2 {
    margin-top: 44px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    font-size: 22px;
    line-height: 1.65;
  }

  .page .entry-content h3,
  .page-content h3,
  .legal-page__content h3 {
    margin-top: 30px;
    margin-bottom: 14px;
    font-size: 18px;
  }

  .page .entry-content p,
  .page-content p,
  .legal-page__content p,
  .page .entry-content li,
  .page-content li,
  .legal-page__content li {
    font-size: 14px;
    line-height: 2;
  }

  .page .entry-content th,
  .page .entry-content td,
  .page-content th,
  .page-content td,
  .legal-page__content th,
  .legal-page__content td {
    display: block;
    width: 100%;
  }

  .page .entry-content th,
  .page-content th,
  .legal-page__content th {
    padding-bottom: 8px;
    border-bottom: 0;
  }

  .page .entry-content td,
  .page-content td,
  .legal-page__content td {
    padding-top: 8px;
  }
}

/* ==========================================================================
   固定ページ本文
   プライバシーポリシー・特定商取引法に基づく表記
   ========================================================================== */

/* 固定ページ全体 */
body.page main {
  padding-top: 70px;
  padding-bottom: 100px;
}

/* 本文を読みやすい横幅にする */
body.page main article,
body.page main .page__content,
body.page main .page-content,
body.page main .entry-content {
  width: min(calc(100% - 48px), 900px);
  margin-right: auto;
  margin-left: auto;
}

/* ページタイトル */
body.page main h1 {
  margin: 0 0 42px !important;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/* 各項目の見出し */
body.page main h2 {
  margin: 52px 0 20px !important;
  padding-bottom: 12px;
  font-size: clamp(20px, 2.4vw, 27px);
  line-height: 1.6;
  letter-spacing: 0.035em;
  border-bottom: 1px solid var(--line);
}

/* 最初の見出し */
body.page main h1 + h2,
body.page main h1 + p + h2 {
  margin-top: 36px !important;
}

/* 小見出し */
body.page main h3 {
  margin: 34px 0 15px !important;
  font-size: 18px;
  line-height: 1.7;
}

/* 通常の文章 */
body.page main p {
  margin: 0 0 1.65em !important;
  font-size: 15px;
  line-height: 2.05;
  letter-spacing: 0.02em;
}

/* 箇条書き */
body.page main ul,
body.page main ol {
  margin: 18px 0 30px !important;
  padding-left: 1.8em;
}

/* 箇条書きの各項目 */
body.page main li {
  margin-bottom: 9px;
  font-size: 15px;
  line-height: 1.95;
  letter-spacing: 0.015em;
}

/* 最後の項目だけ余白をなくす */
body.page main li:last-child {
  margin-bottom: 0;
}

/* 見出し直後の文章 */
body.page main h2 + p,
body.page main h3 + p {
  margin-top: 0 !important;
}

/* リンク */
body.page main a {
  color: var(--green2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* 電話番号や会社概要部分 */
body.page main address {
  margin: 22px 0;
  font-style: normal;
  font-size: 15px;
  line-height: 2;
}

/* テーブルを使った場合 */
body.page main table {
  width: 100%;
  margin: 26px 0 44px;
  border-collapse: collapse;
  border-top: 1px solid var(--line);
}

body.page main th,
body.page main td {
  padding: 17px 20px;
  font-size: 14px;
  line-height: 1.9;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

body.page main th {
  width: 28%;
  background: var(--soft);
}

/* ==========================================================================
   スマートフォン
   ========================================================================== */

@media (max-width: 768px) {

  body.page main {
    padding-top: 45px;
    padding-bottom: 70px;
  }

  body.page main article,
  body.page main .page__content,
  body.page main .page-content,
  body.page main .entry-content {
    width: min(calc(100% - 36px), 900px);
  }

  body.page main h1 {
    margin-bottom: 32px !important;
    font-size: 28px;
    line-height: 1.55;
  }

  body.page main h2 {
    margin-top: 42px !important;
    margin-bottom: 18px !important;
    padding-bottom: 10px;
    font-size: 21px;
    line-height: 1.65;
  }

  body.page main h3 {
    margin-top: 28px !important;
    margin-bottom: 13px !important;
    font-size: 17px;
  }

  body.page main p,
  body.page main li {
    font-size: 14px;
    line-height: 2;
  }

  body.page main ul,
  body.page main ol {
    padding-left: 1.5em;
  }

  body.page main th,
  body.page main td {
    display: block;
    width: 100%;
    padding: 14px 16px;
  }

  body.page main th {
    padding-bottom: 7px;
    border-bottom: 0;
  }

  body.page main td {
    padding-top: 7px;
  }
}

/* ==========================================================================
   Contact Form 7
   自動生成されるpタグ・brタグの余白調整
   ========================================================================== */

.contact__form .wpcf7-form {
  display: grid;
  gap: 16px;
}

/* CF7が自動生成する段落余白を解除 */
.contact__form .wpcf7-form > p {
  margin: 0 !important;
  padding: 0 !important;
}

/* 各入力項目 */
.contact__form .wpcf7-form > p > label {
  display: grid;
  gap: 7px;
  margin: 0 !important;
}

/* ラベルと入力欄の間に入る不要な改行を無効化 */
.contact__form .wpcf7-form > p > br {
  display: none;
}

/* CF7の入力欄ラッパー */
.contact__form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
  margin: 0;
}

/* 入力欄 */
.contact__form input[type="text"],
.contact__form input[type="email"],
.contact__form input[type="tel"],
.contact__form select,
.contact__form textarea {
  display: block;
  width: 100%;
  margin: 0 !important;
}

/* テキストエリア */
.contact__form textarea {
  min-height: 150px;
}

/* カレンダーと時間選択 */
.contact__form .booking-calendar,
.contact__form .booking-time {
  margin: 4px 0 0;
}

/* 同意欄 */
.contact__form .form__agree {
  margin: 2px 0 0;
}

.contact__form .form__agree p {
  margin: 0 !important;
}

.contact__form .form__agree .wpcf7-list-item {
  margin: 0;
}

/* 送信ボタン */
.contact__form .form__submit-wrap {
  margin: 2px 0 0;
}

.contact__form .form__submit-wrap p {
  margin: 0 !important;
}

/* reCAPTCHA説明 */
.contact__form .form__recaptcha-note {
  margin: 0 !important;
}

/* エラーメッセージ */
.contact__form .wpcf7-not-valid-tip {
  margin-top: 6px;
}

/* 送信結果 */
.contact__form .wpcf7-response-output {
  margin: 8px 0 0 !important;
}

/* ==========================================================================
   Contact Form 7
   お問い合わせ内容テキストエリアの高さ調整
   ========================================================================== */

.contact__form textarea.wpcf7-textarea {
  width: 100%;
  height: 150px !important;
  min-height: 150px !important;
  max-height: 300px;
  padding: 14px 16px;
  line-height: 1.8;
  resize: vertical;
}