:root {
    --color-white: #fff;
    --color-white-20: rgba(255, 255, 255, 0.2);
    --color-white-80: rgba(255, 255, 255, 0.8);
	--color-text: #231815;
    --color-black: #000000;
    --color-gray: #9FA0A0;
    --color-blue: #005bab;
    --color-red: #ed323f;
    --color-green: #3eb370;
    --color-green-bg: #ebf5ec;
    --color-orange: #f4811f;
    --color-orange-bg: #ffe4cc;
    --color-yellow: #FFDB00;
    --color-blue-bg: #d2daee;
    --color-pink-bg: #f0afa0;
	--color-red-1: linear-gradient(to right, #ed5531, #ed313f 80%);
	--color-red-2: linear-gradient(to bottom, #e89732, #db313c 100%);
	--color-about: linear-gradient(to right, #ebf5ec 0%, #ebf5ec 50%, #ffe4cc 50%, #ffe4cc 100%);
    --font-sans: "Noto Sans JP", sans-serif;
	--font-size-12: 1.2rem;
	--font-size-14: 1.4rem;
	--font-size-16: 1.6rem;
	--font-size-18: 1.8rem;
	--font-size-20: 2rem;
	--font-size-22: 2.2rem;
	--font-size-24: 2.4rem;
	--font-size-32: 3.2rem;
	--font-size-34: 3.4rem;
	--font-size-40: 4rem;
	--font-size-43: 4.3rem;
	--font-size-8-sp: 2.13vw;
	--font-size-12-sp: 3.2vw;
	--font-size-14-sp: 3.73vw;
	--font-size-16-sp: 4.26vw;
	--font-size-18-sp: 4.8vw;
	--font-size-20-sp: 5.33vw;
	--font-size-24-sp: 6.4vw;
	--font-size-28-sp: 7.46vw;
	--font-size-32-sp: 8.53vw;
	--text-shadow: 7px 7px 5px rgba(0, 0, 0, 0.75);
	--text-shadow-sp: 2.5px 2.5px 1.8px rgba(0, 0, 0, 0.75);
    --width-pc-1: 1200px;
    --width-pc-2: 990px;
    --width-pc-3: 960px;
    --width-pc-4: 860px;
    --width-sp-1: 100%;
    --width-sp-2: 92%;
    --width-sp-3: 86%;
}
.pc {
	display: block;
}
@media (max-width:769px){
	.pc {
		display: none;
	}
}
@media (min-width: 770px){
	.sp{
		display: none;
	}
}

html {
	font-size: 62.5%;
}
body {
	color: var(--color-text);
	font-family: var(--font-sans);
	font-optical-sizing: auto;
	font-weight: 400;
	font-size: var(--font-size-16);
	line-height: 1.5em;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
#wrapper {
	overflow: hidden;
}

/*---------------------------------------
header
---------------------------------------*/
header {
}
header div picture,
header div img {
	width: 100%;
	vertical-align: bottom;
}
header > .header-wrap {
    height: 195px;
    position: relative;
    z-index: 10;
}
header > .header-wrap > .header-area {
    height: 100%;
    background: var(--color-red-1);
    border-bottom-right-radius: 2000px 150px;
    border-bottom-left-radius: 2000px 150px;
    margin-left: -200px;
    margin-right: -200px;
    padding-left: 200px;
    padding-right: 200px;
}
header > .header-wrap > .header-area > .header-inner {
	width: 100%;
	height: 100%;
	position: relative;
}
header > .header-wrap > .header-area > .header-inner > h1 {
	padding: 25px 0 0 0;
	margin: 0 auto 0 auto;
	width: 366px;
}
header > .header-wrap > .header-area > .header-inner > .slide-btn {
	display: none;
}
header > .header-wrap > .header-area > .header-inner > .slide-nav {
}
header > .header-wrap > .header-area > .header-inner > .slide-nav ul {
	display: flex;
	justify-content: center;
	list-style: none;
	margin: 20px 0 0 0;
}
header > .header-wrap > .header-area > .header-inner > .slide-nav ul li {
}
header > .header-wrap > .header-area > .header-inner > .slide-nav ul li::before {
	content: "｜";
	color: var(--color-white);
}
header > .header-wrap > .header-area > .header-inner > .slide-nav ul li:first-child::before {
	content: none;
}
header > .header-wrap > .header-area > .header-inner > .slide-nav ul li a {
	color: var(--color-white);
	text-decoration: none;
}
header > .header-wrap > .header-area > .header-inner > .slide-nav ul li a:hover {
	text-decoration: underline;
}

@media only screen and (max-width:769px){
	header {
	}

	header > .header-wrap {
		height: 24vw;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
	}
	header > .header-wrap > .header-area > .header-inner > h1 {
		padding: 4.8vw 0 0 0;
		width: 57.86vw;
	}
	header > .header-wrap > .header-area > .header-inner > .slide-btn {
		display: block;
	}
	header .slide-btn {
		position: absolute;
		top: 50%;
		right: 16px;
		transform: translateY(-50%);
		width: 32px;
		height: 24px;
		cursor: pointer;
	}
	header .slide-btn > div {
		position: relative;
		width: 100%;
		height: 100%;
	}
	header .slide-btn span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 3px;
		border-radius: 2px;
		background-color: var(--color-white);
		transition:
			transform 0.3s ease,
			top 0.3s ease,
			bottom 0.3s ease,
			opacity 0.3s ease;
	}
	header .slide-btn span:nth-child(1) {
		top: 0;
	}
	header .slide-btn span:nth-child(2) {
		top: 50%;
		transform: translateY(-50%);
	}
	header .slide-btn span:nth-child(3) {
		bottom: 0;
	}
	header .slide-btn.is-open span:nth-child(1) {
		top: 50%;
		transform: translateY(-50%) rotate(45deg);
	}
	header .slide-btn.is-open span:nth-child(2) {
		opacity: 0;
	}
	header .slide-btn.is-open span:nth-child(3) {
		bottom: auto;
		top: 50%;
		transform: translateY(-50%) rotate(-45deg);
	}
	header > .header-wrap > .header-area > .header-inner > .slide-nav {
		position: fixed;
		top: -100vh;
		left: 0;
		width: 100%;
		background: var(--color-red-1);
		transition: top 0.3s ease;
		z-index: 90;
	}
	header > .header-wrap > .header-area > .header-inner > .slide-nav.is-open {
		top: 21vw;
	}
	header > .header-wrap > .header-area > .header-inner > .slide-nav nav ul {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		list-style: none;
		margin: 0;
		padding: 12px 16px 16px;
	}
	header > .header-wrap > .header-area > .header-inner > .slide-nav nav ul li {
		width: 100%;
		margin: 4px 0;
	}
	header > .header-wrap > .header-area > .header-inner > .slide-nav nav ul li::before {
		content: none;
	}
	header > .header-wrap > .header-area > .header-inner > .slide-nav nav ul li a {
		display: block;
		width: 100%;
		color: var(--color-white);
		text-decoration: none;
		padding: 8px 0;
	}
}



main {
	position: relative;
	z-index: 1;
	margin-top: -2.2%;
}

@media only screen and (max-width:769px){
	main {
		margin-top: 21vw;
	}
}

section > div h1 {
	font-size: var(--font-size-34);
	font-weight: 700;
	margin: 0 0 2em 0;
	text-align: center;
}
section > div h1 span {
	position: relative;
	display: inline-block;
	padding: 0 2.5rem 1.8rem;
	border-bottom: 4px solid var(--color-black);
}
section > div h1 span::before {
	position: absolute;
	top: auto;
	bottom: 0;
	right: 1em;
	transform: none;
	width: 0;
	height: 0;
	content: '';
	border-width: 0 12px 14px 12px;
	border-style: solid;
	border-color: transparent transparent var(--color-black) transparent;
}
section > div h1 span::after {
	position: absolute;
	top: auto;
	bottom: -5px;
	right: 1em;
	transform: none;
	width: 0;
	height: 0;
	content: '';
	border-width: 0 12px 14px 12px;
	border-style: solid;
	border-color: transparent transparent var(--color-white) transparent;
}
@media only screen and (max-width:769px){
	section > div h1 {
		font-size: var(--font-size-20-sp);
	}
	section > div h1 span {
	}
	section > div h1 span::before {
	}
	section > div h1 span::after {
	}
}




/*---------------------------------------
mainvisual
---------------------------------------*/
main > #mainvisual {
}
main > #mainvisual > .main-slide {
    position: relative;
	height: 520px;
	width: 100%;
}
main > #mainvisual > .main-slide h2 {
	font-size: var(--font-size-43);
	color: var(--color-white);
	text-shadow: var(--text-shadow);
	line-height: 1.25em;
	text-align: center;
}
main > #mainvisual > .main-slide > .main-slide1,
main > #mainvisual > .main-slide > .main-slide2 {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
main > #mainvisual > .main-slide > .main-slide1 {
	background-image: url('/files/user/images/lp/sharerestaurant/slide1.jpg');
	display: flex;
	align-items: center;
	position: relative;
}
main > #mainvisual > .main-slide > .main-slide2 {
	background-image: url('/files/user/images/lp/sharerestaurant/slide2.jpg');
	display: flex;
	align-items: center;
}

main > #mainvisual > .main-slide > .main-slide1.active,
main > #mainvisual > .main-slide > .main-slide2.active {
    opacity: 1;
}
main > #mainvisual > .main-slide .main-slide-area {
	width: var(--width-pc-2);
	margin: 0 auto 0 auto;
}
main > #mainvisual > .main-slide > .main-slide1 > .gnavi {
	position: absolute;
	top: 30px;
	right: 25px;
	width: 140px;
}
main > #mainvisual > .main-slide > .main-slide2 > .gnavi {
	position: absolute;
	bottom: 30px;
	right: 25px;
	width: 140px;
}
main > #mainvisual > .main-slide > .main-slide2 h2 {
	text-align: right;
	padding-right: 25px;
	margin-left: auto;
}

@media only screen and (max-width:769px){
	main > #mainvisual > .main-slide {
		height: 62.66vw;
	}
	main > #mainvisual > .main-slide h2 {
		font-size: var(--font-size-24-sp);
		text-shadow: var(--text-shadow-sp);
	}
	main > #mainvisual > .main-slide > .main-slide1,
	main > #mainvisual > .main-slide > .main-slide2 {
		background-size: 100% auto;
	}
	main > #mainvisual > .main-slide > .main-slide1 {
		background-image: url('/files/user/images/lp/sharerestaurant/slide1_sp.jpg');
		display: flex;
		align-items: center;
		position: relative;
	}
	main > #mainvisual > .main-slide > .main-slide2 {
		background-image: url('/files/user/images/lp/sharerestaurant/slide2_sp.jpg');
		display: flex;
		align-items: center;
	}
	main > #mainvisual > .main-slide > .main-slide1 > .gnavi {
		top: auto;
		bottom: 3.2vw;
		right: 6.6vw;
		width: 17.33%;
	}
	main > #mainvisual > .main-slide > .main-slide2 > .gnavi {
		bottom: 3.2vw;
		right: 6.6vw;
		width: 17.33%;
	}
	main > #mainvisual > .main-slide > .main-slide2 h2 {
		text-align: left;
		padding-right: 6.6vw;
		margin-left: auto;
	}
}


/*---------------------------------------
about
---------------------------------------*/
main > #about {
}
main > #about > .about-wrap {
	margin: 70px auto 70px auto;
}
main > #about > .about-wrap > .about-head {
	text-align: center;
}
main > #about > .about-wrap > .about-head h2 {
	margin: 45px 0 90px 0;
	line-height: 1.75em;
	font-size: var(--font-size-32);
}
main > #about > .about-wrap > .about-head h2 strong {
	color: var(--color-red);
}
main > #about > .about-wrap > .about-block {
	background: var(--color-about);
}
main > #about > .about-wrap > .about-block > .about-sp-img {
	display: none;
}
main > #about > .about-wrap > .about-block > .about-area {
	background-image: url('/files/user/images/lp/sharerestaurant/about_3.png');
	background-position: center 65px;
	background-size: 390px auto;
	background-repeat: no-repeat;
	width: var(--width-pc-4);
	margin: 0 auto 0 auto;
	display: flex;
}
main > #about > .about-wrap > .about-block > .about-area > .about-box {
	width: 50%;
}
main > #about > .about-wrap > .about-block > .about-area > .about-box h2 {
	color: var(--color-white);
	font-size: var(--font-size-24);
	font-weight: 700;
	text-align: center;
	position: relative;
}
main > #about > .about-wrap > .about-block > .about-area > .about-box h2 span {
	padding: 0.5em 1em;
	border-radius: 40px;
	position: relative;
	top: -0.75em;
}
main > #about > .about-wrap > .about-block > .about-area > .about-box-owner h2 span {
	background-color: var(--color-green);
}
main > #about > .about-wrap > .about-block > .about-area > .about-box-shopper h2 span {
	background-color: var(--color-orange);
}
main > #about > .about-wrap > .about-block > .about-area > .about-box .about-img {
	width: 206px;
	margin: 30px auto 30px auto;
}
main > #about > .about-wrap > .about-block > .about-area > .about-box .about-text {
	background-color: var(--color-white);
	border: solid 1px var(--color-black);
	border-radius: 10px;
	padding: 25px 45px 25px 45px;
	width: 380px;
}
main > #about > .about-wrap > .about-block > .about-area > .about-box-owner .about-text {
	margin: 30px auto 70px 0;
}
main > #about > .about-wrap > .about-block > .about-area > .about-box-shopper .about-text {
	margin: 30px 0 70px auto;
}
main > #about > .about-wrap > .about-block > .about-area > .about-box .about-text ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
main > #about > .about-wrap > .about-block > .about-area > .about-box .about-text ul li {
	position: relative;
	z-index: 0;
	font-size: var(--font-size-16);
	font-weight: 700;
	margin: 0 0 1em 0;
	padding-left: 32px;
}
main > #about > .about-wrap > .about-block > .about-area > .about-box .about-text ul li:last-child {
	margin: 0;
}
main > #about > .about-wrap > .about-block > .about-area > .about-box .about-text ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 25px;
	height: 38px;
	z-index: 1;
}
main > #about > .about-wrap > .about-block > .about-area > .about-box-owner .about-text ul li::before {
	background: url('/files/user/images/lp/sharerestaurant/about_4.svg') no-repeat center / contain;
}
main > #about > .about-wrap > .about-block > .about-area > .about-box-shopper .about-text ul li::before {
	background: url('/files/user/images/lp/sharerestaurant/about_5.svg') no-repeat center / contain;
}
main > #about > .about-wrap > .about-block > .about-area > .about-box .about-text ul li::after {
	content: "";
	position: absolute;
	left: 32px;
	right: 0;
	bottom: -0.1em;
	height: 0.7em;
	background: var(--color-yellow);
	z-index: -1;
}
@media only screen and (max-width:769px){
	main > #about {
	}
	main > #about > .about-wrap {
		margin: 10.2vw auto 10.2vw auto;
	}
	main > #about > .about-wrap > .about-head {
		text-align: center;
	}
	main > #about > .about-wrap > .about-head h2 {
		margin: 8.5vw 0 9.3vw 0;
		font-size: var(--font-size-18-sp);
	}
	main > #about > .about-wrap > .about-head h2 strong {
	}
	main > #about > .about-wrap > .about-block {
		background: none;
		position: relative;
	}
	main > #about > .about-wrap > .about-block > .about-sp-img {
		display: block;
		position: absolute;
		width: 54.66vw;
		left: 50%;
		transform: translateX(-50%);
		top: 80.8vw;
		z-index: 100;
	}
	main > #about > .about-wrap > .about-block > .about-area {
		background: none;
		width: var(--width-sp-1);
		flex-direction: column;
	}
	main > #about > .about-wrap > .about-block > .about-area > .about-box {
		width: var(--width-sp-1);
		position: relative;
	}
	main > #about > .about-wrap > .about-block > .about-area > .about-box-owner {
		background-color: var(--color-green-bg);
		padding: 0 0 37.06vw 0;
	}
	main > #about > .about-wrap > .about-block > .about-area > .about-box-shopper {
		background-color: var(--color-orange-bg);
		padding: 31.53vw 0 11.7vw 0;
	}
	main > #about > .about-wrap > .about-block > .about-area > .about-box h2 {
		font-size: var(--font-size-18-sp);
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 44.8vw;
	}
	main > #about > .about-wrap > .about-block > .about-area > .about-box-owner h2 {
	}
	main > #about > .about-wrap > .about-block > .about-area > .about-box-shopper h2 {
		top: 72.06vw;
	}
	main > #about > .about-wrap > .about-block > .about-area > .about-box h2 span {
		top: auto;
	}
	main > #about > .about-wrap > .about-block > .about-area > .about-box .about-img {
		width: 41.6vw;
		margin: 5.3vw auto 12vw auto;
	}
	main > #about > .about-wrap > .about-block > .about-area > .about-box-shopper .about-img {
		margin: 5.3vw auto 8vw auto;
	}
	main > #about > .about-wrap > .about-block > .about-area > .about-box .about-text {
		padding: 4vw 10.1vw 4vw 10.1vw;
		width: 86.4%;
	}
	main > #about > .about-wrap > .about-block > .about-area > .about-box-owner .about-text {
		margin: 0 auto 0 auto;
	}
	main > #about > .about-wrap > .about-block > .about-area > .about-box-shopper .about-text {
		margin: 0 auto 0 auto;
	}

	main > #about > .about-wrap > .about-block > .about-area > .about-box .about-text ul {
	}
	main > #about > .about-wrap > .about-block > .about-area > .about-box .about-text ul li {
		font-size: var(--font-size-16-sp);
	}
	main > #about > .about-wrap > .about-block > .about-area > .about-box .about-text ul li:last-child {
		margin: 0;
	}
	main > #about > .about-wrap > .about-block > .about-area > .about-box .about-text ul li::before {
	}
	main > #about > .about-wrap > .about-block > .about-area > .about-box-owner .about-text ul li::before {
	}
	main > #about > .about-wrap > .about-block > .about-area > .about-box-shopper .about-text ul li::before {
	}
	main > #about > .about-wrap > .about-block > .about-area > .about-box .about-text ul li::after {
		content: "";
		position: absolute;
		left: 32px;
		right: 0;
		bottom: -0.1em;
		height: 0.7em;
		background: var(--color-yellow);
		z-index: -1;
	}
}


/*---------------------------------------
system
---------------------------------------*/
main > #system {
}
main > #system > .system-wrap {
	margin: 70px auto 70px auto;
}
main > #system > .system-wrap > .system-head {
	text-align: center;
}
main > #system > .system-wrap > .system-block {
}
main > #system > .system-wrap > .system-block > .system-area {
	width: 580px;
	margin: 0 auto 0 auto;
}
main > #system > .system-wrap > .system-block > .system-area > .system-img {
}
@media only screen and (max-width:769px){
	main > #system {
	}
	main > #system > .system-wrap {
	}
	main > #system > .system-wrap > .system-head {
	}
	main > #system > .system-wrap > .system-block > .system-area {
	width: var(--width-sp-3);
	}
	main > #system > .system-wrap > .system-block > .system-area > .system-img {
	}
}


/*---------------------------------------
owner-merit
---------------------------------------*/
main > #owner-merit {
	background-color: var(--color-green-bg);
}
main > #owner-merit > .owner-merit-wrap {
	margin: 0 auto 0 auto;
	padding: 70px 0 70px 0;
}
main > #owner-merit > .owner-merit-wrap > .owner-merit-head {
	text-align: center;
}
main > section#owner-merit  > div h1 span::after {
	border-color: transparent transparent var(--color-green-bg) transparent;
}
main > #owner-merit > .owner-merit-wrap > .owner-merit-block {
}
main > #owner-merit > .owner-merit-wrap > .owner-merit-block > .owner-merit-area {
	width: var(--width-pc-3);
	display: flex;
	gap: 0 30px;
	margin: 0 auto 0 auto;
}
main > #owner-merit > .owner-merit-wrap > .owner-merit-block > .owner-merit-area > .owner-merit-box {
	width: 300px;
	background-color: var(--color-white);
	border: solid 2px var(--color-green);
	border-radius: 30px;
	padding: 30px 0 30px 0;
	display: flex;
	flex-direction: column;
}
main > #owner-merit > .owner-merit-wrap > .owner-merit-block > .owner-merit-area > .owner-merit-box > h2 {
	text-align: center;
	font-size: var(--font-size-20);
	color: var(--color-green);
	margin: 0 0 1em 0;
}
main > #owner-merit > .owner-merit-wrap > .owner-merit-block > .owner-merit-area > .owner-merit-box > p {
	padding: 0 25px 0 25px;
	margin: 0 0 25px 0;
}
main > #owner-merit > .owner-merit-wrap > .owner-merit-block > .owner-merit-area > .owner-merit-box > .owner-merit-img {
	padding: 0 25px 0 25px;
	margin-top: auto;
}
@media only screen and (max-width:769px){
	main > #owner-merit {
	}
	main > #owner-merit > .owner-merit-wrap {
	}
	main > #owner-merit > .owner-merit-wrap > .owner-merit-head {
	}
	main > #owner-merit > .owner-merit-wrap > .owner-merit-block > .owner-merit-area {
		width: var(--width-sp-2);
		flex-direction: column;
		gap: 2em;
	}
	main > #owner-merit > .owner-merit-wrap > .owner-merit-block > .owner-merit-area > .owner-merit-box {
		width: var(--width-sp-1);
		margin: 0 auto 0 auto;
	}
	main > #owner-merit > .owner-merit-wrap > .owner-merit-block > .owner-merit-area > .owner-merit-box > h2 {
		font-size: var(--font-size-18-sp);
	}
	main > #owner-merit > .owner-merit-wrap > .owner-merit-block > .owner-merit-area > .owner-merit-box > p {
		font-size: var(--font-size-16-sp);
		padding: 0 8vw 0 8vw;
		margin: 0 0 8vw 0;
	}
	main > #owner-merit > .owner-merit-wrap > .owner-merit-block > .owner-merit-area > .owner-merit-box > .owner-merit-img {
		padding: 0 8vw 0 8vw;
	}
}


/*---------------------------------------
shopper-merit
---------------------------------------*/
main > #shopper-merit {
	background-color: var(--color-orange-bg);
}
main > #shopper-merit > .shopper-merit-wrap {
	margin: 0 auto 0 auto;
	padding: 70px 0 70px 0;
}
main > #shopper-merit > .shopper-merit-wrap > .shopper-merit-head {
	text-align: center;
}
main > section#shopper-merit  > div h1 span::after {
	border-color: transparent transparent var(--color-orange-bg) transparent;
}
main > #shopper-merit > .shopper-merit-wrap > .shopper-merit-block {
}
main > #shopper-merit > .shopper-merit-wrap > .shopper-merit-block > .shopper-merit-area {
	width: var(--width-pc-3);
	display: flex;
	flex-wrap: wrap;
	gap: 35px 30px;
	margin: 0 auto 0 auto;
}
main > #shopper-merit > .shopper-merit-wrap > .shopper-merit-block > .shopper-merit-area > .shopper-merit-box {
	width: 465px;
	background-color: var(--color-white);
	border: solid 2px var(--color-orange);
	border-radius: 30px;
	padding: 30px 0 30px 0;
	display: flex;
	flex-direction: column;
}
main > #shopper-merit > .shopper-merit-wrap > .shopper-merit-block > .shopper-merit-area > .shopper-merit-box > h2 {
	text-align: center;
	font-size: var(--font-size-20);
	color: var(--color-orange);
	margin: 0 0 1em 0;
}
main > #shopper-merit > .shopper-merit-wrap > .shopper-merit-block > .shopper-merit-area > .shopper-merit-box > p {
	padding: 0 25px 0 25px;
	margin: 0 0 25px 0;
}
main > #shopper-merit > .shopper-merit-wrap > .shopper-merit-block > .shopper-merit-area > .shopper-merit-box > .shopper-merit-img {
	padding: 0 25px 0 25px;
	margin: auto auto 0 auto;
}
main > #shopper-merit .shopper-merit-area > .shopper-merit-box:nth-child(1) .shopper-merit-img {
    width: 242px;
}
main > #shopper-merit .shopper-merit-area > .shopper-merit-box:nth-child(2) .shopper-merit-img {
    width: 312px;
}
main > #shopper-merit .shopper-merit-area > .shopper-merit-box:nth-child(3) .shopper-merit-img {
    width: 175px;
}
main > #shopper-merit .shopper-merit-area > .shopper-merit-box:nth-child(4) .shopper-merit-img {
    width: 305px;
}
main > #shopper-merit .shopper-merit-area .shopper-merit-img img {
    width: 100%;
    height: auto;
    display: block;
}
@media only screen and (max-width:769px){
	main > #shopper-merit {
	}
	main > #shopper-merit > .shopper-merit-wrap {
	}
	main > #shopper-merit > .shopper-merit-wrap > .shopper-merit-head {
	}
	main > #shopper-merit > .shopper-merit-wrap > .shopper-merit-block > .shopper-merit-area {
		width: var(--width-sp-2);
		flex-direction: column;
		gap: 2em;
	}
	main > #shopper-merit > .shopper-merit-wrap > .shopper-merit-block > .shopper-merit-area > .shopper-merit-box {
		width: var(--width-sp-1);
		margin: 0 auto 0 auto;
	}
	main > #shopper-merit > .shopper-merit-wrap > .shopper-merit-block > .shopper-merit-area > .shopper-merit-box h2 {
		font-size: var(--font-size-18-sp);
	}
	main > #shopper-merit > .shopper-merit-wrap > .shopper-merit-block > .shopper-merit-area > .shopper-merit-box p {
		font-size: var(--font-size-16-sp);
		padding: 0 8vw 0 8vw;
		margin: 0 0 8vw 0;
	}
	main > #shopper-merit > .shopper-merit-wrap > .shopper-merit-block > .shopper-merit-area > .shopper-merit-img {
		padding: 0 8vw 0 8vw;
	}
	main > #shopper-merit .shopper-merit-area > .shopper-merit-box:nth-child(1) .shopper-merit-img {
		width: 54.66vw;
	}
	main > #shopper-merit .shopper-merit-area > .shopper-merit-box:nth-child(2) .shopper-merit-img {
		width: 70.4vw;
	}
	main > #shopper-merit .shopper-merit-area > .shopper-merit-box:nth-child(3) .shopper-merit-img {
		width: 39.46vw;
	}
	main > #shopper-merit .shopper-merit-area > .shopper-merit-box:nth-child(4) .shopper-merit-img {
		width: 69.06vw;
	}
}


/*---------------------------------------
note
---------------------------------------*/
#note {
}
#note > .note-wrap {
	margin: 70px auto 70px auto;
}
#note > .note-wrap > .note-head {
	text-align: center;
}
#note > .note-wrap > .note-block {
}
#note > .note-wrap > .note-block > .note-area {
}
#note > .note-wrap > .note-block > .note-area > .note-box {
	width: var(--width-pc-3);
	border-radius: 10px;
	border: 2px solid transparent;
	background:
		linear-gradient(#fff, #fff) padding-box,
		var(--color-red-1) border-box;
	padding: 25px;
	margin: 0 auto 2em auto;
	display: flex;
	gap: 0 20px;
}
#note > .note-wrap > .note-block > .note-area > .note-box > .note-img {
	width: 315px;
}
#note > .note-wrap > .note-block > .note-area > .note-box > .note-img img {
	border-radius: 10px;
}
#note > .note-wrap > .note-block > .note-area > .note-box > .note-text {
	width: 575px;
}
#note > .note-wrap > .note-block > .note-area > .note-box > .note-text > h2 {
	font-size: var(--font-size-20);
	margin: 0 0 1em 0;
}
#note > .note-wrap > .note-block > .note-area > .note-box > .note-text > p {
	font-size: var(--font-size-16);
}
#note > .note-wrap > .note-block > .note-area > .note-box > .note-text > .note-text-btn {
	display: flex;
	align-items: end;
	margin: 25px 0 0 0;
}
#note > .note-wrap > .note-block > .note-area > .note-box > .note-text > .note-text-btn > .note-text-btn1 {
}
#note > .note-wrap > .note-block > .note-area > .note-box > .note-text > .note-text-btn > .note-text-btn1 ul {
	display: flex;
	gap: 0 0.2em;
}
#note > .note-wrap > .note-block > .note-area > .note-box > .note-text > .note-text-btn > .note-text-btn1 ul li {
	font-size: var(--font-size-14);
	font-weight: 700;
	background-color: var(--color-green-bg);
	border: solid 1px var(--color-green);
	color: var(--color-green);
	padding: 0.5em 0.25em 0.5em 0.25em;
}
#note > .note-wrap > .note-block > .note-area > .note-box > .note-text > .note-text-btn > .note-text-btn1 ul li.btn1-2 {
	background-color: var(--color-orange-bg);
	border: solid 1px var(--color-orange);
	color: var(--color-orange);
}
#note > .note-wrap > .note-block > .note-area > .note-box > .note-text > .note-text-btn > .note-text-btn1 ul li.btn1-3 {
	background-color: var(--color-blue-bg);
	border: solid 1px var(--color-blue);
	color: var(--color-blue);
}
#note > .note-wrap > .note-block > .note-area > .note-box > .note-text > .note-text-btn > .note-text-btn2 {
	margin: 0 0 0 auto;
}
#note > .note-wrap > .note-block > .note-area > .note-box > .note-text > .note-text-btn > .note-text-btn2 > a {
	background: var(--color-red-2);
	border-radius: 3px;
	color: var(--color-white);
    display: block;
	font-size: var(--font-size-18);
	text-decoration: none;
	text-align: center;
	padding: 10px 0 10px 0;
    width: 245px;
}
#note > .note-wrap > .note-block > .note-area > .note-box > .note-text > .note-text-btn > .note-text-btn2 > a::after {
    content: "\e89e";
    font-family: "Material Icons";
    font-size: 1.5em;
    vertical-align: middle;
    margin-left: 5px;
}
#note .note-area .note-img img {
    width: 100%;
    height: auto;
    display: block;
}
@media only screen and (max-width:769px){
	#note {
	}
	#note > .note-wrap {
		margin: 10.2vw auto 10.2vw auto;
	}
	#note > .note-wrap > .note-head {
	}
	#note > .note-wrap > .note-block {
	}
	#note > .note-wrap > .note-block > .note-area {
	}
	#note > .note-wrap > .note-block > .note-area > .note-box {
		width: var(--width-sp-2);
		padding: 6.66vw;
		margin: 0 auto 2em auto;
		display: flex;
		flex-direction: column;
		gap: 2em 0;
	}
	#note > .note-wrap > .note-block > .note-area > .note-box > .note-img {
		width: var(--width-sp-1);
	}
	#note > .note-wrap > .note-block > .note-area > .note-box > .note-img img {
	}
	#note > .note-wrap > .note-block > .note-area > .note-box > .note-text {
		width: var(--width-sp-1);
	}
	#note > .note-wrap > .note-block > .note-area > .note-box > .note-text > h2 {
		font-size: var(--font-size-18-sp);
	}
	#note > .note-wrap > .note-block > .note-area > .note-box > .note-text > p {
		font-size: var(--font-size-14-sp);
	}
	#note > .note-wrap > .note-block > .note-area > .note-box > .note-text > .note-text-btn {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		margin: 6.66vw 0 0 0;
	}
	#note > .note-wrap > .note-block > .note-area > .note-box > .note-text > .note-text-btn > .note-text-btn1 {
	}
	#note > .note-wrap > .note-block > .note-area > .note-box > .note-text > .note-text-btn > .note-text-btn1 ul {
		display: flex;
		gap: 0 0.2em;
	}
	#note > .note-wrap > .note-block > .note-area > .note-box > .note-text > .note-text-btn > .note-text-btn1 ul li {
		font-size: var(--font-size-12-sp);
	}
	#note > .note-wrap > .note-block > .note-area > .note-box > .note-text > .note-text-btn > .note-text-btn1 ul li.btn1-2 {
	}
	#note > .note-wrap > .note-block > .note-area > .note-box > .note-text > .note-text-btn > .note-text-btn1 ul li.btn1-3 {
	}
	#note > .note-wrap > .note-block > .note-area > .note-box > .note-text > .note-text-btn > .note-text-btn2 {
		margin: 1em 0 0 0;
	}
	#note > .note-wrap > .note-block > .note-area > .note-box > .note-text > .note-text-btn > .note-text-btn2 > a {
		width: 100%;
	}
	#note > .note-wrap > .note-block > .note-area > .note-box > .note-text > .note-text-btn > .note-text-btn2 > a::after {
		content: "\e89e";
		font-family: "Material Icons";
		font-size: 1.5em;
		vertical-align: middle;
		margin-left: 5px;
	}
	#note .note-area .note-img img {
		width: 100%;
		height: auto;
		display: block;
	}
}



/*---------------------------------------
contact
---------------------------------------*/
main > #contact {
	background-color: var(--color-pink-bg);
}
main > #contact > .contact-wrap {
	margin: 0 auto 0 auto;
	padding: 70px 0 70px 0;
}
main > #contact > .contact-wrap > .contact-head {
	text-align: center;
}
main > #contact > .contact-wrap > .contact-head h1 {
	color: var(--color-white);
	text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.75);
}
main > #contact > .contact-wrap > .contact-block {
}
main > #contact > .contact-wrap > .contact-block > .contact-area {
	display: flex;
	justify-content: space-between;
	width: var(--width-pc-2);
	margin: 0 auto 0 auto;
}
main > #contact > .contact-wrap > .contact-block > .contact-area > .contact-box {
	width: 420px;
}
main > #contact > .contact-wrap > .contact-block > .contact-area > .contact-box a {
    display: block;
    width: 100%;
    padding: 26px 0;
    border-radius: 10px;
    text-align: center;
    font-size: var(--font-size-24);
    font-weight: 700;
    color: var(--color-white);
    text-decoration: none;
    position: relative;
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.15);
}
main > #contact > .contact-wrap > .contact-block > .contact-area > .contact-box:first-child a {
    background-color: var(--color-green);
    border-bottom: 4px solid var(--color-green);
}
main > #contact > .contact-wrap > .contact-block > .contact-area > .contact-box:last-child a {
    background-color: var(--color-orange);
    border-bottom: 4px solid var(--color-orange);
}
main > #contact > .contact-wrap > .contact-block > .contact-area > .contact-box a::after {
    content: "";
    position: absolute;
    top: 52%;
    right: 28px;
    transform: translateY(-50%);
    width: 2.5vw;
    height: 2.5vw;
    border-radius: 50%;
    background-color: var(--color-white);
    z-index: 1;
}
main > #contact > .contact-wrap > .contact-block > .contact-area > .contact-box a::before {
    content: "";
    position: absolute;
    top: 52%;
    right: 40px;
    transform: translateY(-50%) rotate(-45deg);
    width: 12px;
    height: 12px;
    border-right: 3px solid var(--color-green);
    border-bottom: 3px solid var(--color-green);
    z-index: 2;
}
main > #contact > .contact-wrap > .contact-block > .contact-area > .contact-box:last-child a::before {
    border-right-color: var(--color-orange);
    border-bottom-color: var(--color-orange);
}
main > #contact > .contact-wrap > .contact-block > .contact-area > .contact-box a:hover {
    opacity: 0.9;
    transform: translateY(2px);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15);
}

@media only screen and (max-width:769px){
	main > #contact {
	}
	main > #contact > .contact-wrap {
		margin: 10.2vw auto 10.2vw auto;
	}
	main > #contact > .contact-wrap > .contact-head {
	}
	main > #contact > .contact-wrap > .contact-block {
	}
	main > #contact > .contact-wrap > .contact-block > .contact-area {
		flex-direction: column;
		width: var(--width-sp-1);
	}
	main > #contact > .contact-wrap > .contact-block > .contact-area > .contact-box {
		width: var(--width-sp-2);
		margin: 0 auto 2em auto;
	}
	main > #contact > .contact-wrap > .contact-block > .contact-area > .contact-box a::before {
		top: 52%;
		right: 6.5vw;
		width: 2vw;
		height: 2vw;
	}
	main > #contact > .contact-wrap > .contact-block > .contact-area > .contact-box a::after {
		top: 53%;
		right: 4vw;
		width: 6.5vw;
		height: 6.5vw;
	}
}


/*---------------------------------------
company
---------------------------------------*/
main > #company {
	margin: 2em auto 0 auto;
}
main > #company > .company-wrap {
}
main > #company > .company-wrap > .company-block {
	margin: 0 0 2em 0;
	padding: 0 0 2em 0;
	border-bottom: solid 1px var(--color-gray);
}
main > #company > .company-wrap > .company-block > .company-area {
	width: var(--width-pc-4);
	margin: 0 auto 0 auto;
}
main > #company > .company-wrap > .company-block > .company-area > .company-box {
	display: flex;
	align-items: center;
	gap: 0 60px;
}
main > #company > .company-wrap > .company-block > .company-area > .company-box > div {
	width: 150px;
}
main > #company > .company-wrap > .company-block > .company-area > .company-box > p {
	width: 650px;
	font-size: var(--font-size-16);
}
@media only screen and (max-width:769px){
	main > #company > .company-wrap > .company-block > .company-area {
		width: var(--width-sp-2);
	}
	main > #company > .company-wrap > .company-block > .company-area > .company-box {
		gap: 0 30px;
	}
	main > #company > .company-wrap > .company-block > .company-area > .company-box > div {
		width: 21.6vw;
	}
	main > #company > .company-wrap > .company-block > .company-area > .company-box > p {
		width: calc(100% - 30px - 21.6vw);
		font-size: var(--font-size-12-sp);
	}
}



/*---------------------------------------
footer
---------------------------------------*/
#footer {
}
#footer p {
	text-align: center;
	font-size: var(--font-size-16);
	padding: 1em 0 1em 0;
}
@media only screen and (max-width:769px){
	#footer {
		padding: 0 0 16% 0;
	}
	#footer p {
		font-size: var(--font-size-12-sp);
		padding: 1em 0 1em 0;
	}
}


/*---------------------------------------
Float
---------------------------------------*/
#float-banner {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
	transform: translateY(8px);
}
#float-banner.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}
#float-banner {
	position: fixed;
	right: 0;
	bottom: 30px;
	z-index: 1000;
	width: 260px;
}
#float-banner .float-inner {
	background: var(--color-red-1);
	border-radius: 24px 0 0 24px;
	padding: 20px 18px 18px;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}
#float-banner .float-message {
	position: relative;
	padding: 18px 10px;
	text-align: center;
}
#float-banner .float-message h2 {
	font-size: var(--font-size-14);
	color: var(--color-red);
	position: absolute;
	left: 50%;
	top: 3em;
	transform: translateX(-50%);
}

#float-banner .float-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	border-radius: 8px;
	text-align: center;
	font-size: var(--font-size-14);
	font-weight: 700;
	text-decoration: none;
	margin-bottom: 10px;
	position: relative;
	box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15);
	padding: 0.65em 1.2em 0.65em 1.2em;
	box-sizing: border-box;
}

#float-banner .float-btn__label{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	line-height: 1;
}

#float-banner .float-btn__icon{
	width: 18px;
	height: 14px;
	flex: 0 0 18px;
	background: url('/files/user/images/lp/sharerestaurant/icon-mail.svg') no-repeat center / contain;
}
#float-banner .float-btn--contact {
	background-color: var(--color-white);
	color: var(--color-red);
}
#float-banner .float-btn::before,
#float-banner .float-btn::after {
	content: none;
}

/* お問い合わせ（赤丸＋白矢印） */
#float-banner .float-btn--contact::after{
	content: "";
	position: absolute;
	top: 50%;
	right: 0.25em;
	transform: translateY(-50%);
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	background: var(--color-red);
}
#float-banner .float-btn--contact::before{
	content: "";
	position: absolute;
	top: 50%;
	right: 0.75em;
	transform: translateY(-50%) rotate(-45deg);
	width: 0.75em;
	height: 0.75em;
	border-right: 2px solid var(--color-white);
	border-bottom: 2px solid var(--color-white);
	z-index: 1;
}

/* メルマガ登録（封筒アイコン＋グラデ背景） */
#float-banner .float-btn--mail{
	color: var(--color-white);
	background: var(--color-red-2);
}
/* メルマガ登録（白丸＋オレンジ矢印） */
#float-banner .float-btn--mail::after{
	content: "";
	position: absolute;
	top: 50%;
	right: 0.25em;
	transform: translateY(-50%);
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	background: var(--color-white);
}

#float-banner .float-btn--mail::before{
	content: "";
	position: absolute;
	top: 50%;
	right: 0.75em;
	transform: translateY(-50%) rotate(-45deg);
	width: 0.75em;
	height: 0.75em;
	border-right: 2px solid var(--color-orange);
	border-bottom: 2px solid var(--color-orange);
	z-index: 1;
}

/* hover */
#float-banner .float-btn:hover {
	transform: translateY(1px);
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
	opacity: 0.95;
}



/* =========================
Float banner（SPデザイン）
========================= */
@media (max-width: 769px) {
	#float-banner {
		right: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		border-radius: 0;
	}
	#float-banner .float-inner {
		border-radius: 24px 24px 0 0;
		padding: 16px 14px 14px;
	}
	/* ── 上部メッセージ ── */
	#float-banner .float-message {
		padding: 10px 0 14px;
	}
	#float-banner .float-message h2 {
		font-size: var(--font-size-16-sp);
		color: var(--color-white);
		text-shadow: var(--text-shadow-sp);
		left: 21vw;
		top: 1em;
		transform: inherit;
	}
	#float-banner .float-message h2 span {
		font-size: var(--font-size-22-sp);
	}
	#float-banner .float-message .float-img {
		width: 19.46vw;
	}
	#float-banner .float-message img {
		width: 100%;
		height: auto;
	}
	/* ── ボタンエリアを横並び ── */
	#float-banner .float-inner {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	#float-banner .float-btn {
		margin-bottom: 0;
		height: 3vw;
		font-size: var(--font-size-12-sp);
		border-radius: 10px;
		padding: 0 3em 0 1em;
		box-sizing: border-box;
		height: 8vw;
	}
	/* ── ボタン2つを横並び（2カラム）+ メールボタンは100%幅 ── */
	#float-banner .float-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 1em;
		justify-content: space-between;
	}
	/* デフォルト：2カラム */
	#float-banner .float-actions .float-btn {
		flex: 0 0 calc(50% - 0.85em);
		width: auto;
		min-width: 0;
	}
	/* mailだけ次の行で100% */
	#float-banner .float-actions .float-btn--mail {
		flex: 0 0 100%;
		width: 100%;
	}
	/* ボタン内テキストを中央寄せ（左右の見た目を揃える） */
	#float-banner .float-actions .float-btn__label{
		width: 100%;
		justify-content: center;
	}
	/* ── お問い合わせ（左） ── */
	#float-banner .float-btn--contact {
		background: var(--color-white);
		color: var(--color-red);
	}
	#float-banner .float-btn--contact::after {
		width: 5vw;
		height: 5vw;
		right: 2vw;
		background: var(--color-red);
	}
	#float-banner .float-btn--contact::before {
		width: 1.5vw;
		height: 1.5vw;
		right: 4vw;
		border-width: 2px;
	}
	/* ── メルマガ登録（右） ── */
	#float-banner .float-btn--mail {
		background: var(--color-red-2);
		color: var(--color-white);
	}
	#float-banner .float-btn--mail .float-btn__icon {
		width: 5.86vw;
		height: 4.3vw;
		flex: 0 0 5.8vw;
		background: url("../img/icon-mail.svg") no-repeat center / contain;
	}
	#float-banner .float-btn--mail::after {
		width: 5vw;
		height: 5vw;
		right: 2vw;
		background: var(--color-white);
	}
	#float-banner .float-btn--mail::before {
		width: 1.5vw;
		height: 1.5vw;
		right: 4vw;
		border-width: 2px;
	}
}