margin: 0 0 50px;@charset "UTF-8";
/* CSS Document */



/*****************
汎用スタイル
*****************/
#contents *{
	font-family: YakuHanJP,'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.spCont{
	display: none;
}
#contents img{
	width: 100%;
}
@media screen and (max-width:768px) {
	.pcCont{
		display: none !important;
	}
	.spCont{
		display: block;
	}
}

.flex-cont {
	display: -webkit-box;
display: flex;
}

.jc-sb{
	-webkit-box-pack: justify;
justify-content: space-between;
}
@media screen and (max-width:768px) {
	.flex-cont{
		display: block;
	}
}


/*****************
個別スタイル
*****************/

/*header*/
header{
	background-image: url("../img/header-bg.jpg");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	height: 534px;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}
header .hero{
	background: linear-gradient(110deg, rgba(248,248,245,0.8), rgba(213,210,197,0.8));
	height: 430px;
	
}
header .hero .hero-inner{
	width: 976px;
	height: 430px;
	margin: 0 auto;
	position: relative;
}
header .hero .hero-inner h1{
	font-size: 46px;
	letter-spacing: .04em;
	text-align: left;
	font-weight: 600;
	color: #332405;
	padding: 110px 0 20px;
}
header .hero .hero-inner h1 span{
	display: block;
	width: 360px;
	line-height: 0;
}
header .hero .hero-inner p{
	font-size: 16px;
	line-height: 2;
}
header .hero .hero-inner figure{
	position: absolute;
	right: 0;
	bottom: -100px;
	width: 246px;
	
}
@media screen and (max-width:768px) {
	header{
		height: auto;
	}
	header .hero{
		height: auto;
	}
	header .hero .hero-inner{
		width: auto;
		position: relative;
		padding: 8vw 6vw 3vw;
		height: auto;
	}
	header .hero .hero-inner h1{
		font-size: 8vw;
		text-align: center;
		padding: 0 0 2.5vw !important;
	}
	header .hero .hero-inner h1 span{
		width: 70vw;
		margin: 0 auto 1vw;
	}
	header .hero .hero-inner p{
		font-size: 3.8vw;
		text-align: justify;
		line-height: 1.6;
	}
	header .hero .hero-inner figure{
		position: relative;
		width: 40vw;
		margin: 0 auto;
		right: inherit;
		padding: 0 !important;
		bottom: inherit;
	}
}
header .app-link{
	background-color: rgba(51,36,5,0.8);
	height: 104px;
}
header .app-link .app-link-wrap{
	width: 976px;
	margin: 0 auto;
}
header .app-link .app-link-wrap p{
	color: #ffffff;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.4;
    vertical-align: super;
}
header .app-link .app-link-wrap p{
	display: inline-block;
}
header .app-link .app-link-wrap p.app-qr,
header .app-link .app-link-wrap figure,
header .app-link .app-link-wrap a{
	display: inline-block;
	margin: 0 0 0 10px;
	transition: .3s;
}
header .app-link .app-link-wrap a:hover{
	opacity: .6;
	transition: .3s;
}
header .app-link .app-link-wrap .w-arrow{
	width: 8px;
    margin: 0 10px;
    position: relative;
    top: -16px;
}
header .app-link .app-link-wrap .app-link-inner{
	width: 670px;
	    padding: 19px 0 0;
}
header .app-link .app-link-wrap .app-link-inner .app-qr{
	width: 66px;
}
header .app-link .app-link-wrap .app-link-inner .app-ap{
	width: 180px;
}
header .app-link .app-link-wrap .app-link-inner .app-gp{
	width: 222px;
}
@media screen and (max-width:768px) {
	header .app-link{
		    height: auto;
	}
	header .app-link .app-link-wrap{
		width: auto;
	}
	header .app-link .app-link-wrap .app-link-inner{
		width: auto;
    padding: 2vw 4vw 0vw;
	}
	header .app-link .app-link-wrap p{
		font-size: 3.8vw;
	}
	header .app-link .app-link-wrap p,
	header .app-link .app-link-wrap figure,
	header .app-link .app-link-wrap a{
		margin: 0 0 0 1vw;
	}
	header .app-link .app-link-wrap .app-link-inner .app-ap {
		width: 30vw;
	}
	header .app-link .app-link-wrap .app-link-inner .app-gp {
		width: 37vw;
	}
}


/*function*/

.function{
	padding: 110px 0 100px;
}
.function h2{
	font-size: 34px;
	color: #332405;
	text-align: center;
	margin: 0 0 70px;
	    letter-spacing: 0.04em;
}
.function .function-list{
	display: -webkit-box;
display: flex;
	-webkit-box-pack: justify;
justify-content: space-between;
	-webkit-box-orient: vertical;
flex-wrap: wrap;
}
.function .function-list div{
	width: 230px;
	background-color: #f4f2eb;
	border-radius: 10px;
	text-align: center;
	padding: 25px 0 20px;
}
.function .function-list div figure{
	margin: 0 auto;
	width: 160px !important;
}
.function .function-list div div{
	padding: 0;
}
.function .function-list div div h3{
	font-size: 24px;
	margin: 0 0 3px;
	color: #332405;
}
.function .function-list div div p{
	font-size: 16px;
	line-height: 1.4;
}






@media screen and (max-width:768px) {
	.function{
		    width: 100vw;
		margin-inline: calc(50% - 50vw);
		padding: 14vw 6vw;
	}
	.function h2{
		font-size: 6vw;
        margin: 0 0 10vw;
	}
	.function .function-list > div {
		width: 80vw;
		margin: 0 auto;
		display: -webkit-box;
		display: flex;
		-webkit-box-pack: justify;
		justify-content: space-between;
	}
	.function .function-list div figure{
		width: 25vw !important;
	}
	.function .function-list div + div{
		margin: 3vw auto 0;
	}
	.function .function-list div div{
		        width: 48vw;
		text-align: left;
	}
	.function .function-list div div h3{
		    font-size: 5vw;
	}
	.function .function-list div div p{
		    font-size: 3.6vw;
		        padding: 0;
	}
}


/*coupon*/
.function .coupon{
	    margin: 120px 0 0;
}
.function .coupon h3{
	font-size: 26px;
	color: #332405;
	text-align: center;
	    line-height: 1.4;
	    margin: 0 0 30px;
	    letter-spacing: 0.04em;
}
.function .coupon h3 span{
	font-size: 32px;
	display: block;
}
.function .coupon div{
	width: 676px;
	border: 1px solid #332405;
	background-color: #ffffff;
	  box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
	margin: 0 auto;
}
.function .coupon div h4{
	background-color: #332405;
	padding: 10px 0;
	color: #ffffff;
	text-align: center;
	font-size: 21px;
	    letter-spacing: .04em;
}
.function .coupon div figure{
	width: 615px;
	    margin: 30px auto 25px;
}

.function .coupon p.notes{
	width: 676px;
	margin: 15px auto 0;
	font-size: 14px;
}

@media screen and (max-width:768px) {
	.function .coupon{
		    margin: 20vw 0 0;
	}
	.function .coupon h3{
		    font-size: 5vw;
	}
	.function .coupon h3 span{
		        font-size: 5.8vw;
    font-weight: 600;
	}
	.function .coupon div{
		    width: 85vw;
		    font-size: 4.2vw;
	}
	.function .coupon div h4{
		    font-size: 4vw;
	}
	.function .coupon div figure{
		        width: 76vw;
        margin: 4vw auto 4vw;
	}
	.function .coupon p.notes{
		    width: 85vw;
    margin: 2vw auto 0;
    font-size: 3vw;
	}
}



/*step*/

.step{
	background-color: #f4f2eb;
	padding: 80px 0 95px;
	    width: 100vw;
    margin-inline: calc(50% - 50vw);
}

.step h2{
	font-size: 34px;
	color: #4f1800;
	text-align: center;
	margin: 0 0 50px;
	    letter-spacing: 0.04em;
}
.step .step-cont{
	width: 976px;
	margin: 0 auto;
	
}
.step .step-cont section + section{
	margin: 100px 0 0;
}

.step .step-cont section h3{
	font-size: 24px;
	color: #4f1800;
	border-bottom: 1px solid #4f1800;
	margin: 0 0 30px;
}
.step .step-cont section h3 span{
	margin: 0 1.5em 0 0;
	
}
.step .step-cont section > p.notes{
	    font-size: 14px;
    font-weight: 400;
    text-indent: -1em;
    padding: 10px 0 0 1em;
    line-height: 1.6;
}
.step .step-cont section .w-box{
	background-color: #ffffff;
	border-radius: 10px;
	    padding: 20px 35px;
	margin: 20px 0 0;
}
.step .step-cont section .w-box h4{
	font-size: 20px;
	/*color: #1b2f5e;*/
	margin: 0 0 10px;
}
.step .step-cont section .w-box .app-dl a{
	display: inline-block;
	transition: .3s;
}
.step .step-cont section .w-box .app-dl a:hover{
	opacity: .6;
	transition: .3s;
}
.step .step-cont section .w-box .app-dl a img{
	height: 66px;
}
.step .step-cont section .w-box .w-box-notes{
	font-size: 14px;
}
@media screen and (max-width:768px) {
	.step{
		    padding: 14vw 0 20vw;
	}
	.step h2{
		    font-size: 6vw;
		    margin: 0 0 14vw;
	}
	.step .step-cont{
		width: auto;
		padding: 0 6vw;
	}
	.step .step-cont section + section{
		margin: 12vw 0 0;
	}
	.step .step-cont section h3{
		    font-size: 5vw;
		        padding: 0 0 2vw;
		margin: 0 0 4vw;
	}
	.step .step-cont section h3 span{
		margin: 0 1em 0 0;
		    font-weight: 600;
	}
	.step .step-cont section.step2 p{
		width: auto;
	}
	.step .step-cont section .w-box{
		text-align: center;
	}
	.step .step-cont section .w-box h4{
		font-size: 4vw;
	}
	.step .step-cont section .w-box .w-box-notes {
		font-size: 3.2vw;
		padding: 0;
		margin: 1vw 0 0;
	}
}

.step .step-cont section.step1 figure.flyer{
	    width: 360px;
    margin: 30px 0 0;
}
.step .step-cont section.step1 figure.flyer + p{
	margin: 30px 0 0;
}
.step .step-cont section.step1 .w-box h4{
	color: #4f1800;
}
.step .step-cont section.step1 .w-box a{
	    display: block;
	width: 320px;
	transition: .3s;
}
.step .step-cont section.step1 .w-box a:hover{
	opacity: .6;
	transition: .3s;
}
@media screen and (max-width:768px) {
	.step .step-cont section.step1 figure.flyer{
		width: 70vw;
    margin: 4vw auto 0;
	}
	.step .step-cont section.step1 .w-box a{
		    width: 70vw;
	}
}



.step .step-cont section.step2 .w-box{
	    padding: 30px 35px 20px;
}
.step .step-cont section.step2 .w-box h4{
	color: #1a1a1a;
}
.step .step-cont section.step2 .w-box.flex-cont > figure{
	width: 130px;
	    margin: 0 30px 0 0;
}
.step .step-cont section.step2 .w-box.flex-cont > div{
	flex: 1;
}
.step .step-cont section.step2 .w-box.flex-cont > div .app-dl{
	display: -webkit-box;
display: flex;
	-webkit-box-pack: justify;
justify-content: space-between;
	width: 600px;
	
}
.step .step-cont section.step2 .w-box.flex-cont > div .app-dl figure{
	width: 80px;
	margin: 0;
}
.step .step-cont section.step2 .w-box.flex-cont > div .app-dl a{
	    display: block;
    height: 80px;
	    overflow: hidden;
}
.step .step-cont section.step2 .w-box.flex-cont > div .app-dl a img{
	    height: 100%;
}

@media screen and (max-width:768px) {
	.step .step-cont section.step2 p{
		width: auto;
	}
	.step .step-cont section.step2 .w-box{
		padding: 6vw;
	}
	.step .step-cont section.step2 .w-box.flex-cont > figure{
		width: 20vw;
    margin: 0 auto 4vw;
	}
	.step .step-cont section.step2 .w-box.flex-cont > div .app-dl{
		    width: auto;
	}
	.step .step-cont section.step2 .w-box.flex-cont > div .app-dl a{
		        height: 12vw;
	}

}



.step .step-cont section.step3 .flow{
	    width: 740px;
}
.step .step-cont section.step3 .flow div{
	background-color: #ffffff;
	border-radius: 10px;
	padding: 15px 18px;
}
.step .step-cont section.step3 .flow div p{
	font-weight: 600;
	    letter-spacing: -0.001em;
}
.step .step-cont section.step3 .flow div p.notes{
	font-size: 14px;
	font-weight: 400;
	text-indent: -1em;
	    padding: 10px 0 0 1em;
    line-height: 1.6;
}
.step .step-cont section.step3 .flow div p.notes + p.notes{
	    padding: 0 0 0 1em;
}
.step .step-cont section.step3 .arrow{
	width: 38px;
	margin: 10px auto;
	line-height: 0;
}
.step .step-cont section.step3 figure{
	width: 265px;
}
.step .step-cont section.step3 .btn-manual{
	width: 340px;
	border: 15px;
	padding: 0 !important;
	    margin: 40px auto 0;
	position: relative;
}
.step .step-cont section.step3 .btn-manual a{
	display: block;
	background-color: #4f1800;
	color: #ffffff;
	    padding: 14px 0 10px;
    border-radius: 10px;
    text-align: center;
	font-size: 18px;
	font-weight: 600;
	transition: .3s;
}
.step .step-cont section.step3 .btn-manual a:hover{
	opacity: 0.6;
	transition: .3s;
}
.step .step-cont section.step3 .btn-manual a figure{
	position: absolute;
	width: 7px;
	top: 50%;
	    right: 20px;
	transform: translateY(-50%);
	margin: 0;
	transition: .3s;
}
.step .step-cont section.step3 .btn-manual a:hover figure{
	right: 15px;
	transition: .3s;
}

@media screen and (max-width:768px) {
	
	.step .step-cont section.step3 .flow{
		width: auto;
	}
	.step .step-cont section.step3 .flow div{
		padding: 2vw 4vw 4vw;
	}
	.step .step-cont section.step3 .flow div p{
		    padding: 0.5em 0 0;
	}
	.step .step-cont section.step3 .flow div p + p.notes{
		padding: 4vw 0 0 1em;
	}
	.step .step-cont section.step3 .flow div p.notes{
		font-size: 3.2vw;
		padding: 0 0 0 1em;
	}
	.step .step-cont section.step3 .flow div p.notes + p.notes {
    padding: 0 0 0 1em;
}
	.step .step-cont section.step3 .arrow{
		    padding: 0;
	}
	.step .step-cont section.step3 figure {
		width: 40vw;
		margin: 4vw auto;
	}
	.step .step-cont section.step3 .btn-manual{
		width: 75vw;
	}
	.step .step-cont section.step3 .btn-manual a{
		font-size: 4vw;
	}
}