@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/******禁則処理******/

body{
line-break:normal;
word-break:break-word;
overflow-wrap:break-word;
word-wrap:break-word;
/*font-family: 'ヒラギノ明朝 ProN','Hiragino Mincho ProN','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',sans-serif !important;*/
font-family: 'YakuHanJP','Noto Sans JP', sans-serif;
}
@media screen and (max-width: 767px) {
body{
line-break:normal;
word-break:break-all;
overflow-wrap:break-word;
word-wrap:break-word;
}
}

/***** テキストの両端揃え*****/
main {
  text-align: justify;
  text-justify: inter-ideograph; /* IE用 */
}


/***** スクロールダウン訴求*****/

/*スクロールダウン全体の場所*/

#hero{
	position:relative;
    top:500px;
    left:0%;
	bottom:0;
}

	.scrolldown1{
  position:absolute;
}

/* @media (max-width: 398px) {
#hero{
	bottom:-38px;
}
}
 */

/*
 * 元コード
	.scrolldown1{
    描画位置※位置は適宜調整
  position:absolute;
		top:auto;
  left:50%;
bottom:0%;
    全体の高さ
  height:200px;
}
*/


/*Scrollテキストの描写*/
.scrolldown span{
    /*描画位置*/
-ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
font-family: Noto Sans JP;
  font-size:14px;
  position: absolute;
  left:-6px;
  top: 0px;
    /*テキストの形状*/
  color: #ffffff;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  height:45px;
}

/* 線の描写 */
.scrolldown::after{
  content: "";
    /*描画位置*/
  position: absolute;
  top: 50px;
    /*線の形状*/
  width: 1px;
  height: 148px;
  background: #ffffff;
    /*線の動き2秒かけて動く。永遠にループ*/
  animation: pathmove 2s ease-in-out infinite;
  opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
  0%{
    height:0px;
    top:50px;
    opacity: 0;
  }
  30%{
    height:118px;
    opacity: 1;
  }
  100%{
    height:0;
    top:178px;
    opacity: 0;
  }
}

/***** sabu navi *****/
/* サブナビの枠 */
.reserve_icon{
	position: fixed;
	right: 0;
	top: 250px;
	z-index: 9;
	height: 100%;
	transition: .7s ease;
}

/* サブナビ */
.reserve_icon_list {
	box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23);
}

.post_content ul{
	padding-left: 0 !important;
}

.reserve_icon_list>li{
list-style: none;
	margin:0;
}

li{
	display: list-item;
	text-align: -webkit-match-parent;
	unicode-bidi: isolate;
}

/* サブナビのBOX共通 */
.sidemenu-item{
	display: flex;
	flex-direction: column;
 	justify-content: center;
	align-items: center;
	width: 5rem;
	height: 5rem;
	font-size: 14px; /* フォントサイズ */
	color:#fff;
	font-weight: 500;
	line-height:1.2;
	text-align: center;
	list-style: none;
	transition: .3s ease;
}
/* 各サブナビのBOXカラー */
.reservation-icon{
	background-color: #002c54;
}

.access-icon{
	background-color: #004787;
}

/* .inquiry-icon{
	background-color: #0062ba;
}*/

.contact-icon{
	font-size:12px !important; /* フォントサイズここだけ小さくする */
	background-color: #0062ba; /* 項目4つになった時のカラー#007ded; */
}

 /*スマホやアイパッドで非表示 */
@media screen and (max-width: 960px) {
	.reserve_icon{
		display: none;
    }
}

/***** メインテキスト ******/
 /* スマホ */
.p-mainVisual__slideTitle b{
	font-family: Yu Mincho; /* フォント指定 */
	position:relative;/* 位置の固定 */
	top:150px;
	right:-10px;
	font-size:32px; /* フォントサイズ */
    text-shadow:1px 1px 2px #16253d; /* フォントに影 */
}

 /*スマホやアイパッド */
@media screen and (min-width:768px) and ( max-width:1024px) {
	.p-mainVisual__slideTitle b{
		font-family: Yu Mincho; /* フォント指定 */
		position:relative;/* 位置の固定 */
		top:150px;
		right:0px;
		font-size:32px; /* フォントサイズ */
        text-shadow:1px 1px 2px #16253d; /* フォントに影 */
    }
}

 /* デスクトップ */
@media screen and (min-width:1024px) {
	.p-mainVisual__slideTitle b{
		font-family: Yu Mincho;
		position:relative; /* 位置の固定 */
		top:200px;
		right:40px;
		font-size:48px; /* フォントサイズ */
		text-shadow:1px 1px 2px #16253d; /* フォントに影 */
  	}
}

/***** top h4 ******/
.u-mb-20{
	font-family: Yu Mincho; /* フォント指定 */
}

/***** news・access タイトル ******/

.news_tit{
	font-family: Yu Mincho; /* フォント指定 */
}

.access_tit{
	font-family: Yu Mincho; /* フォント指定 */
}

/***** 上にもどるボタン ******/
@media (min-width: 960px) {	
    .p-fixBtnWrap {
        bottom: 4em;
        right: 4em;
    }
}


/***** フッター前メニュー ******/
@media screen and (max-width: 413px) {
	.wp-block-group-is-layout-flex{
		font-size:12px;
	}
}

/***** top page content *****/
.content_area{
	margin:150px auto;
}

/* リンクの設定 */
.content_area a {
	text-decoration: none; /* リンクの下線を消す */
	color: inherit; /* 親要素の色を継承 */
	border: none; /* リンクの枠線を消す */
}

 /* お部屋 */
.content_room{
	width:100vw;
	height:400px;
	margin: 50px calc(50% - 50vw);
	background-image: url(http://ryokan-kasumigaura.com/wp-content/uploads/2025/02/room-1.jpg); /* 背景画像のURLを指定 */
	background-size: cover; /* 画像を画面いっぱいに拡大 */
	background-position: center; /* 画像を中央に配置 */
	background-repeat: no-repeat; /* 画像が繰り返されないように */
	position: relative; /* 背景に重ねるために相対位置を設定 */
	padding: 20px; /* 内側に少し余白をつける */
	display: flex;
	flex-flow:column; /* 縦に並べる */
	justify-content: center;
	align-items: center;
	text-align: center;
}

/* 半透明の白いオーバーレイ */
.content_room::before{
	content: ''; /* 擬似要素を追加 */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.5); /* 半透明の白 */
	z-index: 1; /* オーバーレイがコンテンツの上に表示されるように */
}

.l-article01 {
	position: relative; /* 擬似要素の背後に配置するため */
	z-index: 2; /* 文字がオーバーレイの前に表示されるように */
}

/* h5 */
.h_title_01 {
	color: #16253d; /* 文字色をネイビーに */
	font-size: 36px; /* フォントサイズ調整*/
	line-height: 1.5; /* 行間調整 */
	font-family: Yu Mincho; /* フォント指定 */
}

@media screen and (min-width:480px) { 
	.h_title_01 {
		color: #16253d; /* 文字色をネイビーに */
		font-size: 42px; /* フォントサイズ調整*/
		line-height: 1.5; /* 行間調整 */
		font-family: Yu Mincho; /* フォント指定 */
	}
}
/* btn */
.button_wrap{
	padding-top:1.5rem;
}
/* btnのサイズ */
.button_rounded{
	position:relative;
	display:flex;
	justify-content:center;
	min-width:20rem;
	padding:1.3rem 3rem 1.5rem;
	border-radius: 2.5rem;
	letter-spacing:0.1rem;
	background-color:#16253d;
	z-index:3;
}
/* btnのテキスト */
.button_rounded_text{
	padding-right:0.5rem;
	font-size:1.4rem;  /* フォントサイズ調整*/
	font-weight:700;
	line-height:1.4;
	letter-spacing:0.1rem;
	color:#fff;
	font-family: Yu Mincho; /* フォント指定 */
}
/* btnのアイコン */
.button_rounded_icon{
	position:absolute;
	top:50%;
	right:1.8rem;
	z-index:3;
	transform: translateY(-50%);
	width:1.8rem;
	height:1.8rem;
}

.icon_img{
	width:100%;
	height:100%;
	object-fit: cover;
}


/* お食事 */
.content_restaurant{
	width:100vw;
	height:400px;
	margin: 50px calc(50% - 50vw);
	background-image: url(http://ryokan-kasumigaura.com/wp-content/uploads/2025/04/restaurant2.jpg); /* 背景画像のURLを指定 */
	background-size: cover; /* 画像を画面いっぱいに拡大 */
	background-position: center; /* 画像を中央に配置 */
	background-repeat: no-repeat; /* 画像が繰り返されないように */
	position: relative; /* 背景に重ねるために相対位置を設定 */
	padding: 20px; /* 内側に少し余白をつける */
	display: flex;
	flex-flow:column; /* 縦に並べる */
	justify-content: center;
	align-items: center;
	text-align: center;
}

/* 半透明の白いオーバーレイ */
.content_restaurant::before{
	content: ''; /* 擬似要素を追加 */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.5); /* 半透明の白 */
	z-index: 1; /* オーバーレイがコンテンツの上に表示されるように */
}

/* 温泉 */
.content_onsen{
	width:100vw;
	height:400px;
	margin: 50px calc(50% - 50vw);
	background-image: url(http://ryokan-kasumigaura.com/wp-content/uploads/2025/02/onsen.jpg); /* 背景画像のURLを指定 */
	background-size: cover; /* 画像を画面いっぱいに拡大 */
	background-position: center; /* 画像を中央に配置 */
	background-repeat: no-repeat; /* 画像が繰り返されないように */
	position: relative; /* 背景に重ねるために相対位置を設定 */
	padding: 20px; /* 内側に少し余白をつける */
	display: flex;
	flex-flow:column; /* 縦に並べる */
	justify-content: center;
	align-items: center;
	text-align: center;
}

/* 半透明の白いオーバーレイ */
.content_onsen::before{
	content: ''; /* 擬似要素を追加 */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.5); /* 半透明の白 */
	z-index: 1; /* オーバーレイがコンテンツの上に表示されるように */
}

/* 施設紹介 */
.content_facilitytour{
	width:100vw;
	height:400px;
	margin: 50px calc(50% - 50vw);
	background-image: url(http://ryokan-kasumigaura.com/wp-content/uploads/2025/02/facility-tour-1.jpg); /* 背景画像のURLを指定 */
	background-size: cover; /* 画像を画面いっぱいに拡大 */
	background-position: center; /* 画像を中央に配置 */
	background-repeat: no-repeat; /* 画像が繰り返されないように */
	position: relative; /* 背景に重ねるために相対位置を設定 */
	padding: 20px; /* 内側に少し余白をつける */
	display: flex;
	flex-flow:column; /* 縦に並べる */
	justify-content: center;
	align-items: center;
	text-align: center;
}

/* 半透明の白いオーバーレイ */
.content_facilitytour::before{
	content: ''; /* 擬似要素を追加 */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.5); /* 半透明の白 */
	z-index: 1; /* オーバーレイがコンテンツの上に表示されるように */
}

/* 体験 */
.content_experience{
	width:100vw;
	height:400px;
	margin: 50px calc(50% - 50vw);
	background-image: url(http://ryokan-kasumigaura.com/wp-content/uploads/2025/02/activity-1.jpg); /* 背景画像のURLを指定 */
	background-size: cover; /* 画像を画面いっぱいに拡大 */
	background-position: center; /* 画像を中央に配置 */
	background-repeat: no-repeat; /* 画像が繰り返されないように */
	position: relative; /* 背景に重ねるために相対位置を設定 */
	padding: 20px; /* 内側に少し余白をつける */
	display: flex;
	flex-flow:column; /* 縦に並べる */
	justify-content: center;
	align-items: center;
	text-align: center;
}

/* 半透明の白いオーバーレイ */
.content_experience::before{
	content: ''; /* 擬似要素を追加 */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.5); /* 半透明の白 */
	z-index: 1; /* オーバーレイがコンテンツの上に表示されるように */
}


/***** contact form content *****/
/*.wp-block-group-cf7{
	display:none;
}
*/