@charset "utf-8";
/*******************************************************************************
 * Version 1.0 Release;
 * Copyright 2017
 ******************************************************************************/
    /* --------------------- MENU---------------------- */
Features
  
    #nav li.nav0 a:hover,#nav li.nav1 a:hover,#nav li.nav2 a:hover,#nav li.nav3 a:hover,#nav li.nav4 a:hover,#nav li.nav5 a:hover,#nav li.nav6 a:hover{ background-image:url(../images/nav_hover.jpg);}

    #goTop{
    	display: block;
    }

    /*------------------------- footer --------------------------*/

/*    #footer,.footer{
        clear:both;
        color:#555;
        text-align:center;
        margin:-40px 0 0;
        background:url(/images/2008/bg_dn.gif) repeat-x bottom;
        background-color: #ccc;
        padding:27px 0 17px;
        line-height:1.5em;
        font-size:12px;*/
/*    }
    .footer hr{
        color:#ccc; 
        height:1px;
    }*/
/*    #footer a,#footer a:visited,.footer a,.footer a:visited{
        color:#060;
        text-decoration:none;
        font-size:12px;
    }
    #footer a:hover,.footer a:hover{text-decoration:none;}*/
/*======================================== 框 */
.Wrap {
	min-height: 100%;
	position: relative;
	overflow: hidden;
}

/*======================================== header */
.container{
	margin-right: auto;
	margin-left: auto;
}
.Header {
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 999;
	background: #7edd31;
}
.Header > .Inner {
	padding: 1em 0;/*16/16 0*/
	height: 50px;
}
.nav.justify-content-center{
	background: #eee;
	margin-bottom:20px;
}
.nav.justify-content-center a{
	font-size:20px;
	display:inline-block;
	padding:20px 0px;
	color:#000;
	width:100%;
}
.nav.justify-content-center .nav-item{
	padding:0px;
}
.nav.justify-content-center a.active{
	background-color: #20a090;
    color: #fff;
}
.nav.justify-content-center a:hover{
	background-color: #20a090;
    color: #fff;
}
.nav.nav-pills.nav-justified{
	background: #eee;
}
.nav>li>a:focus, .nav>li>a:hover{
	background: #c6c6c6;
	color:#fff;
}
/*------------------------------品牌識別Logo------------------------------*/
/*.Header > .Inner > .Logo,
.Header > .Inner > .Logo > a {
	height: 30px;
	width: 200px;
}
.Header > .Inner > .Logo {
	left: 50%;
	margin: 0 0 0 -100px;
	overflow: hidden;
	position: relative;
}
.Header > .Inner > .Logo > a {
	display: block;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}
.Header > .Inner > .Logo > a > img {
	position:absolute;
	top:0;
	right:0;
	left:0;
	width:100%;
	max-width:100%;
}*/

/*======================================== Content */
.good{display:block; margin:0px auto;}
.Content,
.Section > .Inner {
	padding: 0.125em 2.6875%;/*50/16 15/320*100*/
}
.Section {
	margin: -2px -5.3%;
}
.Section > .Inner > h1 {
	color: #323232;
	font-size: 1.875em;/*30/16*/
	/*font-weight: bold;*/
	text-align: center;
	margin: 17px 75px;
	padding: 5px;
}
/*圖片共用*/
.ImgBox > .Img {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff6d00+0,ffd800+100 */
	display: block;
	/*overflow: hidden;*/
}
.ImgBox > .Img img.Photo {
	width: 100%;
}
/*SectionBanner */
.SectionBanner {
	background: url("../image/banner_mobile.jpg") no-repeat center center;
	background-size: cover;
}
.SectionBanner:after {
	content: " ";
	display: block;
	padding-top: 93.125%;
}
.Section.SectionBanner > .Inner {
	padding: 0;
	height: 0;
}
.SectionBanner .Info {
	text-indent: 100%;
	white-space:nowrap;
	overflow: hidden;
	height: 0;
}
/*SectionInfo*/
.SectionInfo {
	background-color: #fff;
}
.SectionInfo >.Inner{
	padding: 14px 18px;
}
.SectionInfo > .Inner a{
	color: #aaa;
}
.SectionInfo > .Inner > .col-xs-12 >.nav-pills{
	background-color: #ebebeb;		
}
.tab-pane{
		padding: 0px 0px;
		text-align:center;
}
.tab-pane > .col-xs-12{
	margin: 13px 0;
}
.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover{
	background-color: #20a090;/*#ff92e1*/
	color: #fff;	
}
.nav-pills > .nav-item >a{
	border-radius:0;
	color: #bcbcbc;
}
.tab-content > .tab-pane > .col-xs-12 > ul >.nav-item{
	float: left;
}
.TitleContent{
	margin: 22px 0px;
	font-size: 15px;
	letter-spacing: 3px;
}
.Note{
	text-align: center;
	background-color: #ffd9df;
	margin: 16px 5px;
	padding: 5px;
	border-radius: 4px;
}
.TitleContent > h2{
	font-size: 26px;
	line-height: 30px;
}
.TitleContent > .TitleInfo{
	font-size: 15px;
	line-height: 24px;
	letter-spacing: 3px;
}
.TitleHK{
	margin: 5px 0 10px;
}
.TitleHK > .ImgBox span{
	display: block;
	float: left;
}
.TitleHK > .TitleName{
	font-size: 16px;
	display: inline-block;
	padding: 42px 0 0;
}
.TitleHK > .SpotHK{
	font-size: 24px;
	display: inline-block;
}
/*SectionHk*/
.SectionHk > .Inner{
	padding: 6px 20px;
}
.List > .Pro {
	/* border: 1px solid #efefef; */
	margin-bottom: 30px;
}
.List > .Pro > .ImgBox > span img{
	display: inline-block;
	width: 100%;
}
.List> .Pro > .Info {
	border: 1px solid #efefef;
	background: #fff;
	padding: 16px 14px;
	line-height: 24px;
}
.List > .Pro > .Info > h2 {
	font-size: 24px;
	line-height: 1.2em;
	padding:0 0 10px;
	color: #20a090;
	margin: 0 -5px;
	text-align: center;
}
.Des{
	display:block;
	overflow:hidden;
	text-align:center;
	margin-bottom:60px;
}
.Des .ImgBox img{
	width:100%;
}
.Des .Info{
	/* background:#eee; */
}
.Hotel{
	font-size: 16px;
	padding: 5px 14px;
	border: 1px solid #32afff;
	border-radius: 6px;
	color: #32afff;
	margin: 10px 10px 4px;
	text-align: center;
}
.Hotel:hover{
	background-color: #32afff;
	color: #fff;
}
.More{
	text-align: center;
	font-size: 20px;
	padding: 5px 0;
	margin: 2px 20px 50px;
	color: #333;
	border: 1px solid #333;
}
.More:hover{
	background-color: #333;
	color: #fff;
}
.List > a .Pro {
	position: relative;
}
.List > a .Pro > .Location{
	position: absolute;
	z-index: 2;
	top:20px;
	left:20px;
	color: #fff;
	font-size: 20px;
	background: rgba(0,0,0,.7);
	padding: 5px 10px;
}
.List > a .Pro {
	margin-bottom: 12px;
}
.List > a .Pro > .ImgBox{
	/* border: 1px solid #efefef; */
}
.List > a .Pro3 > .ImgBox > span img{
	display: inline-block;
	width: 100%;
}
.List > a .Pro3 > .Set{
	text-align: center;
	background-color: #20a090;
	color: #fff;
	margin: 0 0 10px;
}
.List > a .Pro3 > .SetPlus{
	text-align: center;
	border: 1px solid #ccc;
	background-color: #fff;
	color: #555;
	margin: 0 0 5px;
}
.List > a .Pro3 > .Set > .Package{
	padding: 5px 10px 0;
	font-size: 22px;
}
.List > a .Pro3 > .Set > .Price{
	padding: 0 10px 5px;
	font-size: 16px;
}
.Fbevent{
	width:350px;
	font-size: 20px;
	background-color: #4267b2;
	text-align: center;
	padding: 5px 0;
	border-radius: 20px;
	margin:0 auto 30px auto;
	color:#fff;
}
.SectionHk > .Inner > a > .Fbevent{
	color: #fff;
}
	.Info.blog{
		background: #20a090;
		padding:10px 10px 20px 10px;
		color:#fff;
	}
	.Info.blog h2{
		font-size: 22px;
	}
	.Features{
		font-size: 16px;
		/* text-align:left; */
	}
	.Info.blog .Features{
		text-align:center;
	}
/*======================================== Footer */
.Footer {
	background: #7edd31;
	color: #6e6c6c;
	height: 4.125em;
	text-align: center;
	width: 100%;
	bottom: 0;
	left: 0;
	right: 0;
}
.Footer > h1 {
	display: none;
}
.Footer > .Inner {
	padding: 0.9375em 4.6875%;/*15/16 15/320*100*/
	line-height: 1.25;
}
.Footer > .Inner > .Copyright {
	font-size: 0.875em;/*14/16*/
}
	.TitleContent{
		font-weight: bold;
	}
	.TitleContent img{
		margin-right:30px;
	}
	.TitleContent span{
		border:1px #000 solid;
		border-bottom:6px #000 solid;
		padding:30px;
	}
	.TitleContent02 h3{
		font-size: 20px;
		text-align: left;
		font-weight: bold;
		margin-top:10px;

	}

	.TitleContent02 h3 span{
		display:block;
		font-size: 18px;
		font-weight: normal;
	}
/*======================================== Back to top button */

/*如果使用者之視窗寬度>=414px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 414px) {
	.SectionPros > .Inner{
		padding:6px 0;
	}
	.List > .Pro{
	}
}
/*如果使用者之視窗寬度>=600px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 600px) {
	/*======================================== Content */
	.List > .Pro{

	}
}
/*如果使用者之視窗寬度>=768px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 768px) {
	#goTop{
    	display: block;
    }
    #goTop2{
		display: none;
	}
	/*======================================== 框 */
	.Wrap {}
	/*======================================== header */
	.Header {}
	.Header > .Inner > .Logo,
	.Header > .Inner > .Logo > a {
		height: 30px;
	}
	.Header > .Inner > .Logo {
		margin: -2px 0 0 -120px;
	}
	/*下拉選單*/
	.Menu > ul > li > a {}

	/*======================================== Content */
	.Content,
	.Section > .Inner {
		padding: 0.125em 5.078125%;/*50/16 39/768*100*/
	}
	.Section {
		margin: -2px -5.6%;
	}
	.Section > .Inner > h1 {
		font-size: 2.25em;/*36/16*/
		margin: 0.78em 200px ;
	}
	/*SectionBanner */
	.SectionBanner {
		background: url("../image/banner_tb.jpg") no-repeat center center;
		background-size: cover;
		height: 300px;
	}
	.SectionBanner:after {
		padding-top: 65.10417%;
	}
	.InfoList {
		max-width:768px;
	}
	.space{
		display: none;
	}
	/*SectionInfo*/
	.SectionInfo >.Inner{
		padding: 30px;
	}
	.SectionInfo > .Inner a{
		color: #aaa;
	}
	.SectionInfo > .Inner > .col-xs-12 >.nav-pills{
		background-color: #ebebeb;		
	}
	.tab-pane > .col-xs-12{
		margin: 6px 0 46px;
	}
	.nav-pills>li>a{
		border-radius:0;
	}
	.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{
		background-color: #20a090;
		color: #fff;
	}
	.tab-content > .tab-pane > .col-xs-12 > ul >.nav-item{
		width: 132px;
	}

	}
	/*SectionHk*/
	.SectionHk{
		background-color: #fff;
	}
	.SectionHk > .Inner{
		padding: 6px 22px;
	}
	.TitleHK{
		margin: 0 28%;
	}
	.TitleContent{
		letter-spacing: 3px;
	}
	.List {
		display: inline-block;
		max-width: 768px;
		margin:-18px 1% 20px;
	}
	.List > a .Pro {
		float: left;
		background: #fff;
	}
	.List > a .Pro > .ImgBox > span img{
		width: 100%;
	}
	.More{
		padding: 12px 0;
		margin: -20px 30px 50px;
	}
	.List > a .Pro3{
		float: left;
		width: 48%;
		margin: 10px 7px 0;
	}
	.List > a .Pro3 > .ImgBox > span img{
		width: 100%;
	}
	.Note{
		margin: 5px 0px 26px;
	}
}

	/*======================================== Footer */

/*如果使用者之視窗寬度>=800px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 800px) {
	/*======================================== Wrap 最外框 */
	/*======================================== Header */
	/*======================================== Content */

	/*======================================== Footer */
}
/*如果使用者之視窗寬度 =1024px(橫向)iPad，將會再載入這裡的 CSS。*/
@media (max-device-width: 1024px) and (orientation: landscape) {}

@media screen and (max-width: 414px) {
		.Fbevent{
	width:100%;
	}
}
@media screen and (max-width: 680px) {
	.good{width:100%;}
	.TitleContent > h2{
		font-size: 20px;
	}
	.TitleContent > h2 img{
		display:none;
	}
	.TitleContent > h2 span{
		padding:20px; display:block;
	}
}
/*如果使用者之視窗寬度>=1024px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 1024px) {
	#goTop2{
		display: none;
	}
	/*======================================== Wrap 最外框 */
	/*======================================== Header */
	.Header {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		padding: 1.375em 0 1em;/*22/16 0 16/16*/
	}
	.Header > .Inner {
		max-width: 1000px;
		height: auto;
		padding: 0;
		margin: 0 auto;
	}
	.Header > .Inner:after {
		content: "";
		display: block;
		clear: both;
		line-height: 0;
		height: 0;
		visibility: hidden;
	}
	/*------------------------------品牌識別Logo------------------------------*/
	.Header > .Inner > .Logo,
	.Header > .Inner > .Logo > a {
		height: 30px;
		width: 218px;
	}
	.Header > .Inner > .Logo{
		position: static;
		float: left;
		margin: 4px 0;
	}
	.Header > .Inner > .Logo > a {
		position: relative;
	}
	/*======================================== Content */
	.Content {
		padding: 0 0;
	}
	.Section {
		margin: 0;
	}
	.Section > .Inner {
		max-width: 1140px;
		margin: 0 auto;
		padding: 0.375em 0;/*70/16 0*/
	}
	.Section > .Inner > h1 {
		font-size: 2.5em;/*40/16*/
		margin: 40px 100px 10px;
	}
	/*共用 -購買資訊 */

	/*SectionBanner */
	.SectionBanner {
		background: url("../image/banner_tb.jpg") no-repeat center center;
		background-size: cover;
		width: 100%;
		height: 450px;
	}
	.SectionBanner:after {
		padding-top: 34.479167%;
	}
	.SectionBanner .Info {		
	}
	/*SectionInfo*/
	.SectionInfo > .Inner{
		padding: 30px 0 20px;
	}

	.tab-pane > .col-xs-12{
		margin-top: 13px;
	}
	.tab-pane > .tab2{
		/*margin-left: 332px;*/
	}
	.tab-pane > .tab3{
		/*margin-left: 662px;*/
	}
	.tab-pane > .col-xs-4{
		margin-top: 13px;
	}
	.nav-pills>li>a{
		border-radius:0;
	}
	/*SectionHk*/
	.SectionHk{
		background-color: #fff ;
		text-align:center;
	}
	.SectionHk > .Inner{
	}
	.TitleHK{
		margin: 0 34%;
	}
	.TitleContent{
		text-align: center;
		font-size: 16px;
		padding: 0 80px;
		letter-spacing: 3px;
		display:block;
	}

	.TitleContent > .TitleInfo{
		font-size: 16px;
		margin: 0 42px;
		letter-spacing: 3px;
	}
	.List {
		display: inline-block;
		max-width: 1200px;
		padding: 0 5px;
		margin: 5px 0;
	}
	.List > a .Pro{
		float: left;
		background: #fff;
	}
	.List > .Pro {
		float: left;
		background: #fff;
	}
	.List > .Pro > .ImgBox > span img{
		
	}
	.List > .Pro a > .ImgBox > span img{
		width: 100%;
	}
	.List > .Pro a > .Info{
		padding: 24px;
	}
	.List > .Pro a > .Info h2{
		font-size: 24px;
	}
	.Info.blog{
		background: #20a090;
		padding:10px 10px 20px 10px;
		color:#fff;
	}
	.Info.blog h2{
		margin-top: 10px;
	}
	.List > .Pro a > .Info.blog h2{
		font-size: 24px;
	}
	.List > .Pro a > .Info > h2 .SmallEng{
		font-size: 15px;
		color: #555;
	}
	.List3 {
		display: inline-block;
		max-width: 1200px;
		margin: 0 12%;
	}
	.List > a .Pro3{
		width: 360px;
	}
	.More{
		margin: 0 390px 50px;
	}
	.Note{
		margin: 5px 100px 26px;
	}

	/*======================================== Footer */
	.Footer {
		height: 2.375em;/*38/16*/
	}
	.Footer > .Inner {
		padding: 0.5625em 0;/*9/16 0*/
	}
	.Footer > .Inner > .Copyright {
		font-size: 1em;/*16/16*/
	}
}
/*如果使用者之視窗寬度>=1280px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 1280px) {
	/*======================================== Content */
	.SectionInfo > .good{width:auto; display:block; margin:0px auto; width:720px; height:auto;}
	.SectionBanner {
		background: url("../image/banner_pc.jpg") no-repeat center center;
		background-size: cover;
		width: 100%;
		height: 350px;
	}
	.SectionSkiplay > .Inner > .List > .Pro a > .Info > .Features ,.SectionRoadtrip > .Inner > .List > .Pro a > .Info > .Features,.SectionSelfguidedtourtohoku > .Inner > .List > .Pro a > .Info > .Features,.SectionSelfguidedtourhokuriku > .Inner > .List > .Pro a > .Info > .Features,.SectionSelfguidedtourhokkaido > .Inner > .List > .Pro a > .Info > .Features{
		height: 110px;
	}
	.List3{
		margin: 0 16%;
	}
	.List > .Pro{
		float: left;
		background: #fff;
	}
	.List > a .Pro{
	}
	.List > .Pro a > .ImgBox > span img{
		width: 100%;
	}
	.tab-pane > .tab2{
		/*margin-left: 370px;*/
	}
	.tab-pane > .tab3{
		/*margin-left: 740px;*/
	}
}
/*如果使用者之視窗寬度>=1600px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 1600px) {
	.SectionInfo > img{
		height: 900px;
		margin: 0 0;
	}
	/*======================================== Content */
}/*如果使用者之視窗寬度>=1920px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 1920px) {
	.SectionInfo > img{
		height: 420px;
		padding: 0 0;
	}
}