@charset "utf-8";
/* main visual */

.st2-contents-wrapper>div>div {
     padding: 0; 
}
.st2-main-container {
    padding-top: 0;
}
.backpack #mainContents{padding-top:0;}
#mainContents header#mainVisual{height:calc(100vh - 130px); background:url(https://www.knt.co.jp/holiday/images/osa_srilanka_014.jpg) no-repeat center; background-size:cover; position:relative; display:flex; align-items:flex-start; justify-content:center;}
#mainContents header#mainVisual .catch{background:url(https://www.knt.co.jp/holiday/images/osa_srilanka_012.png) no-repeat center; background-size:cover; width:620px; height:300px; text-indent:-9999px; position:relative; top:15px;}
#mainContents header#mainVisual a{display:block; background: url(https://www.knt.co.jp/holiday/images/osa_srilanka_013.png); width:71px; height:61px; text-indent:-9699px; position:absolute; left:50%; bottom:40px; margin:0 0 0 -35px;}

#mainContents section.plan{padding:0; border:none;}
#mainContents section.plan > h3{background-color:rgba(139,63,63,1); padding:25px; text-align:center; color:#fff; font-size:26px;border:1px #8b3f3f solid; border-width:1px 0;}
#mainContents section.plan .spot h4{background:transparent; text-align:center; font-size:26px; width:auto; border:0; margin:0 0 30px; padding:0; position:relative;}
#mainContents section.plan .bgSrilanka .spot h4{color:#000; text-shadow:0 0 8px rgba(0,0,0,.2);}
#mainContents section.plan .spot h5{text-align: center; margin:0 auto 20px auto; font-size:20px; color:#8b3f3f; display:flex; justify-content:center; position:relative;}
#mainContents section.plan .spot h5 span{position:relative; display:block;}
#mainContents section.plan .spot h5 span:before,
#mainContents section.plan .spot h5 span:after{content:''; display:block; width:80px; height:1px; background:#8b3f3f; position:absolute; top:50%;}
#mainContents section.plan .spot h5 span:before{left:-90px;}
#mainContents section.plan .spot h5 span:after{right:-90px;}
#mainContents section.plan .spot p{
/*font-family:"游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif; */
font-size:16px; line-height:1.8; margin-bottom:50px; font-weight:200; text-align:center; letter-spacing:-0.1em;}
.figs{display:flex; justify-content:center; margin:0 -5px;}
.figs figure{margin:0 5px; align-self: center;}
.figs figure img{display:block; margin:0 auto;}

#pageTopBlock{clear:both; height:130px;}
#pageTopBlock:after{content:''; display: block; clear: both;}

.modalBase{background:rgba(0,0,0,.7); position:fixed; left:0; top:0; width:100%; height:100%; z-index:9999;}
.modalImage{position:fixed; left:0; top:0; width:100%; height:100%; z-index:10000; display:flex; align-items:center; justify-content:center;}
.modalImage img{max-width:90%; max-height:90%; width:auto; height:auto; opacity:0; border:4px #fff solid; border-radius:4px; cursor:pointer;}
.modalImage i{display:block; width:46px; height:46px; border:1px #fff solid; border-radius:23px; position:absolute; left:50%; bottom:5vh; margin-left:-23px; cursor:pointer;}
.modalImage i:before,
.modalImage i:after{content:''; display:block; width:36px; height:1px; background:#fff; position:absolute; transform:rotate(45deg); left:50%; top:50%; margin:0 0 0 -18px;}
.modalImage i:after{transform: rotate(-45deg);}


@media only screen and (max-width: 767px){
/* main visual */
/*#mainContents header#mainVisual{height:auto;}*/
#mainContents header#mainVisual .catch{width:90vh; height:0; padding-bottom:46.66%;  background-size:contain;}
#mainContents section.plan > h3{padding:15px; font-size:20px;}
#mainContents section.plan .spot{padding-top:25px;}
#mainContents section.plan .spot h4{font-size:20px;margin:0 0 15px;}
#mainContents section.plan .spot h5{margin:0 auto 15px auto; font-size:18px;}
#mainContents section.plan .spot h5 span:before,
#mainContents section.plan .spot h5 span:after{width:8vw;}
#mainContents section.plan .spot h5 span:before{left:-9vw;}
#mainContents section.plan .spot h5 span:after{right:-9vw;}
#mainContents section.plan .spot p{font-size:15px; margin-bottom:25px;text-align:left;}
.figs{display:block; margin:0;}
.figs figure{margin:0 0 10px;}

#pageTopBlock{display:none;}
}

#mainContents section.plan .spot h3,
#mainContents section.plan .spot h4,
#mainContents section.plan .spot h5,
#mainContents section.plan .spot p,
#mainContents section.plan .spot .figs{position:relative; top:-100px;}
#mainContents section.plan .spot .figs{top:60px;}

#mainContents section.plan .spot h3{transition:all .5s ease-out 0s;}
#mainContents section.plan .spot h4{transition:all .5s ease-out .2s;}
#mainContents section.plan .spot h5{transition:all .5s ease-out .4s;}
#mainContents section.plan .spot p{transition:all .5s ease-out .6s;}
#mainContents section.plan .spot .figs{transition:all .9s ease-out .8s;}

#mainContents section.plan .spot.play h3,
#mainContents section.plan .spot.play h4,
#mainContents section.plan .spot.play h5,
#mainContents section.plan .spot.play p,
#mainContents section.plan .spot.play .figs{opacity:1; top:0;}

#mainVisual a.start{animation-name:hop; animation-duration:1s; animation-timing-function: ease-in-out; animation-iteration-count: infinite;}
@keyframes hop {
    0%{
        bottom:30px;
    }
    50%{
        bottom:50px;
    }
    100%{
        bottom:30px;
    }
}