@charset "utf-8";
/*
Template: jstork
Theme Name: stork_custom
Theme URI:http://open-cage.com/stork/
*/

body{
	font-weight:400;
}
/* もっと見る（サイドバー用） */
.sidebar__more{
	margin-top:-1em;
	text-align:right;
}
.sidebar__more a{
	color:#1bb4d3!important;
}

/* 人気記事の順位レイアウト崩れ＋背景色 */
.popular-posts ul li a.no-icon{
	display: block;
}
.popular-posts ul.wpp-list li:nth-child(1) a:before{
	background-color:#d9b340;
}
.popular-posts ul.wpp-list li:nth-child(2) a:before{
	background-color:#6f7b83;
}
.popular-posts ul.wpp-list li:nth-child(3) a:before{
	background-color:#a15326;
}

/* ページネーションがくっつくので */
.pagination li, .page-links li{
	margin:2px!important;
}

/* ――――――――――――――――――――――
 料金
―――――――――――――――――――――― */
.tbl-price{}
.tbl-price th{
	width:40%;
}

/* ――――――――――――――――――――――
 部屋・設備
―――――――――――――――――――――― */
.room-gallery{
display:flex;
flex-wrap:wrap;
width:100%;
list-style-type:none;
}
.room-gallery li{
width:19%;
position:relative;
margin:10px 1% 10px 0!important;
border:2px solid #fff;
box-sizing:border-box;
padding-left:0!important;
}
.room-gallery li:before{
content:"";
width:0!important;height:0!important;
background:none!important;
}
.room-gallery li img{
margin:0!important;
width:100%;
}
.room-no{
position:absolute;
background-color:#000;
bottom:3px;right:3px;
color:#fff;
display:inline-block;
font-size:11px;
line-height:1;
padding:1px 2px 0 2px;
}
.room-icon{
display:block;
text-align:center;
width:20px;
height:20px;
font-size:10px;
font-weight:bold;
line-height:1.9;
background-color:red;
color:#fff;
border-color:red;
border-radius:50%;
position:absolute;
top:-6px;right:-6px;
}

.iframe-wrapper {
position: relative;
padding-bottom: 75%; /* 4:3のアスペクト比 */
height: 0;
overflow: hidden;
}

.iframe-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none; /* 枠線を消す場合 */
}

/* ――――――――――――――――――――――
 アメニティ
―――――――――――――――――――――― */
.amenity-menu{
display:flex;
flex-wrap:wrap;
width:100%;
}
.amenity-menu li{
box-sizing:border-box;
font-size:13px;
margin:0!important;
padding:0 .5% 15px!important;
text-align:center;
vertical-align: top;
width:24%;
}
@media only screen and (max-width: 768px) {
	.amenity-menu li{
		box-sizing:border-box;
		width:33%;
		padding:0 1.5% 15px!important;
		text-align:center;
	}
}
.amenity-menu li:before{
content:"";
width:0!important;height:0!important;
background:none!important;
}
.amenity-menu li a{}
.amenity-menu li img{
margin:0!important;
width:100%;
}
/* 定期開催イベント：タイルを3:4の縦長で統一（枠を固定して高さのガタつきを無くす。
   上寄せクロップでチラシ上部のタイトルを残す。拡大時は元画像をフル表示） */
.amenity-menu--event li img{
	display:block;
	width:100%;
	height:auto;
	aspect-ratio:3 / 4;
	object-fit:cover;
	object-position:50% 0;
}

/* ――――――――――――――――――――――
 アクセス
―――――――――――――――――――――― */
.tbl-access{}
.tbl-access th{
	width:30%;
}

/*  ――――――――――――――――――――――――――――――――――――――

 SP用

――――――――――――――――――――――――――――――――――――――  */
@media only screen and (max-width: 768px) {

.popular-posts ul li{
	margin-bottom: 0.75em;
}
.popular-posts ul.wpp-list li a:before{
	z-index:100;
}
/* ――――――――――――――――――――――
 部屋・設備
―――――――――――――――――――――― */
#photo_container{
max-width:100% !important;
}
#thumbnail{
width:100%;
float:none;
}
#thumbnail li{
width:49% !important;
max-width:48% !important;
min-width:48% !important;
margin:10px 1% 8px;
}
#main_photo{
display:none;
}

.room-gallery{
width:100%;
}
.room-gallery li{
width:30%;
position:relative;
float:left;
margin:5px 1.5% 5px!important;
border:2px solid #fff;
box-sizing:border-box;
}





} /* SP用ここまで*/




/* ――――――――――――――――――――――
 アンケート評価点の丸ボタン
―――――――――――――――――――――― */
.hidden-fields-container{
	display: none;
}

/* アンケート評価点の丸ボタン */
.rating-circles {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	line-height: 0;
	margin-bottom: 1em;
}

.rating-circles .wpcf7-list-item {
	width: 9%;
}

.rating-circles .wpcf7-list-item-label {
	align-items: center;
	aspect-ratio: 1 / 1;
	background: #fff;
	border: 2px solid #ccc;
	border-radius: 50%;
	box-sizing: border-box;
	color: #333;
	cursor: pointer;
	display: flex;
	font-size: 1rem;
	justify-content: center;
	user-select: none;
	width: 100%;
	transition: all 0.2s ease;
}

.rating-circles input[type="radio"] {
	display: none;
}

.rating-circles input[type="radio"]:checked+.wpcf7-list-item-label {
	background: #36bbe7;
	border-color: #36bbe7;
	color: #fff;
}

/* チェックボックスカスタムスタイル（Q4） */
.checkbox-block{
	display: flex;
	flex-wrap:wrap;
	width:100%;
}
.checkbox-block .wpcf7-list-item {
	display: block;
	position: relative;
	padding-left: 3em;
	margin-bottom: 0.8em;
	width:47%;
}

.checkbox-block input[type="checkbox"] {
	display: none;
}

.checkbox-block .wpcf7-list-item-label {
	display: inline-block;
	position: relative;
	cursor: pointer;
}

.checkbox-block input[type="checkbox"]+.wpcf7-list-item-label::before {
	content: "✔";
	position: absolute;
	left: -2em;
	top: 0.1em;
	width: 1.5em;
	height: 1.5em;
	background: #fff;
	border: 2px solid #ccc;
	border-radius: 5px;
	color: transparent;
	text-align: center;
	line-height: 1.5em;
	font-size: 1.2em;
	transition: all 0.2s ease;
	box-sizing: border-box;
}

.checkbox-block input[type="checkbox"]:checked+.wpcf7-list-item-label::before {
	background: #36bbe7;
	border-color: #36bbe7;
	color: #fff;
	/* ← チェック時に ✔ を白で表示 */
}

/* ラジオボタンカスタムスタイル（Q7） */
.radio-block {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
.radio-block .wpcf7-list-item {
	display: block;
	position: relative;
	padding-left: 2em;
	margin-bottom: 0.8em;
	width: 47%;
}

.radio-block input[type="radio"] {
	display: none;
}

.radio-block .wpcf7-list-item-label {
	display: inline-block;
	position: relative;
	cursor: pointer;
}

.radio-block input[type="radio"]+.wpcf7-list-item-label::before {
	content: "";
	position: absolute;
	left: -2em;
	top: 0.1em;
	width: 1.5em;
	height: 1.5em;
	background: #fff;
	border: 2px solid #ccc;
	border-radius: 50%;
	transition: all 0.2s ease;
}

.radio-block input[type="radio"]:checked+.wpcf7-list-item-label::before {
	background: #36bbe7;
	border-color: #36bbe7;
	box-shadow: inset 0 0 0 5px #fff;
}



/* テキスト入力などのサイズ調整 */
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
select,
textarea,
.field {
	font-size: 1rem;
	width: 100%;
	box-sizing: border-box;
}
input::placeholder,
textarea::placeholder{
	color:#bbb!important;
}
/* レスポンシブ対応 */
@media only screen and (max-width: 768px) {
	.rating-circles{
		flex-wrap:wrap;
	}
	.rating-circles .wpcf7-list-item{
		margin-bottom:4px;
		width:19%;
	}
}

/*クーポンコード*/
.coupon-code{
	border:2px solid #dd0000;
	color:#dd0000;
	display:inline-block;
	font-size:2rem;
	font-weight:bold;
	padding:10px;
}

.btn-review {
	display: inline-block;
	padding: 0.8em 2em;
	font-size: 1rem;
	font-weight: bold;
	color: #fff;
	background: #4285F4;
	/* Googleブルー */
	border: none;
	border-radius: 999px;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transition: background 0.3s ease, transform 0.2s ease;
}

.btn-review:hover {
	background: #3367D6;
	color:#fff;
}


/* --- Contact Form 7 スタイル調整（優先度強化版） --- */

/* フォーム全体を囲む要素 */
div.wpcf7 {
	position: relative;
}

/* ★★★ 送信中：ローディング表示 ★★★ */
/* 送信中にフォーム全体を覆う半透明のオーバーレイ */
div.wpcf7.is-loading::before {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background-color: rgba(255, 255, 255, 0.7) !important;
	z-index: 10 !important;
}

/* 送信中に表示する中央のカスタムスピナー */
div.wpcf7.is-loading::after {
	content: '' !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	width: 40px !important;
	height: 40px !important;
	margin-top: -20px !important;
	margin-left: -20px !important;
	border-radius: 50% !important;
	border: 4px solid #f3f3f3 !important;
	border-top: 4px solid #3498db !important;
	animation: spin 1s linear infinite !important;
	z-index: 11 !important;
}

/* 回転アニメーション */
@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}}

/* ★★★ 送信後のメッセージ ★★★ */
.wpcf7-response-output {
	margin: 2em 0.5em 1em !important;
	padding: 0.8em 1.5em !important;
	border-radius: 8px !important;
	/* ↓ 枠線と背景色を追加 */
	border: 1px solid #ddd !important;
	background-color: #f7f7f7 !important;
	font-size: 1rem !important;
}
/* 中身が空のメッセージボックスを非表示にする */
.wpcf7-response-output:empty {
	display: none !important;
}

.wpcf7-response-output.wpcf7-sent {
	background-color: #e7f5ec !important;
	border-color: #6ac58d !important;
	color: #2a744a !important;
}

.wpcf7-response-output.wpcf7-validation-errors,
.wpcf7-response-output.wpcf7-spam-blocked,
.wpcf7-response-output.wpcf7-error {
	background-color: #fdecea !important;
	border-color: #f28b82 !important;
	color: #a52714 !important;
}

/* ★★★ 入力項目エラーのハイライト ★★★ */
.wpcf7-form .wpcf7-not-valid {
	border-color: #d93025 !important;
}

.wpcf7-not-valid-tip {
	color: #d93025 !important;
	font-size: 0.9em !important;
	font-weight: bold !important;
}

/* スクリーンリーダー用のテキストを視覚的に非表示にする */
.screen-reader-response {
	position: absolute;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	margin: -1px;
	padding: 0;
	height: 1px;
	width: 1px;
	border: 0;
}