@charset "UTF-8";

/* web font */
@font-face {
	font-family: "LINE Seed JP";
	font-weight: 300;
	src: url("../fonts/LINESeedJP_OTF_Th.woff") format("woff");
}
@font-face {
	font-family: "LINE Seed JP";
	font-weight: 500;
	src: url("../fonts/LINESeedJP_OTF_Rg.woff") format("woff");
}
@font-face {
	font-family: "LINE Seed JP";
	font-weight: 700;
	src: url("../fonts/LINESeedJP_OTF_Bd.woff") format("woff");
}
@font-face {
	font-family: "LINE Seed JP";
	font-weight: 900;
	src: url("../fonts/LINESeedJP_OTF_Eb.woff") format("woff");
}

/*
	Reset CSS
-----------------------------------------------------------------------------------------------*/
/***
    The new CSS reset - version 1.8.4 (last updated 14.2.2023)
    GitHub page: https://github.com/elad2412/the-new-css-reset
***/
 *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
    all: unset;
    display: revert;
}
*,*::before,*::after {
    box-sizing: border-box;
}
a, button {
    cursor: revert;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
ol, ul, menu {
    list-style: none;
}
img {
    max-inline-size: 100%;
    max-block-size: 100%;
	vertical-align: top;
	backface-visibility: hidden;
}
table {
    border-collapse: collapse;
}
input, textarea {
    -webkit-user-select: auto;
}
textarea {
    white-space: revert;
}
meter {
    -webkit-appearance: revert;
    appearance: revert;
}
:where(pre) {
    all: revert;
}
::placeholder {
    color: unset;
}
::marker {
    content: initial;
}
:where([hidden]) {
    display: none;
}
:where([contenteditable]:not([contenteditable="false"])) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
    -webkit-user-select: auto;
}
:where([draggable="true"]) {
    -webkit-user-drag: element;
}
:where(dialog:modal) {
    all: revert;
}


/*
	Setting CSS
-----------------------------------------------------------------------------------------------*/
html{
	font-size:62.5%;
}
body{
	font-size:1.6em;
	font-family: 'LINE Seed JP', 'Yu Gothic', YuGothic, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	/* font-family: 'Noto Sans JP', 'Yu Gothic', YuGothic, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; */
	font-weight: var(--fw-medium);
	font-feature-settings: "palt";
	overflow-wrap: break-word;
}
p{
	line-height: var(--lh-normal);
}
a {
	color: var(--c-bk);
	text-decoration: none;
	transition: color 0.2s, opacity 0.2s;
}
a:link {
	color: var(--c-bk);
}
a:visited {
	color: var(--c-bk);
}
@media screen and (max-width:812px){
	body{
		font-size:1.5em;
	}
}
@media (hover: hover) and (pointer: fine){
	a:hover {
		text-decoration: none;
		opacity: 0.7;
	}	
}
@media screen and (min-width:813px){
	/* iPad背景切れ対策 */
	body{
		min-width:1200px;
	}
	/* tel pcのみ無効 */
	a[href^="tel:"]{
		pointer-events:none;
	}
}
/* 表示切替 */
.switch {
	visibility: hidden;
}
.sp{
	display:none;
}
@media screen and (max-width:812px){
	body{
		text-size-adjust:100%;
		-webkit-text-size-adjust: 100%;
	}
	.pc{
		display:none;
	}
	.sp{
		display:block;
	}
	br.sp{
		display:inline-block;
	}
}


/*
	common
-----------------------------------------------------------------------------------------------*/
/* 変数 */
:root{
	/* color */
	--c-bk: #000;
	--c-wh: #fff;
	--c-gry: #666;
	--c-main: #142850;
	--c-accent: #ff8b02;
	--c-sub: #ffd25c;
	--bgc-main: #f5f0e6;
	--bgc-accent: #e2c7a3;
	--bgc-overlap: #333;
	/* font-weight */
	--fw-light: 300;
	--fw-medium: 500;
	--fw-bold: 700;
	--fw-black: 900;
	/* line-height */
	--lh-none: 1.0;
	--lh-small: 1.2;
	--lh-normal: 1.5;
    --lh-tall: 1.8;
	/* font-family */
	--ff-en: 'Rokkitt', serif;
	/* border-radius */
	--br-5px: 5px;
	--br-10px: 10px;
	--br-15px: 15px;
	--br-30px: 30px;
	--br-50px: 50px;
}

/* wrapper */
#wrapper{
	background: url("../images/bg_grange.png") var(--bgc-main) repeat center center;
	position: relative;
	overflow: hidden;
}
@media screen and (max-width:812px){
}

/* ctsArea */
.ctsArea{
	width: 1200px;
	margin: 0 auto;
	padding: 80px 30px;
	position: relative;
	z-index: 1;
}
@media screen and (max-width:812px){
	.ctsArea{
		width: 100%;
		max-width: 500px;
		padding: 40px 20px;
	}
}

/* button_base
==================================== */
[class^="btnArea"]{
	display: flex;
	flex-wrap: wrap;
	padding-top: 30px;
	gap: 15px;
}
[class^="btnArea__center"]{
	justify-content: center;
}
.btnArea__center-s{
	padding-top: 20px;
}
.btnArea__left{
	justify-content: left;
}
.btnArea__right{
	justify-content: right;
}
a[class^="btnBase__item"]{
	display: block;
	width: 380px;
	padding: 25px 65px 25px 25px;
	font-size: 1.8rem;
	font-weight: var(--fw-bold);
	text-align: center;
	color: var(--c-wh);
	border-radius: 40px;
	background-color: var(--c-main);
	position: relative;
	cursor: pointer;
}
a[class^="btnBase__item"]::after{
	content:' ';
	display:block;
	width:50px;
	height:50px;
	background: url("../images/arrow_bl.svg") center center no-repeat var(--c-wh);
	background-size: 40%;
	border-radius: 50%;
	position:absolute;
	top:50%;
	right:15px;
	transform: translateY(-50%);
	transition: background 0.2s, transform 0.2s;
}
/* hover */
a[class^="btnBase__item"]:hover{
	opacity: 1.0;
}
a[class^="btnBase__item"]:hover::after{
	background: url("../images/arrow_bl.svg") right 10px center no-repeat var(--c-wh);
	background-size: 40%;
}
/* button_base modal */
a.btnBase__item-modal::after{
	background: url("../images/ico_plus_bl.svg") center center no-repeat var(--c-wh);
	background-size: 40%;
}
a.btnBase__item-modal:hover:after{
	background: url("../images/ico_plus_bl.svg") center center no-repeat var(--c-wh);
	background-size: 40%;
	transform: translateY(-50%) rotate(180deg);
}
/* button_base point */
a.btnBase__item-point{
	background-color: var(--c-accent);
}
/* button_base small */
a.btnBase__item-s{
	padding: 20px 55px 20px 20px;
	font-size: 1.6rem;
}
a.btnBase__item-s::after{
	width:40px;
	height:40px;
	right:13px;
}
a.btnBase__item-s:hover::after{
	background: url("../images/arrow_bl.svg") right 8px center no-repeat var(--c-wh);
	background-size: 40%;
}
/* button_base detail */
a.btnBase__item-detail{
	max-width: 250px;
	padding: 15px 55px 15px 20px;
	font-size: 1.6rem;
	color: var(--c-main);
	background-color: var(--c-wh);
	border: 1px solid var(--c-main);
}
a.btnBase__item-detail::after{
	width:35px;
	height:35px;
	background: url("../images/ico_plus_wh.svg") center center no-repeat var(--c-main);
	background-size: 40%;
	right:10px;
}
a.btnBase__item-detail:hover:after{
	background: url("../images/ico_plus_wh.svg") center center no-repeat var(--c-main);
	background-size: 40%;
	transform: translateY(-50%) rotate(180deg);
}
@media screen and (max-width:812px){
	[class^="btnArea"]{
		padding-top: 20px;
	}
	.btnArea__center-s{
		padding-top: 10px;
	}
	a[class^="btnBase__item"]{
		max-width: 300px;
		padding: 20px 55px 20px 20px;
		font-size: 1.6rem;
	}
	a[class^="btnBase__item"]::after{
		width:40px;
		height:40px;
		right:13px;
	}
	/* button_base small */
	a.btnBase__item-s{
		max-width: 300px;
	}
	/* button_base detail */
	a.btnBase__item-detail{
		width: 90%;
		padding: 10px 30px 10px 10px;
		font-size: 1.3rem;
	}
	a.btnBase__item-detail::after{
		width:30px;
		height:30px;
		right:7px;
	}
}

/* tit */
.cmn__titMainArea{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40px 0;
	position: relative;
}
[class^="cmn__titMain"]{
	font-weight: var(--fw-bold);
	text-align: center;
	z-index: 2;
}
[class^="cmn__titMain"] .en{
	font-size: 9.0rem;
	font-family: var(--ff-en);
	color: var(--c-main);
}
[class^="cmn__titMain"] .jp{
	display: block;
	font-size: 1.8rem;
}
.cmn__titMainImg{
	height: 180px;
	margin-top: -160px;
	z-index: 1;
}
@media screen and (max-width:812px){
	.cmn__titMainArea{
		padding: 20px 0 50px;
	}
	[class^="cmn__titMain"] .en{
		font-size: 5.5rem;
	}
	[class^="cmn__titMain"] .jp{
		font-size: 1.3rem;
	}
	.cmn__titMainImg{
		height: 120px;
		margin-top: -105px;
	}
}

/* text */
.cmn__txtM{
	font-size: 1.8rem;
	line-height: var(--lh-tall);
}
@media screen and (max-width:812px){
	.cmn__txtM{
		font-size: 1.5rem;
	}
}

/* 見出し */
.cmn__midashi{
	display: flex;
	align-items: end;
}
.cmn__midashiImg{
	width: 200px;
}
.cmn__midashiTit{
	margin-bottom: 5px;
	font-size: 2.5rem;
	font-weight: var(--fw-bold);
	color: var(--c-accent);
}
.cmn__midashiTit span{
	display: inline-block;
	margin-left: 2px;
	margin-right: 6px;
	font-size: 3.8rem;
	font-weight: var(--fw-black);
	font-style: italic;
	color: var(--c-wh);
	-webkit-text-stroke: 2px var(--c-main);
}
.cmn__midashiTxt{
	font-size: 1.8rem;
	line-height: var(--lh-tall);
}
@media screen and (max-width:812px){
	.cmn__midashi{
		align-items: start;
		flex-direction: column;
		margin-bottom: 30px;
		position: relative;
	}
	.cmn__midashiImg{
		width: 120px;
		position: absolute;
		top: -25%;
		right: 0;
		z-index: -1;
	}
	.cmn__midashiTit{
		font-size: 1.6rem;
	}
	.cmn__midashiTit span{
		font-size: 2.6rem;
		-webkit-text-stroke: 1px var(--c-main);
	}
	.cmn__midashiTxt{
		font-size: 1.5rem;
		text-align: left;
	}
}

/* txt__loop */
.txt__loop{
	overflow: hidden;
}
.txt__loopList{
	display: flex;
	flex-wrap: nowrap;
}
.txt__loopList li{
	margin-left: 6%;
	font-family: var(--ff-en);
	font-size: 18.0rem;
	font-weight: var(--fw-bold);
	white-space: nowrap;
	color: var(--c-wh);
	opacity: .55;
	animation: loop 20s linear infinite;
}
@media screen and (max-width:812px){
	.txt__loopList li{
		margin-left: 6%;
		font-size: 12.0rem;
	}
}

/* メニュー写真
==================================== */
[class^="list__menu-"]{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 40px;
}
[class^="list__menu-"] li{
	width: 320px;
	position: relative;
}
[class^="list__menu-"] li.large{
	width: 680px;
}
[class^="list__masonry"]{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto -40px;
}
[class^="list__masonry"] li{
	width: 320px;
	margin: 0 20px 40px;
}
.list__menuImg{
	border: 5px solid var(--c-wh);
	border-radius: var(--br-15px);
	overflow: hidden;
	position: relative;
}
.list__menuImg img{
	transform: scale(1.2);
	transition: transform 1.2s;
	transition-delay: .8s;
}
.list__menuImg::before{
	content: "";
	width: 100%;
	height: 100%;
	border-radius: 0 0 15px 15px;
	background-color: var(--c-main);
	position: absolute;
	top: 0;
	transition: height 1.2s;
	transition-delay: .8s;
	z-index: 1;
}
.list__menuTxt{
	margin-top: 20px;
	font-size: 1.6rem;
	text-align: center;
	line-height: var(--lh-normal);
}
.list__menuIco{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 100px;
	padding-top: 12px;
	font-size: 1.6rem;
	font-weight: var(--fw-bold);
	color: var(--c-main);
	text-align: center;
	line-height: 1.2;
	background: url("../images/txt_spot.svg") center center no-repeat var(--c-sub);
	border-radius: 50%;
	filter: drop-shadow(0 0 10px rgba(0,0,0,.1));
	position: absolute;
	top: -20px;
	left: -20px;
	z-index: 10;
}
/* active */
.list__menuImg.active img{
	transform: scale(1);
}
.list__menuImg.active::before{
	height: 0;
}
@media screen and (max-width:812px){
	[class^="list__menu-"]{
		justify-content: start;
		gap: 30px 2%;
	}
	[class^="list__menu-"] li{
		width: calc((100% - 2%)/2);
	}
	[class^="list__menu-"] li.large{
		width: 100%;
	}
	[class^="list__masonry"]{
		margin: 0 auto -30px;
	}
	[class^="list__masonry"] li{
		width: calc((100% - 4%)/2);
		margin: 0 1% 30px;
	}
	.list__menuImg{
		border-radius: var(--br-10px);
		border: 3px solid var(--c-wh);
	}
	.list__menuImg::before{
		border-radius: 0 0 10px 10px;
	}
	.list__menuTxt{
		margin-top: 10px;
		font-size: 1.3rem;
		text-align: left;
	}
	.list__menuIco{
		width: 60px;
		height: 60px;
		padding-top: 7px;
		font-size: 1.0rem;
		top: -15px;
		left: -3%;
	}
}

/* 作り方・アイデア
==================================== */
.flow{
	margin-top: 80px;
	position: relative;
}
.flow__area{
	padding: 45px;
	background-color: var(--bgc-accent);
	border-radius: var(--br-50px);
}
.flow__fukidashi{
	margin-bottom: 30px;
	text-align: center;
}
.flow__fukidashi span{
	display: inline-block;
	padding: 5px 30px;
	font-size: 2.2rem;
	font-weight: var(--fw-bold);
	background-color: var(--c-wh);
	border: 1px solid var(--c-main);
	border-radius: var(--br-5px);
	position: relative;
}
.flow__fukidashi span::before,
.flow__fukidashi span::after{
	content: "";
	width: 20px;
	height: 10px;
	clip-path: polygon(0 0, 50% 100%, 100% 0);
	background: var(--c-wh);
	position: absolute;
	left: 50%;
	bottom: -9px;
	transform: translateX(-50%);
}
.flow__fukidashi span::before{
	width: 21px;
	height: 11px;
	background: var(--c-main);
	bottom: -11px;
}
[class^="flow__list"] li{
	padding: 30px;
	background-color: var(--c-wh);
	border-radius: var(--br-15px);
}
.flow__tit{
	margin-top: -50px;
	padding-bottom: 15px;
	font-size: 1.5rem;
	font-weight: var(--fw-bold);
	text-align: center;
	line-height: 0.8;
}
.flow__tit span{
	font-family: var(--ff-en);
	font-size: 7.0rem;
	color: var(--c-main);
}
.flow__txt{
	margin-top: 20px;
	padding-top: 20px;
	font-size: 1.4rem;
	border-top: 2px dotted var(--c-gry);
}
.flow__txt span{
	font-weight: var(--fw-bold);
	color: var(--c-main);
}
@media screen and (max-width:812px){
	.flow{
		margin-top: 80px;
	}
	.flow__area{
		padding: 25px;
		border-radius: var(--br-30px);
	}
	.flow__fukidashi{
		margin-bottom: 20px;
	}
	.flow__fukidashi span{
		padding: 5px 20px;
		font-size: 1.8rem;
	}
	[class^="flow__list"] li{
		padding: 20px;
		border-radius: var(--br-10px);
	}
	.flow__tit{
		margin-top: -40px;
		font-size: 1.3rem;
	}
	.flow__tit span{
		font-size: 5.5rem;
	}
	.flow__txt{
		margin-top: 15px;
		padding-top: 15px;
		font-size: 1.3rem;
	}
}

/* swiper
==================================== */
/* item */
.flow .swiper{
	padding-top: 20px;
}
.flow .swiper-slide {
	width: 280px;
	min-height: 435px;
	transform: scale(0.9);
	transform-origin: 100% 0;
	transition: transform 0.5s;
}
.flow .swiper-slide.swiper-slide-active{
	transform: scale(1);
}
/* pagination */
.flow .swiper-pagination-bullet-active{
	background-color: var(--c-main);
}
.flow .swiper-pagination{
	text-align: left;
}
.flow .swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction {
    left:auto;
    right: 0;
    width: 70%;
}
/* swiper-button */
.flow .swiper-button-prev,
.flow .swiper-button-next{
	display: flex;
	justify-content: center;
	align-items: center;
	width:55px;
	height:55px;
	border: 1px solid var(--c-main);
	background-color: var(--c-main);
	border-radius: 50%;
	position: absolute;
	top: auto;
	bottom: 62px;
	z-index: 99;
	transition: background-color 0.2s;
}
.flow .swiper-button-prev{
	right: 90px;
	left: auto;
}
.flow .swiper-button-next{
	right: 30px;
}
.flow .swiper-button-prev:hover,
.flow .swiper-button-next:hover{
	background-color: var(--c-wh);
}
.flow .swiper-button-prev::after,
.flow .swiper-button-next::after{
	content: "";
	width: 100%;
	height: 100%;
	display:block;
	width:50px;
	height:50px;
	background: url("../images/arrow_wh.svg") no-repeat center center / 35%;
	transition: background-images 0.2s;
}
.flow .swiper-button-prev:hover:after,
.flow .swiper-button-next:hover:after{
	background: url("../images/arrow_bl.svg") no-repeat center center / 35%;
}
.flow .swiper-button-prev::after{
	transform: rotate(180deg);
}
@media screen and (max-width:812px){
	/* item */
	.flow .swiper{
		padding-top: 25px;
	}
	.flow .swiper-slide {
		width: 220px;
		min-height: 380px;
		margin-bottom: 35px;
		border-radius: var(--br-5px);
	}
	/* pagination */
	.flow .swiper-pagination{
		text-align: left;
	}
	.flow .swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction {
		left:0;
		right: auto;
		bottom: 0;
		width: 100%;
	}
	/* swiper-button */
	.flow .swiper-button-prev,
	.flow .swiper-button-next{
		width:45px;
		height:45px;
		bottom: 25px;
	}
	.flow .swiper-button-prev{
		right: 80px;
		left: auto;
	}
	.flow .swiper-button-next{
		right: 25px;
	}
	.flow .swiper-button-prev::after,
	.flow .swiper-button-next::after{
		width:45px;
		height:45px;
	}
}


/*
	header
-----------------------------------------------------------------------------------------------*/
#header{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 30px 30px 0;
	position: relative;
}
.header__logo{
	width: 180px;
}
@media screen and (max-width:812px){
	#header{
		padding: 20px;
	}
	.header__logo{
		width: 130px;
	}
}

/* gNav
==================================== */
#gNav{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	flex-direction: column;
	align-items: end;
	gap: 10px;
	width: 80px;
	height: 80px;
	padding: 22.5px;
	background-color: var(--c-main);
	border-radius: 50%;
	position: fixed;
	top: 30px;
	right: 30px;
	transition: opacity 0.2s, background-color 0.2s;
	cursor: pointer;
	z-index: 1000;
}
[class^="gNav__line"]{
	display:block;
	height:3px;
}
.gNav__line01{
	width: 35px;
	background-color: var(--c-wh);
	transition:transform 0.3s;
}
.gNav__line02{
	width: 25px;
	background-color: var(--c-wh);
	transition:transform 0.3s, width 0.3s;
}
#gNav:hover .gNav__line02{
	width: 35px;
}
/* close */
#gNav.active [class^="gNav__line"]{
	position: absolute;
}
#gNav.active .gNav__line01{
	top:39px;
	transform:rotate(45deg);
}
#gNav.active .gNav__line02{
	width: 35px;
	top:39px;
	transform:rotate(-45deg);
}

#gNav__wrapper{
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
}
#gNav__area{
	display: none;
	height: 100%;
	padding: 80px 30px;
	position:fixed;
	top:0;
	left:50%;
	transform: translateX(-50%);
	z-index:100;
	overflow-y: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
#gNav__area::-webkit-scrollbar {
	display:none;
}
#gNav__overlay{
	display: none;
	width:100%;
	height:100%;
	background-color: var(--bgc-main);
	position:absolute;
	top:0;
	left:0;
	opacity: 0.98;
	z-index: 99;
	cursor: zoom-out;
}
.gNav__list{
	display: flex;
	flex-direction: column;
	width: 800px;
}
.gNav__list li{
	border-bottom: 2px dotted var(--c-main);
	opacity: 0;
}
.gNav__list li:last-of-type{
	border: none;
}
a.gNav__btn{
	display: flex;
	align-items: center;
	padding: 20px 60px 20px 0;
	position: relative;
}
a.gNav__btn::after{
	content: "";
	width: 40px;
	height: 40px;
	background: url("../images/arrow_wh.svg") var(--c-main) no-repeat center center / 35%;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	right: 0;
	transform: rotate(90deg) translateX(-50%);
	transition: background 0.2s;
}
.gNav__listSub{
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}
.gNav__listSub li{
	width: calc((100% - 30px)/3);
	opacity: 0;
}
a.gNav__btn-sub{
	display: block;
	padding: 15px 10px;
	font-size: 1.3rem;
	font-weight: var(--fw-bold);
	color: var(--c-wh);
	text-align: center;
	background-color: var(--c-accent);
	border-radius: var(--br-5px);
}
.gNav__listSub li:last-of-type a.gNav__btn-sub{
	background-color: #004080;
}
.gNav__img{
	width: 80px;
	margin-right: 10px;
}
.gNav__tit{
	font-size: 1.6rem;
	font-weight: var(--fw-bold);
	color: var(--c-accent);
	line-height: var(--lh-small);
}
.gNav__tit span{
	display: inline-block;
	margin-right: 20px;
	font-family: var(--ff-en);
	font-size: 6.0rem;
	color: var(--c-main);
	vertical-align: middle;
}
/* hover */
a.gNav__btn:hover{
	opacity: 1.0;
}
a.gNav__btn:hover:after{
	background: url("../images/arrow_wh.svg") var(--c-main) no-repeat center right 10px / 35%;
}
/* active */
#gNav__area.active .gNav__list li,
#gNav__area.active .gNav__listSub li{
	animation: fadeUp .7s ease forwards;
}
#gNav__area.active .gNav__list li:nth-of-type(2){
	animation-delay: .2s;
}
#gNav__area.active .gNav__list li:nth-of-type(3){
	animation-delay: .3s;
}
#gNav__area.active .gNav__list li:nth-of-type(4){
	animation-delay: .4s;
}
#gNav__area.active .gNav__list li:nth-of-type(5){
	animation-delay: .5s;
}
#gNav__area.active .gNav__list li:nth-of-type(6){
	animation-delay: .6s;
}
#gNav__area.active .gNav__list li:nth-of-type(7){
	animation-delay: .7s;
}
#gNav__area.active .gNav__listSub li{
	animation-delay: .7s;
}
@media screen and (max-width:812px){
	#gNav{
		gap: 10px;
		width: 60px;
		height: 60px;
		padding: 15px;
		top: 20px;
		right: 20px;
	}
	.gNav__line01{
		width: 30px;
	}
	.gNav__line02{
		width: 30px;
	}
	#gNav:hover .gNav__line02{
		width: 30px;
	}
	/* close */
	#gNav.active .gNav__line01{
		top:29px;
		transform:rotate(45deg);
	}
	#gNav.active .gNav__line02{
		width: 30px;
		top:29px;
	}
	
	#gNav__area{
		width: 100%;
		margin: 0 auto;
		padding: 80px 20px;
		left:0;
		transform: none;
	}
	.gNav__list{
		width: 100%;
		max-width: 500px;
		margin: 0 auto;
	}
	a.gNav__btn{
		padding: 20px 45px 20px 0;
	}
	a.gNav__btn::after{
		width: 30px;
		height: 30px;
	}
	.gNav__listSub{
		max-width: 500px;
		display: flex;
		flex-direction: column;
		gap: 10px 0;
		margin: 0 auto;
	}
	.gNav__listSub li{
		width:100%;
	}
	a.gNav__btn-sub{
		padding: 12px;
		font-size: 1.3rem;
	}
	.gNav__img{
		width: 60px;
		margin-right: 10px;
	}
	.gNav__tit{
		font-size: 1.2rem;
	}
	.gNav__tit span{
		margin-right: 15px;
		font-size: 3.5rem;
	}
}


/*
	subNav
-----------------------------------------------------------------------------------------------*/
[class^="subNav__area"]{
	display: flex;
	position: absolute;
	right: 120px;
	z-index: 10;
}
.subNav__areaTop{
	top: 0;
}
.subNav__areaBtm{
	top: -37px;
}
a[class^="subNav__btn0"]{
	display: inline-block;
	padding: 12px 25px 12px 12px;
	font-size: 1.3rem;
	font-weight: var(--bold);
	color: var(--c-wh);
	line-height: 1.0;
	border-radius: 0 0 5px 5px;
	position: relative;
}
.subNav__areaBtm [class^="subNav__btn"]{
	border-radius: 5px 5px 0 0;
}
[class^="subNav__btn"]::after{
	content:' ';
	display:block;
	width:6px;
	height:6px;
	border-top:2px solid var(--c-wh);
	border-right:2px solid var(--c-wh);
	transform:translateY(-50%) rotate(45deg);
	transform-origin:0 0;
	position:absolute;
	top:45%;
	right:8px;
}
.subNav__btn01{
	background-color: #004080;
}
@media screen and (max-width:812px){
	[class^="subNav"]{
		display: none;
	}
}

/*
	menu_navi
-----------------------------------------------------------------------------------------------*/
#menu{
	width: 805px;
	margin: 0 auto;
	padding: 80px 20px;
}
.menu__tit{
	margin-bottom: 20px;
	font-family: var(--ff-en);
	font-size: 5.0rem;
	font-weight: var(--fw-bold);
	text-align: center;
}
.menu__list{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
}
.menu__list li:nth-of-type(1){
	margin-left: calc((195px)/2);
}
.menu__list li:nth-of-type(3){
	margin-right: calc((195px)/2);
}
[class^="menu__btn"]{
	display: block;
	width: 180px;
	height: 180px;
	background-color: var(--c-wh);
	border: 1px solid var(--c-main);
	border-radius: 50%;
	position: relative;
	transition: transform 0.2s;
}
[class^="menu__btn"]::after{
	content: "";
	width: 40px;
	height: 40px;
	background: url("../images/arrow_wh.svg") var(--c-main) no-repeat center center / 35%;
	border-radius: 50%;
	position: absolute;
	right: 0;
	bottom: 0;
	transform: rotate(90deg);
	filter: drop-shadow(0 0 10px rgba(0,0,0,.1));
}
.menu__ico{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 77px;
	height: 77px;
	font-size: 1.4rem;
	font-weight: var(--fw-bold);
	color: var(--c-main);
	text-align: center;
	line-height: var(--lh-small);
	position: absolute;
	top: -10px;
	left: -10px;
	filter: drop-shadow(0 0 10px rgba(0,0,0,.1));
}
.menu__ico::after{
	content: "";
	width: 100%;
	height: 100%;
	background: url("../images/bg_menu.svg") no-repeat center center / cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.menu__img{
	position: absolute;
	transition: transform 0.2s;
	z-index: 10;
}
.menu__txt{
	position: absolute;
	top: 0;
	left: 0;
}
/* hover */
[class^="menu__btn"]:hover{
	transform: scale(1.1);
	opacity: 1;
}
[class^="menu__btn"]:hover .menu__ico::after{
	animation: spin 3.0s linear infinite;
}
[class^="menu__btn"]:hover .menu__img{
	transform: scale(1.1);
}
/* デコレーション */
.menu__btn-deco .menu__ico{
	padding-bottom: 5px;
	font-size: 1.2rem;
}
@media screen and (max-width:812px){
	#menu{
		width: 100%;
		padding: 60px 20px;
	}
	.menu__tit{
		margin-bottom: 20px;
		font-size: 4.0rem;
	}
	.menu__list{
		gap: 10px;
	}
	.menu__list li:nth-of-type(1){
		margin-left: 0;
	}
	.menu__list li:nth-of-type(3){
		margin-right: 0;
	}
	[class^="menu__btn"]{
		width: 150px;
		height: 150px;
	}
	[class^="menu__btn"]::after{
		width: 34px;
		height: 34px;
	}
	.menu__ico{
		width: 65px;
		height: 65px;
		font-size: 1.2rem;
	}
	/* hover */
	[class^="menu__btn"]:hover{
		transform: none;
		opacity: 1;
	}
	[class^="menu__btn"]:hover .menu__ico::after{
		animation: none;
	}
	[class^="menu__btn"]:hover .menu__img{
		transform: none;
	}
	/* デコレーション */
	.menu__btn-deco .menu__ico{
		padding-bottom: 0;
		font-size: 1.0rem;
	}
}


/*
	kv
-----------------------------------------------------------------------------------------------*/
#kv{
	position: relative;
}
.kv__area{
	display: flex;
	align-items: center;
	width: 1200px;
	margin: 0 auto;
	padding: 10px 30px 80px;
	position: relative;
}
.kv__bnr{
	display: block;
	width: 15%;
	max-width: 250px;
	position: absolute;
	right: 30px;
	bottom: -60px;
	z-index: 20;
	animation: upDown 5s ease 0s infinite;
}
.kv__txtArea{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	margin-top: 40px;
	position: relative;
	z-index: 10;
}
.kv__logo{
	width: 550px;
}
.kv__illust{
	width: 150px;
	position: absolute;
	top: 90px;
	right: 20px;
}
.kv__copy{
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 10px;
	padding-left: 120px;
}
.kv__copy span{
	padding: 10px 15px;
	font-size: 2.2rem;
	white-space: nowrap;
	line-height: var(--lh-none);
	color: var(--c-main);
	font-weight: var(--fw-bold);
	background-color: var(--c-wh);
	border: 1px solid var(--c-main);
	border-radius: 3px;
}
.swiper__out{
	margin-left: -80px;
	position: relative;
	z-index: 9;
}
.swiper__out::before{
	content: "";
	width: 700px;
	height: 80px;
	background: url("../images/deco_kv_top.svg") no-repeat center center /cover;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%);
	z-index: 10;
}
.swiper__out::after{
	content: "";
	width: 100%;
	height: 45px;
	background: url("../images/deco_kv_btm.svg") no-repeat center center /cover;
	position: absolute;
	left: 50%;
	bottom: -35px;
	transform: translate(-50%);
	z-index: 10;
}
[class^="kv_item"]{
	position: absolute;
	z-index: 20;
}
.kv_item01{
	width: 15%;
	top: -5%;
	left: -24%;
}
.kv_item02{
	width: 22%;
	top: 20%;
	right: -6%;
}
.kv_item03{
	width: 22%;
	right: -2%;
	bottom: 16%;
}
.kv_item04{
	width: 20%;
	left: -6%;
	bottom: -5%;
	z-index: 1;
}
.kv__list{
	width: 650px;
}
.kv__list li{
	border-radius: var(--br-30px);
	overflow: hidden;
}
.kv__list li img{
	width: 100%;
}
@media screen and (max-width:812px){
	.kv__area{
		flex-direction: column;
		gap: 20px;
		width: 100%;
		max-width: 500px;
		padding: 10px 20px 80px;
	}
	.kv__bnr{
		width: 32%;
		max-width: 160px;
		right: 15px;
		bottom: -15px;
	}
	.kv__txtArea{
		width: 100%;
		margin-top: 0;
	}
	.kv__logo{
		width: 90%;
	}
	.kv__illust{
		width: 26%;
		position: absolute;
		top: 18%;
		right: 20px;
	}
	.kv__copy{
		gap: 3px;
		padding-left: 20%;
	}
	.kv__copy span{
		white-space: inherit;
		padding: 5px 10px;
		font-size: 1.4rem;
		border-radius: 2px;
	}
	.swiper__out{
		margin-left: 0;
	}
	.swiper__out::before{
		width: 105%;
		height: 14%;
	}
	.swiper__out::after{
		width: 105%;
		height: 8%;
		bottom: -15px;
	}
	.kv_item01{
		width: 15%;
		top: -25%;
		left: -7%;
	}
	.kv_item02{
		top: -20%;
		right: -2%;
	}
	.kv_item03{
		width: 25%;
		right: -5%;
		bottom: 25%;
	}
	.kv_item04{
		width: 32%;
		left: -1%;
		bottom: -10%;
	}
	.kv__list{
		width: 85vw;
		max-width: 400px;
	}
}


/*
	飲食店さまへ
-----------------------------------------------------------------------------------------------*/
#shop{
	position: relative;
}
.shop__bg{
	background: url("../images/bg_shop.png") no-repeat center center / cover;
	-webkit-mask:url("../images/mask_shop_pc.svg") repeat-x center center / contain;
}
.shop__bg::before{
	content: "";
	width: 100%;
	height: 100%;
	background-color: var(--c-main);
	opacity: 0.5;
	mix-blend-mode: multiply;
	filter: blur(0);
	position: absolute;
	top: 0;
	left: 0;
}
.shop__bg .ctsArea{
	padding: 150px 30px;
}
.shop__tit{
	margin-bottom: 20px;
	font-size: 2.6rem;
	color: var(--c-wh);
	text-align: center;
}
.shop__txt{
	margin-bottom: 30px;
	color: var(--c-wh);
	text-align: center;
}
.shop__txtSub{
	margin-top: 30px;
	font-size: 1.6rem;
	color: var(--c-wh);
	text-align: center;
}
.shop__list{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: end;
	gap: 20px;
}
.shop__list li{
	width: 280px;
}
.shop__fukidashi{
	display: block;
	width: 250px;
	margin: -45px auto 0;
}
[class^="shop__item"]{
	position: absolute;
	z-index: 20;
}
.shop__item01{
	width: 13%;
	max-width: 160px;
	right: 5%;
	bottom: -2%;
}
@media screen and (max-width:812px){
	.shop__bg{
		background: url("../images/bg_shop.png") no-repeat center center / cover;
		-webkit-mask:url("../images/mask_shop_sp.svg") repeat-x top center / contain;
	}
	.shop__bg .ctsArea{
		padding: 80px 20px 90px;
	}
	.shop__tit{
		margin-bottom: 15px;
		font-size: 2.0rem;
	}
	.shop__txt{
		margin-bottom: 15px;
		text-align: left;
	}
	.shop__txtSub{
		margin-top: 15px;
		font-size: 1.4rem;
		text-align: left;
	}
	.shop__list{
		gap: 15px;
	}
	.shop__list li{
		width: calc((100% - 15px)/2);
		max-width: 180px;
	}
	.shop__fukidashi{
		width: 100%;
		margin: -20px auto 0;
	}
	.shop__item01{
		width: 24%;
		max-width: 120px;
	}
}


/*
	cone
-----------------------------------------------------------------------------------------------*/
#cone{
	position: relative;
}
#cone::before{
	content: "";
	width: 80%;
	height: 80%;
	background-color: var(--bgc-main);
	border-radius: 100px 0 0 100px;
	mix-blend-mode: multiply;
	position: absolute;
	top: 165px;
	right: 0;
}
#cone::after{
	content: "";
	width: 80%;
	height: 80%;
	background-color: rgba(255, 255, 255, 0);
	background-size: auto auto;
	background-image: repeating-linear-gradient(-45deg, transparent, transparent 30px, rgba(255, 255, 255, 0.41) 30px, rgba(255, 255, 255, 0.41) 33px );
	border-radius: 100px 0 0 100px;
	position: absolute;
	top: 165px;
	right: 0;
}
.cone__itemBox{
	margin-bottom: 120px;
}
.cone__itemBox:last-of-type{
	margin-bottom: 0;
}
[class^="cone_item"]{
	position: absolute;
	z-index: 20;
}
.cone_item01{
	width: 17%;
	right: 8%;
	bottom: 40%;
}
/* メニュー写真 */
.list__menu-cone li:nth-of-type(1),
.list__menu-cone li:nth-of-type(4){
	margin-top: 100px;
}
.list__menu-cone li:nth-of-type(2),
.list__menu-cone li:nth-of-type(5){
	margin-top: 50px;
}
@media screen and (max-width:812px){
	#cone::before{
		width: 85%;
		height: 90%;
		border-radius: 50px 0 0 50px;
		top: 90px;
	}
	#cone::after{
		width: 85%;
		height: 90%;
		border-radius: 50px 0 0 50px;
		top: 90px;
	}
	.cone__itemBox{
		margin-bottom: 100px;
	}
	.cone_item01{
		width: 30%;
		bottom: 53%;
	}
	/* メニュー写真 */
	.list__menu-cone li:nth-of-type(1),
	.list__menu-cone li:nth-of-type(4){
		margin-top: 0;
	}
	.list__menu-cone li:nth-of-type(2),
	.list__menu-cone li:nth-of-type(5){
		margin-top: 0;
	}
}


/*
	parfait
-----------------------------------------------------------------------------------------------*/
#parfait{
	position: relative;
}
#parfait::before{
	content: "";
	width: 97%;
	height: 65%;
	background-color: var(--bgc-main);
	border-radius: 0 100px 100px 0;
	mix-blend-mode: multiply;
	position: absolute;
	top: 165px;
	left: 0;
}
#parfait::after{
	content: "";
	width: 97%;
	height: 65%;
	background: url("../images/bg_grid.svg") center center repeat;
	background-size: 50px 50px;
	border-radius: 0 100px 100px 0;
	position: absolute;
	top: 165px;
	left: 0;
	opacity: 0.5;
}
[class^="parfait_item"]{
	position: absolute;
	z-index: 20;
}
.parfait_item01{
	width: 20%;
	left: 5%;
	top: 6%;
}
.parfait_item02{
	width: 20%;
	top: 2%;
	right: 3%;
}
/* 見出し */
.cmn__midashi-parfait{
	justify-content: center;
	margin-bottom: 30px;
}
.cmn__midashiTxtArea-parfait{
	text-align: center;
}
/* メニュー写真 */
.list__masonry-parfait li:nth-of-type(2){
	padding-top: 50px;
}
@media screen and (max-width:812px){
	#parfait::before{
		width: 90%;
		height: 65%;
		border-radius: 0 50px 50px 0;
		top: 90px;
	}
	#parfait::after{
		width: 90%;
		height: 65%;
		border-radius: 0 50px 50px 0;
		top: 90px;
	}
	.parfait_item01{
		width: 34%;
		left: -2%;
		top: 5%;
	}
	.parfait_item02{
		width: 35%;
		max-width: 135px;
		top: 6%;
		right: 2%;
	}
	/* 見出し */
	.cmn__midashi-parfait{
		justify-content: center;
		margin-bottom: 30px;
	}
	.cmn__midashiTxtArea-parfait{
		text-align: center;
	}
	/* メニュー写真 */
	.list__masonry-parfait li:nth-of-type(2){
		padding-top: 0;
	}
}


/*
	decoration
-----------------------------------------------------------------------------------------------*/
#decoration{
	position: relative;
}
#decoration::before{
	content: "";
	width: 100%;
	height: 80%;
	background-color: var(--c-wh);
	border-radius: 250px;
	position: absolute;
	top: 165px;
	left: 0;
}
#decoration::after{
	content: "";
	width: 100%;
	height: 80%;
	background-image: radial-gradient(var(--bgc-accent) 15%, transparent 15%),
					  radial-gradient(var(--bgc-accent) 15%, transparent 15%);
	background-size: 20px 20px;
	background-position: 0 0, 10px 10px;
	border-radius: 250px;
	position: absolute;
	top: 165px;
	left: 0;
	opacity: 0.2;
}
[class^="decoration_item"]{
	position: absolute;
	z-index: 20;
}
.decoration_item01{
	width: 14%;
	left: 5%;
	top: 6%;
}
.decoration_item02{
	width: 14%;
	right: 3%;
	top: 5%;
}
.decoration_item03{
	width: 7%;
	left: 10%;
	bottom: 33%;
}
.decoration_item04{
	width: 15%;
	right: 6%;
	bottom: 28%;
}
.decoration_item05{
	width: 18%;
	left: 0;
	bottom: -8%;
}
/* 見出し */
.cmn__midashi-deco{
	justify-content: center;
	margin-bottom: 30px;
}
.cmn__midashiTxtArea-deco{
	text-align: center;
}
/* メニュー写真 */
.list__masonry-deco li:nth-of-type(1),
.list__masonry-deco li:nth-of-type(3){
	padding-top: 50px;
}
@media screen and (max-width:812px){
	#decoration::before{
		height: 80%;
		border-radius: var(--br-50px);
		top: 90px;
	}
	#decoration::after{
		height: 80%;
		border-radius: var(--br-50px);
		top: 90px;
	}
	/* tit */
	#decoration [class^="cmn__titMain"] .en{
		line-height: 0.9;
	}
	.decoration_item01{
		width: 22%;
		left: 0;
		top: 3.5%;
	}
	.decoration_item02{
		width: 25%;
		right: -2%;
		top: 3%;
	}
	.decoration_item03{
		width: 16%;
		left: 6%;
		bottom: 27%;
	}
	.decoration_item04{
		width: 25%;
		right: 6%;
		bottom: 37%;
	}
	.decoration_item05{
		width: 38%;
		max-width: 130px;
		left: -1%;
		bottom: -9%;
	}
	/* 見出し */
	.cmn__midashi-deco{
		justify-content: center;
		margin-bottom: 30px;
	}
	.cmn__midashiTxtArea-deco{
		text-align: center;
	}
	/* メニュー写真 */
	.list__masonry-deco li:nth-of-type(1),
	.list__masonry-deco li:nth-of-type(3){
		padding-top: 0;
	}
}


/*
	shake
-----------------------------------------------------------------------------------------------*/
#shake{
	position: relative;
}
#shake::before{
	content: "";
	width: 80%;
	height: 90%;
	background-color: var(--bgc-main);
	border-radius: 0 100px 100px 0;
	mix-blend-mode: multiply;
	position: absolute;
	top: 165px;
	left: 0;
}
#shake::after{
	content: "";
	width: 80%;
	height: 90%;
	background: url("../images/bg_wave.svg") left top repeat;
	background-size: 60px 60px;
	border-radius: 0 100px 100px 0;
	position: absolute;
	top: 165px;
	left: 0;
	opacity: 0.5;
}
.shake__itemBox{
	margin-bottom: 120px;
	position: relative;
}
.shake__itemBox:last-of-type{
	margin-bottom: 0;
}
[class^="shake_item"]{
	position: absolute;
	z-index: 20;
}
.shake_item01{
	width: 14%;
	top: 4%;
	right: 10%;
}
.shake_item02{
	width: 14%;
	right: 0;
	bottom: 26%;
}
.shake_item03{
	width: 19%;
	top: -6%;
	left: -1%;
}
.shake_item04{
	width: 24%;
	right: 20%;
	bottom: -11%;
}
.shake_item05{
	width: 13%;
	top: 12%;
	right: 1%;
}
.shake_item06{
	width: 23%;
	top: 25%;
	right: 2%;
	z-index: -1;
}
.shake_item07{
	width: 17%;
	right: -1%;
	bottom: 22%;
}
.shake_item08{
	width: 33%;
	right: -1%;
	bottom: -3%;
}
/* 見出し */
[class^="cmn__midashi-shake"]{
	display: flex;
	align-items: end;
	margin-bottom: 40px;
}
/* メニュー写真 */
.list__menu-shake li:nth-of-type(1),
.list__menu-shake li:nth-of-type(4){
	padding-top: 100px;
}
.list__menu-shake li:nth-of-type(2),
.list__menu-shake li:nth-of-type(5){
	padding-top: 50px;
}
.list__menu-shake02 li:nth-of-type(3){
	padding-top: 100px;
}
.list__menu-shake02 li:nth-of-type(4){
	padding-top: 50px;
}
/* 作り方・アイデア */
.flow__list-shake{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}
.flow__list-shake li{
	width: calc((100% - 60px)/3);
}
@media screen and (max-width:812px){
	#shake::before{
		width: 85%;
		height: 90%;
		border-radius: 0 50px 50px 0;
		top: 90px;
	}
	#shake::after{
		width: 85%;
		height: 90%;
		border-radius: 0 50px 50px 0;
		top: 90px;
	}
	.shake__itemBox{
		margin-bottom: 100px;
	}
	.shake_item01{
		width: 21%;
		top: 1%;
		right: 2%;
	}
	.shake_item02{
		width: 24%;
		right: -2%;
		bottom: 21%;
	}
	.shake_item03{
		display: none;
	}
	.shake_item04{
		width: 48%;
		max-width: 165px;
		right: auto;
		left: 9%;
		bottom: -12%;
	}
	.shake_item05{
		width: 20%;
		right: -2%;
	}
	.shake_item06{
		width: 40%;
		top: auto;
		right: -2%;
		bottom: 33%;
	}
	.shake_item07{
		display: none;
	}
	.shake_item08{
		width: 82%;
		max-width: 300px;
		right: -2%;
		bottom: -4%;
	}
	/* 見出し */
	[class^="cmn__midashi-shake"]{
		margin-bottom: 30px;
		position: relative;
	}
	.cmn__midashi-shake02 .cmn__midashiImg{
		top: -20%;
	}
	/* メニュー写真 */
	.list__menu-shake li:nth-of-type(1),
	.list__menu-shake li:nth-of-type(4){
		padding-top: 0;
	}
	.list__menu-shake li:nth-of-type(2),
	.list__menu-shake li:nth-of-type(5){
		padding-top: 0;
	}
	.list__menu-shake02 li:nth-of-type(3){
		padding-top: 0;
	}
	.list__menu-shake02 li:nth-of-type(4){
		padding-top: 0;
	}
	/* swiper */
	#shake01 .flow .swiper-slide {
		min-height: auto;
	}
	#shake02 .flow .swiper-slide {
		min-height: 330px;
	}
}


/*
	modal
-----------------------------------------------------------------------------------------------*/
.modal_box {
	display: none;
	width: 90%;
	max-width: 1000px;
	margin: 0;
    position: fixed;
    z-index: 7777;
}
.modal__itemArea{
	max-height: 85vh;
	padding: 60px;
	background-color: var(--c-wh);
	border-radius: var(--br-50px);
	overflow-y: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.modal__tit{
	margin-bottom: 10px;
	font-family: var(--ff-en);
	font-size: 7.5rem;
	font-weight: var(--fw-bold);
	color: var(--c-main);
	text-align: center;
}
/* modal_close */
.modal_close {
	width: 55px;
	height: 55px;
	background-color: var(--c-main);
	border-radius: 50%;
    position: absolute;
    top: -15px;
    right: -15px;
	cursor: zoom-out;
	transition: transform 0.2s;
}
.modal_close::before,
.modal_close::after{
	content: '';
	width: 1px;
	height: 20px;
	background-color: var(--c-wh);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
	transition: transform 0.2s;
}
.modal_close::after{
	transform: translate(-50%, -50%) rotate(-45deg);
}
.modal_close:hover{
	opacity: 1.0;
	transform: rotate(180deg);
}
/* modal_bg */
.modal_bg {
	display: none;
	width: 100%;
	height: 120%;
	background-color: var(--bgc-main);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 6666;
	opacity: 0.98;
	cursor: zoom-out;
}
/* list */
[class^="product__list"]{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px;
}
[class^="product__list"] > li{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 300px;
}
.product__img{
	display: block;
	width: 80%;
	margin: 0 auto 20px;
}
.product__name{
	margin-bottom: 20px;
	font-size: 1.8rem;
	font-weight: var(--fw-bold);
	color: var(--c-main);
	text-align: center;
	line-height: 1.5;
}
.product__txt{
	font-size: 1.4rem;
	text-align: justify;
	line-height: var(--lh-tall);
}
.spec__list{
	display: flex;
	flex-wrap: wrap;
	margin-top: 15px;
	padding: 10px 0;
	border-top: 2px dotted var(--c-gry);
	border-bottom: 2px dotted var(--c-gry);
}
.spec__list > li{
	margin-right: 15px;
	padding-left: 13px;
	font-size: 1.2rem;
	color: var(--c-gry);
	position: relative;
}
.spec__list > li::before{
	content: '●';
	padding-right: 2px;
	font-size: 1.1rem;
	position: absolute;
	top: 1px;
	left: 0;
}
@media screen and (max-width:812px){
	.modal_box {
		max-width: 500px;
	}
	.modal__itemArea{
		padding: 30px;
		border-radius: var(--br-30px);
	}
	.modal__tit{
		font-size: 4.0rem;
	}
	/* modal_close */
	.modal_close {
		width: 45px;
		height: 45px;
		top: -10px;
		right: -10px;
	}
	.modal_close::before,
	.modal_close::after{
		height: 18px;
	}
	/* list */
	[class^="product__list"]{
		gap: 50px 15px;
	}
	[class^="product__list"] > li{
		width: 100%;
		max-width: 300px;
	}
	.product__img{
		width: 60%;
		margin: 0 auto 15px;
	}
	.product__name{
		margin-bottom: 15px;
		font-size: 1.6rem;
	}
}

/* modal_レシピ
==================================== */
.recipe{
	display: flex;
	justify-content: center;
	gap: 40px;
	font-size: 1.4rem;
}
.recipe__img{
	width: 350px;
}
.recipe__txtArea{
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 400px;
	margin-top: 25px;
}
.recipe__tit{
	font-size: 1.8rem;
	font-weight: var(--fw-bold);
	color: var(--c-main);
}
.recipe__txt{
	text-align: justify;
}
.recipe__list{
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.recipe__list li{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 10px;
	border-bottom: 2px dotted var(--c-gry);
}
.recipe__list li.tit{
	font-weight: var(--fw-bold);
	color: var(--c-main);
	border-bottom: 2px solid var(--c-main);
}
.recipe__list li span:first-of-type{
	width: 80%;
}
.recipe__list li span:last-of-type{
	width: 15%;
	text-align: right;
}
.recipe__inquiry{
	display: flex;
	flex-direction: column;
}
.recipe__inquiryTit{
	padding: 8px;
	color: var(--c-wh);
	text-align: center;
	background-color: var(--c-gry);
	border-radius: 10px 10px 0 0;
}
.recipe__inquiryList{
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 20px;
	border: 1px solid var(--c-gry);
	border-radius: 0 0 10px 10px;
}
.recipe__inquiryList li span{
	display: inline-block;
	width: 50px;
	padding: 2px;
	margin-right: 10px;
	font-size: 1.2rem;
	text-align: center;
	border: 1px solid;
	line-height: 1.0;
}
@media screen and (max-width:812px){
	.recipe{
		flex-direction: column;
		gap: 20px;
	}
	.recipe__img{
		width: 80%;
		max-width: 250px;
		margin: 0 auto;
	}
	.recipe__txtArea{
		width: 100%;
		gap: 15px;
		margin-top: 0;
	}
	.recipe__tit{
		font-size: 1.8rem;
	}
	.recipe__list{
		gap: 8px;
	}
	.recipe__list li{
		padding-bottom: 8px;
	}
	.recipe__list li.tit{
		font-weight: var(--fw-bold);
		color: var(--c-main);
		border-bottom: 2px solid var(--c-main);
	}
	.recipe__inquiry{
		display: flex;
		flex-direction: column;
		font-size: 1.2rem;
	}
	.recipe__inquiryList{
		display: flex;
		flex-direction: column;
		gap: 5px;
		padding: 15px;
	}
	.recipe__inquiryList li span{
		width: 40px;
		margin-right: 5px;
		font-size: 1.0rem;
	}
}

/*
	事業者の方へ
-----------------------------------------------------------------------------------------------*/
#business{
	background: url("../images/bg_business.png") no-repeat top center / cover;
	border-radius: 250px 250px 0 0;
	position: relative;
}
#business::before{
	content: "";
	width: 100%;
	height: 100%;
	background-color: var(--c-main);
	border-radius: 250px 250px 0 0;
	opacity: 0.5;
	mix-blend-mode: multiply;
	position: absolute;
	top: 0;
	left: 0;
}
.business__tit{
	margin-bottom: 20px;
	font-size: 2.6rem;
	color: var(--c-wh);
	text-align: center;
}
.business__txt{
	color: var(--c-wh);
	text-align: center;
}
.business__bnr{
	display: block;
	width: 15%;
	max-width: 250px;
	position: absolute;
	top: -40px;
	right: 30px;
	z-index: 10;
	animation: upDown 5s ease 0s infinite;
}
@media screen and (max-width:812px){
	#business{
		background: url("../images/bg_business.png") no-repeat top center / cover;
		border-radius: 50px 50px 0 0;
	}
	#business::before{
		border-radius: 50px 50px 0 0;
	}
	#business .ctsArea{
		padding: 40px 30px 90px;
	}
	.business__tit{
		margin-bottom: 15px;
		font-size: 2.0rem;
	}
	.business__txt{
		text-align: left;
	}
	.business__bnr{
		width: 30%;
		max-width: 160px;
		top: -40px;
		right: 15px;
	}
}


/*
	pageTop
-----------------------------------------------------------------------------------------------*/
#pageTop{
	display: flex;
	justify-content: center;
	align-items: center;
	width:80px;
	height:80px;
	margin-bottom: 30px;
	background-color: var(--c-main);
	border: 1px solid var(--c-wh);
	border-radius: 50%;
	position: absolute;
	right: 30px;
	z-index: 88;
}
#pageTop::after{
	content: "";
	width: 100%;
	height: 100%;
	display:block;
	width:50px;
	height:50px;
	background: url("../images/arrow_wh.svg") no-repeat center center / 50%;
	transform: rotate(-90deg);
	transition: margin 0.2s;
}
#pageTop:hover{
	opacity: 1.0;
}
#pageTop:hover::after{
	margin-bottom: 10px;
}
@media screen and (max-width:812px){
	#pageTop{
		width:60px;
		height:60px;
		margin-bottom: 15px;
		right: 15px;
	}
	#pageTop::after{
		width:40px;
		height:40px;
	}
}


/*
	footer
-----------------------------------------------------------------------------------------------*/
#footer{
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 30px;
	background-color: var(--c-wh);
	position: relative;
}
#footer > [class^="footer__"]{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
.footer__btm{
	flex-direction: row-reverse;
}
/* テキストリンク */
a.footer__txtLink{
	padding-left: 20px;
	position: relative;
}
.footer__txtLink::before{
	content: "";
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--c-bk);
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
.footer__txtLink::after{
	content: "";
	width: 4px;
	height: 4px;
	border-top: 1px solid var(--c-wh);
	border-right: 1px solid var(--c-wh);
	position: absolute;
	top: 50%;
	left: 5px;
	transform: translateY(-50%) rotate(45deg);
}
.footer__copyright{
	font-size: 1.2rem;
}
/* リスト */
#footer__list{
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}
#footer__list li{
	padding-left: 15px;
	font-size: 1.3rem;
	position: relative;
}
#footer__list li::after{
	content:'|';
	position: absolute;
	left: 0;
}
#footer__list li a{
	text-decoration: underline;
}
#footer__list li a:hover{
	opacity: 1.0;
	text-decoration: none;
}
#footer__list li:first-of-type::after{
	content: none;
}
@media screen and (max-width:812px){
	#footer{
		gap: 15px;
	}
	#footer > [class^="footer__"]{
		justify-content: center;
		flex-direction: column;
		gap: 15px;
	}
	/* リスト */
	#footer__list{
		justify-content: center;
	}
	#footer__list li:first-of-type{
		padding-left: 0;
	}
}