@charset "UTF-8";

/* --------------------------------------------
COLUMN
--------------------------------------------- */
@media print , screen and ( width > 750px ){
	#column{
		display : grid;
		grid-template-columns : calc( 1040 var( --percentBase ) ) calc( 320 var( --percentBase ) );
		align-items : start;
		justify-content : space-between;
	}
	#column > :where( article , section , .sections ){
		grid-row : 1;
		grid-column : 1;
	}
	#column > :where( aside ){
		grid-row : 1;
		grid-column : 2;
	}
}
@media screen and ( width <= 750px ){
	#column:has( #mekikinin01 ){
		padding-bottom : calc( 16 var( --remBase ) );
		margin-top : calc( 26 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#column:has( #mekikinin01 ){
		padding-bottom : calc( 40 var( --remBase ) );
		margin-top : calc( 105 var( --remBase ) );
	}
}
@media screen and ( width <= 750px ){
	#column:has( #infos ){
		padding-top : calc( 16 var( --remBase ) );
		padding-bottom : calc( 40 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#column:has( #infos ){
		padding-block : calc( 90 var( --remBase ) );
	}
}
@media screen and ( width <= 750px ){
	#column:has( #info ){
		padding-top : calc( 16 var( --remBase ) );
		padding-bottom : calc( 40 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#column:has( #info ){
		padding-block : calc( 76 var( --remBase ) );
	}
}
@media screen and ( width <= 750px ){
	#column:has( :where( #infos , #info ) ) .sidebar{
		margin-top : calc( 40 var( --remBase ) );
	}
	#column:has( :where( #infos , #info ) ) .sidebar ul:has( + h4 ){
		padding-bottom : calc( 16 var( --remBase ) );
		border-bottom : solid 1px #d9d9d9;
	}
	#column:has( :where( #infos , #info ) ) .sidebar ul + h4{
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#column:has( :where( #infos , #info ) ) #sidebar ul{
		padding-bottom : calc( 39 var( --remBase ) );
		margin-top : calc( 21 var( --remBase ) );
		border-bottom : solid 1px #d9d9d9;
	}
	#column:has( :where( #infos , #info ) ) #sidebar ul + h4{
		margin-top : calc( 40 var( --remBase ) );
	}
}

/* --------------------------------------------
LAYOUT
--------------------------------------------- */
@media screen and ( width <= 750px ){
	.layout01 > picture img{
		width : 100%;
		height : auto;
	}
	.layout01 p + .link01{
		margin-top : calc( 8 var( --remBase ) );
	}
	.layout01 p + .link01{
		margin-top : calc( 16 var( --remBase ) );
	}
	.layout01 > picture{
		margin-top : calc( 24 var( --remBase ) );
	}
	.layout01.overflow > div{
		padding-inline : calc( 16 var( --viewportBase ) );
	}
	.layout01.pattern01{
		padding-top : calc( 32 var( --remBase ) );
		background : url( "../images/ui/bg/pattern01_sp.svg" ) center top / 100% auto no-repeat;
	}
	.layout01.pattern03{
		padding-top : calc( 32 var( --remBase ) );
		background : url( "../images/ui/bg/pattern03_sp.svg" ) center top / 100% auto no-repeat;
	}
}
@media print , screen and ( width > 750px ){
	.layout01{
		--pcHeight : 427
;
	}
	.layout01 .hgroup01 + p{
		margin-top : calc( 6 var( --remBase ) );
	}
	.layout01 p + .link01{
		margin-top : calc( 4 var( --remBase ) );
	}
	.layout01 .link01{
		justify-self : end;
	}
	.layout01.overflow:not( .pattern01 , .pattern03 ){
		min-height : calc( var( --pcHeight )  var( --remBase ) );
	}
	.layout01.overflow:not( .pattern01 ) > picture{
		top : 0;
	}
	.layout01.overflow{
		position : relative;
		overflow-x : clip;
	}
	.layout01.overflow > picture{
		position : absolute;
	}
	.layout01.overflow > picture img{
		height : calc( var( --pcHeight ) var( --remBase ) );
	}
	.layout01.overflow > div{
		display : grid;
		grid-auto-flow : row;
		width : calc( 680 var( --percentBase ) );
		min-height : calc( var( --pcHeight ) var( --remBase ) );
	}
	.layout01.overflow:not( .reverse ) > div{
		margin-left : calc( 720 var( --percentBase ) );
	}
	.layout01.overflow.pattern01{
		min-height : calc( ( var( --pcHeight ) + 24 ) var( --remBase ) );
		padding-top : calc( 24 var( --remBase ) );
	}
	.layout01.overflow.pattern01 > picture{
		top : calc( 24 var( --remBase ) );
	}
	.layout01.overflow.pattern03{
		min-height : calc( ( var( --pcHeight ) + 40 ) var( --remBase ) );
		padding-bottom : calc( 40 var( --remBase ) );
	}
	.layout01.align-center-pc > div{
		align-content : center;
	}
	.layout01.pattern01{
		background : url( "../images/ui/bg/pattern01_pc.svg" ) center top / auto calc( 595 var( --remBase ) ) repeat-x;
	}
	.layout01.pattern02{
		background : url( "../images/ui/bg/pattern02_pc.svg" ) calc( 50% - ( ( 443 - 258.5  ) var( --remBase ) ) ) calc( 48 var( --remBase ) ) / auto calc( 178 var( --remBase ) ) no-repeat;
	}
	.layout01.pattern03{
		background-image : url( "../images/ui/bg/pattern0301_pc.svg" ) , url( "../images/ui/bg/pattern0302_pc.svg" );
		background-repeat : repeat-x , no-repeat;
		background-position : center calc( 40 var( --remBase ) ) , calc( 50% + ( ( 475 + 192.5  ) var( --remBase ) ) ) calc( 44 var( --remBase ) );
		background-size : auto calc( 618 var( --remBase ) ) , auto calc( 401 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	.layout01.overflow:not( .reverse ) picture{
		left : calc( -300 var( --viewportBase ) );
	}
	.layout01.overflow.reverse picture{
		left : calc( 720 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1440px ){
	.layout01.overflow:not( .reverse ) picture{
		right : calc( 50% + 20px );
	}
	.layout01.overflow.reverse picture{
		left : calc( 50% + 20px );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.layout01.animation .hgroup01 , .layout01.animation p , .layout01.animation .link01{
		opacity : 0;
	}
	.layout01.animation .hgroup01{
		translate : 0 25%;
	}
	.layout01.animation p{
		translate : 0 1lh;
	}
	.layout01.animation .link01{
		translate : 0 100%;
	}
	.layout01.animation picture{
		overflow : hidden;
	}
	.layout01.animation picture img{
		clip-path : inset( 100% 0 0 0 );
	}
	.layout01.animation.is-animation .hgroup01 , .layout01.animation.is-animation p , .layout01.animation.is-animation .link01{
		opacity : 1;
		translate : 0 0;
		transition : translate .5s ease-in , opacity .5s ease-in;
	}
	.layout01.animation.is-animation .hgroup01{
		transition-delay : .2s;
	}
	.layout01.animation.is-animation p{
		transition-delay : .6s;
	}
	.layout01.animation.is-animation .link01{
		transition-delay : 1s;
	}
	.layout01.animation.is-animation picture img{
		clip-path : inset( 0 );
		transition : clip-path .5s ease-in;
	}
}
@media screen and ( width <= 750px ){
	.layout02 p{
		margin-top : calc( 8 var( --remBase ) );
	}
	.layout02 picture{
		margin-top : calc( 16 var( --remBase ) );
	}
	.layout02 picture img{
		width : 100%;
		height : auto;
	}
}
@media print , screen and ( width > 750px ){
	.layout02{
		display : grid;
		grid-template-columns : repeat( 2 , calc( 680 var( --percentBase ) ) );
		justify-content : space-between;
	}
	.layout02 > div{
		grid-row : 1;
	}
	.layout02 > picture{
		grid-row : 1;
	}
	.layout02:not( .align-center-pc ){
		align-items : start;
	}
	.layout02.align-center-pc{
		align-items : center;
	}
	.layout02:not( .reverse ) > div{
		grid-column : 1;
	}
	.layout02:not( .reverse ) > picture{
		grid-column : 2;
	}
	.layout02.reverse > picture{
		grid-column : 1;
	}
	.layout02.reverse > div{
		grid-column : 2;
	}
	.layout02 p{
		margin-top : calc( 21 var( --remBase ) );
	}
}

/* --------------------------------------------
SIDE BAR
--------------------------------------------- */
#sidebar :where( h1 , h2 ,h3 , h4 , h5 , h6 ){
	font-weight : 500;
}
#sidebar :where( h1 , h2 ,h3 , h4 , h5 , h6 )::after{
	display : block;
	height : 1px;
	font-size : 0;
	content : "";
	background-color : var( --wp--preset--color--accent-02 );
}
#sidebar ul :where( a , li:not( :has( a ) ) ){
	display : grid;
	grid-template-columns : auto auto;
	align-items : baseline;
	justify-content : start;
	font-weight : 500;
}
#sidebar ul :where( a , li:not( :has( a ) ) )::before{
	content : "・";
}
@media screen and ( width <= 750px ){
	#sidebar :where( h1 , h2 ,h3 , h4 , h5 , h6 ){
		font-size : calc( 18 var( --fontCoef ) );
		line-height : 1.5;
	}
	#sidebar :where( h1 , h2 ,h3 , h4 , h5 , h6 )::after{
		width : calc( 58 var( --percentBase ) );
		margin-top : calc( 8 var( --remBase ) );
	}
	#sidebar ul{
		margin-top : calc( 16 var( --remBase ) );
	}
	#sidebar ul :where( a , li:not( :has( a ) ) ){
		font-size : calc( 14 var( --fontCoef ) );
		line-height : 2;
	}
}
@media print , screen and ( width > 750px ){
	#sidebar.sticky-pc{
		position : sticky;
		top : var( --headerHeight );
	}
	#sidebar :where( h1 , h2 ,h3 , h4 , h5 , h6 ){
		font-size : calc( 22 var( --fontCoef ) );
		line-height : 1.3;
	}
	#sidebar :where( h1 , h2 ,h3 , h4 , h5 , h6 )::after{
		width : calc( 50 * 100% / 320 );
		margin-top : calc( 16 var( --remBase ) );
	}
	#sidebar ul li + li{
		margin-top : calc( 16 var( --remBase ) );
	}
	#sidebar ul :where( a , li:not( :has( a ) ) ){
		font-size : calc( 18 var( --fontCoef ) );
		line-height : 1.3;
	}
}

/* --------------------------------------------
PAGINATION
--------------------------------------------- */
#paginationSingle{
	display : grid;
	align-items : center;
	justify-content : space-between;
}
#paginationSingle a{
	grid-row : 1;
}
#paginationSingle .archive{
	grid-column : 2;
}
#paginationSingle .prev{
	grid-column : 1;
}
#paginationSingle .next{
	grid-column : 3;
}
#paginationSingle{
	grid-template-columns : calc( 40 * 100% / 232 ) calc( 136 * 100% / 232 ) calc( 40 * 100% / 232 );
	justify-content : space-between;
	margin-inline : auto;
}
#paginationSingle a{
	display : grid;
	place-items : center;
	height : calc( 40 var( --remBase ) );
	border : solid 1px #c4c4c4;
}
#paginationSingle :where( .prev , .next ){
	background-color : var( --wp--preset--color--accent-0102 );
}
#paginationSingle :where( .prev , .next ) img{
	filter : var( --filterWhite );
}
@media screen and ( width <= 750px ){
	#paginationSingle{
		width : calc( 232 var( --percentBase ) );
	}
	#paginationSingle .archive{
		font-size : calc( 14 var( --fontCoef ) );
	}
}
@media print , screen and ( width > 750px ){
	#paginationSingle{
		width : calc( 232 * 100% / 1040 );
	}
	#paginationSingle .archive{
		font-size : calc( 18 var( --fontCoef ) );
		font-weight : 500;
	}
}
@media ( hover : hover ){
	#paginationSingle .archive:hover{
		color : var( --wp--preset--color--text-03 );
		background-color : var( --wp--preset--color--accent-0102 );
	}
	#paginationSingle :where( .prev , .next ):hover{
		background-color : var( --wp--preset--color--text-03 );
	}
	#paginationSingle :where( .prev , .next ):hover img{
		filter : invert( 57% ) sepia( 11% ) saturate( 427% ) hue-rotate( 187deg ) brightness( 96% ) contrast( 85% );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#paginationSingle .archive{
		transition : color var( --transitionBase ) , background var( --transitionBase );
	}
	#paginationSingle :where( .prev , .next ){
		transition : background var( --transitionBase );
	}
	#paginationSingle :where( .prev , .next ) img{
		transition : filter var( --transitionBase );
	}
}

/* --------------------------------------------
ONLINE STORE
--------------------------------------------- */
#onlinestore{
	position : relative;
	overflow-x : clip;
}
#onlinestore::before{
	position : absolute;
	bottom : 0;
	display : block;
	font-size : 0;
	content : "";
	background : url( "../images/template/onlinestore/bg01.webp" ) center / contain no-repeat;
}
#onlinestore h2{
	font-weight : 400;
	line-height : 1.3;
	text-align : center;
}
#onlinestore h2[data-after]::after{
	display : block;
	font-family : "Roboto Flex";
	line-height : 1.3;
	color : var( --wp--preset--color--text-05 );
	text-align : center;
	text-indent : .2em;
	letter-spacing : .2em;
}
#onlinestore p{
	text-align : center;
}
#onlinestore .link01{
	margin-inline : auto;
}
@media screen and ( width <= 750px ){
	#onlinestore{
		padding-bottom : calc( 70 var( --remBase ) );
	}
	#onlinestore::before{
		left : calc( var( --percentBase ) );
		left : calc( -119 var( --percentBase ) );
		width : calc( 277 var( --viewportBase ) );
		height : calc( 184 var( --remBase ) );
	}
	#onlinestore h2{
		font-size : calc( 36 var( --fontCoef ) );
	}
	#onlinestore h2[data-after]::after{
		margin-top : calc( 8 var( --remBase ) );
		font-size : calc( 12 var( --fontCoef ) );
	}
	#onlinestore p{
		margin-top : calc( 16 var( --remBase ) );
	}
	#onlinestore .link01{
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#onlinestore{
		padding-top : calc( 110 var( --remBase ) );
		padding-bottom : calc( 182 var( --remBase ) );
	}
	#onlinestore::before{
		height : calc( 408 var( --remBase ) );
	}
	#onlinestore::after{
		position : absolute;
		top : 0;
		display : block;
		height : calc( 584 var( --remBase ) );
		font-size : 0;
		content : "";
		background : url( "../images/template/onlinestore/bg02_pc.webp" ) center / contain no-repeat;
	}
	#onlinestore h2{
		font-size : calc( 50 var( --fontCoef ) );
	}
	#onlinestore h2[data-after]::after{
		margin-top : calc( 18 var( --remBase ) );
		font-size : calc( 16 var( --fontCoef ) );
	}
	#onlinestore p{
		margin-top : calc( 27 var( --remBase ) );
	}
	#onlinestore .link01{
		margin-top : calc( 18 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	#onlinestore::before{
		left : calc( -280 var( --viewportBase ) );
		width : calc( 612 var( --viewportBase ) );
	}
	#onlinestore::after{
		left : calc( 1086 var( --viewportBase ) );
		width : calc( 877 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1440px ){
	#onlinestore::before{
		left : calc( 50% - 1000px );
		width : 612px;
	}
	#onlinestore::after{
		left : calc( 50% + 366px );
		width : 877px;
	}
}

/* --------------------------------------------
FOOTER
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#toTop{
		position : absolute;
		top : calc( -40 var( --remBase ) );
		right : calc( 16 var( --viewportBase ) );
		display : block;
		width : fit-content;
	}
	#toTop img{
		height : calc( 40 var( --remBase ) );
	}
}
#footer{
	color : var( --wp--preset--color--text-03 );
	background-color : var( --wp--preset--color--accent-01 );
}
@media screen and ( width <= 750px ){
	#footer{
		position : relative;
		padding-block : calc( 48 var( --remBase ) );
		margin-top : calc( 40 var( --remBase ) );
	}
	#footer .copyright{
		font-family : "Noto Sans JP" , serif;
		font-size : calc( 16 var( --fontCoef ) );
		line-height : 1.7;
		text-align : center;
	}
}
@media print , screen and ( width > 750px ){
	#footer{
		padding-block : calc( 60 var( --remBase ) );
	}
	#footer > div{
		align-items : center;
	}
	#footer > div:nth-of-type( 1 ){
		display : flex;
		flex-wrap : wrap;
	}
	#footer > div:nth-of-type( 2 ){
		display : grid;
	}
	#footer .logo{
		margin-right : auto;
	}
	#footer .logo img{
		height : calc( 66 var( --remBase ) );
	}
	#footer .links{
		display : grid;
		grid-auto-flow : column;
	}
	#footer .links li + li::before{
		font-size : calc( 16 var( --fontCoef ) );
		line-height : 1.7;
		content : "｜";
	}
	#footer .links a{
		padding-inline : calc( 12 var( --remBase ) );
		font-size : calc( 16 var( --fontCoef ) );
		line-height : 1.7;
		color : var( --wp--preset--color--text-03 );
	}
	#footer .contacts{
		display : grid;
		grid-auto-flow : column;
		column-gap : calc( 16 var( --remBase ) );
		align-items : center;
		justify-content : end;
	}
	#footer .tel{
		display : grid;
		grid-template-columns : calc( 18 var( --remBase ) ) auto;
		column-gap : calc( 3 var( --remBase ) );
		align-items : center;
		justify-content : start;
		font-family : "Roboto Flex" , sans-serif;
		font-size : calc( 24 var( --fontCoef ) );
		color : var( --wp--preset--color--text-03 );
		letter-spacing : .1em;
	}
	#footer .tel::before{
		display : block;
		height : calc( 18 var( --remBase ) );
		font-size : 0;
		content : "";
		background : url( "../images/ui/icon/tel.svg" ) center / contain no-repeat;
		filter : var( --filterWhite );
	}
	#footer :where( .contact , .onlinestore ){
		display : grid;
		place-items : center;
		padding-block : calc( 8 var( --remBase ) );
		padding-inline : calc( 24 var( --remBase ) );
		font-family : "Noto Sans JP" , serif;
		font-size : calc( 14 var( --fontCoef ) );
		color : var( --wp--preset--color--text-01 );
		background-color : var( --wp--preset--color--text-03 );
		border-radius : 100vmax;
	}
	#footer > div:nth-of-type( 2 ){
		grid-template-columns : auto auto;
		justify-content : space-between;
		padding-top : calc( 19 var( --remBase ) );
		margin-top : calc( 36 var( --remBase ) );
		border-top : solid 1px #d9d9d9;
	}
	#footer .privacies{
		display : grid;
		grid-auto-flow : column;
	}
	#footer .privacies li + li::before{
		font-size : calc( 16 var( --fontCoef ) );
		line-height : 1.7;
		content : "｜";
	}
	#footer .privacies a{
		padding-inline : calc( 12 var( --remBase ) );
		font-size : calc( 16 var( --fontCoef ) );
		line-height : 1.7;
		color : var( --wp--preset--color--text-03 );
	}
	#footer .copyright{
		font-family : "Roboto Flex" , sans-serif;
		font-size : calc( 16 var( --fontCoef ) );
		line-height : 1.3;
	}
}
@media screen and ( 750px < width < 2000px ){
	#footer{
		padding-inline : calc( 20 * 100% / 2000 );
	}
	#footer > div:nth-of-type( 1 ){
		row-gap : calc( 8 * 100vw / 2000 );
	}
	#footer .links{
		padding-left : calc( 11 * 100vw / 2000 );
	}
}
@media screen and ( 750px < width < 1000px ){
	#footer .contacts{
		margin-left : calc( 8 * 100vw / 2000 );
	}
}
@media screen and ( 1000px <= width < 1440px ){
	#footer .contacts{
		margin-left : auto;
	}
}
@media screen and ( 1440px <= width > 2000px ){
	#footer .contacts{
		margin-left : calc( 8 * 100vw / 2000 );
	}
}
@media screen and ( width >= 2000px ){
	#footer{
		padding-inline : calc( ( 100% - 1960px ) / 2 );
	}
	#footer > div:nth-of-type( 1 ){
		row-gap : 8px;
	}
	#footer .links{
		padding-left : 11px;
	}
	#footer .contacts{
		margin-left : 8px;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.animation :where( .parts01  , .parts02, .parts03 , .parts04 , .parts05 , .parts06 , .parts07  , .parts08 ){
		translate : 0 1lh;
		opacity : 0;
	}
	.animation picture.anime{
		overflow : hidden;
	}
	.animation picture.anime img{
		clip-path : inset( 100% 0 0 0 );
	}
	.animation.is-animation :where( .parts01  , .parts02, .parts03 , .parts04 , .parts05 , .parts06 , .parts07  , .parts08 ){
		opacity : 1;
		translate : 0 0;
		transition : translate .5s ease-out , opacity .5s ease-out;
	}
	.animation.is-animation .parts01{
		transition-delay : .2s;
	}
	.animation.is-animation .parts02{
		transition-delay : .4s;
	}
	.animation.is-animation .parts03{
		transition-delay : .6s;
	}
	.animation.is-animation .parts04{
		transition-delay : .8s;
	}
	.animation.is-animation .parts05{
		transition-delay : 1s;
	}
	.animation.is-animation .parts06{
		transition-delay : 1.2s;
	}
	.animation.is-animation .parts07{
		transition-delay : 1.4s;
	}
	.animation.is-animation .parts08{
		transition-delay : 1.6s;
	}
	.animation.is-animation picture.anime img{
		clip-path : inset( 0 );
		transition : clip-path .5s ease-out;
		transition-delay : .4s;
	}
}

.editor p {
	line-height: 1.7;
}