@charset "utf-8";

@import url('font.css');
@import url('common.css');

body {background:#ffd21d;}
#wrap {overflow-x:hidden;}
.wrapper {width:1200px; margin:0 auto;}

header {position:relative;}
header h1 {position:absolute; z-index:1; left:102px; top:25px;}

.main_visual {position:relative; height:930px; padding-top:72px;}
.main_visual:after {content:''; position:absolute; z-index:1; left:50%; bottom:0; width:604px; height:394px; background:url(../images/couple01.png) no-repeat 0 0; transform:translateX(-50%); background-size:100%;}
.main_visual h2 {width:1132px; height:566px; margin:0 auto; text-indent:-9999px; background-image:url(../images/main_title.png); background-repeat:no-repeat; background-size:100%;}

.benefit {text-align:center;}
.benefit > div {padding:90px 0; background:#3d3619;}
.benefit h3 {position:relative; left:50%; width:808px; text-indent:-9999px; background-repeat:no-repeat; background-position:center top; background-size:100%; transform:translateX(-50%);}
.benefit .con > div {width:780px; height:200px; margin:0 auto; padding-top:30px; border-radius:200px; background:#fff; box-shadow:13px 13px 0px 6px rgba(0,0,0,0.3);}
.benefit .con p {color:#3d3619; font-size:28px; line-height:1.7; font-style:italic;}
.benefit .con p a {color:#3d3619;}
.benefit .con strong {font-weight:400; color:#ffc000;}
.benefit .con .sub {display:block; margin-top:15px; color:#3d3619; font-weight:400; font-size:16px; font-family:'gmarket'; font-style:normal;}

.benefit .couple h3 {height:122px; background-image:url(../images/benefit_tit01.png);}
.benefit .couple .con {margin-top:-80px;}

.benefit .friend {background:#2f2b18;}
.benefit .friend h3 {height:137px; background-image:url(../images/benefit_tit02.png);}
.benefit .friend .con {margin-top:-35px;}

.benefit .hotel h3 {height:128px; background-image:url(../images/benefit_tit03.png);}
.benefit .hotel .con {margin:40px auto 0;}
.benefit .hotel .con .illust {margin-bottom:20px;}

.app_down {padding:40px 0; text-align:center; background:#ffd21d;}
.app_down a {display:inline-block; width:282px; height:71px; margin:0 13px; text-align:center; overflow:hidden; border-radius:100px; background:#fff;}

footer {padding:50px 0 70px; text-align:center; font-size:18px; line-height:1.4; font-family:'gmarket'; color:#b4b1a4; background:#221f14;}
footer div {margin-top:40px;}
footer div p + p {margin-top:8px;}

.dp_mb {display:none;}


/*****************************************************************************************************************************************************************************************/

@media all and (max-width:1199px) {
	header h1 {left:20px;}
	.main_visual {height:810px;}
	.main_visual h2 {width:800px; height:400px;}
}

@media all and (max-width:780px) {
	.main_visual {padding-top:40px; height:590px;}
	.main_visual h2 {width:560px;}
	.main_visual:after {width:474px; height:308px;}

	.benefit > div {padding:50px 20px;}
	.benefit .con > div {width:auto; height:auto; padding:30px 0;}
	.benefit h3 {width:600px;}
	
	.benefit .couple .con .illust {width:400px; margin:0 auto;} 
 	
	.benefit .con p {font-size:23px;}
	.benefit .con .sub {font-size:15px;}
	
	.app_down a {width:180px; height:48px; margin:0 5px;}
	.app_down a img {width:140px;}

	footer {padding:50px 20px 70px; font-size:15px; word-break:keep-all;}
}

@media all and (max-width:640px) {
	.dp_pc {display:none;}
	.dp_pc + strong {margin-left:7px;}
	.dp_mb {display:block;}

	header h1 {top:20px; width:30px;}

	.main_visual {height:520px;}
	.main_visual h2 {width:310px; background-image:url(../images/main_title_m.png);}
	.main_visual:after {width:334px; height:217px;}

	.benefit h3 {width:500px;}
	.benefit .con > div {padding:30px 50px; border-radius:20px; word-break:keep-all; box-shadow:5px 5px 0px 0px rgba(0,0,0,0.3);}
	.benefit .con p {font-size:19px;}
	.benefit .con .sub {font-size:14px;}
	.benefit .con .illust img {display:block;}
	
	.benefit .couple .con {margin-top:-50px;}
	.benefit .couple .con .illust {width:310px; margin:0 auto;} 

	.benefit .friend h3 {background-image:url(../images/benefit_tit02_m.png);}
	.benefit .friend .con .illust {width:350px; margin:0 auto;} 
	
	.benefit .hotel h3 {height:80px;}
	.benefit .hotel .con .illust {width:300px; margin:0 auto;}

	.app_down a {width:160px; height:43px;}
	.app_down a img {width:130px;}

	footer {padding:50px 20px 70px; font-size:13px; word-break:keep-all;}
	footer img {width:50px;}

}

@media all and (max-width:320px) {

}