@charset "utf-8";

#m_contents {
	background: #161f45 url(../images/bg.jpg) no-repeat center 0;
}

#return_top { text-align:center; margin:10px; }
#return_top a { background: url("//image.stworld.jp/images/common/tri01.gif") no-repeat scroll left 5px rgba(0, 0, 0, 0); line-height: 1em; padding-left: 10px; }


#m_contents *{ box-sizing: border-box }
#m_contents p{ font-size: 14px }

#ToTop {
	position: fixed;
	background: rgba(157, 42, 36, .7);
	color: #fff;
	display: none;
	text-align: center;
	text-decoration: none !important;
	padding: .75em 0;
	font-size: 18px;
	width: 100%;
	bottom: 0;
	left: 0;
}

#MainArea{
	width: 1100px;
	margin: 10px auto !important;
	line-height: 1.5
}

#MainHeader{
	background: transparent url(../images/h2.jpg) no-repeat;
	width: 1100px;
	height: 711px;
	position: relative
}

#MainHeader > h2{ z-index: 0 }

#ToList{
	top: 32px;
	right: 62px;
	z-index: 1
}

#Intro{
	color: #fff;
	background: transparent url(../images/intro_bg.png) no-repeat;
	box-sizing: border-box;
	position: absolute;
	left: 205px;
	bottom: 32px;
	width: 689px;
	height: 284px;
	padding: 45px 55px !important;
	font-size: 16px !important;
	line-height: 1.8;
	z-index: 2
}

#Main{
	background-color: #ebe2c5;
	padding: 0 25px !important;
	position: relative
}

#Main .add_bn{
	padding:20px 0 30px;
	text-align:center;
}

#Main a:hover{ text-decoration: underline !important }

#Main h3{
	color: #e43834;
	background-repeat: no-repeat;
	background-position: center 25px;
	font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	font-size: 28px;
	padding: 0 !important;
	text-align: center;
	text-shadow: none;
	margin: 1em auto !important;
	width: auto;
	height: auto;
	line-height: 1
}

#Main h3:before,
#Main h3:after{ content: url(../images/ornament.png) }

#Main h3:before{ padding-right: 20px }
#Main h3:after{ padding-left: 20px }

#Main h3:first-child{
	margin-top: 0 !important;
	padding-top: 1em !important
}

#About h3{ background-image: url(../images/h3_about.png) }

#About h4{
	color: #fff;
	font-size: 22px;
	text-align: center;
	padding: .75em 0 !important;
	margin: 0 0 1em 0 !important;
	line-height: 1;
	background: #286126 url(../images/stripe.png)
}

#About .btn,
#Howto .btn{
	background: #e2a800;
	padding: 1em;
	border: 4px solid #fff;
	box-shadow: 0 0 0 4px #e2a800;
	width: 280px;
	line-height: 1.25;
	margin: 0 20px;
	vertical-align: middle
}




#List .btn{
	background: #a92a27 url(../images/stripe.png);
	font-size: 16px;
	width: 25em;
	padding: 1.5em 0;
	box-shadow: 2px 2px 5px 0px rgba(255, 255, 255, .5) inset,
	-2px -2px 5px 0px rgba(0, 0, 0, .25) inset
}

#List .btn:after{	vertical-align: middle }

#List .btn02{
	background: #286126 url(../images/stripe.png);
	font-size: 16px;
	width: 25em;
	padding: 1.5em 0;
	box-shadow: 2px 2px 5px 0px rgba(255, 255, 255, .5) inset,
	-2px -2px 5px 0px rgba(0, 0, 0, .25) inset
}

#List .btn02:after{	vertical-align: middle }

#Howto h4{
	color: #fff;
	font-size: 22px;
	text-align: center;
	margin: 0 auto .75em auto;
	width: auto
}

#Howto h4.info{ color: #e43834 }

#Howto h3,
#List h3{ background-image: url(../images/h3_howto.png) }

#Pics{
	position: relative;
	height: 1700px
}

#Pics h4:before,
#Pics h4:after{
	content: url(../images/crystal.png);
	display: inline-block;
	vertical-align: middle
}

#Pics h4:before{ padding-right: 14px }
#Pics h4:after{ padding-left: 14px }

#List > .dFlex{
	margin-bottom: 10px;
	justify-content: center
}

#StaffVoice{ padding-bottom: 2em }
#StaffVoice h3{ background-image: url(../images/h3_voice.png) }
#StaffVoice .dFlex > div{ position: relative }
#StaffVoice .dFlex a{
	background: transparent url(../images/ribon.png) no-repeat center top;
	color: #fff;
	display: inline-block;
	vertical-align: middle;
	position: absolute;
	left: 0;
	bottom: 20px;
	font-size: 22px;
	width: 100%;
	height: 40px;
	text-align: center;
	text-decoration: none;
	padding: .25em 0;
	z-index: 100
}

#StaffVoice .dFlex a:after{ vertical-align: middle !important }

.baloon{
	background: #286126;
	-o-border-radius: 9px;
	-ms-border-radius: 9px;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
	border-radius: 9px;
	font-size: 14px;
	color: #fff;
	padding: 20px 24px !important;
	position: absolute
}

.baloon.wear{ background: #9d2a24 }
.baloon.grourmet{ left: 640px; top: 57px; width: 27em }
.baloon.hotwine{ left: 125px; top: 642px; width: 26.5em }
.baloon.ornament{ left: 552px; top: 980px; width: 26em }
.baloon.wear{ left: 98px; top: 1358px; width: 26em }
.grourmet00{ left: 68px; top: 60px }
.grourmet01{ left: 257px; top: 370px }
.grourmet02{ left: 445px; top: 360px }
.grourmet03{ left: 745px; top: 342px }
.grourmet04{ left: -4px; top: 388px }
.hotwine00{ left: 582px; top: 574px }
.ornament00{ left: 34px; top: 1006px }
.ornament01{ left: 447px; top: 1174px }
.ornament02{ left: 800px; top: 1205px }
.bg_howto00{ left: 400px; top: 505px }
.bg_howto01{ left: 25px; top: 835px }
.bg_howto02{ left: 995px; top: 1000px }
.bg_howto03{ left: 623px; top: 1195px }
.bg_howto04{ left: 932px; top: 1442px }
.wear00{ left: 585px; top: 1363px }
.germany a:before{ background: url(../images/germany.png) }
.austria a:before{ background: url(../images/austria.png) }
.belgium a:before{ background: url(../images/belgium.png) }
.france a:before{ background: url(../images/france.png) }
.britain a:before{ background: url(../images/britain.png) }
.italy a:before{ background: url(../images/italy.png) }
.czech a:before{ background: url(../images/czech.png) }
.hungary a:before{ background: url(../images/hungary.png) }
.croatia a:before{ background: url(../images/croatia.png) }
.swiss a:before{ background: url(../images/swiss.png) }
.poland a:before{ background: url(../images/pl_flag.png) }
.romania a:before{ background: url(../images/ro_flag.png) }
.nederland a:before{ background: url(../images/nl_flag.png) }

.baloon.grourmet:before{
	content: url(../images/baloon_green_left.png);
	position: absolute;
	left: -94px;
	top: 118px
}

.baloon.hotwine:after{
	content: url(../images/baloon_green_right.png);
	position: absolute;
	right: -88px;
	top: 45px
}

.baloon.ornament:before{
	content: url(../images/baloon_green_left.png);
	position: absolute;
	left: -94px;
	top: 80px
}

.baloon.wear:after{
	content: url(../images/baloon_red_right.png);
	position: absolute;
	right: -88px;
	top: 55px
}

.article{
	position: relative;
	margin: 0 0 50px 0 !important;
}

.list_box{
	background: #fff;
	border: 1px solid #333;
	padding: 36px !important;
	margin: 44px auto !important
}

.list_box > h4{
	color: #fff;
	background: #286126 url(../images/list_box_h4.png) no-repeat;
	font-size: 32px;
	text-align: center;
	margin: -36px -36px .5em -36px !important;
	padding: .5em 0 !important
}

.list_box > h4:before{
	display: inline-block;
	padding-right: 8px;
	margin-top: -5px;
	vertical-align: middle
}

#ListGermany > h4:before{ content: url(../images/germany.png) }
#ListAustria > h4:before{ content: url(../images/austria.png) }
#ListBelgium > h4:before{ content: url(../images/belgium.png) }
#ListFrance > h4:before{ content: url(../images/france.png) }
#ListBritain > h4:before{ content: url(../images/britain.png) }
#ListItaly > h4:before{ content: url(../images/italy.png) }
#ListCzech > h4:before{ content: url(../images/czech.png) }
#ListHungary > h4:before{ content: url(../images/hungary.png) }
#ListCroatia > h4:before{ content: url(../images/croatia.png) }
#ListSwiss > h4:before{ content: url(../images/swiss.png) }
#ListPoland > h4:before{ content: url(../images/pl_flag.png) }
#ListRomania > h4:before{ content: url(../images/ro_flag.png) }
#ListNederland > h4:before{ content: url(../images/nl_flag.png) }

.list_box h5{
	font-size: 30px;
	font-weight: bold
}

.list_box strong{
	color: #e43834;
	font-size: 16px;
	
}

.links a{
	display: inline-block;
	color: #fff;
	background: #286126 url(../images/stripe.png);
	text-align: center;
	text-decoration: none;
	padding: .5em 0;
	width: 340px;
	position: relative
}

.border_none{
	border-bottom: none !important;
	padding-bottom: 0 !important;
	margin-bottom: 0 !important
}

.links a:before{
	background-repeat: no-repeat;
	content: ' ';
	display: inline-block;
	width: 45px;
	height: 30px;
	padding-right: 8px;
	background-size: contain;
	vertical-align: middle
}

.north_eu a:before,
.balts a:before{
	padding-right: 0;
	width: 0
}

.imgs{ white-space: nowrap }
.dFlex{
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex
}

.dFlex > div{ font-size: 14px }
.dFlex > div:first-child{ margin-right: 10px !important }
.dFlex > div:last-child{ margin-left: 10px !important }
.pos_abs{ position: absolute }
.text-center{ text-align: center }
.mb24px{ margin-bottom: 24px !important }
.mt1_2em{ margin-top: .5em !important }
.mt1em{ margin-top: 1em !important }
.mt2em{ margin-top: 2em !important }
.mt3em{ margin-top: 2em !important }
.mb1em{ margin-bottom: 1em !important }
.w50per{ width: 50% }

.mtb3em{
	margin: 3em 0 !important;
}
.mtb25em{
	border-bottom: 1px solid #333;
	margin: 2.5em -36px 1.5em -36px !important;
	padding-bottom: 2.5em !important
}

.btn{
	display: inline-block;
	-moz-border-radius: 11px;
	-webkit-border-radius: 11px;
	-o-border-radius: 11px;
	-ms-border-radius: 11px;
	border-radius: 11px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	font-size: 16px
}
.btn02{
	display: inline-block;
	-moz-border-radius: 11px;
	-webkit-border-radius: 11px;
	-o-border-radius: 11px;
	-ms-border-radius: 11px;
	border-radius: 11px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	font-size: 16px
}

#StaffVoice .dFlex a:after,
#m_contents .btn:after{
	content: url(../images/arrow_right00.png);
	display: inline-block;
	vertical-align: top;
	padding-left: 1em
}

.btn.a_staffvoice{
	display: block;
	margin: 0 auto !important;
	padding: .5em 0 !important;
	width: 400px !important
}

.btn.a_staffvoice:after{
	display: block;
	margin-top: 12px
}

.btn.down:after{
	content: url(../images/arrow_down.png) !important;
	display: block !important;
	padding: 0;
	white-space: pre
}

.links a:after{
	content: url(../images/arrow_down.png);
	position: absolute;
	right: 16px;
	top: 15px
}

.pc_none{ display: none !important }


/****************** おすすめツアーリンク ***************/

#main .section07 {
    padding: 0 0 100px;
}
#main .section07 h3{ background-image: url(../images/h3_about.png) }

#main .section07 .travel__wrapper {
    overflow: hidden;
}

#main .section07 .travel__item {
    width: 245px;
    float: left;
    padding: 0 20px 0 0;
}

#main .section07 .travel__item:last-child {
    padding: 0;
}

#main .section07 .travel__item .travel__image {
    padding: 0 0 12px;
}

#main .section07 .travel__item .travel__image img {
    width: 245px;
    height: auto;
}

#main .section07 .travel__item .travel__name {
    padding: 0 0 3px;
}

#main .section07 .travel__item .travel__name span {
    font-size: 12px;
    color: #008f3e;
    font-weight: bold;
}

#main .section07 .travel__item .travel__desc {
    line-height: 1.5;
    margin: 0 0 10px;
    height: 105px;
}

#main .section07 .travel__item .travel__price {

    text-align: center;
    border-top: 1px solid #c3c3c3;
    border-bottom: 1px solid #c3c3c3;
    padding: 12px 0 8px;
    margin: 0 0 20px;
}

#main .section07 .travel__item .travel__price span {
    font-size: 20px;
    color: #cb0c12;
    font-weight: bold;
}

#main .section07 .travel__item .travel__link a {
    display: block;
    color: #c94f36;
    text-align: center;
    font-size: 16px;
    background: #ffffff;
    border: 1px solid #c94f36;
    border-bottom: 3px solid #c94f36;
    border-radius: 100px;
    padding: 10px 0 8px;
    position: relative;
    text-decoration: none;
}

#main .section07 .travel__item .travel__link a:after {
    content: "";
    display: block;
    width: 6px;
    height: 9px;
    position: absolute;
    top: 50%;
    right: 20px;
    margin-top: -4.5px;
    background: url("../images/icon_arrow_r.png") no-repeat center center;
    text-decoration: none;
}

#main .section07 .travel__item .travel__link a:hover {
    color: #ffffff;
    background: #c94f36;
    text-decoration: none;
}

#main .section07 .travel__item .travel__link a:hover:after {
    right: 10px;
    background: url("../images/icon_arrow_w.png") no-repeat center center;
    text-decoration: none;
}
.add_bn_ts { width: 100%; padding:20px 0 30px !important; text-align:center; }



@media screen and (max-width: 640px){
	img {
		width:100%;
	}
	#MainArea, #MainHeader{ width: 100% }

	#MainHeader{
		height: 250px;
		background-size: cover;
	}

	#ToList{
		top: auto;
		bottom: 10px;
		left: 0;
		right: 0;
		width: 60%;
		margin: 0 auto;
	}

	#Intro{
		background: none;
		width: calc(100% - 10px);
		height: auto;
		top: auto;
		bottom: auto;
		left: auto;
		right: auto;
		margin: 130px auto auto auto !important;
		box-sizing: border-box;
		position: relative;
		padding: 0 !important;
	}

	#Intro > div{
		background: transparent url(../images/sp/intro_bg_02.png) repeat-y;
		background-size: contain;
		line-height: 1.4;
		font-size: 11px !important;
		padding: .25em 2.25em !important;
	}

	.intro{ display: inline-block}

	#Main{ padding: 18em 10px 0 10px !important }

	#Main h3{
		font-size: 18px;
		padding-top: 3em;
		margin-bottom: 1.25em !important;
		background-position-y: top;
		position: relative;
	}

	#Main h3:first-child{	padding-top: 3em !important }

	#Main h3:before, #Main h3:after{
		position: absolute;
		top: 2em;
		zoom: .75
	}

	#Main h3:before{ left: -5px }
	#Main h3:after{ right: -5px }
	#main{ margin-top: -10px }
	#MainArea{ margin: 0 !important }
	#MainHeader h2 > img{ margin: 0 auto; width: 300px }

	#About h4{
		padding: .5em 0 !important;
		margin-bottom: 1em !important;
	}

	#About .dFlex{ position: relative; margin: 0 !important; }

	#About .dFlex div:first-child{
		width: 80px;
		padding: 0 10px !important;
	}

	#About .dFlex div:nth-child(2){
		flex: 1;
		padding-right: 10px;
	}

	#About .dFlex div > div{
		position: absolute;
		left: 0;
		box-sizing: border-box;
		width: 100%;
		padding: 0 10px !important;
		margin-top: 0 !important;
	}

	#About .dFlex div > div > a{ margin-top: 1.5em }

	#About .btn, #Howto .btn{
		width: calc(100% - 40px);
		margin: 0 auto;
	}

	#About .article:nth-child(3){ margin-top: 9em !important; }
	#About .article:nth-child(4){ margin-top: 19.5em !important; margin-bottom: 13em !important }

	#Howto h4{ margin: 0 auto .25em auto !important }
	#Howto .dFlex, #StaffVoice .dFlex{ display: block }
	#Howto .dFlex .w50per{
		width: 100%;
		padding: 0 10px;
		box-sizing: border-box;
	}
	#Howto .dFlex .w50per:last-child{ margin-top: 2em; padding:0 20px 0 0 !important; }

	#Pics{
		width: 100%;
		height: auto;
		padding: 0 10px !important;
		box-sizing: border-box;
		margin-top: 2em !important;
	}

	#List > .dFlex.pc_none{
		display: -webkit-box !important;
		display: -ms-flexbox !important;
		display: -webkit-flex !important;
		display: flex !important;
	}

	#List > .dFlex.pc_none > div{ width: 50% }
	#List > .dFlex.pc_none > div:first-child{ margin-right: 5px !important }
	#List > .dFlex.pc_none > div:last-child{ margin-left: 5px !important }
	#List .btn{ width: 100% }
	#List .btn02{ width: 100% }
	#List .mtb25em{ margin: 1em 0 0 0 !important }
	#List .mtb25em.border_none{ padding-bottom: 0 !important }

	#StaffVoice .dFlex > div{ margin: 0 0 1em 0 !important }
	#StaffVoice .dFlex a{
		bottom: 0;
		background: #e43834;
		height: auto;
	}

	.links a{
		position: relative;
		width: 100%
	}

	.links a:before{
		position: absolute;
		left: 10px;
		zoom: .75
	}

	.links a:after{ zoom: .75; right: 10px }
	.list_box{ padding: 24px 20px !important }
	.list_box > h4{
		line-height: 1;
		margin: -36px -21px .5em -21px !important;
		background-position: -30px center;
		text-shadow: #000 2px 2px 2px, #000 -2px 2px 2px, #000 2px -2px 2px, #000 -2px -2px 2px
	}

	.list_box .dFlex{ display: block }
	.list_box h5{ font-size: 26px; margin-top: 1em !important; text-align: center }
	.list_box strong{ display: block; text-align: center; line-height: 1.2; margin: 1em 0 !important }
	.list_box .dFlex .imgs{
		display: -webkit-box !important;
		display: -ms-flexbox !important;
		display: -webkit-flex !important;
		display: flex !important;
		margin-left: 0 !important
	}

	.list_box .dFlex .imgs img{
		width: calc(50% - 4px);
		max-width: calc(50% - 4px);
		height: calc(50% - 4px);
		margin-top: 10px !important;
	}

	.list_box .dFlex .imgs img:first-child{ margin-right: 2px !important }
	.list_box .dFlex .imgs img:last-child{ margin-left: 2px !important }
	.list_box .dFlex .imgs img.full{
		width: 100%;
		max-width: 100%;
	}
	.baloon{
		margin-top: 1em !important;
		position: relative
	}

	.baloon.grourmet,
	.baloon.hotwine,
	.baloon.ornament,
	.baloon.wear{
		width: 100%;
		padding: 10px !important;
		box-sizing: border-box;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0
	}

	.baloon.grourmet:before,
	.baloon.hotwine:after,
	.baloon.ornament:before,
	.baloon.wear:after{ display: none }

	.btn.a_staffvoice{
		margin: 3em 10px !important;
		box-sizing: border-box;
		width: calc(100% - 20px) !important
	}

	.pc_none{ display: block !important }
	.sp_none{ display: none !important }
	
	
	/************* おすすめツアー **************/
    #main .section07 {
        padding: 20px 0;
    }

    #main .section07 .travel__item {
        width: 49%;
        padding: 0 0 10px;
    }
    #main .section07 .travel__item:nth-child(even) {
        float: right;
    }

    #main .section07 .travel__item .travel__image {
        padding: 0 0 6px;
    }
    #main .section07 .travel__item .travel__image img {
        width: 100%;
    }
    #main .section07 .travel__item .travel__name {
        padding: 0 0 3px;
    }
    #main .section07 .travel__item .travel__name span {
        font-size: 12px;
    }
    #main .section07 .travel__item .travel__desc {
        font-size: 11px;
        line-height: 1.2;
        margin: 0 0 5px;
        height: 78px;
    }
    #main .section07 .travel__item .travel__price {
        padding: 6px 0;
        margin: 0 0 10px;
    }
    #main .section07 .travel__item .travel__price span {
        font-size: 13px;
    }

    #main .section07 .travel__item .travel__link a {
        font-size: 10px;
        padding: 5px 0 4px;
    }
    #main .section07 .travel__item .travel__link a:after {
        right: 10px;
    }
	.add_bn_ts img { width: 94%; margin : 0 3% 5% 3%; text-align:center; }


}