@charset "utf-8";

/*PCSP共通設定*/
h2 {
    text-align: center;
    font-weight: bold;
    margin: 0 auto 10px;
    color: #32374B;
    border-bottom: solid 1px #32374B;
  }

p{
	line-height: 1.5;
}


#onsen .icon_l,#other .icon_l{background-image: url(../images/ic_saga.svg);}		
#gourmet .icon_l,#scene .icon_l,#classic .icon_l{background-image: url(../images/ic_nagasaki.svg);}	
#other .icon_r,#onsen .icon_r,#classic .icon_r{background-image: url(../images/ic_kagoshima.svg);}	
#scene .icon_r,#gourmet .icon_r{background-image: url(../images/ic_kumamoto.svg);}		
.icon_r,.icon_l{ background-repeat: no-repeat;}


.slick-next {
    background: url(../images/im_arrow_left.png) no-repeat!important;
    top: 50%!important;
    width: 30px;
    height: 30px;
	filter: drop-shadow(0 0px 4px rgba(0, 0, 0, .5));
  }
	
.slick-prev {
    background: url(../images/im_arrow_right.png) no-repeat!important;
    top: 50%!important;
    width: 30px;
    height: 30px;
    filter: drop-shadow(0 0px 4px rgba(0, 0, 0, .5));
  }

.slick-dots li button:before {
    font-size: 40px;
	line-height: 10px;
  }	
.slick-dots {
    bottom: 0px;
	text-align: right;
	}
	
.slick-dots li.slick-active button:before,.slick-dots li button:before {
    color: #FFEEE7;
    filter: drop-shadow(0 0px 4px rgba(0, 0, 0, .5));
  }

.slick-dotted.slick-slider{
    margin-bottom: 15px;
  }

 .scene_pbox {
    background-color: #FFE4D7;
    margin: 0 auto;
    text-align: center;
    padding: 15px;
  }

  .scene_ptitle {
    text-align: left;
    color: #E65A46;
    font-weight: bold;
  }

.scene_ptxt {
    text-align: left; 
    font-size: 16px;
    color: black;
    margin-top: 5px;
  }

.scene_pbtn {
    background: #E65A46;
    cursor: pointer;
    margin-top: 7px;
    padding: 5px 50px;	
    position: relative;	
  }
.scene_pbtn:hover{
    opacity:0.8;
    transition: 0.2s ease-in-out;
  }	
.scene_pbtn a{
    color: #fff;
	font-size: 18px;
	font-weight: bold;
    margin: 0 auto;
	display: block;
  }
	
.scene_pbtn :after,.hatulink_btn :after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #FFF;
    border-right: 3px solid #FFF;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
  }

.ac_pbtn {
    background: #E31E23;
    cursor: pointer;
    margin-top: 10px;
    padding: 5px 0 4px;
    position: relative;
    text-align: center;
  }
.ac_pbtn:hover{
    opacity:0.8;
    transition: 0.2s ease-in-out;
  }	
.ac_pbtn a{
    color: #fff;
	font-size: 19px;
	font-weight: bold;
    margin: 0 auto;
    display: block;
  }
	
.ac_pbtn :after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #FFF;
    border-right: 3px solid #FFF;
    transform: rotate(135deg) translateY(-50%);
    position: absolute;
    top: 40%;
    right: 20px;
    border-radius: 1px;
  }

.web_btn:hover .web_btn_a{
    opacity: 0.8;
  }
.scene_pbtn:hover .scene_pbtn_a{
    opacity: 0.8;
  }
.ac_pbtn:hover .ac_pbtn_a{
    opacity: 0.8;
  }

.hatulink_btn:hover .hatulink_btn_a{
    opacity: 0.8;
  }

.hatulink_btn {
    background: #E31E23;
    cursor: pointer;
    margin-top: 15px;
    padding: 10px 50px;
    position: relative;
	text-align: center;
  }
.hatulink_btn:hover{
    opacity:0.8;
    transition: 0.2s ease-in-out;
  }	
.hatulink_btn a{
    color: #fff;
	font-size: 20px;
	font-weight: bold;
    margin: 0 auto;
	display: block;
  }
/*ハウステンボス用右下クレジット*/
.credit{
	text-align: right;
	font-size: 0.85rem;
    padding: 0 0 5px 0;	
}
#classic .boxleft .slick-dotted.slick-slider {
    margin-bottom: 5px;
}



/*759px以下*/
@media screen and (max-width: 759.9px) {
#wrapper {line-height: 1.4;}
.spnone{display:none;}

section:nth-of-type(1){
    background-color:#FFEEE7;
    padding: 10px 0;
  }

section:nth-of-type(2){
    background-color: #E41E23;
    padding: 20px 0;
  }
section:nth-of-type(3){
	background-color:#FFEEE7;
	padding:50px 25px ;
  }
	
section:nth-of-type(4){
	background-color:#FFF;
	padding:70px 0 ;
  }	

section:nth-of-type(5){
    background-color: #FFEEE7;
    padding: 30px 20px;
    margin: auto;
  }	
	
#dirPathBlock,
#anchorLinkBlock {
	font-size: 10px;
	margin: 1% 1% 0 1%;
  }
#dirPathBlock p,
#anchorLinkBlock a{font-size: 12px;}
h1 {
	font-size: 12px;
	margin: 0 1%;
  }
	
.spbg_imgcover{
  width: 100%;
  height: auto;
  object-fit: cover;
  }
	
.titlearea img {
    vertical-align: top;
  }

.nav_box {
    margin: 15px auto 30px;
  }	
.nav_boxsp {
    margin: 2% 3% 3%;
    display: flex;
  }
  .nav_boxsp a {
    flex: 1;
    background-color: #E41E23;
    color: #FFF;
    font-size: 0.9rem;
    font-weight: bold;
    align-items: center;
    text-align: center;
    text-decoration: none;
    padding: 4% 1%;
    margin-right: 3%;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);  
  }

  .nav_boxsp a:last-child {
    margin-right: 0;
  }

  .nav_boxsp a:hover {
	opacity: 1;  
    color:#FFF;	  
    background-color: #373C50;
    transition: 0.2s ease-in-out;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }	

h2 {
    font-size: 2rem;
    width: 94%;
    padding: 1.5rem 0 0;
    letter-spacing: 0;
    margin: 0 auto 2rem;
  }

div#onsen,div#gourmet,div#scene,div#other,div#classic {
    margin: 0 auto 75px;
  }

	
.slider.boxleft,.slider.boxright{
    width: 93%;
    margin: 0 auto;
  }
.boxleft h3{
    font-size: 1.7rem;
    color: #E65A46;
    font-weight: bold;
    margin: 0 auto 2px;
  }
	
.boxright h3{
	  font-size: 1.7rem;
	  color: #508CC8;
	  font-weight: bold;
	  margin: 0 auto 0.5rem;
  }
.contents_p{
    font-size: 1rem;
	text-align: left;
	margin: 0 auto 20px;
  }	

.slick-slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
	
.line {
    margin: 3rem auto;
    width: 100%;
  }
	
	
.contents_box .boxleft,.contents_box .boxright {
    position: relative;
  }	
	
.icon_l,.icon_r{
    position: absolute;
    z-index: 2;
     width: 100px;
    height: 100px;
    transform: translate(-12%, -18%);
    -webkit-transform: translate(-12%, -18%);
    -ms-transform: translate(-12%, -18%);
  }


.scene_ptitle {
    font-size: 1.1rem;
  }

.scene_ptxt {
    font-size: 0.9rem;
  }
.scene_pbox {
    margin: 0 auto 1.5rem;
  }
	


	
h4 {
    text-align: center;
    font-weight: bold;
    color: #FFF;
    font-size: 2rem;
    margin: 0.5rem;
}
	
.webtitle img {
    width: 10%;
    margin-bottom: 0.25rem;
}
.webtxt {
    font-size: 1.3rem;
    letter-spacing: 0px;
    padding: 0 5% 3%;
    text-align: center;
    color: #FFF;
    font-weight: bold;
}
	
.webtitle{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }

	
.web_link{
    align-items: center;
    text-align: center;		
  }
	

	
/* comming soon */	
.web_btn_cmsoon	{
    background: #8C2D37!important;
	color: #C4959B;
    display: block !important;
	}

	
.web_btn {
    padding: 1rem;
    margin: 0 5% 5%;
    box-sizing: border-box;
    background: #32374B;
    position: relative;
	font-size: 20px;
	font-weight: bold;
	line-height: 1;
    height: 4em;
    display: flex;
    align-items: center;
}
.web_btn:hover {
    opacity:1;
	color:  #C4959B7;
    background: #8C2D37;
    transition: 0.2s ease-in-out;		
  }
.web_btn a {
	font-size: 20px;
	font-weight: bold;
    color: #FFF;
    margin: 0 auto;
    display: block;
  }

.web_btn :after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #FFF;
    border-right: 3px solid #FFF;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
  }

.tooltip{
    width: 300px;
    height: 33px;
    position: absolute;
    z-index: 2;
	top:96%;
	left:50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}	


	
#opapp div{
	margin: 0 auto;
    border: 1px solid #E31E23;
    padding:15px;
	}	
#opapp strong {
	font-size: 1.1rem;
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
	color: #E31E23;
	}
	
#opapp p {
	margin-bottom: 5px;
	font-size: 16px;}
#opapp span {color:#E31E23;}	
	
	
div#tripabox {
    margin: 30px auto;
    width: 90%;
}
	
div#tripabox div {
    border-bottom: 1px dashed #32374B;
    padding-bottom: 25px;
    margin: 0 auto 25px;
  }
div#tripabox div:last-child{border-bottom: none;}

div#tripabox a,div#tripabox a:link{color: #E41E23;}
div#tripabox a:hover{color: #8B2B37;}
	
#tripauncer div dl {
    overflow: hidden;
    display: block;
  }
	
#tripauncer div dl dt {
    font-size: 1.2rem;
    margin: 5px 0;	
    font-weight: bold;
  }
#tripauncer div dl dd {
    font-size: 0.9rem;
  }
	
div#tripabox img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }	
	
#section.bnrwrap{
    margin: 0 auto;
    width: 90%;
	padding-bottom: 20px;
	
}

ul#bannerBox {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
	
ul#bannerBox li{
    width: calc(100% / 2 - 15px);
	    padding-bottom: 10px;
}

#bannerBox img {
    width: 100%;
    height: auto;
}	

/*アコーディオン*/	
.ac_imgbox img {
    width: 100%;
    object-fit: cover;
  }	
	
.title_pt{
    font-size: 1.2rem;
    border: 1px solid #E65A46;
    color: #E65A46;
    display: inline-block;
    padding: 4px 10px 1px;
    margin: 5px auto;
    font-weight: bold;
  }
  .main_title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #E65A46;
    margin: 5px auto; 
  }
	
.accordion_c {
    display: block;
    background-color: #FFE3D6;
    padding: 1px 20px;
    height: auto;
    margin-bottom: 20px;
}

  .ac_container {
    background-color: #FFE3D6;
    margin: auto;
    padding: 20px 20px 1px;
}
	
  .acsub_title {
    font-size: 1rem;
    font-weight: bold;
    color: #E65A46;
    margin: 0 auto 5px;
  }		
.acttle{
    display: inline-block;
    font-size: 1.1rem;
    font-weight: bold;
    padding: 2px 20px 1px;
    margin: 5px 0;
    text-align: center;
    border-radius: 5px;
    background: #E65A46;
    color: #FFF;
}

div.bnr {
    width: 100%;
    margin: -80px auto 50px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}
div.bnr img {
    width: 100%;
}
}	
	
/*760px以上*/
@media screen and (min-width: 760px) {
/* CSS */
section:nth-of-type(1){
	background-color:#FFEEE7;
	padding: 20px 0 100px;
  }

section:nth-of-type(2){
    background-color: #E41E23;
    height: 270px;
    padding: 20px 0 0;
  }
section:nth-of-type(3){
	background-color:#FFEEE7;
	padding:50px 0 ;
  }
	
section:nth-of-type(4){
	background-color:#FFF;
	padding:70px 0 ;
  }

section:nth-of-type(5){
    background-color: #FFEEE7;
	padding:50px 0 ;
  }	
	
	
#wrapper {line-height: 1.231;}
#dirPathBlock,
h1,
.iframe_end-content_gadget,
#anchorLinkBlock{
	width: 100%;
	max-width:950px;
	min-width:760px;
	margin: auto;
  }
	
.pcnone{display:none;}
	
/*panlist&back*/
#dirPathBlock,
#anchorLinkBlock {
	width: 100%;
	margin: 0 auto;
	display: block;
	font-size: 12px;
  }
#dirPathBlock p,
#anchorLinkBlock a{font-size: 12px;}
h1 {
	font-size: 14px;
    width: auto;
    max-width: 950px;
    margin: 0 auto 5px;
  }
h2{
    font-size: 35px;
    max-width: 475px;
    padding: 50px 0 0;
    letter-spacing: 5px;	
  }
	

.titlearea {
    position: relative;
    background: url(../images/PCMV.jpg) no-repeat 50%;
	background-size: cover;
    text-align: center;
    overflow: hidden;
    padding: 0 0 0;
    height: 700px;
  }
	
.boxheight{
		height: 150px;
	}
.boxheight_max{
		height: 180px;
	}	
	
.contents_p{
    font-size: 16px;
	text-align: left;
	height: auto;
	margin-bottom: 15px;
  }		

	
.nav_box {
    position: relative;
    top: 0%;
    left: 0%;
    transform: translate(0,-80%);
    -webkit-transform: translate(0,-80%);
    -ms-transform: translate(0,-80%);
    width: 950px;
    background-color: #E41E23;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  }

.nav_box a {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    flex: 1;
    text-align: center;
    padding: 15px 0 10px;
    margin: 10px 10px 10px;
    font-size: 17px;
    border-bottom: 1px solid #ffffff;
    line-height: 1.1;
  }
/*
.nav_box a:nth-child(4){
    padding: 6px 0 2px;
    margin: 5px 10px 6px;
  }
*/
.nav_box a:hover {
    opacity: 1;  
    color: #ffffff;
    background-color: #373C50;
	border-bottom: 1px solid #373C50;
    transition: 0.2s ease-in-out;
  }
	
	

	
	
.icon_l{
    position: absolute;
    z-index: 2;
    width: 87px;
    height: 87px;
    transform: translate(-45%, -30%);
    -webkit-transform: translate(-45%, -30%);
    -ms-transform: translate(-45%, -30%);
  }
.icon_r{
    position: absolute;
    z-index: 2;
    width: 87px;
    height: 87px;
    transform: translate(-40%, -30%);
    -webkit-transform: translate(-40%, -30%);
    -ms-transform: translate(-40%, -30%);
  }
.icon_vs{
    position: absolute;
    z-index: 2;
    background-image: url(../images/ic_vs.svg);
    width: 130px;
    height: 130px;
    transform: translate(315%, -15%);
    -webkit-transform: translate(315%, -15%);
    -ms-transform: translate(315%, -15%);
  }
	
.contents_box {
    background: url(../images/line.png) repeat-y center top;
}
	
.contents_box img {
    width: 450px;
    height: auto;
    object-fit: cover;
  }

.contents_box .boxleft {
    padding: 50px 5px 3px;
    flex-grow: 1;
    position: relative;
    width: 45%;
  }

	
.contents_box .boxright {
    padding: 50px 5px 3px;
    flex-grow: 1;
    position: relative;
    width: 45%;
  }
	
	
.contents_box .line{
    flex-grow: 1;
    height: 100%;
    margin: 0 0.5rem 0 1.25rem;
  } 
	

.boxleft h3{
	  font-size: 25px;
	  color: #E65A46;
	  font-weight: bold;
 	  margin:0 auto 10px ;
  }
	
.boxright h3{
	  font-size: 25px;
	  color: #508CC8;
	  font-weight: bold;
 	  margin:0 auto 10px ;
  }	




	
div#onsen,div#gourmet,div#scene,div#other,div#classic {
    padding: 50px 0;
  }
	
div#onsen,div#scene,div#other{
    background: url(../images/bg_right.png) no-repeat;
    background-position: top right;
	background-size: 300px 680px;
  }

div#gourmet,div#classic{
    background: url(../images/bg_left.png) no-repeat;
    background-position: top left;
	background-size: 300px 680px;
  }	
	
#onsen .contents_box,#gourmet .contents_box,#gourmet .contents_box,#other .contents_box,#classic .contents_box{
	margin:auto;
	width: 950px;
	height: auto;
	text-align: center;
	display: flex;
	position: relative;
  }	

#scene .contents_box{
	margin:auto;
	width: 950px;
	height:  auto;
	text-align: center;
	display: flex;
	position: relative;
  }	

	
 .scene_ptitle {
    font-size: 22px;
  }

.scene_ptxt {
    font-size: 16px;
  }
	
/*アコーディオン*/
  .ac_container {
    display: flex;
    background-color: #FFE3D6;
	margin: 0;
	height: 125px;	  
  }
	
  .ac_container_blank {
    margin: auto;
	height: 125px;
}	
  .ac_imgbox {
    padding-right: 15px;
    line-height: 0; 
  }

  .ac_imgbox img {
    width: auto;
    height: 125px;
    object-fit: cover;
  }
	
  .ac_txtbox {
    flex: 1;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }	

  .click_ac {
    font-size: 18px;
    font-weight: bold;
    background-color: #E65A46;
    padding: 3px 0px 0px 2px;
    color: #FFF;
    cursor: pointer;
    text-align: center;
	align-items: flex-end;
	height: auto;
  }

  .accordion_c {
    display: none;
    font-size: 16px;
    background-color: #FFE3D6;
    padding: 10px 20px;
    height: auto;

    transition: opacity 0.3s ease-in-out;
  }
	
 .click_ac .icon {
      margin-left: 20px;
    }	

  .title_pt{
    font-size: 18px;
    border: 1px solid #E65A46;
    color: #E65A46;
    display: inline-block;
    padding: 3px 10px 1px;
    margin: 12px 108px -1px 0;
  }

  .main_title {
    font-size: 22px;
    font-weight: bold;
    color: #E65A46;
    margin: 4px 0;
    text-align: left;
  }
	
  .acsub_title {
    font-size: 20px;
    font-weight: bold;
    color: #E65A46;
    margin: 5px auto; 
  }	
	
.acttle{
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    padding: 2px 20px 1px;
    margin: 5px 0;
    text-align: center;
    border-radius: 5px;
    background: #E65A46;
    color: #FFF;
}	 
/* btn */
	
h4{
    font-size: 40px;
    text-align: center;
    font-weight: bold;
    margin: 30px 35px 20px;
    color: #FFF;
    letter-spacing: 5px;
  }
	
.webtitle{
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 950px;
    margin: 0 auto;
  }
	.webtitle img{
		width: 45px;
		height: 40px;
  }	
	
.webtxt{
    font-size: 22px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 4px;
  }	
	
.web_link{
	margin: 15px auto;
	max-width:950px;
	display: flex;
	justify-content:space-around;
    align-items: center;
    text-align: center;		
  }
	
/* comming soon */	
.web_btn_cmsoon	{
    background: #8C2D37!important;
	color: #C4959B;
    display: block !important;
	}	
	
	
.web_btn{
    flex: 1;
    padding: 20px;
    margin: 10px;
    box-sizing: border-box;
    background: #32374B;
    position: relative;
	font-size: 20px;
	font-weight: bold;
	line-height: 1;
    height: 4em;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    align-items: center;
  }
	
	
.web_btn:hover {
    opacity:1;
	color:  #C4959B7;
    background: #8C2D37;
    transition: 0.2s ease-in-out;		
  }
	
.web_btn a {
	font-size: 20px;
	font-weight: bold;
    color: #FFF;
    margin: 0 auto;
	display: block;
  }

.web_btn :after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #FFF;
    border-right: 3px solid #FFF;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
  }

.tooltip{
    width: 300px;
    height: 33px;
    position: absolute;
    z-index: 2;
	top:96%;
	left:50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }

	
#opapp div{
	max-width: 950px;
	margin: 0 auto;
    border: 1px solid #E31E23;
    padding: 20px;
	}	
#opapp strong {
	font-size: 20px;
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
	color: #E31E23;
	}
	
#opapp p {
	margin-bottom: 5px;
	font-size: 16px;}
#opapp span {color:#E31E23;}
	
div#tripabox div {
    overflow: hidden;
    padding: 15px;
    margin: 0 0 0 0;
    float: none !important;
    width: auto !important;
    border-bottom: 1px dashed #32374B;
  }
div#tripabox div:last-child{border-bottom: none;}



div#tripabox {
    padding: 10px;
    margin: 30px auto;
    max-width: 950px;
  }

div#tripabox div p {
    float: left;
    margin: 0 20px 0 0;
  }
	
div#tripabox a,div#tripabox a:link{color: #E41E23;}
div#tripabox a:hover{color: #8B2B37;}
	
#tripauncer div dl {
    overflow: hidden;
    display: block;
    padding: 0 0 0 0;
  }
	
#tripauncer div dl dt {
    font-size: 20px;
    margin: 7px 0;
    padding: 0;
    font-weight: bold;
  }
#tripauncer div dl dd {
    font-size: 16px;
  }
	
div#tripabox img {
    width: 180px;
    height: 120px;
    object-fit: cover;
  }
	
.bnrwrap {
    padding: 30px 0 0px;
  }
ul#bannerBox {
	max-width: 950px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }	
ul#bannerBox li {
    width: calc(100% / 4 - 15px);
    margin-right: 15px;
    margin-bottom: 15px;
  }
.bnrwrap img{
     width: 100%;
     height: auto;
  }
div.bnr {
    width: 950px;
    margin: -50px auto 50px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}
div.bnr img {
    width: 640px;
}
}