@charset "utf-8";

/********** サイトの定義 **********

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

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

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


/*** メイン画像スライダー ***/

#main_Image {
		width: 100%;
}

#main_Image a {

}

#main_Image a img {
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}




/*** 自社PRバナー広告枠（上段）※これはトップページのみ適用 ***/
.myAppeal_topBanner {
	width: 960px;
	margin: 80px auto 0 !important;
}


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



/************************************************************
　レビュー星 （ トップページ［最近見たお店］部分でのみ適用 ）
************************************************************/

#history ul li p.review_star .star5_rating {
	margin-right: 4px;
	font-size: 14px;
}




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


/********** 人気の車両タイプ **********/

#popular {
	margin: 120px auto 0;
}

#popular ul {

}

#popular ul li {
	position: relative;
	display: inline-block;
	width: calc(100% / 4 - 68px / 4);
	height: 381px;
	margin-right: 20px;
	border: 1px solid #38b6ff;
	border-radius: 6px;
}

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

#popular ul li:hover {

}

#popular ul li a {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: calc(100% - 40px);
	height: calc(100% - 40px);
	padding: 20px;

	color: #333;
	text-decoration: none;
}

#popular ul li p {

}

#popular ul li p.image {

}

#popular ul li p.image img {
	width: 100%;
	height: 145px;
	object-fit: cover;
}

#popular ul li a p.image img:hover { opacity:unset; }

#popular ul li h3 {
	margin: 0 0 10px 0;
	font-size: 18px;
	font-weight: bold;
}

#popular ul li:hover h3 {
	color: #38b6ff;
}

#popular ul li p.text {
	margin-bottom: 20px;
}

#popular ul li p.more {
	position: absolute;
	left: 0;
	bottom: 0;
	width: calc(100% - 30px);
	margin: 0 auto;
	padding: 15px;
	color: #fff;
	background: #38b6ff;
	text-align: center;
	border-radius: 0 0 4px 4px;

}

#popular ul li:hover p.more {
	color: #ffff00;
}

#popular ul li p.more i {
	margin-right: 5px;
}




/********** 予約受付中のレンタカープラン **********/

#areaPlan {
	margin: 120px auto 0;
}

#areaPlan 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 }
}


#areaPlan .headline {
	position: relative;
	margin: 0 0 20px 0;
}

#areaPlan .headline h3 {
	width: 600px;
	height: 36px;
	line-height: 36px;

	font-size: 24px;
	font-weight: bold;
	margin: 0 auto;
	text-align: center;

	animation: areaPlan_blinkAnimeS2 0.5s infinite alternate;
}
@keyframes areaPlan_blinkAnimeS2{
   0% { opacity:0; }
 100% { opacity:1; }
}
#areaPlan .headline h3:before {
	margin: 0 10px 0 0;
	content: "＼";
}
#areaPlan .headline h3:after {
	margin: 0 0 0 10px;
	content: "／";
}

#areaPlan .headline#naha h3			{ color:#ff9600; }
#areaPlan .headline#central h3		{ color:#ff66c4; }
#areaPlan .headline#north h3		{ color:#00b900; }
#areaPlan .headline#miyakojima h3	{ color:#a54cff; }
#areaPlan .headline#ishigaki h3		{ color:#38b6ff; }


#areaPlan .headline .more {
	position: absolute;
	top: 1px;
	left: 0;

	z-index: 2; /* h3 と同列にあり、被っている可能性があるため */
}

#areaPlan .headline .more p {
	position: relative;
	display: inline-block;

	width: 266px;
	height: 24px;
	line-height: 34px;

	margin: 0;
	padding: 5px 10px;
	border-radius: 17px;

	text-align: center;
}
#areaPlan .headline .more p:hover {
	opacity: 0.8;
}

#areaPlan .headline#naha .more p		{ background:#ff9600; }
#areaPlan .headline#central .more p		{ background:#ff66c4; }
#areaPlan .headline#north .more p		{ background:#00b900; }
#areaPlan .headline#miyakojima .more p	{ background:#a54cff; }
#areaPlan .headline#ishigaki .more p	{ background:#38b6ff; }

#areaPlan .headline .more p a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: #fff;
	text-decoration: none;
}

#areaPlan .headline .more p a i {
	margin-right: 5px;
}


#areaPlan .headline .targetDate {
	position: absolute;
	top: 1px;
	right: 0;
}

#areaPlan .headline .targetDate p {
	height: 24px;
	line-height: 24px;
	margin: 0;
	padding: 5px 10px;
	font-size: 12px;
	text-align: center;
}

#areaPlan .headline#naha .targetDate p			{ background:#FFE9CC; }
#areaPlan .headline#central .targetDate p		{ background:#FFCCEB; }
#areaPlan .headline#north .targetDate p			{ background:#CCFFCC; }
#areaPlan .headline#miyakojima .targetDate p	{ background:#ECDBFF; }
#areaPlan .headline#ishigaki .targetDate p		{ background:#E0F3FF; }

#areaPlan .headline .targetDate p span {
	margin-right: 7.5px;
	font-weight: bold;
	color: #333;
}


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

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

	z-index: 1;
}

#areaPlan .swiper_areaPlan_naha .swiper-slide		{ outline:1px solid #ff9600; }
#areaPlan .swiper_areaPlan_central .swiper-slide	{ outline:1px solid #ff66c4; }
#areaPlan .swiper_areaPlan_north .swiper-slide		{ outline:1px solid #00b900; }
#areaPlan .swiper_areaPlan_miyakojima .swiper-slide	{ outline:1px solid #a54cff; }
#areaPlan .swiper_areaPlan_ishigaki .swiper-slide	{ outline:1px solid #38b6ff; }


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


#areaPlan .swiper-slide .icon_plan {
	margin-bottom: 10px;
}

#areaPlan .swiper-slide .icon_plan ul {

}


#areaPlan .swiper-slide .icon_plan ul li {
	display: inline-block;
	width: calc(100% / 4 - 78px / 4);

	letter-spacing: -0.4px;

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

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

#areaPlan .swiper_areaPlan_naha .swiper-slide .icon_plan ul li			{ color:#ff9600; border-color:#ff9600; }
#areaPlan .swiper_areaPlan_central .swiper-slide .icon_plan ul li		{ color:#ff66c4; border-color:#ff66c4; }
#areaPlan .swiper_areaPlan_north .swiper-slide .icon_plan ul li			{ color:#00b900; border-color:#00b900; }
#areaPlan .swiper_areaPlan_miyakojima .swiper-slide .icon_plan ul li	{ color:#a54cff; border-color:#a54cff; }
#areaPlan .swiper_areaPlan_ishigaki .swiper-slide .icon_plan ul li		{ color:#38b6ff; border-color:#38b6ff; }

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

#areaPlan .swiper-slide .icon_plan ul li:nth-child(4) { margin-right:0; }

#areaPlan .swiper_areaPlan_ishigaki .swiper-slide .icon_plan ul li:nth-child(n+5)	{ display:none; }

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

#areaPlan .swiper-slide h4 {
	margin: 0 0 10px 0;
	font-size: 18px;
	font-weight: bold;

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

#areaPlan .swiper_areaPlan_naha .swiper-slide:hover h4			{ color:#ff9600; }
#areaPlan .swiper_areaPlan_central .swiper-slide:hover h4		{ color:#ff66c4; }
#areaPlan .swiper_areaPlan_north .swiper-slide:hover h4			{ color:#00b900; }
#areaPlan .swiper_areaPlan_miyakojima .swiper-slide:hover h4	{ color:#a54cff; }
#areaPlan .swiper_areaPlan_ishigaki .swiper-slide:hover h4		{ color:#38b6ff; }


#areaPlan .swiper-slide .left {
	float: left;
	width: 189px;
}

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

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

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


#areaPlan .swiper-slide .left .shopInfo {

}

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

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

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


#areaPlan .swiper-slide .right {
	float: right;
	width: 149px;
}


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

#areaPlan .swiper-slide .right .carInfo table {
	width: 100%;
	border-collapse: collapse;
}

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

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


#areaPlan .swiper-slide .right .carInfo table th {
	display: block;
	width: calc(100% - 20px);
	padding: 2.5px 10px;
	font-size: 12px;
	font-weight: normal;
	color: white;
	text-align: center;
}

#areaPlan .swiper_areaPlan_naha .swiper-slide .right .carInfo table th			{ background-color:#ff9600; }
#areaPlan .swiper_areaPlan_central .swiper-slide .right .carInfo table th		{ background-color:#ff66c4; }
#areaPlan .swiper_areaPlan_north .swiper-slide .right .carInfo table th			{ background-color:#00b900; }
#areaPlan .swiper_areaPlan_miyakojima .swiper-slide .right .carInfo table th	{ background-color:#a54cff; }
#areaPlan .swiper_areaPlan_ishigaki .swiper-slide .right .carInfo table th		{ background-color:#38b6ff; }


#areaPlan .swiper-slide .right .carInfo table td {
	display: block;
	width: calc(100% - 20px);
	padding: 2.5px 10px;
	text-align: center;
}

#areaPlan .swiper_areaPlan_naha .swiper-slide .right .carInfo table td			{ background-color: #FFE9CC; }
#areaPlan .swiper_areaPlan_central .swiper-slide .right .carInfo table td		{ background-color: #FFCCEB; }
#areaPlan .swiper_areaPlan_north .swiper-slide .right .carInfo table td			{ background-color: #CCFFCC; }
#areaPlan .swiper_areaPlan_miyakojima .swiper-slide .right .carInfo table td	{ background-color: #ECDBFF; }
#areaPlan .swiper_areaPlan_ishigaki .swiper-slide .right .carInfo table td		{ background-color: #E0F3FF; }


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

	font-size: 12px;

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


#areaPlan .swiper-slide .price {
	width: 290px;
	margin: 10px auto 5px;
	font-size: 14px;
	text-align: center;

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

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

	margin: 0 10px 0 5px;

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

#areaPlan .swiper-slide .attention {
	width: 290px;
	margin: 0 auto;
	font-size: 10px;
	font-weight: bold;
	color: #e50000;
}


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

	color: #333;
	text-decoration: none;
}

#areaPlan .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;
	border-right: 1px solid;
	border-radius: 0 0 4px 4px;
}

#areaPlan .swiper_areaPlan_naha .swiper-slide p.more		{ background:#ff9600; border-color:#ff9600; }
#areaPlan .swiper_areaPlan_central .swiper-slide p.more		{ background:#ff66c4; border-color:#ff66c4; }
#areaPlan .swiper_areaPlan_north .swiper-slide p.more		{ background:#00b900; border-color:#00b900; }
#areaPlan .swiper_areaPlan_miyakojima .swiper-slide p.more	{ background:#a54cff; border-color:#a54cff; }
#areaPlan .swiper_areaPlan_ishigaki .swiper-slide p.more	{ background:#38b6ff; border-color:#38b6ff; }

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

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




/********** 沖縄レンタカー料金相場 **********/

#market {
	margin: 120px auto 0;
}

#market .price {
	display: inline-block;
	vertical-align: top;
	width: calc(100% / 6 - 352px / 6);
	height: 247px;
	margin-right: 20px;
	padding: 20px;

	border-top: 3px solid;

	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;

	border-radius: 4px;
}

#market .price.okinawa		{ border-top-color: #e50000; }
#market .price.naha			{ border-top-color: #ff9600; }
#market .price.central		{ border-top-color: #ff66c4; }
#market .price.north		{ border-top-color: #00b900; }
#market .price.miyakojima	{ border-top-color: #a54cff; }
#market .price.ishigaki		{ border-top-color: #38b6ff; margin-right:0; }


#market .price p {
	margin: 0;
}

#market .price h3 {
	margin: 0 0 10px 0;
	font-size: 18px;
	text-align: center;
}

#market .price p.attention {
	font-size: 12px;
}

#market .price.okinawa p.attention a	{ color: #e50000; }
#market .price.naha p.attention a		{ color: #ff9600; }
#market .price.central p.attention a	{ color: #ff66c4; }
#market .price.north p.attention a		{ color: #00b900; }
#market .price.miyakojima p.attention a	{ color: #a54cff; }
#market .price.ishigaki p.attention a	{ color: #38b6ff; }

#market .price div {

}

#market .price .average {
	margin-bottom: 10px;
	padding: 7.5px;
	text-align: center;
	border-radius: 6px;
	color: #000; /* ← ここは字を#000にすることで、目立ちやすくなる◎ */
}

#market .price.okinawa .average		{ background: #FFD1D1; }
#market .price.naha .average		{ background: #FFE9CC; }
#market .price.central .average		{ background: #FFCCEB; }
#market .price.north .average		{ background: #CCFFCC; }
#market .price.miyakojima .average	{ background: #ECDBFF; }
#market .price.ishigaki .average	{ background: #E0F3FF; }

#market .price .average p {
	height: 34px;
	line-height: 34px;
	font-weight: bold;
}

#market .price .average p span {
	vertical-align: -2px;
	margin: 0 5px;
	font-size: 28px;
}

#market .price .HighLow {

}

#market .price .HighLow p {
	height: 29px;
	line-height: 29px;
	margin-bottom: 10px;
	font-size: 12px;
}

#market .price .HighLow p span {
	margin-right: 7.5px;
	padding: 7.5px;
	background: #eee;
	border-radius: 6px;
}

#market .price .HighLow p font {
	vertical-align: middle;
	margin-right: 2.5px;
	font-size: 18px;
}

#market p.caution {
	margin: 20px 0 0 0;
	text-align: center;
}




/***** トップページ：みんなのQ＆A質問板 ****/

#board {
	margin: 120px auto 0;
}

#board section {

}

#board section .headline {
	padding: 20px 20px 20px 302px;
	border: 1px #ff66c4 solid;
	background: #FFCCEB;

	background-image: url("../../img/board/headline.png");
	background-repeat: no-repeat;
	background-size: 73px 73px;
	background-position: 209px 50%;

	text-shadow:
		0px 0px 2px #ffffff,
		0px 0px 2px #ffffff,
		0px 0px 2px #ffffff,
		0px 0px 2px #ffffff,
		0px 0px 2px #ffffff,
		0px 0px 2px #ffffff,
		0px 0px 2px #ffffff,
		0px 0px 2px #ffffff,
		0px 0px 2px #ffffff,
		0px 0px 2px #ffffff,
		0px 0px 2px #ffffff,
		0px 0px 2px #ffffff,
		0px 0px 2px #ffffff,
		0px 0px 2px #ffffff,
		0px 0px 2px #ffffff;
}


#board section .headline p {
	margin: 0;
	font-size: 18px;
	font-weight: bold;
}

#board section .headline p span {
	margin-left: 5px;
	padding: 0 3px;
	color: #000;	/* ← 少しでも文字を目立たせるため #000 */
	background-image: linear-gradient(transparent 66.6%, #ffff00 0%);
}

#board section .headline h3 {
	margin: 0;
	font-size: 32px;
}


#board section .item {
	margin: 0 auto;
	padding: 20px;

	border-right: 1px solid #ff66c4;
	border-bottom: 1px solid #ff66c4;
	border-left: 1px solid #ff66c4;

	z-index: 1;
}

#board section .item ul.QA {
	font-size: 0;
}

#board section .item ul.QA li {
	display:inline-flex;
	width: calc(100% / 3 - 82px / 3);

	padding-right: 20px;
	border-right: 1px dotted #dadada;

	padding-bottom: 20px;
	border-bottom: 1px dotted #dadada;
}

#board section .item ul.QA li:nth-child(3n) {
	padding-right: 0;
	border-right: 0;
}

#board section .item ul.QA li:nth-child(2),
#board section .item ul.QA li:nth-child(3),
#board section .item ul.QA li:nth-child(5),
#board section .item ul.QA li:nth-child(6) {
	padding-left: 20px;
}

#board section .item ul.QA li:nth-child(4),
#board section .item ul.QA li:nth-child(5),
#board section .item ul.QA li:nth-child(6) {
	padding-top: 20px;
}


#board section .item ul.QA li #left {
	float: left;
	width: 128px;
	margin-right: 20px;
}

#board section .item ul.QA li #left img {
	width: 100%;
	margin-bottom: 10px;
	text-align: center;
}

#board section .item ul.QA li #left .category {
	width: 108px;
	height: 17px;
	line-height: 17px;
	margin-bottom: 10px;
	padding: 5px 10px;
	font-size: 12px;
	color:#fff;
	text-align:center;
	background-color:#ff66c4;
	border-radius:6px;
}

#board section .item ul.QA li #left .QA_Name {
	margin:0 auto;
	font-size: 14px;
	text-align:center;

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


#board section .item ul.QA li #right {
	width: 210px;
	float: right;

	font-size: 14px;
}

#board section .item ul.QA li #right table.QA {
	border-collapse: separate;
	border-spacing: 0;
	text-align: left;
	line-height: 1.5;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	float:right;
}

#board section .item ul.QA li #right table.QA tr:first-child {
	height: 168px;
}

#board section .item ul.QA li #right table.QA th {
	width: 30px;
	padding: 10px;
	font-size: 12px;
	font-weight: normal;
	text-align: center;
	vertical-align: middle;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	background: #eee;
}
#board section .item ul.QA li #right table.QA td {
	width: 180px;
	padding: 10px;
	vertical-align: top;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

#board section .item ul.QA li #right table.QA td p {
	margin: 0;

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

#board section .item ul.QA li #right table.QA td a {
	color: #38b6ff;
}

#board section .item ul.QA li #right table.QA td a i {
	margin-right: 5px;
}


#board section .item .bottom {
	width: 1120px;
	margin: 0 auto;
}


/* ［質問を投稿する］［Q＆A投稿一覧］ボタン */

#board section .item .bottom button {
	font-family: "YakuHanJP","Roboto","Noto Sans JP",Meiryo,sans-serif;
	position: relative;
	width: 540px;
	height: 60px;
	margin-top: 20px;
	padding: 10px;
	border: 0;
	border-radius: 6px;

	/* ▼ ▼ ▼ 新ボタンデザインCSS　▼ ▼ ▼ */
	-webkit-border-radius: 6px;

	text-shadow: 1px 2px 2px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 1px 1px #ffffff inset, 1px 1px 1px 0px rgba(0,0,0,0.1);
			box-shadow: 0px 1px 1px #ffffff inset, 1px 1px 1px 0px rgba(0,0,0,0.1);

	outline: none;
	cursor: pointer;
	/* ▲ ▲ ▲ 新ボタンデザインCSS　▲ ▲ ▲ */
}

#board section .item .bottom button.Orange {
	margin-right: 40px;

	background: #ff9600;

	border: 1px solid #ff9600;
	background-image: -webkit-linear-gradient(#ffcc00 0%, #ff9600 100%);
	background-image: linear-gradient(#ffcc00 0%, #ff9600 100%);
}
#board section .item .bottom button.Orange span {
	vertical-align: middle;
	font-size: 14px;
	color: #fff;
}

#board section .item .bottom button.Pink {
	background: #ff0080;

	border: 1px solid #ff0080;
	background-image: -webkit-linear-gradient(#FF7FC1 0%, #ff0080 100%);
	background-image: linear-gradient(#FF7FC1 0%, #ff0080 100%);
}

#board section .item .bottom button:hover {
	opacity: 0.8;
}

#board section .item .bottom button a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height:100%;

	line-height: 58px;

	font-size: 20px;
	font-weight: bold;
	letter-spacing: 1px;
	color: #fff;
	text-decoration: none;
}

#board section .item .bottom button a i {
	color: #fff;
}
#board section .item .bottom button a i.fa-comment-dots {
	margin-right: 10px;
}
#board section .item .bottom button a i.fa-play {
	margin: 0 10px;
}

#board section .item .bottom button a:hover i {
	color: #ff0;
}




/********** ちゅらベル加盟店 **********/

#shopList {
	margin: 120px auto 0;
}

#shopList .shopLogo {
	margin-bottom: 20px;
	padding: 20px;
	background: #fff;
	border: 10px solid #ff9600;
	border-radius: 30px;
}

#shopList .shopLogo ul {

}

#shopList .shopLogo ul li {
	display: inline-block;
	width: calc(100% / 9 - 160px / 9);				/* ← 加盟店20件以上になれば、通常どおり「calc(100% / 10 - 180px / 10)」を適用する */
	margin-right: 20px;
	margin-bottom: 20px;
}

#shopList .shopLogo ul li:nth-child(9n) {			/* ← 加盟店20件以上になれば、通常どおり「(10n)」を適用する */
	margin-right: 0;
}

#shopList .shopLogo ul li:nth-last-child(-n+9) {	/* ← 加盟店20件以上になれば、通常どおり「(-n+10)」を適用する */
	margin-bottom: 0;
}

#shopList .shopLogo ul li a { color:#ff9600; text-decoration:none; }
#shopList .shopLogo ul li ahover { opacity: 0.8; text-decoration:none; }

#shopList .shopLogo ul li img {
	width: calc(100% - 2px);
	aspect-ratio: 1 / 1;
	object-fit: cover;

	border: 1px solid #ccc;
	border-radius: 50%;

    outline: 1px solid rgb(255, 255, 255);/*outlineでドットの線を追加*/
    outline-offset: -2px;/*outline-offsetの値を-15pxにして内側に調整*/
}

#shopList .shopLogo ul li p {
	margin: 0;
	font-size: 12px;
	text-align: center;

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

#shopList p.moreLink {
	text-align: center;
}

#shopList p.moreLink a { display:unset; font-weight:bold; color:#ff9600; text-decoration:none; }
#shopList p.moreLink a:hover { opacity:0.8; transition: 0.5s; }

#shopList p.moreLink a i {
	margin-right: 5px;
}



/********** 沖縄で人気のレンタカーグループ **********/

#groupBanner {
	margin: 120px auto 0;
}

#groupBanner h2 {
	
}

#groupBanner ul {
	/* width: 960px; */
	margin: 0 auto;
	margin-bottom: 20px;
}

#groupBanner ul li {
	display: inline-block;
	width: calc(100% / 6 - 112px / 6);
	margin-right: 20px;
	border: 1px solid #ccc;
}

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

#groupBanner ul li img {
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}


#groupBanner p.moreLink {
	text-align: center;
}

#groupBanner p.moreLink a { display:unset; font-weight:bold; color:#a54cff; text-decoration:none; }
#groupBanner p.moreLink a:hover { opacity:0.8; transition: 0.5s; }

#groupBanner p.moreLink a i {
	margin-right: 5px;
}




/***** メディア掲載実績 *****/

#media {
	margin: 120px auto;
	padding-top: 120px;

	border-top: 1px solid #ccc;
}


/*
1行目（右から左へ）
----------------------------*/
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/*
2行目（左から右へ）
----------------------------*/
@keyframes infinity-scroll-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

/*
IE11対策
----------------------------*/
_:-ms-lang(x)::-ms-backdrop,
#media .slideshow {
  display: -ms-grid;
  overflow: hidden;
}
/*----------------------------*/

#media .slideshow {
  margin-bottom: 40px;
}

#media .slideshow .slideshow_wrap {
  display: flex;
  overflow: hidden;
}

#media .slideshow .slideshow_wrap .slideshowList {
  display: flex;
  list-style: none;

	font-size: 0;
}

#media .slideshow .slideshow_wrap:hover .slideshowList-left,
#media .slideshow .slideshow_wrap:hover .slideshowList-right {
  /* animation-play-state: paused; ← マウスを乗せると一時停止 */

	font-size: 0;
}

#media .slideshow .slideshow_wrap .slideshowList-left {
animation :infinity-scroll-left 60s infinite linear 0.5s both;

	font-size: 0;
}

#media .slideshow .slideshow_wrap .slideshowList-right {
animation :infinity-scroll-right 60s infinite linear 0.5s both;

	font-size: 0;
}

#media .slideshow .slideshow_wrap .slideshowList .item {
    position:relative;
	width: 200px;

	/* width: calc(100vw / 10); */

	margin-right: 40px;
	padding: 10px;

	background: rgba(255,255,255,1.0);
	/* border: 1px solid #dde1e4; */
}
#media .slideshow .slideshow_wrap .slideshowList .item img {
	width: 100%;
	margin-bottom: 0;
}

/*
#media .slideshow .slideshow_wrap .slideshowList .item a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 20px);
    height: calc(100% - 20px);

	padding: 10px;
}
*/

#media .slideshow .slideshow_wrap .slideshowList .item .detail {
	width: 90%;
	margin: 0 auto;
	padding-top: 10px;
}

#media .slideshow .slideshow_wrap .slideshowList .item .detail p {
	margin-bottom: 0;
	text-align: center;

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

#media p.trademark {
	margin: 0 0 40px 0;
	color: #e50000;
	text-align: center;
}

#media p.moreLink {
	text-align: center;
}

#media p.moreLink a { display:unset; font-weight:bold; color:#00b900; text-decoration:none; }
#media p.moreLink a:hover { opacity:0.8; transition: 0.5s; }

#media p.moreLink a i {
	margin-right: 5px;
}




/********** ボタン（大サイズ） **********/

main button {
	font-family: "YakuHanJP","Roboto","Noto Sans JP",Meiryo,sans-serif;
	position: relative;
	width: 540px;
	height: 60px;
	line-height: 60px;
	margin-top: 20px;
	padding: 10px;
	border: 0;
	border-radius: 6px;

	/* ▼ ▼ ▼ 新ボタンデザインCSS　▼ ▼ ▼ */
	-webkit-border-radius: 6px;

	border: 1px solid;

	text-shadow: 1px 2px 2px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 1px 1px #ffffff inset, 1px 1px 1px 0px rgba(0,0,0,0.1);
			box-shadow: 0px 1px 1px #ffffff inset, 1px 1px 1px 0px rgba(0,0,0,0.1);
	outline: none;
	cursor: pointer;
	/* ▲ ▲ ▲ 新ボタンデザインCSS　▲ ▲ ▲ */

}

main button.Orange {
	background: #ff9600;
	border-color: #ff9600;
	background-image: -webkit-linear-gradient(#FFBF66 0%, #ff9600 100%);
	background-image: linear-gradient(#FFBF66 0%, #ff9600 100%);
}

main button.Pink {
	background: #ff66c4;
	border-color: #ff66c4;
	background-image: -webkit-linear-gradient(#ff99d7 0%, #ff66c4 100%);
	background-image: linear-gradient(#ff99d7 0%, #ff66c4 100%);
}

main button.Green {
	background: #00b900;
	border-color: #00b900;
	background-image: -webkit-linear-gradient(#6BFF6B 0%, #00b900 100%);
	background-image: linear-gradient(#6BFF6B 0%, #00b900 100%);
}

main button.Purple {
	background: #a54cff;
	border-color: #a54cff;
	background-image: -webkit-linear-gradient(#C793FF 0%, #a54cff 100%);
	background-image: linear-gradient(#C793FF 0%, #a54cff 100%);
}

main button.Blue {
	background: #38b6ff;
	border-color: #38b6ff;
	background-image: -webkit-linear-gradient(#7FD0FF 0%, #38b6ff 100%);
	background-image: linear-gradient(#7FD0FF 0%, #38b6ff 100%);
}

main button.Red {
	background: #e50000;
	border-color: #e50000;
	background-image: -webkit-linear-gradient(#ff7272 0%, #e50000 100%);
	background-image: linear-gradient(#ff7272 0%, #e50000 100%);
}

main button.Emerald {
	background: #35cccc;
	border-color: #35cccc;
	background-image: -webkit-linear-gradient(#85DFDF 0%, #35cccc 100%);
	background-image: linear-gradient(#85DFDF 0%, #35cccc 100%);
}

main button:hover {
	opacity: 0.8;
}

main button a {
	position: absolute;
	top: 0;
	left: 0;
	height:100%;
	width: 100%;

	font-size: 20px;
	font-weight: bold;
	letter-spacing: 1px;
	color: #fff;
	text-decoration: none;
}

main button a span {
	color: #ffff00;
}

main button a i {
	margin-left: 5px;
	color: #ffff00;
}