@charset "utf-8";

/** Override **/

.pj-page { min-width:320px; }
.pj-contents { margin-top:0; }

:where(.sc-contents) {
	box-sizing:border-box;
	::before,
	::after,
	* { box-sizing:inherit; }
	
	&:where(.ios *) { font-feature-settings:"palt"; }
	
	:where(picture:not(:only-child) > img) { vertical-align:top; }
	:where(picture:only-child) {
		display:block;
		:where(& > img) {
			margin-inline:auto;
			display:block;
		}
	}
	
	em { font-weight:inherit; }
	a {
		text-decoration:none;
		color:currentColor;
		&:hover { color:currentColor; }
	}
	
	.bs-list--custom > li > :first-child {
		padding-top:0;
		padding-right:0.2em;
		width:0;
	}
	.bs-list--custom:where(ol) > li > :first-child { text-align:right; }
}

@media ( max-width:800px ) {}
@media ( max-width:667px ) {}

/** FontSizeClamp **/

:where(.sc-contents--fs-clamp) {
	--fs-clamp-min:16;
	--fs-clamp-max:18;
	--fs-clamp-base:10;
	--fs-clamp-view-min:801;
	--fs-clamp-view-max:1240;
}
:where(.sc-contents--fs-clamp, .sc-contents--fs-clamp *) {
	--fs-clamp-slope:calc( ( var( --fs-clamp-max ) - var( --fs-clamp-min ) ) / ( var( --fs-clamp-view-max ) - var( --fs-clamp-view-min ) ) );
	--fs-clamp-value:clamp(
		var( --fs-clamp-min ) / var( --fs-clamp-base ) * 1rem,
		( var( --fs-clamp-max ) - var( --fs-clamp-view-max ) * var( --fs-clamp-slope ) ) / var( --fs-clamp-base ) * 1rem + var( --fs-clamp-slope ) * 100dvi,
		var( --fs-clamp-max ) / var( --fs-clamp-base ) * 1rem
	);
}

@media ( max-width:800px ) {
	:where(.sc-contents--fs-clamp) {
		--fs-clamp-min:15;
		--fs-clamp-max:17;
		--fs-clamp-view-min:668;
		--fs-clamp-view-max:800;
	}
}
@media ( max-width:667px ) {
	:where(.sc-contents--fs-clamp) {
		--fs-clamp-min:14;
		--fs-clamp-max:16;
		--fs-clamp-view-min:320;
		--fs-clamp-view-max:667;
	}
}

/** sc-media **/

.sc-media {
	--media-gap:1em;
	--media-aside-width:auto;
	
	position:relative;
	display:flex;
	gap:var( --media-gap );
}
:where(.sc-media__body, .sc-media__aside) {
	& > :first-child { margin-top:0; }
	& > :last-child { margin-bottom:0; }
}
.sc-media__body {
	display:block;
	flex:1;
}
.sc-media__aside {
	display:block;
	flex:none;
	width:var( --media-aside-width );
	
	& > img:where(:only-child) { display:block; }
}

@media ( min-width:801px ) {
	.sc-media\@Pc--flip { flex-direction:row-reverse; }
	
	.sc-media\@Pc--align-start { align-items:start; }
	.sc-media\@Pc--align-end { align-items:end; }
	.sc-media\@Pc--align-center { align-items:center; }
}
@media ( max-width:800px ) {
	.sc-media:where(:not(.sc-media--hold)) { flex-direction:column; }
	.sc-media__body:where(:not(.sc-media--hold) > *) { flex:none; }
	.sc-media__aside:where(:not(.sc-media--hold) > *) {
		margin-inline:auto;
		width:auto;
	}
}
@media ( max-width:667px ) {}

/** sc-contents **/

.sc-contents {
	margin:auto;
	padding:0;
	position:relative;
	font-family:"Noto Sans JP", sans-serif;
	color:#222;
}
.sc-contents__header { position:relative; }
.sc-contents__body   { position:relative; }
.sc-contents__footer {
	padding-block:40px;
	background-color:#FFF;
	position:relative;
}

.sc-contents__block {
	position:relative;
	display:flow-root;
}
.sc-contents__block--a,
.sc-contents__block--b,
.sc-contents__block--c {
	--padding-block:4em;
	
	padding-block:var( --padding-block );
}
.sc-contents__block--a {
	background:#3194CD url( "../img/index/bg_block_a.jpg" ) center top repeat;
	
	&:where(:has(+ .sc-contents__block--b)) {
		--block-slanted-size:6.25vw;
		
		padding-bottom:calc( var( --block-slanted-size ) + var( --padding-block ) );
	}
}
.sc-contents__block--b {
	--block-slanted-size:6.25vw;
	
	margin-block:calc( var( --block-slanted-size ) * -1 );
	padding-block:calc( var( --block-slanted-size ) + var( --padding-block ) );
	background:#DAEFFB url( "../img/index/bg_block_b.jpg" ) center top repeat;
	clip-path:polygon( 0 var( --block-slanted-size ), 100% 0, 100% calc( 100% - var( --block-slanted-size ) ), 0 100% );
	z-index:1;
}
.sc-contents__block--c {
	background:#FFF linear-gradient( to bottom, #E1F5FF, transparent, #E1F5FF ) center top no-repeat;
	
	&:where(.sc-contents__block--b + &) {
		--block-slanted-size:6.25vw;
		
		padding-top:calc( var( --block-slanted-size ) + var( --padding-block ) );
	}
}
.sc-contents__inner {
	margin-inline:auto;
	padding-inline:20px;
	display:block;
	max-width:1240px;
}

@media ( min-width:801px ) {
	.sc-contents__header {
		margin-bottom:calc( 100 / 1920 * -100% );
		z-index:1;
	}
	.sc-contents__block--a {
		--padding-block:2em;
		
		padding-top:calc( 100 / 1920 * 100% + var( --padding-block ) );
	}
}
@media ( max-width:800px ) {
	.sc-contents__block--a,
	.sc-contents__block--b,
	.sc-contents__block--c { --padding-block:3em; }
	.sc-contents__inner { padding-inline:10px; }
}
@media ( max-width:667px ) {}

/** sc-visual **/

.sc-visual {
	position:relative;
	display:block;
	overflow:hidden;
}
.sc-visual__title {
	margin:0 auto;
	position:relative;
	display:block;
	
	img {
		display:block;
		width:100%;
	}
}

@media ( max-width:800px ) {}
@media ( max-width:667px ) {}

/** sc-about **/

.sc-about {
	padding-inline:clamp( 7.5%, 125px - 5vw, 12.5% );
	
	.sc-media {
		--media-gap:calc( 40 / 1200 * 100% );
		--media-aside-width:calc( 520 / 1200 * 100% );
	}
}
.sc-about__title {
	margin-block:0;
	display:block;
}

@media ( max-width:800px ) {
	.sc-about {
		margin-inline:auto;
		padding-inline:clamp( 7.5%, 40px + 5vw, 12.5% );
		max-width:540px;
		
		.sc-media {
			--media-gap:2.5em;
			--media-aside-width:auto;
		}
	}
	.sc-about__title { margin-inline:auto; }
}
@media ( max-width:667px ) {}

/** sc-features **/

.sc-features {}
.sc-features__title {
	margin:0 auto 2em;
	display:block;
	width:calc( 620 / 1200 * 100% );
	max-width:620px;
}
.sc-features__slider {
	padding:0 30px 60px;
	overflow:hidden;
	
	&:where(swiper-container) {
		--swiper-theme-color:#5EA6D3;
		--swiper-navigation-size:30px;
		--swiper-navigation-sides-offset:-25px;
		--swiper-pagination-bottom:-50px;
		--swiper-pagination-bullet-border-radius:50%;
		--swiper-pagination-bullet-width:15px;
		--swiper-pagination-bullet-height:15px;
		--swiper-pagination-bullet-inactive-color:#FFF;
		--swiper-pagination-bullet-inactive-opacity:1;
		
		&::part(container), &::part(wrapper),
		&::part(button-prev), &::part(button-next),
		&::part(pagination), &::part(bullet-active), &::part(bullet) { box-sizing:inherit; }
		
		&::part(container) { overflow:visible; }
		&::part(wrapper) { align-items:stretch; }
		&::part(pagination) {
			display:flex;
			justify-content:center;
		}
		&::part(bullet-active),
		&::part(bullet) {
			display:block;
			transition-delay:0.05s;
		}
		
		:where(swiper-slide),
		:where(swiper-slide > *) { box-sizing:border-box; }
		:where(swiper-slide) { height:auto; }
		:where(swiper-slide > *) { height:100%; }
	}
}

@media ( max-width:800px ) {
	.sc-features {
		margin-inline:auto;
		max-width:640px;
	}
	.sc-features__title {
		width:calc( 540 / 760 * 100% );
		max-width:420px;
	}
}
@media ( max-width:667px ) {}

/** sc-feature **/

.sc-feature {
	--corner-cut-size:calc( 40 / 600 * 100% );
	
	padding:1.5em var( --corner-cut-size );
	background-color:#FFF;
	display:block;
	clip-path:polygon(
		0 var( --corner-cut-size ), var( --corner-cut-size ) 0, 100% 0,
		100% calc( 100% - var( --corner-cut-size ) ), calc( 100% - var( --corner-cut-size ) ) 100%, 0 100%
	);
}
.sc-feature__title {
	margin:0 auto 0.5em;
	display:block;
	max-width:360px;
	color:#319EDC;
}
.sc-feature__text {
	--fs-clamp-min:16;
	--fs-clamp-max:20;
	
	margin-block:0;
	font-size:var( --fs-clamp-value );
	color:#493110;
}

@media ( max-width:800px ) {
	.sc-feature__text {
		--fs-clamp-min:18;
		--fs-clamp-max:20;
	}
}
@media ( max-width:667px ) {
	.sc-feature__text {
		--fs-clamp-min:16;
		--fs-clamp-max:18;
	}
}

/** sc-basicRecipes **/

.sc-basicRecipes {}
.sc-basicRecipes__title {
	margin:0 auto 1em;
	display:block;
	width:calc( 780 / 1200 * 100% );
}
.sc-basicRecipes__text {
	--fs-clamp-min:18;
	--fs-clamp-max:24;
	
	margin:0 auto 1.5em;
	padding-inline:calc( 30 / 1200 * 100% );
	display:block;
	text-align:center;
	font-size:var( --fs-clamp-value );
	color:#493110;
}
.sc-basicRecipes__list {
	margin:0 auto;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:3em calc( 40 / 1200 * 100% );
	
	&:where(ul) {
		padding-left:0;
		list-style:none;
	}
}

@media ( min-width:801px ) {
	.sc-basicRecipes__list {
		& > * { width:calc( 580 / 1200 * 100% ); }
		& > :first-child { width:calc( 700 / 1200 * 100% ); }
	}
}
@media ( max-width:800px ) {
	.sc-basicRecipes {
		margin-inline:auto;
		max-width:640px;
	}
	.sc-basicRecipes__title {
		width:calc( 540 / 760 * 100% );
		max-width:420px;
	}
	.sc-basicRecipes__text {
		--fs-clamp-min:20;
		--fs-clamp-max:22;
		
		padding-inline:0;
		text-align:left;
	}
}
@media ( max-width:667px ) {
	.sc-basicRecipes__text {
		--fs-clamp-min:16;
		--fs-clamp-max:20;
	}
}

/** sc-basicRecipe **/

.sc-basicRecipe {
	padding-top:calc( 20 / 580 * 100% );
	position:relative;
	display:block;
}
.sc-basicRecipe__type {
	position:absolute;
	top:0;
	left:calc( 20 / 580 * -100% );
	z-index:1;
	display:block;
	width:calc( 320 / 580 * 100% );
	pointer-events:none;
}
.sc-basicRecipe__image {
	padding:0 10px 10px 0;
	position:relative;
	z-index:0;
	display:block;
	
	&::before {
		background-color:#BEDEEE;
		position:absolute;
		right:0;
		bottom:0;
		z-index:-1;
		width:calc( 100% - 10px );
		aspect-ratio:700 / 460;
		content:"";
	}
	&::before,
	& > * {
		border-radius:20px;
		display:block;
		overflow:hidden;
	}
}
.sc-basicRecipe__videoButton {
	margin:auto;
	position:absolute;
	top:0;
	left:0;
	display:block;
	width:calc( 100% - 10px );
	height:calc( 100% - 10px );
	color:#FFF;
	cursor:pointer;
	
	&:where(:not(.js-modalVideo > *)) { display:none; }
	
	&::before,
	&::after {
		margin:auto;
		position:absolute;
		inset:0;
		display:block;
		content:"";
	}
	&::before {
		border:2px solid currentColor;
		border-radius:50%;
		width:calc( 80 / 580 * 100% );
		aspect-ratio:1;
	}
	&::after {
		margin:auto;
		background-color:currentColor;
		clip-path:polygon( 0 0, 100% 50%, 0 100% );
		position:absolute;
		inset:0;
		right:calc( 8 / 580 * -100% );
		width:calc( 32 / 580 * 100% );
		aspect-ratio:1;
	}
}
.sc-basicRecipe__body {}
.sc-basicRecipe__name {
	--fs-clamp-min:24;
	--fs-clamp-max:28;
	
	margin:0.5em auto;
	text-align:center;
	font-weight:bold;
	font-size:var( --fs-clamp-value );
	color:#493110;
}
.sc-basicRecipe__link {
	--fs-clamp-min:20;
	--fs-clamp-max:22;
	
	margin-inline:auto;
	padding:0.25em 1.5em;
	border-radius:10em;
	background-color:#CE2865;
	position:relative;
	display:grid;
	grid-template:"text icon" / auto 1.5em;
	align-items:center;
	column-gap:0.5em;
	width:fit-content;
	line-height:1.5;
	font-weight:bold;
	font-size:var( --fs-clamp-value );
	color:#FFF;
	
	&::before,
	&::after {
		margin:auto;
		background-color:currentColor;
		position:absolute;
		inset:0 0 0 auto;
		display:block;
		grid-area:icon;
		content:"";
	}
	&::before {
		top:-0.25em;
		width:2px;
		height:0.5em;
		transform-origin:right bottom;
		rotate:-45deg;
	}
	&::after {
		top:0.25em;
		width:100%;
		height:2px;
	}
	
	@media ( any-hover:hover ) {
		&:hover { color:#FFF; }
	}
}

@media ( max-width:800px ) {
	.sc-basicRecipe__name {
		--fs-clamp-min:22;
		--fs-clamp-max:24;
	}
	.sc-basicRecipe__link {
		--fs-clamp-min:18;
		--fs-clamp-max:20;
	}
}
@media ( max-width:667px ) {
	.sc-basicRecipe__name {
		--fs-clamp-min:18;
		--fs-clamp-max:22;
	}
	.sc-basicRecipe__link {
		--fs-clamp-min:16;
		--fs-clamp-max:18;
	}
}

/** modal-video **/

.modal-video-close-btn {
	padding:0;
	border:2px solid currentColor;
	border-radius:50%;
	right:-50px;
	width:40px;
	height:40px;
	color:#FFF;
	
	&::before,
	&::after {
		margin:auto;
		background-color:currentColor;
		inset:0;
		width:60%;
	}
}

@media ( orientation:portrait ) {
	.modal-video-body { padding-inline:0; }
	.modal-video-close-btn {
		top:-50px;
		right:10px;
	}
}