@charset "UTF-8";
html{
}

body {
  font-family: 'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif;
	background-color: #fff;
	color: #102c52;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p,th,td,a,select,header,nav,section,footer {
	word-wrap: break-word;
	box-sizing: border-box;
	-webkit-text-size-adjust: 100%;
}

h1{
  font-family: "游明朝", serif; /* h1要素のフォント */
	font-size:48px;
	color: #fff;
	padding: 0 40px 0 40px; /* 右40px、左40px */
	overflow: hidden;
}

@media screen and (max-width: 760px) {
	h1 {
	font-size:32px;
	margin: 0 auto;
	}
}

h2 {
  font-family: "游明朝", serif; /* h2要素のフォント */
	font-size:48px;
	font-weight: bold;
	text-align: center;
}

h3 {
	font-size:16px;
	padding: 0 0 8px 0; /*下8px*/
	text-align: center;
}

h4 {
  font-family: "游明朝", serif; /* h2要素のフォント */
	font-weight: bold;
	padding: 0 0 8px 0; /*下8px*/
	font-size:24px;
	color: #006A92;
	text-align: center;
}

ul {
	list-style: none;
}

a {
}

img{
}

/*===============header===============*/
	header {
		max-width: 960px;
}

@media screen and (max-width: 760px) {
	header {
　　width: 80%;
	}
}
.video-background {
	position: relative;
	width: 100%;
	height: 100vh; /* 画面いっぱいの高さ */
	overflow: hidden;
}

.video-background video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1; /* 背面に配置 */
}

@media screen and (max-width: 760px) {
  .video-background {
    height: auto;           /* 高さをリセット */
    aspect-ratio: 16 / 9;   /* 16:9のアスペクト比を適用 */
    max-width: 100vw;       /* 画面幅いっぱい */
  }
  .video-background video {
    position: absolute;       /* 親要素のアスペクト比に合わせる */
    width: 100%;
    height: 100%;
    object-fit: contain;    /* 見切れずに縮小 */
  }
}

.content {
	position: relative;
	z-index: 1; /* 動画の上にコンテンツを重ねる */
}

.header {
	display: flex;
	max-width: 960px;/* レスポンシブ対応 */
	margin: 0 auto;/* ヘッダー上の空白を確保 */
  justify-content: center;
	overflow: hidden;
	position: relative;
}

@media screen and (max-width: 760px) {
	header {
		margin: 0 auto;
	}
}

/*global-nav*/
.global-nav {
	position: absolute;
	right: 0;
}

.global-nav ul{
	justify-content: flex-end;
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.global-nav li {
}

.pcmenu{
}

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

.global-nav a {
	display: block;
	padding: 24px 24px;
	text-decoration: none;
	color: #fff;
	justify-content: center;
	width: 104px; /* 画像サイズは適宜調整 */
	text-align: center;
}

@media screen and (max-width: 760px) {
.global-nav a{
		display: none;
	}
}

.reservation a {
	background-color: rgba(7, 66, 143, 0.7); /* 青・70%透明 */
}

.menu a {
	background-color: rgba(19, 153, 186, 0.7); /* 水色・70%透明 */
}

/*======↓↓スマホ用メニュー(ハンバーガーメニュー)↓↓=======*/

/* PC版では非表示、ブレイクポイント(今回は760px)以下で表示 */
div.hamburgerMenu {
	display: none;
}
@media screen and (max-width: 760px) {
	div.hamburgerMenu {
		display: block;
	}
}

/* 三ボタンの領域を右上に作成、背景色設定、top/rightでボタンの位置を調整、z-indexで最前面に*/
div.hamburgerMenu .menuBtn {			
	width: 64px;
	height: 64px;
	background-color: rgba(0,0,0,0.3);
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 90;
	cursor: pointer;
}

/* ボタンの3本線を作成、線の幅、線の太さ、線の色を設定 */
div.hamburgerMenu .menuBtn span,
div.hamburgerMenu .menuBtn span:before,
div.hamburgerMenu .menuBtn span:after {
	content: '';
	width: 35px;
	height: 3px;
	border-radius: 3px;
	background-color: #fff;
	display: block;
	position: absolute;
}

/* 上の線は上方向に10pxずらす */
div.hamburgerMenu .menuBtn span:before {
	bottom: 10px;
}

/* 下の線は下方向に10pxずらす */
div.hamburgerMenu .menuBtn span:after {
	top: 10px;
}

/* ボタンクリック時：真ん中の線は透明に */
div.hamburgerMenu #menuBtnCheck:checked ~ .menuBtn span {
	background-color: rgba(255, 255, 255, 0);
}

/* ボタンクリック時：上の線を斜めに（／） */
div.hamburgerMenu #menuBtnCheck:checked ~ .menuBtn span::before {
	bottom: 0;
	transform: rotate(45deg);
}

/* ボタンクリック時：下の線を斜めに（＼） */
div.hamburgerMenu #menuBtnCheck:checked ~ .menuBtn span::after {
	top: 0;
	transform: rotate(-45deg);
}

/* メニューの状態を保持するチェックボックスは非表示 */
div.hamburgerMenu #menuBtnCheck {
	display: none;
}

/* メニューの領域を作成、背景の大きさ、背景色、表示位置、アニメーション（スピードの調整） */
div.hamburgerMenu .menuContent {
	width: 100%;
	height: auto;/* ★100%にするとコンテンツ領域をウィンドウの下までに */
	padding: 0 10px;/* ★メニュー領域の左右の隙間 */
	background-color: rgba(0,0,0,0.7);
	position: fixed;
	top: 0;
	left: 100%;
	z-index: 80;
	transition: all 0.5s;
}

/* メニューの領域を作成、横幅を設定。メニューリストの表示位置を×ボタンの大きさぶん下げる */
div.hamburgerMenu .menuContent ul {
	width: 180px;/* ★100%にすると横幅いっぱい */
	padding: 80px 0 0;
	display: block;
}

/* メニュー項目間の線を追加 */
div.hamburgerMenu .menuContent ul li {
	border-top: solid 1px #fff;
}

/* ☆最初のメニュー項目の上線なくす */
div.hamburgerMenu .menuContent ul li:first-child {
	border-top: none; 		
}

/* メニューのリンク実体。クリックできる余白を作る、文字色、表示位置 */
div.hamburgerMenu .menuContent ul li a {
	padding: 10px 0px;
	display: block;
	font-size: 16px;
	color: #fff;
	text-align: center;
}

/* ボタンクリック時：メニュー領域の引き出し位置 */
div.hamburgerMenu #menuBtnCheck:checked ~ .menuContent {
	left: calc(100% - 200px);/* ★0にすると左端まで */
}
/*======↑↑ここまでスマホ用メニュー(ハンバーガーメニュー)↑↑=======*/

/*========================main========================*/
main {
	margin: 0 auto;
}

/*===================flex-container===================*/
.flex-container{
	display: flex;
	padding: 48px 0 48px 0; /* 上32px、下32px */
	justify-content: center;
	align-items: center; /* 縦方向の中央揃え（必要に応じて調整） */
}

.flex-container-inner{
	display: flex;
	max-width: 960px;/* レスポンシブ対応 */
	gap: 48px; /* 画像とテキストの間隔 */
}

@media screen and (max-width: 760px) {	/*スマホ表示 */
.flex-container-inner{
	display: block;/* スマホの時だけ縦並びにする */
	width: 80%;/* 幅を80%に縮小 */
	}
}

.flex-container img {
	width: 480px; /* 画像サイズは適宜調整 */
	height: 440px;
}

@media screen and (max-width: 760px) {	/*スマホ表示 */
.flex-container img{
  width: 100%;   /* 幅を100%に縮小 */
  height: auto; /* 高さは自動計算で縦横比維持 */
	}
}

.flex-container p {
	padding: 12px 0 12px 0; /* 上12px、下12px */
  line-height: 2em; /* フォントサイズの2倍の高さ（em単位） */
  max-width: 504px;
  overflow-wrap: break-word;
}

.flex-container a {
	font-size: 16px;
	padding: 16px 96px 16px 96px; /* 「詳細はこちら」ボタンサイズ */
	border-width: 1px; /* 枠線の太さ */
	border-style: solid; /* 枠線の種類（実線） */
	border-color: #18A0C2;
}

@media screen and (max-width: 760px) {	/*スマホ表示 */
.flex-container a{
	padding: 16px 88px 16px 88px; /* 「詳細はこちら」ボタンサイズ */
	}
}

.detail{
	padding: 32px 0 32px 0; /* 上32px、下32px */
	text-align: center;
}

/*=============location===============*/
#location{
}

#location h2{
	color: #006A92;
}

#location h3{
	color: #006A92;
}

#location.flex-container a {
	color: #fff;
	background-color: #148ba8;	
}

/*===============about===============*/
#about{
	background: #F0F5F7;
}

#about h2{
	color: #15488c;
}

#about h3{
	color: #15488c;
}

#about a{
	color: #102c52;
}

#about.flex-container a {
	background-color: #fff;
}

/*============guestRoomt============*/
#guestRoomt{
	background: #fffff;
}

#guestRoom h2{
	color: #006A92;
}

#guestRoom h3{
	color: #006A92;
}

#guestRoom.flex-container a {
	color: #fff;
	background-color: #148ba8;
}

/*===============spa===============*/
#spa{
	background: #F5F4EF;
}

#spa h2{
	color: #666338;
}

#spa h3{
	color: #666338;
}

#spa p{
	color: #3b3821;
}

#spa.flex-container a {
	color: #424023;
	background-color: #fff;
	border-color: #8D895D;
}

/*==========================activity===========================*/
.activity-flex-container{
	padding: 48px 0 48px 0; /* 上48px、下48px */
	text-align: center;
	justify-content: center;
	justify-content: space-around; /* または space-between, space-evenly */
	flex-wrap: wrap; /* 必要に応じて折り返し */
	gap: 10px; /* セット間の間隔 */
}

@media screen and (max-width: 760px) {	/*スマホ表示 */
.activity-flex-container{
	padding: 56px 0 32px 0; /* 上48px、下48px */
	}
}

.activity-flex-container-inner{
	max-width: 960px;/* レスポンシブ対応 */
	margin: 0 auto;
}

@media screen and (max-width: 760px) {	/*スマホ表示 */
.activity-flex-container-inner{
	width: 80%;
	padding: 0 0 0 0; /*#activity p>margin-bottom余白調整のため、下36px→0px*/
	}
}

.activity-text{
	justify-content: center;
}

.activity-flex-container-item{
	padding: 32px 0 24px 0; /* 上24px、下24px */
	justify-content: center;
	display: flex;
	text-align: center;
	gap: 32px; /* 画像とテキストの間隔 */
}

@media screen and (max-width: 760px) {	/*スマホ表示 */
.activity-flex-container-item{
	display: block;
	padding: 0 0 12px 0; /* 上32→0px、下24→12px */
	}
}

#activity img {
	width: 276px; /* 画像サイズは適宜調整 */
	height:276px;
}

#activity h2{
	color: #102c52;
}

#activity h3{
	color: #102c52;
}

#activity h4{
	font-size:28px;
	color: #102c52;
	padding: 8px 0 0 0; /* 上8px */
}

@media screen and (max-width: 760px) {	/*スマホ表示 */
#activity h4 {
	padding: 4px 0 0 0; /* 上12→4px */
	}
}

#activity p {
	padding: 12px 0 0 0; /* 上12px */
}

@media screen and (max-width: 760px) {	/*スマホ表示 */
#activity p {
	margin-bottom: 48px; /* テキスト下に48pxの余白 */
	}
}

/*===================Amenity-flex-container===================*/
.amenity-flex-container{
	background: #F0F5F7;
	padding:48px 0 48px 0; /* 上48px、下48px */
	text-align: center;
	flex-wrap: wrap; /* 必要に応じて折り返し */
}

.amenity-flex-container-inner{
	max-width: 960px;/* レスポンシブ対応 */
	margin: 0 auto;
}

@media screen and (max-width: 760px) {	/*スマホ表示 */
.amenity-flex-container-inner{
	width: 80%;/* 幅を80%に縮小 */	}
}

.amenity-text{
}

.amenity-flex-container-item{
	display: flex;
	justify-content: center;
	padding: 48px 0 48px 0; /* 上48px、下48px */
	gap: 32px; /* 画像とテキストの間隔 */
}

@media screen and (max-width: 760px) {	/*スマホ表示 */
.amenity-flex-container-item{
	display: block;/* スマホの時だけ縦並びにする */
	padding: 40px 0 12px 0; /* 上48→40px、*下48→12px */
	}
}

.amenity-flex-container-item > div {
	display: flex;
	flex-direction: column; /* 画像とテキストを縦に並べる */
	align-items: center; /* 水平方向の中央揃え */
}

@media screen and (max-width: 760px) {	/*スマホ表示 */
.amenity-flex-container-item > div {
	}
}

#amenity{
}

#amenity h2{
	color: #006A92;
}

#amenity h3{
	color: #006A92;
}

#amenity h4{
	padding: 12px 0 0 0; /* 上12px */
}

@media screen and (max-width: 760px) {	/*スマホ表示 */
#amenity h4 {
	padding: 5px 0 0 0; /* 上12→5px */
  margin-bottom: 48px; /* 画像下に48pxの余白 */
	}
}

#amenity p {
	padding: 8px 0 0 0; /* 上12px */
}

#amenity img {
	width: 124px; /* 画像サイズは適宜調整 */
	height:124px;
}

/*========================campaign========================*/
.campaign-container{
	margin: 0 auto;
	padding: 48px 0 48px 0; /* 上48px、下48px */
	max-width: 960px;/* レスポンシブ対応 */
}

.campaign-flex-container{
	margin: 0 auto;
	justify-content: center;
	padding: 48px 0 48px 0; /* 上48px、下48px */
	display: flex;
	justify-content: center; /* 中央寄せ */
	gap: 40px; /* セット間の間隔 */
}

@media screen and (max-width: 760px) {	/*スマホ表示 */
.campaign-flex-container{
	width: 80%;/* 幅を80%に縮小 */
	display: block;/* スマホの時だけ縦並びにする */
	padding: 40px 0 0 0; /*#campaign img>margin-bottom余白調整のため、下36px→0px*/
	}
}

.campaign-text{
	text-align: center;
}

#campaign img {
	width: 454px; /* 画像サイズは適宜調整 */
	height:300px;
	box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.2);
}

@media screen and (max-width: 760px) {	/*スマホ表示 */
#campaign img {
  width: 100%;   /* 幅を100%に縮小 */
  height: auto; /* 高さは自動計算で縦横比維持 */
  margin-bottom: 32px; /* 画像下に24pxの余白 */
	}
}

#campaign h2{
	color: #006A92;
}

#campaign h3{
	color: #006A92;
}

#campaign p{
	text-align: center;
}

/*========================inquiry========================*/
.inquiry-container{
	padding: 88px 0 16px 0; /* 上88px、下16px */
	text-align: center;
	background: #036996;
	color: #fff;
}

@media screen and (max-width: 760px) {	/*スマホ表示 */
.inquiry-container{
	padding: 64px 0 0 0; /*上88→64px、下24→0px */
	}
}

.inquiry-flex-container-inner{
	max-width: 960px;/* レスポンシブ対応 */
	margin: 0 auto;
}

@media screen and (max-width: 760px) {	/*スマホ表示 */
.inquiry-flex-container-inner{
	width: 80%;/* 幅を80%に縮小 */
	display: block;/* スマホの時だけ縦並びにする */
	}
}

.inquiry-sns{
	padding: 32px 0 24px 0; /* 上32px、下24px */
	display: flex;
	align-items: center;
	justify-content: center; /* 中央寄せ */
	gap: 12px; /* セット間の間隔 */
}

#inquiry img {
	width: 32px; /* 画像サイズは適宜調整 */
	height:32px;
}

/*=======================footer========================*/
footer {
	margin: 0 auto;
	padding: 16px 0 32px 0; /* 上16px、下32px */
	color: #fff;
	background-color: #036996;
}

.footer-flex-container-inner{
	max-width: 960px;/* レスポンシブ対応 */
	margin: 0 auto;
}

@media screen and (max-width: 760px) {	/*スマホ表示 */
.footer-flex-container-inner{
	width: 80%;/* 幅を80%に縮小 */
	display: block;/* スマホの時だけ縦並びにする */
	}
}

.footer-nav ul {
	display: flex;
	list-style: none;
	justify-content: center; /* 中央揃え（任意） */
	gap: 36px; /* メニュー間の間隔 */
}

.footer-nav a {
}

footer p{
	padding: 12px 0 12px 0; /* 上12px、下12px */
	text-align: center;
}