/*↓↓↓クリティカルCSS　後で移動↓↓↓*/
@charset "UTF-8";

#videoContainer .ad-area-wrapper {
	padding-top: 20vh;
	text-align: center;
}

html,
body {
	box-sizing: border-box;
	margin: 0; /* 修正: margin,padding:0 から分割 */
	padding: 0; /* 修正: margin,padding:0 から分割 */
	letter-spacing: 0.04em;
	line-height: 1.9;
	width: 100%;
	color: #4e4e4e;
	font-family: 'BIZ UDPGothic', sans-serif;
	scroll-behavior: smooth;
	scroll-padding-top: 110px;
	  }

a {
	text-decoration: none;
}

li {
	list-style: none;
}

p {
	text-align: justify;
}

svg {
	display: block;
}

header {
	position: fixed;
	display: flex;
	height: 10vh;
	width: 100%;
	padding-inline: 30px;
	background-color: white;
	box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
	align-items: center;
	z-index: 10;
}

.header * {
	margin: auto 0;
}

#header_logo {
	display: table-cell;
	max-height: 50px;
	vertical-align: middle;
}

#header_logo img {
	max-height: 40px;
	display: block;
}

#header_content {
	margin-left: auto;
	display: flex;
	gap: 30px;
}

#open_hour {
	padding: .5rem 1rem .5rem 1rem;
	background-color: #f0f0f0;
}

#videoContainer {
	width: 100%;
	height: 100vh;
}

#videoWrapper {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: -1;
}

#fvMovie {
	width: 100%;
	height: 90vh;
	position: relative;
	overflow: hidden;
	background-color: #000;
	margin-top: 10vh;
}

#fvMovie #video {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	object-fit: cover;
}

.scroll-guide {
	position: absolute;
	bottom: 80px;
	left: 50%;
	transform: translateX(-50%);
}

.scroll-guide p {
	font-size: 16px;
	color: #fff;
	font-weight: 100;
}

.droplet {
	margin: auto;
	width: 12px;
	height: 18px;
	background: #fff;
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
	transform: rotate(45deg);
	animation: drop 3s infinite ease-in-out;
}

@keyframes drop {
	0% {
		transform: translateY(0);
		opacity: 1;
	}

	50% {
		transform: translateY(20px);
		opacity: 0.5;
	}

	100% {
		transform: translateY(40px);
		opacity: 0;
	}
}

#newsSlider {
	position: fixed;
	top: 10vh;
	left: 0;
	width: 100vw;
}

.sidebar{
	display:flex;
	position: fixed;
	right: -40vw;
	bottom: 20px;
	z-index: 5;
	opacity: 0;
	visibility: hidden;
	transition:all .5s;
}

.sidebarTag {
	position:absolute;
	bottom:20px;
	left:-50px;
	width:50px;
	height: fit-content;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	background-color: #FFF;
	text-align: center;
	padding: 2rem 0.5rem;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
	letter-spacing: 0.1rem;
}

.sidebarTag::after{
	content: '';
	position: absolute;
	top: 0;
	right: -8px;
	width: 8px; /* 隠したい影の幅 */
	height:100%;
	background-color: #fff; /* 要素と同じ背景色 */
}

.sidebar-text {
	writing-mode: vertical-rl;
	color: #040404;
}

.sidebar-text img{
	width: 30px;
	margin: auto;
	margin-bottom: 5px;
}


.sidebarContent{
	width:40vw;
	height:70vh;
	padding:2rem 1rem;
	background-color:#FFF;
	border-radius:25px 0 0 25px;
	text-align:center;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
	/* これがある限り、タップしても反応しません 
    pointer-events: none; 
    opacity: 0.8; */
    transition: opacity 0.3s;
}

.sidebarBookingList{
	margin-top:1rem;
}

.sidebarBookingList li {
    cursor: pointer;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    transition: background-color 0.2s;
}

.sidebarBookingList li:hover {
    background-color: #ddd;   /* ホバー時の色変化 */
}

/* モーダルの背景（オーバーレイ） */
.modal-overlay {
    display: none; /* デフォルトは非表示 */
    position: fixed;
    z-index: 9999 !important;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5); /* 半透明の黒背景 */
    justify-content: center;
    align-items: center;
}

/* モーダルが表示状態になった時のクラス */
.modal-overlay.active {
    display: flex; /* flexで中央寄せ */
}

/* モーダルの箱 */
.modal-content {
    background-color: #fff;
    padding: 0; /* ★重要：パディングを削除 */
    border-radius: 8px;
    width: 80%;
    max-width: 500px;
    position: relative;
    overflow: hidden; /* 画像が角丸からはみ出ないように */
}

/* 上部のフルワイド画像 */
#modalTopImage {
    width: 100%;       /* 横幅いっぱい */
    height: 200px;     /* 高さ固定（お好みで auto でも可） */
    object-fit: cover; /* 比率を保ってトリミング */
    display: block;
    margin-bottom: 0;
}

/* タイトルと本文を囲む箱 */
.modal-text-wrapper {
    padding: 20px 25px; /* ★ここで余白を作る */
}

/* 閉じるボタン */
.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    z-index: 10;
    /* 画像の上に乗るので、見やすくする装飾 */
    background: rgba(255, 255, 255, 0.8);
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    font-weight: bold;
	cursor:pointer;
}
.modal-close:hover {
    color: #000;
}

/* モーダル内の画像がはみ出さないようにする */
#modalBody img {
    max-width: 100%;
    height: auto;
    margin: 10px 0;
    border-radius: 4px; /* 角を少し丸める */
}

/* モーダル内のリンクを見やすくする */
#modalBody a {
	font-size:30px;
	font-weight:bold;
    color: #4e4e4e; /* リンク色 */
    text-decoration: none;
}
#modalBody a:hover {
    text-decoration: none;
}

.modal-tel{
	text-align:center;
}

.modal-tel a{
	text-align:center;
}

@media screen and (min-width:768px){
	a[href*="tel:"] {
		pointer-events: none; /*①アンカーのtelを無効化*/
		cursor: default; /*②アンカーのポインターをデフォルトにする*/
		text-decoration: none;
	}
}

.sidebar.is-ready .sidebarContent {
    pointer-events: auto;
    opacity: 1;
}

/* 状態B：PC用（ホバーしたら即座に有効化） */
@media (hover: hover) {
    .sidebar:hover {
        transform: translateX(-100%);
    }
    .sidebar:hover .sidebarContent {
        pointer-events: auto;
        opacity: 1;
    }
}
/* 状態C：スマホ・JS制御用（開いている状態） */
.sidebar.is-open {
    transform: translateX(-100%);
	transition:all .5s;
}

/* ★ここが遅延のキモ★ */
/* .is-ready クラスがついた時だけ、クリック可能にする */
.sidebar.is-ready .sidebarContent {
    pointer-events: auto;
    opacity: 1;
}


.image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.info-image {
	display: none;
}

.btn.sp {
	display: none;
	padding: 0.5rem;
}

a.btn {
	margin-top: 3rem;
	display: block;
	padding: 1.5rem 0;
	color: #735e0d;
	text-align: center;
	border-radius: 50px;
	border: 1px solid #735e0d;
}

.calendar-fixed {
	position: fixed;
	text-decoration: none;
}

/* PC版ボタン設定 */
.pc-btn {
	display: block;
	right: 20px;
	bottom: 5vh;
	height: 120px;
	text-align:center;
}

.pc-btn .calendar-img {
	height: 100%;
}

.pc-btn .calendar-bubble {
	position:relative;
	background: rgba(255, 255, 255, 1);
	padding: 0.6rem 1rem;
	border-radius: 16px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	font-size: 0.9rem;
	line-height: 1.2;
	color: #333;
	width: 9rem;
	transition:all .5s;
}

.calendar-bubble p {
	text-align: center;
	color:#4e4e4e;
}

.pc-btn .calendar-bubble::after {
	content: "";
	position: absolute;
	top: 35px;
	left: 50%;
	transform: translateX(-50%);
	border-width: 6px 6px 0 6px;
	border-style: solid;
	border-color: rgba(255, 255, 255, 1) transparent transparent transparent;
}

.pc-btn:hover .calendar-bubble{
	transform:translatey(-.5rem);
}

/* SP版ボタン設定 */
.sp-btn {
	display: none; /* 初期非表示 */
	position: fixed;
	right: 20px;
	bottom: 15px;
	width: auto;
	height: auto;
	padding: 0;
}

.sp-btn .calendar-bubble {
	display: inline-block;
	position: relative;
	padding: 1.5rem 3rem;
	font-size: 0.85rem;
	line-height: 1.2;
	border-radius: 16px;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	text-align: center;
	white-space: normal;
	word-wrap: break-word;
}

/* 横向き三角形 */
.sp-btn .calendar-bubble::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 99%;
	transform: translateY(-50%);
	border-width: 10px 0 10px 10px;
	border-style: solid;
	border-color: transparent transparent transparent rgba(255, 255, 255, 1);
}

/* ブレイクポイント切替 */
@media screen and (max-width: 767px) {
	.pc-btn { display: none; }
	.sp-btn { display: block; }
}

@media screen and (min-width: 768px) {
	.pc-btn { display: block; }
	.sp-btn { display: none; }
}


/* SP版レイアウト (max-width: 767px) */
@media screen and (max-width: 767px) {
	header {
		padding-inline: 15px;
	}

	#header_logo {
		max-width: 39%;
		margin: auto 0;
	}

	#header_logo img {
		width: 100%;
	}

	#newsSlider {
		width: 100%;
		top: 10vh;
		left: 0;
		bottom: auto;
	}

	.sidebar{
		right:-70vw;
	}
	
	.sidebarContent{
		width:70vw;
	}
	
	.sidebar.is-open {
    	transform: translateX(-100%);
	}
	
	#modalBody a{
		font-size:24px;
	}
	
	/*.sidebar {
		width: 100%;
		height: auto;
		position: fixed;
		right: 0;
		bottom: 0;
		z-index: 3;
		background-color: #fff;
		text-align: center;
		border-top: 1px solid #DFDFDF;
		border-radius: 0;
		transform: translateY(20px);
		opacity: 0;
		visibility: hidden;
		padding: 0 0 1rem 0;
	}

	.sidebar img {
		width: 30px;
		margin: 0;
	}

	.sidebar-text {
		color: #040404;
		display: flex;
		margin: 10px auto;
		justify-content: center;
		align-items: center;
		gap: .5rem;
		writing-mode: horizontal-tb;
	}
	*/
	
	.info-image {
		display: block;
	}

	.info-image img {
		width: 100%;
		height: 300px;
		object-fit: cover;
	}

	.btn.sp {
		display: block;
	}
}
/*↑↑↑クリティカルCSS　後で移動↑↑↑*/


/*広告用*/
.ad-area-wrapper img{
	max-width:100%;
}

h2{
	font-size:34px;
	font-family: "Shippori Mincho", serif; /* 'BIZ UDPMincho', serif　　から変更 2025.11.09 八木 */
	font-weight: 550;
}

#status-indicator {
  	display: inline-block;
	width: 0.5em;
	height: 0.5em;
  	background-color: #FF2222;
  	border-radius: 50%;
 	margin-right: 0.5em;
}
#status-text {
  	font-weight: bold;
  	color: #FF2222;
}
#reservation_status a{
	color:#333;
}
/*ドロップダウン*/
.scroll-guide {
	pointer-events: none;
}


/*-------------------------------------------------------------------------------------------------------------------------
サイドバー（ご利用方法）
---------------------------------------------------------------------------------------------------------------------------*/
/*サイドバー（ご利用方法）　パソコン用*/
.sidebar.show {
	opacity: 1;
	visibility: visible;
}
/*サイドバー（ご利用方法）　スマホサイズ用*/
.sidebar__sp {
	width: 100%;
	display: none;
	height: auto;
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 1;
	background-color: #fff;
	text-align: center;
	border-top: 1px solid #DFDFDF;
	transform: translateY(20px);
	opacity: 0;
	transition: opacity 0.4s, visibility 0.4s;
    visibility: hidden;
}
.sidebar__sp img {
	width: 30px;
}
.sidebar-text__sp {
	color: #040404;
	display: flex;
	margin: 10px auto;
	justify-content: center;
	align-items: center;
	gap: .5rem;
}
.sidebar__sp.show{
	opacity: 1;
	visibility: visible;
}
/*-------------------------------------------------------------------------------------------------------------------------
ページトップに戻る:ボタン
---------------------------------------------------------------------------------------------------------------------------*/
#pagetop_return {
	position: absolute;
	right: 60px;
	top: -35px
}
#return_icon {
	height: 70px;
    width: 70px;
    background: #FFF;
	border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
	z-index: 5;
	border: solid 3px #4e4e4e;
}
#return_icon_arrow {
	height: 15px;
    width: 15px;
    border-top: 3px solid #4e4e4e;
    border-right: 3px solid #4e4e4e;
	transform: translateY(20%) rotate(-45deg);
}
/*-------------------------------------------------------------------------------------------------------------------------
メイン
---------------------------------------------------------------------------------------------------------------------------*/
main{
	position:relative;
	background-color:transparent;
	
	/*  position: sticky;が効かない為、解除します。
	overflow:hidden;
	*/
}
.u-rect {
  	width: 100%;
}
#contentBox{
	width:100%;
	background-color:#FFFDF4;
}
.background-texture{
	background-image: url("../images/background-0.13.png");
	background-repeat: no-repeat;
	background-size: cover;
}
/*.news,.info,.access,.quest{
	margin:auto 200px;
	padding: 100px 0 ;
}*/

.section-title{
	margin-bottom:5rem;
	text-align:center;
}
.section-title h2{
	margin-bottom:0.5rem;
}
.section-title p{
	font-size:20px;
	font-family: 'BIZ UDPMincho', serif;
	letter-spacing: 0.04em;
	color: rgba(115,94,13,0.5);
	text-align:center;
}


.section-title{
	margin-bottom:5rem;
	text-align:center;
	position:relative;
	display: inline-block; /* ←これが重要 */
	padding: 20px 30px;
}
/* ------------------------------------- */
/* 装飾の共通スタイル */
/* ------------------------------------- */
.section-title::before,
.section-title::after {
    content: "";
    position: absolute; /* .section-title を基準 */
    width: 100px; 
    height: 100px; 
    background-size: contain;
    background-repeat: no-repeat;
	/*
	opacity:.8;
	*/
    
    /* 使用する単一の画像ファイル（右下用の画像） */
    background-image: url('../images/right-bottom-dec.svg'); 
}

/* ------------------------------------- */
/* 1. 右下 (::after) - 基点となる画像 */
/* ------------------------------------- */
.section-title::after {
    /* 垂直位置: 下端パディング(40px)を戻し、5px外側にはみ出す */
    bottom: calc(-40px - 5px);
    
    /* 水平位置: 右端パディング(100px)を戻し、5px外側にはみ出す */
    right: calc(-100px - 5px);
    
    /* 右下は反転なし（元の画像を使用） */
    transform: none; 
}

/* ------------------------------------- */
/* 2. 左上 (::before) - 反転させた画像 */
/* ------------------------------------- */
.section-title::before {
    /* 垂直位置: 上端パディング(40px)を戻し、5px外側にはみ出す */
    top: calc(-40px - 5px); 
    
    /* 水平位置: 左端パディング(100px)を戻し、5px外側にはみ出す */
    left: calc(-100px - 5px); 
    
    /* 左上は上下左右に反転（180度回転） */
    transform: scaleX(-1) scaleY(-1); 
    /* または transform: rotate(180deg); でも可 */
}

/*-------------------------------------------------------------------------------------------------------------------------
お知らせ
---------------------------------------------------------------------------------------------------------------------------*/
#contentWrapper-news{
	background-repeat: no-repeat;
	background-size: cover;
}
.news-list{
    list-style: none;
    border-top: 1px solid #ccc;
    text-align:left;
}
.article {
    border-bottom: 1px solid #ccc;
    position: relative; /*リンクの基点*/
}
/*記事全体に広がるリンク*/
.article-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /*背景リンクを z-index: 1 に設定*/
	transition:all .3s;
}
.article li{
    list-style-type:none;
}
.news-text{
    display:flex;
    flex-wrap:nowrap;
    padding: 2rem 1rem;
    justify-content: space-between;
    align-items: center;
}
.newsWrapper{
    display:flex;
    flex-wrap:wrap;
}
.news-header{
    display:flex;
    flex-wrap:nowrap;
    font-size:15px;
    color: rgba(115,94,13,0.8);
	/*　レイアウト崩れ防止のため、一回解除します。
    min-width:250px;
	*/
}
.news-date{
    width:110px;
    margin-right:1rem;
}
/*カテゴリーを背景リンク(z-index: 1)より手前に配置*/
.news-category {
    position: relative; /*z-index用*/
	margin-right:1rem;
    z-index: 2; /*リンクより上*/
}
/*カテゴリーリンクを背景リンク(z-index: 1)より手前に配置*/
.post-categories{
	display:flex;
	gap:10px;
}
.post-categories a{
	/*
	display:inline-block;
	width:85px;
	padding:.1rem .5rem;
*/
	padding:.5rem .8rem; 
    border:1px solid #735E0D;
	border-radius:25px;
    font-size:12px;
    color:#735E0D;
    position: relative; /*z-index用*/
    z-index: 2; /*リンクより上*/
	white-space: nowrap;
	text-align:center;
}
.news-main{
    display: flex;
    align-items: center;
}
.news-title{
    font-size:18px;
	font-weight:normal;
	color:#735E0D;
}
.arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 1px solid #735E0D;
	border-radius: 50%;
	flex-shrink: 0;
	/*クリックイベント無効*/
	pointer-events: none;
	transition:all .3s;
}
.arrow span{
	color:#735E0D;
}
.article:hover {
    background-color:rgba(0,0,0,0.05);
}
.article:hover .arrow{
	background-color:#735E0D;
}
.article:hover .arrow span{
	color:white;
}
#news-more{
	text-align: center;
	width:fit-content;
	margin:0 auto;
}
#news-more a{
	color:#735E0D;
    display: block;
    padding: 0.5rem 35px;
    color: #735e0d;
    text-align: center;
    border-radius: 50px;
    transition: all .3s;
    border: 1px solid #735e0d;
	margin-top:3rem;
	transition:all .3s;
}
#news-more a:hover{
	color:#ffffff;
	background:#735e0d;
}

/*-------------------------------------------------------------------------------------------------------------------------
施設のご案内
---------------------------------------------------------------------------------------------------------------------------*/
#contentWrapper-info{
	background-image: url("http://www.seali2004.shop/sample-site/wp-content/uploads/2025/10/和紙＿ベージュ＿２０％.png");
	background-repeat: no-repeat;
	background-size: cover;
}
.scroll-section-wrapper{
	display: flex;
	align-items: flex-start;

}
/* 左側：画像固定領域 */
.image-wrapper {
  position: sticky;
  top: 0;
  width: calc(50% + 200px); /* 通常より少し広げる */
  height: 100vh;
  overflow: hidden;
  flex-shrink: 0;

  /* ★左端まで広げるためにマイナスマージン */
  margin-left: -200px;
}

.image-wrapper .image {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.image-wrapper .image.active {
  opacity: 1;
}

/* 右側テキスト部分 */
.scroll-content {
	width: 50%;
	background: transparent;
	position: sticky;
	top: 0;
}

.scroll-section {
	min-height: 100vh;
	padding: 80px 0 80px 60px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align:left;
}
.explain{
	margin:2rem;
}
.explain .flexWrapper{
	flex-wrap:wrap;
	align-items:center;
	margin-bottom: 2rem;
}
.catchcopySet{
	display:flex;
	flex-wrap:nowrap;
	align-items:center;
}
.ruledLine{
	width:3rem;
	height:0.75px;
	background-color:rgba(115,94,13,0.8);
	margin:auto 1rem;
}
.explain-catchcopy{
	position:relative;
	font-size:16px;
	font-family: 'BIZ UDPMincho', serif;
	font-weight: 580;
	letter-spacing: 0.04em;
	color: rgba(115,94,13,0.8);
}
/*もっと見る*/
.moreLinkWrapper{
	text-align:right;
	margin-top:2rem;
}
.more-link{
  	display: inline-block;      /* 幅に沿って線を表示するためinline-block */
  	position: relative;         /* ::after を配置するため */
  	padding-right: calc(14px + 12px); /* 右スペース確保 */
  	padding-bottom: 6px;        /* 下の余白（border-bottomとテキストの距離） */
  	color: #7a6717;
  	text-decoration: none;      /* 下線は border-bottom で表現 */
  	border-bottom: 2px solid #7a6717; /* 水平線 */
  	line-height: 1;
  	transition: color .18s ease, transform .18s ease;
}
/* 斜めの線：疑似要素 */
.more-link::after{
  	content: "";
  	position: absolute;
  	right: 0px;
  	bottom: 6px; 
  	width: 14px;
  	height: 2px;
  	background: #7a6717;
  	transform-origin: left center;
  	transform: rotate(30deg);
  	transition: transform .18s ease;
  	will-change: transform;
}
/*アニメーション*/
.more-link:hover,
.more-link:focus{
  	color: #5d4f12;
  	transform: translateX(4px);
}
.more-link:hover::after,
.more-link:focus::after{
  	transform: rotate(calc(30deg - 6deg)) translateX(2px);
}
/* キーボードフォーカスの視認性（アクセシビリティ） */
.more-link:focus{
  	outline: 3px solid rgba(122,102,23,0.12);
  	outline-offset: 4px;
}
/*-------------------------------------------------------------------------------------------------------------------------
Q & A　よくある質問
---------------------------------------------------------------------------------------------------------------------------*/
#contentWrapper-info{
	background-repeat: no-repeat;
	background-size: cover;
}

/* FAQ全体リスト */
.faq-list {
  	list-style: none;
  	border-top: 1px solid #ccc;
  	padding-left: 0; /* ulのデフォルトpaddingをリセット */
  	margin: 0; /* ulのデフォルトmarginをリセット */
}

/* 各項目 */
.faq-item {
  	border-bottom: 1px solid #ccc;
	list-style-type:none;
}
/* 質問部分 */
.faq-question {
  	position: relative;
  	display: flex;
  	align-items: center;
  	padding: 1.5rem 1rem; /* 少し調整しました */
  	font-weight: bold;
  	cursor: pointer;
	text-align:left;
}
.faq-question-main{
	display:flex;
	width:100%;
}

/* Q／A のラベル色 */
.faq-label {
  	margin-right: 1rem;
  	flex-shrink: 0; /* ラベルが縮まないようにする */
}
.faq-label.q {
  	color: #0D3973;
}
.faq-label.a {
  	color: red;
}
.faq-title{
	width:80%;
}
/* ▼ 矢印アイコン */
.faq-toggle{ 
	display: inline-block; 
	width: 10px; 
	height: 10px;
	border-left: 2px solid #333;
	border-bottom: 2px solid #333; 
	margin: 0 0 0 auto; 
	transform: rotate(135deg);
	transform-origin: center center;
	transition: ease 0.2s 
} 
/* 開いたときに▲に変わる */ 
.faq-item.open .faq-toggle{ 
	transform: rotate(-45deg); 
	transform-origin: center center;
}

/* 回答部分（外側の箱）- アニメーション担当 */
.faq-answer {
  	max-height: 0;
  	overflow: hidden;
  	/* paddingは持たない */
  	transition: max-height 0.4s ease-out; /* アニメーションは高さのみ */
}

/* 回答の内部コンテンツ（内側の箱）- 余白担当 */
.faq-answer-inner {
  	/* こちらで余白をすべて担当 */
	display:flex;
  	padding: 1rem 1rem 1.5rem 1rem; /* 上・左右・下の順 */
  	box-sizing: border-box;
	text-align:left;
}
/* 開いたときに▲に変わる */
.faq-item.open .faq-toggle{
	transform: rotate(-45deg);
	transform-origin: center center; /* 中心で回転 */
}

#questAddress{
	margin-top:3rem;
	text-align:center;
}
#questLinks{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	color:#735E0D;
	margin-top:2rem;
	gap:2rem;
}
.linkButton{
	display:inline-block;
	padding:2rem 3rem;
	min-width:300px;
	text-align:center;
	border:1px solid #735E0D;
	color:#735E0D;
	transition:all .3s;
}
.linkButton:hover{
	opacity:0.6;
}

/*-------------------------------------------------------------------------------------------------------------------------
アクセス
---------------------------------------------------------------------------------------------------------------------------*/
#contentWrapper-access{
	background-image: url("http://www.seali2004.shop/sample-site/wp-content/uploads/2025/10/和紙＿白＿2０％.png");
	background-repeat: no-repeat;
	background-size: cover;
	text-align:center;
}
#access-name{
	width:fit-content;
	border-top:1px solid #333;
	border-bottom:1px solid #333;
	margin:0 auto 2rem auto;
	padding:.5rem .3rem;
}
#access-name .flexWrapper{
	gap:1rem;
	justify-content:center;
	align-items:center;
}
#map{
	width:100%;
}
#access .flexWrapper{
	margin:auto 2rem;
	gap:3rem;
	justify-content:center;
}
#access-method{
	text-align:left;
	width:33%;
}
#access-method p{
	text-align:left;
}
.methodHeader{
	text-align:center;
	color:#735E0D;
	font-size:20px;
	border-bottom:1px dashed #735E0D;
}

/*-------------------------------------------------------------------------------------------------------------------------
フッター
---------------------------------------------------------------------------------------------------------------------------*/
/*フッターアニメーション*/
.waves-container {
	position: relative;
	width: 100%;
	height: 100px;
	margin-bottom: -1px; /* 隙間防止 */
	
	background-repeat:no-repeat;
	background-size: cover;
	background-position: center bottom;
	background-color:#fffdf4;
	background-attachment: fixed;
	overflow: hidden;
}
/* 最後のセクションが背景画像なし（#fffdf4）で終わるページのフッター設定 */
.waves-container.dark-footer-match{
	background-image: url("../../../uploads/2025/11/background-0.13.png");
}
.waves {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 100%;
}
@keyframes move-wave {
	0% {
		transform: translate3d(-90px, 0, 0);
	}
	100% {
		transform: translate3d(85px, 0, 0);
	}
}
.single-wave {
	animation: move-wave 10s linear infinite;
}

#footer-content{
	position:relative;
	display:flex;
	padding:4rem 180px;
	height:auto;
	width:100%;
	background-color:#4E4E4E;
	color:white;
}
footer h2{
	font-size: 40px;
}
footer a{
	color:white;
}
#footer-sns{
	padding-top:2rem;
}
.snsLogo{
	width:4rem;
}
#footer-rightWrapper{
	margin-left:auto;
}
#footer-link{
	display:flex;
	gap:2rem;
	padding-bottom:2rem;
}
#footer-affiliated,#footer-others{
	display:flex;
	flex-direction:column;
}
#footer-affiliated{
	align-items:flex-end;
}
#footer-affiliated .affiliated{
	position:relative;
}
#footer-affiliated .affiliated::before{
	position:absolute;
	content: "";
  	top: 50%;
	right: 110%;
  	width: 50px;
  	height: 1px;
  	background-color: white;
}
small{
	text-align:right;
}


/*-------------------------------------------------------------------------------------------------------------------------
お問い合わせフォーム 八木制作ver.
---------------------------------------------------------------------------------------------------------------------------*/
.single-title{
	margin-top:10vh;
}
.form-content-before p{
	text-align:center;
	margin-bottom:80px;
}
.form-content-before-link{
	margin:0 auto 80px auto;
	max-width:380px;
}
.form-content-before-link a{
	color:#735e0d;
	display:block;
	padding:1.5rem 0;
	border: solid 1px #735e0d;
	border-radius:50px;
	transition:all .3s ease;
}
.form-content-before-link a:hover{
	color:#fff;
	background-color:#735e0d;
}
.form-wrap{
	width:100%;
	background-color:#FFFFFF;
	padding:2rem;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}
.form-title{
	margin-bottom:100px;
}
/* フォーム全体のラッパー */
.my-contact-form {
    max-width: 800px; /* フォームの最大幅（適宜調整）*/
    margin: 0 auto; /* 中央寄せ */
}

/* 各項目の行 */
.form-row {
    margin-bottom: 30px; /* 各項目の下の余白 */
}

/* 項目のラベル（お名前、など）*/
.form-label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 14px;
}

/* 必須マーク */
.form-required {
    color: #E03131; /* 赤色 */
    font-weight: bold;
    margin-left: 4px;
}

/* * 2列レイアウト（姓・名）
 * Flexbox を使って横並びにします
 */
.form-row-half {
    display: inline-block; /* 横並び */
    width: calc(50% - 8px); /* 幅を半分弱に */
}
.form-row-half:first-of-type {
    margin-right: 16px; /* 1つ目と2つ目の間の余白 */
}

/* * 入力フィールド（input や textarea）の共通スタイル 
 * デザインカンプの「薄いグレーの背景」を再現
 */
.my-contact-form input[type="text"],
.my-contact-form input[type="email"],
.my-contact-form input[type="tel"],
.my-contact-form textarea {
    width: 100%; /* 幅を100%に */
    padding: 12px 16px;
    border: 0.5px solid rgba(0,0,0,0.2); /* 線を消す */
    background-color: #F4F4F4; /* 薄いグレー */
    border-radius: 4px;
    font-size: 16px;
}

/* textarea（お問い合わせ内容）の高さ */
.my-contact-form textarea {
    height: 240px; /* 高さを指定 */
    resize: vertical; /* 縦方向のみリサイズ可 */
}

/* ラジオボタン（お問い合わせ項目） */
.wpcf7-list-item {
    margin-right: 20px;
    font-size: 10px;
}
span.wpcf7-list-item-label {
	font-size:16px;
}

/* プライバシーポリシー同意欄 */
.form-privacy .wpcf7-list-item {
    margin: 0;
}

/* 送信前テキスト */
.form-pre-submit-text {
    font-size: 13px;
    color: #555;
    text-align: center;
    margin-top: 24px;
}

/* スパム認証（reCAPTCHAなど）*/
.form-recaptcha {
    display: flex;
    justify-content: center; /* 中央寄せ */
    margin-bottom: 20px;
}

/* 送信ボタン */
.wpcf7-form-control{
    border-radius: 4px;
    font-size: 1.4em;
}
.wpcf7-submit.has-spinner.btn{
    background: #735E0D;
	color: #fff;
	border: 1px solid #735E0D;
    transition:all .3s;
    width:10rem;
}
.wpcf7-submit.has-spinner.btn:hover {
    background: #ffffff;
    color: #735E0D;
}
.wpcf7-spinner {
    display: none;
}
.wpcf7-form-control.wpcf7-previous.btn{
    background: #ffffff;
    color: #735E0D;
	border: 1px solid #735E0D;
    transition:all .3s;
    width:10rem;
}
.wpcf7-form-control.wpcf7-previous.btn:hover{
	background: #735E0D;
	color: #ffffff;
}
.form_btn p{
	text-align:center;
}

/*-------------------------------------------------------------------------------------------------------------------------
お問い合わせ確認ページ　八木ver.
---------------------------------------------------------------------------------------------------------------------------*/
/* 確認ページの「戻る」ボタン（例：白抜き） */
.form-submit-confirm .btn-back {
    background-color: #fff;
    color: #111;
    border: 1px solid #111;
}
/* 「送信」ボタンと横並びにするための調整 */
.form_group.form-submit-confirm .btn,
.form_group.form-submit-confirm .btn-back {
    display: inline-block;
    width: auto;
    margin: 0 10px;
}
.form_btns p{
	display:flex;
	flex-wrap:nowrap;
	gap:1rem;
	justify-content:center;
}

/* 確認ページの「お問い合わせ内容」の改行を反映させる */
.confirm-message-box {
    white-space: pre-wrap; /* これが改行を保持します */
    background-color: #F8F9FA; /* 入力欄と似た背景色 */
    padding: 12px 16px;
    border-radius: 4px;
    min-height: 100px;
}

/* 確認ページの見出し（「お名前」など）との隙間調整 */
.confirm-page .form-label {
    margin-bottom: 8px;
}

/*-------------------------------------------------------------------------------------------------------------------------
Googleカレンダー
---------------------------------------------------------------------------------------------------------------------------*/
.gcalendar{
	text-align: center;
}
.gcalendar iframe{
	width: 100%;
    height: 400px;
}

/*-------------------------------------------------------------------------------------------------------------------------
投稿ページ・アーカイブページ
---------------------------------------------------------------------------------------------------------------------------*/
/* ページ番号・件数 */
.page-info {
    text-align: center;
	margin:2rem 0 1rem 0;
    font-size: 16px;
}
.total-posts{
	font-size:13px;
	opacity:0.6;
}
/* ページネーションボタン */
.custom-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* 狭い場合は折り返す */
    gap: 10px;

}

.custom-pagination a {
    text-decoration: none;
    padding: 6px 12px;
    border: 1px solid #735e0d;
	color:#735e0d;
    border-radius: 4px;
    transition: 0.2s;
}

.custom-pagination a:hover {
    background: #735e0d;
    color: #fff;
}

/* SP用（767px以下） */
@media screen and (max-width: 767px) {
    .custom-pagination {
        gap: 6px;
        flex-wrap: wrap; /* 横並びを維持しつつ折り返す */
    }

    .custom-pagination a {
        padding: 6px 10px;
        font-size: 14px;
    }

    .page-info {
        font-size: 14px;
    }
}



/*-------------------------------------------------------------------------------------------------------------------------
固定ページ
---------------------------------------------------------------------------------------------------------------------------*/
.topImage{
	width:100%;
	height:90vh;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	display:flex;
	justify-content:center;
	align-items:center;
}
.topImage.sauna{
	background-image:url("../../../uploads/2025/10/男性側サウナ②.jpg")
}
.topImage.bath{
	background-image:url("../../../uploads/2025/10/笑福＿露天＿夜.jpg")
}
.topImage.facility{
	background-image:url("../../../uploads/2025/10/2F休憩室-1.jpg")
}
.topImage.bedrock{
	background-image:url("../../../uploads/2025/10/火釜房②.jpg")
}
.topImage.restaurant{
	background-image:url("../../../uploads/2025/10/笑福亭座敷-1.jpg")
}
.topImage.relaxation{
	background-image:url("../../../uploads/2025/11/ボディ.jpg")
}
.topImage.guide{
	background-image:url("../../../uploads/2025/11/ご利用方法トップ画像.png")
}
.topImage.giwado {
	background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
			url("../../../uploads/2025/10/2F休憩室-1.jpg");
	background-size: cover;
}
.topImage.use-info{
	background-image:url("../../../uploads/2025/11/背景1・外観-※修正.png")
}
.topImage{
  opacity: 0;
  visibility: hidden;
}
.topImage.action{
  animation: blur-anime 1.3s ease forwards;
  visibility: visible;
  opacity: 1;
}
/*！仮！丸窓枠デザイン*/
.topVisual{
	width:100%;
	height:90vh;
	background-color:#2E1207;
}
.topVisual .flexWrapper{
	justify-content:center;
	align-items:center;
	gap:2rem;
	flex-wrap:wrap;
}
.topVisualTitle{
	color:white;
}
.topVisualTitle h2{
	font-size:64px;
}
.topVisualImage{
	width:400px;
	height:400px;
	border-radius:50%;
	background-size:cover;
	background-repeat:no-repeat;
	overflow:hidden;
}
.topVisualImage.bath{
	background-image:url("../../../uploads/2025/10/笑福＿露天＿夜.jpg");
}
.topVisualImage .flexWrapper{
	gap:200px;
	flex-wrap:nowrap;
}
.fusuma{
	/*width:20vw;
	height:40vw;
	background: rgba(255, 255, 255, 0.5);
	background-image:url("../../../uploads/2025/11/shoji_frame.png");
	background-size:cover;
	background-repeat:no-repeat;
	backdrop-filter: blur(10px);*/
    width: 200px;
    height: 400px;

    background-image: 
        url("../../../uploads/2025/11/アセット-3-8.png"),
        url("https://www.transparenttextures.com/patterns/felt.png"), /* フリーのノイズ素材例 */
        radial-gradient(circle at center, rgba(255, 255, 255, 0.4) 10%, rgba(230, 230, 230, 0.85) 90%);

    background-size: cover, 100px 100px, cover; 
    background-repeat: no-repeat, repeat, no-repeat;

    /* 枠画像(PNG)の不透明部分にだけ影をつけるフィルター */
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));

    /* 障子全体が窓枠に嵌まっているような内側の影 */
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);

    /* すりガラス効果は少し弱めて和紙感を優先 */
    backdrop-filter: blur(4px);
}
.fusuma:nth-child(1){
	transform: scale(-1, 1);
}


@keyframes blur-anime {
  0% {
    transform: translateY(30px);
    filter: blur(100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    filter: blur(0);
    opacity: 1;
  }
}
.topImageTitle{
	text-align:center;
	/*あとでぼかす*/
}
.topImageTitleChar{
	position:relative;
	z-index:1;
}
.topImageTitleChar h2{
	font-size:64px;
	margin:-20px 0;
}
.topImageTitleChar h2,.topImageTitleChar p{
	font-family: "Shippori Mincho", serif; /* "Sawarabi Mincho", serif　から変更 2025.11.09 八木 */
	text-align:center;
}
.topImageTitleVisible{
	width:300px;
	height:300px;
	margin:0 auto;
	background-color:white;
	border-radius:50%;
	filter:blur(50px);
	transform:translatey(-200px);
	margin-bottom:-200px;
}
.textOnBorder{
	max-width:900px;
	display:block;
	margin:0 auto;
	padding:1rem 2rem;
	text-align:center;
	background-color:white;
	transform:translatey(-80px);
	margin-bottom:-80px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
}
.textOnBorder p{
	text-align:center;
}
.use-info-item{
	display:flex;
	gap:10px;
	justify-content:center;
}
.onBorderText{
	display:flex;
	justify-content:center;
	align-items:center;
}
.onBorderTextLeft{
	text-align:center;
	width: 50%;
}
.palms_TOB_Left {
	text-align: left;
	width: fit-content;
	margin: 0 auto;
}
.onBorderOpenHour{
	display:flex;
	flex-wrap:wrap;
}
.onBorderTextRight{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content: center;
	width: 50%;
}
/*寛ぎ-館内の過ごし方-*/
.section-title.facility p {
	text-align: left;
}
/* スイッチ */
.switch {
	display: inline-flex;
	border: 1px solid #735E0D;
	margin-bottom:5rem;
	width:100%;
}
.switch button {
	flex: 1;
	padding: 10px 20px;
	font-size: 18px;
	border: 0.5px solid #735E0D;
	background: none;
	color: #735E0D;
	transition: background 0.3s, color 0.3s;
}
.switch button:hover{
	background: #735E0D;
	color: #fff;
}
.switch button.active {
	background: #735E0D;
	color: #fff;
}
.switch button.active:hover{
	background: none;
	color: #735E0D;
}
.woman {
	display: none;
}
/*facility用スイッチ*/
.facilitySwitcher {
	display: inline-flex;
	margin-bottom:5rem;
	width:100%;
	background-color:white;
}
.facilitySwitcher button {
	flex: 1;
	padding: 10px 20px;
	font-size: 18px;
	border: none;
	color: #735E0D;
	transition: background 0.3s, color 0.3s;
}
.facilitySwitcher button.active {
	color: #B8AE85;
}
.facilitySwitcher button:nth-child(2) {
	border-right:1px solid #777;
	border-left:1px solid #777;
}

/*-------------------------------------------------------------------------------------------------------------------------
お風呂ここから
---------------------------------------------------------------------------------------------------------------------------*/
.section-title.bath {
	margin-bottom: 1rem;
}
/*サウナ効果*/
#effect{
	width:100%;
	text-align:center;
}
#saunaEffectLists{
	width:100%;
	border-top:1px solid #777;
	/*
	margin-top:3rem;
	*/
}
#saunaEffect{
	display:flex;
	flex-wrap:wrap;
	gap:1rem;
	padding:3rem 2rem;
	text-align:left;
	justify-content:space-between;
	border-bottom:1px solid #777;
}
#saunaEffect h4{
	width:15rem;
	color:#735E0D;
}
#saunaEffect p{
	width:45rem;
}
#caution{
	text-align:left;
	margin-top:1rem;
}
.btn.bath-calendar {
	padding: 0.7rem 0;
}
.No-1 {
	padding: 0.2rem 1rem;
	background-color: #735E0D;
	margin-bottom: 0.3rem;
	width:fit-content;
}
.No-1 p {
	font-size: 16px;
	font-weight: bold;
	font-family: "Shippori Mincho", serif;
	color: #FFF;
	text-align: center
}
/*-------------------------------------------------------------------------------------------------------------------------
岩盤浴ページここから
---------------------------------------------------------------------------------------------------------------------------*/
#openHourWrapper{
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:nowrap;
	gap:1rem;
	margin-bottom:2rem;
}
#bedrockOpenHour{
	font-weight:bold;
	font-size:1.5rem;
}
.cautions.Bedrock_bath {
	width: 100%;
	text-align: center;
	margin-top:2rem;
}
.cautions.Bedrock_bath h2 {
	font-weight: semibold;
}
.cautions_text {
	width: 100%;
	max-width: 1280px;
	background-color: #FFF;
	border: 0.5px solid rgba(115, 94, 13, .2);
	padding: 2rem;
}
.cautions_text p {
	text-align: left;
	display: inline-block;
}
#cautions_list {
	width: fit-content;
	text-align: left;
	margin: auto;
}
ul#cautions_list li {
	margin-left: 5rem;
}

/*-------------------------------------------------------------------------------------------------------------------------
直営リラクゼーションページここから
---------------------------------------------------------------------------------------------------------------------------*/
.relaxation-T {
	color: #FFF;
}
.masage-Wrapper {
	align-items: center;
	margin-bottom: 2rem;
}
.masage-Wrapper p{
	color:#735E0D;
}
/*-------▼笑福亭smart slider▼-------*/
/*メニューまとめ*/
#menuList{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
}
/*トリガー画像*/
.open-slider-trigger {
    transition: opacity 0.3s;
}
.open-slider-trigger:hover {
    opacity: 0.7;
}
/*全画面表示の背景*/
.fullscreen-slider-wrapper {
    display: none; /* ★初期状態は非表示 */
    position: fixed; /* 画面全体に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* 半透明の黒背景 */
    z-index: 99990; /* 最前面に表示 */
}
/*スライダー本体のコンテナ*/
.slider-inner-content {
    width: 100%;
    height: 100%;
}
/*バツボタン*/
.close-slider-button {
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 40px;
    color: white;
    cursor: pointer;
    z-index: 99999; /* スライダー本体より手前に */
    line-height: 1;
}
.close-slider-button:hover {
    opacity: 0.7;
}
/*-------▲smart slider▲-------*/
#menuInfo{
	margin-top:3rem;
}
#menuInfo p{
	text-align:center;
}
/*リラクゼーション*/
.relaxation-title {
	position:relative;
	margin-bottom: 3rem;
}
.relaxation-title::before{
	content:"";
	position:absolute;
	top:6px;
	left:-2rem;
	width:3px;
	height:100%;
	background-color:#735E0D;
}
.relaxation-price{
	color:#735E0D;
}
.relaxation-price span{
	/*
	padding:.5rem .3rem;
	border:1px solid #735E0D;
	margin-right:.5rem;
	*/
	padding:.5rem 1rem;
	border:1px solid #735E0D;
	background:#735E0D;
	color:#ffffff;
	border-radius:20px;
	margin-right:1rem;
}

.tel-number{
	color:#735E0D;
	transition:all .3s
}
.tel-number:hover{
	opacity:.6;
}
/*-------------------------------------------------------------------------------------------------------------------------
お食事処「笑福亭」
---------------------------------------------------------------------------------------------------------------------------*/
.menuItem{
	margin-bottom:5rem;
}
.menuItem h3{
	border:1px solid #4e4e4e;
	padding:0.5rem 2rem;
	width:fit-content;
	margin:0 auto 2rem auto;
}
.menuItem img{
	height:70vh;
	width:100%;
	object-fit:contain;
}



/*-------------------------------------------------------------------------------------------------------------------------
お知らせ詳細ページ「single.phpページ」
---------------------------------------------------------------------------------------------------------------------------*/
/* ========================================= */
/* 1. 記事メタ情報・タイトル */
/* ========================================= */
.section-title.single-title {
    margin-top: 10vh;
}
.post-header-flex {
    display: flex;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    align-items: center;
}
p.post-meta {
    color: #735E0D;
    font-size: 1rem;
    margin-right: 1rem;
}
/* カテゴリータグの装飾 */
p.post-meta a {
    border: 1px solid #735E0D;
    padding: .1rem .4rem;
    font-size: 14px;
    color: #735E0D;
    margin-left: 10px;
    text-decoration: none;
    display: inline-block;
}
/* 記事タイトル */
h2.post-title {
    font-size: 30px; /* PCでのサイズ */
    font-weight: 500;
    color: #735E0D;
    font-family: 'BIZ UDPGothic', sans-serif;
    text-align: left;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.02em;
    text-rendering: optimizeLegibility;
}
/* 区切り線 */
hr.post-divider {
    margin-bottom: 50px;
    border: none;
    border-top: 1px solid #ccc; /* 灰色の線 */
}

/* ========================================= */
/* 2. アイキャッチ画像と本文のレイアウト（SP/PC切り替え）*/
/* ========================================= */
/* 【デフォルト（SP・767px以下）のスタイル】 */
/* デフォルトを「1カラム」にします */
.post-body-wrap.has-thumbnail {
    display: block; /* 1カラム表示 */
}
.featured-image-area {
    width: 100%;
    max-width: 100%;
    margin-bottom: 30px; /* 画像と本文の余白 */
}
.featured-image-area img {
    width: 100%; /* SPでは画像を全幅表示 */
    height: auto;
    display: block;
}
.post-content-area {
    width: 100%;
}
/* アイキャッチ画像がない場合（本文を幅いっぱいにする） */
.post-body-wrap.no-thumbnail .post-content-area {
    width: 100%;
}

/* 【768px以上の画面幅（PC）で2カラムに固定】 */
@media (min-width: 768px) {
    .post-body-wrap.has-thumbnail {
        display: flex;      /* 2カラム化を有効に */
        gap: 40px;          /* 画像とテキストの間隔 */
        flex-wrap: nowrap;  /* PCでは折り返さない */
    }
    
    .featured-image-area {
        flex: 0 0 40%; /* 40%の幅を固定 */
        max-width: 40%;
        margin-bottom: 0; /* PCでは下の余白をリセット */
    }
    .featured-image-area img {
        max-width: 100%; /* 親要素(40%幅)を超えない */
        height: auto;
        /* width: 100% はSP用なのでリセット */
        width: auto; 
    }
    .post-content-area {
        flex-grow: 1; /* 残りのスペースを全て使用 */
        width: 60%; /* 60%の幅をベースに設定 */
    }
}

/* ========================================= */
/* 3. 記事本文（the_content）のスタイリング */
/* ========================================= */
.post-body-layout {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}
/* ★レイアウト崩れを防ぐ最重要コード（要素間の余白を自動で統一） */
.post-body-layout > * + * {
    margin-top: 1.75em;
}
/* --- 見出しのスタイル (PC) --- */
.post-body-layout h2 {
    margin-top: 2.5em;
    font-size: 1.5em; /* 24px */
    font-weight: bold;
    color: #735E0D;
    border-bottom: 2px solid #735E0D;
    padding-bottom: 0.3em;
}
.post-body-layout h3 {
    margin-top: 2em;
    font-size: 1.25em; /* 20px */
    font-weight: bold;
    color: #735E0D;
    border-left: 5px solid #735E0D;
    padding-left: 0.5em;
}
/* --- リスト（箇条書き） --- */
.post-body-layout ul,
.post-body-layout ol {
    padding-left: 1.5em;
}
.post-body-layout li {
    margin-bottom: 0.5em;
}
.post-body-layout li:last-child {
    margin-bottom: 0;
}
/* --- 画像の制御（エディタ挿入分） --- */
.post-content-area img {
    max-width: 100%; /* コンテナ幅を超えない */
    height: auto;
    display: block;
}
.post-content-area figure {
    width: auto;
    max-width: 100%;
    margin: 0;
}
.post-content-area .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/* PCでの回り込み (768px以上) */
@media (min-width: 768px) {
    .post-content-area .alignleft {
        float: left;
        margin-right: 1.5em;
        margin-bottom: 1em;
    }
    .post-content-area .alignright {
        float: right;
        margin-left: 1.5em;
        margin-bottom: 1em;
    }
}
/* 回り込み解除（floatによる崩れ防止） */
.post-body-layout p:after,
.post-body-layout div:after {
    content: "";
    display: table;
    clear: both;
}

/* ========================================= */
/* 4. ページネーション（前へ/一覧/次へ） - PC設定 */
/* ========================================= */
.post-nav-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    margin-top: 30px;
    border-top: 1px solid #eee;
}
.post-nav-links a {
    color: #735e0d;
    transition: opacity 0.2s ease;
}
.post-nav-links a:hover {
    opacity: 0.7;
}
/* PCでの中央寄せ（一覧） */
.nav-list {
    flex-shrink: 0;
    margin: 0 20px;
}
.nav-list a {
    color: #735e0d;
    transition: opacity 0.2s ease;
}
.nav-list a:hover {
    opacity: 0.7;
}

/* --- PC用のロジック --- */
/* PCでは「伸びて(grow)右寄せ/左寄せ」することで位置を調整している */
.post-nav-links.no-next .nav-list {
    order: 3;
    margin: 0;
    text-align: right;
    flex-grow: 1; /* PCでは伸ばす */
}
.post-nav-links.no-prev .nav-list {
    order: -1;
    margin: 0;
    text-align: left;
    flex-grow: 1; /* PCでは伸ばす */
}

/* ========================================= */
/* 5. SP対応（767px以下）のスタイル調整 */
/* ========================================= */
@media (max-width: 767px) {
    /* --- 記事タイトル等 --- */
    h2.post-title {
        font-size: 24px;
        line-height: 1.4;
    }
    .post-body-layout h2 {
        font-size: 1.3em;
    }
    .post-body-layout h3 {
        font-size: 1.15em;
    }
    .post-content-area .alignleft,
    .post-content-area .alignright {
        float: none; 
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1em;
    }

    /* --- ▼▼▼ ページネーション SP修正箇所 ▼▼▼ --- */
    
    .post-nav-links {
        font-size: 14px;
        /* ここでspace-betweenを指定することで、要素が2つなら両端に配置される */
        justify-content: space-between; 
    }

    .nav-list {
        margin: 0 10px;
        /* ★重要: PC用の「flex-grow: 1（幅いっぱい伸びる）」を解除 */
        /* これをしないと、ボタンが画面幅いっぱいに伸びて文字が真ん中に見えてしまいます */
        flex-grow: 0 !important;
        width: auto !important;
        text-align: center !important;
    }

    /* ★重要: 存在しないボタンの「空の箱」を消す */
    /* これにより、ブラウザは「要素は2つだけ」と認識し、space-betweenで両端に飛ばします */
    .post-nav-links.no-next .nav-next {
        display: none;
    }
    .post-nav-links.no-prev .nav-prev {
        display: none;
    }

    /* 念のため order はPCの指定を引き継ぐか、以下で明示してもOK */
    /* PC設定で no-nextの時は order:3 (右側), no-prevの時は order:-1 (左側) となっているので
       基本はそのままで意図通り動きますが、念には念を入れて明示的に制御 */
    
    /* 最新記事（次へがない）→ [前へ] ... [一覧] にしたい */
    .post-nav-links.no-next .nav-list {
        /* order: 3; PC設定が効くのでそのままでOK */
    }

    /* 最古記事（前へがない）→ [一覧] ... [次へ] にしたい */
    .post-nav-links.no-prev .nav-list {
        /* order: -1; PC設定が効くのでそのままでOK */
    }
}
/*-------------------------------------------------------------------------------------------------------------------------
求人募集ページ「固定ページ」
---------------------------------------------------------------------------------------------------------------------------*/
/* --- 募集カテゴリー（パート・アルバイト）のスタイル --- */
.jobTitle-target {
    display: flex; 
    gap: 10px; 
    margin-bottom: 1.5rem;
}
.jobTitle-target-child {
    border: 1px solid #735E0D;
    padding: .2rem .6rem; 
    font-size: 14px;
    color: #735E0D;
    /* 角丸なし */
    display: inline-block;
}

/* --- 募集ステータスのスタイル (角丸なしのシャープなデザイン) --- */
.jobTitle-status {
    font-weight: bold;
    padding: 6px 12px;
    /* 角丸なし */
    display: inline-block;
    margin-bottom: 1rem; 
    font-size: 14px;
    letter-spacing: 0.05em;
}

/* 募集中 (is-active) のスタイル */
.jobTitle-status.is-active {
    color: #FFFFFF;
    background-color: #007bff;
    box-shadow: 0 2px 5px rgba(0, 123, 255, 0.3);
    border: none;
}

/* 募集停止中 (デフォルト) のスタイル */
.jobTitle-status:not(.is-active) {
    color: #6c757d;
    background-color: #f8f9fa;
    border: 1px solid #adb5bd;
}

/* 募集停止中のセクション全体をグレーアウト */
.scroll-section.is-closed {
    opacity: 0.5; 
    pointer-events: none;
}

/* --- 募集要項リストのスタイル --- */
#recruitment-list {
    /*padding-top:100px;*/
    margin: 0 auto;
}
.job-recruitment-detail {
    margin-bottom: 40px; 
    border-top: 2px solid #ddd; 
    padding: 1.5rem 1rem; 
	text-align:left;
}

.recruitment-items-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}
.recruitment-item {
    display: flex; 
    align-items: flex-start;
    padding: 15px 0;
    border-bottom: 1px solid #eee; 
}
.recruitment-item .item-title {
    width: 150px; 
    flex-shrink: 0;
    font-weight: bold;
    color: #735e0d;
    padding-right: 20px;
}
.recruitment-item .item-content {
    flex-grow: 1;
}
.item-content-link{
	color:#4e4e4e;
	transition:all .3s;
}
.item-content-link:hover{
	color:#735e0d;
}

/* --- 職種サブタイトル用のスタイル --- */
.jobSubtitle {
    display: block; /* ブロック要素にしてh2の下に表示 */
    font-size: 1.1rem; /* h2よりも小さく */
    font-weight: bold;
    color: #5d4f12; 
    margin-top: -0.5rem; /* h2との距離を詰める */
    margin-bottom: 1rem; /* ステータスとの間に余白を確保 */
    line-height: 1.4;
}

/* 募集要項セクション内のサブタイトル調整 (h3との組み合わせ) */
.jobSubtitle.forRecruitment {
    font-size: 0.9rem; /* さらに小さく */
    font-weight: normal;
    color: #6c757d;
    margin-top: -0.3rem; 
    margin-bottom: 0.8rem;
}

/*-------------------------------------------------------------------------------------------------------------------------
会員案内ページここから
---------------------------------------------------------------------------------------------------------------------------*/
.textOnBorder p.useinfo-TOB-p{
	text-align:center;
}
/* ===== 会員特典カード ===== */
.member-benefits {
	display: flex;
	flex-wrap:wrap;
	gap: 2rem;
	justify-content: center;
	margin: 0 auto;
	padding: 0 1rem;
}
.benefit-card {
min-width:300px;
  position: relative;
  background: #fffaf3;
  border-radius: 14px;
  padding: 3rem 2rem 2.2rem;
  box-shadow: 0 0 20px rgba(0,0,0,0.10);
  flex: 1;
  text-align: left;
  background-image:
    radial-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 8px 8px, 12px 12px;
}
.benefit-card .label {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  background: #f9e6a8;
  padding: 8px 24px;
  border-radius: 6px 6px 2px 2px;
  font-size: 1rem;
  font-weight: bold;
  color: #4e3d2b;
  letter-spacing: 2px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.10);
}
.benefit-card h3 {
  color: #735e0d;
  font-size: 1.3rem;
  margin-bottom: 1.2rem;
  border-bottom: 2px solid #d8c7a8;
  display: inline-block;
  padding-bottom: 4px;
}
.benefit-card p {
  font-size: 1rem;
  margin-bottom: 0.8rem;
}
.benefit-card .note {
  font-size: 0.9rem;
  color: #8a7563;
}
.benefit-card .link-to-price {
  color: #735e0d;
  text-decoration: underline;
  font-weight: bold;
  transition: all 0.2s;
}
.benefit-card .link-to-price:hover {
  opacity:0.6;
}
.point-table {
  background: #fff;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  margin: 1rem 0;
  border: 1px solid #e3d9c9;
  background-image: radial-gradient(rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: 10px 10px;
}
.point-table div {
  padding: 4px 0;
  color: #735e0d;
  font-size: 1rem;
}

/* ===== 入会案内＋注意事項カード ===== */
.membership-main-card {
  margin: 0 auto;
  padding: 2rem 2rem;
  background: #fffaf3;
  border-radius: 14px;
  box-shadow: 0 0 20px rgba(0,0,0,0.10);
}
.membership-main-card h3 {
	color:#735e0d;
  font-size: 1.4rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid #d8c7a8;
  padding-bottom: 4px;
  display: inline-block;
}
.membership-main-card p, .membership-main-card li {
  margin-bottom: 0.8rem;
}
.membership-main-card-item-small{
	text-align:left;
}
.AR-linkbtn{
	color:#735e0d;
	text-decoration:underline;
	font-weight:bold;
	transition:all .3s;
}
.AR-linkbtn:hover{
	opacity:0.6;
}
.membership-main-card ul li h4{
	text-align:left;
}
.membership-main-card-item{
	margin-bottom:2rem;
}

/* ===== LINE登録カード ===== */
.line-content {
  display: flex;
  align-items: center;
  gap: 5rem;
}
.line-content .note {
  font-size: 0.9rem;
  color: #8a7563;
}
.line-link{
	width:300px
}
.line-sp{
	display:none;
}
.line-content img {
  width: 100%;
  height: auto;
	object-fit:contain;
}
@media (max-width: 767px) {
  .member-benefits { 
	  flex-direction: column;
	  gap:70px;
	}
  .benefit-card { 
	  padding: 2.5rem 1.6rem 2rem; 
	}
  .benefit-card .label { 
	  transform: translateX(-50%) rotate(0deg); 
	}
	.line-content{
		flex-direction:column;
		gap:50px;
	}
	.line-sp{
		display:block;
	}
	.line-pc{
		display:none;
	}
}

/*-------------------------------------------------------------------------------------------------------------------------
営業案内ページ
---------------------------------------------------------------------------------------------------------------------------*/
.use-info p {
	color: #735E0D;
}
.use-info-quest {
	margin-bottom: 6rem;
}
.use-info-title{
	margin-bottom:100px
}
.use-info-title p{
	text-align:center;
	color:#735E0D;
	font-size:1rem;
	margin-top:30px;
}
.use-info-title .use-info-title-main{
	margin-bottom:0.5rem;
}
.use-info-title .use-info-title-sub{
	font-size: 20px;
	font-family: 'BIZ UDPMincho', serif;
	letter-spacing: 0.04em;
	color: rgba(115, 94, 13, 0.5);
	text-align: center;
	margin-top:0;
}
.use-info-title.use-info-title-spacing{
	margin-bottom:0;
}
.faq-list.use-info-precautions-wrap{
	margin-top:30px;
}
.faq-item.use-info-precautions h3{
	font-size:1rem;
	text-align:left;
	margin-bottom: 1rem;
}
.faq-item.use-info-precautions {
	padding: 2rem 1rem;
}
.Payment-method-images {
	display: flex;
	gap: 1.5rem;
	justify-content: center;
}
.Payment-method-images img {
	height: 100px;
}
.Payment-method-dashed {
	widows: 100%;
	border-bottom: 2px dashed #333;
	margin-bottom: 3rem;
}
/*-------------------------------------------------------------------------------------------------------------------------
館内施設個別紹介ページ
---------------------------------------------------------------------------------------------------------------------------*/
#facility_TOB {
	transform: translatey(-40px);
	margin-bottom: 0;
	max-width: 1200px;
}
#facility_TOB span {
	font-size: 24px;
}
#facility_TOB small {
	font-size: 16px;
}
#facility_TOB span {
	margin: 0 0.5rem;
}
#Separator {
	width:1px;
	height:100px;
}
#Separator.palms {
	width:1px;
	height:100px;
	background-color:#4e4e4e;
	margin: 0 2rem;
}
#Separator.relaxation-room {
	width:1px;
	height:30px;
	background-color:#4e4e4e;
	margin: 0 2rem;
}
#Separator_sp {
	display: none;
}
/*-------------------------------------------------------------------------------------------------------------------------
404 エラーページ
---------------------------------------------------------------------------------------------------------------------------*/
#page-404{
	width:100%;
	padding:5rem;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	gap:2rem;
}
#page-404 img{
	flex-shrink:0;
	width:400px;
	height:auto;
}

/*-------------------------------------------------------------------------------------------------------------------------
ご利用方法ページ　新規客向け
---------------------------------------------------------------------------------------------------------------------------*/
/*　いったんここは無効化します
.guide-texture-greeting{
	background-image: url('../images/greeting-bg-a.png');
	background-repeat: no-repeat;
	background-size: cover;
	object-fit:cover;

}
.greetingWrap{
	margin: 50px auto 0;
	text-align: left;
	letter-spacing: 0.25em;
	writing-mode: vertical-rl;
}
.greetingWrap h2{
	font-weight:500;
}
.catch-copy-a{
	margin-top: -1rem;
}
.catch-copy-b{
	margin-top:10rem;
}
.greetingWrap p{
	font-family: "Shippori Mincho", serif;
	line-height: 3.0;
	margin-right: 5rem;
}
.usage-guide-title{
	margin-bottom:100px
}
.usage-guide-title p{
	text-align:center;
	color:#735E0D;
	font-size:1rem;
	margin-top:30px;
}
.usage-guide-title .usage-guide-title-main{
	margin-bottom:0.5rem;
}
.usage-guide-title .usage-guide-title-sub{
	font-size: 20px;
	font-family: 'BIZ UDPMincho', serif;
	letter-spacing: 0.04em;
	color: rgba(115, 94, 13, 0.5);
	text-align: center;
	margin-top:0;
}
.usage-guide-title.usage-guide-title-spacing{
	margin-bottom:0;
}
*/
/* ここから、 修正版 */
.greetingWrap {
	display: flex;
	flex-direction: row-reverse; /* 右にタイトル、左に文章 */
	justify-content: center;      /* 横方向中央 */
	gap: 4rem;
	text-orientation: upright;
	position:relative
}

.greetingWrap h2,
.greetingWrap p {
	font-family: "Shippori Mincho", serif;
	writing-mode: vertical-rl;
	text-orientation: upright;
	margin: 0;
	text-align:justify;
	letter-spacing: 0.25em;
	position:relative;
}
.greetingWrap p{
	line-height:3rem;
	font-weight:500;
}
h2.catch-copy-b{
	text-align:center;
	margin-right:-2rem;
}
/*　背景装飾品　*/
.guide-texture-greeting{
	position:relative;
	height:auto;
	overflow:hidden;
}
.greetingDecr {
	position: absolute;
	width: 665px;
	height: 260px;
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 0;
}
.greetingdec1{ 
	top: 50px; 
	left: 0; 
	background-image: url('../images/fog-dec1.svg'); 
}
.greetingdec2 { 
	bottom: 0; 
	right: 0; 
	background-image: url('../images/fog-dec2.svg'); 
}
/* カードデザイン */
.usage-guide-container {
    width: 100%;
}

.usage-guide-image {
    width: 100%;
    margin-bottom: 20px; /* 画像とテキストの間に余白 */
}

.usage-guide-image img {
    width: 100%;
    height: 100%;
	object-fit:cover;
    display: block; /* 画像下の余分な隙間を削除 */
}

.usage-guide-text {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.usage-guide-text h3 {
    font-family: "Shippori Mincho", serif;
    font-size: 1.8rem;
    font-weight: 550;
	text-align: left;
    margin-top: 0;
    margin-bottom: 1.2em;
}
.usage-guide-text h4{
	font-family: 'BIZ UDPGothic', sans-serif; 
	font-size: 1.2rem;
	font-weight: normal;
	text-align: left;
	margin-bottom: 0.5em;
}

.usage-guide-text p {
	color:#735E0D;
    font-size: 1rem;
    margin: 0 0 1.2em;
}
.usage-guide-text p:last-of-type{
	margin-bottom: 3rem;
}

.usage-guide-text.template-3 p:last-of-type{
	margin-bottom: 0;
}

.usage-guide-link {
    display: inline-flex; /* テキストと矢印を横並びにする */
    align-items: center;
    text-decoration: none;
    color: #333;
    font-size: 0.9rem;
    margin-top: auto; /* ★ 上の要素を押し上げて、自分は一番下に配置 */
    align-self: flex-end; /* ★ 右揃えにする */
	transition:all .3s;
}
.usage-guide-link:hover .usage-guide-arrow-icon{
	transform:translatex(5px);
}
/* 矢印アイコンのスタイル */
.usage-guide-arrow-icon {
    display: inline-block;
    width: 26px;
    height: 26px;
    border: 1px solid #aaa;
    border-radius: 50%;
    margin-left: 10px;
    position: relative;
	transition:all .3s;
}
.usage-guide-arrow-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    transform: translate(-70%, -50%) rotate(45deg);
}
.faq-list.usage-guide-precautions-wrap{
	margin-top:30px;
}
.faq-item.usage-guide-precautions h3{
	font-size:1rem;
	text-align:left;
	padding:1.5rem 1rem;
}
.faq-item.usage-guide-precautions p{
	padding:0 0 1.5rem 1rem
}
/* sp用ボタン */
.sp_more_btn{
    display: none;
    padding: 0.5rem;
    color: #735e0d;
    text-align: center;
    border-radius: 50px;
    transition: all .3s;
    border: 1px solid #735e0d;
}
/* ここから、関連情報　------------------------------------------------------------------------------------ */
.contentWrapper.relatedInfo{
	padding:0 0 100px 0;
}
.relatedInfo-title{
	text-align:left;
	margin-bottom:1rem;
}
.relatedInfo-menu-list {
  display: flex;
  flex-wrap: wrap; 
  list-style: none;
  padding: 0;
  margin: 0;
}

.relatedInfo-menu-item {
  word-break: keep-all;  /*単語の折り返しを防ぐ */
}
.relatedInfo-link{
	color:#735E0D;
	font-size:1rem;
	font-weight:500;
}

/* ▼ スラッシュを挿入する部分 ▼ */
.relatedInfo-menu-item:not(:last-child)::after {
  content: "/";
  margin: 0 2.0em;
  color: #777;
}
/* --------------------------------
 * PC (ブレイクポイント 768px)
 * -------------------------------- */
@media (min-width: 768px) {
    .usage-guide-container {
        display: flex; 
        align-items: stretch; 
        gap: 40px; 
		margin-bottom:80px;
		box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    }
	.usage-guide-container.usage-guide-correction{
		margin-bottom:0;
	}
    .usage-guide-image {
        flex-basis: 50%; /* 幅を50%にする */
        margin-bottom: 0; /* SP用の余白をリセット */
    }
    .usage-guide-text {
        flex-basis: 50%;
        padding: 50px 40px 50px 0; /* 上下に少し余白を持たせる */
    }
}
/*-------------------------------------------------------------------------------------------------------------------------
汎用
---------------------------------------------------------------------------------------------------------------------------*/
span.wrapcustom{ /*改行をしたくないときに使用してください。*/
	display:inline-block;
	white-space:nowrap;
}
.p_spacing{ /*<p>タグ同士の間隔を開けたいときに使用してください。*/
	margin-bottom:1rem;
}
.contentWrapper{
	margin:auto 200px;
	padding: 100px 0 ;
	text-align:center;
}
/*スクロールセクション用*/
.contentWrapper.scrollSectionWrap{
	margin:auto 100px;
}

.contentWrapper.contentWrapper-back {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background-image: url('../images/background-0.13.png');
    background-size: cover;
    background-position: center;   
    /* 4. （おまけ）コンテンツの中央寄せを維持するために、
          左右のpaddingを打ち消すように調整するとより確実 */
    /* padding-left: calc(50vw - 50%);  */
}
.priceList{
	text-align:center;
}
.priceList p{
	text-align:center;
	margin-bottom:2rem;
}
.flexWrapper{
	display:flex;
}
a.btn {
	transition: all .3s;
}
a.btn:hover {
	background-color: #735e0d;
	color:#fff;
}
/*プルダウンメニュー*/
.categoryPulldown {
	margin-bottom: 24px;
}

/*.categoryPulldown p {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
	color: #555;
}*/

/* カスタムセレクトボックス */
.custom-category-select {
	position: relative;
	width: 100%;
	border-radius: 8px;
	background-color: #fff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.select-trigger {
	padding: 12px 15px;
	cursor: pointer;
	border: 1px solid #ddd;
	border-radius: 8px;
	background-color: #fff;
	transition: all 0.3s ease;
	position: relative;
}

.select-trigger::after {
	content: '▼';
	font-size: 10px;
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	color: #888;
	transition: transform 0.3s ease;
}

/* .open クラスが付いた時の矢印の向き */
.custom-category-select.open .select-trigger::after {
	transform: translateY(-50%) rotate(180deg);
}

.select-trigger:hover {
	border-color: #aaa;
}

.select-options {
	position: absolute;
	top: calc(100% + 5px); /* トリガーとの隙間 */
	left: 0;
	right: 0;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	list-style: none;
	padding: 0;
	margin: 0;
	/* 初期状態は非表示 */
	display: none;
	z-index: 10;
	max-height: 200px;
	overflow-y: auto;
}

/* JSで .open クラスを付与して表示 */
.custom-category-select.open .select-options {
	display: block;
}

.select-options li {
	padding: 12px 15px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.select-options li:hover {
	background-color: #f0f0f0;
}

.select-options li:not(:last-child) {
	border-bottom: 1px solid #eee;
}

/* 内容エリア */
.selectContentWrapper {
	background-color: #fff;
	border-radius: 8px;
	padding: 20px;
	border: 1px solid #e0e0e0;
	min-height: 150px;
}
/*
.relax-menu-wrapper{
	margin-bottom:2rem;
}
*/

/* 内容はデフォルトで非表示 */
.content-item {
	display: none;
	padding: 10px;
	border-radius: 5px;
}

/* .active が付いた内容のみ表示 */
.content-item.active {
	display: block;
	/* 表示時のアニメーション */
	animation: fadeIn 0.5s ease;
}

.content-item.active p{
	margin-top:2rem;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/*キーボード操作対応
:focus {
	outline: 2px solid #005fcc;
	outline-offset: 5px;
	box-shadow:0 0 2px 2px;
	z-index:3;
}*/

/* 背景色と フッターの色の違いを無くすための指定。 */
.match-footer-seamless {
    /* ベースカラーはそのまま（#fffdf4） */
    position: relative;
    overflow: hidden; 
}

/* 最後のセクションにフッターと同じ背景写真を重ねるための疑似要素 */
.match-footer-seamless {
    /* ここにフッターの波の「谷」の部分の背景色を正確に設定してください。
       これがフッターのベースカラーと完全に一致するべき色です。 */
    background-color: #fffdf4; /* ★フッターのベースカラーと一致するか要確認 */
    position: relative;
    overflow: hidden; 
}

/* 最後のセクションにフッターと同じ背景写真を重ねるための疑似要素 */
.match-footer-seamless::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    z-index: 1; 
    pointer-events: none;

    /* 1. フッターと同じ背景画像と設定を適用 */
    background-image: url('https://sotsuken.shop/wp-content/uploads/2025/11/background-0.13-1.png');
    background-size: cover; 
    /* opacityは使わず、次のステップでマスクとグラデーションを組み合わせて不透明度を制御します */

    /* 2. 背景画像全体を覆い、透明度をシミュレートするグラデーションを重ねて乗算 */
    /* これにより、opacity: 0.2 としたときと同じ色調を再現します */
    background-image: 
        /* 疑似要素に、透明度をかけるためのグラデーションを重ねる */
        linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), 
        /* フッターの画像 */
        url('https://sotsuken.shop/wp-content/uploads/2025/11/background-0.13-1.png');
    background-size: cover;
    background-blend-mode: multiply; /* 画像の色をベースカラーにブレンド */

    /* 3. マスクによる滑らかな移行（上半分透明、下半分不透明） */
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,   
        rgba(0, 0, 0, 0) 50%,
        rgba(0, 0, 0, 1) 100%  
    );
    mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 50%,
        rgba(0, 0, 0, 1) 100%
    );
}

/*-------------------------------------------------------------------------------------------------------------------------
View Transition のスライドイン設定
---------------------------------------------------------------------------------------------------------------------------*/
@view-transition {
	navigation: auto;
}
@keyframes pageFadein {
	from {
		opacity:0;
	}
	to {
		opacity:1;
	}
}
::view-transition-new(root) {
	animation: pageFadein .8s ease-out;
	z-index: 10;
}
::view-transition-old(root) {
	animation: none;
}

/*-------------------------------------------------------------------------------------------------------------------------
Webサイト翻訳対応レイアウト
---------------------------------------------------------------------------------------------------------------------------*/
.translated-layout p{
	text-align:left;
}
.translated-layout .greetingWrap{
	writing-mode:horizontal-tb;
}
.translated-layout .catch-copy-b{
	margin-top:auto;
}

/*-------------------------------------------------------------------------------------------------------------------------
メディアクエリ 767px スマホサイズここから
---------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:767px){
	/*最新記事表示*/
	.news-title{
		margin-top:1rem;
	}
	#news-more {
		width:100%;
	}
	.news-text{
		padding: .5rem .2rem;
	}

	/*サイドバー*/
	.sidebar{
		transition: opacity 0.4s, visibility 0.4s;
	}
	.contentWrapper,.contentWrapper.scrollSectionWrap{
		margin:auto 1rem;
		padding:50px 0;
	}
	.contentWrapper.relatedInfo{
		margin:auto 1rem;
		padding:0 0 50px 0;
	}
	.section-title{
		padding:0;
		margin-bottom:3rem;
	}
	.section-title::before,
	.section-title::after {
		display:none;
		/* サイズを小さくする (例: 100px -> 50px)
		width: 50px;
		height: 50px; */
	}
	.section-title::before {
		/* 位置も浅くする (例: -105px -> -55px) 
		left: calc(-50px - 5px); */
		/* (例: -45px -> -25px) 
		top: calc(-20px - 5px); */
	}
	.section-title::after {
		/* 位置も浅くする (例: -105px -> -55px) 
		right: calc(-50px - 5px); */
		/* (例: -45px -> -25px) 
		bottom: calc(-20px - 5px); */
	}
	/* お知らせ */
	.newsWrapper,.news-header{
		flex-direction:column;
	}
	/* 施設の案内 */
	.image-wrapper{
		display:none;
	}
	.scroll-content{
		width:100%;
	}
	.scroll-section{
		padding:0 0 5rem 0;
		min-height:auto;
	}
	section.scroll-section:last-of-type{
		padding:0;
	}
	.explain{
		margin:0;
	}
	.explain .flexWrapper{
		display:block;
		margin-bottom:1rem;
	}
	#questLinks{
		gap:1rem;
	}
	.linkButton {
		max-width: 75%;
	}
	#map{
		margin-bottom:2rem;
	}
	#access .flexWrapper{
		flex-wrap:wrap;
		gap:1rem;
		justify-content:center;
	}
	#access-name .flexWrapper{
		gap:0.5rem;
	}
	#access-name .flexWrapper p {
		text-align: center;
	}
	#access-method{
		width:100%;
	}
	#footer-content{
		padding:1rem 1rem 10vh 1rem;
		display:block;
	}
	#footer-link{
		display:block;
	}
	#footer-affiliated{
		align-items:flex-start;
	}
	.affiliated{
		margin-left:60px;
	}
	.textOnBorder{
		max-width:300px;
	}
	.use-info-item{
		display:block;
		gap:0;
		justify-content:left;
	}
	/*お風呂ページ*/
	.No-1{
		margin-top:.3rem;
	}
	/*サウナページ*/
	#saunaEffect{
		padding:2rem 1rem;
	}
	/*寛ぎ ボタン*/
	.usage-guide-link.pc {
		display: none;
	}
	/*岩盤浴_注意事項*/
	#cautions_list {
		width: fit-content;
		text-align: left;
		margin: auto;
	}
	ul#cautions_list li {
		margin-left:2rem;
	}
	/*笑福亭smart slider*/
	#menuList{
		grid-template-columns: 1fr;
		grid-template-rows: repeat(4, 1fr);
	}
	/*お問い合わせフォーム*/
	.formInner{
		margin:0;
	}
	/*会員案内ページ*/
	#membership_TOB {
		transform: translatey(-100px);
		margin-bottom: 0;
	}
	.benefitsContent-detail {
		display: block;
	}
	.price-number s {
		margin: 0;
	}
	.member-price {
		margin: 0;
	}
	.price-arrow img {
		transform: rotate(90deg);
	}
	.aC-text-st a.btn{
		width: 100%;
	}
	/*館内施設個別紹介ページ*/
	.relaxation-T h2 {
		font-size: 44px;
	}
	#facility_TOB {
		transform: translatey(-100px);
		margin-bottom: 0;
	}
	#facility_TOB span {
		margin: 0 1rem;
	}
	#facility_TOB {
		max-width: 300px;
	}
	.onBorderText {
		display: block;
	}
	#Separator.palms {
		width:100%;
		height:1px;
		margin: 1rem 0;
		display: block;
	}
	#Separator.relaxation-room {
		width:100%;
		height:1px;
		margin: 1rem 0;
		display: block;
	}
	#Separator {
		display: none;
	}
	#Separator_sp {
		display: block;
		height: 2px;
		width: 100%;
		background-color: #000;
		margin: 1rem 0;
	}
	.onBorderTextRight {
		justify-content: left;
	}
	.masage-Wrapper h2 {
		line-height: 1.4;
		margin-bottom: 0.5rem;
	}
	/*営業案内ページ*/
	.Payment-method-images img {
		height: 40px;
	}
	.Payment-method-images {
		gap: 10px;
	}
	.textOnBorder.use-info {
		max-width: 310px;
	}
	.textOnBorder.use-info h3 {
		text-align: left;
		margin-bottom: 1rem;
	}
	.textOnBorder.use-info p {
		text-align: left;
	}
	.textOnBorder p {
		text-align: left;
	}
	/*ご利用方法ページ*/
	.topImageTitleChar.guide h2 {
		font-size: 44px;
	}
	.relatedInfo-menu-item:not(:last-child)::after {
  		content: "/";
  		margin: 0 0.5em;
 		color: #777;
	}
	.usage-guide-container {
		margin-bottom: 3rem;
	}
	.usage-guide-container.usage-guide-correction {
		margin-bottom: 0;
	}
	/*
	.catch-copy-a{
		margin-top: 0;
	}
	.catch-copy-b{
		margin-top: 0;
		margin-bottom: 2rem;
	}
	.greetingWrap p{
		font-family: "Shippori Mincho", serif;
		line-height: 2;
		margin-right: 50px;
		text-align: left;
	}
	.greetingWrap{
		margin: 0 auto 0;
		text-align: left;
		letter-spacing: 0.15em;
		writing-mode: horizontal-tb;
	}
	*/
	.greetingWrap {
		flex-direction: column;   /* 縦積みに変更 */
		align-items: flex-start;  /* 親コンテンツ内で左揃え */
		justify-content: center;  /* コンテンツ中央に配置 */
		gap: 0.5rem;
		writing-mode: horizontal-tb;
		padding: 0 1rem;          /* 横に少し余白 */
	}

	.greetingWrap h2,
	.greetingWrap p {
		writing-mode: horizontal-tb;
		text-align: left;         /* タイトル・文章 左揃え */
		width: 100%;              /* 幅いっぱいに */
	}
	.greetingWrap p{
		line-height:2rem;
	}
	/*ご利用方法のカード内ボタン*/
	.sp_more_btn{
		display:block
	}
	.sp_more_btn:hover{
		color:#fff;
		background:#735e0d
	}
	.pc_more_btn{
		display:none;
	}
    /* ------------------------------------- */
    /* 2. スマホ用装飾のサイズ変更 (例: 20px) */
    /* ------------------------------------- */
    .section-title::before,
    .section-title::after {
	/* スマホ用サイズ 
    width: 60px;
    height: 60px;*/
    }

    /* ------------------------------------- */
    /* 3. 右下 (::after) のスマホ用位置調整 */
    /* パディング: 20px 30px, はみ出し: 3px, サイズ: 20px */
    /* ------------------------------------- */
    .section-title::after {
        /* 垂直位置: 下パディング(20px) + はみ出し(3px) */
        /*bottom: calc(-20px - 3px);  -23px */
        
        /* 水平位置: 右パディング(30px) + はみ出し(3px) */
        /*right: calc(-40px - 3px);  -33px 
        
        transform: none; */
    }

    /* ------------------------------------- */
    /* 4. 左上 (::before) のスマホ用位置調整 */
    /* ------------------------------------- */
    .section-title::before {
        /* 垂直位置: 上パディング(20px) + はみ出し(3px) */
        /*top: calc(-20px - 3px);  -23px */
        
        /* 水平位置: 左パディング(30px) + はみ出し(3px) */
        /*left: calc(-40px - 3px);  -33px 
        
        transform: scaleX(-1) scaleY(-1); */
    }
	.recruitment-item {
        flex-direction: column; 
        padding: 10px 0;
    }
    .recruitment-item .item-title {
        width: 100%; 
        padding-right: 0;
        margin-bottom: 5px;
    }
    .scroll-section.is-closed {
        opacity: 0.8;
    }
	.jobSubtitle {
        font-size: 1rem;
        margin-top: -0.4rem;
        margin-bottom: 0.8rem;
    }
    .jobSubtitle.forRecruitment {
        font-size: 0.85rem;
        margin-top: -0.2rem;
        margin-bottom: 0.6rem;
    }
	#recruitment-list {
		padding-top:50px;
		margin: 0 auto;
	}
	/*カテゴリーページ*/
	.categoryPulldown{
		display:block;
	}
	.custom-category-select{
		display:block;
		margin:auto;
	}
	/*404*/
	#page-404 img{
		width:250px;
	}
	h2.post-title{
		font-size:25px;
	}
	#pagetop_return {
		right: 20px;
	}
}