@charset "utf-8";
:root {--main-color: #13AE67;}
:root {--text-color: #604C3F;}

header,
section,
footer{
	width: 100%;
	position: relative;
	overflow: hidden;
}
article,
.inner{
	width: 92%;
	max-width: 428px;
	margin: 0 auto;
    position: relative;
}
h1,h2,h3,h4,h5,h6{
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
}
p{
	font-size: 14px;
	line-height: 1.6;
    letter-spacing: 0.1em;
}
.bold{
	font-weight: 700;
}
.color{
	color: var(--main-color);
}
/*==================================================================================================*/
body{
	position: relative;
	background: #C9BC9C;
}
main{
	width: 428px;
	height: 100svh;
	background: center / cover repeat-y url("../img/bg.png");
	position: fixed;
	top: 0;
	right: 0;
	overflow-y: scroll;
	overflow-x: hidden; 
}
/**/
.pcView{
	width: calc( 100% - 428px );
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}
.pcView img{
  width: auto;
  height: 100vh;
}
@media screen and (max-width: 768px) {
	body::before{
		display: block;
		content: "";
		width: 100%;
		max-width: 428px;
		height: 100%;
		background: #C9BC9C;
		position: absolute;
		top: 0;
		left: 50%;
   		transform: translateX(-50%);
		z-index: 0;
	}
	main{
		width: 100%;
		max-width: 428px;
		position: absolute;
		top: 0;
		left: 50%;
   		transform: translateX(-50%);
	}
	.pcView{
		width: 100%;
	}
}
/*==================================================================================================*/
/*fv-*/
.fv{
	padding: 84px 0 20px;
}
.fv h1{
	width: 100%;
	max-width: 380px;
	margin: 0 0 24px;
}
.fv h2{
	font-size: 23px;
	text-align: center;
	letter-spacing: 0.3em;
	line-height: 2;
	color: #604C3F;
}
@media screen and (max-width: 428px) {
	.fv h2{
		font-size: 19px;
		letter-spacing: 0.2em;
	}
}
/*==================================================================================================*/
/*fv-*/
.overview{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	max-width: 354px;
	padding: 40px 0;
}
.overview h3{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 43px;
	font-size: 23px;
	color: #FFF;
	background: var(--main-color);
	border-radius: 10px 10px 0 0;
	margin: 0 0 8px;
}
.overview dl{
	padding: 15px 0;
	border: solid 1px var(--main-color);
	background: #FFF;
}
.overview dl:not(:last-child){
	margin: 0 0 8px;
}
.overview dl:nth-child(2),
.overview dl:nth-child(3){
	width: 48%;
}
.overview dl dt{
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	margin: 0 0 8px;
}
.overview dl dd{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	text-align: center;
	padding: 0 18px;
}
/**/
.overview dl:nth-child(2) dt,
.overview dl:nth-child(3) dt{
	margin: 0;
}
.overview dl:nth-child(2) .color,
.overview dl:nth-child(3) .color{
	font-size: 56px;
	letter-spacing: 0;
	line-height: 1;
	text-align: center;
}
.overview dl:nth-child(2) .color span,
.overview dl:nth-child(3) .color span{
	display: block;
	font-size: 14px;
	text-align: center;
	color: #3762B4;
	margin: 8px 0 10px;
}
.overview dl:nth-child(3) .color span{
	color: #BF3226;
}
/**/
.overview dl:nth-child(4) .color{
	font-size: 20px;
	margin: 0 0 5px;
}
.overview dl:nth-child(4) .color + p{
	font-size: 10px;
}
.overview dl:nth-child(4) a{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 97px;
	height: 23px;
	font-size: 10px;
	color: #FFF;
	background: var(--main-color);
	border-radius: 40px;
	margin: 10px 0 0;
}
/**/
.money{
	display: flex;
	justify-content: center;
	margin: 0 0 8px;
}
.money p{
	letter-spacing: 0;
}
.money p:nth-child(1){
	display: flex;
	align-items: center;
	width: 64px;
	height: 16px;
	font-size: 15px;
	border-right: solid 1px var(--main-color);
}
.money p:nth-child(2){
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 109px;
	height: 16px;
	font-size: 15px;
}
.money p:nth-child(2) span{
	font-size: 10px;
}
.money + p{
	font-size: 10px;
	margin: 10px 0 0;
}
@media screen and (max-width: 428px) {
	.overview dl dd{
		padding: 0 10px;
	}
	.overview dl:nth-child(2) .color + .bold,
	.overview dl:nth-child(3) .color + .bold{
		letter-spacing: 0.06em;
	}
}
/*==================================================================================================*/
/*pickup-*/
.pickup{
	padding: 52px 0;
	background: var(--main-color);
}
.pickup h2{
	font-size: 57px;
	letter-spacing: 0.06em;
	color: #FFF;
	margin: 0 0 20px;
}
.pickup li{
	background: #FFF;
	border-radius: 10px;
	box-shadow: 0 4px 4px rgba(0,0,0,0.25);
	overflow: hidden;
	margin: 0 0 30px;
}
.pickup li div{
	padding: 15px 10px;
	position: relative;
}
.pickup li div h3{
	font-size: 24px;
	letter-spacing: 0.1em;
	margin: 0 0 10px;
}
.pickup li div::before{
	display: block;
	content: "01";
	font-size: 87px;
	font-weight: 700;
	line-height: 1;
	color: #FFF;
	position: absolute;
	top: -80px;
	right: -5px;
}
.pickup li:nth-child(2) div::before{
	content: "02";
}
.pickup li:nth-child(3) div::before{
	content: "03";
}
.pickup li div + p{
	font-size: 10px;
	color: #D6D6D6;
	position: absolute;
	bottom: -22px;
	left: 0;
}
@media screen and (max-width: 428px) {
	.pickup h2{
		font-size: 50px;
	}
	.pickup li div h3{
		font-size: 20px;
	}
}
/*==================================================================================================*/
/*attention-*/
section h2{
	font-size: 28px;
	text-align: center;
	letter-spacing: 0.2em;
	margin: 0 0 15px;
}
/**/
.attention{
	padding: 15px;
	background: #FFF50A;
}
.attention div{
	padding: 20px 0;
	background: #FFF;
}
.attention div ul{
	width: 90%;
	margin: 0 auto;
}
.attention div ul li{
	font-size: 13px;
}
.attention div ul li::before{
	display: inline-block;
	content: "・";
	margin: 0 5px 0 0;
}
@media screen and (max-width: 768px) {
}
/*==================================================================================================*/
/*access-*/
.access{
	padding: 30px 0;
}
.access h2 + a{
	display: block;
	font-size: 19px;
	letter-spacing: 0.1em;
	line-height: 1.5;
	text-align: center;
	text-decoration: underline;
	margin: 0 0 5px;
}
.access h2 + a + p{
	font-size: 13px;
	letter-spacing: 0.06em;
	text-align: center;
	margin: 0 0 20px;
}
.access iframe{
	width: 100%;
	height: 233px;
}
@media screen and (max-width: 428px) {
	.access h2 + a{
		font-size: 15px;
	}
}
/*==================================================================================================*/
/*contact-*/
.contact{
	padding: 0 0 30px;
}
.contact h2{
	font-size: 21px;
}
.contact img{
	display: block;
	width: 80px;
	margin: 0 auto 15px;
}
.contact p{
	font-size: 13px;
	text-align: center;
	letter-spacing: 0;
}
@media screen and (max-width: 768px) {
}
/*==================================================================================================*/
/*footer*/
footer{
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
	color: #FFF;
	padding: 13px 0;
	background: var(--main-color);
}
footer p{
	font-size: 13px;
	letter-spacing: 0;
	margin: 0 0 5px;
}
footer small{
	font-size: 10px;
}