@charset "utf-8";

@import url('@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Zen+Maru+Gothic&display=swap');');


/* common 
----------------------------------------------------------- */
body{
	font-size:100%;
}
@media screen and (max-width: 980px) {
	div#wrapper {
		padding:0;
	}
	div#wrapper div#contents {
		max-width:750px;
	}
}

/* ttl 
----------------------------------------------------------- */
h1.ttl{
	margin:30px auto;
	color:#00400d;
	font-family: "Zen Maru Gothic", serif;
	font-size:30px;
	font-weight:bold;
	text-align:center;
	line-height:1.8;
}
h1.ttl strong{
	display:block;
	font-size:42px;
	font-weight:bold;
}
p.outline{
	margin:0 auto 60px;
	font-size:14px;
	text-align:center;
}
/* benefits 
----------------------------------------------------------- */
ul#benefits{
	min-height:310px;
	margin:0 auto 30px;
	padding-right;calc(50% + 15px);
	background:url(../../appli/img/img.png) no-repeat right top / calc(50% - 15px) auto;
}
ul#benefits li{
	posisiont:relative;
	margin-bottom:15px;
	color:#ae0000;
	font-weight:bold;
}
ul#benefits li:before{
	width:2em;
	posisiont:absolutel
	top:0;
	left:0;
	display:inline-block;
	margin-right:15px;
	padding:0.2em 0 0.1em;
	color:#00400d;
	font-weight:bold;
	text-align:center;
	border-radius:50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	-ms-border-radius:50%;
	background-color:#e6e6e6;
}
ul#benefits li:nth-child(1):before{content:"1";}
ul#benefits li:nth-child(2):before{content:"2";}
ul#benefits li:nth-child(3):before{content:"3";}
ul#benefits li:nth-child(4):before{content:"4";}
ul#benefits li:nth-child(5):before{content:"5";}
ul#benefits li:nth-child(6):before{content:"6";}
ul#benefits li:nth-child(7):before{content:"7";}
ul#benefits li:nth-child(8):before{content:"8";}


/* qr 
----------------------------------------------------------- */
ul#qr{
	margin:0 auto 60px;
	letter-spacing:-0.4em;
}
ul#qr li{
	width:calc(50% - 45px);
	display:inline-block;
	padding:15px;
	color:#fff;
	text-align:center;
	vertical-align:top;
	letter-spacing:normal;
	zoom:1;
	border-radius:20px;
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	-ms-border-radius:20px;
	background-color:#66860d!important;
}
ul#qr li:first-child{
	width:calc(50%  - 170px - 30px + 30px);
	margin-right:30px;
	padding:15px 15px 100px calc(140px + 30px - 30px);
	background:url(../../appli/img/ill.png) no-repeat left 15px bottom 15px / 135px auto,
	url(../../appli/img/qr_appli.png) no-repeat right 80px bottom 15px / 70px auto;
}
ul#qr li:last-child{
	padding-bottom:100px;
	background:url(../../appli/img/logo_x.png) no-repeat left 20px bottom 18px / 60px auto,
	url(../../appli/img/qr_x.png) no-repeat left 100px bottom 15px / 70px auto,
	url(../../appli/img/logo_insta.png) no-repeat right 110px bottom 18px / 60px auto,
	url(../../appli/img/qr_insta.png) no-repeat right 20px bottom 15px / 70px auto;
}

@media screen and (max-width: 790px) {
	ul#qr li:first-child,
	ul#qr li:last-child{
		width: calc(50% - 57.5px);
		margin-right:15px;
		padding:15px 25px 180px;
	}
	ul#qr li:first-child{
		background-position:left 15px bottom 15px,right 80px bottom 15px
	}
	ul#qr li:last-child{
		margin-right:0;
		background-position:left calc(50vw / 2 - 57.5px / 2 - 60px - 15px + 20px) bottom 103px,
		right calc(50vw / 2 - 57.5px / 2 - 70px - 15px + 20px) bottom 100px,
		left calc(50vw / 2 - 57.5px / 2 - 60px - 15px + 20px) bottom 18px,
		right calc(50vw / 2 - 57.5px / 2 - 70px - 15px + 20px) bottom 15px
	}
}
@media screen and (max-width:720px){
	ul#benefits {
		padding:0 0 380px;
		background-position:center bottom;
		background-size:420px auto;
	}
}
@media screen and (max-width:680px){
	ul#qr li:first-child, ul#qr li:last-child {
	    width: calc(100% - 50px);
	    margin-right: 0;
	    padding:25px 25px 100px;
	    text-align:center;
	}
	ul#qr li:first-child{
		margin-bottom:15px;
		background:url(../../appli/img/ill.png) no-repeat left calc(50% - 3.8em / 2 - 10px / 2 - 15px) bottom 15px / auto calc(3.8em + 10px),
		url(../../appli/img/qr_appli.png) no-repeat right calc(50% - 70px / 2 - 15px) bottom 15px / 70px auto;
	}
	ul#qr li:last-child{
		background:url(../../appli/img/logo_x.png) no-repeat left calc(50% - 70px * 1.5 - 15px * 2) bottom 18px / 60px auto,
		url(../../appli/img/qr_x.png) no-repeat left calc(50% - 70px / 2 - 15px) bottom 15px / 70px auto,
		url(../../appli/img/logo_insta.png) no-repeat right calc(50% - 70px / 2 - 15px) bottom 18px / 60px auto,
		url(../../appli/img/qr_insta.png) no-repeat right calc(50% - 70px * 1.5 - 15px * 2) bottom 15px / 70px auto;
	}
	ul#qr li br {
		display:none;
	}
}
@media screen and (max-width:450px){
	ul#benefits {
		padding:0 0 calc(86% + 20px);
		background-size:100% auto;
	}
	ul#qr li:first-child, ul#qr li:last-child {
	    width: calc(100% - 30px);
	    margin-right: 0;
	    padding:15px 15px 100px;
	    text-align:center;
	}
	ul#qr li:last-child{
		padding-bottom:185px;
		background:url(../../appli/img/logo_x.png) no-repeat left calc(50% - 3.8em / 2 - 10px / 2 - 15px) bottom 103px / 60px auto,
		url(../../appli/img/qr_x.png) no-repeat right calc(50% - 70px / 2 - 15px) bottom 105px / 70px auto,
		url(../../appli/img/logo_insta.png) no-repeat left calc(50% - 3.8em / 2 - 10px / 2 - 15px) bottom 18px / 60px auto,
		url(../../appli/img/qr_insta.png) no-repeat right calc(50% - 70px / 2 - 15px) bottom 15px / 70px auto;
	}
}