@charset "utf-8";

h3{ font-size:18px;}
.tag{ position:absolute; z-index:10;}

header{ box-shadow:0 5px 10px 0 rgba(0,0,0,0.5);}

#main{ background:url(../img/top-mainimg.jpg) no-repeat center center; background-size:cover; width:100%; height:570px; margin-top:-100px; padding:185px 0 0; text-align:center; z-index:1;}
#main a{ display:block; width:200px; height:34px; overflow:hidden; margin:0 auto; background:#c03200; line-height:34px; box-shadow:5px 5px 0 0 rgba(0,0,0,0.7); color:#fff; font-size:16px; font-weight:bold; letter-spacing:3px; text-shadow:-1px -1px 0 rgba(0, 0, 0, 0.3);}

section{ text-align:center;}
#fun ul,#fun a,#access>div>iframe,#access>div>div{ display:inline-block;}
#fun .title+div{}
#fun .title+div>a{ margin:0 20px 60px;}
#fun .title+div>a>div{ position:absolute; right:10px; width:236px; height:96px; background:url(../img/bg-bk90.png); text-align:left; margin-top:-60px; padding:11px 10px 0 18px; z-index:10;}
#fun .title+div>a>div h3{ border-left:5px solid #fc0; margin-bottom:5px; padding:2px 0 0 7px; color:#fff; font-size:15px; line-height:1.3em;}
#fun .title+div>a>div h3 span{ display:inline-block; margin-right:5px;}
#fun .title+div>a>div h3 span.en-s{ display:block; font-size:13px; padding:2px 0 3px;}
#fun .title+div>a>div h3+span{ font-size:13px; color:#999;}
#fun .tag{ left:-11px; top:-11px;}
#rec-nav{}
#rec-nav ul{ width:900px; margin:5px auto 40px; padding:10px 0; border-top:1px solid #333; border-bottom:1px solid #333; text-align:center;}
#rec-nav ul li{ display:inline-block; width:280px; height:90px; padding:20px;}
#rec-nav ul li+li{ border-left:1px solid #333;}
#rec-nav ul li a{ display:block; height:50px; padding-left:40px; background:url(../img/gnavi-guide.png) left center no-repeat; background-size:42px 42px; font-size:24px; color:#fff;}
#rec-nav ul li a span{ display:block; text-align:center; font-size:14px; color:#999;}
#rec-nav.zh ul li a span{ font-size:13px;}
#rec-nav ul li:nth-child(2) a{ background-image:url(../img/gnavi-car.png);}
#rec-nav ul li:nth-child(3) a{ background-image:url(../img/gnavi-reserve.png);}

#flow { background:url(../img/top-02-bg.jpg) no-repeat center center fixed; background-size:cover;}
#flow .tag{ left:11px; top:-20px;}
#flow ul{ margin-bottom:30px;}
#flow div ul li{ display:inline-block; margin:-10px 10px 0; background:#fff; display:inline-block; width:225px; height:245px; box-shadow:5px 5px 0 0 rgba(225,180,2,1);}
#flow div ul li:nth-child(2){ margin-top:30px}
#flow div ul li:nth-child(3){ margin-top:10px}
#flow div ul li:nth-child(4){ margin-top:40px}
#flow ul li h3{ color:#ff3600; margin:13px 0 7px; line-height:1.1em;}
#flow ul li span{ display:block; text-align:left; padding:0 15px 0 23px; font-size:13px; line-height:1.6em; color:#333;}
#flow ul li a{ color:#64440f; text-decoration:underline;}

#access{ background:#111;}
#access div.title{ background:url(../img/bg-bk.wh.png); padding:40px 0 50px; margin-top:-40px;}
#access>div{ text-align:center; margin-top:30px;}
#access>div.title+p{ margin-top:-50px; padding:0 20px;}
#access>div>iframe,#access>div>div{ width:500px; height:320px;}
#access>div>div{ padding-top:40px; background:#0c0c0c;}
#access h3{ font-size:20px; margin-bottom:15px;}
#access h3+p{ margin-bottom:25px;}

section#news{ width:800px; margin:-50px auto 0; padding:20px 30px; border-top:5px solid #af8507; height:175px; z-index:5; background:url(../img/news-bg.png);}
section#news .news-title{ padding:0 10px 10px;}
section#news .news-title span.midashi{ font-family:'Droid Serif',serif; float:left; display:inline-block; height:20px; line-height:20px; overflow:hidden; padding-left:27px; background:url(../img/news-icon.png) left center no-repeat; background-size:20px;}
section#news .news-title span+span{ float:right;}
section#news .news-title span+span a{ display:inline-block; height:20px; line-height:20px; overflow:hidden; padding:0 12px 0 0; background:url(../img/icon-tri.png) right center no-repeat;}
section#news .news-scroll{ height:100px; padding:0 10px; overflow:auto; position:relative;}
section#news .news-scroll ul{ border-top:1px solid #1b1912; margin:10px 0;}
section#news .news-scroll ul li{ border-bottom:1px solid #1b1912; padding:10px; text-align:left;}
section#news .news-scroll ul li span{ display:inline-block; width:110px;}

.campaign{ margin:-50px auto 0; z-index:5; text-align: center;}
.campaign-img{ box-shadow: 0px 9px 10px -6px rgba(0, 0, 0, 0.25);}


@media only screen and (max-width: 767px) {

#main{ height:300px; margin-top:0; padding-top:45px; background-size:188%;}
#main img{ width:95%; height:auto;}
#main a{ width:200px; margin-top:12px; font-size:16px;}

#fun img{ width:100%; height:auto;}

#fun h2::before,#access h2::before,#flow h2::before { margin-bottom:15px;}
#fun .title+div,#flow .title+div{ padding:0 36px;}
#fun ul,#fun a,#access>div>iframe,#access>div>div{ display:block;}
#fun h2+span,#access h2+span,#flow h2+span{ line-height:36px;}
#fun .title+div>a>div{ width:245px; padding:11px 10px 0 15px;}
#fun .title+div>a>div h3{ font-size:16px;}

#fun .title{}
#fun .title+div>a,#fun .title+div>ul{ width:100%; margin:0 auto;}
#fun .title+div>a+a{ margin:90px auto;}
#fun .tag{ width:79px; height:auto;}

#fun .title+div+nav+a{ display:block; margin-top:30px; width:100%; overflow:hidden;}
#fun .title+div+nav+a img{ width:140%; height:auto; margin:0 -20%;}
#fun .title+div>a>div{ right:-10px; width:250px; margin-top:-30px; border-bottom:1px solid #555; border-right:1px solid #555;}

#rec-nav ul{ width:90%; margin:40px auto 20px; padding:0;}
#rec-nav ul li{ display:inline-block; width:280px; height:90px; padding:20px;}
#rec-nav ul li+li{ border-left:none; border-top:1px solid #333;}

#flow { background-attachment:scroll;}
#flow div ul li{ display:block; width:225px; margin:0 auto !important;}
#flow div ul li+li{ margin-top:40px !important;}

#access .title{}
#access .title+div{ margin:-45px 0 0;}
#access>div>iframe,#access>div>div{ width:100%; height:auto;}
#access>div>div{ margin-bottom:30px; padding:0 30px; background:none;}
#access>div>div{ padding:0;}
#access h3{ margin-bottom:20px; background:#e1b402; color:#fff; padding:7px 0;}
#access h3+p{ margin-bottom:15px;}
#access>div.title+p{ margin:-45px 15px 20px; padding:15px; background:#333;}

section#news{ width:88%; margin:-50px auto 0; padding:15px 10px; height:200px; z-index:5; background:url(../img/news-bg.png);}
section#news .news-title{ padding:0 10px 10px; font-size:13px;}
section#news .news-title span.midashi{ height:18px; line-height:18px; padding-left:25px; background-size:18px;}
section#news .news-title span+span a{ height:18px; line-height:18px; padding:0 11px 0 0;}
section#news .news-scroll{ height:132px; padding:0 0 0 10px; overflow:auto; position:relative;}
section#news .news-scroll ul{ margin:5px 0;}
section#news .news-scroll ul li{ padding:12px 12px 12px 20px; text-align:left;}
section#news .news-scroll ul li span{ display:block; width:100%; margin:0 0 3px -10px; font-size:12px; color:#555;}

.campaign{ margin:-50px auto 0; z-index:5; text-align: center;}
.campaign-img{ width: 96%; height: auto;}
.campaign-img.sp{ display: inline-block;}

}