@charset "utf-8";

/********** 【仮】 サイトの定義 **********

使用する文字サイズ：
10px
12px
14px
16px（基本）
18px（中サイズ見出し）
20px（特例:TOPの検索するボタンなど）
24px（特例:TOPのエリア検索・駅検索など）
28px（大サイズ見出し）

空白の使用サイズ：
10px
20px
40px（基本）
60px
120px（大見出しの段落ごと）

*******************************/


html {
	scroll-behavior: smooth;
}

body {
	font-family: "YakuHanJP","Roboto","Noto Sans JP",Meiryo,sans-serif;
	margin: 0;
	color: #333;
	font-size: 14px;
}

.only_sp { display:none; }

img { display:block; }

a { /*display:block;*/ width:100%; color:#ff0080; text-decoration:underline; }
a:hover { color:#FF329C; text-decoration:none; }
a:active, a:focus { outline:0; }

a img:hover { opacity:0.8; transition: 0.5s; }

strong{ font-weight:normal; }

div {
	margin: 0;
	padding: 0;
	font-size: 0;
}

div::after {
   content: "";
   display: block;
   clear: both;
}

p {
	margin: 0 0 10px 0;
	padding: 0;
	font-size: 14px;
}

ul {
	margin: 0;
	padding: 0;
	font-size: 0;
}

li {
	list-style: none;

	font-size: 14px;
}

rt {	/* ふりがな */
	font-size: 0.4em;
}


.clear { clear:both; }

header {
	position: fixed;
	top: 0;
	background-color: rgba(255,255,255,0.9);
	z-index: 9999;

	width: 100%;
	border-bottom: 1px solid #ccc;
}

header .head {
	width: 1200px;
	margin: 0 auto;
	padding: 10px 0;
}

h2 {
	font-size: 32px;
	margin: 0 0 40px 0;
	text-align: center;
}

h2 i {
	margin-right: 7.5px;
}

h2 i.Orange { color: #ff9600; }
h2 i.Pink { color: #ff66c4; }
h2 i.Green { color: #00b900; }
h2 i.Purple { color: #a54cff; }
h2 i.Blue { color: #38b6ff; }

h2 i.Red { color: #e50000; }


h2 span {
	color: #ff66c4;
}



header .head .logo,
header .head .current,
header .head nav {
	display: inline-block;
	vertical-align: middle;
}


/*** ヘッダー左：ロゴ ***/

header .head .logo {
	float: left;
}

header .head .logo h1 {

}

header .head .logo h1 img {
	height: 98px;
	margin: 0;
}

header .head .logo h1 a img:hover { opacity:unset; transition:unset; }


/************************************
/* メインナビゲーション
************************************/
header .head .hb_areaLink {
	position: relative;
	left: calc(79px / 3);

	float: left;

	width: 464px;
	height: 98px;
}

header .head .hb_areaLink ul {
	font-size: 0;
}

header .head .hb_areaLink ul li {
	float:left;
	list-style:none;
	width:108px;
	margin-right: 10px;
	margin-bottom: 10px;
	font-size: 12px;
	font-weight: bold;
}
header .head .hb_areaLink ul li:nth-child(4n) {
	margin-right: 0;
}
header .head .hb_areaLink ul li:nth-last-child(-n+4) {
	margin-bottom: 0;
}

header .head .hb_areaLink ul li a{
	text-decoration: none;
	display: block;
	width: 110px;
	height: 44px;
}


/* 1番目（那覇）・3番目（宮古島）・6番目（石垣島）のみに適用 */
header .head .hb_areaLink ul li:nth-child(1) a,
header .head .hb_areaLink ul li:nth-child(3) a,
header .head .hb_areaLink ul li:nth-child(6) a {
	line-height: 34px;
}


/********** ▼ ▼ ▼ 修正後、ボタン文字を2行にする ⇒ この8行は削除する ▼ ▼ ▼ **********/
/* 2番目（那覇空港）・4番目（宮古空港）・5番目（下地島空港）・7番目（新石垣空港）のみに適用 */
header .head .hb_areaLink ul li:nth-child(2) a,
header .head .hb_areaLink ul li:nth-child(4) a,
header .head .hb_areaLink ul li:nth-child(5) a,
header .head .hb_areaLink ul li:nth-child(7) a {
	line-height: 34px;
}
/********** ▲ ▲ ▲ 修正後、ボタン文字を2行にする ⇒ この8行は削除する ▲ ▲ ▲ **********/


header .head .hb_areaLink ul li a.button {
	position: relative;
	-webkit-perspective: 9999px;
	perspective: 9999px;
}
header .head .hb_areaLink ul li a.button span {
	display: block;
	position: absolute;
	width: 110px;
	height: 44px;
	padding: 5px;
	border: 1px solid;
	text-align: center;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
	pointer-events: none;

	border-radius: 4px;
}

header .head .hb_areaLink ul li a.button span:nth-child(1) {
	background-color: #fff;
	-webkit-transform: rotateX(90deg);
	-moz-transform: rotateX(90deg);
	transform: rotateX(90deg);
	-webkit-transform-origin: 50% 50% -22px;
	-moz-transform-origin: 50% 50% -22px;
	transform-origin: 50% 50% -22px;
}

/*
header .head .hb_areaLink ul li a.button span:nth-child(1) font {
	color: #ff0080;
}
*/

header .head .hb_areaLink ul li a.button span:nth-child(2) {
	color: #fff;
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
	-webkit-transform-origin: 50% 50% -22px;
	-moz-transform-origin: 50% 50% -22px;
	transform-origin: 50% 50% -22px;
}

header .head .hb_areaLink ul li a.button:hover span:nth-child(1) {
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
}
header .head .hb_areaLink ul li a.button:hover span:nth-child(2) {
	color: #fff;
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
}

header .head .hb_areaLink ul li a.button span font {
	font-size: 10px;
	font-weight: normal;
}


/* ボタン別カラー設定 */
header .head .hb_areaLink ul li:nth-child(1) a.button span { border-color: #ff9600; }
header .head .hb_areaLink ul li:nth-child(1) a.button span:nth-child(1) { color: #ff9600; }
header .head .hb_areaLink ul li:nth-child(1) a.button span:nth-child(2) { background-color: #ff9600; }
header .head .hb_areaLink ul li:nth-child(1) a.button:hover span:nth-child(2) { background-color: #ff9600; }

header .head .hb_areaLink ul li:nth-child(2) a.button span { border-color: #38b6ff; }
header .head .hb_areaLink ul li:nth-child(2) a.button span:nth-child(1) { color: #38b6ff; }
header .head .hb_areaLink ul li:nth-child(2) a.button span:nth-child(2) { background-color: #38b6ff; }
header .head .hb_areaLink ul li:nth-child(2) a.button:hover span:nth-child(2) { background-color: #38b6ff; }

header .head .hb_areaLink ul li:nth-child(3) a.button span { border-color: #38b6ff; }
header .head .hb_areaLink ul li:nth-child(3) a.button span:nth-child(1) { color: #38b6ff; }
header .head .hb_areaLink ul li:nth-child(3) a.button span:nth-child(2) { background-color: #38b6ff; }
header .head .hb_areaLink ul li:nth-child(3) a.button:hover span:nth-child(2) { background-color: #38b6ff; }

header .head .hb_areaLink ul li:nth-child(4) a.button span { border-color: #38b6ff; }
header .head .hb_areaLink ul li:nth-child(4) a.button span:nth-child(1) { color: #38b6ff; }
header .head .hb_areaLink ul li:nth-child(4) a.button span:nth-child(2) { background-color: #38b6ff; }
header .head .hb_areaLink ul li:nth-child(4) a.button:hover span:nth-child(2) { background-color: #38b6ff; }

header .head .hb_areaLink ul li:nth-child(5) a.button span { border-color: #38b6ff; }
header .head .hb_areaLink ul li:nth-child(5) a.button span:nth-child(1) { color: #38b6ff; }
header .head .hb_areaLink ul li:nth-child(5) a.button span:nth-child(2) { background-color: #38b6ff; }
header .head .hb_areaLink ul li:nth-child(5) a.button:hover span:nth-child(2) { background-color: #38b6ff; }

header .head .hb_areaLink ul li:nth-child(6) a.button span { border-color: #38b6ff; }
header .head .hb_areaLink ul li:nth-child(6) a.button span:nth-child(1) { color: #38b6ff; }
header .head .hb_areaLink ul li:nth-child(6) a.button span:nth-child(2) { background-color: #38b6ff; }
header .head .hb_areaLink ul li:nth-child(6) a.button:hover span:nth-child(2) { background-color: #38b6ff; }

header .head .hb_areaLink ul li:nth-child(7) a.button span { border-color: #38b6ff; }
header .head .hb_areaLink ul li:nth-child(7) a.button span:nth-child(1) { color: #38b6ff; }
header .head .hb_areaLink ul li:nth-child(7) a.button span:nth-child(2) { background-color: #38b6ff; }
header .head .hb_areaLink ul li:nth-child(7) a.button:hover span:nth-child(2) { background-color: #38b6ff; }

header .head .hb_areaLink ul li:nth-child(8) a.button span { border-color: #ff66c4; }
header .head .hb_areaLink ul li:nth-child(8) a.button span:nth-child(1) { color: #ff66c4; }
header .head .hb_areaLink ul li:nth-child(8) a.button span:nth-child(2) { background-color: #ff66c4; }
header .head .hb_areaLink ul li:nth-child(8) a.button:hover span:nth-child(2) { background-color: #ff66c4; }


/*** 加盟店数・プラン数・口コミ数・登録車両数 ***/

header .head .current {
	position: relative;
	top: 0;
	left: calc(79px / 3 + 79px / 3);

	height: 86px;

	border: 1px dashed #ccc;
	padding: 5px 10px;
}

header .head .current ul {

}

header .head .current ul li {
	display: block;
	margin-bottom: calc( -2px / 3);
	font-size: 12px;
}
header .head .current ul li:last-child {
	margin-bottom: 0;
}

header .head .current ul li i {
	width: 13.75px;
	margin-right: 5px;
	text-align: center;
}

header .head .current ul li span {
	margin: 0 3px;
	font-size: 18px;
}


header .head .current ul li:nth-child(1) i { color: #ff9600; }
header .head .current ul li:nth-child(1) span { color: #ff9600; }

header .head .current ul li:nth-child(2) i { color: #00b900; }
header .head .current ul li:nth-child(2) span { color: #00b900; }

header .head .current ul li:nth-child(3) i { color: #a54cff; }
header .head .current ul li:nth-child(3) span { color: #a54cff; }

header .head .current ul li:nth-child(4) i { color: #38b6ff; }
header .head .current ul li:nth-child(4) span { color: #38b6ff; }



/*** ヘッダー右：ナビボタン ***/

header .head nav {
	float: right;

	font-size: 0;
}

header .head nav ul {
}

header .head nav ul li {
	display: inline-flex;
	width: 71px;
	height: 57px;
	margin-right: 10px;
	font-size: 10px;
	font-weight: bold;
	border: 1px solid #7e7e7e;
	border-radius: 6px;
	text-align: center;

	vertical-align: middle;
}

header .head nav ul li:last-child {
	margin-right: 0;
}

header .head nav ul li:hover {
	border: 1px solid #ff0080;
}

header .head nav ul li a {
	display: block;
	position: relative;
	top: 0;
	left: 0;
	width: 100%;

	padding: 9.5px 5px;
	color: #7e7e7e;
	text-decoration: none;
}

header .head nav ul li a:hover {
	color: #ff0080;
	transition: 0.15s;
}

header .head nav ul li a i.fa-solid {
	display: block;
	margin-bottom: 5px;
	font-size: 18px;
	text-decoration: none;
}

header .head nav p {
	margin: 10px 0 0 0;
	text-align: center;
}

header .head nav p a.point {
	margin: 0 3px;
	font-size: 24px;
	font-weight: bold;
	color: #ff0080;
	border-bottom: 2px solid #ff0080;
	text-decoration: none;
}
header .head nav p a.point:hover {
	text-decoration: none;
}




/*** #id リンク時に開く上下位置の調整 ***/




/*** パンくずリスト ***/

#breadcrumb {
	width: 100%;
	padding: 5px 0;
	background: #eee;
	margin-top: 120px;
	border-bottom: 1px solid #ccc;
}

#breadcrumb ul {
	width: 1200px;
	margin: 0 auto;
}

/*
#breadcrumb ul::after {
	float: right;
	content: "※当ページには広告を含む場合があります";

	display: inline-flex;
	font-size: 12px;
	line-height: 18px;
}
*/

#breadcrumb ul li {
	display: inline-flex;
	font-size: 12px;

	line-height: 18px;
}

#breadcrumb ul li::after {
	content: '\f105';
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	color: #999;

	margin: 0 7.5px;
}

#breadcrumb ul li:last-child::after {
	content: '';
}

#breadcrumb ul li a {
	color: #333;
	text-decoration: none;
}
#breadcrumb ul li a:hover {
	color: #ff0080;
	text-decoration: underline;
}

#breadcrumb ul li a i {
	margin-right: 5px;
	color: #999;

	transform: scaleX(-1);	/* 左右反転 */
}




/************************************************************
 レビュー星 （ 全ページ共通 ）
 ※「.star5_rating」以外のレビュー星CSS は、
　star5_rating.css に記載。
************************************************************/

.star5_rating {
    position: relative;
    z-index: 0;
    display: inline-block;
    white-space: nowrap;

	margin-right: 5px;
	line-height: 29px; /* 星の右に表示される数字の文字サイズが24px（=高さ29pxになる）のため。*/
	font-size: 18px;
    color: #ddd;

	vertical-align: middle;
}




/***** メインコンテンツ（全体） *****/

main {
	width: 100%;
}




/************************************************************
　メイン領域 （ 全ページ共通 ）
************************************************************/

#main_Region {
	width: 1200px; /* サイド広告を置く場合 1560px */
	margin: 0 auto;
}


/*** 自社PRバナー広告枠（上段） ***/
.myAppeal_topBanner {
	width: 960px;
	margin: 80px auto -40px;
}

.myAppeal_topBanner ul {

}

.myAppeal_topBanner li {
	margin-bottom: 0;
}


/*** VIPバナー広告枠 ***/
.vipBanner {
	width: 960px;
	margin: 120px auto 0;
}

.vipBanner ul {

}

.vipBanner li {
	margin-bottom: 0;
}


/*** 自社PRバナー広告枠（中段） ***/
.myAppeal_middleBanner {
	width: 960px;
	margin: 120px auto 0;
}

.myAppeal_middleBanner ul {

}

.myAppeal_middleBanner li {
	margin-bottom: 0;
}


/*** プレミアム契約店バナー広告枠 ***/
.premiumBanner {
	width: 960px;
	margin: 120px auto;
}

.premiumBanner ul {

}

.premiumBanner li {
	margin-bottom: 0;
}


/*** 自社PRバナー広告枠（下段） ***/
.myAppeal_bottomBanner {
	width: 960px;
	margin: 0 auto 120px;
}

.myAppeal_bottomBanner ul {

}

.myAppeal_bottomBanner li {
	margin-bottom: 0;
}




/*** 【フォント読み込み】 Impactフォント ***/
@font-face {
	font-family:Impact;
	src:url('../../fonts/impact.ttf') format("truetype");
}




/************************************************************
　メイン領域 （ トップページ ）
************************************************************/

/********** 店舗イチオシ！超おすすめ最強プラン（各ページ最下部に追従あり） **********/

#recommend {
	width: 1200px;
	margin: 120px auto 0;
}

#recommend h2 {
	background: linear-gradient(45deg, #ff9600 15%, #ff66c4 35%, #51FF51 55%, #a54cff 75%, #38b6ff 95%);
	background: -webkit-linear-gradient(45deg, #ff9600 15%, #ff66c4 35%, #51FF51 55%, #a54cff 75%, #38b6ff 95%);
	background-size: 240% auto;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: gradientEffect 1.5s infinite alternate;
}
@keyframes gradientEffect {
	from { background-position: left }
	to { background-position: right }
}


#recommend .swiper-slide {
	position: relative;
	display: inline-block;
	width: calc(100% / 4 - 68px / 4);
	/* height: 681px; */
	margin-right: 20px;
	border-radius: 6px;
	background: #fff;

	/* ↓ Swiperの仕様上、外枠を付けるとズレ込むため、outline（内側線）で対応 ↓ */
	outline: 1px solid #a54cff;
	outline-offset: -1px;
	/* ↑ Swiperの仕様上、外枠を付けるとズレ込むため、outline（内側線）で対応 ↑ */

	z-index: 1;
}

#recommend .swiper-slide:hover {

}


/* ↓ 内側に padding を持たせる際、inner 枠を作成しなければ各枠が中央に表示されずズレこむため ↓ */
#recommend .swiper-slide-inner {
	padding: 20px 20px 70px 20px;
}
/* ↑ 内側に padding を持たせる際、inner 枠を作成しなければ各枠が中央に表示されずズレこむため ↑ */


#recommend .swiper-slide .icon_plan {
	margin-bottom: 20px;
}

#recommend .swiper-slide .icon_plan ul {

}


#recommend .swiper-slide .icon_plan ul li {
	display: inline-block;
	width: calc(100% / 5 - 140px / 5);

	letter-spacing: -0.3px;

	margin-right: 20px;
	padding: 5px;
	font-size: 12px;
	text-align: center;
	background: #fff;
	border: 1px solid;

	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#recommend .swiper-slide .icon_plan ul li:nth-child(1) { color:#ff9600; border-color:#ff9600; }
#recommend .swiper-slide .icon_plan ul li:nth-child(2) { color:#ff66c4; border-color:#ff66c4; }
#recommend .swiper-slide .icon_plan ul li:nth-child(3) { color:#00b900; border-color:#00b900; }
#recommend .swiper-slide .icon_plan ul li:nth-child(4) { color:#a54cff; border-color:#a54cff; }
#recommend .swiper-slide .icon_plan ul li:nth-child(5) { color:#38b6ff; border-color:#38b6ff; }

#recommend .swiper-slide .icon_plan ul li.limited { color:#fff; font-weight:bold; background:#e50000; border-color:#e50000 !important; }

#recommend .swiper-slide .icon_plan ul li:last-child {
	margin-right: 0;
}


#recommend .swiper-slide h3 {
	margin: 0 0 20px 0;
	font-size: 18px;
	font-weight: bold;

	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#recommend .swiper-slide:hover h3 {
	color: #8000ff;
	background: -webkit-linear-gradient(270deg, #ff0080, #c850c0 50%, #a54cff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}


#recommend .swiper-slide .left {
	float: left;
	width: 267px;
}

#recommend .swiper-slide .left .image {
	margin-bottom: 10px;
}

#recommend .swiper-slide .left .image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: contain;
	background: #333;
}

#recommend .swiper-slide .left .image img:hover { opacity:unset; }


#recommend .swiper-slide .left .shopInfo {

}

#recommend .swiper-slide .left .shopInfo p {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#recommend .swiper-slide .left .shopInfo p.name {
	margin-bottom: 5px;
	font-weight: bold;
}

#recommend .swiper-slide .left .shopInfo p.address {
	margin: 0;
	font-size: 12px;
}


#recommend .swiper-slide .left .review {
	position: relative;
	height: 17px;
	margin-top: 5px;
	font-size: 12px;
}

#recommend .swiper-slide .left .review a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	color: #ff9600;
	text-decoration: underline;

	z-index: 2;
}
#recommend .swiper-slide .left .review a:hover {
	text-decoration: none;
}

#recommend .swiper-slide .left .review.guest {

}

#recommend .swiper-slide .left .review.member {

}

#recommend .swiper-slide .left .review.member {

}

#recommend .swiper-slide .left .review.member.nonReview {

}





#recommend .swiper-slide .right {
	float: right;
	width: 263px;
}


#recommend .swiper-slide .right .carInfo {
	font-size: 14px;
}

#recommend .swiper-slide .right .carInfo table {
	width: 100%;
	margin-bottom: 1px;
	border-collapse: collapse;
}

#recommend .swiper-slide .right .carInfo table:last-child {
	margin-bottom: 0;
}

#recommend .swiper-slide .right .carInfo table tr {
	border-bottom: solid 2px white;
}

#recommend .swiper-slide .right .carInfo table tr:last-child {
	border-bottom: none;
}


#recommend .swiper-slide .right .carInfo table th {
	position: relative;
	width: 30%;
	padding: 5px 0;
	font-size: 12px;
	font-weight: normal;
	color: white;
	text-align: center;
}
#recommend .swiper-slide .right .carInfo table th:after {
	display: block;
	position: absolute;
	top: calc(50% - 6px);
	right: -6px;
	content: "";

	width: 0px;
	height: 0px;

	border-left: 6px solid;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
}

#recommend .swiper-slide .right .carInfo table:nth-child(1) th { background-color:#ff9600; }
#recommend .swiper-slide .right .carInfo table:nth-child(1) th:after { border-left-color: #ff9600; }

#recommend .swiper-slide .right .carInfo table:nth-child(2) th { background-color:#ff66c4; }
#recommend .swiper-slide .right .carInfo table:nth-child(2) th:after { border-left-color: #ff66c4; }

#recommend .swiper-slide .right .carInfo table:nth-child(3) th { background-color:#00b900; }
#recommend .swiper-slide .right .carInfo table:nth-child(3) th:after { border-left-color: #00b900; }

#recommend .swiper-slide .right .carInfo table:nth-child(4) th { background-color:#a54cff; }
#recommend .swiper-slide .right .carInfo table:nth-child(4) th:after { border-left-color: #a54cff; }

#recommend .swiper-slide .right .carInfo table:nth-child(5) th { background-color:#38b6ff; }
#recommend .swiper-slide .right .carInfo table:nth-child(5) th:after { border-left-color: #38b6ff; }


#recommend .swiper-slide .right .carInfo table td {
	width: 70%;
	padding: 5px 10px 5px 16px;
	text-align: left;
}

#recommend .swiper-slide .right .carInfo table:nth-child(1) td { background-color: #FFE9CC; }
#recommend .swiper-slide .right .carInfo table:nth-child(2) td { background-color: #FFCCEB; }
#recommend .swiper-slide .right .carInfo table:nth-child(3) td { background-color: #CCFFCC; }
#recommend .swiper-slide .right .carInfo table:nth-child(4) td { background-color: #ECDBFF; }
#recommend .swiper-slide .right .carInfo table:nth-child(5) td { background-color: #E0F3FF; }


#recommend .swiper-slide .right .carInfo table td p {
	width: 100%;
	margin: 0;

	display: -webkit-box;
	    -webkit-box-orient: vertical;
	    -webkit-line-clamp: 1;
	    overflow: hidden;
}


#recommend .swiper-slide .right .price {
	margin: 5px 0;
	font-size: 14px;
	text-align: center;

	background-image: linear-gradient(transparent 66.6%, #ffff00 0%)
}

#recommend .swiper-slide .right .price span {
	vertical-align: -6px;

	margin: 0 8px 0 3px;

	font-family: Impact;
	font-style: italic; /* 斜体 */
	font-size: 48px;
	color: #e50000;
}

#recommend .swiper-slide .right .attention {
	font-size: 10px;
	font-weight: bold;
	color: #e50000;

	letter-spacing: -0.4px;
}


#recommend .swiper-slide a {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 0;

	color: #333;
	text-decoration: none;

	z-index: 1;
}

#recommend .swiper-slide p.more {
	position: absolute;
	left: 0;
	bottom: 0;
	width: calc(100% - 32px);
	margin: 0 auto;
	padding: 15px;
	color: #fff;
	background-image: -webkit-linear-gradient(#ff0080 0%, #a54cff 100%);
	background-image: linear-gradient(#ff0080 0%, #a54cff 100%);
	text-align: center;
	border-left: 1px solid #a54cff;
	border-right: 1px solid #a54cff;
	border-radius: 0 0 4px 4px;
}

#recommend .swiper-slide:hover p.more {
	color: #ffff00;
}

#recommend .swiper-slide p.more i {
	margin-right: 5px;
}




/********** ちゅらベル特集（各ページ最下部に追従あり） **********/

#feature {
	margin: 120px auto 0;
}

#feature ul {

}

#feature ul li {
	display: inline-block;
	width: calc(100% / 6 - 100px / 6);
	aspect-ratio: 1 / 1;
	margin-right: 20px;
}

#feature ul li:last-child {
	margin-right: 0;
}

#feature ul li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}




/***** 特集 *****

#special_index {
	margin-bottom: 120px;
}

#special_index .body {
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;

	font-size: 14px;
}

#special_index .container {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	overflow: hidden;
	transform: skew(0deg);
}

#special_index .container .card {
	flex: 1;
	transition: all 1s ease-in-out;
	height: 400px;
	position: relative;

	margin-right: 1px;
}

#special_index .container .card:last-child {
	margin-right: 0;
}

#special_index .container .card a {
	display: unset;
}

#special_index .container .card a .card__head {
	color: #fff;
	background: rgba(255, 150, 0, 0.8);
	padding: 10px 0;
	transform: rotate(-90deg);
	transform-origin: 0% 0%;
	transition: all 0.5s ease-in-out;
	width: 308px;
	min-width: 100%;
	text-align: center;
	position: absolute;
	bottom: 0;
	left: 0;
	font-size: 18px;
	font-weight: bold;
	white-space: nowrap;

	border-radius: 0 0 12px 12px;
}

#special_index .container .card:hover {
	flex-grow: 10;
}

#special_index .container .card:hover a img {
	filter: grayscale(0);
}

#special_index .container .card:hover a .card__head {
	text-align: center;
	bottom: 0;
	color: white;
	background: rgba(0, 0, 0, 0.6);
	font-size: 28px;
	transform: rotate(0deg) skew(0deg);
	border-radius: 0;
}

#special_index .container .card:hover a .card__head span:first-child::after {
	content: "を見る";
}

#special_index .container .card:hover a .card__head span:last-child::after {
	font-family: "Font Awesome 5 Free";
	content: "\f101";
	margin-left: 5px;
	color: #ff9600;
}

#special_index .container .card a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 1s ease-in-out;

	filter: grayscale(1.0);
}

#special_index .container .card a img:hover {
	opacity: 1;
}
*/




/********** 注目のキーワード・空港別リンク・駅別リンク・市町村別リンク・港別リンク **********/

#bottom_link {
	width: 1180px;
	margin: 0 auto;
	padding: 10px;
	margin-bottom: 40px;
	background: #eee;
	border-radius: 6px;
}

#bottom_link.end {
	margin-bottom: 120px;
}

#bottom_link h3 {
	height: 24px;
	line-height: 24px;
	margin: 0 0 10px 0;
	padding: 0 10px;
	font-size: 18px;
	font-weight: bold;
	text-align: unset;
}

#bottom_link:nth-child(1) h3 { border-left: 5px solid #ff66c4; }
#bottom_link:nth-child(2) h3 { border-left: 5px solid #38b6ff; }
#bottom_link:nth-child(3) h3 { border-left: 5px solid #ff9600; }
#bottom_link:nth-child(4) h3 { border-left: 5px solid #00b900; }
#bottom_link:nth-child(5) h3 { border-left: 5px solid #a54cff; }


#bottom_link .inner_white {
	padding: 10px;
	background: #fff;
	border-radius: 6px;
}

#bottom_link .inner_white ul {

}

#bottom_link .inner_white ul li {
	display: inline-block;
	margin-bottom: 10px;
	font-size: 14px;
	text-align: center;
}


#bottom_link .inner_white.keyword ul li { width: calc( 100% / 7 ); }
#bottom_link .inner_white.keyword ul li:nth-last-child(-n+7) { margin-bottom: 0; }

#bottom_link .inner_white.airport ul li { width: calc( 100% / 12 ); }
#bottom_link .inner_white.airport ul li:nth-last-child(-n+12) { margin-bottom: 0; }

#bottom_link .inner_white.station ul li { width: calc( 100% / 10 ); }
#bottom_link .inner_white.station ul li:nth-last-child(-n+10) { margin-bottom: 0; }

#bottom_link .inner_white.city ul li { width: calc( 100% / 14 ); }
#bottom_link .inner_white.city ul li:nth-last-child(-n+14) { margin-bottom: 0; }

#bottom_link .inner_white.seaport ul li { width: calc( 100% / 7 ); }
#bottom_link .inner_white.seaport ul li:nth-last-child(-n+7) { margin-bottom: 0; }


#bottom_link .inner_white ul li a { color:#777; }
#bottom_link .inner_white ul li a:hover { color:#999; }




.pr_groupsite {
	width: 1200px;
	margin: 0 auto 40px;
}

.pr_groupsite ul {
	text-align: center;
}

.pr_groupsite ul li {
	display: inline-block;
	width: 296px;
	margin-right: 40px;
}

.pr_groupsite ul li:last-child {
	margin-right: 0;
}

.pr_groupsite ul li p {
	margin-bottom: 5px;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
}

.pr_groupsite ul li a {
	display: block;
}

.pr_groupsite ul li a img {
	width: 100%;
}



/************************************************************
　フッター
************************************************************/

footer {
	width: 100%;
}

footer a { color:#777; }
footer a:hover { color:#999; }

footer p { margin:0; font-size:14px; }

footer .f_appeal {
	width: 1200px;
	margin: 0 auto 20px;
	padding: 20px 0;

	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

footer .f_appeal ul {

}

footer .f_appeal ul li {
	display: inline-block;

	width: calc(100% / 3); /* ← 並べるバナー個数により変更 */
	text-align: center;
}

footer .f_appeal ul li:last-child {
	margin-right: 0;
}

footer .f_appeal p {
	
}

footer .f_appeal p.logo {
	display: flex;
	align-items: center;
	justify-content: center;

	height: 49px;
	margin-bottom: 10px;
}

footer .f_appeal p.logo a {
	display: contents;
}

footer .f_appeal p.logo a img {
	height: 100%;
}

/* SSLサイトシール ここから */
footer .f_appeal ul li.ssl p.logo a img {
	width: 118px;
	height: 46px;
}
/* SSLサイトシール ここまで */

footer .f_appeal p.text {
	font-size: 12px;
}

footer .f_top {
	width: 1200px;
	margin: 0 auto 20px;
}

footer .f_top .menuLink {
	float: left;

	width: 1003px;
}

footer .f_top .menuLink ul {
	margin-bottom: 5px; /* 右端のロゴ（高さ45px）と、高さを合わせるため */
}

footer .f_top .menuLink ul:last-child {
	margin-bottom: 0;
}

footer .f_top .menuLink ul li {
	display: inline-block;
	/* font-size: 12px; */
}

footer .f_top .menuLink ul li::after {
    content: "｜";
    color: #777;
}

footer .f_top .menuLink ul li:last-child::after {
    content: "";
}

footer .f_top .f_logo {
	float: right;
}

footer .f_top .f_logo img {
	height: 45px;
}

footer .f_top .f_logo a img:hover { opacity:unset; transition:unset; }




/* ページ最下部［無料会員ログイン］［店舗会員ログイン］ボタンCSS */

footer .f_login {
	width: 1200px;
	margin: 0 auto 20px;
}

footer .f_login ul {
	width: 288px;
	margin: 0 auto;
	text-align: center;
}

footer .f_login ul li {
	position: relative;
	display: inline-block;
	width: 94px;
	height: 20px;
	margin-right: 20px;
	padding: 5px 10px;
	text-align: center;
	background: #ff66c4;
	border-radius: 6px;
}

footer .f_login ul li:last-child {
	margin-right: 0;
	background: #38b6ff;
}

footer .f_login ul li a {
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;
	line-height: 30px;

	font-size: 12px;
	font-weight: bold;
	color: #fff;
	text-decoration: none;
}

footer .f_login ul li a:hover {
	opacity: 0.8;
	transition: 0.5s;
}

footer .f_login ul li a i {
	margin-right: 5px;
}




/* ページ最下部 SNSアイコンリンク */

footer .sns_iconLink {
	width: 1200px;
	margin: 0 auto 20px;
}

footer .sns_iconLink ul {
	height: 22px;
	text-align: center;
}

footer .sns_iconLink ul li {
	display: inline-block;
	vertical-align: middle;
	margin-right: 20px;

	font-size: 20px;
}

footer .sns_iconLink ul li:last-child {
	margin-right: 0;
}

footer .sns_iconLink ul li a { display:block; height: 21px; line-height:22px; }

footer .sns_iconLink ul li.line a i { color: #00b900; } /* LINEアイコン */

footer .sns_iconLink ul li.instagram a i { /* Instagramアイコン */
	font-size: 22px;
	color: #8000ff;
	background: -webkit-linear-gradient(106deg, #ffff00, #ff0096 65%, #4158d0);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

footer .sns_iconLink ul li.threads a i { font-size: 22px; color: #000; }
footer .sns_iconLink ul li.twitter a i { color: #000; }
footer .sns_iconLink ul li.youtube a i { font-size: 22px; color: #ff0000; }
footer .sns_iconLink ul li.facebook a i { color: #0866ff; }
footer .sns_iconLink ul li.bluesky a i { color: #0886fe; }

footer .sns_iconLink ul li.tiktok a i {
	color: #000;

	filter: drop-shadow(-1px -1px 0 #25f4ee) drop-shadow(1px 1px 0 #fe2c55);
}

footer .f_bottom {
	width: 100%;
	padding: 20px 0;
	background: #eee;
	border-top: 3px solid #dde1e4;
}

footer .f_bottom .law {
	width: 900px;

	margin: 0 auto;
	/* margin: 0 auto 20px; ← 商標出願前 */
}

footer .f_bottom .law p.diversion {
	font-size: 12px;
	text-align: center;
}
footer .f_bottom .law p.trademark {
	margin: 10px 0;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
}
footer .f_bottom .law p.trademark img {
	display: inline-block;
	vertical-align: middle;
	height: 48px;
	margin-right: 7.5px;
}
footer .f_bottom .law p.violation {
	margin-bottom: 20px;
	font-size: 12px;
}


footer .f_bottom .copyright {
	text-align: center;
}



/********** 先頭へ戻るボタン **********/
#pageTop {
	position: fixed;
	z-index: 9999;

	width: 56px;
	height: 56px;

	right: 25px;
	bottom: -56px;
}
#pageTop a {
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;

  background: #ff0080;
  border: 2px solid #fff;
  border-radius: 50%;

  opacity: 0.8;
}
#pageTop a:hover {
  background: #fff;
  border: 2px solid #ff0080;
  transition : .5s;
}
#pageTop a::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#pageTop a:hover::before {
  color: #ff0080;
  transition : .5s;
}




/*==================================================
背景色が伸びて出現＝左から右へ流れる背景（適用箇所：　　等）
===================================*/

/*背景色が伸びて出現（共通）*/
.bgextend{
  animation-name:bgextendAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
  position: relative;
  overflow: hidden;/*　はみ出た色要素を隠す　*/
  opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
  }
}

/*中の要素*/
.bgappear{
  animation-name:bgextendAnimeSecond;
  animation-duration:1s;
  animation-delay: 0.6s;
  animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond{
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
}
}

/*左から*/
.bgLRextend::before{
  animation-name:bgLRextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #ffea00;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
  0% {
    transform-origin:left;
    transform:scaleX(0);
  }
  50% {
    transform-origin:left;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:right;
  }
  100% {
    transform-origin:right;
    transform:scaleX(0);
  }
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger{
    opacity: 0;
}




/*==================================================
フェードアップ＝下から上へ出現（適用箇所：　　等）
===================================*/

/* スタート時は要素自体を透過0にするためのopacity:0;を指定する */
.box{
  opacity: 0;
}


.fadeUp {
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}




/*==================================================
枠線が伸びて出現（適用箇所：　　等）
===================================*/

/*枠線が伸びて出現*/

.lineTrigger{
  position: relative; /* 枠線が書かれる基点*/
  opacity:0;
}

.lineTrigger.lineanime{
  animation-name:lineAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;

	display: inline-block;
	margin: 0 0 20px 0;
}

@keyframes lineAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*上下線*/
.lineTrigger::before,
.lineTrigger::after{
  position: absolute;
  content:"";
  width:0;
  height:1px;
  background:#e50000;/* 枠線の色*/
}

/*左右線*/
.line2::before,
.line2::after{
  position: absolute;
  content:"";
  width: 1px;
  height:0;
  background:#e50000;/* 枠線の色*/
}

/*上線*/
.lineTrigger::before {
  top:0;
  left:0;
}

.lineTrigger.lineanime::before {
  animation: lineAnime .5s linear 0s forwards;/*表示されて0秒後に上線が0.5秒かけて表示*/
}

/*右線*/
.line2::before{ 
  top:0;
  right:0;
}

.lineTrigger.lineanime .line2::before {
  animation: lineAnime2 .5s linear .5s forwards;/*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

/*下線*/
.lineTrigger::after { 
  bottom:0;
  right:0;
}

.lineTrigger.lineanime::after {
  animation: lineAnime .5s linear 1s forwards;/*表示されて1秒後に下線が0.5秒かけて表示*/
}

/*左線*/
.line2::after{ 
  bottom:0;
  left:0;
}

.lineTrigger.lineanime .line2::after {
  animation: lineAnime2 .5s linear 1.5s forwards;/*表示されて1.5秒後に左線が0.5秒かけて表示*/
}

@keyframes lineAnime {
  0% {width:0%;}
    100%{width:100%;}
}

@keyframes lineAnime2 {
  0% {height:0%;}
    100%{height:100%;}
}

/*枠線内側の要素*/

.lineTrigger.lineanime .lineinappear{
  animation: lineInnerAnime .5s linear 1.5s forwards;/*1.5秒後に中央のエリアが0.5秒かけて表示*/
  opacity: 0;/*初期値を透過0にする*/ 
}

@keyframes lineInnerAnime{
  0% {opacity:0;}
    100% {opacity:1;}
}




/*==================================================
左から枠ごとフェードインして出現（適用箇所：　　等）
===================================*/

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
	transform: translateX(-100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}




/*==================================================
奥から手前へズームして出現（適用箇所：　　等）
===================================*/

/* --------------------------
【初期状態】 アニメーションを適用する要素
 -------------------------- */
.animate {
    opacity: 0; /* 初期状態では非表示 */
    transition: opacity 0s ease-out, transform 0.6s ease-out; /* 透明度と変形を3秒かけてスムーズに変化 */
}

/* ズームインアニメーション（拡大しながら表示） */
.zoom-in {
    transform: scale(0.1); /* 初期状態では10%のサイズ */
}

/* --------------------------
 【最終状態】要素が画面内に入ったとき（アニメーション完了時）
 -------------------------- */
.show {
    opacity: 1; /* 完全に表示 */
    transform: translateY(0) scale(1) translateX(0) rotateY(0); /* 元の位置・サイズ・回転に戻す */
}




/************************************************************
　lightbox 設定
************************************************************/

.lb-data .lb-details {
  width: 100% !important;
  height: 20px !important;
  line-height: 20px !important;
  margin-top: 10px;
  text-align: center !important;
}