@charset "UTF-8";
/* =============================================================================
  特集用レスポンシブCSS 
============================================================================= */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img {
  max-width: 100%;
}
.txtC {
  text-align: center;
}
a,a:hover,a:visited{
  color: inherit;
  text-decoration: none;
}
/* PageTopに戻る
--------------------*/
#bestseason {
  position: fixed;
  bottom: 165px;
  right: 0;
  z-index: 200;
  margin: 0;
}
.gotop a ,#bestseason a{
  display: block;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
}
.gotop a i::before {
  margin: 0 0 3px;
}
.gotop a:hover ,#bestseason a:hover {
  opacity:.7;
  text-decoration: none;
}
#modal-01{
    text-align: center;
    background: #fff;
    max-width: 992px;
    margin: 1% auto;
    padding: 3%;
}
#modal-01 img{
    width:100%;
}
.mfp-close-btn-in .mfp-close{
    background: #000000e3;
    color: #fff;
    right: 5%;
}
/* メインビジュアル
==================== */
#mainvisual {
  background-image: url(/theme/beach/kyushu/img/main.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  text-align: center;
  width:100%;
  height:650px;
  padding: 2%;
}
#mainvisual img{
  display: block;
  margin: auto;
}
#mainvisual h2{
  background: rgb(103 188 243 / 55%);
  margin: 1em;
  padding: 1em;
  color: #fff;
  text-align: center;
  text-shadow: 1px 1px 3px #000;
  font-weight: 600;
  display: inline-block;
  font-size: 1.2rem;
}
/* 新着ツアー
==================== */
.info,.season,.attention{
  width:960px;
  margin:auto;
  padding: 1% 0 4%;
}
.info .nw_icon,.season .ss_icon,.attention .ae_icon{
  margin: 3% auto;
  display: block;
  width: 30%;
}
.info .newsblock{
  margin: 1% auto;
  width:85%;
}
.info .news_more{
  display: flex;
  background-color: #f5f5f5;
  padding: 2% 4%;
}
.info .nw_img{
  width:20%;
}
.info .news_more ul{
  width: 78%;
  padding: 1%;
  margin: 0 1%;
}
.info .news_more .nw_area{
  background-color: #f7f7f7;
  width: 30%;
  text-align: center;
  padding: 0.3%;
  border-radius: 5rem;
  color: #0058ba;
  margin: 1%;
  border: 0.5px solid #0058ba;
}
.info .news_more .nw_ttl_st{
  font-weight:600;
}
/*新着情報*/
.container {
  background-color: #fff;
  display: grid;
  width: 100%;
  /*height: 350px;*/
}
.slider {
  /*display: flex;
  flex-direction: column-reverse;*/
  overflow: hidden;
  width: 75%;
  margin: 0 auto;
}
.slider-item {
  margin: 1% auto;
}
.slider:hover .slider-list {
  animation-play-state: paused;
}
.slider-item{
  position: relative;
}
.slider-item a::after {
  content: '\f054';
  display: block;
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  position: absolute;
  top: 50%;
  right: 0.5rem;
  margin-top: -0.8em;
  color: #0058ba;
  font-size: 1.2rem;
}
.slider-item a:hover{
  opacity:0.8;
}
/* ベストシーズン
==================== */
.bk001{
  background-color: #c5f1ff;
}
.season{
  padding: 1% 0;
}
.season .recommend{
  font-size: 1.4rem;
  text-align: center;
  margin: 2%;
  color: #0058ba;
  font-weight: bold;
}
/*各シーズン▼*/
.season .best_season{
  width: 80%;
  margin: auto;
}
.details {
	transition: .3s;
	overflow: hidden;
	margin-top: -10px;
	padding-bottom: 20px;
	&:last-of-type {
		margin-bottom: 0;
	}
}
.details[open] {
	margin-top: 0;
	padding-bottom: 10px;
} 
.details-summary {
	display: block;
  text-align: center;
  padding: 1%;
  transition: .3s;
	transform: translateY(10px);
	background-color: #0058ba;
	font-size: 2rem;
	font-weight: bold;
	color: #fff;
	&:hover {
		cursor: pointer;
	}
}
.details-summary::-webkit-details-marker {
	display: none;
}
.details[open] .details-summary {
	transform: translateY(0);
}
.details-content {
	padding: 20px;
	background-color: #fff;
	border-bottom: 2px solid #0058ba;
	border-left: 2px solid #0058ba;
	border-right: 2px solid #0058ba;;
}
.details-content .how{
  font-size: 1.5rem;
  text-align: center;
}
.details-content .area_btn{
  display: flex;
  justify-content: space-evenly;
}
.details-content a{
  display: block;
  background-color: #c5f1ff;
  padding: 1% 5% 1% 2%;
  margin: 1%;
  border-radius: 25px;
  font-size: 1.2rem;
  position: relative;
  text-align: center;
}
.details-content a::after {
  content: '\f054';
  display: block;
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  position: absolute;
  top: 50%;
  right: 0.6rem;
  margin-top: -0.8em;
}
.details-content a:hover{
  background-color:#0058ba;
  color:#fff;
}
/* 注目エリア
==================== */
.attention .select{
  display: flex;
}
.attention .select a{
  width: 44%;
  text-align: center;
  padding: 2%;
  background: #fff;
  border: solid 2px #0058ba;
  margin: 4%;
  border-radius: 45px;
  font-size: 1.2rem;
  color: #0058ba;
  box-shadow: 0 6px 0 #003e85;
}
.attention .select a:hover{
  transform: translateY(4px);
  box-shadow: none;
}
.area{
  width: 950px;
  margin: auto;
}
h3{
  font-size: 2.8rem;
  font-weight: 600;
}
.listbox {
  max-width: 992px;
  margin: 3% auto;
  overflow: hidden;
}
.listbox ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin: 2% 0;
}
.listbox ul .leftbox,
.listbox ul .rightbox,
.is-ipad.headfoot-is-sp .listbox ul .leftbox,
.is-ipad.headfoot-is-sp .listbox ul .rightbox {
  width: 46%;
}
.listbox.is-hide {
  display: none;
}
.listbox h4 {
  padding: 2%;
  font-size: 40px;
  font-weight: 900;
  text-align: center;
}
.thumb-item-nav div {
  margin: 5px;
}
.leftbox img:hover {
  opacity: .7;
}
.listbox .ttl {
  font-size: 25px;
  font-weight: 900;
}
.listbox .box-ttl {
  text-align: center;
  font-size: 20px;
  background: #000;
  margin: 1% auto;
  color: #fff;
}
.listbox .info {
  display: flex;
  margin: 1% auto;
  justify-content: space-around;
}
.listbox .info p {
  float: left;
  width: 32%;
  margin: 1%;
  padding: 1.5%;
  border: 1px solid #000;
  background: #fff;
  text-align: center;
  font-weight: 900;
  font-size: 13px;
}
.listbox .info p span {
  font-size: 18px;
}
.listbox .products {
  width: 96%;
  margin: 2% auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.listbox .products p {
  text-align: center;
  background: #000;
  color: #fff;
  font-size: 20px;
  width: 100%;
  margin-bottom: .5em;
}
.listbox .products dl,
.is-ipad.headfoot-is-sp .listbox .products dl {
  background: #fff;
  width: calc((100% - 4%) / 3);
  padding: 0.5em;
  position: relative;
  overflow: hidden;
  box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.2);
}
.listbox .products dl:empty {
  display: none;
}
.listbox .products dl:hover {
  opacity: .8;
}
.products .tour-tit {
  font-weight: bold;
  font-size: 1.1em;
  padding: 0.3em;
}
.products .tour-price {
  font-weight: bold;
  color: #00c2df;
  font-size: 1.2em;
  text-align: right;
}
.products .tour-hotel {
  border-top: dotted 1px;
  border-bottom: dotted 1px;
  font-size: .9em;
  padding: 0.3em;
  margin-bottom: 0.3em;
}
.products .tour-point {
  background: beige;
  padding: 0.3em;
  font-size: .9em;
}
.products .tour-point:empty {
  display: none;
}
.products .tour-link a {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.rightbox .basic{
  display: flex;
}
.rightbox .text{
  padding: 2% 1%;
}
.rightbox .basic dl{
  width: calc(100% / 3);
  text-align: center;
  background-color: #e9e8e8;
  margin: 1%;
  padding: 3%;
}
/*おすすめツアー枠*/
.tour .osusume_ttl{
  text-align: center;
  font-size: 2rem;
  font-weight: 600;
  padding: 2%;
}
.tour .osusume_tour{
  display: flex;
}
/*newおすすめツアー枠*/
.product__list {
  position: relative;
}
.product__list:not([class*="slick"]) {
  --default-cassette-size: calc((100% - 60px) / 4);
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(4, var(--default-cassette-size));
  gap: 20px; /*px固定*/
}
.product__list--data {
  display: flex;
  flex-direction: column;
  padding: 1%;
  width: 32%;
  margin: 0 auto;
}
.product__list--inner {
  flex-grow: 1;
  height: 100%;
  border: 1px solid #b5b5b5;
  display: grid;
  grid-template-rows: auto 1fr;
  color: inherit;
  text-decoration: none;
  background: #fff;
  position: relative;
  transition: opacity .3s;
  font-size: min((24vw / 7.5), 14px);
}
.product__list--inner:hover{
  opacity: 0.7;
}
.product__list.is-product-all .product__list--inner::before {
  display: inline-block;
  background: #000;
  color: #fff;
  padding: 0.25em 0.5em;
  line-height: 1;
  font-size: .8em;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.product__list--image {
  object-fit: cover;
  width: 100%;
  background: #ededed;
}
.product__list--type {
  text-align: center;
  color: #fff;
  background: #f5268e;
  padding: .3em .5em .2em;
}
.product__list--type:empty{
  display: none;
}
.product__list--text-wrapper {
  display: grid;
  padding: 1% 3% 2%;
  gap: min((40vw / 7.5), 20px) 0;
}
.product__list--detail, .product__list--more, .product__list--tokuten, .product__list--dep, .product__list--notes, .product__list--title--airport {
  font-size: 0.9rem;
}
.product__list--title {
  margin-bottom: calc(10em / 14);
}
.product__list--item.is-tour .product__list--detail:empty {
  margin-top: calc(-10em / 14);
}
.product__list--title--subtext, .product__list--title--airport {
  display: block;
  font-size: 1.1rem;
}
.product__list--more {
  width: 100%;
  display: grid;
  grid-template-columns: 72px calc(100% - 72px - .5em); /*1frだとiPhonedの一部でエラー*/
  align-items: baseline;
  gap: 0 .5em;
  margin-top: 1.25em;
}
.product__list--more + .product__list--more {
  margin-top: 1px;
}
.product__list--label {
  display: flex;
  flex-wrap: wrap;
}
.product__list--title--text{
  font-weight: 600;
  font-size: 1.2rem;
}
.product__list--label--item {
  padding: .5em .5em .4em;
  font-size: min((18vw / 7.5), 12px);
  line-height: 1;
  margin: 0 5px 5px 0;
  font-weight: bold;
}
.product__list--tokuten {
  border-top: 1px dashed;
  padding-top: .5em;
  margin-top: 1em;
  color: #666;
}
.product__list--price {
  margin-top: auto;
}
.product__list--point {
  background: #eee;
  padding: 3%;
  font-size: 0.9rem;
  margin-top: 6px;
}
.product__list--price .product__list--point {
  background: #e90000;
  color: #fff;
  text-align: center;
  padding: 3px 0 2px;
  margin: 0 0 4px;
}
.product__list--minmax {
  color: #e90000;
  font-weight: bold;
  font-size: min((40vw / 7.5), 20px);
  line-height: 1.2;
}
.product__list--minmax .is-en {
  font-size: .7em;
}
.product__list--dep, .product__list--notes {
  margin-top: .25em;
}
/*.product__list--notes span{
  display: none;
}*/
/*検索＆特集ボタン*/
.search{
  display: flex;
}
.search a{
  display: block;
  text-align: center;
  background: #0058ba;
  padding: 2%;
  margin: 2%;
  width: calc(100%/2);
  border-radius: 3rem;
  font-size: 1.3rem;
  color: #fff;
  font-weight: bold;
  position: relative;
}
.search a.btn::after {
  content: '\f054';
  display: block;
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  position: absolute;
  top: 50%;
  right: 1.5em;
  margin-top: -0.8em;
}
.search a:hover{
  opacity: 0.7;
}
/* 検索BOX
==================== */
#searchArea{
  margin: 5% auto;
}

/* おすすめ特集
==================== */
.tokushu_bnr {
  background: #fff5e6;
  max-width: 992px;
  margin: 5% auto;
}
.tokushu_bnr p {
  text-align: center;
  font-size: 24px;
  font-weight: 900;
  background: #0058ba;
  color: #fff;
}
.tokushu_bnr ul,
.is-ipad.headfoot-is-sp .tokushu_bnr ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin: 1%;
}
.tokushu_bnr ul li {
  padding: 1%;
}
.tokushu_bnr .footbtn {
  text-align: center;
  padding: 2%;
}
.tokushu_bnr .footbtn a {
  background: #ffffff;
  padding: 1em 2em;
  color: #004097;
  border: #004097 solid 2px;
  border-radius: 7px;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 2%;
}
.tokushu_bnr .footbtn a:hover {
  background: #004097;
  color: #fff;
}

/* タブレット対応
============================== */
.is-ipad .breadcrumb{
  width:100%;
}
.is-ipad .info,.is-ipad .season,.is-ipad .attention{
  width:100%;
}
.is-ipad .details-content a{
  font-size: 1rem;
}
.is-ipad .product__list--minmax{
  font-size: 1.2rem;
}
/* スマホ対応
============================== */
.headfoot-is-sp .breadcrumb {
  width: auto;
}
.headfoot-is-sp #mainvisual{
  height: 600px;
  background-position: bottom center;
}
.headfoot-is-sp #mainvisual .main_txt{
  margin: 0;
}
.headfoot-is-sp #mainvisual h2{
  padding: 1%;
}
.headfoot-is-sp #mainvisual img{
  width: 85%;
  margin: auto;
}
.headfoot-is-sp h2{
  font-size: 1rem;
}
.headfoot-is-sp .info,.headfoot-is-sp .season,.headfoot-is-sp .attention{
  width:100%;
}
.headfoot-is-sp .info .nw_icon,.headfoot-is-sp .season .ss_icon,.headfoot-is-sp .attention .ae_icon{
  width: 65%;
}
.headfoot-is-sp .slider{
  width:95%;
}
.headfoot-is-sp .info .news_more{
  padding: 2% 2%;
  margin: 3% auto;
}
.headfoot-is-sp .info .nw_img{
  width: 30%;
}
.headfoot-is-sp .info .news_more ul{
  width: 68%;
}
.headfoot-is-sp .season .best_season{
  width: 90%;
}
.headfoot-is-sp .details-content .area_btn{
  display: block;
}
.headfoot-is-sp .details-content a{
  text-align: center;
  margin: 4%;
  padding: 4% 3%;
}
.headfoot-is-sp .attention .select{
  display: block;
}
.headfoot-is-sp .attention .select a{
  width: 85%;
  margin: 5% auto;
  display: block;
  padding: 4%;
}
.headfoot-is-sp .listbox ul,.headfoot-is-sp .rightbox .basic{
  display: block;
}
.headfoot-is-sp .listbox ul li{
  width: 94%;
  margin: 3%;
}
.headfoot-is-sp .listbox .ttl{
  font-size: 1.7rem;
}
.headfoot-is-sp .rightbox .basic dl{
  display: flex;
  width: 98%;
}
.headfoot-is-sp .tour .osusume_tour{
  display: block;
}
.headfoot-is-sp .tour .tourbox{
  margin: 0% auto 3%;
  width: 96%;
}
/*おすすめツアーここから*/
.headfoot-is-sp .product__list--inner{
  display: flex;
  width: 100%;
}
.headfoot-is-sp .product__list--image-wrapper{
  width: 64%;
  padding: 2%;
}
.headfoot-is-sp .product__list--text-wrapper{
  display: block;
  padding: 1% 1% 1% 0;
  width:100%;
}
.headfoot-is-sp .product__list--point{
  margin: 3% 0;
}
.headfoot-is-sp .product__list--minmax{
  font-size: 1.3rem;
}
.headfoot-is-sp .product__list--title--airport{
  font-size: 0.9rem;
  margin-top: 1%;
}
.headfoot-is-sp .product__list--title--text{
  font-size: 1rem;
}
.headfoot-is-sp .search{
  display: block;
}
.headfoot-is-sp .search a{
  width: 90%;
  margin: 4% auto;
  padding: 3%;
}
.headfoot-is-sp .tokushu_bnr{
  width: 92%;
  margin: 3% auto;
}
.headfoot-is-sp .tokushu_bnr ul{
  display: flex;
  flex-wrap: wrap;
}
.headfoot-is-sp .tokushu_bnr ul li{
  width: 48%;
  margin: 1%;
}
.headfoot-is-sp .product__list--data{
  width: auto;
}