@charset "UTF-8";

/* commons and settings */
@media all {
	body {
		background-color: #6abbc4;
		font-family: "Noto Serif JP", serif;
		color: #323232;
		line-height: 1;
		letter-spacing: .1em;
		line-break: strict;
	}
	body.white {background-color: #fff;}
	.site-main section {position: relative;}

	.section-text-content {font-weight: 100;}
	.section-content-ttl {
		writing-mode: vertical-rl;
		font-weight: 100;
	}
	.section-content-ttl .narrow {letter-spacing: -.2em;}
	.section-text-content p {text-align: justify;}
	.ilb {display: inline-block;}
	/* sp */
	@media (max-width: 767px) {
		:root {font-size: .25vw;}
		.spNone {display: none!important;}
		.site-header, .site-footer, .site-main {font-size: 16.5rem;}

		.section-content-ttl {
			font-size: 28rem;
			line-height: 1.724;
		}
		.section-text-content p {
			margin-top: 40rem;
			padding: 0 30rem;
			font-size: 16.5rem;
			line-height: 2.0625;
			letter-spacing: .1em;
		}
	}

	/* tab & pc */
	@media print,
	(min-width: 768px) {
		:root {font-size: 1px;}
		.spOnly {display: none!important;}
		.site-header, .site-footer, .site-main {
			overflow: clip;
			font-size: 16rem;
		}
		

		.section-header {
			margin: 0 auto;
			width: 1200rem;
		}
		.section-content {
			margin: 0 auto;
			padding: 0 20rem;
			max-width: 1240rem;
		}
		.section-text-content {
			width: 480rem;
		}
		.section-content-ttl {
			margin-left: auto;
			margin-right: 20%;
			font-size: 42rem;
			line-height: 1.724;
		}
		.img-left .section-content-ttl {
			margin-left: 10%;
			margin-right: auto;
		}
		.section-text-content p {
			margin-top: 80rem;
			font-size: 24rem;
			line-height: 2.083;
			letter-spacing: .06em;
		}
		.section-content {
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
		}
		.section-content.img-left {
			flex-direction: row-reverse;
		}
		.section-img-content {
			width: 50%;
		}

		/* pc */
		@media (min-width: 1280px) {
			.site-header, .site-footer, .site-main {
				min-width: 1280px;
			}
		}
		/* tab */
		@media (max-width: 1279px) {
			:root {font-size: 0.078125vw;}
		}

		/* wide */
		@media (min-width: 1921px) {
			:root {font-size: 0.052vw;}
		}
	}
}


/* site-header */
@media all {
	.site-header {
		overflow: hidden;
		position: relative;
		height: 150lvh;
		/* background: center / cover no-repeat url(../img/fv/cg.jpg); */
	}
	.fv-ttl {
		position: relative;
		z-index: 1;
		width: 100%;
		height: 100lvh;
		background-color: #6abbc4;
	}
	.fv-ttl>img {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100lvh;
		object-fit: contain;
		object-position: center;
		opacity: 0;
		filter: blur(10rem);
		transition: opacity 1.5s, filter 1.5s;
	}
	.start .fv-ttl>img {
		opacity: 1;
		filter: blur(0);
	}
	.start .fv-ttl-2 {transition-delay: .5s;}
	.start .fv-ttl-3 {transition-delay: 1s;}
	.start .fv-ttl-4 {transition-delay: 1.5s;}
	.start .fv-ttl-5 {transition-delay: 2s;}

	.fv-cg {
		overflow: hidden;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #6abbc4;
	}
	.fv-cg-img {
		opacity: 0;
		filter: blur(100rem);
		transition: transform .25s ease-out, opacity .25s linear .25s, filter .5s;
  	will-change: transform; 
	}
	.start .fv-cg-img {
		opacity: 1;
		filter: blur(0);
	}
	
	/* sp */
	@media (max-width: 767px) {
		.site-header {
			height: calc(680rem + 73.75vw);
			height: calc(680rem + 50vw);
			background-size: auto 700rem;
		}
		.fv-ttl {height: 680rem;}
		.fv-ttl>img {
			top: 25rem;
			height: 665rem;
		}
		.fv-cg {
			width: 100%;
			height: 73.75vw;
			height: 50vw;
		}
		.fv-cg-img {
			width: 150%;
			margin-left: -22%;
		}
	}

	/* tab & pc */
	@media print,
	(min-width: 768px) {
		.site-header {
			height: calc(100vh + 36.875vw);
		}

		.fv-cg {height: 36.875vw;}

		
		.fv-ttl > img {
			padding-top: 40rem;
			transform: translateY(12rem);
		}

	}
}

/* lead-section */
@media all {
	.lead-section {
		z-index: 100;
		background-color: #fcf2f4;
		color: #44a0ae;
		font-weight: 500;
	}
	.lead-section::after {
		content: '';
		position: absolute;
		z-index: -1;
		display: block;
		width: 100%;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	.lead-content p {
		line-height: 2.25;
		text-align: justify;
	}
	
	/* sp */
	@media (max-width: 767px) {
		.lead-section {padding: 135rem 32rem 258rem;}
		.lead-section::after {
			top: calc(100% - 20rem);
			left: 0;
			background-image: url(../img/lead/bg-wave-sp.svg);
			background-size: cover;
			height: 200rem;
		}
		.lead-header-ttl {
			margin: 0 auto;
			width: 330rem;
		}
		.lead-content {margin-top: 60rem;}
		.lead-content-ttl {
			font-size: 20.75rem;
			font-weight: normal;
			text-align: center;
			line-height: 1.765;
		}
		.lead-content-line {
			margin: 20rem auto;
			width: 100%;
		}
	}

	/* tab & pc */
	@media print,
	(min-width: 768px) {
		.lead-section {padding: 188rem 0 50rem;}
		.lead-section::after {
			background-image: url(../img/lead/bg-wave.svg);
			top: calc(100% - 280rem);
			height: 648rem;
		}
		.lead-header-ttl {
			margin: 0 auto;
			width: 385rem;
		}
		.lead-content {
			margin: 120rem auto 0;
			width: 692rem;
		}
		.lead-content-ttl {
			font-size: 34rem;
			font-weight: 500;
			text-align: center;
			line-height: 1.765;
		}
		.lead-content-line {
			margin: 100rem auto 50rem;
			width: 387rem;
		}
		.lead-content p {font-size: 24rem;}
	}
}

/* tour-section */
@media all {
	.tour-section {
		z-index: 90;
		/* background-color: #dee1db; */
	}
	.section-header,
	.section-img-content {position: relative;z-index: 2;}
	
	/* sp */
	@media (max-width: 767px) {
		.tour-section {padding: 345rem 0 50rem;}
		/* .tour-section::after {
			background-image: url(../img/tour/bg-wave-sp.svg);
		} */
		.tour-header-ttl {
			margin-left: 20rem;
			width: 305rem;
		}
		.tour-content {
			display: flex;
			flex-direction: column-reverse;
			margin-top: 30rem;
		}
		.tour-content-ttl {
			margin-top: 48rem;
			margin-left: 155rem;
			height: 170rem;
		}
	}

	/* tab & pc */
	@media print,
	(min-width: 768px) {
		.tour-section {padding: 456rem 0 50rem;}

		.tour-header-ttl {
			margin-left: auto;
			margin-right: 190rem;
			width: 440rem;
		}
		.tour-content {margin-top: -15rem;}
		.tour-content-ttl {height: 254rem;}
	}
}

/* shop-section */
@media all {
	.shop-section {
		z-index: 80;
		/* background-color: #f5f6f4; */
	}
	.shop-content-2 .section-text-content p {letter-spacing: .05em;}
	
	/* sp */
	@media (max-width: 767px) {
		.shop-section {padding: 365rem 0 100rem;}
		/* .shop-section::after {
			background-image: url(../img/shop/bg-wave-sp.svg);
		} */

		.shop-header-ttl {
			margin-left: auto;
			margin-right: 25rem;
			width: 212rem;
		}

		.shop-content-1,
		.shop-content-2 {
			display: flex;
			flex-direction: column-reverse;
			margin-top: 30rem;
		}
		.shop-content-ttl {
			margin-top: 58rem;
			margin-left: 55rem;
			height: 200rem;
		}
		.shop-content-2 {
			margin-top: 60rem;
		}
		.shop-content-2 .section-img-content {
			margin: 0 auto;
			width: 87.2%;
		}
		.shop-content-2 .section-text-content {
			margin-top: -35rem;
		}
	}

	/* tab & pc */
	@media print,
	(min-width: 768px) {
		.shop-section {padding: 500rem 0 60rem;}
		/* .shop-section::after {
			background-image: url(../img/shop/bg-wave.svg);
		} */

		.shop-header-ttl {
			margin-left: 290rem;
			width: 307rem;
		}

		.shop-content-1 {margin-top: -62rem;}
		.shop-content-ttl {height: 310rem;}

		.shop-content-2 {
			align-items: center;
			justify-content: center;
			margin-top: 110rem;
		}
		.shop-content-2 .section-text-content {padding-bottom: 60rem;}
		.shop-content-2 .section-text-content p {margin-top: 45rem;}
		.shop-content-2 .section-img-content {
			margin-left: 77rem;
			width: 520rem;
		}
	}
}

/* cafe-section */
@media all {
	.cafe-section {
		z-index: 70;
		/* background-color: #fff; */
	}
	
	/* sp */
	@media (max-width: 767px) {
		.cafe-section {padding: 280rem 0 0;}

		.cafe-header-ttl {
			margin-left: 36rem;
			width: 176rem;
		}

		.cafe-content {
			display: flex;
			flex-direction: column-reverse;
			margin-top: 24rem;
		}
		.cafe-content-ttl {
			margin: 58rem 45rem 0 auto;
			height: 170rem;
		}
		.cafe-section .section-text-content p {
			margin-top: 60rem;
		}
	}

	/* tab & pc */
	@media print,
	(min-width: 768px) {
		.cafe-section {padding: 625rem 0 500rem;}

		.cafe-header-ttl {
			margin-left: auto;
			margin-right: 342rem;
			width: 260rem;
		}
		
		.cafe-content {margin-top: -95rem;}
		.cafe-content-ttl {
			margin-right: 10%;
			padding-bottom: 75rem;
			height: 328rem;
		}
		

	}
}

/* info-section */
@media all {
	.info-section {
		z-index: 60;
		background-color: #f4efea;
		letter-spacing: .1em;
	}
	.info-section::before {
		content: '';
		position: absolute;
		z-index: -1;
		display: block;
		width: 100%;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	.info-dt {font-weight: 500;}
	.info-dd {font-weight: 200;}

	
	/* sp */
	@media (max-width: 767px) {
		.info-section {
			margin-top: 230rem;
			padding-top: 50rem;
		}
		.info-section::before {
			background-image: url(../img/info/bg-wave-sp.svg);
			bottom: calc(100% - 2rem);
			height: 200rem;
		}
		
		.info-header {
			display: flex;
			flex-direction: column-reverse;
			row-gap: 32rem;
		}
		.info-header-ttl {
			margin-left: 35rem;
			width: 160rem;
		}

		.info-content {
			margin-top: 32rem;
			padding: 0 35rem;
			text-align: justify;
		}
		.info-dt, .info-dd {
			font-size: 16.5rem;
			line-height: 1.625;
		}
		.info-dt {
			margin-top: 1em;
			font-weight: 500;
		}
		.info-dd {
			margin-top: .5em;
			padding-bottom: 1em;
			border-bottom: max(1rem, 1px) solid #44a0ae;
			font-weight: 100;
		}
		/* .info-dd:last-child {border: none;} */

		.goods-dt, .goods-dd {display: inline;}
		.goods-dd + .goods-dt {padding-left: .5em;}
		.goods-dd span.spOnly {
			display: inline-block;
			width: 1.25em;
		}
	}

	/* tab & pc */
	@media print,
	(min-width: 768px) {
		.info-section {padding-top: 300rem;}
		.info-section::before {
			background-image: url(../img/info/bg-wave.svg);
			bottom: calc(100% - 280rem);
			height: 648rem;
		}
		
		.info-header {
			display: flex;
			align-items: flex-start;
			justify-content: flex-start;
			column-gap: 63rem;
		}
		.info-img {width: 600rem;}
		.info-header-ttl {width: 393rem;}

		.info-content {
			display: flex;
			flex-wrap: wrap;
			align-items: stretch;
			margin-top: 67rem;
			line-height: 1.625;
		}
		.info-dt, .info-dd {
			padding: 20rem 0;
			border-bottom: max(1rem, 1px) solid #44a0ae;
			font-size: 24rem;
		}
		.info-dt {width: 255rem;}
		.info-dd {width: 945rem;}
			
		.goods-dl {
			display: flex;
			flex-wrap: wrap;
		}
		.goods-dt {flex-shrink: 0;}
		.goods-dd {
			flex-shrink: 1;
			min-width: calc(100% - 5em);
		}
	}
}

/* site-footer */
@media all {
	.site-footer {
		background-color: #f4efea;
		text-align: center;
		letter-spacing: .1em;
	}
	.site-footer a {color: #44a0ae;}

	.banner,
	.sns-item img {
		margin: 0 auto;
		display: block;
	}

	.sns {
		display: inline-flex;
		flex-direction: column;
	}

	.btn {
		display: inline-block;
		border: max(1px, 1rem) solid #44a0ae;
		border-radius: 3em;
	}
	
	.copyright {
		margin-top: 115rem;
		background-color: #fff;
		font-weight: 100;
	}
	
	/* sp */
	@media (max-width: 767px) {
		.site-footer {
			padding-top: 100rem;
		}
		.site-footer a {font-size: 16.5rem;}

		.banner {width: 330rem;}

		.sns {margin-top: 50rem;}
		.sns-item img {
			width: 31rem;
			margin-bottom: .8em;
		}
		.sns-item + .sns-item {margin-top: 30rem;}

		.ukai-btn {margin-top: 60rem;}
		.btn {
			width: 330rem;
			padding: .8em 0;
		}

		.copyright {
			width: 100%;
			font-size: 11.5rem;
			padding: 10rem 0;
		}
	}

	/* tab & pc */
	@media print,
	(min-width: 768px) {
		.site-footer {
			padding-top: 155rem;
		}
		.site-footer a {
			font-size: 24rem;
			transition: opacity .3s;
		}
		.site-footer a.banner:hover {opacity: .8;}
		.site-footer a:hover {opacity: .6;}

		.banner {width: 480rem;}

		.sns {margin-top: 70rem;}
		.sns-item img {
			width: 45rem;
			padding-bottom: 24rem;
		}
		.sns-item + .sns-item {margin-top: 55rem;}

		.ukai-btn {margin-top: 90rem;}
		.btn {
			width: 480rem;
			padding: 19rem 0;
		}

		.copyright {
			font-size: 16rem;
			padding: 12rem 0;
		}

	}
}

/* decoration */
@media all {
	.deco {
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}
	.deco img {
		position: absolute;
		z-index: 1;
		display: block;
	}
	
	/* sp */
	@media (max-width: 767px) {
		.site-main {
			position: relative;
			z-index: 10;
		}
		/* .deco {display: none;} */
		.deco {
			position: absolute;
			z-index: 3;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100%;
			overflow: hidden;
		}
		.deco1 img {
			top: 7rem;
			left: calc(50% - 420rem);
			width: 335rem;
		}
		.deco2 img {
			top: 7rem;
			right: calc(50% - 420rem);
			width: 335rem;
		}
		.deco3 img {
			bottom: 10rem;
			right: calc(50% - 300rem);
			width: 292rem;
		}
		.deco4 img {
			bottom: 0rem;
			left: calc(50% - 315rem);
			width: 309rem;
		}

		.deco:has(.deco6) {
			height: calc(100% + 345rem);
		}
		.deco6 img {
			top: 415rem;
			left: 46%;
			width: 397rem;
		}
		.deco-tour img {
			top: 975rem;
			right: 70%;
			width: 145rem;
		}
		.deco7 img {
			z-index: 85;
			bottom: 0rem;
			right: 20%;
			width: 342rem;
		}

		.deco-shop img {
			top: 810rem;
			right: -8rem;
			width: 170rem;
		}

		.deco8 img {
			top: 50rem;
			left: 90rem;
			width: 505rem;
		}
		.deco-cafe img {
			top: 610rem;
			right: 220rem;
			width: 404rem;
		}

		.deco:has(.deco9) {margin-top: -90rem;}
		.deco9 img {
			z-index: 1;
			top: 0;
			left: 165rem;
			width: 410rem;
		}
	}

	/* tab & pc */
	@media print,
	(min-width: 768px) {
		.deco1 img {
			top: 100rem;
			left: calc(50% - 960rem);
			width: 670rem;
		}
		.deco2 img {
			top: 100rem;
			right: calc(50% - 960rem);
			width: 670rem;
		}
		.deco3 img {
			top: 820rem;
			right: calc(50% - 1000rem);
			width: 566rem;
		}
		.deco4 img {
			top: 800rem;
			left: calc(50% - 1000rem);
			width: 600rem;
		}

		.deco6 img {
			top: 565rem;
			right: calc(50% - 770rem);
			width: 550rem;
		}
		.deco-tour img {
			top: 870rem;
			left: calc(50% - 700rem);
			width: 212rem;
		}
		.deco7 img {
			bottom: -580rem;
			left: calc(50% - 735rem);
			width: 475rem;
		}

		.deco-shop img {
			top: 590rem;
			right: calc(50% - 650rem);
			width: 212rem;
		}

		.deco8 img {
			top: 230rem;
			right: calc(50% - 785rem);
			width: 700rem;
		}
		.deco-cafe img {
			top: 680rem;
			left: calc(50% - 960rem);
			width: 582rem;
		}

		.deco9 img {
			top: 230rem;
			top: -100rem;
			right: calc(50% - 960rem);
			width: 800rem;
		}
	}
}




/* inview */
@media all {
	.fade_blur {
		opacity: 0;
		filter: blur(.5em);
		transition: opacity 1s, filter 1s;
	}
	.fade_blur.animated {
		opacity: 1;
		filter: blur(0);
	}
	.fadeIn {
		opacity: 0;
		transition: opacity 1s;
	}
	.fadeIn.animated {opacity: 1;}
	
	/* sp */
	@media (max-width: 767px) {}

	/* tab & pc */
	@media print,
	(min-width: 768px) {
		img.fadeIn {transition-delay: .2s;}
	}
}



/* line (biscuit) */
@media all {
	.line {
		position: absolute;
		width: 100%;
		z-index: 65;
		pointer-events: none;
	}
	.line-svg {
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;
		display: block;
	}

	.floating-biscuit {
		offset-rotate: auto;
		offset-distance: 0%;
	}

	.pc-biscuit {
		offset-path: path("M1321.21,50.46c-112,112-424,110-518,336-59.78,143.73-138,512,534,990,144,100,274,190,394,318,0,0,178,192,60,500-122.69,320.24-488.33,516.48-950,780-452,258,173,939,173,939,0,0,273,283-279,611");
	}

	.sp-biscuit {
		offset-path: path("M248.27,30c15.56,35.16,62.52,202-315.91,415.3-67.78,38.21-78.39,111.33,2.46,163.92,128.7,83.7,438.75,69.02,438.75,266.21,0,183.65-175.01,163.92-173.77,308.11,1.08,125.92,231.7,175.01,234.16,266.21,3.18,117.83-100,131.68-278.53,295.78-289.62,266.21,38.21,539.82,38.21,539.82,0,0,252.99,176.37,258.81,305.65,6.16,136.8-7.87,306.72-345.62,462.16,0,0-100.06,46.28-83.26,138.03,41.75,228.05,354.94,294.55,351.25,571.86-.97,73.38,7.31,252.08-283.62,426.06");
	}

	.floating-biscuit image {
		animation: rotating 10s linear infinite;
		transform-box: fill-box;
		transform-origin: center;
	}

	@keyframes rotating {
		0% {transform: rotate(0deg);}
		100% {transform: rotate(360deg);}
	}
	
	/* sp */
	@media (max-width: 767px) {
		.line {
			height: 4320rem;
			background: center -85rem / cover no-repeat url(../img/line/bg-sp.svg);
		}
		.line-svg {
			margin-top: -40rem;
			height: 4570rem;
		}
	}

	/* tab & pc */
	@media print,
	(min-width: 768px) {
		.line {
			overflow: hidden;
			height: 5000rem;
			background: center -190rem / 1920rem auto no-repeat url(../img/line/bg-pc.svg);
		}
		.line-svg {
			margin-top: 170rem;
			margin-left: calc(50% - 960rem);
			width: 1920rem;
		}
	}
}



/* template */
@media all {
	
	/* sp */
	@media (max-width: 767px) {}

	/* tab & pc */
	@media print,
	(min-width: 768px) {}
}