/* 全体の横スクロールを抑止（推奨） */
:where(html, body){ overflow-x: clip; }

/* clip非対応ブラウザのフォールバック */
@supports not (overflow: clip){
  :where(html, body){ overflow-x: hidden; }
}
	 .fac-hero{
    position: relative;
    min-height: clamp(260px, 48vw, 480px);
    background: center / cover no-repeat var(--hero);
    display: grid;
    place-items: center;
    isolation: isolate;
  }
  .fac-hero::before{
    content: "";
    position: absolute;
    inset: 0;
    background: var(--hero, #ccc) center/cover no-repeat;
  }
  .fac-hero__inner{position: relative;
    z-index: 1;
    text-align: center;
    color: #fff; }
	
.fac-hero__en{
	font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
    letter-spacing: .04em;
    font-size: clamp(34px, 5vw, 56px);
    margin: 0 0 .3em;
	}
.fac-hero__ja{
	margin: 0;
    font: normal 13px / 1 "Hiragino Sans", "Noto Sans JP", sans-serif;
	}
	
/* ===== Access 情報セクション ===== */
.fac-access-info{
  padding:5em 0em 10em 10em;
}

/* 白いカード＆2カラム */
.fac-access-info .access-grid{
  display: grid;
  grid-template-columns: 1.05fr 1.2fr;       /* 右（地図）を少し広く */
  gap: 10em;
  align-items: start;
  background: #fff;
}

/* 左カラム：テキスト側 */
.access-caption{
  margin: 4px 0 10px;
  font-size: 1em;
   font-weight: 700;
  font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
  letter-spacing: .06em;
  color: #333;
}
.access-logo{ margin: 0 0 12px; }
.access-logo img{
  display: block;
  width: min(520px, 100%);
  height: auto;
}



.access-address p{
  margin: 16px 0 0;
  font-size: 1em;
font-weight: 700;
font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
  color: #222;
}
.access-parking{
  margin: 18px 0 10px;
  font-weight: 700;
}
.access-notes{
  margin: 16px 0 0;
    padding-left: 0em;
    font-size: 1em;
    font-weight: 400;
	font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
}
.access-notes li{ list-style: disc; }
.car-access__desc {
  margin-bottom: 1em; /* 地図との余白 */
  text-align: center;
  font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
}

.car-access__title {
  font-size: 1.2em;
  font-weight: 700;
  margin: 0 0 0.4em;
  color: #222;
}

.car-access__note {
  font-size: 1em;
  font-weight: 500;
  margin: 0;
  color: #333;
}
/* 右カラム：地図 */
.access-col--map iframe{
  width: 100%;
  height: clamp(280px, 42vw, 420px); /* だいたいスクショと同じ高さ感 */
}

/* 2) ロゴは枠いっぱい＝常にコンテナ幅と一致 */
.access-logo{ grid-column: 1 / -1; margin: 0 0 12px; }
.access-logo img{ display:block; width:100%; height:auto; }

/* 3) 文字群は “Spa 左端” ライン（2列目）から開始。左揃えに固定 */
.access-caption,
.access-address,
.access-parking,
.access-notes{
  grid-column: 2;
  justify-self: start;
  text-align: left;
}

/* 4) 念のため、以前の右寄せ指定を打ち消し（もし残っていれば） */
.fac-access-info .access-col--text{ justify-items: start !important; }
.access-logo img{ margin-left: -5em; margin-top: -3em; max-width:81%; }

/* 5) 極小画面でも溢れないように語の折返し（任意） */
.access-address, .access-notes{ overflow-wrap: anywhere; }
	
.fac-access-info .access-col--text {
  justify-self: end;   /* ← これで右端に寄る */
}
	
.car-access__title-en,
.train-access__title-en,
.bus-access__title-en{
	margin: 0;
        font-weight: 500;
        line-height: 1.2;
        background: linear-gradient(135deg, var(--grad1, #4aa37a) 0%, var(--grad2, #9ed0b8) 50%, var(--grad3, #4aa37a) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        font-family: "Baskervville", serif;
        font-size: 3em;
	margin: 0 0 .3em;
	font-size:3em;
	}
	
	
.car-access__title-en.show,
.train-access__title-en.show,
.bus-access__title-en.show {
  opacity: 1;
    transform: translateY(0);
 }

.car-access__title-en,
.train-access__title-en,
.bus-access__title-en{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
 }
	
	
/* デフォルトはPC用だけ表示 */
.car-left-sp { display: none; }
.train-access-sp { display: none; }
	
	
.l-container02{
	text-align:center;
	margin-bottom:5em;
	}
.car-access__title-ja,
.train-access__title-ja,
.bus-access__title-ja{
	margin:0 ;
	color: #6e6e6e;
	}
	.car-access{
		padding:0em 5em;
	}

	
/* 2カラム（画像×画像） */
.car-access__flex{
  display: flex;
  gap: clamp(16px, 3vw, 48px);
  align-items: flex-start;
	margin-bottom:10em;
}
.car-access__item{
  flex: 1 1 480px;        /* 両方ほぼ半分、最小幅確保 */
  margin: 0;
}
.car-access__item img{
  display: block;
  width: 100%;
  height: auto;           /* アスペクト比維持で伸縮 */
  max-width: 100%;
}

.train-access{
margin-top: 7em;
	}
	
.train-access__item{
	margin-bottom:10em;
	}
	
.bus-access__body{
	text-align:center;
	}
	
.bus-access__body p {
  margin-bottom: 2.5em;
}
.bus-access__body p:last-child {
  margin-bottom: 2em; 
}
.bus-access__link{
	color: #4b8;
	}
	
.fac-access-info .access-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* 左右を同じ比率にする */
  align-items: start;
  background: #fff;
}
.car-left-sp{
	margin-bottom:2em;
	}

/* SPは縦並び */
@media (max-width: 767.98px){
  .car-access__flex{ flex-direction: column; gap: 20px; }
  .car-access__item{ flex-basis: auto; }
.fac-access-info{
	padding:3em 0em;
	}
.fac-access-info .access-col--text{
	padding:0em 2em;
	}
 
  /* グリッドを1列にして上下並び */
  .fac-access-info .access-grid{
    grid-template-columns: 1fr;
    gap: 1.8em;
  }

  /* 左カラム（テキスト）は横幅100% */
  .fac-access-info .access-col--text{
    width: 100%;
    padding: 0 1em;
    justify-self: start;
  }

  /* ロゴは画面幅にフィット */
  .access-logo img{
    width: 90%;
    margin-left: 0.6em;
  }

  /* 右カラム（地図）も全幅 */
  .fac-access-info .access-col--map iframe{
    width: 100%;
    height: 400px;   /* スマホでは少し低めに */
  }

.access-caption{
	display:none;
	}
.access-logo{
	display:none;
	}
.car-access{
	padding:0em 2em;
	}
.car-access__item--left:not(.car-left-sp) { display: none; } /* PC用を消す */
  .car-left-sp { display: block; } /* SP用を出す */
	
.car-access__title-en, .train-access__title-en, .bus-access__title-en{
	font-size:25px;
	}
.l-container02 {
    margin-bottom: 3em;
}
.car-access__title {
    font-size: 0.8em;
}
.car-access__note {
    font-size: 0.8em;
}
.train-access__item:not(.train-access-sp) { display: none; }
  .train-access-sp { display: block; }
.bus-access__body{
	text-align:center;
	font-size:0.8em;
	}
.car-access__title-ja, .train-access__title-ja, .bus-access__title-ja{
	font-size:0.8em;
	}
.bus-access__body p {
text-align: left;
display: inline-block;
}

}

/* 550～767.98px：上ロゴのみ */
@media (min-width:550px) and (max-width:767.98px){
  /* 左余白を少しだけ戻して右に幅を渡す */
  .access-logo-wrap-767{
  position: relative;
  display: inline-block;  /* ロゴ幅を基準にする */
}

/* キャプションをロゴの上に重ねる */
.access-caption-767{
  position: absolute;
  top: -5px;                /* ロゴ画像の上に */
left: 31%;             /* ← "S" の位置に固定。ここを調整すればズレなし */
  margin: 0;
  font-weight: 700;
font-size: 0.8em;
  font-family: "Hiragino Sans","Noto Sans JP",sans-serif;
  white-space: nowrap;
}

.access-logo-767{
	width:400px;
	}
    .car-access__note {
        font-size: 1em;
    }
.access-address p{
	font-size:0.8em;
	}
.access-parking{
	font-size:0.8em;
	}
.access-notes{
	font-size:0.8em;
	}
.car-access__title-ja, .train-access__title-ja, .bus-access__title-ja{
	font-size:0.8em;
	}
  }

/* 400～550px：上ロゴのみ */
@media (min-width:400px) and (max-width:550px){
  /* 左余白を少しだけ戻して右に幅を渡す */
  .access-logo-wrap-767{
  position: relative;
  display: inline-block;  /* ロゴ幅を基準にする */
}

/* キャプションをロゴの上に重ねる */
.access-caption-767{
  position: absolute;
        top: -10px;
        left: 31%;
        font-weight: 700;
font-size: 0.6em;
        font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
        white-space: nowrap;
}
.access-logo-767{
	width:300px;
	}
.access-address p{
	font-size:0.7em;
	}
.access-parking{
	font-size:0.7em;
	}
.access-notes{
	font-size:0.7em;
	}
  }


/* 450px以下：上ロゴのみ */
@media (max-width:400px){
  /* 左余白を少しだけ戻して右に幅を渡す */
  .access-logo-wrap-767{
  position: relative;
  display: inline-block;  /* ロゴ幅を基準にする */
}

/* キャプションをロゴの上に重ねる */
.access-caption-767{
  position: absolute;
        top: -10px;
        left: 31%;
        font-weight: 700;
font-size: 9px;
        font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
        white-space: nowrap;
}
.access-logo-767{
	width:250px;
	}
.access-address p{
	font-size:0.6em;
	}
.access-parking{
	font-size:0.6em;
	}
.access-notes{
	font-size:0.6em;
	}
  }	

@media (min-width: 768px) {
	.access-col--text{
  --logo-w: min(620px, 100%);
    --spa-ratio: 0.12;
    width: var(--logo-w);
    display: grid;
    grid-template-columns: calc(var(--logo-w) * var(--spa-ratio)) 1fr;
    row-gap: 8px;
    align-items: start;
}
 .access-logo-wrap-767{
	 display:none;
	}
}
	
/* 小さい画面では縦並び */
@media (max-width: 767.98px) {
  .fac-access-info .access-grid {
    grid-template-columns: 1fr; /* 1列にする */
	  gap:2em;
  }
}
@media (min-width:768px){
	.car-access__title-en, .train-access__title-en, .bus-access__title-en{
		font-size:48px;
	}
	}

/* 768px〜1023.98px 専用のレスポンシブ */
@media (min-width:768px) and (max-width:1023.98px){
  .fac-access-info {
    font-size: 0.6em;  /* 全体の文字サイズを90% */
  }
  .fac-access-info .access-logo img {
    max-width: 90%;   /* ロゴ画像を縮小 */
  }
  .fac-access-info iframe {
    height: 100%;      /* マップ高さも縮める */
  }
	.access-col--text {
    --logo-w: min(620px, 100%);
    --spa-ratio: 0.165;
}

.fac-access-info .access-grid {
gap:2em;
}
.access-col--map iframe{
height:290px;}

.car-access{
	padding:0em 3em;
	}

.car-access__title {
    font-size: 0.7em;
}
.car-access__note {
    font-size: 0.7em;
}

}
	

/* 1024px〜1279.98px 専用のレスポンシブ */
@media (min-width:1024px) and (max-width:1279.98px){
  .fac-access-info {
    font-size: 0.8em;  /* 全体の文字サイズを90% */
  }
  .fac-access-info .access-logo img {
    max-width: 90%;   /* ロゴ画像を縮小 */
  }
  .fac-access-info iframe {
    height: 100%;      /* マップ高さも縮める */
  }
	.access-col--text {
    --logo-w: min(620px, 100%);
    --spa-ratio: 0.15;
}

.fac-access-info .access-grid {
gap:2em;
}
.access-col--map iframe{
	height:340px;
	}
.car-access__title {
    font-size: 0.8em;
}
.car-access__note {
    font-size: 0.8em;
}
}	
	
@media (min-width: 1600px) { /* セクション全体の拡大はそのままでもOK */ .fac-access-info{ font-size: 1.2em; } /* 余白を抑える（15em → 9〜10em くらい推奨） */ .fac-access-info .access-grid{ grid-template-columns: 1fr 1fr; /* 明示しておくと安心 */ gap: 2em; } /* 左カラムの基準幅を少し広げる。ここが“ロゴ＝基準” */ .fac-access-info .access-col--text{ --logo-w: 730px; /* 600〜680pxで微調整 */ --spa-ratio: 0.3; /* 0.30〜0.34で微調整 */ width: var(--logo-w); justify-self: start; /* 端に寄り過ぎるのを防ぐ */ } /* 画像は必ず枠いっぱい＝基準幅と一致させる */ .fac-access-info .access-logo img{ max-width: 90% !important; /* 70%/81% を無効化 */ margin-top: -2em; /* -3em が強ければ弱める。不要なら 0 に */ margin-left:0em; } /* メモ：notes だけ小さくしたい場合 */ .fac-access-info .access-notes{ font-size: 0.9rem; } } 
	

/* 1280〜1599.98px：1600px版に準拠 */
@media (min-width:1280px) and (max-width:1599.98px){
  /* 左余白を少しだけ戻して右に幅を渡す */
  .fac-access-info{
    padding: 5em 0 10em 8em;   /* 10em → 6em（必要なら 5em まで可） */
  }

  /* 左列を固定、右列に残り全部を割り当てる */
  .fac-access-info .access-grid {
  grid-template-columns: 590px 1fr;  /* 左=ロゴ基準、右=余り全て */
  gap: 2em;
}

  /* 左列の実幅を列幅と一致させる */
  .fac-access-info .access-col--text{
    --logo-w: 715px;
    width: var(--logo-w);
    justify-self: start !important;
  }
}