@charset "UTF-8";

*,
:after,
:before {
	box-sizing: border-box;
	border-style: solid;
	border-width: 0;
	text-decoration: none;
	padding: 0;
	margin: 0;
}
html {
	font-family: 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', '游ゴシック', yugothic, 'メイリオ', 'Meiryo', Verdana, 'Droid Sans', sans-serif;
	color: #333333;
}
main {
	overflow: hidden;
}
img {
	display: block;
	width: 100%;
	height: auto;
}
li {
	list-style: none;
}
@media screen and (min-width: 769px) {
	a:hover {
		opacity: 0.8;
		transition: 0.3s;
	}
}

@media screen and (max-width: 768px) {
	.sp_none {
		display: none;
	}
}
@media screen and (min-width: 769px) {
	.pc_none {
		display: none;
	}
}

/* header */
.header_benriokazu {
	position: fixed;
	background: #FFFFFF;
	width: 100%;
	z-index: 1;
}
.header_wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 16px;
}
@media screen and (min-width: 769px) and (max-width: 1029px) {
	.header_wrap {
		padding: 13px 2.778vw 12px;
	}
}
@media screen and (min-width: 1030px) {
	.header_wrap {
		padding: 13px 40px 12px;
	}
}
.header_logo {
	display: flex;
	align-items: center;
}
.header_logo > .logo {
	width: 38px;
	height: 38px;
}
@media screen and (max-width: 768px) {
	.header_benriokazu.is-fixed .header_logo > .logo {
		width: 30px;
		height: 30px;
	}
}
@media screen and (min-width: 769px) {
	.header_logo > .logo {
		width: 55px;
		height: 55px;
	}
}
.header_logo > .title {
	width: 155px;
	height: 33px;
	margin-left: 11px;
}
@media screen and (max-width: 768px) {
	.header_benriokazu.is-fixed .header_logo > .title {
		width: 125px;
		height: 27px;
	}
}
@media screen and (min-width: 769px) and (max-width: 1029px) {
	.header_logo > .title {
		margin-left: 1.528vw;
	}
}
@media screen and (min-width: 1030px) {
	.header_logo > .title {
		width: 222px;
		height: 47px;
		margin-left: 22px;
	}
}
.header_nav {
	display: flex;
	align-items: center;
}
.nav_wrap {
	display: flex;
}
@media screen and (max-width: 768px) {
	.nav_wrap {
		position: absolute;
		background: #FFFFFF;
		border-radius: 12px;
		bottom: -50px;
		left: 50%;
		transform: translateX(-50%);
		padding: 12px 0;
	}
}
@media screen and (max-width: 768px) {
	.header_benriokazu.is-fixed .nav_wrap {
		display: none;
	}
}
@media screen and (max-width: 768px) {
	.header_wrap.is-open .nav_wrap {
		display: block;
		width: 100%;
		background: #FFFFFF;
		border-radius: 0;
		top: 50px;
		bottom: initial;
		padding: 0;
	}
}
.nav_list {
	position: relative;
	padding: 0 20px;
}
@media screen and (max-width: 768px) {
	.header_wrap.is-open .nav_list {
		border-bottom: 1px solid #EDEDED;
	}
}
@media screen and (max-width: 768px) {
	.header_wrap.is-open .nav_list:first-of-type {
		border-top: 1px solid #EDEDED;
	}
}
.nav_list + .nav_list::before {
	content: "";
	position: absolute;
	background: #FF0000;
	top: 50%;
	left: 0;
	width: 1px;
	height: 16px;
	transform: translateY(-50%);
}
@media screen and (min-width: 769px) {
	.nav_list + .nav_list::before {
		width: 2px;
		height: 24px;
	}
}
@media screen and (max-width: 768px) {
	.header_wrap.is-open .nav_list a {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 16px 0;
	}
}
@media screen and (max-width: 768px) {
	.header_wrap.is-open .nav_list + .nav_list::before {
		display: none;
	}
}
.nav_list img {
	width: auto;
	height: 13px;
}
@media screen and (min-width: 769px) and (max-width: 1029px) {
	.nav_list img {
		height: 14px;
	}
}
@media screen and (min-width: 1030px) {
	.nav_list img {
		height: 18px;
	}
}
@media screen and (max-width: 768px) {
	.header_wrap.is-open .nav_list img {
		height: 18px;
	}
}
.header_nav > .sns {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
}
@media screen and (min-width: 769px) and (max-width: 1029px) {
	.header_nav > .sns {
		margin-left: 2.361vw;
	}
}
@media screen and (min-width: 1030px) {
	.header_nav > .sns {
		margin-left: 34px;
	}
}
@media screen and (max-width: 1029px) {
	.header_nav > .sns > a {
		width: 28px;
	}
}
.nav_trigger {
	display: none;
}
@media screen and (max-width: 768px) {
	.header_benriokazu.is-fixed .nav_trigger {
		display: block;
		position: relative;
    width: 20px;
    height: 22px;
    margin-left: 28px;
	}
}
@media screen and (max-width: 768px) {
	.nav_trigger > span {
		position: absolute;
		background: url(../images/nav_border.svg)no-repeat center / contain;
		width: 100%;
		height: 3px;
		border-radius: 3px;
		transition: 0.3s;
	}
}
@media screen and (max-width: 768px) {
	.header_wrap.is-open .nav_trigger > span:nth-last-of-type(1) {
		top: 50%;
		transform: translateY(-50%) rotate(45deg);
	}
}
@media screen and (max-width: 768px) {
	.nav_trigger > span:nth-last-of-type(2) {
		top: 50%;
		transform: translateY(-50%);
	}
	.header_wrap.is-open .nav_trigger > span:nth-last-of-type(2) {
		display: none;
	}
}
@media screen and (max-width: 768px) {
	.nav_trigger > span:nth-last-of-type(3) {
		bottom: 0;
	}
	.header_wrap.is-open .nav_trigger > span:nth-last-of-type(3) {
		top: 50%;
		transform: translateY(-50%) rotate(-45deg);
	}
}
@media screen and (max-width: 768px) {
	
}
@media screen and (max-width: 768px) {
	
}

/* kv */
.content_kv {
	position: relative;
	padding-top: 60px;
}
@media screen and (min-width: 769px) {
	.content_kv {
		padding-top: 80px;
	}
}
.content_slider {
	position: absolute;
	display: flex;
	align-items: center;
	bottom: 18px;
	max-width: 100vw;
}
@media screen and (min-width: 769px) {
	.content_slider {
		bottom: 10px;
	}
}
.item_slider_image {
	width: 107px;
}
@media screen and (min-width: 769px) {
	.item_slider_image {
		width: 12.361vw;
	}
}
.item_slider_illust {
	width: 44px;
}
@media screen and (min-width: 769px) {
	.item_slider_illust {
		width: 8.125vw;
	}
}

/* common */
.content_title {
	width: 100%;
	margin-inline: auto;
}
@media screen and (max-width: 768px) {
	.content_title {
		max-width: 344px;
	}
}
@media screen and (max-width: 768px) {
	.decoration_background {
		display: none;
	}
}
@media screen and (min-width: 769px) {
	.decoration_background {
		position: absolute;
	}
}
@media screen and (min-width: 769px) {
	.background1 {
		top: 0;
		width: 370px;
		height: 430px;
	}
}
@media screen and (min-width: 769px) and (max-width: 1211px) {
	.background1 {
		left: -300px;
	}
}
@media screen and (min-width: 1212px) and (max-width: 1439px) {
	.background1 {
		left: -211px;
	}
}
@media screen and (min-width: 1440px) {
	.background1 {
		left: calc((1108px - 101vw)/2);
	}
}
@media screen and (min-width: 769px) {
	.background2 {
		top: 137px;
		width: 365px;
		height: 496px;
	}
}
@media screen and (min-width: 769px) and (max-width: 1211px) {
	.background2 {
		right: -300px;
	}
}
@media screen and (min-width: 1212px) and (max-width: 1439px) {
	.background2 {
		right: -173px;
	}
}
@media screen and (min-width: 1440px) {
	.background2 {
		right: calc((1108px - 101vw)/2);
	}
}
@media screen and (min-width: 769px) {
	.background3 {
		top: 857px;
		width: 419px;
		height: 437px;
	}
}
@media screen and (min-width: 769px) and (max-width: 1211px) {
	.background3 {
		right: -300px;
	}
}
@media screen and (min-width: 1212px) and (max-width: 1439px) {
	.background3 {
		right: -173px;
	}
}
@media screen and (min-width: 1440px) {
	.background3 {
		right: calc((1108px - 101vw)/2);
	}
}
@media screen and (min-width: 769px) {
	.background4 {
		top: 1459px;
		width: 430px;
		height: 366px;
	}
}
@media screen and (min-width: 769px) and (max-width: 1211px) {
	.background4 {
		top: 1260px;
		left: -300px;
	}
}
@media screen and (min-width: 1212px) and (max-width: 1439px) {
	.background4 {
		left: -211px;
	}
}
@media screen and (min-width: 1440px) {
	.background4 {
		left: calc((1108px - 101vw)/2);
	}
}
@media screen and (min-width: 769px) {
	.background5 {
		bottom: 310px;
		width: 430px;
		height: 366px;
	}
}
@media screen and (min-width: 769px) and (max-width: 1211px) {
	.background5 {
		left: -300px;
	}
}
@media screen and (min-width: 1212px) and (max-width: 1439px) {
	.background5 {
		left: -211px;
	}
}
@media screen and (min-width: 1440px) {
	.background5 {
		left: calc((1108px - 101vw)/2);
	}
}




@media screen and (min-width: 769px) {
	.background6 {
		top: -64px;
		left: 0;
	}
}
@media screen and (min-width: 769px) and (max-width: 1211px) {
	.background6 {
		top: -5.281vw;
		width: 12.294vw;
		height: 9.736vw;
	}
}
@media screen and (min-width: 1212px) {
	.background6 {
		width: 149px;
		height: 118px;
	}
}




@media screen and (min-width: 769px) {
	.background7 {
		bottom: -30px;
		right: 0;
	}
}
@media screen and (min-width: 769px) and (max-width: 1211px) {
	.background7 {
		width: 15.017vw;
		height: 11.221vw;
	}
}
@media screen and (min-width: 1212px) {
	.background7 {
		width: 182px;
		height: 136px;
	}
}
















/* concept・feature */
.content_1 {
	background: url(../images/background_sp.png)repeat center top;
	width: 100%;
	height: auto;
}
@media screen and (min-width: 769px) {
	.content_1 {
		background: url(../images/background_pc.png)repeat center top;
	}
}
.inner_1 {
	width: 91.467vw;
	padding: 32px 0 120px;
	margin-inline: auto;
}
@media screen and (min-width: 769px) {
	.inner_1 {
		max-width: 1108px;
		padding: 120px 0;
	}
}
.content_concept,
.content_feature {
	position: relative;
	background: #FFF;
	border: 6px solid #E70602;
	border-radius: 40px;
	padding: 150px 0 30px;
}
@media screen and (min-width: 769px) {
	.content_concept,
	.content_feature {
		padding: 93px 0 80px;
	}
}
.content_concept::before,
.content_feature::before {
	position: relative;
}
.content_concept::before,
.content_feature::before {
	content: "";
	position: absolute;
	background: url(../images/section_top_sp.png)no-repeat center / contain;
	top: 20px;
	left: 50%;
	width: 344px;
	height: 100px;
	transform: translateX(-50%);
}
@media screen and (min-width: 769px) {
	.content_concept::before,
	.content_feature::before {
		background: url(../images/section_top_pc.png)no-repeat center / contain;
		top: 0;
		width: 96.029%;
		max-width: 1064px;
		height: 11.528vw;
		max-height: 166px;
	}
}
.inner_text {
	width: 89.911%;
	margin-inline: auto;
}
@media screen and (min-width: 769px) {
	.inner_text {
		width: 79.603%;
		max-width: 882px;
	}
}

/* concept */
.text_concept {
	text-align: left;
	font-size: 14px;
	line-height: 1.7;
}
@media screen and (min-width: 769px) {
	.text_concept {
		text-align: center;
		font-size: 16px;
		line-height: 2;
	}
}
.text_concept:first-of-type {
	margin-top: 45px;
}
@media screen and (min-width: 769px) {
	.text_concept:first-of-type {
		margin-top: 60px;
	}
}
.text_concept + .text_concept {
	margin-top: 22px;
}
@media screen and (min-width: 769px) {
	.text_concept + .text_concept {
		margin-top: 30px;
	}
}
.image_history {
	width: 89.911%;
	margin: 48px auto 0;
}
@media screen and (min-width: 769px) {
	.image_history {
		width: 84.747%;
		margin-top: 52px;
	}
}

/* feature */
.content_feature {
	margin-top: 48px;
}
@media screen and (min-width: 769px) {
	.content_feature {
		margin-top: 120px;
	}
}
.content_detail {
	margin-top: 40px;
}
@media screen and (min-width: 769px) {
	.content_detail {
		display: grid;
		grid-template-columns: 53.515% 40.816%;
		justify-content: space-between;
		margin-top: 72px;
	}
}
.content_detail + .content_detail {
	margin-top: 48px;
}
@media screen and (min-width: 769px) {
	.content_detail + .content_detail {
		margin-top: 80px;
	}
}
@media screen and (min-width: 769px) {
	.title_detail_mt {
		margin-top: 33px;
	}
}
.title_detail > img {
	width: auto;
	height: 43px;
}
@media screen and (min-width: 1150px) {
	.title_detail > img {
		height: 50px;
	}
}
@media screen and (min-width: 769px) and (max-width: 1149px) {
	.title_detail > img {
		height: 4.348vw;
	}
}
.description_detail {
	font-size: 14px;
	line-height: 1.7;
	margin-top: 24px;
}
@media screen and (min-width: 769px) {
	.description_detail {
		font-size: 16px;
		line-height: 2;
		margin-top: 16px;
	}
}
@media screen and (max-width: 768px) {
	.image_detail {
		margin-top: 24px;
	}
}
.image_detail > img {
	border-radius: 12px;
}
.content_lead {
	margin-top: 40px;
}
@media screen and (min-width: 769px) {
	.content_lead {
		margin-top: 32px;
	}
}
@media screen and (min-width: 768px) {
	.content_voice {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		justify-content: space-between;
		gap: 28px;
		margin-top: 20px;
	}
}
.item_voice {
	text-align: center;
	border: 2px dashed #F9E5DC;
	border-radius: 12px;
	padding: 16px 12px;
	margin-top: 10px;
}
@media screen and (min-width: 769px) {
	.item_voice {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		line-height: 1.5;
		padding: 20px 6px 14px;
	}
}
.item_voice_strong {
	display: block;
	color: #E70602;
	font-weight: bold;
}
@media screen and (min-width: 769px) {
	.item_voice_strong {
		font-size: 18px;
		line-height: 1.5;
	}
}
.annotation_voice {
	text-align: right;
	font-size: 12px;
	margin-top: 10px;
}
.content_map {
	position: relative;
	margin-top: 40px;
}
@media screen and (min-width: 769px) {
	.content_map {
		margin-top: 57px;
	}
}
@media screen and (max-width: 768px) {
	.image_map {
		transition: 0.5s;
	}
}
@media screen and (max-width: 768px) {
	.map_contain {
		overflow: scroll;
	}
}
@media screen and (max-width: 768px) {
	.map_contain > img {
		transition: 0.5s;
	}
}
@media screen and (max-width: 768px) {
	.image_map.zoom .map_contain > img {
		width: 150%;
	}
}
@media screen and (max-width: 768px) {
	.button_zoom {
		position: absolute;
		background: url(../images/zoom_in.svg)no-repeat center / contain;
		bottom: -10px;
		right: -10px;
		width: 24px;
		height: 24px;
		padding: 10px;
	}
}
@media screen and (max-width: 768px) {
	.image_map.zoom .button_zoom {
		position: absolute;
		background: url(../images/zoom_out.svg)no-repeat center / contain;
		bottom: -10px;
		right: -10px;
		width: 24px;
		height: 24px;
		padding: 10px;
	}
}
.content_recipe {
	width: 88.338%;
	margin: 44px auto 0;
}
@media screen and (min-width: 769px) {
	.content_recipe {
		width: 88.448%;
		max-width: 980px;
		margin-top: 57px;
	}
}
.introduction_recipe {
	margin-top: 24px;
}
@media screen and (min-width: 769px) {
	.introduction_recipe {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 32px;
	}
}
@media screen and (min-width: 769px) {
	.card_recipe {
		width: 48.980%;
	}
}
@media screen and (max-width: 768px) {
	.card_recipe + .card_recipe {
		margin-top: 16px;
	}
}
@media screen and (min-width: 769px) {
	.card_recipe:nth-of-type(2n) {
		margin-left: auto;
	}
}
@media screen and (min-width: 769px) {
	.card_recipe:nth-of-type(n+3) {
		margin-top: 28px;
	}
}
.title_recipe {
	background: #E70602;
	border-radius: 12px 12px 0 0;
	color: #FFFFFF;
	text-align: center;
	font-size: 20px;
	line-height: 1.6;
	font-weight: bold;
	padding: 13px 0;
}
@media screen and (min-width: 769px) {
	.title_recipe {
		font-size: 24px;
		line-height: 1.3;
		padding: 10px 0;
	}
}
.box_recipe {
	background: #F9E5DC;
	border-radius: 0 0 12px 12px;
	padding: 20px 0 30px;
}
@media screen and (min-width: 769px) {
	.box_recipe {
		padding: 28px 0 30px;
	}
}
.block_recipe {
	width: 89.109%;
	margin-inline: auto;
}
@media screen and (min-width: 769px) {
	.block_recipe {
		display: flex;
		justify-content: center;
		width: 83.333%;
	}
}
.item_recipe {
	text-decoration: none;
}
@media screen and (max-width: 768px) {
	.item_recipe {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}
@media screen and (min-width: 769px) {
	.item_recipe {
		width: 47.5%;
	}
}
@media screen and (max-width: 768px) {
	.item_recipe + .item_recipe {
		margin-top: 20px;
	}
}
@media screen and (min-width: 769px) {
	.item_recipe + .item_recipe {
		margin-left: auto;
	}
}
@media screen and (max-width: 768px) {
	.image_recipe {
		width: 44.444%;
	}
}
.image_recipe > img {
	border-radius: 8px;
}
.name_recipe {
	color: #333333;
	font-size: 14px;
	line-height: 1.5;
	font-weight: bold;
}
@media screen and (max-width: 768px) {
	.name_recipe {
		width: 51.111%;
		margin-left: auto;
	}
}
@media screen and (min-width: 769px) {
	.name_recipe {
		text-align: center;
		font-size: 16px;
		margin-top: 10px;
	}
}
.button_recipe {
	position: relative;
	display: block;
	background: #FFFFFF;
	width: 89.109%;
	border: 2px solid #E70602;
	border-radius: 8px;
	text-decoration: none;
	text-align: center;
	color: #E70602;
	font-size: 14px;
	line-height: 1.4;
	font-weight: bold;
	box-shadow: 0 3px 0 #CF0803;
	margin: 20px auto 0;
	padding: 13px 20px 13px;
}
@media screen and (min-width: 769px) {
	.button_recipe {
		width: 83.333%;
		font-size: 16px;
		padding: 18px 28px 18px 10px;
	}
}
.button_recipe::after {
	content: "";
	position: absolute;
	background: url(../images/arrow.svg)no-repeat center / contain;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	width: 12px;
	height: 16px;
}

/* product */
.content_2 {
	position: relative;
	background: #FFEFE8;
}
.content_2::before {
	content: "";
	position: absolute;
	background: url(../images/section_top_sp.png)no-repeat center / contain;
	top: 20px;
	left: 50%;
	width: 344px;
	height: 100px;
	transform: translateX(-50%);
}
@media screen and (min-width: 769px) {
	.content_2::before {
		background: url(../images/section_top_pc.png)no-repeat center / contain;
		width: 73.889%;
		max-width: 1064px;
		height: 11.528vw;
		max-height: 166px;
	}
}
.inner_2 {
	width: 91.733%;
	padding: 168px 0 64px;
	margin-inline: auto;
}
@media screen and (min-width: 769px) {
	.inner_2 {
		max-width: 902px;
		padding: 93px 0 80px;
	}
}
.content_product {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 44px;
}
@media screen and (min-width: 769px) {
	.content_product {
		margin-top: 80px;
		justify-content: center;
	}
}
.item_product {
	width: 43.733vw;
}
@media screen and (max-width: 768px) {
	.item_product:nth-of-type(n+3) {
		margin-top: 18px;
	}
}
@media screen and (min-width: 769px) {
	.item_product {
		width: 28.492%;
	}
}
@media screen and (min-width: 769px) {
	.item_product:not(:nth-of-type(3n+1)) {
		margin-left: 32px;
	}
}
@media screen and (min-width: 769px) {
	.item_product:nth-of-type(n+4) {
		margin-top: 64px;
	}
}
.button_product {
	position: relative;
	display: block;
	background: #E70602;
	border-radius: 8px;
	text-decoration: none;
	text-align: center;
	color: #FFFFFF;
	font-weight: bold;
	line-height: 1.3;
	box-shadow: 0 3px 0 rgba(195, 96, 96, 0.4);
}
@media screen and (max-width: 768px) {
	.button_product {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 65px;
		font-size: 14px;
	}
}
@media screen and (min-width: 769px) {
	.button_product {
		width: 80%;
		font-size: 16px;
		padding: 8px 12px;
		margin-inline: auto;
	}
}
.button_product::after {
	content: "";
	position: absolute;
	background: url(../images/arrow_2.svg)no-repeat center / contain;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	width: 12px;
	height: 16px;
}
@media screen and (min-width: 769px) {
	.button_product::after {
		right: 8px;
	}
}

/* footer */
.footer_benriokazu {
	background: #E70602;
	color: #fff;
	padding: 32px 0 24px;
	text-align: center;
}
.logo_footer {
	display: block;
	width: 222px;
	height: 33px;
	margin: 0 auto 16px;
}
.links_footer {
	width: 100%;
}
@media screen and (max-width: 768px) {
	.links_footer {
		display: flex;
		flex-wrap: wrap;
		border-top: 1px solid #fff;
		border-bottom: 1px solid #fff;
		margin-top: 30px;
	}
}
@media screen and (min-width: 769px) {
	.links_footer {
		max-width: 800px;
		margin: 0 auto;
	}
}
.links_footer a {
	text-decoration: none;
	color: #fff;
	font-size: 12px;
	line-height: 1;
	font-weight: bold;
}
@media screen and (max-width: 768px) {
	.links_footer a {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 48px;
	}
}
@media screen and (min-width: 769px) {
	.links_footer a {
		line-height: 2;
	}
}
@media screen and (max-width: 768px) {
	.links_footer li {
		display: block;
		width: 50%;
		border-bottom: 1px solid #fff;
	}
	.links_footer li:nth-of-type(odd) {
		border-right: 1px solid #fff;
	}
	.links_footer li:nth-of-type(2n):last-child {
		border-bottom: none;
	}
	.links_footer li:nth-of-type(2n+1):not(:nth-last-child(n+3)) {
		border-bottom: none;
	}
}
@media screen and (min-width: 769px) {
	.links_footer li {
		display: inline-block;
		margin-top: 4px;
	}
	.links_footer li:not(.is-no-line):after {
		content: '|';
		display: inline-block;
		margin: 0 0.5em;
	}
}
.copy_footer {
	margin-top: 18px;
	font-size: 12px;
	line-height: 2;
}
@media screen and (max-width: 768px) {
	.copy_footer {
		font-weight: bold;
	}
}
@media screen and (min-width: 769px) {
	.copy_footer {
		margin-top: 16px;
	}
}