@charset "utf-8";



html{

	font-size: 16px;

	overflow-x: hidden;

}



*,

*::before,

*::after{

	margin: 0;

	padding: 0;

	box-sizing: border-box;

}



@font-face {

	font-family: 'Noto Sans JP';

	src: url(../fonts/NotoSansJP-VariableFont_wght.ttf);

}





@font-face {

	font-family: 'Acumin ';

	src: url(../fonts/Acumin\ Variable\ Concept.ttf);

}



body{

	width: 100%;

	font-family: "Noto Sans JP", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", yu-mincho-pr6, serif;

	letter-spacing: 0.2em;

	line-height: 1.5;

	overflow-x: hidden;

}



a{
	text-decoration: none;
	color: black;
	transition: all ease .2s;
}

a:hover,
a:focus{
	color: #999;
	transform: scale(1.05);
	filter: brightness(110%);
}

a:active{
	transform: scale(.95);
	filter: brightness(90%);
}


li{

	list-style: none;

}



/* ☆header☆ */

header{

	width: 100%;

	height: 90px;


	padding: 20px clamp(20px, 2.604166666666667vw, 30px);

	margin-top: 0;
	
	display: flex;

	flex-direction: row;

	justify-content: space-between;

	align-items: center;

	position: fixed;

	top: 0;

	left: 0;

	z-index: 10;

	background-color: #fff;

}



.logo{

	width: 100%;

	max-width: 150px;

}



.header_menu{

	display: flex;

	flex-direction: row;

	align-items: center;

	gap: clamp(18px, 2.34375vw, 32px);

	font-size: 17px;

	letter-spacing: 0;

}



.header_menu_tel a{

	background: url('../images/icon_tel.png') no-repeat left center;

	padding-left: 24px;

	background-size: 16px auto;

}



.reservation_menu a{

	width: 150px;

	height: 57px;

	display: flex;

	justify-content: center;

	align-items: center;

	border: 1px solid #333;

}



#hamburger{

	display: none;

}



.header_nav_hamburger{

	width: 100%;

	height: 100dvh;

	background-color: #fff;

	position: fixed;

	top: 0;

	left: 0;

	z-index: 10;

	display: none;

}



.header_menu_hamburger{

	position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);	display: flex;

	flex-direction: column;

	align-items: center;

	gap: 32px;

	font-size: 17px;

	letter-spacing: 0;

}



.hamburger {

    position: absolute;

    top: 50%;

    right:32px;

	transform: translateY(-50%);

    cursor: pointer;

    width: 32px;

    height: 24px;

    z-index: 10;

}

.hamburger span {

    transition: all .3s;

    position: absolute;

	transform: translateY(-50%);

    height: 2px;

    background-color: #333;

    width:100%;

    z-index: 10;

}

.hamburger span:nth-of-type(1) {

	top: calc(50% - 10px);

}

.hamburger span:nth-of-type(2) {

	top: 50%;

}

.hamburger span:nth-of-type(3) {

	top: calc(50% + 10px);

}

.hamburger.open span:nth-of-type(1) {

	top: 50%;

    transform: translateY(-50%) rotate(-45deg);

}

.hamburger.open span:nth-of-type(2) {

    opacity: 0;

}

.hamburger.open span:nth-of-type(3) {

	top: 50%;

    transform: translateY(-50%) rotate(45deg);

}


/* --- ポップアップ背景（非表示） --- */

.popup_overlay {

	display: flex;

	position: fixed;

	inset: 0;

	background: rgba(0, 0, 0, 0.5);

	z-index: 9999;

	justify-content: center;

	align-items: center;

	transition: all ease .5s;

	opacity: 0;

	visibility: hidden;

}



/* --- 表示状態 --- */

.popup_overlay.show_popup {

	opacity: 1;

	visibility: visible;

}


/* --- ポップアップ本体 --- */

.popup_content {

	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);

	width: 90%;

	max-width: 1600px;

	height: 90%;

	max-height: 600px;

	text-align: center;

	border-radius: 10px;

	aspect-ratio: 2 / 1;

	position: relative;

}


.popup_content > section {

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

	width: 100%;

	max-height: 100%;

}

.popup_content > section > .popup_title {

	width: 90%;

	margin: auto;

	margin-bottom: calc(clamp(1.25rem, -1.255rem + 5.21vw, 5rem));

}

.popup_title > h2 {

	max-width: 500px;

	line-height: 2;

	border-bottom: #fff solid 1px;

	margin: auto;

}

.popup_title > p {

	line-height: 2;

}

.popup_links_wrap {

	display: grid;

	grid-template-columns: repeat(auto-fit, 140px);

	justify-content: center;

	gap: 16px;

	width: 90%;

	max-width: 700px;

	margin: auto;

}

.popup_links_wrap:has(.popup_links:nth-of-type(5)) {

	grid-template-columns: repeat(auto-fit, 150px);
	
	max-width: 500px;

}

.popup_links_wrap > .popup_links {

	font-weight: bold;

	background-color: #fff;

	border-radius: 10px;

	width: 100%;

	aspect-ratio: 2 / 1;

	padding: 10px;
	
	margin: auto;

}

.popup_links > span {

	display: inline-block;

	width: 100%;

	margin-bottom: 5px;

}

.popup_links > img {

	width: 100px;

	height: 50px;

	object-fit: contain;

}




/* --- 閉じるボタン --- */

.popup_closer {

	position: absolute;

	top: 10px;

	right: 15px;

	background: none;

	border: none;

	color: #ccc;

	font-size: 22px;

	cursor: pointer;

	transition: all ease .2s;

	transform-origin: center;

	z-index: 50000;

}


.popup_closer:hover,
.popup_closer:focus {

	color: #fff;

	transform: scale(1.2);

}

.popup_closer:active {

	transform: scale(.8);

}




/* --- 開くボタン --- */
.popup_opener > a {

	display: block;

	height: clamp(40px, 5.208333333333333vw, 52px);

	line-height: clamp(40px, 5.208333333333333vw, 52px);
	
	aspect-ratio: 5 / 1;

	text-align: center;

	cursor: pointer;

	overflow: hidden;

	border: none;

	border-radius: 200px;

	transition: all ease .2s;

	transform-origin: center;

}

.menu_out_target {

	display: none;

}



@media screen and (max-width:768px) {

	/* --- ポップアップ本体 --- */

	.popup_content {

		max-height: 800px;

		aspect-ratio: auto;

		overflow-y: hidden;

	}

	.popup_content > section {

		overflow-y: scroll;

		padding: 16px 0;

	}

	.popup_title > p {
		font-size: calc(clamp(0.75rem, 0.45rem + 1.6vw, 1rem));
	}


	.popup_links_wrap {

		grid-template-columns: repeat(auto-fill, 150px);

		max-width: 480px;

	}

	.popup_links_wrap > .popup_links {

		width: 150px;

	}

	/* --- 開くボタン 大きさ調整 --- */
	.popup_opener > a {

		height: calc(clamp(1.5rem, 0.6rem + 4.8vw, 1.875rem));
		
		line-height: calc(clamp(1.5rem, 0.6rem + 4.8vw, 1.875rem));

		font-size: calc(clamp(0.875rem, 0.575rem + 1.6vw, 1rem));

	}

	header {

		gap: 16px;

		height: 65px;

		padding: 10px calc(clamp(2.75rem, -0.25rem + 16vw, 4rem)) 10px calc(clamp(0.625rem, -0.275rem + 4.8vw, 1rem));
		
	}

	.logo {

		min-width: 110px;

	}
	
	.hamburger {

		right: calc(clamp(0.625rem, -0.275rem + 4.8vw, 1rem));

		width: 8%;

		max-width: 32px;

	}

	.menu_out_target {

		display: block;

	}

	.menu_out_target > .popup_opener:nth-of-type(2) {

		display: none;

	}
}



/* ☆main☆ */



/* first_view*/

.firstview_wrapper{

	width: 100%;

	height: 800px;

	margin-top: 90px;

}



.firstview_wrapper h1{

	text-align: center;

	font-size: 20px;

	padding-top: 130px;

	line-height: 2.5;

}



.firstview_wrapper h1 img{

	width: 215px;

}

@media screen and (max-width:768px) {
	.firstview_wrapper{
		height: 500px;
		background-position: 12%;
		margin-top: 65px;
	}

	.firstview_wrapper h1{
		font-size: 18px;
		padding: 80px 20px 0;
	}
}




/* contents */

.content_wrapper{

	width: 100%;

	margin-top: 90px;

	max-width: 1200px;

	margin: 0 auto;

	margin-bottom: 70px;

	padding: 0 20px;

}

.reservation-block .content_wrapper{
	margin-bottom: 0;
}

.section-title{

	margin-top: 64px;

	margin-bottom: 16px;

	text-align: center;

	font-size: 24px;

}



.content_wrapper p{

	padding: 4px 0;

}



@media screen and (max-width:768px) {
	.content_wrapper{
		margin-top: 65px;
	}
}



/* contents gallery */

.gallery-content{

	position: relative;

	overflow: hidden;

}



.gallery-content .wp-block-gallery {

	gap: 0;

}



figure.wp-block-gallery.has-nested-images{

	gap: 0;

}



.gallery-content .gallery-text {

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%,-50%);

	z-index: 3;

	font-size: 53px;

	font-weight: 600;

	color: #fff;

	white-space: nowrap;

}



.gallery-content img{

	width: auto;

	height: 100%;

	max-height: 600px;

}



/* ギャラリーのループスライド */

.stk-slide-gallery {

	display: flex;

	align-items: center;

	overflow: hidden;

	gap: 0;

	padding: 0 !important;

	width: 200%;

}



.stk-slide-gallery .wp-block-gallery {

	flex-wrap: nowrap;

	animation: loop-slide 30s infinite linear 1s both;

}



.stk-slide-gallery .wp-block-image {

	width: 640px !important;

}



@keyframes loop-slide {

	from {

	transform: translateX(0);

	}

	to {

	transform: translateX(-100%);

	}

}



/* contents flex */

.contents_flex{

	margin-bottom: 96px;

	display: flex;

	flex-direction: row;

	justify-content: space-between;

	gap: 16px;

}



.contents_flex p{

	width: 50%;

}



.content_image > img{

	width: 100%;

	max-width: 400px;

}



.newslist_block{

	display: flex;

	flex-direction: row;

	justify-content: space-between;

	gap: 32px;

	margin-top: 200px;

	margin-bottom: 200px;

	position: relative;

}



.newslist_left{

	display: flex;

	flex-direction: column;

	align-items: start;

	gap: clamp(15px, 1.9vw, 32px);

	width: 20%;

	min-width: 200px;

}



.newslist_button{

	width: 164px;

	height: 37px;

	font-weight: 600;

	display: flex;

	justify-content: center;

	align-items: center;

	border-radius: 30px;

	box-shadow: 3px 3px 3px #333;

	transition: all 0.3s;

	position: absolute;

	top: 60px;

	left: 0;

}



.newslist_button:hover{

	box-shadow: none;

}



.newslist{

	display: flex;

	flex-direction: row;

	gap: clamp(0.938rem, -0.933rem + 3.903vw, 3.75rem);

}


.newslist li{
	width: clamp(150px, 19.56vw, 250px);
}


.newslist a{

	display: flex;

	flex-direction: column;

	width: 100%;

}



.newslist img{

	width: 100%;

	height: auto;

	aspect-ratio: 5 / 3;

	object-fit: cover;

}



.news-date{

	font-size: clamp(14px, 1.83vw, 16px);

	color: #666;

	font-weight: 600;

}



.news-title{

	font-size: clamp(14px, 1.83vw, 18px);

	font-weight: 600;

}



/* 投稿ランダム表示 */

.random-posts{

	display: flex;

	flex-direction: row;

	justify-content: space-between;

	gap: 16px;

}



.random-title{

	display: block;

	padding: 4px;

	margin: 0 4px;

	border-bottom: 1px solid #333;

	text-align: center;

}



.content_wrapper .random-text{

	padding: 8px;

}



.random-posts a{

	width: 320px;

	height: 400px;

	display: flex;

	flex-direction: column;

	justify-content: space-between;

	border: #333 1px solid;

}



.random-posts a img{

	display: block;

	margin: 8px auto;

	width: 266px;

	height: 177px;

}



/* reserve */

.section-reserve{

	height: 200px;

	font-family: 'Acumin';

}



.reserve-button a{

	width: 100%;

	max-width: 339px;

	height: 64px;

	font-size: 24px;

	font-weight: 600;

	display: flex;

	flex-direction: row;

	justify-content: center;

	align-items: center;

	padding: 0;

}



.reserve-button img{

	width: 134px;

	margin-left: 8px;

}





/* ☆footer☆ */

.footer_flex{

	width: 100%;

	max-width: 1170px;

	margin: 0 auto;

	padding-top: 80px;

	padding-bottom: 40px;

	display: flex;

	flex-direction: row;

	justify-content: center;

}



.footer_left{

	display: flex;

	flex-direction: column;

	align-items: center;

	gap: 32px;

}



.footer_nav{

	display: flex;

}




.footer_logo{

	display: flex;

	flex-direction: column;

	align-items: center;

}



.footer_text{

	font-size: 10px;

}



.footer_menu{

	display: flex;

	font-weight: 700;

	gap: 32px;

}



.footer_right{

	align-self: flex-end;

}



.sns_icon{

	width: 64px;

}



.copyright{

	padding-bottom: 10px;

	display: block;

	text-align: center;

	letter-spacing: 0;

}



@media screen and (max-width:768px) {
	.footer_left {
		flex-direction: row-reverse;
		justify-content: space-around;
		align-items: flex-start;
		gap: 32px;
		width: 90%;
	}
	.footer_menu {
		flex-direction: column;
		gap: 20px;
	}
	.footer_logo {
		align-items: flex-start;
		gap: 20px;
	}
}



/* contactForm ↓ */
form {
	width: fit-content;
	margin: 0 auto;
}

.form {
	width: 100%;
	padding: 0 auto 0 auto;
	margin-bottom: 50px;
}

.formTable {
	border-spacing: 0 40px;
	width: 100%;
}

.formTable-row {
	font-size: 18px;
	margin-bottom: 40px;
}

.formTable_required span {
	background-color: #c1272d;
	color: #fff;
	padding: 0 4px;
	font-size: 14px;
}

.formTable_required {
	width: 10%;
}

.formTable-header {
	width: 30%;
	text-align: left;
}

.formTable-data {
	width: 60%;
}

.form_submit {
	text-align: center;
}

.form_submit input {
	padding: 15px 35px;
	border: none;
	display: block;
	margin: 0 auto;
}


select {
    -webkit-appearance: none;
    appearance: none;
}

.select_triangle {
    position: relative;
}

.select_triangle::after {
    content: "";
    position: absolute;
    top: 22px;
    right: 20px;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    border-top: 12px solid #555;
    border-bottom: 0;
	pointer-events: none;
}

.wpcf7-form-control-wrap{
	width: clamp(420px, 54.617vw, 500px);
}

.wpcf7-form-control-wrap select,
.wpcf7-form-control-wrap input,
.wpcf7-form-control-wrap textarea{
	width:100%;
}

.wpcf7-form-control-wrap select,
.wpcf7-form-control-wrap input {
	height: 50px;
	padding: 0 15px;
}

.wpcf7-form-control-wrap textarea {
	padding: 15px;
}


.wpcf7-form-control-wrap select {
	padding-left: 40px;
}


.content_wrapper p {
    padding: 4px 0;
}

/* contactForm ↑ */

/* news-archive ↓*/
.news_list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, auto));
	gap: clamp(30px, 10vw, 60px);
	padding: clamp(18px, 6vw, 32px);
	justify-items: center;
    align-items: center;
    justify-content: center;
    align-content: center;
	width: min(100%, 1920px);
	margin-bottom: clamp(35px, 11.67vw, 80px);
}

.news_item {
	width: 100%;
	max-width: 250px;
}

.news_item > a,
.news_item_thumbnail,
.news_item_thumbnail img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.nav-links {
	text-align: center;
	position: relative;
}

.nav-links::after {
	content: '';
}

.page-numbers {
	display: flex;
	justify-content: center;
	gap: 5px;
}
/* news-archive ↑*/

/* single-news ↓*/
.news_content {
	display: grid;
	grid-template-columns: auto 60%;
	justify-content: center;
	margin: 0 auto;
	margin-bottom: clamp(95px, 12.35vw, 160px);
	gap: 16px;
}

.news_content_image {
	width: 100%;
	max-width: 400px;
}

.news_content_image img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.news_content_text {
	font-size: clamp(14px, 1.8vw, 16px);
	max-width: 100%;
	overflow-wrap: break-word;
	word-break: break-word;
}

.news_content_text h3  {
	font-size: clamp(14px, 1.8vw, 16px);
	margin-bottom: clamp(10px, 1.3vw, 25px);
	max-width: 100%;
	overflow-wrap: break-word;
	word-break: break-word;
}

.news_content_date {
	margin-bottom: clamp(3px, 0.39px, 10px);
}

.back_button {
	border: 1px solid #333;
	display: block;
	width: fit-content;
	padding: 10px 35px;
	text-align: center;
	margin: 0 auto;
}

/* single-news ↑*/

/* タイトル下線 */
h2 {
	text-align: center;
}

/* 固定ページ、投稿ページ、投稿一覧ページのタイトルの下にマージンを設定（フロントページを除く） */
body.page:not(.home) main .content_wrapper > h2:first-child,
body.single:not(.home) main .content_wrapper > h2:first-child,
body.single-news:not(.home) main .content_wrapper > h2:first-child,
body.archive:not(.home) .content_wrapper > h2:first-child,
body.post-type-archive-news:not(.home) .content_wrapper > h2:first-child {
	padding: 100px 0;
}

body.single:not(.home) main .content_wrapper {
	padding-bottom: 60px;
}

body.single:not(.home) main .reservation-block .content_wrapper {
	padding-bottom: 0;
}

h2::after {
	content: '';
	display: block;
	width: 140px;
	height: 0.5px;
	background-color: #333;
	margin: 0 auto;
}

.home h2::after {
	display: none;
}

.popup_title > h2::after {
	display: none;
}






@media screen and (max-width:768px) {

	#hamburger{

		display: block;

	}



	.header_nav{

		display: none;

	}


	.news_item_title h3 {
		font-size: clamp(16px, 5.33vw, 18px);
	}

	.news_content {
		grid-template-columns: auto;
		margin-bottom: clamp(40px, 13.33vw, 160px);
	}

	.news_content_image {
		width: 100%;
		max-width: none;
	}

	.newslist_button{
		position: initial;
		margin: 0 auto;
	}

	.newslist {
		flex-direction: column;
		align-items: center;
		gap: clamp(1.875rem, 0.673rem + 6.41vw, 3.75rem);
	}

	.newslist li{
		max-width: 400px;
		width: 100%;

	}

	.newslist_block{
		padding: 0 20px;
		flex-direction: column;
		margin: 100px 0;
	}

	.news-date {
		font-size: clamp(14px, 4.67vw, 16px);
	}

	.news-title {
		font-size: clamp(16px, 5.33vw, 18px);
	}

	.newslist_left{

		width: auto;
		align-items: center;

	}

	body.page:not(.home) main .content_wrapper > h2:first-child,
	body.single:not(.home) main .content_wrapper > h2:first-child,
	body.single-news:not(.home) main .content_wrapper > h2:first-child,
	body.archive:not(.home) .content_wrapper > h2:first-child,
	body.post-type-archive-news:not(.home) .content_wrapper > h2:first-child {
		padding: 60px 0;
	}

	body.single:not(.home) main .reservation-block .content_wrapper {
	padding: 0;
}

}


.alignfull{

	position: relative;

	width: 100vw;

	left: 50%;

	translate: -50% 0;

}

/* 表示端末（PC/SP）ブロックの切り替え */
.ad-display-both {
	display: block;
}

.ad-display-pc {
	display: block;
}

.ad-display-sp {
	display: none;
}

@media screen and (max-width:768px) {
	.ad-display-pc {
		display: none;
	}

	.ad-display-sp {
		display: block;
	}
}

.reservation_content_wrap{

	display: flex;

	width: 100%;

	padding: 42px 0;

	justify-content: center;

	align-items: center;

	gap: 20px;

}

.reservation_title_wrap{

	display: flex;

	height: 100%;

	align-items: center;

	flex-shrink: 0;

}

.reservation_title_wrap > h2::after{
	display: none;
}

.reservation_nav_wrap{

	display: flex;

	width: auto;

	flex-wrap: wrap;

	justify-content: left;

	gap: 20px;

}


.sns-links{

	display: flex;

	width: 145px;

	height: 110px;

	flex-direction: column;

	justify-content: space-evenly;

    align-items: center;

	background-color: #fff;

	border-radius: 12px;

}


.reservation_nav_title{

	text-align: center;

	font-weight: bold;

	white-space: nowrap;

}


.sns_links_wrap{

	display: flex;

	flex: 1;

}

.sns_links_wrap:first-of-type{

	align-items: center;

}


.reservation_nav_image{

	width: 100%;

	height: 40px;

	object-fit: contain;

}


@media screen and (max-width:768px) {

	.reservation_nav_wrap{

		gap: 10px;

	}


	.reservation_content_wrap{

		flex-direction: column;

	}


	.sns-links{

		width: 140px;

	}

	.reservation_nav_title{

		font-size: 14px;

	}

}









/* 文字下マーカー（エディターのテキスト色を継承） */

.is-style-marker-text {

    position: relative;

    display: inline-block;

}



/* マーカー色付き段落 */

.has-marker {

    background: linear-gradient(transparent 60%, var(--marker-color, #fff176) 60%);

    display: inline;

}



/* マーカー風の下線を背景グラデーションで表現 */

.is-style-marker-text {

    background: linear-gradient(

        transparent 60%,

        var(--wp--preset--color--primary, rgba(255, 235, 59, 0.6)) 60%

    );

    transition: background-color 0.2s ease;

}



/* 編集画面・公開画面で選択色を反映（カラーパレット対応） */

.has-text-color.is-style-marker-text {

    background: linear-gradient(

        transparent 60%,

        currentColor 60%

    );

    color: inherit;
}

@media screen and (max-width:700px) {
	.formTable-row {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto;
		width: 100%;
		font-size: clamp(12px, 4vw, 18px);
		margin-bottom: clamp(10px, 3.33vw, 40px);
	}

	.formTable-data {
		grid-column: 1 / span 2;
		width: 100%;
	}

	.formTable-header,
	.formTable_required {
		width: 100%;
	}

	.formTable-header {
		margin-right: 10px;
	}

	.formTable_required span {
		font-size: clamp(10px, 3.33vw, 14px);
	}

	.form {
		margin-bottom: 0px;
	}

}

/* ページネーション */
.archive-pagination {
	margin-top: 2em;
	text-align: center;
}

.archive-pagination .nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	flex-wrap: wrap;
}

.archive-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2em;
	padding: 0.4em 0.6em;
	text-decoration: none;
	border-radius: 4px;
	color: #333;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.archive-pagination .page-numbers.current {
	background-color: #333;
	border-color: #333;
	color: #fff;
	font-weight: bold;
	cursor: default;
	pointer-events: none;
}


