@charset "utf-8"; 
@import url('https://fonts.googleapis.com/css?family=Handlee');
/* override */
*{margin:0; padding:0;}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, address, ul, dl, ol, th, strong, em{font-weight:500;}
/*  ================================ inherited from other content  ================================ */
/*.pcnone, #sp_brgnHeader, .linkTable, #sp_brgnFooter{display:none; }*/
.pcnone, #sp_brgnHeader{display:none; }
/* utilityArea
================================ */
#headerUtility{}
#headerUtility > .topicPath{padding:15px 370px 15px 5px !important; }
#headerUtility > .topicPath > ul > li{float:left; }
#headerUtility > .topicPath > ul > li > span{padding:0 5px; }
/*.socialBtn{position:absolute; top:10px; left:50%; width:139px; margin-left:391px;}*/
.socialBtn{position:absolute; top:130px; left:50%; width:139px; margin-left:370px;}
.socialBtn > li{float:left; }
.socialBtn > li + li{margin-left:5px; }
.socialBtn > li > a{display:block; width:31px; height:31px; border-radius:15px; background-image:url(/holiday/contents/include/osa/srilanka/img/com_bt01.png); background-repeat:no-repeat; text-indent:-9999px; outline:none; /* transition */
-webkit-transition:opacity 0.4s ease-out; -moz-transition:opacity 0.4s ease-out; -ms-transition:opacity 0.4s ease-out; transition:opacity 0.4s ease-out; }
.socialBtn > li > a:hover{/*モダンブラウザ用*/
opacity:0.7; /*IE7以下用*/
filter:alpha(opacity=70); /*IE8用*/
-ms-filter:"alpha(opacity=70)"; }
.socialBtn > li.facebook > a{background-position:0 0; }
.socialBtn > li.twitter > a{background-position:-31px 0; }
.socialBtn > li.line > a{background-position:-62px 0; }
.socialBtn > li.googleplus > a{background-position:-93px 0; }

/* pageTop
================================ */
.pageTop{display:none; bottom:20px; position:fixed; right:20px; z-index:1000;}
.pageTop > a{background:url(/holiday/contents/include/osa/srilanka/img/com_ic01.png) no-repeat 0 0; content:""; display:block; height:54px; outline:medium none; text-decoration:none; text-indent:-9999px; width:54px; }


/*  ================================ contents common  ================================ */
.hw{font-family: 'Handlee', cursive;}
.spbr{display:none;}
.fLt{float:left; margin:0 15px 15px 0;}
.fRt{float:right; margin:0 0 15px 15px;}

/* override original properties */
body{height:auto;}
#wrapper980,
#wrapper980 #mainContainer{width:100%; clear:both;}
#headerUtility{width:980px; margin:0 auto; position:relative; }
#mainContents{width:100%; clear:both; padding:0; font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif; font-weight:500; overflow-x: hidden;}
#mainContents *{box-sizing:border-box;}
#mainContents *:after{visibility: visible;} /* oops! */

/* couse > plan */
#mainContents section.plan .spot{clear:both; width:1060px; margin:0 auto; padding:40px 0;}
#mainContents section.plan .spot:after{content:''; display:block; clear:both;}
#mainContents section.plan .spot figure{margin-bottom:15px; position:relative;}
#mainContents section.plan .spot figure img{display:block; width:100%; height:auto;}
#mainContents section.plan .spot figure figcaption{background:rgba(0,0,0,.5); padding:5px; color:#fff; font-size:12px; text-align:right; position:absolute; left:0; bottom:0; width:100%; line-height:1;}

/* plan each layout types */

/* background color and overwrap */
/*#mainContents section.plan .bg:nth-child(1){z-index:100;}
#mainContents section.plan .bg:nth-child(2){z-index:90;}
#mainContents section.plan .bg:nth-child(3){z-index:80;}
#mainContents section.plan .bg:nth-child(4){z-index:70;}
#mainContents section.plan .bg:nth-child(5){z-index:60;}
#mainContents section.plan .bg:nth-child(6){z-index:50;}
#mainContents section.plan .bg:nth-child(7){z-index:40;}
#mainContents section.plan .bg:nth-child(8){z-index:30;}
#mainContents section.plan .bg:nth-child(9){z-index:20;}*/
#mainContents section.plan .bg{width:100%; position:relative; }
#mainContents section.plan .bg:after{content:''; display:block; width:0; height:0; border-style:solid; border-width:30px 30px 0 30px; border-color:#000 transparent transparent transparent; position:absolute; left:50%; bottom:-25px; margin-left:-30px; z-index: 49;}
/* blue (sky) */
#mainContents section.plan .bg.bgB{background-color:#D0E5FC;}
#mainContents section.plan .bg.bgB:after{border-color:#D0E5FC transparent transparent transparent;}
/* white */
#mainContents section.plan .bg.bgW{background-color:#fff;}
#mainContents section.plan .bg.bgW:after{border-color:#fff transparent transparent transparent;}
/* yellow (beige) */
#mainContents section.plan .bg.bgY{background-color:#FDF0D6;}
#mainContents section.plan .bg.bgY:after{border-color:#FDF0D6 transparent transparent transparent;}
/* aqua (light blue) */
#mainContents section.plan .bg.bgA{background-color:#BDD0E4;}
#mainContents section.plan .bg.bgA:after{border-color:#BDD0E4 transparent transparent transparent;}
/* green (light green) */
#mainContents section.plan .bg.bgG{background-color:#D7E4B4;}
#mainContents section.plan .bg.bgG:after{border-color:#D7E4B4 transparent transparent transparent;}
/* hawaii */ 
#mainContents section.plan .bg.bgSrilanka{background:linear-gradient(to bottom, rgba(239,212,129,1) 0%,/*rgba(141,219,243,0) 54%,*/rgba(250,238,222,0) 100%),#faeede;}
#mainContents section.plan .bg.bgSrilanka:after{border-color:#faeede transparent transparent transparent;}



#mainContents section.plan .bg:last-child:after{display:none;}

/* non-article contents */
aside{clear:both;}
/* contact button */
div.contact{clear:both; margin:60px auto; width:1060px;}
div.contact a{text-decoration:none; display:block; padding:0 80px; font-size:21px; font-weight:bold; text-align:center; color:#fff; background:#E41C24; transition:all .3s ease; text-shadow:0 0 5px rgba(0,0,0,0.3); height:70px; border-radius:35px; line-height:70px; position:relative;}
div.contact a:before{background:rgba(255,255,255,.4); width:80px; height:70px; position:absolute; right:0; top:0; border-radius:0 35px 35px 0; content:''; display:block;}
div.contact a:after{width:20px; height:20px; border-top:3px solid #fff; border-right:3px solid #fff; -webkit-transform:rotate(45deg); transform:rotate(45deg); position:absolute; right:40px; top:50%; margin-top:-11px; content:''; display: block;}

div.contact a:hover{color:#E41C24; background:#E78F90; text-decoration:none;}
div.contact a:hover:before{background:#E41C24;}

#mainContents .contact.fixed{position:fixed; left:0; bottom:0; width:100%; margin:30px 0 0; padding:12px 0; background:rgba(0,0,0,.5); z-index:1000;}
#mainContents .contact.fixed a{max-width:1024px; margin:0 auto;}

/* contact2 */
div.contact2{clear:both; margin:60px auto; width:1060px;}
div.contact2 a{border:1px solid #999;text-decoration:none; display:block; padding:0 80px; font-size:20px; text-align:center; color:#000; background:#fff; transition:all .3s ease; height:70px; border-radius:35px; line-height:70px; position:relative;}

div.contact2 a:hover{color:#2b5ebe; background:#dbf9f9; text-decoration:none;}


/* related links */
.relatedLinks{background:#E5ECD0; padding:40px 0;}
.relatedLinks h1{text-align: center; font-size:20px; font-weight:bold; margin-bottom:40px;}
.relatedLinks .links{clear:both; width:1060px; margin:0 auto;}
.relatedLinks .links:after{content:''; display:block; clear:both;}
.relatedLinks .links .item{width:330px; float:left;  margin:0 35px 30px 0; position:relative; background:#fff;}
.relatedLinks .links .item:nth-child(3n){margin-right:0;}
.relatedLinks .links .item:nth-child(3n+1){clear: both;}
.relatedLinks .links .item img{width:100%; height:auto; display:block; margin-bottom:10px;}
.relatedLinks .links .item h2{text-align:center; font-size:16px; font-weight:bold; margin-bottom:10px; padding:0 10px;}
.relatedLinks .links .item p{font-size:14px; line-height:1.5; padding:0 10px 15px;}
.relatedLinks .links .item a{color:#000;}














@media only screen and (max-width: 767px){
	#header, #tourNav, #nwf_color, #footer, #topicPath,#headerUtility {display: none;}
	.pcnone{display: block;}
	.logo{background-color:#0B499D; width:100%; padding:4.9375% 4.71875%; box-sizing: border-box;}
	.socialBtn{position:inherit; width:auto; margin-top:20px; margin-bottom:10px; text-align:center; left:auto; margin-left:0;}
	.socialBtn > li {display:inline-block; float:none; width:56px; margin-right:7px;}
	.socialBtn > li > a {display:block; width:56px; height:56px; padding:0; background-position:50% 50% !important; -webkit-border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px; border-radius:4px; text-indent:-9999px;}
	.socialBtn > li.facebook > a{background-image:url(/holiday/contents/include/osa/srilanka/img/com_ic05.png); background-size:12px 30px; background-color:#304d93;}
	.socialBtn > li.twitter > a{background-image: url(/holiday/contents/include/osa/srilanka/img/com_ic06.png); background-size:35px 26px; background-color:#00aded;}
	.socialBtn > li.line > a{background-image: url(/holiday/contents/include/osa/srilanka/img/com_ic07.png); background-size: 35px 35px; background-color:#39ce39;}
	.socialBtn > li.googleplus > a{background-image: url(/holiday/contents/include/osa/srilanka/img/com_ic08.png); background-size:41px 26px; background-color:#e13c2d;}
	.socialBtn > li > a > span {display: block;}
	#spFooter{width:100%; padding:10px 0; font-size:100% !important; text-align:center;}
	#spFooter ul{margin:0 auto; width:intrinsic; margin-bottom:5px; list-style:none; display:inline-block;}
	#spFooter ul li{float:left; font-size:8px; text-align:center;}
	#spFooter ul li:first-child{border-left:none;}
	#spFooter p{font-size:8px; text-align: center;}
	.pageTop{bottom:10px; right:10px;}
	.pageTop > a {background-size:35px 35px; width:35px; height:35px;}
	
	#mainContents{padding:0;}
	.spbr{display:inline;}

	/* main visual */
	#mainContents header#mainVisual{background-size:40px; background-position:center 110px;}
	#mainContents header#mainVisual .image{height:240px;}
	#mainContents header#mainVisual .image .inner{width:100%; height:240px;}
	#mainContents header#mainVisual .image div.inner{width:100%; height:240px;}
	#mainContents header#mainVisual .image h1{}
	#mainContents header#mainVisual .image p{}
	#mainContents header#mainVisual img{width:100%; height:auto;}
	#mainContents header#mainVisual .lead{width:auto; padding:20px 15px;}
	#mainContents header#mainVisual .lead p{font-size:4vw;}
	#mainContents header#mainVisual .dateSpan{width:50px; height:50px; background-size:cover;}
	/* tour header */
	#mainContents .tourHeader{}
	#mainContents .tourHeader dl.period{padding:10px;}
	#mainContents .tourHeader dl.period:before{width:20px; height:20px; bottom:-10px; margin-left:-8px;}
	#mainContents .tourHeader dl.period dt,
	#mainContents .tourHeader dl.period dd{font-size:4vw;}
	#mainContents .tourHeader .inner{width:auto; padding:20px 5px;}
	#mainContents .tourHeader h1{font-size:5vw; margin-bottom:20px;}
	#mainContents .tourHeader h1:before,
	#mainContents .tourHeader h1:after{width:4vw; top:-2px;}
	#mainContents .tourHeader .contentList{margin-bottom:25px;}
	#mainContents .tourHeader .contentList li{font-size:4vw; padding:6px 5px 4px; margin:0 8px;}
	#mainContents .tourHeader .contentList li:before{width:12px; height:12px; background-size:12px;}
	#mainContents .tourHeader .contentList li:after{width:12px; height:12px; right:-16px; top:50%; margin-top:-6px; background-size:12px;}
	#mainContents .tourHeader h2{margin-bottom:10px;}
	#mainContents .tourHeader h2 b{font-size:5vw;}  
	#mainContents .tourHeader .pointList{width:auto; margin:0 10px;}
	#mainContents .tourHeader .pointList li{font-size:3.5vw; padding:8px 10px 8px 16vw;}
	#mainContents .tourHeader .pointList li small{font-size:3vw;}
	#mainContents .tourHeader .pointList li i{left:10px; margin-top:-10px; font-size:3.5vw;}
	#mainContents .tourHeader .pointList li i b{font-size:5vw;}
	#mainContents .tourHeader .pointList li span:before{display:none;}

	/* course */
	#mainContents .modelCourse > header{width:auto; padding:65px 15px 20px;}
	#mainContents .modelCourse > header:before{width:67px; height:74px; left:15px; top:-15px; background-size:cover;}
	#mainContents .modelCourse > header h1{font-size:5vw; padding:0 5px;}
	#mainContents .modelCourse > header h1:before{height:2.5vw; bottom:-1vw;}
	#mainContents .modelCourse > header p{margin-top:30px; font-size:3.5vw;}

	/* course > plan */
	#mainContents section.plan{padding:30px 0 0; border-bottom:1px #ccc dotted;}
	#mainContents section.plan:after{display:none;}
	#mainContents section.plan p{font-size:4vw;}
	#mainContents section.plan > header{width:auto; margin:0 auto 30px; padding:0 15px;}
	#mainContents section.plan > header h1{width:60px; height:60px; border-radius:30px; line-height:60px; display:block; margin:0 auto 20px; float:none;}
	#mainContents section.plan > header h1 i{font-size:40px;}
	#mainContents section.plan > header h1 + p{padding:0; margin-bottom:20px; min-height:0;}
	#mainContents section.plan > header h2{font-size:4.5vw; margin-bottom:10px; padding-bottom:5px;}
	#mainContents section.plan > header ol.courseOutline li{width:auto; float:none; margin:0 0 30px 0; clear: both; font-size:3.5vw;}
	#mainContents section.plan > header ol.courseOutline li:before{width:0; height:0; border-style:solid; border-width: 15px 15px 0 15px; border-color: #f3585f transparent transparent transparent; position:absolute; right:auto; top:auto; left:50%; bottom:-20px; margin-left:-15px; content:''; display:block;}
	#mainContents section.plan > header ol.courseOutline li:last-child:before{display:none;}
	#mainContents section.plan > header ol.courseOutline li:after{content:''; display:block; clear:both; width:auto; height:0; visibility:hidden; position: static; border: 0 none;}
	#mainContents section.plan > header ol.courseOutline li img{float:left; margin-right:10px; width:25%; height:auto;}
	#mainContents section.plan .gmap,
	#mainContents section.facilHeader .gmap{clear:both; margin:0;}
	#mainContents section.plan .gmap figcaption,
	#mainContents section.facilHeader .gmap figcaption{padding:10px;}
	#mainContents section.plan .gmap figcaption h2,
	#mainContents section.facilHeader .gmap figcaption h2{font-size:5vw;}
	#mainContents section.plan .gmap figcaption .toggle div,
	#mainContents section.facilHeader .gmap figcaption .toggle div{font-size:3vw; padding:12px; width:40vw;}
	#mainContents section.plan .bg{margin:0; width:100%;}
	#mainContents section.plan .spot{width:auto; padding:40px 15px 20px;}
	#mainContents section.plan .spot h2{font-size:4.5vw; margin-bottom:20px;}
	#mainContents section.plan .spot h3{padding:8px 8px 8px 50px; height:auto; margin-bottom:15px; width:100%; min-height:0;}
	#mainContents section.plan .spot h3 i{width:34px; height:34px; border-radius:17px; line-height:34px; font-size:24px; position:absolute; left:10px; top:50%; margin-top:-17px; float:none;}
	#mainContents section.plan .spot h3 small{font-size:3.5vw;}
	#mainContents section.plan .spot h3 span{font-size:4.5vw;}
	#mainContents section.plan .spot h4{font-size:4vw;}
	#mainContents section.plan .spot .colMain{width:auto; float:none; clear: both; margin-bottom:20px;}
	#mainContents section.plan .spot .colSub{width:auto; float:none; clear: both; margin-bottom:20px;}
	#mainContents section.plan .spot figure{margin-bottom:10px;}
	#mainContents section.plan .spot figure figcaption{font-size:3vw;}
	#mainContents section.plan .spot .horizontalFigure figure{width:100%; float:none;}
	#mainContents section.plan .spot .horizontalFigure .text{width:100%; float:none; padding-left:0;}
	#mainContents section.plan .spot .figDuo figure{width:calc(50% - 5px);}
	#mainContents section.plan .spot dl.facilDesc dt{font-size:3.5vw;}
	#mainContents section.plan .spot dl.facilDesc dd{font-size:3vw;}
	
	.eventDivider{width:auto; font-size:18px; padding:40px 15px;}
	
	/* plan each layout types */
	/* A */
	#mainContents section.plan .spot.typeA .colMain{float:none;}
	#mainContents section.plan .spot.typeA .colSub{float:none;}
	#mainContents section.plan .spot.typeA .colSub h3{float:none; text-align:left;}
	#mainContents section.plan .spot.typeA .colSub h3 i{float:none; margin:-17px 0 0 0;}
	/* B */
	#mainContents section.plan .spot.typeB{}
	#mainContents section.plan .spot.typeB .colMain{float:none;}
	#mainContents section.plan .spot.typeB .colSub{float:none;}
	#mainContents section.plan .spot.typeB .colSub h3{float:none; text-align:left; padding-right:10px;}
	#mainContents section.plan .spot.typeB .colSub h3 i{float:none; margin:-17px 0 0 0;}
	/* C */
	#mainContents section.plan .spot.typeC{}
	#mainContents section.plan .spot.typeC .colParent header.col{width:auto; margin:0 0 20px 0;}
	#mainContents section.plan .spot.typeC .colParent div.col{width:calc(50% - 5px); margin:0 0 20px 0;}
	#mainContents section.plan .spot.typeC .colParent div.col:nth-of-type(3n+1){clear:none;}
	#mainContents section.plan .spot.typeC .colParent div.col:nth-of-type(2n){float:right;}
	#mainContents section.plan .spot.typeC .colParent div.col:nth-of-type(2n+1){clear:both;}
	#mainContents section.plan .spot.typeC .col h3{float:none; text-align:left; padding-right:10px;}
	#mainContents section.plan .spot.typeC .col h3 i{float:none; margin:-17px 0 0 0;}
	/* D */
	#mainContents section.plan .spot.typeD{}
	#mainContents section.plan .spot.typeD .colMain{float:none;}
	#mainContents section.plan .spot.typeD .colSub{float:none;}
	#mainContents section.plan .spot.typeD .colMain h3{float:none; padding-right:10px;}
	#mainContents section.plan .spot.typeD .colMain h3 i{float:none; margin:-17px 0 0 0;}
	/* E */
	#mainContents section.plan .spot.typeE{}
	#mainContents section.plan .spot.typeE .colMain{float:none;}
	#mainContents section.plan .spot.typeE .colSub{float:none;}
	#mainContents section.plan .spot.typeE .colSub h3{float:none; text-align:left; padding-right:10px;}
	#mainContents section.plan .spot.typeE .colSub h3 i{float:none; margin:-17px 0 0 0;}
	/* F */
	#mainContents section.plan .spot.typeF{}
	#mainContents section.plan .spot.typeF .colParent .col{width:calc(50% - 5px); margin:0 0 20px 0;}
	#mainContents section.plan .spot.typeF .colParent .col:nth-of-type(3n+1){clear:none;}
	#mainContents section.plan .spot.typeF .colParent .col:nth-of-type(2n){float:right;}
	#mainContents section.plan .spot.typeF .colParent .col:nth-of-type(2n+1){clear:both;}
	#mainContents section.plan .spot.typeF .col h3{float:none; text-align:left; padding-right:10px;}
	#mainContents section.plan .spot.typeF .col h3 i{float:none; margin:-17px 0 0 0;}
	/* G */
	#mainContents section.plan .spot.typeG{}
	#mainContents section.plan .spot.typeG .facility{clear:both; margin-bottom:20px;}
	#mainContents section.plan .spot.typeG .facility figure{float:none; width:auto; margin-bottom:10px;}
	#mainContents section.plan .spot.typeG .facility dl{float:none; width:auto; margin-bottom:20px;}


/* non-article contents */
	aside{clear:both;}
	/* author or editor information */
	.author{width:auto; margin:20px auto; padding:0 15px 20px; min-height:80px;text-align:left;}
	.author figure{width:80px; height:80px; left:auto; top:auto; position:relative; float:left; margin:0 15px 15px 0;}
	.author h1{font-size:4vw;}
	.author h2{font-size:3.5vw;}
	.author p{font-size:3.5vw; clear:both;}
	/* contact button */
	div.contact{margin:0 15px 40px; width:auto;}
	div.contact a{padding:0 30px 0 10px; font-size:3.4vw; height:40px; border-radius:20px; line-height:40px;}
	div.contact a:before{width:30px; height:40px; border-radius:0 20px 20px 0;}
	div.contact a:after{width:10px; height:10px; border-top:2px solid #fff; border-right:2px solid #fff; right:13px; margin-top:-7px;}
	#mainContents div.contact.fixed{padding:8px 1%;}
	#mainContents div.contact.fixed a{max-width:none; margin:0 auto;}


	/* contact2 */
	div.contact2{margin:0 15px 40px; width:auto;}
	div.contact2 a{color:#2b5ebe; background:#dbf9f9;padding:5px 10px 0 10px; font-size:3vw; height:40px; border-radius:20px; line-height:15px;}



	/* related links */
	.relatedLinks{padding:20px 15px;}
	.relatedLinks h1{font-size:5vw; margin-bottom:20px; text-align:left;}
		.relatedLinks .links{clear:both; width:auto;}
	.relatedLinks .links .item{width:calc(50% - 5px); margin:0 0 20px 0;}
	.relatedLinks .links .item:nth-last-of-type(2n){float:right;}
	.relatedLinks .links .item h2{font-size:4vw; margin-bottom:5px;}
	.relatedLinks .links .item p{font-size:3.5vw;}
	/* animation settings */
	#mainContents section.plan .spot.typeA .colSub h3{left:100vw;}
	#mainContents section.plan .spot.typeB .colSub h3{right:100vw;}
	#mainContents section.plan .spot.typeC .col h3{right:100vw;}
	

}



/*ホリデイhf.css、common_text.css対策*/
/*PCのみまたは SP共通*/
body {width:100%;}
#hd {margin: 2px auto 0;}
ol,ul {list-style-type: none;}
body.specialContents{text-align:left;}
.item a:link{text-decoration:none;}

#footer {
    width: 1060px;
    margin: auto;
    text-align: center;
}


/*提携PCのCSS対応*/

#wrapper{width:100%!important;}
#wrapper table{width:980px;margin:auto;}
#header {line-height:0.9!important;}


/* SPのみ*/
@media only screen and (max-width: 767px){
#hd {display:none;}

#wrapper {
position: inherit;
width: 100% !important;
}
#wrapper > div > table {
display: none;
}
#wrapper .selectDeparture {
position: inherit;
}
}