@charset "utf-8";
/* CSS Document */

#contentbox{
  width:100%;
  background:url("../img/sp_ttl_bg.jpg") no-repeat center top #ecffaf;
  background-size: contain;
  padding-bottom: 10px;
}
#contentbox #kvbox{
  width:100%;
  margin:auto;
  position: relative;
}
#contentbox #kvbox img{
  display: block;
  margin:auto;
  padding:6.0vw 2.0vw;
  width:80%;
}

#contentbox nav{
  width:100%;
  margin:auto;
  background: #8fbc02;
}
#contentbox nav>ul{
  display: flex;
  justify-content: space-between;
}
#contentbox nav>ul li{
  width:50%;
  box-sizing: border-box;
  position: relative;
}
#contentbox nav>ul li:first-child{
  border-right:1px solid #FFF
}

#contentbox nav>ul li:hover{
  background:#a2d011;
  
}
#contentbox nav>ul li a{
  display: block;
  padding:0.5em 1.2em 0.5em 0.3em;
  text-align:center;
  
  font-size:3.3vw;
  font-weight:bold;
  color:#FFF;
}

#contentbox nav>ul li:after{
  font-family: "Font Awesome 5 Free";
  content: '\f107';
  font-weight: 900;
  color:#FFF;
  position: absolute;
  top: 70%;
  right:3%;
  transform: translateY(-50%);
  font-size:120%
}
#contentbox nav>ul li:last-child:after{
  font-family: "Font Awesome 5 Free";
  content: '\f105';
  font-weight: 900;
  color:#FFF;
  position: absolute;
  top: 69%;
  right:3%;
  transform: translateY(-50%);
  font-size:120%
}
#contentbox nav>ul li a .icon {
  display: block;
  width: 25vw;
  background: #f9ff61;
  padding: 2px 4px;
  margin:0 auto 4px;
  text-align: center;
  color: #ff2c62;
  font-size:2.6vw;
  font-weight: bold;
}

section{
  width:94%;
  margin:20px auto;
  padding: 3.6vw;
  background:#FFF;
  box-sizing: border-box;
}
h2.head_ttl{
  font-size:4.5vw;
  font-weight:bold;
  color:#555e7b;
  padding-bottom: 10px;
  border-bottom: 4px double #555e7b;
}
h2.head_ttl small{
  display: block;
  font-size:60%;
  font-weight:normal;
}
h2.head_ttl.double{
  padding-left:14vw;
  min-height:60px;
  position: relative;
  padding-bottom: 0;
}
h2.head_ttl.double:before{
  content: "";
  position: absolute;
  background: url("../img/icon_limite.png") no-repeat;
  background-size: contain;
  width:12vw;
  height:12vh;
  top:0;
  left:0;
}
h2.head_ttl.double>span{
  display: block;
  font-size:80%;  
}
h2.head_ttl.dep{
  font-size:4.5vw;
  padding:1.0vw 0 1.0vw 8.0vw;
  font-weight:bold;
  color:#555e7b;
  border-bottom: 4px double #555e7b;
  background: url("../img/icon_search.png") no-repeat 1% center #FFF;
  background-size:5vw 5vw;
}

.headbox .photo{
  width:100%;
  height:180px;
  position: relative;
  overflow: hidden;
}
.headbox .photo img{
  position: absolute;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
.headbox .info{
}
.headbox .info>p{
  margin: 10px auto;
  line-height: 1.6em
}
.headbox .info>p .onlytxt{
  font-weight:bold;
  color:#ff2c62;
}
.close-info{
  margin: 20px auto;
  border: 1px solid #C00;
  padding: 0.5em;
  color:#C00;
}
.close-info>small{
  font-size:2.8vw;
}


/*** //動画 ***/
.moviebox{
	text-align: center;
	width:98%;
	margin:0 auto 20px;
}
.youtube-movie-content {
	padding-top: 56.25%;
	position: relative;
	width: 100%;
}

.youtube-movie-content iframe {
	width: 100% !important;
	height: 100% !important;
	position: absolute;
	top: 0;
	left: 0;
 }
/*** 動画// ***/

.service{
  margin: 20px auto;
  border:2px solid #fcc5d3;
  padding: 3.6vw;
}
.service>ul{

}
.service>ul li{
  margin-bottom: 10px;
  font-size:3.6vw;
  font-weight:bold;
  color:#ff2c62;
  line-height: 1.2em;
  position: relative
}

.service>ul li small{
  font-size:70%;
  color:#333;
  font-weight: normal
}
.service>ul li:not(:last-child):before{
  content:"";
  display: inline-block;
  background: url("../img/icon_check.png") no-repeat;
  background-size: contain;
  width:18px;
  height:15px;
  margin-right: 5px;
}
.service>ul li:last-child{
  font-size:3.2vw;
  color:#333;
  margin-bottom: 0
}
ul.caution_list li{
  font-size:2.8vw;
}

.access{
  margin: 20px auto;
}
.access .mapbox{
  position: relative;
  width: 100%; 
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
}
.access .mapbox iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; 
  height: 100%;
}
.access .accessinfo{
  margin:20px auto 0;
}
.access .accessinfo>ul{
  margin:20px auto;
}
.access .accessinfo>ul li{
  margin-bottom: 10px;
  font-size: 3.0vw
}
.access .accessinfo>ul li>dl.data dt{
  display: inline-block;
  width:5.5em;
  height:1.4em;
  border-right:2px solid #999999;
  margin-right: 0.8em;
  vertical-align: top;
  font-weight:bold;
}
.access .accessinfo>ul li>dl.data dd{
  display: inline-block;
  width:calc(100% - 8em)
}
.access .accessinfo>ul li:last-child{
  margin-bottom: 0;
  font-size:2.8vw;
}

h3.shuttle_ttl{
  margin:20px auto;
  padding:2.8vw 2.0vw;
  font-size:4.2vw;
  font-weight:bold;
  color:#FFF;
  background: #8fbc02;
  clear: right;
}
h3.shuttle_ttl>span{
  display: none
}

.shuttle_course{
   margin: 20px auto;
}
.shuttle_course .routebox{
  text-align: center;
  margin-bottom: 20px;
  
}
.shuttle_course ul.shuttle_time{
  padding:0 20px;
  box-sizing: border-box;
}
.shuttle_course ul.shuttle_time li{
  border-bottom: 1px solid #999999;
  padding: 5px 0;
  font-size:3.0vw;
}
.shuttle_course ul.shuttle_time li span{
  display: block;
  color:#fe2c62;
  font-weight: bold;
  vertical-align: middle
}
.shuttle_course ul.shuttle_time li:first-child{
  font-size:3.8vw;
  font-weight: bold;
  color:#555e7b;
  line-height: 1.0;
  padding-bottom: 10px;
  padding-left: 0;
  text-indent: 0;
}
.note{
  font-weight: bold;
  color:#fe2c62;
  border-bottom: none!important;
  text-indent: 0!important;
  padding-left: 0!important
}
.note_txt{
  font-weight: bold;
  color:#fe2c62;
  display: inline!important
}

h4.spot_ttl{
  margin: 20px auto;
  padding-bottom: 5px;
  font-size:3.5vw;
  font-weight:bold;
  color:#555e7b;
  border-bottom: 4px double #555e7b;  
}
ul.spotbox{
}
ul.spotbox li{
  margin:20px auto
}

ul.spotbox li>dl dd.spot_img{
  width:100%;
  height:180px;
  position: relative;
  overflow: hidden;
}
ul.spotbox li>dl dd.spot_img img{
  position: absolute;
  width: auto;
  height:auto;
  min-width: 100%;
  min-height: 100%;
  left: 50%;
  top: 35%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);  
}
ul.spotbox li>dl dd.spot_img .copy{
  display: block;
  position: absolute;
  bottom: 0;
  right:0;
  padding:3px;
  color:#FFF;
}
ul.spotbox li>dl dt h5{
  font-size:3.8vw;
  font-weight: bold;
  color:#8fbc02;
  margin: 5px 0;
}
ul.spotbox li>dl dt h5:before{
  content:"";
  display: inline-block;
  background: url("../img/icon_spot.png") no-repeat;
  background-size: contain;
  width:15px;
  height:20px;
  vertical-align: middle;
  margin-right: 5px;
}

.attn_box{
  background: url("../img/attn_bg.png") repeat;
  margin:20px auto 0;
  padding:3.6vw;
}
.attn_box>h4{
  font-size:3.8vw;
  font-weight: bold;
  color:#555e7b;
}
.attn_box ul.attn_list{
  margin:10px auto 20px;
}
.attn_box ul.attn_list li{
 margin-bottom: 5px;
  position: relative;
  padding-left: 1em;
  text-indent: -0.7em;
  font-size:3.2vw
}
.attn_box ul.attn_list li:before{
  content: "●";
  display: inline-block;
  color:#8fbc02;
  margin-right: 5px;
}
.attn_box ul.attn_list li.no_burette:before{
  content: "";
}

/***** ▼バスツアー *****/
p.bus_catch{
  margin: 5px auto;
  background-color: #FCDEDE;
  font-size:3.6vw;
  font-weight:bold;
  color:#FC4946;
  text-align: center;
  line-height: 2.4
}

.coursebox{
  margin: 10px auto;
}
.coursebox h3.course_ttl{
  width:100%;
  margin-bottom: 10px;
  font-size:4.0vw;
  font-weight:bold;
  color:#e5006e;
  position: relative
}
.coursebox h3.course_ttl>span{
  display: block;
  width:64px;
  background-color: #e5006e;
  font-size:3.4vw;
  font-weight:bold;
  color:#FFF;
  text-align: center;
  padding: 0.2em;
  vertical-align: middle;
  margin-right: 0.3em;
}
.coursebox h3.course_ttl>span:last-child{
  background-color: transparent;
  color:#e5006e;
  width:100%;
  font-size:2.8vw;
  font-weight:normal;
  text-align: right;
  margin-right:0;
  padding: 0;
}
.coursebox .course_item{
  margin-bottom: 10px;
}
.coursebox .course_item .course_sch{
  margin: 10px auto;
  padding: 0.3em;
  background-color: #F2FCD3
}
.coursebox .course_item .course_sch>p{
  font-size:3.4vw;
  font-weight:bold;
  color:#8fbc02;
}
.coursebox .course_item .course_sch ul.sch_list>li{
  display: inline-block;
  margin-right: 0.3em;
  font-size:2.8vw;
}
.coursebox .course_item .course_sch ul.sch_list>li:after{
  font-family: "Font Awesome 5 Free";
  content: '\f061';
  font-weight: 900;
  color:#8fbc02;
  margin-left: 0.3em
}
.coursebox .course_item .course_sch ul.sch_list>li:last-child:after{
  content:none;
}
.course_arrange{
  border:3px double #e5006e;
  font-size:3.2vw;
  font-weight:bold;
  color:#e5006e;
  padding: 0.3em;
  text-align: center
}
.course_arrange>small{
  font-size:2.8vw;
  display: block
}
.coursebox .course_ph{
  width: 100%
}
.coursebox .course_ph img{
  max-width: 100%
}
/***** ▲バスツアー *****/


section:last-child{
  background:none;
  padding:0
}
ul.dep_list{
  width:100%;
  margin:10px auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
ul.dep_list li{
  width:24%;
  background:#8fbc02;
  margin-bottom: 10px;
  margin-right:1%;
  border-radius: 10px;
}
ul.dep_list li:nth-child(4n){
  margin-right: 0
}
ul.dep_list li a{
  display: block;
  padding:2.4vw 2.0vw 2.4vw 0.2vw;
  font-size:3.0vw;
  font-weight:bold;
  color:#FFF;
  text-align: center;
  position: relative
}
ul.dep_list li a:after{
  content:"";
  background: url("../img/arrow_side.png") no-repeat;
  background-size: contain;
  width:1.6vw;
  height:2.47vw;
  position: absolute;
  top:36%;
  right:3%;  
}
ul.dep_list li a:hover{
  opacity: 0.7  
}

