/*******************************************************************************
common theme
********************************************************************************/
/*font
font-family: "Noto Sans JP", sans-serif;
font-family: "Shippori Mincho", serif;
font-family: "Corinthia", cursive;
*/
:root {
  --theme-color:68 116 189;
  --accent-color:189 68 167;
  --accent-color2:255 255 94;
}
/*
rgba(var(--theme-color)/0.05)
*/


/*******************************************************************************
title
********************************************************************************/
#title{
    position: relative;
    z-index: 0;
    background: url("../img/titleBg.webp") no-repeat center center;
    background-size: cover;
    padding-top: 9%;
    padding-bottom: 10%;
}

#title h1{
    font-family: "Shippori Mincho", serif;
    font-size: 2.1em;
    line-height: 1.6;
    font-weight: 400;
    text-align: left;
    color: #FFF;
    margin: auto 0 auto auto;
    margin-bottom: 0.3em;
    text-shadow    : 
       3px  3px 3px rgba(98, 190, 249, 0.30),
      -3px  3px 3px rgba(98, 190, 249, 0.30),
       3px -3px 3px rgba(98, 190, 249, 0.30),
      -3px -3px 3px rgba(98, 190, 249, 0.30),
       3px  0px 3px rgba(98, 190, 249, 0.30),
       0px  3px 3px rgba(98, 190, 249, 0.30),
      -3px  0px 3px rgba(98, 190, 249, 0.30),
       0px -3px 3px rgba(98, 190, 249, 0.30); 
}
#title h1 strong{
    display: block;
    font-size: 2em;
    font-weight: 400;
}
.titleEn{
    font-family: "Corinthia", cursive;
    color: #ffff5e;
    font-size: 2.7em;
    font-weight: 300;
    margin-left: 34%;
}
#title .titleText{
    margin: 8% auto 0 44.2%;
}
#title .titleText span{
    display: inline-block;
    background-color: #FFF;
    margin: 2px 0;
    padding: 0 1em;
    color: rgb(var(--theme-color));
    position: relative;
}
#title .titleText span:nth-of-type(2){
    margin-left: 0.6em;
}
#title .titleText span::before{
    content: '';
    display: inline-block;
    position: absolute;
    right: 100%;
    width: 0.5em;
    height: 100%;
    background: linear-gradient(to top right, transparent 50%,#FFFFFF 51%) no-repeat top left/100% 100%;
}
#title .titleText span::after{
    content: '';
    display: inline-block;
    position: absolute;
    left: 100%;
    width: 0.5em;
    height: 100%;
    background: linear-gradient(to bottom left, transparent 50%,#FFFFFF 51%) no-repeat top left/100% 100%;
}

/*--1100px以下------------------------------------*/
@media only screen and (max-width: 1100px) {
#title{
    font-size: 1.3vw;
}
}
/*--737px以下 ------------------------------------*/
@media only screen and (max-width: 737px) {
#title{
    background-position: 35% center;
    font-size: 1.6vw;
    padding-top: 11%;
    padding-bottom:13%;
}
.titleEn {
    font-size: 5vw;
    margin-left: 34%;
}

#title .titleText{
    font-size: 2.2vw;
    margin: 8% auto 0 41%;
}
}
/*--460px以下 ------------------------------------*/
@media only screen and (max-width: 460px) {
#title{
    background: url("../img/titleBg_sp.webp") no-repeat center top;
    background-size: 100% auto;
    padding-top: 15vw;
    padding-bottom: 21vw;
}
#title h1{
    margin-right: -2em;
    font-size: 5vw;
}
#title h1 strong{
    font-size:8.8vw;
}
.titleEn{
    text-align: right;
    font-size: 7vw;
}
#title .titleText {
    font-size: 3vw;
    margin: 23vw -1em 0 29vw;    
}
#title .titleText span,
#title .titleText span:nth-of-type(2){
    background-color: transparent;
    color: #FFF;
    margin: 0;
    padding: 0;
}
#title .titleText span::before,
#title .titleText span::after{
    display: none;
}
}

/*******************************************************************************
anchorLink
********************************************************************************/
#anchorLink{
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;   
}
.linkList{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 1.1em;

}
.linkList li{
    min-width: calc(100% / 5);
    flex-grow: 1;
    text-align: center;
}
.linkList li a{
    display: block;
    padding: 0.8em;
    color: #000;
}
.linkList li a span{
    display: inline-block;
    position:relative;
    z-index: 0;
}
.linkList li a span::after{
    transition: 0.2s;
    content: "";
    display: inline-block;
    background-color: rgba(var(--accent-color2) / 0.5);
    position: absolute;
    left: 0%;
    top: 70%;
    transform-origin: left top;
    transform:translateX(-10%) rotate(-3deg) scaleX(0);
    width: 130%;
    height: 0.8em;
    z-index: -1;
}
.linkList li a:hover span::after{
    transform:translateX(-10%) rotate(-3deg) scaleX(100%);
}

/*--1100px以下------------------------------------*/
@media only screen and (max-width: 1100px) {
.linkList{
    margin: 0 -5.7%;
}
.linkList li{
    min-width: inherit;
}
}

/*--737px以下 ------------------------------------*/
@media only screen and (max-width: 737px) {

.linkList li{
    min-width:24.8%;
    border-right: 1px solid #999;
}
.linkList li:nth-of-type(4),
.linkList li:nth-of-type(5){
    border-top: 1px solid #999;
}
.linkList li a{
    padding: 0.6em;
}
}
/*--460px以下------------------------------------*/
@media screen and (max-width: 460px)  {
.linkList{
    font-size: 3.4vw;
}
}


/*******************************************************************************
introduction
********************************************************************************/
#introduction{
    position: relative;
    background: url("../img/bg_geometric.png");
}
.introWrap{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 0;
    padding: 5% 0;
}
.introWrap::before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: 130%;
    height: 100%;
    transform:translateX(-15%);
    background: #ffffff;
    background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.8) 90%, rgba(255, 255, 255, 0) 100%);
    z-index: -1;
}
#introLeft{
    flex-basis: 50%;
    max-width: 50%;
}
#introLeft h2{
    color: rgb(var(--accent-color));
    font-size: 1.8em;
    text-align: center;
    margin-bottom: 1em;
}
#introLeft .leadText{
    position: relative;
    margin-left: 4em;
    margin-right: 1em;
}
#introLeft .leadText::before{
    content: "";
    display: inline-block;
    position: absolute;
    left: -7em;
    top: 0;
    width: 6.7em;
    height: 5.8em;
    background: url("../img/icon_point.png") no-repeat left top;
    background-size: contain;
}
#introLeft .leadText p{
    margin-bottom: 0.5em;
}
#introRight{
    flex-basis: 46%;
    max-width: 46%;
}
[id^="searchGadget-"]{
    background-color: rgba(var(--accent-color) / 0.2);
    overflow: hidden;
    border-radius: 10px;
    padding: 1.5em 6%;
}
[id^="searchGadget-"] .fw-top .fw-mv-search{
    width: 100%;
}

[id^="searchGadget-"] .fw-top [class^="fw-search-top__item--"]{
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 0.5em;
    align-items: center;
}
[id^="searchGadget-"] .fw-top .fw-search-top__item-label{
    padding: 0;
    font-size: 1em;
    font-weight: 400;
    color:  rgb(var(--accent-color));
}
[id^="searchGadget-"] .fw-top .fw-search-top__header,
[id^="searchGadget-"] .fw-top .fw-search-top__item--transportation,
[id^="searchGadget-"] .fw-top .fw-search-top__item--departure .fw-departure-spot,
[id^="searchGadget-"] .fw-top .fw-search-top__item--departure .fw-departure-ttl,
[id^="searchGadget-"] .fw-top .fw-select--area-set:nth-child(2n),
[id^="searchGadget-"] .fw-top .fw-search-top__item--map,
#searchGadget-Top .fw-search-top__add{
    display: none;
}

[id^="searchGadget-"] .fw-top .fw-checkbox--icon .fw-checkbox__input:checked + .fw-checkbox__label:before {
    background-color: rgb(var(--accent-color));
    border-color: rgb(var(--accent-color));
}
/*出発地*/
[id^="searchGadget-"] .fw-top .fw-search-top--tour .fw-departure-wrap{
    padding: 0;
}
[id^="searchGadget-"] .fw-top .fw-search-top--tour .fw-departure-area{
    width: 100%;
    flex-basis: 100%;
    margin: 0;
}
/*出発日*/
[id^="searchGadget-"] .fw-search-top__item--date .fw-search-top__item-data{
    display: flex;
    flex-wrap: wrap;
}
[id^="searchGadget-"] .fw-top .fw-search-top-exception{
    flex-basis: 8em;
}
[id^="searchGadget-"] .fw-top .fw-checkbox__label{
    font-size: 1em;
}
[id^="searchGadget-"] .fw-top .fw-text--date {
    flex-basis: calc(100% - 8em);
}
/*泊数/日数*/
[id^="searchGadget-"] .fw-top .fw-search-top__item--night-day .fw-select--area-set:nth-child(2n-1){
    flex-basis: 100%;
}
/*1部屋あたりの人数*/
[id^="searchGadget-"] .fw-top .fw-search-top__item--people dt.fw-search-top__item-label{
    flex-basis: 11em;
}
/**/
[id^="searchGadget-"] .fw-top .fw-search-top__footer{
    justify-content: center;
}
[id^="searchGadget-"] .fw-top .fw-search-top--tour .fw-search-top__btn{
    flex-basis: 18em;
}
[id^="searchGadget-"] .fw-top .fw-search-top--tour .fw-search-top__btn button{
    background-color: rgb(var(--accent-color));
    border-radius: 2em;
}

/*--1100px以下------------------------------------*/
@media only screen and (max-width: 1100px) {
#introLeft h2 {
    font-size: 2.6vw;
}
[id^="searchGadget-"] .fw-top .fw-text--date {
    flex-basis: 100%;
}
}

/*--737px以下 ------------------------------------*/
@media only screen and (max-width: 737px) {
#introLeft{
    flex-basis: 100%;
    max-width: 100%;
    margin-bottom: 3%;
}
#introRight{
    flex-basis: 100%;
    max-width: 100%;
}
#introLeft h2 {
    font-size: 5vw;
}
#introLeft .leadText{
    margin: 0;
}
#introLeft .leadText::before{
    display: none;
}
#searchGadget-Top{
    display: none;
    padding: 0.8em 6% 1.5em;
}
#searchGadget-Top.lowpadding{
    display: none;
    padding: 0.8em 6%;
}

#searchGadget-Top .fw-top .fw-search-top__header{
    display: flex;
    justify-content: center;
    margin-bottom: 0;
    position: relative;
}
#searchGadget-Top .fw-top .fw-search-top__header::after{
    content: "×";
    display: inline-block;
    color: #FFF;
    position: absolute;
    right: 0;
    top: 0;
    font-size: 1.2em;
    font-weight: 600;
}
#searchGadget-Top.lowpadding .fw-top .fw-search-top__header::after{
    display: none;
}

#searchGadget-Top .fw-top .fw-search-top__header .fw-search-top__ttl{
    color: rgb(var(--accent-color));  
}
#searchGadget-Top .fw-search-top__body{
    margin-top: 1em;
}

[id^="searchGadget-"] .fw-top dt.fw-search-top__item-label{
    flex-basis: 5em;
    padding-top: 0.5em;
}
[id^="searchGadget-"] .fw-top dd{
    flex-basis:calc(100% - 5em);
}
[id^="searchGadget-"] .fw-search-top__item--people dd.fw-search-top__item-data{
    flex-basis:calc(100% - 11em);
}

[id^="searchGadget-"] .fw-top [class^="fw-search-top__item--"]{
    align-items: flex-start;
}
[id^="searchGadget-"] .fw-top .fw-search-top__item-label{
    margin: 0;
    padding: 0;
}
}
/*******************************************************************************
sectionCommon
********************************************************************************/
.sectionCommon{
    padding-top: 8%;
    padding-bottom: 12%;
}
.sectionCommon h3{
    text-align: center;
    font-size: 1.4em;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 7%;
}
.sectionCommon h3 strong{
    display: block;
    font-size: 2.4em;
}
.sectionCommon h3 span{
    display: block;
    font-weight: 400;
}
.fadeIn {
  transform: translate3d(0, 50px, 0);
  transition: 1s;
  opacity: 0;
}
.fadeIn.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/*--737px以下 ------------------------------------*/
@media only screen and (max-width: 737px) {
.sectionCommon h3{
    font-size: 3.6vw;
}


}




/*******************************************************************************
hotelSelection
********************************************************************************/
#hotelSelection{
    background-color: #fafafa;
}
#hotelSelection h3 strong{
    color: rgb(var(--theme-color));
}
#hotelSelection h4 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    width: 100%;
    line-height: 1.2;
    margin-bottom: 1em;
}
#hotelSelection h4 strong{
    flex-basis: 52.5%;
    background: url("../img/hotel_title.png") no-repeat left top;
    background-color: rgb(var(--theme-color));
    background-size: contain;
    font-family: "Shippori Mincho", serif;
    color: #FFF;
    font-weight: 500;
    font-size: 2em;
    padding: 0.5em 0.5em 0.5em 1em;
}
#hotelSelection h4 span{
    flex-basis: calc(100% - 52.5% - 1em);
    font-family: "Corinthia", cursive;
    color: rgb(var(--theme-color));
    font-size: 2.4em;
    margin-left: 1em;
    font-weight: 300;
}
.hotelBlock{
    margin-bottom: 15%;
    padding-bottom: 5%;
    position: relative;
    z-index: 0;
}
.hotelBlock:last-of-type{
    margin-bottom: 0;
}
.hotelBlock::before{
    content: "";
    display: block;
    position: absolute;
    left: 52.5%;
    top: 0;
    transform-origin: right;
    transform: translateX(-100%) translateY(0);
    width: 100%;
    height: 100%;
    background-color: rgba(var(--theme-color) / 0.08);
    transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.5s ease;
}
.hotelPhotos{
    width: 105%;
}
.hotelPhotos::after{
    content: "";
    display: block;
    clear: both;
}
.hotelPhotos li img{
    width: 100%;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
.hotelPhotos li{
    position: relative;
    float: left;
    z-index: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.5s ease;
}
.hotelPhotos li:nth-of-type(1){width: 50%; margin-right: 2%; z-index: 5;  transition-delay: 0.3s;}
.hotelPhotos li:nth-of-type(2){width: 28%; margin:0 -2% 0 0; z-index: 4;  transition-delay: 0.5s;}
.hotelPhotos li:nth-of-type(3){width: 25%; margin: 5% 0 0 -3%; z-index: 3; transition-delay: 0.7s;}
.hotelPhotos li:nth-of-type(4){width: 25%; margin:-1.5% 0 0 0; z-index: 2; transition-delay: 0.9s;}
.hotelPhotos li:nth-of-type(5){width: 20%; margin:1.8% 0 0 2%; z-index: 1; transition-delay: 1.1s;}

.hotelPhotos.animated li {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.hotelInfo{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 1em;
}
.hotelInfo .hoteText{
    flex-basis: 50%;
}
.hotelInfo .hoteText h5{
    font-size: 1.2em;
    margin-bottom: 1em;
}
.hotelInfo .hotelTag{
    margin-top: 1.5em;
    font-size: 0.85em;
}
.hotelInfo .hotelTag span{
    display: inline-block;
    margin-right: 1em;
    background-color: #FFF;
    color: rgb(var(--theme-color));
    border: 1px solid rgb(var(--theme-color));
    border-radius: 2em;
    padding: 0.2em 1em;
    
}
.hotelInfo .hotelTag span::before{
    content: "#";
    display: inline-block;
    margin-right: 0.2em;
}
.hotelInfo .hotelBook{
    position: relative;
    flex-basis: 45.4%;
    border: 1px solid rgb(var(--theme-color));
    padding: 1.5em 10em 1.5em 1.5em;
    margin-top: 2em;
    background-color: rgba(255,255,255,0.5);
}
.hotelInfo .hotelBook::before{
    content: "Booking";
    display: inline-block;
    position: absolute;
    top: -1em;
    left: 0;
    font-size: 2.4em;
    font-family: "Corinthia", cursive;
    color: rgb(var(--theme-color));
}
.hotelInfo .hotelBook dl[class^="hb-"]{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0.8em;
    align-items: center;
    width: 100%;
}
.hotelInfo .hotelBook dl[class^="hb-"] dt{
    flex-basis: 6em;
    color: rgb(var(--theme-color));
}
.hotelInfo .hotelBook dl[class^="hb-"] dd{
    flex-basis:calc(100% - 6em);
    position: relative;
}
.hotelInfo .hotelBook dl[class^="hb-"] dd::before{
    content: "＞";
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg) scaleY(2);
    font-size: 0.5em;
    color: rgb(var(--theme-color));
}

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  border: 0;
  margin: 0;
  padding: 0.8em 1em;
  background: none transparent;
  vertical-align: middle;
  color: inherit;
  box-sizing: border-box;
  font-size: 16px;
  position: relative;
}

.hotelInfo .hotelBook dl[class^="hb-"] select{
    background-color: rgba(var(--theme-color) / 0.15);
    width: 100%;
    cursor: pointer;
    
}
.hotelInfo .hotelBook .hb-submit{
    text-align: center;
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
}
.hotelInfo .hotelBook .hb-submit button{
    background-color: rgb(var(--theme-color));
    color: #FFF;
    border: 0;
    width: 9em;
    height: 9em;
    border-radius: 9em;
    border-bottom: 7px solid #0b499d;
    cursor: pointer;
}
.hotelInfo .hotelBook .hb-submit button strong{
    display: block;
    font-size: 1.6em;
    font-weight: 500;
}
.hotelInfo .hotelBook .hb-submit button:active {
    border-bottom: 0;
}

/*--1100px以下------------------------------------*/
@media only screen and (max-width: 1100px) {
.hotelInfo .hotelBook {
    padding: 1.5em;
}
.hotelInfo .hotelBook .hb-submit {
    position: relative;
    right: auto;
    top: auto;
    transform: translateY(0%);
}
.hotelInfo .hotelBook .hb-submit button {
    height: auto;
    width: 10em;
    min-width: 50%;
    padding: 0.5em 1em;
    border-bottom: 5px solid #0b499d;
    border-radius: 10px;
}
.hotelInfo .hotelBook .hb-submit button:active {
    border-top: 3px solid rgb(var(--theme-color));
    border-bottom: 2px solid #0b499d;
}
}

/*--737px以下 ------------------------------------*/
@media only screen and (max-width: 737px) {
#hotelSelection h4{
    font-size: 2.7vw;
    margin-bottom: 0;
}
#hotelSelection h4 strong{
    flex-basis: 100%;
}
#hotelSelection h4 span{
    flex-basis: 100%;
    text-align: right;
    margin-top: 0.2em;
}
.hotelBlock{
    margin-bottom: 5em;
}
.hotelBlock::before{
    height: 84vw;
}
.hotelPhotos{
    width: 100%;
}
.hotelPhotos li:nth-of-type(1) {width: 57%; margin: 0;}
.hotelPhotos li:nth-of-type(2) {width: 53%; margin: 11% 0% -3% -10%;}
.hotelPhotos li:nth-of-type(3) {width: 37%; margin: 0% 0 0 0%;}
.hotelPhotos li:nth-of-type(4) {width: 30.5%; margin: 4.4% 0 0 1%;}
.hotelPhotos li:nth-of-type(5) {width: 30.5%; margin: 4.4% 0 0 1%;}

.hotelInfo .hoteText{
    flex-basis: 100%;
    margin-bottom: 1em;
}
.hotelInfo .hoteText h5{
    margin: 0.5em 0;
}
.hotelInfo .hotelTag span {
    margin:0.3em 0.8em 0.3em 0;
    padding: 0.1em 0.6em;
}
.hotelInfo .hotelBook{
    flex-basis: 100%;
    padding: 1em 1.5em;
}
.hotelInfo .hotelBook .hb-submit button{
    line-height: 1.1;
    min-width: 65%;
}
.hotelInfo .hotelBook dl[class^="hb-"]{
    margin-bottom: 0.6em;
}
.hotelInfo .hotelBook .hb-submit{
    margin-top: 0.8em;
}
}
/*******************************************************************************
Area Map
********************************************************************************/
#mapWrap{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}
#mainMap{
    flex-basis: 62%;
    max-width: 62%;
    position: relative;
}
#mainMap img {
    width: 100%;
}
#areaText{
    flex-basis: 35%;
    max-width: 35%;
}
.mapImg{
    padding: 5px;
    background-color: #FFF;
    border: 3px solid #CCC;
}
.mapImg img{
    width: 100%;
}
#mapBtn{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 5px;
}
#mapBtn li{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    border-radius: 50%;
    position: absolute;
    cursor: pointer;
    font-size: 1.6em;
    font-weight: 600;
    text-shadow    : 
       2px  2px 0px #ffffff,
      -2px  2px 0px #ffffff,
       2px -2px 0px #ffffff,
      -2px -2px 0px #ffffff,
       2px  0px 0px #ffffff,
       0px  2px 0px #ffffff,
      -2px  0px 0px #ffffff,
       0px -2px 0px #ffffff;
}
#mapBtn li#mapBtn-tenjin{
    width: 29%;
    height: 48%;
    left: 2%;
    top: 12%;
    color: #ef508b;
}
#mapBtn li#mapBtn-nakasu{
    width: 23%;
    height: 39%;
    left: 31%;
    top: 7%;
    color: #4bbc4d;
}
#mapBtn li#mapBtn-haruyoshi{
    width: 22%;
    height: 36%;
    left: 32%;
    top: 49%;
    color: #5898c8;
}
#mapBtn li#mapBtn-hakata{
    width: 30%;
    height: 50%;
    left: 66%;
    top: 22%;
    color: #ea7200;
}
#mapTxt{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 1.1em;
    line-height: 1.2;
    margin-bottom: 2em;
}
#mapTxt li{
    position: relative;
    flex-basis: calc(100% / 4 - 2%);
    color: #FFF;
    text-align: center;
    border-radius: 10px;
    padding: 1em 0;
    border: 3px solid #ededed;
    cursor: pointer;
}
#mapTxt li strong{
    display: block;
    font-size: 1.2em;
    font-weight: 500;
}
#mapTxt #mapTxt-tenjin{background-color: #ff86b3;}
#mapTxt #mapTxt-nakasu{background-color: #89d48a;}
#mapTxt #mapTxt-haruyoshi{background-color: #75aed9;}
#mapTxt #mapTxt-hakata{background-color: #eaa400;}
#mapTxt li::after{
    display: block;
}
#mapTxt li.active::after{
    content: "▼";
    display: inline-block;
    position: absolute;
    left: 50%;
    top: calc(100% + 0.2em);
    transform: translateX(-50%);
    color: #000000;
    font-size: 1.2em;
}
#mapTxt li#mapTxt-tenjin::after{color: #ff86b3;}
#mapTxt li#mapTxt-nakasu::after{color: #89d48a;}
#mapTxt li#mapTxt-haruyoshi::after{color: #75aed9;}
#mapTxt li#mapTxt-hakata::after{color: #eaa400;}

#areaText [class^="areaText-"]{
    display: none;
}
#areaText [class^="areaText-"].active{
    display: block;
}
#areaText h4{
    font-size: 1.1em;
    line-height: 1.4;
    padding-bottom: 0.5em;
    margin-bottom: 0.5em;
    border-bottom: 2px solid #DDD;
}
#areaText .areaText-tenjin h4{border-color: #ff86b3;}
#areaText .areaText-nakasu h4{border-color: #89d48a;}
#areaText .areaText-haruyoshi h4{border-color: #75aed9;}
#areaText .areaText-hakata h4{border-color: #eaa400;}


#spotWrap > div{
    display: flex;
    flex-wrap: wrap;
    display: none;
    justify-content: space-between;
    margin-top: 1em;
}
#spotWrap > div.active{
    display: flex;
}
#spotWrap .spotBox{
    flex-basis: calc(100% / 4 - 2%);
    margin-top: 2.5em;
}
#spotWrap .spotBox dt{
    margin-bottom: 0.5em;
    border: 2px solid #DDD;
    position: relative;
}
#spotWrap .spotBox dt span{
    font-family: "Corinthia", cursive;
    position: absolute;
    left: 0;
    top: -1.1em;
    font-size: 2.2em;
}
#spot-tenjin .spotBox dt span{color: #ff86b3;}
#spot-nakasu .spotBox dt span{color: #89d48a;}
#spot-haruyoshi .spotBox dt span{color: #75aed9;}
#spot-hakata .spotBox dt span{color: #eaa400;}
#spotWrap .spotBox dt img{
    width: 100%;
}
#spotWrap .spotBox dd h5{
    margin-bottom: 0.5em;
    line-height: 1.4;
}
#spotWrap .spotBox dd p{
    font-size: 0.9em;
}
.photoNote{
    margin: 6% auto 0;
    font-size: 0.85em;
    color: #666;
    text-align: right;
}
.toMap{
    display: none;
}
/*--1100px以下------------------------------------*/
@media only screen and (max-width: 1100px) {
#mainMap{
    flex-basis: 100%;
    max-width: 100%;
}
#areaText{
    flex-basis: 100%;
    max-width: 100%;
    margin-top: 3%;
}
#mapTxt li strong{
    display: inline-block;
}
.photoNote{
    text-align: left;
}
}
/*--737px以下 ------------------------------------*/
@media only screen and (max-width: 737px) {
#mapBtn{
    font-size: 2.4vw;
}
#mapTxt{
    font-size: 4vw;
}
#mapTxt li {
    padding: 0.5em 0;
}
#mapTxt li strong {
    display: block;
}
#spotWrap .spotBox {
    flex-basis: calc(100% / 2 - 2%);
}
.toMap{
    margin: 3em auto 1em;
    text-align: center;
    display: block;
}
.toMap a{
    display: inline-block;
    color: #666;
    padding: 0.5em 2em;
    border-radius: 2em;
    border: 1px solid #666;
    
}
}
/*******************************************************************************
Gourmet
********************************************************************************/
#gourmet{
    background: url("../img/gourmet_bg.webp");
}
.gourmetWrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.gourmetBox{
    flex-basis: 21%;
    max-width: 21%;
    margin-bottom: 2%;
}
.gourmetBox dt img{
    width: 100%;
    border: 5px solid #FFF;
}
.gourmetBox:first-of-type,
.gourmetBox:last-of-type{
    flex-basis: 31%;
    max-width: 31%;
    font-size: 1.1em;
}
.gourmetBox:first-of-type{
    margin-top: -3%;
}
.gourmetBox:first-of-type dt img{
    width: 105%;
    margin-left: -5%;
    transition: 0.5s;
}
.gourmetBox:last-of-type dt img{
    width: 105%;
}
.gourmetBox:last-of-type{
    margin-top: -4%;
}
.gourmetBox:first-of-type dt{
    transform-origin: left bottom;
    transform: rotate(-3deg) ;
}
.gourmetBox:last-of-type dt{
    transform-origin: left bottom;
    transform: rotate(3deg);
}
.gourmetBox dd h4{
    margin: 0.3em 0;
    font-size: 1.3em;
}
#gourmetExtra{
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #bd8c1b;
    margin-top: 3%;
    padding-top: 2%;
    
}
#gourmetExtra h5{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex-basis: 7em;
    height: 7em;
    background-color: #eaa400;
    color: #FFF;
    border-radius: 50%;
}
#gourmetExtra h5 strong{
    font-size: 1.4em;
    font-weight: 400;
}
.gourmetExtraBox{
    flex-basis: calc((100% - 7em)/ 4 - 2%);
    font-size: 0.9em;
    margin-bottom: 2em;
}
.gourmetExtraBox dt img{
    width: 100%;
    border: 5px solid #FFF;
}
.gourmetExtraBox dd h4{
    margin: 0.2em 0;
    font-size: 1.2em;
}
@keyframes zoomOut {
  0% {
    transform: scale(1.7); 
  }
  100% {
    transform: scale(1);
  }
}

/*--1100px以上------------------------------------*/
@media only screen and (min-width: 1100px) {
.gourmetBox{
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.2s 2s ease;
}
.gourmetBox:first-of-type,
.gourmetBox:last-of-type{
    opacity: 1;
    transform: translateY(0);
}
.gourmetBox:first-of-type dd,
.gourmetBox:last-of-type dd{
    opacity: 0;
    transition: all 0.2s 2s ease;
}
.gourmetBox:first-of-type dt,
.gourmetBox:last-of-type dt{
    transition: all 0.5s 0.5s ease;
}
.gourmetBox:first-of-type dt{
    transform-origin: left top;
    transform: scale(1.7) rotate(-2deg);
}
.gourmetBox:last-of-type dt{
    transform-origin: right bottom;
    transform: scale(1.7) rotate(2deg);
}
#gourmet.is-active .gourmetBox:first-of-type dt{
    transform: scale(1) rotate(-2deg);
}
#gourmet.is-active .gourmetBox:last-of-type dt{
    transform: scale(1) rotate(2deg);
}
#gourmet.is-active .gourmetBox{
    opacity: 1;
    transform: translateY(0px);
}
#gourmet.is-active .gourmetBox:nth-of-type(2){transition-delay: 1s}
#gourmet.is-active .gourmetBox:nth-of-type(3){transition-delay: 1.1s}
#gourmet.is-active .gourmetBox:nth-of-type(4){transition-delay: 1.2s}
#gourmet.is-active .gourmetBox:nth-of-type(5){transition-delay: 1.3s}
#gourmet.is-active .gourmetBox:nth-of-type(6){transition-delay: 1.4s}
#gourmet.is-active .gourmetBox:nth-of-type(7){transition-delay: 1.5s}

#gourmet.is-active .gourmetBox:first-of-type dd,
#gourmet.is-active .gourmetBox:last-of-type dd{
    opacity: 1;
}




}

/*--1100px以下------------------------------------*/
@media only screen and (max-width: 1100px) {
.gourmetBox{
    flex-basis: 30%;
    max-width: 30%;
}
.gourmetBox:first-of-type, .gourmetBox:last-of-type {
    flex-basis: 30%;
    max-width: 30%;
    font-size: 1em;
}
.gourmetWrap::after{
    content: "";
    display: block;
    flex-basis: 30%;
    max-width: 30%;
}
.gourmetBox:last-of-type {
    margin-top: 0;
}
.gourmetBox:last-of-type dt {
    transform-origin: left bottom;
    transform: rotate(0) translateY(0);
}
}
/*--737px以下 ------------------------------------*/
@media only screen and (max-width: 737px) {
.gourmetBox{
    flex-basis: 48%;
    max-width: 48%;
    margin-bottom: 1em;
}
.gourmetBox:first-of-type {
    flex-basis: 100%;
    max-width: 100%;
    margin-top:1%
}
.gourmetBox:last-of-type {
    flex-basis: 100%;
    max-width: 100%;
}
.gourmetBox:first-of-type dt {
    transform-origin: left bottom;
    transform: rotate(-3deg) translateY(0%);
}
.gourmetBox:first-of-type dt img {
    width: 100%;
    margin-left: 0%;
}
.gourmetBox:last-of-type dt img {
    width: 100%;
}

#gourmetExtra{
    border-top: 0;
}

#gourmetExtra h5 {
    flex-basis: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 1.6em;
    position: relative;  
}
#gourmetExtra h5::before{
    content: "";
    display: inline-block;
    width: 0;
    height: 1em;
    position: absolute;
    left: 2em;
    top: 100%;
    border-style:solid;
    border-width: 1.5em 1.5em 0 0em;
    border-color: #eaa400 transparent transparent transparent;
}
.gourmetExtraBox {
    flex-basis: calc(100% / 2 - 2%);
}
}
/*******************************************************************************
Closing
********************************************************************************/
#closing{
    position: relative;
    background: url("../img/bg_geometric.png");
    z-index: 0;
    text-align: center;
    padding-top: 7%;
    padding-bottom: 15%;
}
#closing .closingWrap{
    position: relative;
    padding-top: 7%;
    padding-bottom: 10%;
    text-align: center;
}
#closing::before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: 1100px;
    height: 100%;
    background: #ffffff;
    background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.8) 90%, rgba(255, 255, 255, 0) 100%);
    z-index: -1;
}
#closing h3.closeTitle{
    font-family: "Shippori Mincho", serif;
    color: rgba(var(--accent-color) / 1);
    font-size: 3.2em;
    font-weight: 400;
    margin-bottom: 0.3em;
    margin-right: -0.7em;
}
#closing h3 + p{
    font-size: 1em;
    letter-spacing: 0.1em;
    color: #666;
}
#closing h3 + p span{
    display: inline-block;
}
#GadgetWrap{
    width: 86%;
    margin: 0 auto;
}
.switch{
    display: flex;
    flex-wrap: wrap;
    margin-top: 5%;
    margin-bottom: 4%;
    background-color: #FFF;
    border: 1px solid rgb(var(--accent-color));
    border-radius: 2em;
    overflow: hidden;
    font-size: 1.2em;
    color: rgb(var(--accent-color));
}
.switch li{
    flex-basis: 50%;
    max-width: 50%;
    text-align: center;
    padding: 0.5em;
    cursor: pointer;
    line-height: 1.4;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.switch li span{
    display: inline-block;
}
.switch li.active{
    background-color: rgb(var(--accent-color));
    color: #FFF;
}
/*Bottomツアー検索*/
#searchGadget-Bottom{
    border-radius: 1.5em;
    padding: 5%;
}
#searchGadget-Bottom .fw-top [class^="fw-search-top__item--"] {
    margin-bottom: 1em;
}

#searchGadget-Bottom .fw-search-top--tour{
    display: flex;
    flex-wrap: wrap;
}
#searchGadget-Bottom .fw-search-top__body{
    flex-basis: 48%;
    margin-right: 4%;
}
#searchGadget-Bottom .fw-search-top__item--keyword{
    display: none;
}
#searchGadget-Bottom .fw-top .fw-search-top__item--transportation{
    display: flex;
}

#searchGadget-Bottom .fw-search-top__add{
    flex-basis: 48%;
    text-align: left;
}

#GadgetWrap [class^="Gadget-"]{
    display: none;
}
#GadgetWrap [class^="Gadget-"].active{
    display: block;
}


#searchGadget-Bottom .fw-search-top__footer{
    flex-basis: 100%;
}




/*Bottom宿泊検索*/
#webconnect-gadget-yado {
    border-radius: 1.5em;
    padding: 5%;
    background-color: rgba(var(--accent-color) / 0.2);
    overflow: hidden;
}
#webconnect-gadget-yado .fw-top .fw-mv-search{
    display: block;
    margin: 0 auto;
}

#webconnect-gadget-yado .fw-search-top__header{
    display: none;
}

#webconnect-gadget-yado [class^="fw-search-top__item--"]{
    margin: 0 0 2em;
}
#webconnect-gadget-yado .fw-search-top__item--arr,
#webconnect-gadget-yado .fw-search-top__item--keyword{
    display: none;
}
#webconnect-gadget-yado .fw-top .fw-search-top__item-label{
    font-size: 1em;
    color: rgb(var(--accent-color));
    text-align: left;
    font-weight: normal;
}
#webconnect-gadget-yado .fw-research-exception{
    display: flex;
    flex-wrap: wrap;
    margin-top: 1em;
}
#webconnect-gadget-yado .fw-top .fw-search-top__item--date .fw-checkbox__label{
    font-size: 16px;
    padding: 15px 1.5em 15px 2.6em;
    background-color: #FFF;
    border: 1px solid #CCC;
}
#webconnect-gadget-yado .fw-research-exception .fw-checkbox--icon{
    display: flex;
    align-items: center;
    margin-right: 2em;
}
#webconnect-gadget-yado .fw-top .fw-checkbox--icon .fw-checkbox__label:before {
    width: 18px;
    height: 18px;
    margin-top: -0.6em;
    left: 1em;
}
#webconnect-gadget-yado .fw-top .fw-checkbox--icon .fw-checkbox__input:checked + .fw-checkbox__label:before {
    background-color: rgb(var(--accent-color));
    border-color: rgb(var(--accent-color));
}
#webconnect-gadget-yado .fw-top .fw-checkbox--icon .fw-checkbox__label:after {
    font-size: 14px;
    margin-top: -0.55em;
    width: 14px;
    left: 1.3em;
}
#webconnect-gadget-yado .fw-top .fw-search-top__btn{
    text-align: center;
}
#webconnect-gadget-yado .fw-top .fw-search-top__btn button{
    display: inline-block;
    width: 18em;
    background-color: rgb(var(--accent-color));
    border-radius: 2em;
}
#webconnect-gadget-yado .fw-top .fw-search-top__btn button.fw-is-disabled{
    background-color: #CFCFCF;
    color: #666;
}

#searchGadget-Bottom .fw-top input[type="text"],
#webconnect-gadget-yado .fw-top input[type="text"],
#searchGadget-Bottom .fw-top select,
#webconnect-gadget-yado .fw-top select{
    height: auto;
    padding: 15px;
}
/*ホテルセレクト*/
.item--hotelSelect dl{
    display: flex;
    flex-wrap: wrap;
    text-align: left;
}
.item--hotelSelect dt{
    flex-basis: 6em;
}
#searchGadget-Bottom .item--hotelSelect dt,
#searchGadget-Bottom .item--hotelSelect dd{
    flex-basis: 100%;
}

.item--hotelSelect dd{
    flex-basis: calc(100% - 6em);
    text-align: left;
}
.item--hotelSelect label{
    display: block;
    margin-bottom: 0.5em;
    font-weight: 500;
    font-size: 1.2em;
    color: rgb(var(--accent-color));
    color: #333;
    margin-left: 1em;
    cursor: pointer;
}
.item--hotelSelect {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.item--hotelSelect .hotelSelectTitle{
    color: rgb(var(--accent-color));
    margin-bottom: 0.5em;
}
.item--hotelSelect label{
    display: block;
    margin-bottom: 0.5em;
    font-weight: 500;
    font-size: 1.2em;
    color: rgb(var(--accent-color));
    color: #333;
    cursor: pointer;
}
.item--hotelSelect input {
  appearance: none;
  position: relative;
  width: 16px;
  height: 16px;
  border: 1px solid rgb(var(--accent-color));
  border-radius: 9999px;
  cursor: pointer;
  margin-right: 0.5em;
  background-color: #FFF;
}

.item--hotelSelect input:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 10px;
  height: 10px;
  margin: auto;
  border-radius: 9999px;
  background-color: rgb(var(--accent-color));
}
/*宿泊在庫のないものは非表示*/
#webconnect-gadget-yado .hotel01{display: none;}



/*--1100px以下------------------------------------*/
@media only screen and (max-width: 1100px) {
#GadgetWrap {
    width: 100%;
}
#searchGadget-Bottom {
    padding: 5% 3%;
}
#closing::before{
    width: 90%;
}

}
/*--737px以下 ------------------------------------*/
@media only screen and (max-width: 737px) {

#closing h3.closeTitle {
    font-size: 7.6vw;
}
.switch{
    font-size: 4vw;
    border-radius: 1em;
}
#searchGadget-Bottom .fw-search-top__body {
    flex-basis: 100%;
    margin-right: 0;
}
#searchGadget-Bottom .fw-search-top__add{
    flex-basis: 100%;   
}
#searchGadget-Bottom {
    padding: 5%;
}
#webconnect-gadget-yado .fw-research-exception{
    justify-content: space-between;
}
#webconnect-gadget-yado .fw-research-exception .fw-checkbox--icon{
    margin-right: 2%;
}
#webconnect-gadget-yado .fw-top .fw-modal-btn-footer{
    background-color: transparent;
}

}