@charset "UTF-8";
#main{
	overflow-y : clip;
}

/* --------------------------------------------
ABOUT
--------------------------------------------- */
@media screen and ( width <= 750px ){
	body.about #title::before{
		background-image : image-set( url( "../images/about/title_sp.avif" ) type( "image/avif" ) , url( "../images/about/title_sp.webp" ) type( "image/webp" ) );
	}
}
@media print , screen and ( width > 750px ){
	body.about #title::before{
		background-image : image-set( url( "../images/about/title_pc.avif" ) type( "image/avif" ) , url( "../images/about/title_pc.webp" ) type( "image/webp" ) );
	}
}
#about01 h2{
	font-size : clamp( var( --min ) , 4rem , var( --max ) );
	font-weight : 500;
	line-height : 1.6;
	letter-spacing : .2em;
}
#about01 p{
	--delay : .25s;
	letter-spacing : .2em;
}
@media screen and ( width <= 750px ){
	#about01{
		padding-top : calc( ( 84 - 12 ) var( --remBase ) );
		padding-bottom : calc( ( 82 - 12 ) var( --remBase ) );
	}
	#about01 p{
		margin-top : calc( ( 79 - 12 - 12 ) var( --remBase ) );
		font-size : clamp( var( --min ) , 2.6rem , var( --max ) );
		line-height : calc( 50 / 26 );
	}
}
@media print , screen and ( width > 750px ){
	#about01{
		padding-top : calc( ( 96 - 12 ) var( --remBase ) );
		padding-bottom : calc( ( 97 - 16 ) var( --remBase ) );
	}
	#about01 p{
		margin-top : calc( ( 101 - 12 - 16 ) var( --remBase ) );
		font-size : clamp( var( --min ) , 1.8rem , var( --max ) );
		line-height : calc( 50 / 18 );
	}
}
#aboutHero{
	height : calc( 500 var( --remBase ) );
}
@media print , screen and ( width > 750px ){
	#aboutHero{
		position : relative;
		overflow-x : clip;
	}
	#aboutHero::before{
		position : absolute;
		top : calc( -132 var( --remBase ) );
		left : 0;
		z-index : -1;
		width : 100%;
		height : auto;
		aspect-ratio : 1400/4077;
		font-size : 0;
		content : "";
		background : url( "../images/about/bg01_pc.svg" ) center top / 100% auto no-repeat;
	}
}

/* --------------------------------------------
TITLE
--------------------------------------------- */
#title02{
	font-weight : 500;
	text-align : center;
	text-indent : .2em;
	letter-spacing : .2em;
}
@media screen and ( width <= 750px ){
	#title02{
		padding-top : calc( ( 102 - 2.2 - 7 ) var( --remBase ) );
		font-size : clamp( var( --min ) , 5rem , var( --max ) );
		line-height : 1.28;
	}
}
@media print , screen and ( width > 750px ){
	#title02{
		padding-top : calc( ( 69 - 1.2 - 12 ) var( --remBase ) );
		font-size : clamp( var( --min ) , 4rem , var( --max ) );
		line-height : 1.6;
	}
}
body.ainokajitsu #title02{
	font-family : "Shippori Mincho" , serif;
}

/* --------------------------------------------
SHOP
-------------------------------------------- */
.shopGallery{
	position : relative;
	overflow-x : clip;
}
.shopGallery .splide{
	font-size : 0;
}
.shopGallery .splide__slide picture{
	width : 100%;
	height : 100%;
}
.shopGallery .splide__slide img{
	width : 100%;
	height : 100%;
	object-fit : contain;
	object-position : center;
}
.shopGallery .splide__arrow{
	position : absolute;
	top : 50%;
	z-index : 1;
	display : grid;
	place-items : center;
	width : auto;
	aspect-ratio : 1;
	overflow : hidden;
	background-color : var( --bgArrow );
	border-radius : 50%;
}
.shopGallery .splide__arrow img{
	filter : var( --filterWhite );
}
.shopGallery .splide__arrow--prev{
	translate : -50% -50%;
	left : 0;
}
.shopGallery .splide__arrow--next{
	translate : 50% -50%;
	right : 0;
}
.shopGallery #sliderThumbnail .splide__slide.is-active{
	outline : solid calc( 3 var( --remBase ) ) var( --orange );
	outline-offset : calc( -3 var( --remBase ) );
}
.shopGallery p strong{
	display : block;
	font-weight : 400;
	text-align : center;
	text-indent : .2em;
	letter-spacing : .2em;
}
@media screen and ( width <= 750px ){
	.shopGallery{
		padding-top : calc( ( 70 - 7 ) var( --remBase ) );
	}
	.shopGallery .splide__arrow{
		height : calc( 37 var( --remBase ) );
	}
	.shopGallery .splide__arrow img{
		height : calc( 24 var( --remBase ) );
	}
	.shopGallery .splide__arrow--prev{
		padding-right : calc( 7 var( --percentBase ) );
	}
	.shopGallery .splide__arrow--next{
		padding-left : calc( 7 var( --percentBase ) );
	}
	.shopGallery #sliderThumbnail{
		margin-top : calc( 20 var( --remBase ) );
	}
	.shopGallery p{
		margin-top : calc( ( 52 - 12 ) var( --remBase ) );
		font-size : clamp( var( --min ) , 2.6rem , var( --max ) );
		line-height : calc( 50 / 26 );
	}
}
@media print , screen and ( width > 750px ){
	.shopGallery{
		padding-top : calc( ( 64 - 12 ) var( --remBase ) );
	}
	.shopGallery .splide__arrow{
		height : calc( 54 var( --remBase ) );
	}
	.shopGallery .splide__arrow img{
		height : calc( 24 var( --remBase ) );
	}
	.shopGallery #sliderThumbnail{
		margin-top : calc( 40 var( --remBase ) );
	}
	.shopGallery .splide__arrow--prev{
		padding-right : calc( 5 var( --percentBase ) );
	}
	.shopGallery .splide__arrow--next{
		padding-left : calc( 5 var( --percentBase ) );
	}
	.shopGallery p{
		margin-top : calc( ( 33 - 9 ) var( --remBase ) );
		font-size : clamp( var( --min ) , 1.8rem , var( --max ) );
		line-height : 2;
	}
}
#aoinoen01{
	--bgArrow : color-mix( in sRGB , var( --orange ) 80% , transparent );
}
#aoinoen01::before{
	position : absolute;
	left : 0;
	z-index : -1;
	height : auto;
	aspect-ratio : 1400/4077;
	font-size : 0;
	content : "";
	background : url( "../images/aoinoen/bg01.svg" ) center top / contain no-repeat;
}
@media screen and ( width <= 750px ){
	#aoinoen01::before{
		top : calc( ( 430 - 7 ) var( --remBase ) );
		left : calc( -325 var( --viewportBase ) );
		width : calc( 1400 var( --viewportBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#aoinoen01::before{
		top : calc( ( 479 - 12 ) var( --remBase ) );
		width : 100%;
	}
}
#grapetree01{
	--bgArrow : color-mix( in srgb , #d23a65 80% , transparent );
}
#grapetree01::before{
	position : absolute;
	left : 0;
	z-index : -1;
	height : auto;
	aspect-ratio : 1400/4077;
	font-size : 0;
	content : "";
	background : url( "../images/grapetree/bg01.svg" ) center top / contain no-repeat;
}
#grapetree01 #sliderThumbnail .splide__slide.is-active{
	outline-color : #da5d80;
}
@media screen and ( width <= 750px ){
	#grapetree01::before{
		top : calc( ( 366 - 7 ) var( --remBase ) );
		left : calc( -325 var( --viewportBase ) );
		width : calc( 1400 var( --viewportBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#grapetree01::before{
		top : calc( ( 474 - 12 ) var( --remBase ) );
		left : 0;
		width : 100%;
	}
}
#ainokajitsu01{
	--bgArrow : color-mix( in srgb , #5f431f 80% , transparent );
}
#ainokajitsu01 p{
	font-family : "Shippori Mincho" , serif;
}
#lumiereduciel01{
	--bgArrow : color-mix( in srgb , #f8d449 80% , transparent );
}
#lumiereduciel01::before{
	position : absolute;
	left : 0;
	z-index : -1;
	display : block;
	width : 100%;
	font-size : 0;
	content : "";
	background-color : #fffae2;
}
@media screen and ( width <= 750px ){
	#lumiereduciel01::before{
		bottom : calc( ( -85 + 12 ) var( --remBase ) );
		height : calc( 552 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#lumiereduciel01::before{
		bottom : calc( ( -56 + 9 ) var( --remBase ) );
		height : calc( 709 var( --remBase ) );
	}
}

/* --------------------------------------------
CONTACT
--------------------------------------------- */
@media screen and ( width <= 750px ){
	body.contact #title::before , body.confirm #title::before , body.thanks #title::before{
		background-image : image-set( url( "../images/contact/title_sp.avif" ) type( "image/avif" ) , url( "../images/contact/title_sp.webp" ) type( "image/webp" ) );
	}
}
@media print , screen and ( width > 750px ){
	body.contact #title::before , body.confirm #title::before , body.thanks #title::before{
		background-image : image-set( url( "../images/contact/title_pc.avif" ) type( "image/avif" ) , url( "../images/contact/title_pc.webp" ) type( "image/webp" ) );
	}
}
#contat01 h2{
	font-weight : 500;
	text-align : center;
	text-indent : .2em;
	letter-spacing : .2em;
}
#contat01 li{
	overflow : hidden;
	border-radius : calc( 10 var( --remBase ) );
	outline : solid var( --orange ) 1px;
	outline-offset : -1px;
}
#contat01 h3{
	font-weight : 500;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
}
#contat01 a:first-of-type{
	display : grid;
	grid-template-columns : auto auto;
	align-items : center;
	justify-content : center;
	width : fit-content;
	margin-inline : auto;
	font-weight : 500;
	letter-spacing : .05em;
}
#contat01 a:first-of-type::before{
	display : block;
	width : auto;
	aspect-ratio : 1;
	font-size : 0;
	content : "";
	background-image : url( "../images/contact/tel.svg" );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
#contat01 a:nth-of-type( 2 ){
	display : grid;
	grid-template-columns : auto auto;
	align-items : center;
	justify-content : center;
	margin-inline : auto;
	overflow : hidden;
	color : white;
	letter-spacing : .1em;
	background-color : #5ac463;
}
#contat01 a:nth-of-type( 2 )::before{
	display : block;
	width : auto;
	aspect-ratio : 1;
	font-size : 0;
	content : "";
	background-image : url( "../images/contact/line.svg" );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
@media screen and ( width <= 750px ){
	#contat01{
		padding-top : calc( ( 101 - 2.2 ) var( --remBase ) );
		padding-bottom : calc( 128 var( --remBase ) );
	}
	#contat01 h2{
		font-size : clamp( var( --min ) , 3rem , var( --max ) );
	}
	#contat01 ul{
		margin-top : calc( 44 var( --remBase ) );
	}
	#contat01 li + li{
		margin-top : calc( 39 var( --remBase ) );
	}
	#contat01 li{
		border-radius : calc( 10 var( --remBase ) );
	}
	#contat01 li:not( :has( a:nth-of-type( 2 ) ) ){
		padding-top : calc( ( 59 - 4.315 ) var( --remBase ) );
		padding-bottom : calc( 61 var( --remBase ) );
	}
	#contat01 li:has( a:nth-of-type( 2 ) ){
		padding-top : calc( ( 49 - 4.315 ) var( --remBase ) );
		padding-bottom : calc( 45 var( --remBase ) );
	}
	#contat01 h3{
		font-size : clamp( var( --min ) , 3.4520000000000004rem , var( --max ) );
		line-height : calc( 43.15 / 34.52 );
	}
	#contat01 a:nth-of-type( 1 ){
		column-gap : calc( 42 var( --remBase ) );
		margin-top : calc( ( 17 - 4.315 ) var( --remBase ) );
		font-size : 6.472rem;
	}
	#contat01 a:nth-of-type( 1 )::before{
		height : calc( 86 var( --remBase ) );
	}
	#contat01 a:nth-of-type( 2 ){
		column-gap : calc( 5 * 100% / 606 );
		width : calc( 606 var( --percentBase ) );
		height : calc( 102 var( --remBase ) );
		margin-top : calc( 16 var( --remBase ) );
		font-size : 3.452rem;
		border-radius : calc( 5 var( --remBase ) );
	}
	#contat01 a:nth-of-type( 2 )::before{
		height : calc( 88 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#contat01{
		padding-top : calc( ( 92 - 1.2 - 5 ) var( --remBase ) );
		padding-bottom : calc( 73 var( --remBase ) );
	}
	#contat01 h2{
		font-size : clamp( var( --min ) , 2rem , var( --max ) );
		line-height : 1.5;
	}
	#contat01 ul{
		display : grid;
		grid-template-columns : repeat( 3 , calc( 320 var( --percentBase ) ) );
		justify-content : space-between;
		margin-top : calc( ( 37 - 5 ) var( --remBase ) );
	}
	#contat01 li{
		display : grid;
		grid-template-rows : subgrid;
		grid-row : span 3;
		padding-top : calc( ( 23 - 2 ) var( --remBase ) );
		padding-bottom : calc( 21 var( --remBase ) );
	}
	#contat01 h3{
		grid-row : 1;
		align-self : end;
		font-size : 1.6rem;
		line-height : 1.25;
	}
	#contat01 a:first-of-type{
		grid-row : 2;
		column-gap : calc( 18 var( --remBase ) );
		margin-top : calc( ( 6 - 2 ) var( --remBase ) );
		font-size : 3rem;
	}
	#contat01 a:first-of-type::before{
		height : calc( 40 var( --remBase ) );
	}
	#contat01 a:nth-of-type( 2 ){
		grid-row : 3;
		column-gap : calc( 2 * 100% / 280 );
		width : calc( 280 * 100% / 320 );
		height : calc( 47 var( --remBase ) );
		margin-top : calc( 7 var( --remBase ) );
		font-size : 1.6rem;
		border-radius : calc( 5 var( --remBase ) );
	}
	#contat01 a:nth-of-type( 2 )::before{
		height : calc( 41 var( --remBase ) );
	}
}