@charset "utf-8";
/* CSS Document */
body {
background:#fff;
font-family: "Noto Sans JP";
font-optical-sizing: auto;
font-weight: normal;
font-style: normal;
font-size: 16px;
line-height: 1.6;
}
.w1000{
width: 1000px;
margin: 0 auto;
}
a:hover{
opacity: 0.6;
transition: 0.3s;
}
h5.lines{
text-align: center;
font-family: "RocknRoll One", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 200%;
display: flex;
align-items: center;
}
h5.lines:before,
h5.lines:after{
content: "";
height: 2px;
flex-grow: 1;
background-color: #666;
}
h5.lines:before{
margin-right: 1rem;
}
h5.lines:after{
margin-left: 1rem;
}
/*--------------------pankuzu */
#pankuzu{
display: block;
background: #fff;
font-size: 85%;
}
#pankuzu ul{
width: 1000px;
margin: 0 auto;
overflow: auto;
padding: 10px;
_zoom: 1;
}
#pankuzu li{
float: left;
list-style: none;
}
#pankuzu li + li:before{
margin: 0 8px;
content: '>';
}
/*--------------------上に戻るボタン */
.pagetop {
color: #fff;
background-color: rgba(0,0,0,0.2);
text-decoration: none;
display: block;
position: fixed;
bottom: 1em;
right: 1em;
font-size: 1.8em;
width: 2em;
height:2em;
line-height:1.8em;
border-radius: 3em;
text-align: center;
cursor: pointer;
}
.pagetop:hover {
color: #fff !important;
background-color:#FF7B69;
text-decoration: none;
transition: 0.5s;
}
/*--------------------top */
#top{
width: 100%;
height: 600px;
background: url("../img/bg_top.jpg");
background-repeat: no-repeat;
background-size: cover;
text-align: center;
color: #fff;
text-shadow: #000 1px 0 10px;
}
#top h3{
padding-top: 100px;
font-family: "RocknRoll One", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 520%;
line-height: 1em;
}
#top h3 span{
display: block;
font-size: 55%;
}
#top p{
padding-top: 90px;
font-weight: 500;
}
#top_sp{
display: none;
}
/*--------------------intro */
#intro{
padding: 50px 0;
background: #F3FDFF;
}
ul.j_nav{
display: flex;
justify-content: space-between;
padding: 30px 0 10px;
}
ul.j_nav li{
width: calc(100%/3 - 1%);
text-align: center;
}
ul.j_nav li a{
display: inline-block;
background:#ff7b69;
width: 100%;
color: #fff;
font-weight: 600;
font-size: 115%;
margin: 0 auto;
padding: 10px 0;
position: relative;
}
ul.j_nav li a::before {
content: "";
top: 0;
left: 0;
border-bottom: 1.5em solid transparent;
border-left: 1.5em solid #ffbfb8;/* ラベルの色はここで変更 */
position: absolute;
z-index: 100;
}
ul.j_nav li a::after {
content: "";
display: block;
top: 5px;
transform: rotate(-45deg);
left: 0;
position: absolute;
z-index: 101;
}
ul.j_nav li a span.material-symbols-outlined{
vertical-align: -5px;
padding-left: 4px;
color: #ffbfb8;
}
/*--------------------hotels */
#hotels{
padding: 10px 0 50px;
background: #F3FDFF;
color: #333333;
}
#hotels p,
#map p.spot_intro{
text-align: center;
font-weight: 500;
padding: 30px 0 50px;
}
#hotels ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#hotels p.dtl_hotel_sp{
display: none;
}
#hotels ul li{
width: calc(100%/3 - 1%);
margin-bottom: 30px;
}
#hotels ul li .coupon{
position: relative;
}
#hotels ul li img{
width: 100%;
}
#hotels ul li img.imagebox{
width: 100%;
height: 237.64px;
}
#hotels ul li .coupon img.coupon_img{
position: absolute;
top: 8px;
left: 8px;
width: 170px;
}
#hotels dl dt{
font-size: 130%;
font-weight: 700;
border-left: 15px solid #FF7B69;
margin: 7px 0 20px;
padding-left: 7px;
}
#hotels dl dt.mgn{
margin-bottom: 54px;
}
#hotels dl dd a{
display: block;
text-align: center;
color: #fff;
font-weight: 600;
background: #ff7b69;
border-radius: 25px;
padding: 4px 0;
margin-bottom: 10px;
}
/*--------------------map */
#map{
padding: 50px 0;
background: #FCFCFC;
color: #333333;
}
#map .map_point{
position: relative;
}
#map .map_point img{
border: 1px solid #222;
}
#map img.mapimage_sp{
display: none;
}
/*-------------------------- */
p.coordinates{
position: absolute;
}
p.coordinates span img.pin{
width: 20px;
padding: 0 5px;
border: none!important;
vertical-align: -5px;
}
p.airport{
color: #304f00;
font-weight: 700!important;
text-shadow:
1px 1px 0 #fff,
-1px 1px 0 #fff,
-1px -1px 0 #fff,
1px -1px 0 #fff;
}
p.sightseeing{
color: #f94e3d;
font-weight: 700!important;
text-shadow:
1px 1px 0 #fff,
-1px 1px 0 #fff,
-1px -1px 0 #fff,
1px -1px 0 #fff;
}
p.hotelname{
color: #0071bc;
font-weight: 700!important;
text-shadow:
1px 1px 0 #fff,
-1px 1px 0 #fff,
-1px -1px 0 #fff,
1px -1px 0 #fff;
}
p.area{
background: #FF7B69;
padding: 0 7px!important;
border: 2px solid #fff;
border-radius: 5px;
color: #fff;
font-weight: 700;
}
p.a_miyazaki{
bottom: 225px;
right: 325px;
}
p.a_kagoshima{
bottom: 155px;
left: 405px;
}
p.a_kumamoto{
top: 40px;
left: 479px;
}
/*----------------sightseeing--- */
p.kurusu{
text-align: center;
top: 120px;
right: 190px;
}
p.takachiho-kyo{
top: 70px;
right: 340px;
}
p.aoshima-shrine{
bottom: 175px;
right: 285px;
}
p.sun-messe{
bottom: 148px;
right: 165px;
}
p.udo-shrine{
bottom: 110px;
right: 225px;
}
p.misaki{
bottom: 18px;
right: 270px;
}
/*-----------------------area--- */
p.nobeoka{
top: 75px;
right: 220px;
}
p.takachiho{
top: 100px;
right: 330px;
}
p.aya{
top: 215px;
right: 300px;
}
p.ebino{
bottom: 295px;
right: 410px;
}
p.town{
bottom: 275px;
right: 250px;
}
p.aoshima{
bottom: 80px;
right: 330px;
}
/*-----------------------hotelname--- */
p.hotelname span.blank{
padding-left: 30px;
}
p.hotel_1{
bottom: 405px;
right: 1px;
line-height: 1.1;
font-size: 93%;
}
p.hotel_2{
bottom: 376px;
right: 57px;
}
p.hotel_3{
bottom: 348px;
right: 12px;
}
p.hotel_4{
bottom: 320px;
right: 40px;
}
p.hotel_5{
bottom: 273px;
right: 40px;
line-height: 1.3;
}
p.hotel_6{
bottom: 220px;
right: 80px;
}
p.hotel_7{
bottom: 175px;
right: 60px;
line-height: 1.3;
}
p.hotel_8{
bottom: 50px;
right: 30px;
}
/*-------------------------- */
#map ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 60px;
}
#map ul li{
width: calc(100%/3 - 1%);
margin-bottom: 40px;
}
#map ul li img{
width: 100%;
height: 215px;
object-fit: cover;
}
#map dl dt{
font-size: 130%;
font-weight: 700;
border-left: 15px solid #799f46;
margin: 7px 0 20px;
padding-left: 7px;
}
#map dl dd{
font-weight: 500;
}
#map table{
margin-top: 10px;
}
#map table td.item{
color: #799F46;
width: 55px;
font-weight: 600;
}
#map table td.item_wide{
color: #799F46;
width: 75px;
font-weight: 600;
}
#map a{
display: block;
text-align: center;
font-weight: 700;
font-size: 115%;
color: #fff;
background: #799F46;
border-radius: 25px;
padding: 7px 0;
margin-top: 10px;
}
/*--------------------search */
#search{
padding: 50px 0;
color: #333333;
background: #f5f5f5;
}
.fw-mv-search{
width: 100%!important;
}
h2.fw-search-top__ttl{
display: none;
}
.fw-top .fw-search-top--air{
background: none;
margin-top: 30px;
}
.MuiOutlinedInput-adornedEnd{
background: #fff;
}
.fw-top .fw-btn-search-01--hotel{
background: #799F46;
}
.fw-top .fw-btn-search-01--hotel:hover{
background: #799F46;
opacity: 0.6;
transition: 0.3s;
}
dl.fw-search-top__item--company{
display: none!important;
}
/*--------------------question */
#question{
padding: 50px 0;
color: #333333;
background: #f9ffe6;
}
.accordion{
margin-top: 50px;
}
.toggle {
display: none;
}
.Label {		/*タイトル*/
padding: 1em;
display: block;
background:#fff;
box-shadow: 7px 7px 0px 0px rgba(121, 159, 70, 1);
margin-bottom: 10px;
font-size: 110%;
font-weight: 600;
}
span.question_p{
color: #799F46;
padding-right: 7px;
font-size: 115%;
}
.Label::before{		/*タイトル横の矢印*/
content:"";
width: 6px;
height: 6px;
border-top: 2px solid #799F46;
border-right: 2px solid #799F46;
-webkit-transform: rotate(45deg);
position: absolute;
top:calc( 50% - 3px );
right: 20px;
transform: rotate(135deg);
}
.Label,
.content {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.3s;
}
.content {		/*本文*/
height: 0;
margin-bottom:10px;
padding:0 20px;
overflow: hidden;
}
.content p{
font-weight: 500;
}
.content p a{
border-bottom: 1px solid #0066cc;
}
.content p a:hover{
color: #0066cc;
}
.content p span.answer{
color: #FF3535;
padding-right: 7px;
}
.toggle:checked + .Label + .content {	/*開閉時*/
height: auto;
padding:20px ;
transition: all .3s;
}
.toggle:checked + .Label::before {
transform: rotate(-45deg) !important;
}
/*--------------------other */
#other{
padding: 50px 0;
}
#other h5{
text-align: center;
font-family: "RocknRoll One", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 200%;
color: #799F46;
}
#other ul{
display: flex;
justify-content: space-between;
margin-top: 40px;
}
#other ul li{
width: calc(100%/2 - 1%);
}
#other ul li img{
width: 100%;
}
#other dl dt{
position: relative;
display: block;
width: 100%;
padding: 10px 0;
margin-top: 25px;
color: #fff;
background:#799F46;
border-radius: 5px;
text-align: center;
font-weight: 700;
font-size: 190%;
letter-spacing: 0.05em;
}
#other dl dt:before{
content: "";
position: absolute;
top: 100%;
left: 20%;
margin-left: -15px;
border: 15px solid transparent;
border-top: 15px solid #799F46;
}
dd.detail{
margin-top: 45px;
}
#other dl dd a{
display: block;
width: 100%;
margin-top: 40px;
padding: 10px 0;
text-align: center;
border: 3px solid #799F46;
border-radius: 30px;
color: #799F46;
font-weight: 700;
font-size: 120%;
}
/*--------------------contact */
#contact{
padding: 30px 0 50px;
color: #fff;
background: #3C3C3C;
background-size: cover;
background-repeat: no-repeat;
}
#contact h5{
padding-bottom:15px;
text-align: center;
}
.contacts{
width: 950px;
margin: 0 auto;
padding-top: 20px;
font-size: 1.02rem;
vertical-align:middle;
}
.contact_tyo ul{
display: flex;
justify-content: space-between;
}
.contact_tyo ul li{
width: calc(100%/2);
}
.contact_tyo ul li.left-sp{
padding-top: 45px;
}
.contact_tyo ul li a{
color: #fff;
font-weight: bold;
}
.contact_tyo dl dd.migizoroe{
padding-left: 30px;
}
.contact_tyo dl dd.adress{
padding: 0 0 7px 35px;
}
span.ph-number{
font-size: 175%;
padding-left: 15px;
letter-spacing: 2px;
}