@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

@media (min-width: 601px) {
	:root{
		--hz:100vw / 1920;
	}
}
@media (max-width: 600px) {
	:root{
		--hz:100vw / 540;
	}
}

.container section.hero{ padding-top:0; }

.hero .rec_text{
	font-family:"Oswald", "Noto Sans JP", sans-serif; font-weight:700; color:#FFFFFF; position:absolute;
	transform:translateY(100%); opacity:0;
	transition: all 300ms 0s ease;
}
.hero .rec_text strong{ line-height:1; color:#ff4c00; font-weight:700; }
.hero .rec_text .big{ line-height:1; font-weight:700; }
.hero .rec_text .t1{ line-height:1; font-weight:700; }
.hero .rec_text .t2{ line-height:1; font-weight:700; }
.hero .rec_text .t3{ line-height:1; font-weight:700; }
.hero .rec_text .t3 .big{ font-weight:500; }

.hero.wao .rec_text{ transform:translateY(0%); opacity:1;}

@media (min-width: 601px) {
	.hero .rec_text{ left:calc(var(--hz) * 60); bottom:calc(var(--hz) * 50); text-shadow:calc(var(--hz) * 2) calc(var(--hz) * 2) calc(var(--hz) * 10) rgba(10,2,4,0.29); }
	.hero .rec_text strong{ font-size:calc(var(--hz) * 67); }
	.hero .rec_text .big{ font-size:calc(var(--hz) * 94); }
	.hero .rec_text .t1{ font-size:calc(var(--hz) * 80); margin-bottom:calc(var(--hz) * 50); }
	.hero .rec_text .t2{ font-size:calc(var(--hz) * 47); margin-bottom:calc(var(--hz) * 60); }
	.hero .rec_text .t3{ font-size:calc(var(--hz) * 47); }
}
@media (max-width: 600px) {
	.hero .rec_text{ left:calc(var(--hz) * 30); top:calc(var(--hz) * 30); text-shadow:calc(var(--hz) * 1) calc(var(--hz) * 1) calc(var(--hz) * 13) rgba(10,2,4,0.64); }
	.hero .rec_text strong{ font-size:calc(var(--hz) * 39); }
	.hero .rec_text .big{ font-size:calc(var(--hz) * 55); }
	.hero .rec_text .t1{ font-size:calc(var(--hz) * 47); margin-bottom:calc(var(--hz) * 9); }
	.hero .rec_text .t2{ font-size:calc(var(--hz) * 27); margin-bottom:calc(var(--hz) * 24); }
	.hero .rec_text .t3{ font-size:calc(var(--hz) * 27); }
}
.hero .rec_pickup{
	position:absolute; right:0;
	transform:translateY(100%); opacity:0;
	transition: all 300ms 600ms ease;
}
.hero .rec_pickup a{ display:flex; align-items:flex-start; background:#f7f7f7; position:relative; transition: all 300ms 0s ease; }
.hero .rec_pickup a:hover{ opacity:0.8; }
.hero .rec_pickup a::before,
.hero .rec_pickup a::after{ display:block; content:""; background:#ff4c00; transform-origin:right top; position:absolute; }
.hero .rec_pickup a::after{ transform:rotate(45deg); }
.hero .rec_pickup hgroup{ margin-bottom:0; }
.hero .rec_pickup .ttl p{ line-height:1; color:#158cde; font-weight:700; }
.hero .rec_pickup .ttl h3{ line-height:1; font-weight:700; }
.hero .rec_pickup .info{ display:flex; flex-flow:row-reverse; }
.hero .rec_pickup .info .name{ font-weight:700; }
.hero .rec_pickup .info .cat{ display:flex; flex-flow:row-reverse; }
.hero .rec_pickup .info .cat > *{ display:flex; justify-content:center; align-items:center; line-height:1; }
.hero .rec_pickup .info .type1{ background:#ff4c00; color:#FFFFFF; border:1px solid #ff4c00; }
.hero .rec_pickup .info .type2{ border:1px solid #ff4c00; color:#ff4c00; }
.hero .rec_pickup .prece{ font-family:"Oswald", "Noto Sans JP", sans-serif; line-height:1; font-weight:500; }
.hero .rec_pickup .prece strong{ line-height:1; font-weight:500; color:#ff4c00; }

.hero.wao .rec_pickup{ transform:translateY(0%); opacity:1;}
@media (min-width: 601px) {
	.hero .rec_pickup{ bottom:calc(var(--hz) * 54); }
	.hero .rec_pickup a{
		gap:calc(var(--hz) * 40);
		width:calc(var(--hz) * 810);
		border-radius:calc(var(--hz) * 20) 0 0 calc(var(--hz) * 20);
		padding:calc(var(--hz) * 35) calc(var(--hz) * 50);
	}
	.hero .rec_pickup a::before,
	.hero .rec_pickup a::after{ height:1px; width:calc(var(--hz) * 64);right:calc(var(--hz) * 26); bottom:calc(var(--hz) * 18); }
	.hero .rec_pickup a::after{ width:calc(var(--hz) * 14); }
	.hero .rec_pickup figure{
		max-width:calc(var(--hz) * 289);
		box-shadow:calc(var(--hz) * 2) calc(var(--hz) * 2) calc(var(--hz) * 10) rgba(10,2,4,0.29);
		margin-top:calc(var(--hz) * -60);
	}
	.hero .rec_pickup .ttl p{ font-size:calc(var(--hz) * 18); margin-bottom:calc(var(--hz) * 15); }
	.hero .rec_pickup .ttl h3{ font-size:calc(var(--hz) * 30); margin-bottom:calc(var(--hz) * 15); }
	.hero .rec_pickup .info{ gap:calc(var(--hz) * 10); margin-bottom:calc(var(--hz) * 15); }
	.hero .rec_pickup .info .name{ font-size:calc(var(--hz) * 22); line-height:calc(var(--hz) * 25); }
	.hero .rec_pickup .info .cat{ gap:calc(var(--hz) * 10); }
	.hero .rec_pickup .info .cat > *{ height:calc(var(--hz) * 25); padding:0 0.75em 2px; font-size:calc(var(--hz) * 14); }
	.hero .rec_pickup .info .type1{ border-radius:calc(var(--hz) * 25 / 2); }
	.hero .rec_pickup .prece{ font-size:calc(var(--hz) * 16); }
	.hero .rec_pickup .prece strong{ font-size:calc(var(--hz) * 28); }
}
@media (max-width: 600px) {
	.hero .rec_pickup{ display:none; }
	/*
	.hero .rec_pickup{ bottom:calc(var(--hz) * 22); }
	.hero .rec_pickup a{
		gap:calc(var(--hz) * 20);
		width:calc(var(--hz) * 423);
		border-radius:calc(var(--hz) * 20) 0 0 calc(var(--hz) * 20);
		padding:calc(var(--hz) * 20);
	}
	.hero .rec_pickup a::before,
	.hero .rec_pickup a::after{ height:1px; width:calc(var(--hz) * 40);right:calc(var(--hz) * 26); bottom:calc(var(--hz) * 18); }
	.hero .rec_pickup a::after{ width:calc(var(--hz) * 9); }
	.hero .rec_pickup figure{
		max-width:calc(var(--hz) * 167);
		box-shadow:calc(var(--hz) * 2) calc(var(--hz) * 2) calc(var(--hz) * 10) rgba(10,2,4,0.29);
	}
	.hero .rec_pickup .ttl p{ font-size:calc(var(--hz) * 14); margin-bottom:calc(var(--hz) * 10); }
	.hero .rec_pickup .ttl h3{ font-size:calc(var(--hz) * 22); margin-bottom:calc(var(--hz) * 19); }
	.hero .rec_pickup .info{ flex-flow:column-reverse; align-items:flex-start; gap:calc(var(--hz) * 5); margin-bottom:calc(var(--hz) * 20); }
	.hero .rec_pickup .info .name{ font-size:calc(var(--hz) * 24); line-height:calc(var(--hz) * 26); }
	.hero .rec_pickup .info .cat{ gap:calc(var(--hz) * 10); margin-bottom:calc(var(--hz) * 5); }
	.hero .rec_pickup .info .cat > *{ height:calc(var(--hz) * 24); padding:0 0.75em 1px; font-size:calc(var(--hz) * 14); }
	.hero .rec_pickup .info .type1{ border-radius:calc(var(--hz) * 24 / 2); }
	.hero .rec_pickup .prece{ font-size:calc(var(--hz) * 12); }
	.hero .rec_pickup .prece strong{ font-size:calc(var(--hz) * 24); }
	*/
}

.sec-recommend{ background:#e7f3fc; }
.sec-recommend .recommend_row{
	display:grid; grid-template-columns:1fr 1fr 1fr; gap:35px;
	opacity:0;
	-webkit-transform:translate3d(0, 10%, 0);
	transform:translate3d(0, 10%, 0)
}
.sec-recommend .recommend_row > *{
	display:block;
	padding:32px;
	background:#FFFFFF;
	border-radius:16px;
}
.sec-recommend .recommend_row a > *{ transition: all 300ms 0s ease; }
.sec-recommend .recommend_row .image{ overflow:hidden; }
.sec-recommend .recommend_row .image img{ transition: all 300ms 0s ease; }
.sec-recommend .recommend_row hgroup{
	display:flex; justify-content:space-between; align-items:center;
	width:100%;
	border-bottom:1px solid #b0b0b0;
	padding:15px 0 10px; margin-bottom:10px;
}
.sec-recommend .recommend_row .name{ font-size:16px; line-height:21px; font-weight:700; }
.sec-recommend .recommend_row .cat{ display:flex; gap:8px; }
.sec-recommend .recommend_row .cat > *{
	display:flex; justify-content:center; align-items:center;
	font-size:11px; line-height:1;
	height:21px;
	padding:0 0.75em 2px;
}
.sec-recommend .recommend_row .type1{ border-radius:calc(21px / 2); background:#ff4c00; color:#FFFFFF; }
.sec-recommend .recommend_row .type2{ color:#ff4c00; border:1px solid #ff4c00; }
.sec-recommend .recommend_row .info{ font-size:14px; line-height:1.2; margin-bottom:-0.5em; }
.sec-recommend .recommend_row a:hover .image img{ transform:scale(1.2); }
.sec-recommend .recommend_row a:hover > *{ opacity:0.6; }

.sec-recommend .recommend_row.wao{
	opacity:1;
	-webkit-transform:translate3d(0, 0, 0);
	transform:translate3d(0, 0, 0);
	-webkit-transition:all .5s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition:all .5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

@media (min-width: 601px) {
	.sec-recommend .recommend_row{ min-width:auto !important; }
	.sec-recommend .recommend_row .info{ display:table; }
	.sec-recommend .recommend_row .info dl{ display:table-row; }
	.sec-recommend .recommend_row .info dl > *{ display:table-cell; padding:0.5em 0; }
	.sec-recommend .recommend_row .info dt{ padding-right:2em; }
}
@media (max-width: 600px) {
	.sec-recommend{ position:relative; }
	.sec-recommend::before,
	.sec-recommend::after{
		display:block; content:""; position:absolute; top:0; z-index:2; height:100%; width:24px;
		background:linear-gradient(to left,rgba(231,243,252,1) 0%, rgba(231,243,252,0) 100%);
	}
	.sec-recommend::before{ left:0; transform:scaleX(-1); }
	.sec-recommend::after{ right:0; }
	.sec-recommend .wrap{ overflow-x:auto; padding:0; position:relative; z-index:1; }
	.sec-recommend .recommend_row{ display:flex; gap:14px; padding:0 24px; }
	.sec-recommend .recommend_row > *{ box-sizing:border-box; width:70vw; padding:20px; border-radius:20px; }
	.sec-recommend .recommend_row hgroup{ /*flex-flow:column-reverse;*/ padding:10px 0 6px; margin-bottom:10px; }
	.sec-recommend .recommend_row .name{ font-size:14px; line-height:16px; }
	.sec-recommend .recommend_row .cat{ gap:8px; /*margin-bottom:10px;*/ }
	.sec-recommend .recommend_row .cat > *{ font-size:10px; height:18px; padding:0 0.75em 2px; }
	.sec-recommend .recommend_row .type1{ border-radius:calc(20px / 2); }
	.sec-recommend .recommend_row .info{ font-size:12px; }
	.sec-recommend .recommend_row .info dl{ padding-top:10px; }
	.sec-recommend .recommend_row .info dd{ padding-top:5px; }
}

.sec---bnr{ text-align:center; padding-bottom:0; }
.sec---bnr img{ max-width:100%; width:auto; -webkit-transform:translate3d(0, 50%, 0); transform:translate3d(0, 50%, 0); opacity:0; }
.sec---bnr .wao img{ -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); opacity:1; -webkit-transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1); transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1); transition-delay:0s; -webkit-transition-delay:0.4s; transition-delay:0.4s; }

.sec---news{ padding-bottom:0px !important; }
.sec---news .news_list{ opacity:0; }
.sec---news .news_list.wao{ -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); opacity:1; -webkit-transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1); transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1); transition-delay:0s; -webkit-transition-delay:0.4s; transition-delay:0.4s; }
.sec---news .news_list a{ display:block; color:#178dde; font-weight:bold; text-decoration:underline; -webkit-transform:translate3d(0, 50%, 0); transform:translate3d(0, 50%, 0); }
.sec---news .news_list>*:not(:last-child){ margin-bottom:1em; }
@media (min-width: 601px) {
	.sec---news{ max-width:950px; margin:0 auto; }
	.sec---news hgroup{ margin-bottom:60px !important; }
	.sec---news .wrap{ max-width:none; }
	.sec---news .news_list{ font-size:24px; line-height:1.6; }
	.sec---news .news_list span{ font-size:16px; line-height:1.6; }
}
@media (max-width: 600px) {
	.sec---news hgroup{ margin-bottom:30px !important; }
	.sec---news .news_list{ font-size:16px; line-height:1.6; }
	.sec---news .news_list span{ font-size:12px; line-height:1.6; }
}

.footer a,
.footer span{ color:#FFFFFF; }
.footer .r{ display:flex; }

@media (min-width: 1024px) {
	.navigation_v2{ display:none; }
	.footer{ padding:40px 0 20px; }
	.footer .inner{ display:flex; justify-content:space-between; max-width:1300px; margin:0 auto 60px; }
	.footer p{ text-align:left; margin:0; }
	.footer .l p{ font-size:19px; line-height:34px; }
	.footer .r{ gap:70px; }
	.footer .r a,
	.footer .r span{ font-size:16px; line-height:1.2; text-align:left; margin-bottom:0; }
	.footer li{ margin-top:16px; }
	.footer .copy{ font-size:13px; text-align:center; }
	
}
@media (max-width: 1023px) {
	.container .header{ height:88px; }
	nav{ z-index:101; }
	nav span{ background:#ff4b00; }
	.navigation_v2{
		position:fixed; right:0; top:0; z-index:100; max-width:350px; width:100%;
		background:#FFFFFF; border-radius:0 0 0 30px; padding:70px 50px 50px; border-left:3px solid #ff4b00; border-bottom:3px solid #ff4b00;
		font-size:24px; line-height:1.2;
		transform:translateX(100%); transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	.lock .navigation_v2{ transform:translateX(0%); }
	.navigation_v2 ul li{ margin-top:30px; }
	.navigation_v2 ul li span,
	.navigation_v2 ul li a{ display:block; }
	.navigation_v2 ul ul li>*{ margin-left:1em; padding-left:20px; position:relative; }
	.navigation_v2 ul ul li>*::before{ display:block; content:""; background:#ff4b00; width:15px; height:3px; position:absolute; left:0; top:calc((100% - 3px) / 2); }
	.footer p{ margin:0; }
	.footer .l{ margin-bottom:60px; }
	.footer .l p{ font-size:16px; line-height:27px; }
	.footer .r{ padding:0 20px; gap:20px; justify-content:space-around; }
	.footer .r a,
	.footer .r span{ font-size:15px; line-height:1.2; text-align:left; }
	.footer li{ margin-top:16px; }
	.footer .copy{ font-size:12px; text-align:center; }
}
/* end */