@charset "utf-8";

h3{ font-size:18px;}
.tag{ position:absolute; z-index:10;}
.title h2::before { height: 54px;}

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

#main{ background:url(../img/top-mainimg.jpg) no-repeat center bottom; width:100%; height:570px; margin-top:-100px; padding:185px 0 0; text-align:center; z-index:1;}
#main a{ display:block; width:230px; height:40px; overflow:hidden; margin:15px auto 0; background:url(../img/btn-bg-org.png) repeat-x; line-height:42px; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; -moz-box-shadow:0 2px 5px 1px rgba(0,0,0,0.8); -webkit-box-shadow:0 2px 5px 1px rgba(0,0,0,0.8); box-shadow:0 2px 5px 1px rgba(0,0,0,0.8); color:#fff; font-size:18px; font-weight:bold; text-shadow:-1px -1px 0 rgba(0, 0, 0, 0.3);}

section{ text-align:center;}
#fun { background: url(../img/bg-croud.png) top center no-repeat, url(../img/bg-y.wh.png); margin-top:60px; padding:15px 0 5px;}
#fun .title{ margin-top:-30px;}
#fun ul,#fun a,#access>div>iframe,#access>div>div{ display:inline-block;}
#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-wh90.png); text-align:left; margin-top:-60px; padding:11px 10px 0 18px; z-index:10; -moz-box-shadow:1px 1px 7px rgba(0,0,0,0.2); -webkit-box-shadow:1px 1px 7px rgba(0,0,0,0.2); box-shadow:1px 1px 7px rgba(0,0,0,0.2);}
#fun .title+div>a>div h3{ border-left:5px solid #fd4141; margin-bottom:5px; padding:2px 0 0 7px; color:#111; 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:#555;}
#fun .tag{ left:-11px; top:-11px;}

#rec-nav{ text-align:center; padding:15px 0 50px; background:url(../img/bg-grid.png);}
#rec-nav ul{ margin:5px auto 20px; padding:0; text-align:center;}
#rec-nav ul li{ display:inline-block; width:200px; padding:0;}
#rec-nav ul li+li{ margin-left:15px;}
#rec-nav ul li a{ display:block; -moz-box-shadow:1px 1px 7px rgba(0,0,0,0.2); -webkit-box-shadow:1px 1px 7px rgba(0,0,0,0.2); box-shadow:1px 1px 7px rgba(0,0,0,0.2); background:#fff;}
#rec-nav ul li a:hover{ background:#fff33f;}
#rec-nav ul li a img{width:100%; height:auto;}

#flow { text-align:center; padding:0 0 40px;}
#flow .title h2::before{ background:#fd0;}
#flow h2{ color:#fd0;}
#flow h2+span{ color:#ffde00;}
#flow .title{ background:url(../img/top-02-bg.jpg) no-repeat center center; background-size:cover; height:360px; padding-top:40px; margin:0;}
#flow .title+div{ margin-top:-168px; padding-bottom:10px;}
#flow .tag{ left:11px; top:-20px;}
#flow div ul{ margin-bottom:20px;}
#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(255,216,0,1); -moz-box-shadow:5px 5px 0 0 rgba(255,216,0,1); -webkit-box-shadow:5px 5px 0 0 rgba(255,216,0,1); -o-box-shadow:5px 5px 0 0 rgba(255,216,0,1); -ms-box-shadow:5px 5px 0 0 rgba(255,216,0,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 div ul li a{}
#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 { text-align:center; padding:30px 0 70px;}
#access .title h2::before{ background:#fd0;}
#access h2{ color:#fd0;}
#access h2+span{ color:#ffde00;}
#access .title{ background:url(../img/top-03-bg.jpg) no-repeat center bottom; background-size:cover; height:420px; padding-top:40px; margin:0;}
#access>div{ text-align:center;}
#access>div.title+p{ padding:0 20px 50px; margin-top:-228px; color:#fff;}
.place-li{ display:inline-block; width:400px; margin:0 20px; padding-bottom:22px; -moz-box-shadow:1px 1px 7px rgba(0,0,0,0.2); -webkit-box-shadow:1px 1px 7px rgba(0,0,0,0.2); box-shadow:1px 1px 7px rgba(0,0,0,0.2); background:#fff;}
#access iframe{ width:100%; height:260px; margin-bottom:20px;}
#access h3{ font-size:20px; margin-bottom:10px;}

section#news{ width:800px; margin:-50px auto 0; padding:20px 30px; border-top:5px solid #ffaf20; height:175px; z-index:5; background:url(../img/bg-wh90.png); -moz-box-shadow:1px 1px 7px rgba(0,0,0,0.2); -webkit-box-shadow:1px 1px 7px rgba(0,0,0,0.2); box-shadow:1px 1px 7px rgba(0,0,0,0.2);}
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 #ccc; margin:10px 0;}
section#news .news-scroll ul li{ border-bottom:1px solid #ccc; padding:10px; text-align:left;}
section#news .news-scroll ul li span{ display:inline-block; width:110px;}

@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{ padding-bottom:10px;}
#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{ margin-bottom:-30px;}
#fun .title+div>a,#fun .title+div>ul{ width:100%;}
#fun .title+div>a{ margin:60px auto}
#fun .tag{ width:79px; height:auto;}

#rec-nav{ padding:30px 0 50px;}
#rec-nav ul{ margin:0 auto 30px; padding:0 10px;}
#rec-nav ul li,#rec-nav ul li+li{ width:48%; margin:1%;}
#rec-nav>a{ display:block; width:100%; overflow:hidden;}
#rec-nav>a img{ width:160%; height:auto; margin:0 -30%;}

#flow .title+div{ margin-top:-100px;}
#flow div ul{}
#flow div ul li{ display:block; width:225px; margin:0 auto 40px !important;}

#access { padding:30px 0 20px;}
.place-li{ display:block; width:86%; margin:0 7% 30px; padding-bottom:25px;}
#access iframe{ height:220px;}
#access h3{ font-size:18px;}

section#news{ width:88%; margin:-50px auto 0; padding:15px 10px; height:200px; z-index:5;}
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;}

}