@charset "utf-8";

/*PCSP共通設定*/

main{
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "sans-serif";
font-size: 14px;
}

.is-hide {
  display: none;
}


/* ------------------------------------------
	title
------------------------------------------ */
@keyframes infinity-scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-100%);
}
}
@keyframes infinity-scroll-right {
from {
  transform: translateX(-100%);
}
  to {
  transform: translateX(0%);
}
}

.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
.scroll-infinity__list {
  display: flex;
  list-style: none;
}
.scroll-infinity__list a{
  display: flex;
}
.scroll-infinity__list--left {
  animation: infinity-scroll-left 80s infinite linear 0.5s both;
}
	.scroll-infinity__list--right{
  animation :infinity-scroll-right 80s infinite linear 0.5s both;
}

.scroll-infinity__item img{
	transition:all 0.3s;
}
.scroll-infinity__item>img {
  width: 100%;
}
.scroll-infinity__wrap:hover .scroll-infinity__list--left,
.scroll-infinity__wrap:hover .scroll-infinity__list--right{
  animation-play-state: paused;
}
.scroll-infinity__item img:hover {
transform: scale(1.1);
}
.scroll-infinity__item a:hover {
opacity: 1;
}



/* ------------------------------------------
	Areamap
------------------------------------------ */
#Areamap .inner{
width: 100%;
max-width: 100%;
}
.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
.modal__bg{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}
.modal__content{
    background: #fff;
    left: 50%;
    padding: 30px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
}

/*地図内リンクボタン*/
.areaname a{
display: flex;
justify-content: center;
align-items: center;
padding: 6px 31px 4px 10px;
border-radius: 6px;
border:1px solid #222;
background: rgba(248,246,240,0.8);
color: #222;
}
.areaname a::before {
content: "";
padding-right: 15px;
position: relative;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 0 4px 6px;
border-color: transparent transparent transparent #df062f;
}
.areaname a:hover{
opacity: 1;
border:1px solid #df062f;
background: #df062f;
color: #fff;
transition: all 0.2s;
}
.areaname a:hover::before{
border-color: transparent transparent transparent #fff;
}

/*モーダル内リンクボタン*/
.modal_bt a{
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
margin: 20px auto 0 auto;
padding: 10px 25px;
border-radius: 6px;
background: #df062f;
color: #fff;
max-width: 240px;
}
.modal_bt a::after {
content: '';
width: 5px;
height: 5px;
border-top: 3px solid #fff;
border-right: 3px solid #fff;
transform: rotate(45deg) translateY(-48%);
position: absolute;
top: 48%;
right: 20px;
}


/*
ボタン配置位置
※地図配置は各メディアクエリ内
=============================*/

/*九州*/
.area_fukuoka{
position: absolute;
left:38%;
top:10%;
}
.area_saga{
position: absolute;
left:18%;
top:20%;
}
.area_oita{
position: absolute;
left:65%;
top:23%;
}
.area_nagasaki{
position: absolute;
left: 6%;
top: 35%;
}
.area_kumamoto{
position: absolute;
left: 44%;
top: 40%;
}
.area_miyazaki{
position: absolute;
left: 65%;
top: 55%;
}
.area_kagoshima{
position: absolute;
left:28%;
top:70%;
}

/*九州離島*/
.area_rito{
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}

/*沖縄*/
.area_okinawa{
position: absolute;
left:50%;
top:5%;
transform: translateX(-50%);
}



/* ------------------------------------------
	common
------------------------------------------ */
.divlink,
.divlink2 {
position:relative;
}
.divlink a,
.divlink2 a{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
.divlink a span,
.divlink2 a span{
display: none;
}
.divlink:hover,
.divlink2:hover{
	opacity: 0.8 ;
	transition: 0.2s ;
}


/* 
 sp　760px以下
================================================================================================ 
*/

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

/* CSS */
#dirPathBlock,
#anchorLinkBlock {
	font-size: 10px;
	margin: 1% 1% 0 1%;
}
#dirPathBlock p,
#anchorLinkBlock a{font-size: 12px;}
h1 {
	font-size: 12px;
	margin: 0 1%;
}
h2 {
	clear: both;
}
.inner{
	width: 100%;
	margin: 0;
	padding: 24px 15px;
	box-sizing: border-box;
}

strong{font-weight:600;}

/*------------------------------
Important news
------------------------------*/
#newsImportant{
	margin: 5px;
	display:flex;
	font-size: 11px;
}
#newsImportant dt{
	width: 72px;
    height: fit-content;
	background: #e62d2d;
	color: #FFF;
	text-align: center;
	border-radius: 3px;
	margin-top: 2px;
    padding: 3px 0;
}
#newsImportant dd{
	width: 100%;
	padding: 0 10px;
}
#newsImportant li{
	padding: 5px 3px 5px 12px;
	position: relative;
}
#newsImportant li:nth-of-type(n+2){border-top: 1px dotted #ccc;}
#newsImportant li:before{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 6px solid #555555;
	border-right: 0;
    position: absolute;
	top: 7px;
	left: 0;
}


/* ------------------------------------------
	title
------------------------------------------ */
#title{
position: relative;
margin: 0;
padding: 0;
background: #df062f;
color: #fff;
}
.scroll-infinity:nth-child(1){
margin-bottom:95px;
}
.scroll-infinity__item img{
  width: calc(100vw / 3);
}

#title .title_wrap{
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
display: flex;
flex-wrap:wrap;
justify-content: center;
align-items: center;
width:100%;
background: #df062f;
}
#title .logo_akafu{
margin: -5px 10px 0 -10px;
width: 150px;
}
#title h2{
line-height: 1.3;
text-align: center;
font-size: 22px;
font-weight: 600;
letter-spacing: 0.5px;
}
#title .leadtxt{
width: 100%;
padding: 5px;
text-align: center;
font-size: 13px;
}



/* ------------------------------------------
	common
------------------------------------------ */
.headline {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.5em;
	font-weight: 600;
	text-align: center;
	padding-bottom: 30px;
	color: #222;
}

.headline::before,
.headline::after {
	content: '';
	width: 30px;
	height: 3px;
	background-color: #df062f;
}

.headline::before {
	margin-right: 20px;
}
.headline::after {
	margin-left: 20px;
}


/* ------------------------------------------
	navi 
------------------------------------------ */
.cp_actab {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 0 auto;
	color: #ffffff;
	border-bottom: solid 1px #df062f;
}
.cp_actab input {
	position: absolute;
	z-index: -1;
	opacity: 0;
}
.cp_actab label {
	font-weight: bold;
	line-height: 3;
	position: relative;
	display: block;
	padding: 0 0 0 1em;
	cursor: pointer;
	background: #f8f6f0;
	color: #df062f;
	font-size: 1.1em;
	border-bottom: solid 1px #df062f;
}
.cp_actab .cp_actab-content {
	overflow: hidden;
	max-height: 0;
	-webkit-transition: max-height 0.35s;
	transition: max-height 0.35s;
	color: #222;
	background: #fff;
}
/* :checked */
.cp_actab input:checked ~ .cp_actab-content {
	max-height: 20em;
}
/* Icon */
.cp_actab label::after {
	line-height: 3;
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 3em;
	height: 3em;
	-webkit-transition: all 0.35s;
	transition: all 0.35s;
	text-align: center;
}
.cp_actab input[type=checkbox] + label::after {
	content: '+';
}
.cp_actab input[type=checkbox]:checked + label::after {
	transform: rotate(315deg);
}

.nav_link{
padding: 5px 15px;
}
.nav_link li{
border-bottom: solid 1px #e9e9e9;
}
.nav_link li:last-child{
border-bottom:none;
}
.nav_link li a{
display: block;
position: relative;
padding: 10px 5px 10px 30px;
background: #fff;
color: #222;
}
.nav_link li a::before {
content: '';
width: 5px;
height: 5px;
border-top: 3px solid #df062f;
border-right: 3px solid #df062f;
transform: rotate(135deg) translateY(-34%);
position: absolute;
top: 34%;
left: 10px;
}


/* ------------------------------------------
	WhatNew  ／ 新着情報
------------------------------------------ */
#WhatNew .news_box{
width: 100%;
margin: 0 auto;
}
#WhatNew h3{
position: relative;
display: inline-block;
font-size: 1.2em;
font-weight: 600;
padding-left: 1em;
}
#WhatNew h3::before{
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);

width: 12px;
height: 12px;
border-radius: 50%;
background: #df062f;
}

.news_list{
display: flex;
flex-wrap:wrap;
align-items: baseline;
flex-direction: column;
padding-top: 10px;
}
.news_list dt{
width: 15%;
min-width:6em;
padding: 2px;
text-align: center;
color: #fff;
background: #675047;
}
.news_list dd{
width:100%;
line-height: 1.5;
padding:5px 0 15px 5px;
}
.news_list dd a{
text-decoration: underline;
color: #222;
}




/* ------------------------------------------
	Recommend ／ おすすめ特集
------------------------------------------ */
#Recommend{
background: #f8f6f0;
}
.reco_searchbox{
width: 100%;
position: relative;
padding: 0;
background: #fff;
-webkit-filter:drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.1));
-moz-filter:drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.1));
 -ms-filter:drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.1));
 filter:drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.1));
 }
.reco_searchbox::after{
content: "";
position: absolute;
left: 50%;
bottom: -20px;
width: 0;
height: 0;
border-left: 46.5vw solid transparent;
border-right: 46.5vw solid transparent;
border-top: 20px solid #fff;
transform: translateX(-50%);
}
.reco_search{
padding:15px 20px 0 20px;
}
.reco_travelstyle{
padding:15px 20px 10px 20px;
}
.reco_search h3,
.reco_travelstyle h3{
position: relative;
display: inline-block;
font-size: 1.2em;
font-weight: 600;
padding-left: 1em;
}
.reco_search h3::before,
.reco_travelstyle h3::before{
content: "";
position: absolute;
top: calc(50% - 6px);
left: 0;
width: 12px;
height: 12px;
border-radius: 50%;
background: #df062f;
}
.reco_search h3::before {
top: 5px;
}
.reco_search h3 small {
display: block;
font-size: 0.8em;
}
.reco_search ul,
.reco_travelstyle ul{
padding: 15px 0px 10px 0px;
display: flex;
 flex-wrap:wrap;
 gap:10px 14px;
}
.reco_searchbox .radiobutton {
  display: none;
}
.reco_search span {
min-width: 7em;
display: inline-block;
padding: 5px 10px;
border:solid 1px #222;
border-radius: 6px;
text-align: center;
background: #fff;
color: #222;
}
.reco_search .radiobutton:checked + span {
background: #df062f;
border:solid 1px #df062f;
color: #fff;
}
.reco_travelstyle span {
min-width: 9em;
display: inline-block;
padding: 5px 8px;
border:solid 1px #222;
border-radius: 6px;
text-align: center;
color: #222;
}
.reco_travelstyle .radiobutton:checked + span {
background: #df062f;
border:solid 1px #df062f;
color: #fff;
}

.reco_list{
margin-top: 40px;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
.reco_list li{
padding: 10px;
width:min(42.7% , 200px);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.1);
line-height: 1.3;
background: #fff;
}
.reco_list li img{
width:min(100% , 200px);
aspect-ratio: 4 / 3;
}
.reco_list li dt{
font-weight: 600;
padding: 10px 0;
}


/* ------------------------------------------
	Areamap ／ 九州・沖縄のご紹介
------------------------------------------ */
#Areamap{
}
#Areamap .inner{
width:100%;
margin: 0;
}

/*地図*/
.map_wrap{
margin:0 auto;
width:100%;
overflow: hidden;
}
.map_kyushu{
position: relative;
width:min(100% , 516px);
margin: 0 auto;
}
.map_kyushu img{
width:100%;
}
.map_rito{
position: relative;
width:min(100% , 420px);
margin: 20px auto;
}
.map_rito img{
width:100%;
}
.map_okinawa{
position: relative;
width:min(100% , 420px);
margin: 0 auto;
}
.map_okinawa img{
width:100%;
}


/*モーダル内*/
.modal__content{
line-height: 1.5;
width: 60%;
}
.modal_areaname{
font-size:1.8em;
font-weight: 600;
padding-bottom: 10px;
}

.modal_close{
position: absolute;
right:0;
top:-45px;
color: #fff;
font-size: 40px;
cursor: pointer;
}
.modal_close a:visited{
color: #fff;
}




/* ------------------------------------------
	TravelInfo ／ 旅行情報
------------------------------------------ */
#TravelInfo{
background: #f8f6f0;
}
#TravelInfo .inner{
width:100%;
margin: 0;
padding: 24px 0;
overflow: hidden;
}
/*YouTube*/
.youtube_new{
width: auto;
aspect-ratio: 16 / 9;
margin:0 15px 10px 15px;
}
.youtube_new p span{
font-weight: 600;
padding-right: 5px;
}
.youtube_new iframe{
width:100%;
height:100%;
margin-bottom: 5px;
}
.youtube_normal,
.youtube_shorts{
padding: 10px 0 15px 0;
margin-left: 15px;
width: 100%;
display: flex;
gap:15px;
font-weight: 600;
overflow-x: auto;
}
.youtube_normal li,
.youtube_shorts li{
position: relative;
width: 200px;
aspect-ratio: 5 / 3;
display: block;
}
.youtube_normal li img,
.youtube_shorts li img{
width: 200px;
aspect-ratio: 5 / 3;
}
.youtube_normal li::before{
content: "";
position: absolute;
left: 0;
top: 0;
width: 200px;
aspect-ratio: 5 / 3;
background: url("../images/ico_play.png") no-repeat 50% 50%;
background-size: 200px;
}
.youtube_shorts li::before{
content: "";
position: absolute;
left: 0;
top: 0;
width: 200px;
aspect-ratio: 5 / 3;
background: url("../images/ico_play_shorts.png") no-repeat 50% 50%;
background-size: 200px;
}
.modal-video{
background: rgba(0,0,0,0.8);
}
.modal-video-close-btn {
width: 30px;
height: 30px;
top: -25px;
right: 0;
}
.js-modal-btn:hover{
cursor: pointer;
opacity: 0.8;
}



/*Tripa
-----------------------------------------*/
.tripalist{
width: 100%;
border-top: dashed 1px #ccc;
margin: 35px 0;
}
.tripalist li{
margin: 0 auto;
padding: 20px 15px;
border-bottom: dashed 1px #ccc;
}
.tripalist li a{
display: flex;
justify-content: space-between;
margin: 0;
padding: 3px 0 3px 15px;
color: #222;
text-decoration: underline;
}
.tripalist li dt{
position: relative;
margin-bottom: 5px;
padding:0;
font-size: 1.1em;
font-weight: 600;
}
.tripalist li dt .tripa_area{
width: 4em;
background: #675047;
color:#fff;
letter-spacing: 0.6em;
text-align: center;
font-size: 0.7em;
font-weight: 100;
padding: 5px 0.5em 5px 1.1em;
}
.tripalist li dt .tripa_title{
display: block;
padding: 5px 0 0 0;
text-decoration: underline;
}
.tripalist li dd{
}
.tripalist li img{
width: 100%;
}


/*SNS
-----------------------------------------*/
.SNSlist{
display: flex;
justify-content: center;
flex-wrap:wrap;
gap:15px min(5%, 15px);
margin: 0 10px;
}
.SNSlist li{
width: calc(50% - 100px);
min-width: 150px;
padding: 15px 10px;
border-radius: 6px;
background: #fff;
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.1);
line-height: 1.5;
text-align: center;
transition: 0.2s;
}
.SNSlist li img{
max-width: 60px;
}
.SNSlist li dt{
padding:10px 0 5px 0; 
font-weight: 600;
border-bottom: solid 1px #ccc;
}
.SNSlist li dd{
padding-top:12px; 
}



/* ------------------------------------------
	DigitalPamphlet ／ デジタルパンフレット
------------------------------------------ */
#DigitalPamphlet{
}
.digpan_list{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.digpan_list li{
padding: 0;
width: calc(50% - 20px);
line-height: 1.3;
background: #fff;
text-align: center;
}
.digpan_list li img{
width:min(100% , 200px);
height: auto;
box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2);
}
.digpan_list li p{
font-weight: 600;
padding: 10px 0;
text-align: center;
}

.digpan_bt a{
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
margin: 20px auto;
padding: 15px 20px;
border-radius: 6px;
background: #df062f;
font-size: 1.1em;
font-weight: 600;
color: #fff;
width:80%;
}
.digpan_bt a::after {
content: '';
width: 5px;
height: 5px;
border-top: 3px solid #fff;
border-right: 3px solid #fff;
transform: rotate(45deg) translateY(-48%);
position: absolute;
top: 48%;
right: 20px;
}



/* ------------------------------------------
	aside ／ 広告枠
------------------------------------------ */
aside{
padding: 0 15px;
margin: 0 auto;
}
.bnr_contents{
padding: 20px 0;
display: flex;
flex-wrap:wrap;
justify-content: space-between;
align-items: center;
flex-direction: column;
gap: 15px;
}
.bnr_contents li{
text-align: center;
}
.bnr_contents li img{
width:100%;
max-width: 460px;
}

/*広告*/
.bnr_ad{
margin: 15px 0;
text-align: center;
}
.bnr_ad img{
width:100%;
max-width: 460px;
}






/* ------------------------------------------
	StoreInfo ／ 店舗のご案内
------------------------------------------ */
#StoreInfo{
}

.store_unit h4 {
    margin-bottom: 10px;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
}
.store_unit h4 span {
    display: block;
    margin-bottom: 2px;
    font-size: 14px;
    font-weight: normal;
}

.store_name{
padding: 5px;
margin: 0 0 20px 0;
font-size: 1.2em;
color: #124089;
font-weight: 600;
text-align: center;
border-bottom:solid 1px #124089;
}
/*九州個人旅行営業部　eネットデスク*/
.store_enet{
display: flex;
flex-direction: column; 
justify-content: center;
align-items: baseline;
margin: 0 0 20px 0;
}
.store_enet dt{
font-size: 1.1em;
font-weight: 600;
color: #124089;
padding-bottom: 2px;
}
.store_enet dt::before{
content: "■";
color: #124089;
}
.store_enet dd{
line-height: 1.5;
padding:0 0 20px 1.05em;
}
.store_enet div{
padding: 20px 0 0 0;
}

.store_tel{
font-size: 1.2em;
font-weight: 600;
letter-spacing: 1px;
}
.store_fukuoka{
display: inline-block;
padding: 5px 0 0 0;
font-weight: 600;
color: #124089;
}

/*その他カウンター店舗のご案内*/
.store_list{
 display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 15px;
}
.store_list li{
width: calc(100% / 2 - 15px);
}
/*
.store_list li:last-child{
width: 96%;
}
*/
.store_list a{
display:block;
padding: 15px 0 15px 2px;
border-radius: 6px;
background: #124089;
font-size: 1.1em;
font-weight: 600;
letter-spacing: 2px;
color: #fff;
text-align: center;
}


.banner_long {
    margin: 1.5em 0 0;
    text-align: center;
}
.banner_long img {
    width: 100%;
}

.campaign_area {
    width: 100%;
    margin: 20px auto 0;
    padding-bottom: 20px;
    /*background: #F3BF1F;*/
}
.campaign_area h4 {
    color: #FD6600;
	font-weight: bold;
	font-size: 20px;
	text-align: center;
}
.campaign_area img{
    width: 100%;
}
.campaign_area ul {
    margin: 10px 0 0;
}
.campaign_area ul li {
    width: 90%;
    margin: 0 auto 15px;
    text-align: center;
}
.campaign_area ul li div {
	padding: 15px 10px 10px;
	background: #B4E1F8;
	font-weight: bold;
	font-size: 16px;
}
.campaign_area ul li:last-child {
    margin-bottom: 0;
}
.campaign_area ul li:last-child div {
	background: #FFEE57;
}

} /* media screen style end*/





















/* 
 pc　760px以上
================================================================================================ 
*/

@media screen and (min-width: 760px),print {
/* CSS */
#wrapper {line-height: 1.231;}
#dirPathBlock,
h1,
.iframe_end-content_gadget,
#anchorLinkBlock{
	width: 100%;
	max-width:970px;
	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: 970px;
    margin: 0 auto 5px;
}
h2 {
}
.inner{
	width: 96%;
	max-width:970px;
	margin: 0 auto;
	padding:50px 0;
	display: block;
	font-size: 14px;
}
u{text-decoration-color: red;}

/*------------------------------
Important news
------------------------------*/
#newsImportant{
	width: 100%;
	max-width: 970px;
	margin: 0 auto;
	margin-bottom: 10px;
	display:flex;
}
#newsImportant dt{
	width: 72px;
    height: fit-content;
	background: #e62d2d;
	color: #FFF;
	text-align: center;
	border-radius: 3px;
	margin-top: 1px;
	padding: 3px 0;
}
#newsImportant dd{
	width: 100%;
	padding: 0 10px;
}
#newsImportant li{
	padding: 3px 3px 3px 12px;
	position: relative;
}
#newsImportant li:nth-of-type(n+2){border-top: 1px dotted #ccc;}
#newsImportant li:before{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 6px solid #555555;
	border-right: 0;
    position: absolute;
	top: 7px;
	left: 0;
}


/* ------------------------------------------
	title
------------------------------------------ */
#title{
position: relative;
margin: 0;
padding: 0;
color: #fff;
}
.scroll-infinity:nth-child(1){
margin-bottom: 86px;
}
.scroll-infinity__item img{
  width: calc(100vw / 7);
}
.scroll-infinity__list.scroll-infinity__list--left.scroll-infinity-big .scroll-infinity__item img {
  width: 500px;
}
#title .title_wrap{
position: absolute;
left: 50%;
top:418px;
transform: translate(-50%,-50%);
display: flex;
flex-wrap:wrap;
justify-content: center;
align-items: center;
width:100%;
background: #df062f;
}
#title .logo_akafu{
margin: -5px 36px 5px 0;
width: 208px;
height:86px;
}
#title h2{
line-height: 1.3;
letter-spacing: 0.5px;
font-size: 30px;
font-weight: 600;
}
#title .leadtxt{
font-size: 17px;
}


/* ------------------------------------------
	common
------------------------------------------ */
.headline {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 30px;
	font-weight: 600;
	text-align: center;
	padding-bottom: 40px;
	letter-spacing:2px;
	text-indent: 2px;
	color: #222;
}

.headline::before,
.headline::after {
	content: '';
	width: 40px;
	height: 5px;
	background-color: #df062f;
}

.headline::before {
	margin-right: 20px;
}
.headline::after {
	margin-left: 20px;
}


/* ------------------------------------------
	navi 
------------------------------------------ */
nav{
width: min(100%, 950px);
margin: 30px auto 0 auto;
}
.cp_actab input,
.cp_actab label {
display: none;
}

.nav_link{
display: flex;
justify-content: center;
align-items: center;
padding: 15px 0;
}
.nav_link li a{
padding: 8px 12px;
color: #222;
font-size: clamp(14px, 1.8vw, 18px);
text-align: center;
border-radius: 6px;
}
.nav_link li {
position: relative;
margin: 10px 15px;
}
.nav_link li::after {
content:"";
width:1px;
height:30px;
background: #ccc;
position: absolute;
right:-15px;
top:50%;
transform: translateY(-50%);
}
.nav_link li:last-child::after {
content:"";
width: 0;
}
.nav_link li a:hover{
opacity: 1;
color: #fff;
font-size: 18px;
text-align: center;
border-radius: 6px;
background: #df062f;
transition: all 0.2s;
}



/* ------------------------------------------
	WhatNew  ／ 新着情報
------------------------------------------ */
#WhatNew .news_box{
width:min(100% , 950px);
margin: 0 auto;
display: flex;
}
#WhatNew h3{
width: min(6em, 145px);
min-width: 5em;
margin-left: 25px;
position: relative;
display: inline-block;
font-size: 22px;
font-weight: 600;
padding-left: 1em;
}
#WhatNew h3::before{
content: "";
position: absolute;
top: 8px;
left: 0;
width: 12px;
height: 12px;
border-radius: 50%;
background: #df062f;
}

.news_list{
display: flex;
flex-wrap:wrap;
justify-content: center;
align-items: baseline;
max-width: 770px;
width: calc(100% - 145px);
padding-right: 15px;
}
.news_list dt{
width: 90px;
padding: 2px;
margin-right: 15px;
text-align: center;
color: #fff;
background: #675047;
}
.news_list dd{
width: calc(100% - 110px);
line-height: 1.5;
padding-bottom: 15px;
}
.news_list dd a{
text-decoration: underline;
color: #222;
}
.news_list dd a:hover{
opacity: 1;
color: #df062f;
}




/* ------------------------------------------
	Recommend ／ おすすめ特集
------------------------------------------ */
#Recommend{
background: #f8f6f0;
}
.reco_searchbox{
width:min(100% , 950px);
position: relative;
padding: 0;
margin: 0 auto;
background: #fff;
-webkit-filter:drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.1));
-moz-filter:drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.1));
 -ms-filter:drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.1));
 filter:drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.1));
 }
.reco_searchbox::after{
content: "";
position: absolute;
left: 50%;
bottom: -20px;
width: 0;
height: 0;
border-left: min(46.5vw , 475px) solid transparent;
border-right: min(46.5vw , 475px) solid transparent;
border-top: 20px solid #fff;
transform: translateX(-50%);
}
.reco_listbox{
width:min(100% , 950px);
margin: 0 auto;
}
.reco_search{
padding:20px 25px 0 25px;
}
.reco_travelstyle{
padding:25px 25px 20px 25px;
}
.reco_search h3,
.reco_travelstyle h3{
position: relative;
display: inline-block;
font-size: 22px;
font-weight: 600;
padding-left: 1em;
}
.reco_search h3::before,
.reco_travelstyle h3::before{
content: "";
position: absolute;
top: calc(50% - 6px);
left: 0;
width: 12px;
height: 12px;
border-radius: 50%;
background: #df062f;
}
.reco_search h3 small {
padding-left: 1em;
font-size: 18px;
}
.reco_search ul,
.reco_travelstyle ul{
padding: 15px 20px 10px 20px;
display: flex;
 flex-wrap:wrap;
 gap:16px 20px;
}
.radiobutton {
  display: none;
}
.reco_search span {
min-width: 6em;
display: inline-block;
border:solid 1px #222;
border-radius: 6px;
text-align: center;
color: #222;
background: #fff;
padding: 7px 10px;
}
.reco_search span:hover{
cursor: pointer;
background: #df062f;
border:solid 1px #df062f;
color: #fff;
transition: all 0.2s;
}
.reco_search .radiobutton:checked + span {
background: #df062f;
border:solid 1px #df062f;
color: #fff;
}
.reco_travelstyle span {
min-width: 8em;
display: inline-block;
padding: 7px 10px;
border:solid 1px #222;
border-radius: 6px;
text-align: center;
color: #222;
}
.reco_travelstyle span:hover{
cursor: pointer;
background: #df062f;
border:solid 1px #df062f;
color: #fff;
transition: all 0.2s;
}
.reco_travelstyle .radiobutton:checked + span {
background: #df062f;
border:solid 1px #df062f;
color: #fff;
}

.reco_list{
margin: 60px auto 0 auto;
display: flex;
flex-wrap: wrap;
gap: 18px;
}
.reco_list li{
padding: 10px 12px;
width:200px;
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.1);
line-height: 1.5;
background: #fff;
}
.reco_list li img{
width: 100%;
aspect-ratio: 4 / 3;
}
.reco_list li:hover{
transform: translate3d(0.1rem, 0.1rem, 0);
transition: all 0.2s;
}
.reco_list li dt{
font-weight: 600;
padding: 10px 0;
}


/* ------------------------------------------
	Areamap ／ 九州・沖縄のご紹介
------------------------------------------ */
#Areamap {
}
/*地図*/
.map_wrap{
margin:0 auto;
max-width:950px;
overflow: hidden;
}
.map_kyushu{
float: right;
position: relative;
width:min(54.31578% , 516px);
}
.map_kyushu img{
width: 100%;
}
.map_rito{
float: left;
position: relative;
margin-top: 38px;
width:min(44.21052% , 420px);
}
.map_rito img{
width: 100%;
}
.map_okinawa{
float: left;
position: relative;
margin-top: 53px;
width:min(44.21052% , 420px);
}
.map_okinawa img{
width: 100%;
}

/*モーダル内*/
.modal__content{
text-align: center;
line-height: 1.5;
width: 50%;
max-width: 780px;
}
.modal_areaname{
font-size:1.8em;
font-weight: 600;
padding-bottom: 10px;
}
.modal_bt a:hover{
transform: translate3d(0.1rem, 0.1rem, 0);
transition: all 0.2s;
}

.modal_close{
position: absolute;
right:-10px;
top:-45px;
color: #fff;
font-size: 40px;
cursor: pointer;
}
.modal_close a:visited{
color: #fff;
}




/* ------------------------------------------
	TravelInfo ／ 旅行情報
------------------------------------------ */
#TravelInfo{
background: #f8f6f0;
}

/*YouTube*/
.youtube_new{
margin: 0 auto;
width:min(100% , 950px);
aspect-ratio: 16 / 9;
}
.youtube_new p span{
font-weight: 600;
padding-right: 5px;
}
.youtube_new iframe{
width:100%;
height:100%;
margin-bottom: 5px;
}
.youtube_normal,
.youtube_shorts{
margin: 20px auto;
width:min(100% , 950px);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
font-weight: 600;
}
.youtube_normal li,
.youtube_shorts li{
position: relative;
width:min(32% , 300px);
}
.youtube_normal li img,
.youtube_shorts li img{
width:min(100% , 300px);
}
.youtube_normal li::before{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
aspect-ratio: 5 / 3;
background: url("../images/ico_play.png") no-repeat 50% 50%;
background-size: 300px;
}
.youtube_shorts li::before{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
aspect-ratio: 5 / 3;
background: url("../images/ico_play_shorts.png") no-repeat 50% 50%;
background-size: 300px;
}
.modal-video{
background: rgba(0,0,0,0.8);
}
.modal-video-close-btn {
width: 30px;
height: 30px;
top: -30px;
right: 0;
}
.js-modal-btn:hover{
cursor: pointer;
opacity: 0.8;
transform: translate3d(0.1rem, 0.1rem, 0);
transition: all 0.2s;
}

/*Tripa
-----------------------------------------*/
.tripalist{
width: 100%;
border-top: dashed 1px #ccc;
margin: 45px auto;
}

.tripalist li{
display: flex;
align-items: flex-start;
padding: 15px 10px 15px 15px;
border-bottom: dashed 1px #ccc;
line-height: 1.5;
transition: 0.2s;
}
.tripalist li dt{
margin-bottom: 5px;
padding:0;
font-size: 18px;
font-weight: 600;
line-height: 1.7;
}
.tripalist li dt .tripa_area{
width: 4em;
background: #675047;
color:#fff;
letter-spacing: 0.6em;
text-align: center;
font-size: 14px;
font-weight: 100;
padding: 5px 0.5em 5px 1.1em;
}
.tripalist li img{
width: 200px;
margin-right: 20px;
}
.tripalist li:hover{
transform: translate3d(0.1rem, 0.1rem, 0);
transition: all 0.2s;
}



/*SNS
-----------------------------------------*/
.SNSlist{
display: flex;
justify-content: center;
gap: min(3%, 30px);
}
.SNSlist li{
width: 160px;
padding: 15px 10px;
border-radius: 6px;
background: #fff;
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.1);
line-height: 1.5;
text-align: center;
transition: 0.2s;
}
.SNSlist li img{
width: 90px;
}
.SNSlist li dt{
padding:10px 0 5px 0; 
font-weight: 600;
border-bottom: solid 1px #ccc;
}
.SNSlist li dd{
padding-top:12px; 
}
.SNSlist li:hover{
transform: translate3d(0.1rem, 0.1rem, 0);
transition: all 0.2s;
}





/* ------------------------------------------
	DigitalPamphlet ／ デジタルパンフレット
------------------------------------------ */
#DigitalPamphlet{
}
.digpan_list{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap:min(3%, 42px);
}
.digpan_list li{
padding: 0;
width:calc(80% / 4);
line-height: 1.5;
background: #fff;
}
.digpan_list li img{
width: 100%;
height: auto;
box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2);
}
.digpan_list li:hover{
transform: translate3d(0.1rem, 0.1rem, 0);
transition: all 0.2s;
}
.digpan_list li p{
font-weight: 600;
padding: 15px 0;
text-align: center;
}

.digpan_bt a{
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
margin: 20px auto;
padding: 20px 25px;
border-radius: 6px;
background: #df062f;
font-size: 18px;
font-weight: 600;
color: #fff;
width:60%;
}
.digpan_bt a::after {
content: '';
width: 8px;
height: 8px;
border-top: 3px solid #fff;
border-right: 3px solid #fff;
transform: rotate(45deg) translateY(-48%);
position: absolute;
top: 48%;
right: 20px;
}
.digpan_bt a:hover{
transform: translate3d(0.1rem, 0.1rem, 0);
transition: all 0.2s;
}


/* ------------------------------------------
	aside ／ 広告枠
------------------------------------------ */
aside{
max-width:950px;
margin: 0 auto;
}
/*２列並びのバナー*/
.bnr_contents{
margin: 0 auto;
padding: 30px 0;
display: flex;
flex-wrap:wrap;
justify-content: center;
align-items: center;
gap: 20px 30px;
}
.bnr_contents li{
width:calc(90% / 2);
}
.bnr_contents li img{
width:min(100%, 460px);
}
.bnr_contents li:hover{
transform: translate3d(0.1rem, 0.1rem, 0);
transition: all 0.2s;
}
/*広告*/
.bnr_ad{
margin: 30px 0;
text-align: center;
}
.bnr_ad img{
width:min(70%, 640px);
}

.bnr_ad:hover{
transform: translate3d(0.1rem, 0.1rem, 0);
transition: all 0.2s;
}




/* ------------------------------------------
	StoreInfo ／ 店舗のご案内
------------------------------------------ */
#StoreInfo{
}

.store_box {
    display: flex;
    justify-content: space-between;
}
.store_unit {
    width: 48%;
}
.store_unit h4 {
    margin-bottom: 15px;
    font-size: 18px;
    text-align: center;
    font-weight: bold;
}
.store_unit h4 span {
    display: block;
    margin-bottom: 2px;
    font-size: 16px;
    font-weight: normal;
}
.store_unit:nth-of-type(2) h4 {
    margin-top: -22px;
}


.store_name{
padding: 5px;
margin: 0 0 30px 0;
font-size: 22px;
color: #124089;
font-weight: 600;
text-align: center;
border-bottom:solid 1px #124089;
}
/*九州個人旅行営業部　eネットデスク*/
.store_enet{
display: flex;
flex-wrap:wrap;
justify-content: center;
align-items: baseline;
max-width: 800px;
margin: 0 auto;
padding: 0 20px 30px 20px;
}
.store_enet dt{
width:6em;
font-size: 16px;
font-weight: 600;
color: #124089;
}
.store_enet dd{
width: calc(100% - 8em);
line-height: 1.5;
padding-bottom: 20px;
}
.store_enet div{
padding: 20px 0 0 0;
}

.store_tel{
font-size: 16px;
font-weight: 600;
letter-spacing: 2px;
}
.store_fukuoka{
display: inline-block;
padding: 5px 0 0 0;
font-size: 16px;
font-weight: 600;
color: #124089;
}

/*その他カウンター店舗のご案内*/
.store_list{
display: flex;
flex-wrap:wrap;
/*justify-content: center;*/
gap: 20px;
}
.store_list li{
width: calc(100% / 2 - 20px);
}
.store_list a{
/*display: block;
padding: 18px 0;*/
border-radius: 6px;
background: #124089;
font-size: 18px;
font-weight: 600;
color: #fff;
letter-spacing: 5px;
text-align: center;
width: 100%;
height: 4em;

display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: center;
-ms-align-items: center;
align-items: center;
}
.store_list{
}
.store_list li:hover{
transform: translate3d(0.1rem, 0.1rem, 0);
transition: all 0.2s;
}


.banner_long {
    margin: 1.5em 0 0;
    text-align: center;
}


.campaign_area {
    width: 970px;
    margin: 30px auto 0;
    padding-bottom: 30px;
    /*background: #F3BF1F;*/
}
.campaign_area h4 {
    color: #FD6600;
	font-weight: bold;
	font-size: 25px;
	text-align: center;
}
.campaign_area img{
    width: 100%;
}
.campaign_area ul {
    display: flex;
    justify-content: space-around;
    margin: 20px 0 0;
}
.campaign_area ul li {
    width: 45%;
}
.campaign_area ul li div {
	padding: 20px;
	background: #B4E1F8;
	font-weight: bold;
	font-size: 18px;
	text-align: center;
}
.campaign_area ul li:last-child div {
	background: #FFEE57;
}

} /* media screen style end*/