@charset "utf-8";

/* --------------------------------------------
HEADER
--------------------------------------------- */
#header{
	position : fixed;
	top : 0;
	left : 0;
	z-index : 100;
	width : 100%;
	background : rgb( 255 255 255 / .9 );
	background-color : #fff;
	border-top : solid 10px var( --primary );
	border-bottom : solid 1px #dcdcdc;
	p{
		padding : .5rem 1rem;
		font-size : .6em;
		color : #db4c74;
	}
	dl{
		width : 1200px;
		max-width : 100%;
		margin : 0 auto;
		overflow : hidden;
	}
	dd h2{
		padding : 0 1rem;
		font-weight : 400;
		letter-spacing : .2em;
	}
	dd:nth-child( 1 ){
		float : left;
		width : 800px;
		max-width : 60%;
	}
	dd:nth-child( 3 ){
		float : left;
		width : 68px;
		margin-right : 1px;
	}
	dd:nth-child( 4 ){
		float : left;
		width : 30%;
	}
	.fb{
		background-color : var( --primary );
	}
	.free_dial{
		min-height : 68px;
		padding : .5em 0 0;
		background-color : var( --primary );
	}
	.free_dial img{
		display : block;
		width : 300px;
		max-width : 100%;
		height : auto;
		margin : 0 auto;
	}
	@media screen and ( width <= 361px ){
		dl{
			width : 100%;
			padding : 0 0 7px;
		}
	}
	@media screen and ( width <= 365px ){
		p{
			width : 56%;
		}
	}
	@media screen and ( width <= 768px ){
		padding-top : 10px;
		dl{
			width : 100%;
		}
		dd h2{
			font-size : 1.2rem;
		}
		p{
			float : left;
			width : 60%;
			padding : 0;
		}
		dd:nth-child( 1 ){
			float : none;
			width : 800px;
			max-width : 75%;
		}
		dd:nth-child( 2 ) , dd:nth-child( 3 ){
			display : none;
			visibility : hidden;
		}
		dd:nth-child( 4 ){
			display : none;
		}
		.fb_btn{
			position : absolute;
			top : 40px;
			right : 5%;
			display : inline;
			visibility : visible;
		}
		.fb_btn a{
			display : block;
			width : 35px;
			height : 35px;
			background-color : #000;
		}
	}
	@media screen and ( width <= 820px ){
		.sp.tb{
			display : block;
		}
		.fb{
			display : none;
		}
		.free_dial{
			display : none;
		}
		.pc{
			display : none;
		}
		.sp{
			display : block;
		}
		.logo_text{
			font-size : 1.1em;
			font-weight : 700;
			line-height : 20px;
			color : #4f4a4a;
		}
		.top_text{
			display : none;
		}
		h2.top_text02.sp{
			display : none;
		}
		.sp .sp_pop{
			display : flex;
			justify-content : space-evenly;
			float : right;
			width : 40%;
			max-width : 155px;
			padding-top : 0;
			margin-right : 0;
			overflow : hidden;
			li{
				width : calc( 100% / 3 );
				margin-right : 5px;
			}
		}
	}
	@media screen and ( width <= 980px ){
		.h_logo{
			display : block;
			float : left;
			width : 45px;
			max-width : 13%;
			margin : .3em;
		}
		.free_dial img{
			display : block;
			max-width : 90%;
			height : auto;
			margin : 0 auto;
		}
		dd:nth-child( 4 ){
			width : 31%;
		}
	}
	@media screen and ( width > 980px ){
		.h_logo{
			display : none;
		}
	}
}

/* --------------------------------------------
CLICK MENU
--------------------------------------------- */
#click-menu{
	@media screen and ( width <= 820px ){
		top : 20px;
		right : 5%;
		right : 5px;
		z-index : 9999;
		display : flex;
		align-items : center;
		justify-content : center;
		width : 100%;
		height : 100%;
		padding : 10px;
		font-size : 13px;
		color : #fff;
		text-align : center;
		cursor : pointer;
		background : #000;
		background : var( --primary );
		border-radius : 5px;
		.threeLines{
			width : 25px;
			height : 20px;
			margin : 0 auto;
		}
		.threeLines .line{
			width : 100%;
			height : 4px;
			margin-bottom : 4px;
			background : #fff;
		}
	}
}

/* --------------------------------------------
NAV
--------------------------------------------- */
#nav{
	@media screen and ( width <= 820px ){
		*{
			box-sizing : content-box;
		}
		position : fixed;
		top : 0;
		bottom : 0;
		left : -75%;
		z-index : 9999;
		display : none;
		width : 75%;
		max-width : 999px;
		overflow-y : auto;
		font-size : 13px;
		background : #43494c;
		box-shadow : 0 1px 8px #333;
		&.slide_nav{
			left : 0;
			z-index : 10000;
			display : block;
		}
		#menu-title{
			width : 95%;
			padding : 20px 0 20px 5%;
			margin-left : 0;
			overflow : hidden;
			font-size : 14px;
			color : #fff;
			text-decoration : none;
			white-space : nowrap;
			background : #43494c;
		}
		> ul{
			> li{
				position : relative;
				> a{
					display : block;
					width : 95%;
					height : 20px;
					padding : 12px 0 12px 5%;
					overflow : hidden;
					line-height : 20px;
					color : white;
					text-decoration : none;
					white-space : nowrap;
					background-color : #43494c;
					border-top : 1px solid #3c3c3c;
					&[data-en]{
						display : flex;
						align-items : center;
						justify-content : start;
						&::after{
							white-space : pre;
							content : " – "attr( data-en ) " – ";
						}
					}
				}
			}
		}
		button{
			position : absolute;
			top : 0;
			right : 0;
			height : 20px;
			padding : 12px 10px;
			line-height : 20px;
			color : #fff;
			background : #43494c;
			border : 1px solid #3c3c3c;
			border-right : 0;
		}
		ul ul{
			display : none;
		}
		.navLogo{
			display : none;
		}
		li li a{
			display : block;
			width : 95%;
			height : 20px;
			padding : 12px 0 12px 5%;
			overflow : hidden;
			line-height : 20px;
			color : #fff;
			text-decoration : none;
			white-space : nowrap;
			border-top : 1px solid #3c3c3c;
			&::before{
				white-space : pre;
				content : "> ";
			}
		}
		.facebook{
			a{
				background-color : var( --primary );
			}
			img{
				width : auto;
				height : 100%;
				margin-right : 1em;
			}
		}
	}
	@media screen and ( 820px < width <= 980px ){
		display : none;
	}
	@media screen and ( width > 980px ){
		width : 100%;
		margin : 1em auto 2em;
		border : 0;
		&::after{
			display : block;
			clear : both;
			content : "";
		}
		#menu-title{
			display : none;
		}
		> ul{
			width : 1200px;
			max-width : 100%;
			margin : 0 auto;
			font-size : .9em;
			> li{
				position : relative;
				display : table-cell;
				width : 8%;
				font-size : .9em;
				vertical-align : bottom;
				&.current_page_item > a{
					border : 1px solid var( --primary );
				}
				a{
					display : block;
					padding : 3% 0;
					margin : 0 1px;
					color : #3c3636;
					text-align : center;
					text-decoration : none;
					&[data-en]::after{
						display : block;
						text-align : center;
						content : " – "attr( data-en ) " – ";
					}
					&:hover{
						display : block;
						color : #3c3636;
						text-align : center;
						text-decoration : none;
						opacity : .5;
					}
				}
				&:nth-child( 1 ) a{
					color : #fff;
					background-color : var( --primary );
					&::after{
						color : #fff;
					}
				}
				&:nth-child( 2 ) a::after{
					color : #fb00fe;
				}
				&:nth-child( 3 ) a::after{
					color : #06ddf0;
				}
				&:nth-child( 4 ) a::after{
					color : #ff9c00;
				}
				&:nth-child( 5 ){
					position : relative;
					top : 0;
					left : 0;
					a{
						position : absolute;
						top : 0;
						left : 0;
						margin-top : -5em;
						border : none;
					}
				}
				&:nth-child( 6 ) a::after{
					color : #234eee;
				}
				&:nth-child( 7 ) a::after{
					color : #e3513d;
				}
				&:nth-child( 8 ) a::after{
					color : #9e32ea;
				}
				&:nth-child( 9 ) a::after{
					color : #11ab0d;
				}
				button{
					display : none;
				}
				&:hover ul{
					top : auto;
					height : auto;
					overflow : visible;
					visibility : visible;
				}
			}
		}
		ul{
			ul{
				position : absolute;
				z-index : 8999;
				width : 150%;
				height : 0;
				padding : .5em 1em;
				overflow : hidden;
				visibility : hidden;
				background-color : #fafcec;
				li{
					display : inline;
					float : none;
					width : 100%;
					text-align : left;
				}
				li a{
					display : block;
					padding : 2%;
					color : #3c3636;
					text-align : left;
					background-color : #fafcec;
					&::before{
						white-space : pre;
						content : "> ";
					}
				}
				li:nth-child( 1 ) a{
					background-color : #fafcec;
				}
				li a:hover{
					text-align : left;
				}
			}
		}
		> ul *{
			transition : all ease .5s;
		}
		.facebook{
			display : none;
		}
	}
}
:is( body.category , body.date ){
	#nav{
		@media screen and ( width > 820px ){
			margin-block : 0;
		}
	}
}

/* --------------------------------------------
FOLOOW BUTTONS
--------------------------------------------- */
.follow_btn{
	position : fixed;
	bottom : 0;
	left : 0;
	right : 0;
	z-index : 100;
	display : flex;
	flex-wrap : wrap;
	gap : 10px;
	width : 100%;
	padding : 10px;
	margin : auto;
	background-color : var( --primary );
	a{
		position : relative;
		display : flex;
		align-items : center;
		justify-content : center;
		width : calc( (100% - 20px) / 3 );
		height : 60px;
		color : #fff;
		text-decoration : none;
		border : 3px solid #fff;
		border-radius : 5px;
		&::before{
			position : absolute;
			top : 0;
			bottom : 0;
			right : 30px;
			width : 10px;
			height : 10px;
			margin : auto;
			content : "";
			border-top : 2px solid #fff;
			border-right : 2px solid #fff;
			-webkit-transform : rotate( 45deg );
			transform : rotate( 45deg );
		}
		span{
			position : relative;
			margin-left : 20px;
			font-weight : 600;
			&::before{
				position : absolute;
				top : 0;
				bottom : 0;
				left : -25px;
				width : 15px;
				height : 15px;
				margin : auto;
				content : "";
				background-repeat : no-repeat;
				background-size : contain;
			}
		}
	}
	.contact_btn{
		background-color : orange;
		span::before{
			background-image : url( "../images/ui/icon/email.png" );
		}
	}
	.line_btn{
		background-color : green;
		span::before{
			background-image : url( "../images/ui/icon/sns/line.png" );
		}
	}
	.online_btn{
		background-color : blue;
		span::before{
			background-image : url( "../images/ui/icon/pc.png" );
		}
	}
	@media screen and ( width <= 768px ){
		gap : 5px;
		padding : 5px;
		a{
			border : 2px solid #fff;
			&::before{
				right : 10px;
			}
			span{
				font-size : 14.4px;
				&::before{
					left : -30px;
				}
			}
		}
		.contact_btn{
			width : 100%;
		}
		.line_btn , .online_btn{
			width : calc( (100% - 5px) / 2 );
		}
	}
}

/* --------------------------------------------
CONTENT
--------------------------------------------- */
#content{
	width : 100%;
	margin : 1em auto 0;
	overflow : hidden;
	@media screen and ( width <= 768px ){
		font-size : .9em;
		& .page{
			margin-top : 80px;
		}
	}
	@media screen and ( width <= 820px ){
		margin-top : 75px;
	}
	@media screen and ( 820px < width <= 980px ){
		margin-top : 100px;
	}
	@media screen and ( width > 980px ){
		margin-top : 188px;
	}
}
html{
	@media screen and ( width <= 768px ){
		&:has( body.page ){
			scroll-padding-top : 80px;
		}
	}
	@media screen and ( width <= 820px ){
		scroll-padding-top : 75px;
	}
	@media screen and ( 820px < width <= 980px ){
		scroll-padding-top : 100px;
	}
	@media screen and ( width > 980px ){
		scroll-padding-top : 188px;
	}
}

/* --------------------------------------------
MAIN
--------------------------------------------- */
#main{
	width : 100%;
	padding : 0;
	overflow : hidden;
}

/* --------------------------------------------
INNER BOX
--------------------------------------------- */
.innerBox{
	position : relative;
	width : calc( 100% - 18.5px * 2 );
	margin : 0 auto;
	@media screen and ( width >= 1025px ){
		width : 1200px;
	}
}

/* --------------------------------------------
SIDEBAR
--------------------------------------------- */
#sidebar{
	h4{
		padding : 1% 0 1% 2%;
		margin-bottom : .75em;
		color : #fff;
		background : #c40f8f;
		border-bottom : 1px solid #fff;
	}
	h4::before{
		margin-right : 5px;
		font-family : FontAwesome;
		content : "\f0e6";
	}
	ul{
		margin-bottom : 1.5em;
	}
	ul li{
		margin-bottom : .5em;
	}
	ul li a{
		/* width:100%; */
		display : inline-block;
		padding : .5% 1% 1%;
		color : #565656;
		text-decoration : none;
		background-color : #fff;
		border : 1px solid #fff;
		border-bottom : 1px dotted #c40f8f;
		transition : all ease .3s;
	}
	ul li a:hover{
		color : #c40f8f;
		border : 1px solid #c40f8f;
	}
	ul li ul{
		padding-left : 1em;
		margin-top : .75em;
	}
	ul li ul li::before{
		content : "└";
	}
}

/* --------------------------------------------
FOOTER
--------------------------------------------- */
#footer{
	padding : 28px 0 0 0;
	margin-bottom : 17.5vw;
	background-color : var( --primary );
	.footer-inner{
		max-width : 1200px;
		margin : auto;
	}
	.footer-box{
		display : flex;
		justify-content : space-around;
	}
	.foot-inner{
		width : 100%;
		a{
			text-decoration : none;
		}
	}
	.footer-ovh{
		position : relative;
		display : flex;
		justify-content : space-around;
		width : 90%;
		padding : 15px 10px;
		margin : auto;
		border : solid 1px #fff;
		transition : all .6s cubic-bezier( .32 , .625 , .58 , 1 );
		&::after{
			position : absolute;
			bottom : 9px;
			right : 9px;
			width : 0;
			height : 0;
			color : #fff;
			content : "";
			border-color : transparent transparent #fff transparent;
			border-style : solid;
			border-width : 0 0 10px 10px;
			transition : all .6s cubic-bezier( .32 , .625 , .58 , 1 );
		}
		&:hover{
			background : rgb( 255 255 255 / 0.9 );
		}
		&:hover .nagare-text01 ,
		&:hover .nagare-text02{
			color : var( --primary );
		}
		&:hover .nagare-left{
			fill : var( --primary );
		}
		&:hover::after{
			border-color : transparent transparent var( --primary ) transparent;
		}
		.shop-box{
			display : inherit;
			width : 30px ! important;
		}
		.nagare-left{
			display : inherit;
			width : 35px;
			fill : #fff;
			transition : all .6s cubic-bezier( .32 , .625 , .58 , 1 );
		}
		.reserve-box{
			display : inherit;
			width : 40px;
			transition : all .6s cubic-bezier( .32 , .625 , .58 , 1 );
		}
		.nagare-right{
			width : 58%;
		}
		.nagare-text01{
			font-family : Raleway , sans-serif;
			font-size : 25px;
			font-weight : 700;
			color : #fff;
			transition : all .6s cubic-bezier( .32 , .625 , .58 , 1 );
		}
		.nagare-text02{
			font-size : 13px;
			color : #ffffffeb;
			transition : all .6s cubic-bezier( .32 , .625 , .58 , 1 );
		}
	}
	.footer_nav{
		display : flex;
		flex-wrap : wrap;
		margin-bottom : 25px;
		li{
			position : relative;
			margin : 0 18px 5px;
			&::after{
				position : absolute;
				top : 7px;
				width : 17px;
				height : 14px;
				content : "";
				border-right : solid 1px #fff;
			}
			&:last-child::after{
				content : unset;
			}
			a{
				color : #fff;
				text-decoration : none;
			}
		}
	}
	.footPop{
		&.fixed{
			position : fixed;
			bottom : 0;
		}
		li{
			width : 50%;
			a{
				display : flex;
				align-items : center;
				justify-content : flex-start;
				padding : 13px 0 10px;
				text-decoration : none;
				svg{
					width : 20px;
					margin : 0 15px;
					fill : #fff;
				}
			}
			&:nth-of-type( 1 ) a{
				background : #ff85af;
			}
			&:nth-of-type( 2 ) a{
				background : #e95386;
			}
			p{
				color : #fff;
				&.enText{
					margin-bottom : 2px;
					font-family : Raleway , sans-serif;
					font-size : 18px;
					font-style : normal;
					font-weight : 500;
					line-height : 1;
					letter-spacing : 1.3px;
				}
				&.jpText{
					font-size : 11px;
					opacity : .6;
				}
			}
		}
	}
	.footer_copyright{
		padding : 5px 10px 10px;
		background : var( --primary );
		.copy-inner{
			max-width : 1200px;
			margin : 0 auto;
			font-family : Raleway , sans-serif;
			font-size : 11px;
			font-style : normal;
			font-weight : 400;
			color : #fff;
			opacity : 1;
		}
		.copyright{
			display : block;
			max-width : 1500px;
			margin : auto;
			color : #fff;
			a{
				color : #fff;
				text-decoration : none;
			}
		}
	}
	.footPop{
		position : fixed;
		bottom : -100px;
		left : 0;
		z-index : 970;
		display : flex;
		align-items : center;
		justify-content : center;
		width : 100%;
		margin : 0;
		transition : all .4s cubic-bezier( .32 , .625 , .58 , 1 );
	}
	.sp_bnnr{
		bottom : -18.5vw;
	}
	@media screen and ( width <= 768px ){
		.footer_insta{
			margin : 0 5px 20px;
		}
		.footer-box{
			display : none;
		}
		.none-ftop{
			display : none;
		}
	}
	@media print , screen and ( width > 768px ){
		padding : 50px 0 0 0;
		margin-bottom : 0;
		.footer-inner{
			padding : 40px 0;
		}
		.footer_nav{
			justify-content : flex-end;
			max-width : 65%;
			margin-left : auto;
		}
		.footPop{
			display : none;
		}
	}
	@media screen and ( width >= 1025px ){
		.copy-inner{
			padding : 15px 0;
			font-size : 12px;
		}
	}
}
.sp_bnnr{
	display : none;
	@media screen and ( width <= 768px ){
		position : fixed;
		bottom : 0;
		z-index : 9999;
		display : block;
		width : 100%;
		max-width : 100%;
		text-align : center;
	}
}

/* --------------------------------------------
FOOTER VERSION02
--------------------------------------------- */
body:has( .follow_btn ){
	#footer02{
		@media screen and ( width <= 768px ){
			margin-bottom : 133px;
		}
		@media print , screen and ( width > 768px ){
			margin-bottom : 80px;
		}
	}
}
#footer02{
	--rem : calc( 1rem / 16 );
	.logo{
		display : block;
		width : fit-content;
		text-decoration : none;
		span{
			display : block;
		}
		span:nth-of-type( 1 ){
			font-size : calc( 11 * var( --rem ) );
			line-height : 1.4;
			letter-spacing : -.05em;
		}
		span:nth-of-type( 2 ){
			margin-top : calc( 4 * var( --rem ) );
			font-size : calc( 28 * var( --rem ) );
			font-weight : 500;
			letter-spacing : .12em;
		}
	}
	dl{
		margin-top : calc( 24 * var( --rem ) );
		> div + div{
			margin-top : calc( 16 * var( --rem ) );
		}
		dt{
			font-size : calc( 20 * var( --rem ) );
			font-weight : 500;
		}
		dt , dd{
			line-height : 1.4;
		}
		dd{
			font-size : calc( 18 * var( --rem ) );
		}
	}
	nav{
		margin-top : calc( 64 * var( --rem ) );
		> ul{
			align-items : start;
			> li{
				> ul{
					> li + li{
						margin-top : calc( 8 * var( --rem ) );
					}
				}
			}
		}
		a{
			display : block;
			width : fit-content;
			font-size : calc( 16 * var( --rem ) );
			line-height : 1.5;
			text-decoration : none;
			text-decoration : underline;
			text-decoration-color : transparent;
			text-underline-offset : .25lh;
		}
	}
	.copyright{
		display : flex;
		flex-wrap : wrap;
		align-items : center;
		justify-content : center;
		margin-top : calc( 64 * var( --rem ) );
		font-size : calc( 16 * var( --rem ) );
		line-height : 1.2;
		text-align : center;
	}
	@media screen and ( 820px >= width ){
		padding-inline : 1em;
		padding-top : calc( 64 * var( --rem ) );
		padding-bottom : calc( 16 * var( --rem ) );
		color : #363636;
		a{
			color : #363636;
		}
		nav{
			display : block;
			> ul{
				display : grid;
				grid-template-columns : repeat( 2 , 1fr );
				row-gap : calc( 24 * var( --rem ) );
				column-gap : calc( 40 * var( --rem ) );
			}
		}
		.copyright{
			color : #363636;
		}
	}
	@media screen and ( 820px < width ){
		position : relative;
		padding-inline : max( calc( ( 100% - 1200px ) / 2 ) , 18.5px );
		padding-top : calc( 64 * var( --rem ) );
		padding-bottom : calc( 16 * var( --rem ) );
		overflow-x : clip;
		color : #363636;
		border-block : solid 1px #fafafa;
		:where( a , span , dt , dd , p ){
			text-shadow : 0 0 calc( 16 * var( --rem ) ) white;
		}
		a{
			color : #363636;
		}
		&::before{
			position : absolute;
			inset : 0;
			z-index : -1;
			display : block;
			font-size : 0;
			content : "";
			background : image-set( url( "../images/parts/footer02/bg.avif" ) type( "image/avif" ) , url( "../images/parts/footer02/bg.webp" ) type( "image/webp" ) ) center / cover no-repeat;
			opacity : .85;
		}
		nav{
			> ul{
				display : grid;
				grid-auto-flow : column;
				column-gap : calc( 64 * 100% / 1200 );
				justify-content : start;
			}
		}
		.copyright{
			color : #363636;
		}
	}
}
@media ( hover : hover ){
	#footer .logo:hover{
		opacity : .85;
	}
	#footer nav a:hover{
		text-decoration-color : currentColor;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#footer .logo{
		transition : opacity .3s ease-in;
	}
	#footer nav a{
		transition : text-decoration-color .3s ease-in;
	}
}