@charset 'UTF-8';
@import url("//fonts.googleapis.com/css?family=M+PLUS+1p");
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/*mov-topimg
---------------------------------------------------------------------------*/
.mov-topimg {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 500px;
  overflow:hidden;
  margin-top:50px;
}

@media screen and (max-width: 1580px) {
.mov-topimg {
  max-height: 750px
}
}

@media screen and (max-width: 810px) {
.mov-topimg {
  max-height: 450px;
  min-height: initial;
}
}

@media screen and (max-width: 670px) {
.mov-topimg {
  max-height: 400px;
}
}

.mov-topimg .block {
  padding:0;
  width:100%;
  height: 100%;
  position: relative;
}

.mov-topimg img {
  width:100%;
  height:auto;
}

#vdo {
  width: 100%;
  height: auto;
  margin:auto;
}

@media screen and (max-width: 1400px) {
#vdo {
  width: 120%;
  margin:0 0 0 -10%;
}
}

@media screen and (max-width: 810px) {
#vdo {
  width: 130%;
  margin:0 0 0 -15%;
}
}

@media screen and (max-width: 670px) {
#vdo {
  width: 140%;
  margin:0 0 0 -20%;
}
}

@media screen and (max-width: 670px) {
#vdo {
  width: 180%;
  margin:0 0 0 -40%;
}
}

#top_row {
  width: 100%;
  height:100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(0, 0, 0, 0.01);
  background-image: url(../images/raster.png);
  box-sizing: border-box;
  padding:30px;
}

#top_row h2{
  font-size: 40px;
  line-height: 50px;
  color: #FFF;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight:600;
  margin-bottom: 15px;
  letter-spacing:0.02em;
}
@media screen and (max-width: 810px) {
#top_row h2{
  font-size: 30px;
  line-height:1.6;
}
}

@media screen and (max-width: 568px) {
#top_row h2{
  font-size: 1.5em;
}
}

#top_row .top_title {
  font-size: 18px;
  color: #FFF;
  font-weight: 500;
  margin-bottom: 50px;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  letter-spacing:0.1em;
}

@media screen and (max-width: 810px) {
#top_row .top_title {
	margin-bottom: 25px;
}
}

#top_row .catch {
  font-size: 16px;
  line-height: 1.8;
  color: #FFF;
  font-weight: 400;
  margin-bottom: 15px;
}

@media screen and (max-width: 810px) {
#top_row .catch {
  width:90%;
  margin:0 5% 5px;
  text-align: left;
  font-size: 14px;
}
}

@media screen and (max-width: 568px) {
#top_row .catch {
  margin:35px 5% 35px;
}
}

.scroll {
 font-family: Alata,sans-serif;
 font-size:0.9em;
 letter-spacing:.05em;
 text-transform: uppercase;
}

.scroll a {
  padding-top: 55px;
  color:#FFF;
}

.scroll a {
  position: absolute;
  bottom: 5%;
  left: 50%;
  margin-left: -27px;
  z-index: 2;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  text-decoration: none;
}

@media only screen and  (max-width:810px) {
.scroll a {
  display:none;
}
}

.scroll a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 30px;
  height: 50px;
  margin-left: -15px;
  border: 2px solid #FFF;
  border-radius: 50px;
  box-sizing: border-box;
}

.scroll a span::before {
  position: absolute;
  top: 10px;
  left: 50%;
  content: '';
  width: 6px;
  height: 6px;
  margin-left: -3px;
  background-color: #FFF;
  border-radius: 100%;
  -webkit-animation: sdb 2s infinite;
  animation: sdb 2s infinite;
  box-sizing: border-box;
}


@-webkit-keyframes sdb {
  0% {
    -webkit-transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* top_info
================================================== */
#top_info  {
  position: relative;
  text-align: center;
  z-index: 2;
  width:100%;
}

#top_info .top_logo {
  width:100%;
}

#top_info .top_logo img{
  width:100%;
  height:auto;
}

.scrl{
  width: 83px;
  height:61px;
  position: absolute;
  bottom:10%;
  left:50%;
  margin-left:-41px;
  display:block;
  -moz-animation: animationTest 2s ease-in-out 7s infinite normal;
  -webkit-animation: animationTest 2s ease-in-out 7s infinite normal;-
  -ms-animation: animationTest 2s ease-in-out 7s infinite normal; 
}

@media only screen and  (max-width: 810px) {
.scrl{
  display:none;
}
}

.scrl img{
  width: 83px;
  	height:61px;
}

@-moz-keyframes animationTest {
        50%{ transform:scale(1.1); } 
    }

@-webkit-keyframes animationTest {
        50%{ transform:scale(1.1); }
    }

@-ms-keyframes animationTest {
        50%{ transform:scale(1.1); }
    } 

/* wave
================================================== */
.wave {
  background-image: url(../images/top/wave.png);
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background-repeat: repeat-x;
  background-size: 1920px 30px;
  position: absolute;
  z-index: 1;
  -webkit-animation: waveAnime 5s linear infinite;
  animation: waveAnime 5s linear infinite;
}

@-webkit-keyframes waveAnime {
0% {background-position: 0px 50%;}
100% {background-position: 1920px 50%;}
}

@keyframes waveAnime { 
0% {background-position: 0px 50%;}
100% {background-position: 1920px 50%;}
}

@media screen and (max-width: 568px) {
.wave {
  height: 10px;
  background-size: 640px 10px;
}

@-webkit-keyframes waveAnime {
0% {background-position: 0 0}
100% {background-position: 640px 50%;}
}

@keyframes waveAnime { 
0% {background-position: 0px 50%;}
100% {background-position: 640px 50%;}
}
}

/* wave2
================================================== */
.wave2 {
  background-image: url(../images/top/wave2.png);
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background-repeat: repeat-x;
  background-size: 1920px 30px;
  position: absolute;
  z-index: 2;
  -webkit-animation: waveAnime2 3s linear infinite;
  animation: waveAnime2 3s linear infinite;
}

@-webkit-keyframes waveAnime2 {
0% {background-position: 0px 50%;}
100% {background-position: 1920px 50%;}
}

@keyframes waveAnime2 { 
0% {background-position: 0px 50%;}
100% {background-position: 1920px 50%;}
}

@media screen and (max-width: 568px) {
.wave2 {
  height: 10px;
  background-size: 640px 10px;
}

@-webkit-keyframes waveAnime2 {
0% {background-position: 0 0;}
100% {background-position: 640px 50%;}
}

@keyframes waveAnime2 { 
0% {background-position: 0px 50%;}
100% {background-position: 640px 50%;}
}
}

/* wave3
================================================== */
.wave3 {
  background-image: url(../images/top/wave3.png);
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background-repeat: repeat-x;
  background-size: 1920px 30px;
  position: absolute;
  z-index: 2;
  -webkit-animation: waveAnime3 2.5s linear infinite;
  animation: waveAnime3 2.5s linear infinite;
}

@-webkit-keyframes waveAnime3 {
0% {background-position: 0px 50%;}
100% {background-position: 1920px 50%;}
}

@keyframes waveAnime3 { 
0% {background-position: 0px 50%;}
100% {background-position: 1920px 50%;}
}

@media screen and (max-width: 568px) {
.wave3 {
  height: 10px;
  background-size: 640px 10px;
}

@-webkit-keyframes waveAnime3 {
0% {background-position: 0 0;}
100% {background-position: 640px 50%;}
}

@keyframes waveAnime3 { 
0% {background-position: 0px 50%;}
100% {background-position: 640px 50%;}
}
}

/* site_info
--------------------------------------------------*/
.site_info{
  width:100%;
  box-sizing: border-box;
  padding:3% 0;
  position:relative;
  background:#FFF;
}

@media screen and (max-width: 810px) {
.site_info{
  padding:3% 2% 5%;
}
}

@media screen and (max-width: 568px) {
.site_info{
  padding:5% 2% 2%;
}
}

.site_info .rakuen{
  position: absolute;
  left:10%;
  top:-100px;
  width:40%;
  max-width:500px;
  z-index:5;
}

@media screen and (max-width: 810px) {
.site_info .rakuen{
  top:-70px;
  width:50%;
}
}

@media screen and (max-width: 568px) {
.site_info .rakuen{
  top:-50px;
  width:55%;
  left:1%;
}
}

.site_info .irast{
  position: absolute;
  right:10%;
  top:-5%;
  width:18%;
  max-width:200px;
}

@media screen and (max-width: 810px) {
.site_info .irast{
  right:0%;
}
}

@media screen and (max-width: 568px) {
.site_info .irast{
  width:25%;
  right:0%;
  top:15%;
}
}

.site_info .rakuen img,.site_info .irast img{
  width:100%;
  height:auto;
}

.site_info h3{
  text-align: center;
  font-size:2.2em;
  margin-bottom:2%;
  font-size:2.2em;
  font-family: 'M PLUS 1p', sans-serif;
  font-weight:500;
  color:#000;
}

@media screen and (max-width: 810px) {
.site_info h3{
  font-size:1.8em;
}
}

@media screen and (max-width: 568px) {
.site_info h3{
  font-size:1.5em;
  margin-top:2%;
}
}

.sin-tit {
  margin:3% auto;
  text-align: center;
}

@media screen and (max-width: 568px) {
.sin-tit {
  margin-bottom:2%;
}
}

.sin-tit img {
  display: inline-block;
  vertical-align: middle;
  margin-left:5px;
  margin-right:5px;
  width:120px;
  height:auto;
}

.sin-tit p{
  font-size:2em;
  font-family: 'M PLUS 1p', sans-serif;
  font-weight:500;
  margin-bottom:5%;
  color:#000;
  vertical-align: middle;
}

@media screen and (max-width: 810px) {
.sin-tit p{
 font-size:1.8em;
}
}

@media screen and (max-width: 568px) {
.sin-tit img {
  margin:5px;
  width:90px;
}

.sin-tit p{
 font-size:1.6em;
 font-weight:500;
}
}

.site_info .catch span{color:#FF993E;}

.site_info .catch{
 font-size:1.3em;
 line-height:2;
 font-family: 'Noto Sans Japanese', sans-serif;
 font-weight: 400;
 text-align: center;
}

@media screen and (max-width: 568px) {
.site_info .catch{
 font-size:1em;
 line-height:1.8;
 text-align: left;
}
}

.menu_btn {
  width:100%;
  max-width:1200px;
  margin:1% auto 2%;
}

@media only screen and  (max-width: 1280px) {
.menu_btn {
  width:96%;
  margin:1% 2% 2%;
}
}

@media only screen and  (max-width: 568px) {
.menu_btn {
  width:94%;
  margin:1% 3% 5%;
}
}

.menu_btn ul {
  width:100%;
  box-sizing:border-box;
  display:table;
  border-collapse: separate;
  border-spacing: 10px 0;
}

.menu_btn ul li {
  display:table-cell;
  width:25%;
  text-align:center;
  transition: all .3s;
  vertical-align:middle;
  position: relative;
  line-height:1.4;
}

@media only screen and  (max-width: 810px) {
.menu_btn ul {
  width:100%;
  display:block;
  border-spacing: 0;
}

.menu_btn ul li {
  display:inline-block;
  vertical-align: top;
  width:48%;
  margin:1%;
}
}

@media only screen and  (max-width: 568px) {
.menu_btn ul li {
  display:block;
  width:100%;
  box-sizing:border-box;
  margin:3% 0;
}
}

.menu_btn ul li a {
  width:100%;
  display:block;
  color:#FFF;
  -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;
  padding:35px 0;
  box-sizing:border-box;
  text-decoration: none;
}

@media screen and (max-width: 568px) {
.menu_btn ul li a {
  padding:20px 0;
}
}

.menu_btn a:hover {
  -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;
  color:#fff;
  text-decoration: none;
}

.menu_btn ul li a.gr {
  background: #6FC191;
}

.menu_btn a.gr:hover {
  background: #6AB78A;
}

.menu_btn ul li a.sky {
  background: #74CEE4;
}

.menu_btn a.sky:hover {
  background: #67C5DC;
}

.menu_btn ul li a.sky2 {
  background: #F37F53;
}

.menu_btn a.sky2:hover {
  background: #EB7B50;
}

.menu_btn ul li a.yel {
  background: #EDBF47;
}

.menu_btn a.yel:hover {
  background: #E0B84E;
}

.menu_btn li p {
  font-size:1.1em;
  font-weight:500;
  font-family: 'Noto Sans Japanese', sans-serif;
  margin-top:2px;
  position: relative;
}

.menu_btn li img {
  height:90%;
  width:auto;
  margin:0;
  position: absolute;
  top: 5%;
  left: 0;
}

/* sunset_info
--------------------------------------------------*/
.sunset_info{
  width:100%;
  box-sizing: border-box;
  padding:0 0 3%;
  position:relative;
  background:#FFEBE4;
}

@media screen and (max-width: 810px) {
.sunset_info{
  padding:0 0 5%;
}
}

.sunset-topimg {
  position: relative;
  width: 100%;
  height: 65vh;
  min-height: 500px;
  overflow:hidden;
  z-index:1;
}

@media screen and (max-width: 810px) {
.sunset-topimg {
  margin:-10px 0 3%;
  height: auto;
}
}

@media screen and (max-width: 568px) {
.sunset-topimg {
  min-height: 350px;
  max-height: 430px;
  margin:-15px 0 3%;
}
}

#bgs_sunset{
  background-image: url("../images/bg-sunset.jpg");
  background-position: bottom center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
}

.sunset_info .yuhi{
 position: absolute;
 left:0;
 top:-60px;
 width:380px;
 z-index:2;
}

@media screen and (max-width: 810px) {
.sunset_info .yuhi{
  width:300px;
  top:-60px;
}
}

@media screen and (max-width: 568px) {
.sunset_info .yuhi{
  width:200px;
  top:-50px;
}
}

.sunset_info .yuhi img{
  width:100%;
  height:auto;
}

.sunset_info .cont{
  width:100%;
  box-sizing: border-box;
  padding:5% 2% 2%;
}

.sunset_info h3{
  width:100%;
  margin: 0 auto 3%;
  box-sizing: border-box;
  padding:0 2%;
  font-size:2.2em;
  font-family: 'M PLUS 1p', sans-serif;
  font-weight:500;
  text-align: center;
  color:#F37F53;
  line-height:1;
}

@media screen and (max-width: 810px) {
.sunset_info h3{
  font-size:1.8em;
  line-height:1.4;
}
}

@media screen and (max-width: 568px) {
.sunset_info h3{
  font-size:1.35em;
  margin: 0 auto 4%;
}
}

.sunset_tx{
 text-align: center;
 margin: 0 auto 5%;
 font-size:1.1em;
 line-height:2;
 font-family: 'Noto Sans Japanese', sans-serif;
 font-weight: 400;
}

@media screen and (max-width: 568px) {
.sunset_tx{
 font-size:0.95em;
 line-height:1.8;
 margin: 2% 3% 1%;
 text-align:left;
}
}

.yuhi_list{
  width:50%;
  margin:0;
  display:inline-block;
  vertical-align: middle;
}

@media screen and (max-width: 810px) {
.yuhi_list{
	margin:2% 0%;
}
}

@media screen and (max-width: 568px) {
.yuhi_list{
  width:100%;
  margin:1% 0;
  display:block;
}
}

.yuhi_list li{
  width:100%;
  box-sizing: border-box;
  position: relative;
  display:inline-block;
  vertical-align: top;
  padding:3% 0 ;
}

@media screen and (max-width: 568px) {
.yuhi_list li{
  width:100%;
  padding:2% 2% 3%;
}
}

.yuhi_list li img.img-circle{border-radius:50%}

.yuhi_list li img.img-circle.cir-img {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  border: 5px solid #F0C2B0;
  transition: all 1s;
}

@media screen and (max-width: 568px) {
.yuhi_list li img.img-circle.cir-img {
  border: 3px solid #F0C2B0;
  width: 90%;
  margin:0 5%;
}
}

.yuhi_list li .yuhi_pht:hover>img.img-circle.cir-img{
  border: 5px solid #F9A383;
}

@media screen and (max-width: 568px) {
.yuhi_list li .yuhi_pht:hover>img.img-circle.cir-img{
  border: 3px solid #F9A3833;
}
}

.yuhi_list .yuhi_pht{
  background: transparent;
  border: 0;
}

.yuhi_list .yuhi_pht{
  width:50%;
  display:inline-block;
  vertical-align: middle;
}

@media screen and (max-width: 810px) {
.yuhi_list .yuhi_pht{
  width:94%;
  margin:0 3%;
}
}

@media screen and (max-width: 568px) {
.yuhi_list .yuhi_pht{
  width:90%;
  margin:0 5% 5%;
}
}

.yuhi_list .yuhi_syousai{
  width:50%;
  padding: 0% 1% 0 5%;
  box-sizing: border-box;
  display:inline-block;
  vertical-align: middle;
}

@media screen and (max-width: 810px) {
.yuhi_list .yuhi_syousai{
  width:100%;
  padding: 2% 4%;
}
}

@media screen and (max-width: 568px) {
.yuhi_list .yuhi_syousai{
  width:100%;
  display:block;
  padding: 0% 3%;
}
}

.yuhi_syousai .yuhi_name{
 color:#F37F53;
 font-family: 'M PLUS 1p', sans-serif;
 font-weight:500;
 line-height:1.6;
 margin-top:5px;
 font-size:1.5em;
}

@media screen and (max-width: 810px) {
.yuhi_syousai .yuhi_name{
  font-size:1.3em;
  text-align:center;
  line-height:1.4;
}
}

.yuhi_syousai .yuhi_txt{
  color:#000;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 400;
  line-height:1.6;
  margin-top:5px;
}

@media screen and (max-width: 568px) {
.yuhi_syousai .yuhi_txt{
  font-size:0.95em;
}
}

.sunset-map{
  width:50%;
  margin:0;
  display:inline-block;
  vertical-align: middle;
  float:right;
  text-align: right;
  position:relative;
}

@media screen and (max-width: 568px) {
.sunset-map{
  width:90%;
  display:block;
  margin:3% auto;
}
}

.sunset-map img{
  width:100%;
  max-width:466px;
  margin:0 auto;
  height:auto;
}

.sunset-map .text-map{
  position: absolute;
  left:15%;
  top:0;
  z-index:1;
}

@media screen and (max-width: 568px) {
.sunset-map .text-map{
  position: absolute;
  left:0%;
}
}

.sunset-map .text-map p{
  text-align: left;
  display:inline-block;
  padding:5px 10px;
  background:#F37F53;
  font-family: 'M PLUS 1p', sans-serif;
  font-weight:500;
  color:#FFF;
  -webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;
  position: relative;
}

.sunset-map .text-map p::after {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  content: ' ';
  border: 10px solid transparent;
  border-top-color: #F37F53;
}

/* .hour-box
-------------------------------------------------- */
.hour-box{
  padding:2.5% 0;
  width:100%;
  background	:#FBDA94;
  position:relative;
}

@media screen and (max-width: 1280px) {
.hour-box{
 padding:3% 2%;
 box-sizing:border-box;
}
}

@media screen and (max-width: 810px) {
.hour-box{
 padding:5% 2%;
}
}

.hour-box .hour{
 position: absolute;
 right:0;
 top:-90px;
 width:240px;
}

@media screen and (max-width: 810px) {
.hour-box .hour{
  width:180px;
  top:-60px;
}
}

@media screen and (max-width: 568px) {
.hour-box .hour{
  width:150px;
}
}

.hour-box .hour img{
  width:100%;
  height:auto;
}

.hour-box h3{
  width:100%;
  margin: 0 auto 4%;
  box-sizing: border-box;
  padding:0 2%;
  font-size:2.2em;
  font-family: 'M PLUS 1p', sans-serif;
  font-weight:500;
  text-align: center;
  color:#B3942A;
  line-height:1;
}

@media screen and (max-width: 810px) {
.hour-box h3{
  font-size:1.8em;
  line-height:1.4;
}
}

@media screen and (max-width: 568px) {
.hour-box h3{
  font-size:1.35em;
  margin: 0 auto 4%;
}
}

.hour_ph{
  width:45%;
  display:inline-block;
  vertical-align: middle;
}

@media screen and (max-width: 810px) {
.hour_ph{
  width:40%;
  margin:3% 0 ;
}
}

@media screen and (max-width: 568px) {
.hour_ph{
  width:98%;
  padding: 0;
  margin:2% auto;
}
}

.hour_ph img{
  width:100%;
  height:auto;
  -moz-box-shadow: 0 0 5px #cccccc;
  -webkit-box-shadow: 0 0 5px #cccccc;
  box-shadow: 0 0 5px #cccccc;
  border: solid #FFF 5px;
  transform: rotate( 0deg );
  box-sizing: border-box;
  background:#FFF;
  padding:3px;
}

.hour_syousai{
  width:55%;
  padding: 1% 5% 0 0;
  box-sizing: border-box;
  display:inline-block;
  vertical-align: middle;
}

@media screen and (max-width: 810px) {
.hour_syousai{
  width:100%;
  padding: 1% 3%;
}
}

.hour_syousai p{
  color:#000;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 400;
  line-height:1.6;
  margin:7px 0;
  font-size:1em;
}

@media screen and (max-width: 568px) {
.hour_syousai p{
  font-size:0.95em;
}
}

.time-sun{
  margin:3% 5px;
}

.time-sun p{
 text-align: left;
 display:inline-block;
 padding:5px 10px;
 background:#F37F53;
 font-family: 'M PLUS 1p', sans-serif;
 font-weight:500;
 color:#FFF;
 -webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;
 position: relative;
}

.time-sun p::after {
 position: absolute;
 top: 100%;
 left: 50%;
 margin-left: -5px;
 content: ' ';
 border: 10px solid transparent;
 border-top-color: #F37F53;
}

.hour-box table{
  width : 100%;
  margin : 0 0 5%;
  background: #FFF;
  box-sizing: border-box;
  line-height:1.6;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 400;
}

@media screen and (max-width: 568px) {
.hour-box table{
  font-size:13px;
}
}

.hour-box td{
  padding : 10px 1% 10px;
  box-sizing: border-box;
  width:80%
  color : #000000;
  border-bottom : solid 1px #FBDA94;
  border-left : solid 1px #FBDA94;
  text-align : center;
  font-size:1.2em;
  color: #F37F53;
}

.hour-box th{
  color : #000;
  border-right : solid 1px #FBDA94;
  text-align : center;
  font-weight:normal;
  padding : 10px 5px 10px;
  background : #D3A920;
  box-sizing: border-box;
  color:#FFF;
}

@media only screen and (max-width: 568px)  {
.hour-box td{
  padding : 10px 5px 6px;
}

.hour-box th{
  padding : 10px 5px 6px;
}
}

.hour-box td p{
  margin:5px 0;
}

/* .watch-box
-------------------------------------------------- */
.watch-box{
  padding:0 0 3%;
  width:100%;
  background	:#E6FAF1;
  position:relative;
}

@media screen and (max-width: 810px) {
.watch-box{
 padding:0;
}
}

.hijya-topimg {
  position: relative;
  width: 100%;
  height: 65vh;
  min-height: 500px;
  overflow:hidden;
  z-index:1;
}

@media screen and (max-width: 810px) {
.hijya-topimg {
  margin:-10px 0 3%;
  height: auto;
}
}

@media screen and (max-width: 568px) {
.hijyat-topimg {
  height: 250px;
  min-height: 250px;
  margin:0 0 3%;
}
}

#bgs_hijya{
  background-image: url("../images/bg_mk.jpg");
  background-position: bottom center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
}


.watch-box .hijya{
 position: absolute;
 left:0;
 top:-50px;
 width:350px;
 z-index:2;
}

@media screen and (max-width: 810px) {
.watch-box .hijya{
  width:260px;
  top:-60px;
}
}

@media screen and (max-width: 568px) {
.watch-box .hijya{
  width:200px;
  top:-50px;
}
}

.watch-box .hijya img{
  width:100%;
  height:auto;
}

.watch-box .cont{
  width:100%;
  box-sizing: border-box;
  padding:5% 0 0;
}

.watch-box h3{
  width:100%;
  margin: 0 auto 3%;
  box-sizing: border-box;
  padding:0 2%;
  font-size:2.2em;
  font-family: 'M PLUS 1p', sans-serif;
  font-weight:500;
  text-align: center;
  color:#37B380;
  line-height:1;
}

@media screen and (max-width: 810px) {
.watch-box h3{
  font-size:1.8em;
  line-height:1.4;
}
}

@media screen and (max-width: 568px) {
.watch-box h3{
  font-size:1.35em;
  margin: 0 auto 4%;
}
}

.watch_tx{
 text-align: center;
 margin: 0 auto 1%;
 font-size:1.1em;
 line-height:2;
 font-family: 'Noto Sans Japanese', sans-serif;
 font-weight: 400;
}

@media screen and (max-width: 568px) {
.watch_tx{
 font-size:0.95em;
 line-height:1.8;
 margin: 2% 3% 1%;
 text-align:left;
}
}

.watch-box ul{
  text-align: center;
  width:100%;
  box-sizing: border-box;
  padding:3% 0 0;
}

@media only screen and  (max-width: 568px) {
.watch-box ul{
  padding:4% 0 2%;
}
}

.watch-box li{
  display:inline-block;
  width:24%;
  vertical-align: top;
  box-sizing: border-box;
  padding:10px 15px 5px;
}

@media only screen and  (max-width: 810px) {
.watch-box li{
  padding:10px 5%;
  width:49%;
}
}

@media only screen and  (max-width: 568px) {
.watch-box li{
  padding:5px;
}
}

.watch-box li .thumbnail {
  background: transparent;
  border: 0;
}

.kod_syousai{
  width:100%;
  padding: 5px;
  box-sizing: border-box;
}

@media screen and (max-width: 568px) {
.kod_syousai{
  padding: 5px 0;
}
}

.kod_syousai .kod_name{
  color:#37B380;
  font-family: 'M PLUS 1p', sans-serif;
  font-weight:500;
  font-size:1.4em;
  line-height:1.6;
  margin-top:10px;
  text-align: center;
  letter-spacing:0em;
}

@media screen and (max-width: 568px) {
.kod_syousai .kod_name{
  margin-top:5px;
  line-height:1.5;
  font-size:1.1em;
}
}

.kod_syousai .kod_tx{
  color:#000;
  font-size:14px;
  line-height:1.6;
  text-align: left;
  margin-top:7px;
}

@media screen and (max-width: 568px) {
.kod_syousai .kod_tx{
  font-size:13px;
  margin-top:7px;
}
}

.watch-box li img.img-circle{border-radius:50%}

.watch-box li img.img-circle.cir-img {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  border: 5px solid #BEE9D7;
  transition: all 1s;
  margin:0 auto;
}

@media screen and (max-width: 568px) {
.watch-box li img.img-circle.cir-img {
  border: 3px solid #BEE9D7;
  width: 100%;
  margin:0 0;
}
}

.watch-box li .thumbnail:hover>img.img-circle.cir-img{
  border: 5px solid #56CA9A;
}

@media screen and (max-width: 568px) {
.watch-box li .thumbnail:hover>img.img-circle.cir-img{
  border: 3px solid #56CA9A;
}
}

/* .rec-box
-------------------------------------------------- */
.rec-box{
  padding:0 0 3%;
  width:100%;
  float:left;
  background:#E8F7FA;
  position:relative;
}


.kayak-topimg {
  position: relative;
  width: 100%;
  height: 65vh;
  min-height: 500px;
  overflow:hidden;
  z-index:1;
}

@media screen and (max-width: 810px) {
.kayak-topimg {
  margin:-10px 0 3%;
  height: auto;
}
}

@media screen and (max-width: 568px) {
.kayakt-topimg {
  height: 45vh;
  min-height: 250px;
  max-height: 300px;
  margin:0 0 3%;
}
}

#bgs_kayak{
  background-image: url("../images/bg_kayak.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
}


.rec-box .rec{
 position: absolute;
 right:0;
 top:-70px;
 width:260px;
 z-index:2;
}

@media screen and (max-width: 810px) {
.rec-box .rec{
  width:180px;
  top:-60px;
}
}

@media screen and (max-width: 568px) {
.rec-box .rec{
  width:150px;
}
}

.rec-box .rec img{
  width:100%;
  height:auto;
}

.rec-box .cont{
  width:100%;
  box-sizing: border-box;
  padding:5% 0 2%;
}


@media screen and (max-width: 810px) {
.rec-box .cont{
  width:100%;
  box-sizing: border-box;
  padding:5% 2%;
}
}

.rec-box h3{
  width:100%;
  margin: 0 auto 3%;
  box-sizing: border-box;
  padding:0 2%;
  font-size:2.2em;
  font-family: 'M PLUS 1p', sans-serif;
  font-weight:500;
  text-align: center;
  color:#10ADC8;
  line-height:1;
}

@media screen and (max-width: 810px) {
.rec-box h3{
  font-size:1.8em;
  line-height:1.4;
}
}

@media screen and (max-width: 568px) {
.rec-box h3{
  font-size:1.35em;
  margin: 0 auto 4%;
}
}

.osusume{
  width:100%;
  padding:4% 0 5%;
}

.os-poi{
  margin:0 0 5%;
}

.os-poi p{
  text-align: left;
  display:inline-block;
  padding:5px 10px;
  background:#50C2D6;
  font-family: 'M PLUS 1p', sans-serif;
  font-weight:500;
  color:#FFF;
  -webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;
  position: relative;
}

.os-poi p::after {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  content: ' ';
  border: 10px solid transparent;
  border-top-color: #50C2D6;
}

.hijyam_ph{
  width:55%;
  display:inline-block;
  vertical-align: middle;
}

@media screen and (max-width: 810px) {
.hijyam_ph{
  width:40%;
  margin:3% 0 ;
}
}

@media screen and (max-width: 568px) {
.hijyam_ph{
  width:100%;
  padding: 0;
  margin:0 auto 5%;
}
}

.hijyam_ph img{
  width:100%;
  height:auto;
  -moz-box-shadow: 0 0 5px #cccccc;
  -webkit-box-shadow: 0 0 5px #cccccc;
  box-shadow: 0 0 5px #cccccc;
  border: solid #FFF 5px;
  transform: rotate( 0deg );
  box-sizing: border-box;
  background:#FFF;
  padding:3px;
}

@media screen and (max-width: 568px) {
.hijyam_ph img{
  padding:2px;
}
}

.hijyam_ph2{
  width:55%;
  display:inline-block;
  vertical-align: middle;
}

@media screen and (max-width: 810px) {
.hijyam_ph2{
  width:40%;
  margin:3% 0 ;
}
}

@media screen and (max-width: 568px) {
.hijyam_ph2{
  display:none;
}
}

.hijyam_ph2 img{
  width:100%;
  height:auto;
  -moz-box-shadow: 0 0 5px #cccccc;
  -webkit-box-shadow: 0 0 5px #cccccc;
  box-shadow: 0 0 5px #cccccc;
  border: solid #FFF 5px;
  transform: rotate( 0deg );
  box-sizing: border-box;
  background:#FFF;
  padding:3px;
}

.hijyam_ph-sp{
  display:none;
}

@media screen and (max-width: 568px) {
.hijyam_ph-sp{
  width:100%;
  display:block;
  padding: 0;
  margin:0 auto 5%;
}
}

.hijyam_ph-sp img{
  width:100%;
  height:auto;
  -moz-box-shadow: 0 0 5px #cccccc;
  -webkit-box-shadow: 0 0 5px #cccccc;
  box-shadow: 0 0 5px #cccccc;
  border: solid #FFF 5px;
  transform: rotate( 0deg );
  box-sizing: border-box;
  background:#FFF;
  padding:3px;
}

@media screen and (max-width: 568px) {
.hijyam_ph-sp img{
  padding:2px;
}
}

.hijyam_syousai{
  width:45%;
  box-sizing: border-box;
  display:inline-block;
  vertical-align: middle;
}

@media screen and (max-width: 568px) {
.hijyam_syousai{
  width:100%;
  display:block;
}
}

.osusume .flr{
  float:right;
}

.osusume .pl5{
  padding: 0 5% 0 0;
}

.osusume .pr5{
  padding: 0 0 0 5%;
}

@media screen and (max-width: 568px) {
.osusume .pl5{
  padding: 0 2%;
}

.osusume .pr5{
  padding: 0 2%;
}
}

.hijm-ttl{
  margin: 0 auto 3%;
  box-sizing: border-box;
  font-size:1.6em;
  font-family: 'M PLUS 1p', sans-serif;
  font-weight:500;
  text-align: left;
  color:#FF4385;
  line-height:1.4;
}

@media screen and (max-width: 810px) {
.hijm-ttl{
  line-height:1.4;
}
}

@media screen and (max-width: 568px) {
.hijm-ttl{
  font-size:1.4em;
  margin: 0 auto;
  text-align: center
}
}

.hijyam_syousai .hijm-tx{
  color:#000;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 400;
  line-height:1.8;
  padding:2% 0;
  font-size:1.05em;
}

@media screen and (max-width: 568px) {
.hijyam_syousai .hijm-tx{
  font-size:0.95em;
}
}

.hijyam_syousai .hijm-tx span {
  background: linear-gradient(transparent 70%, #FDFF43 70%);
  padding-right:2px;
  padding-left:2px;
}

.rec-box h4{
  width:100%;
  margin: 3% auto;
  font-size:1.6em;
  padding:10px 0;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight:600;
  background:#50C2D6;
  color:#FFF;
  line-height:1.4;
  text-align: center;
  -webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;
}

@media screen and (max-width: 810px) {
.rec-box h4{
  font-size:1.2em;
  margin: 4% auto 2%;
  width:98%;
}
}

@media screen and (max-width: 568px) {
.rec-box h4{
  font-size:1.15em;
  margin: 0 auto 2%;
}
}

.rec_tx{
 text-align: center;
 margin: 0 auto 2%;
 font-size:1.1em;
 line-height:2;
 font-family: 'Noto Sans Japanese', sans-serif;
 font-weight: 400;
}

@media screen and (max-width: 810px) {
.rec_tx{
  font-size:1em;
  line-height:1.8;
  margin: 0 2% 2%;
}
}

@media screen and (max-width: 568px) {
.rec_tx{
  font-size:0.95em;
  text-align: left;
  margin: 1% 3% 2%;
  line-height:1.6;
}
}

.kayak_menu{
  padding: 0 0 20px;
  width:30.333%;
  margin: 2% 1.5%;
  box-sizing: border-box;
  display:inline-block;
  vertical-align: top;
  position: relative;
  -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;
  overflow:hidden;
  -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.22);
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.22);
  background:#FFF;
}

@media screen and (max-width: 810px) {
.kayak_menu{
  width:48%;
  margin: 1% 1%;
}
}

@media screen and (max-width: 568px) {
.kayak_menu{
  width:96%;
  margin: 2%;
}
}

.kayak_menu img{
  width:100%;
  height:auto;
  margin-bottom:10px;
}

.menu_tx{
  padding:5px 20px 0;
}

@media screen and (max-width: 810px) {
.menu_tx{
  padding:0 15px 0;
}
}

.menu_tx .plus {color:#FFF;font-size:10px;-webkit-border-radius: 50%;-moz-border-radius: 50%;padding: 1px 4px 2px 4px;margin:0 5px;background:#FF6FBA;line-height:1;vertical-align:middle;}
.menu_tx .smenu {color:#2690C2;font-weight:500;}
.menu_tx .smenu2 {color:#F37F53;font-weight:500;}

.menu_tx .menu_tl {
  font-size:1.2em;
  line-height:1.6;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight:500;
  color:#FF6FBA;
  text-align: center;
}

@media screen and (max-width: 1280px) {
.menu_tx .menu_tl {
  font-size:1.2em;
}
}

@media screen and (max-width: 680px) {
.menu_tx .menu_tl {
  font-size:1em;
}
}

@media screen and (max-width: 568px) {
.menu_tx .menu_tl {
	font-size:1.35em;
	font-weight:600;
}
}

.menu_tx .menu_text {
  font-size:14px;
}

.menu_tx .menu_san{
  text-align: center;
  display:block;
  width:100%;
  padding:7px 0 7px;
  border:1px solid #40AC7F;
  font-size:0.9em;
  line-height:1;
  color:#40AC7F;
  position: relative;
  margin:10px auto;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight:500;
}

.tour_btn{
  font-size:13px;
  letter-spacing	: 0.05em;
  color:#FFF;
  margin-top:10px;
  text-align: center;	
}

.tour_btn a{display:inline-block;color:#FFF;text-decoration:none;background-color:#50C2D6;padding:5px 10px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.tour_btn a:hover{color:#FFF;text-decoration:none;background-color:#10ADC8;}

.overimg:hover img {
  filter:alpha (opacity=70);
  -moz-opacity:0.80;
  opacity:0.80;
}

.cat_bg{width:100%;margin:2% auto 0;padding:0;}

.cat_bg a,
.cat_bg a:link,
.cat_bg a:visited,
.cat_bg a:hover,
.cat_bg a:active {
 -webkit-transition:0.2s ease-in-out;
 -moz-transition:0.2s ease-in-out;
 -ms-transition:0.2s ease-in-out;
 -o-transition:0.2s ease-in-out;
 transition:0.2s ease-in-out;
}

#kayak-main{
 width:100%;
 margin:0 auto 3%;
 padding:0;
 max-width:1580px;
  text-align:center;
 display:block;
 clear:both;
 position:relative;
}

@media only screen and  (max-width: 810px) {
#kayak-main{
 padding:2% 0;
}
}

@media only screen and  (max-width: 568px) {
#kayak-main{
 padding:2% 0 0;
}
}

#masonry {width:auto;margin:0 auto;}

#masonry .gallery{
 position: absolute;
 left:50%;
 top:50%;
 width:340px;
 margin-left:-170px;
 margin-top:-65px;
 z-index:5;
}

#masonry .gallery img{
  width:100%;
  height:auto;
}

@media screen and (max-width: 810px) {
#masonry .gallery{
 width:240px;
 margin-left:-120px;
 margin-top:-51px;
}
}

@media screen and (max-width: 568px) {
#masonry .gallery{
 width:180px;
 margin-left:-90px;
 margin-top:-38px;
}
}

.grid{
overflow:hidden;
padding:0;
margin:0;
float:left;
position:relative;
}

.col2 { width: 360px;height:240px; }
.col22 { width: 360px;height:480px; }
.col4 { width: 360px;height:240px; }
.col42 { width: 720px;height:480px; }

@media only screen and  (max-width: 810px) {
.col2 { width: 180px;height:120px; }
.col22 { width: 180px;height:240px; }
.col4 { width: 360px;height:240px; }
}

.grid img {
  width: 100%;
  height:auto
  margin:0;
}

/* Effect 01 */
#msover figure {
  position: relative;
  overflow: hidden;
}
#msover figcaption {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 0;
}
#msover figure:hover figcaption {opacity: 1;}

.transform01 {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.transform02 {
  -webkit-transform: rotate(15deg) scale(1.4);
  transform: rotate(15deg) scale(1.4);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
figure:hover .transform01 {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
figure:hover .transform02 {
  -webkit-transform: rotate(0) scale(1);
  transform: rotate(0) scale(1);
}
figure p {
  color: #fff;
  text-align: center;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 400;
  margin-top:-5px;
  top:50%;
  width:100%;
  position: absolute;
}

.video_box {
  height: 100%;
  position: relative;
  width: 100%;
  margin: 0 auto;
  background:#000;
  overflow: hidden;
}

#bg_video {
    background:#000;
}

#video {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%
  height: auto;
  display:block;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin:auto
}