@charset "utf-8";

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

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

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

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


main #main.SHOP {
	border-top-color: #38b6ff;
}




/************************************************************
　検索結果（上部枠）
************************************************************/

.SHOP .searchlist .Hit_Type .TypeLink ul.usuallyType li.active, /* 今いるページに下線を付ける */
.SHOP .searchlist .Hit_Type .TypeLink ul.usuallyType li:hover /* マウスを乗せた時に下線を付ける */ {
	border-bottom: 3px solid #38b6ff;
}

.SHOP .searchlist .Hit_Type .TypeLink ul.rankingType li.active,
.SHOP .searchlist .Hit_Type .TypeLink ul.rankingType li:hover { /* 今いるページには下線を付ける */
	border-bottom: 3px solid #38b6ff;
}




/************************************************************
　検索結果（結果一覧）
************************************************************/

/* 各店舗の表示デザイン枠 */

.search_result ul li {
	/* transition: 0.5s; */
	z-index: 1;
	position: relative;

	display: block;
	width: 820px;
	margin-bottom: 40px;
	padding: 20px;
	background: #E0F3FF;
	border-radius: 6px;
}

.search_result ul li:hover {
	transition: 0.5s;
	/* opacity:0.8; */
}

.search_result ul li a {
	display: unset;
	color: #333;
}


.search_result .shopLink {
	float: left;
	width: calc(100% - 45px);	/* ← 45px ＝ ハートマーク（25px）と 余白（20px） */
	height: 40px;
	line-height: 40px;
	margin-bottom: 10px;
}

.search_result .shopLink a {
	position: absolute;
	top: 0;
	left: 0;

	width: calc(100% - 40px);
	height: calc(100% - 40px);
	padding: 20px;
	text-decoration: none;

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

	z-index: 2; /* 必要であればリンク要素の重なりのベース順序指定 */
}


/* 「通常の検索結果ページ」のみ適用 ここから */

/* 「通常の検索結果ページ」のみ適用 ここまで */


/* 「ランキングページ」と「PR広告」のみ適用 ここから */
.search_result ul.ranking li .shopLink a {
	width: 513px;
	padding: 20px 20px 20px 327px;
}
/* 「ランキングページ」と「PR広告」のみ適用 ここまで */


.search_result .shopLink h3 {
	display: inline-block;
	vertical-align: middle;

	width: calc(100% - 45px);	/* ← 45px ＝ ハートマーク（25px）と 余白（20px） */
	height: 40px;
	line-height: 40px;

	margin: 0;
	margin-right: 20px;

	font-size: 24px;
	font-weight: bold;
	color: #333;

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

	text-shadow:
		0 0 2px #fff,
		0 0 2px #fff,
		0 0 2px #fff,
		0 0 2px #fff,
		0 0 2px #fff,
		0 0 2px #fff,
		0 0 2px #fff,
		0 0 2px #fff,
		0 0 2px #fff,
		0 0 2px #fff;
}
.search_result ul li:hover .shopLink h3 {
	color: #000;
}


.search_result .keep {
	float: right;
	margin-bottom: 10px;
}

.search_result .keep p {
	z-index: 3;
	position: relative;

	display: inline-block;
	vertical-align: middle;

	width: 25px;
	height: 40px;
	line-height: 40px;
	margin: 0;

	font-size: 24px;
}

.search_result .keep p i {
	color: #ccc;

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

.search_result .keep p i.Pink {
	color: #ff0080;
}


.search_result .detail {
	display: flex;
	width: 100%;
}

.search_result .detail .logo {
	width: 83px;
	margin-right: 20px;
}

.search_result .detail .logo .bgWhite {
	margin-bottom: 1px;

	background: #fff; /* 背景透過の写真を登録された際、自動的に白背景にするため */
}

.search_result .detail .logo .bgWhite p {
	display: inline-block;
	width: 83px;
	height: 83px;
	margin: 0;
}

.search_result .detail .logo p img {
	width: 100%;

	/* アスペクト比 1:1 */
	aspect-ratio: 1 / 1;

	object-fit: cover;
}


.search_result .detail table {
	width: 717px;

	border-collapse: collapse;
	border-spacing: 0;

	font-size: 14px;
	letter-spacing: 1px;
}

.search_result .detail table tr {
	border: 1px solid #ccc;
}

.search_result .detail table tr th,
.search_result .detail table tr td {
	padding: 10px;
	text-align: left;
	vertical-align: top;
}

.search_result .detail table tr th {
	width: 18%;
	font-weight: normal;
	background: #eee;

	vertical-align: middle;
	text-align: center;
}

.search_result .detail table tr td {
	width: 82%;
	background: #fff;
}

.search_result .detail table tr td.link p,
.search_result .detail table tr td.payment p,
.search_result .detail table tr td.message p {
	height: 20px;
	line-height: 20px;
	margin: 0;

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

.search_result .detail table tr td.link p i,
.search_result .detail table tr td.payment p i {
	margin-right: 3px;
	color: #e50000;
	font-size: 14px;
}

.search_result .detail table tr td p i.Pink { color:#ff66c4; }
.search_result .detail table tr td p i.Green { color:#00b900; }
.search_result .detail table tr td p i.Blue { color:#38b6ff; }
.search_result .detail table tr td p i.Orange { color:#ff9600; }
.search_result .detail table tr td p i.Purple { color:#a54cff; }
.search_result .detail table tr td p i.Red { color:#e50000; }

.search_result .detail table tr td.link p span,
.search_result .detail table tr td.payment p span {
	vertical-align: middle;
	font-size: 14px;
}

.search_result .detail table tr td.link p span::after,
.search_result .detail table tr td.payment p span::after {
	content: " / ";
}

.search_result .detail table tr td.link p span:last-child::after,
.search_result .detail table tr td.payment p span:last-child::after {
	content: "";
}

.search_result .detail table tr td.link p span a {
	display: unset;

	transition: 0.3s;
	position: relative;
	top: 0;
	left: 0;
	z-index: 3; /* リンク要素の重なりのベース順序指定 */
}




.search_result .detail p.rank {
	float: left;

	display: inline-block;
	vertical-align: middle;

	width: 50px;/*画像の幅*/
	height: 40px;/*画像の高さ*/

	font-weight: bold;
	color: #fff;
	text-align: center;

	background-size: contain;
	background-repeat: no-repeat;
}

.search_result ul li.no1 .detail p.rank { /* 第1位のみ適用 */
  background-image: url(../../img/search/ranking_no1.png);
}
.search_result ul li.no2 .detail p.rank { /* 第2位のみ適用 */
  background-image: url(../../img/search/ranking_no2.png);
}
.search_result ul li.no3 .detail p.rank { /* 第3位のみ適用 */
  background-image: url(../../img/search/ranking_no3.png);
}
.search_result .detail p.rank { /* 第4位以下すべてに適用 */
  background-image: url(../../img/search/ranking_other.png);
}


.search_result .detail p.rank span {
	position: relative;
	top: 21px;
}


.search_result .evaluation {
	margin-top: 20px;
}

.search_result .evaluation .review {
	float: left;

	height: 40px;
	line-height: 40px;
	margin-right: 20px;

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

.search_result .evaluation .review p {
	display: inline-block;
	vertical-align: middle;
	margin: 0;
	margin-right: 10px;
}

.search_result .evaluation .review p:last-child {
	margin-right: 0;
}

.search_result .evaluation .review p a {
	display: unset;

	transition: 0.3s;
	position: relative;
	top: 0;
	left: 0;
	z-index: 3; /* リンク要素の重なりのベース順序指定 */
}

.search_result .evaluation .review p i {
	margin-right: 3px;
}

.search_result .evaluation .review p span.average {
	vertical-align: middle;
	font-size: 24px;
	font-weight: bold;
	color: #ff9600;
}

.search_result .evaluation .voice {
	float: right;

	padding: 10px;
	background: #fff;
	border-radius: 6px;
}

.search_result .evaluation .voice p {
	display: inline-block;
	vertical-align: middle;
	margin: 0;
	font-size: 14px;

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

.search_result .evaluation .voice p.userReview {
	max-width: 438px;
	font-weight: bold;
}

.search_result .evaluation .voice p.userName {
	max-width: 160px;
}

.search_result .evaluation .voice p.userName::before {
	content: "by";
	margin: 0 5px;
}

.search_result .evaluation .voice p a {
	display: unset;

	transition: 0.3s;
	position: relative;
	top: 0;
	left: 0;
	z-index: 3; /* リンク要素の重なりのベース順序指定 */
}


/* プラン */

.search_result .plan {
	position: relative;
	height: 174px;
	margin-top: 20px;
	padding: 20px;
	background: #fff;
	border: 3px solid;
	border-color: #ccc;
	border-radius: 6px;
	z-index: 3;
}

.search_result .plan:hover {
	border-color: #38b6ff;
}

.search_result .plan a {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: calc(100% - 40px);
	height: calc(100% - 40px);
	padding: 20px;

	font-size: 14px;
	color: #333;
	text-decoration: none;

	z-index: 3;
}

.search_result .plan h4 {
	height: 22px;
	line-height: 22px;
	margin: 0 0 20px 0;
	font-size: 18px;
	font-weight: bold;

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

.search_result .plan:hover h4 {
	color: #000;
}

.search_result .plan .plan_details {
	font-size: 0;
}

.search_result .plan .image {
	display: inline-block;
	vertical-align: top;
	width: 198px;
	margin-right: 20px;
}

.search_result .plan .image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: contain;
	background: #333;
}

.search_result .plan .image img:hover { opacity:unset; }


.search_result .plan .carInfo {
	display: inline-block;
	vertical-align: top;
	width: 228px;
	margin-right: 20px;
	font-size: 14px;
}

.search_result .plan .carInfo table {
	width: 100%;
	margin-bottom: 9.5px;
	font-size: 12px;
	border-collapse: collapse;
}

.search_result .plan .carInfo table:last-child {
	margin-bottom: 0;
}

.search_result .plan .carInfo table tr {
	border-bottom: solid 2px white;
}

.search_result .plan .carInfo table tr:last-child {
	border-bottom: none;
}


.search_result .plan .carInfo table th {
	position: relative;
	width: 32%;
	padding: 10px 0;
	font-weight: normal;
	color: white;
	text-align: center;
}
.search_result .plan .carInfo table th:after {
	display: block;
	position: absolute;
	top:calc(50% - 8px);
	right:-8px;
	content: "";

	width: 0px;
	height: 0px;

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

.search_result .plan .carInfo table:nth-child(1) th { background-color:#ff9600; }
.search_result .plan .carInfo table:nth-child(1) th:after { border-left-color: #ff9600; }

.search_result .plan .carInfo table:nth-child(2) th { background-color:#ff66c4; }
.search_result .plan .carInfo table:nth-child(2) th:after { border-left-color: #ff66c4; }

.search_result .plan .carInfo table:nth-child(3) th { background-color:#a54cff; }
.search_result .plan .carInfo table:nth-child(3) th:after { border-left-color: #a54cff; }

.search_result .plan .carInfo table td {
	width: 68%;
	padding: 10px 10px 10px 15px;
	text-align: left;
}

.search_result .plan .carInfo table:nth-child(1) td { background-color: #FFE9CC; }
.search_result .plan .carInfo table:nth-child(2) td { background-color: #FFCCEB; }
.search_result .plan .carInfo table:nth-child(3) td { background-color: #ECDBFF; }


.search_result .plan .carInfo table td p {
	width: 100%;
	margin: 0;
	font-size: 12px;
	color: #000;

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


.search_result .plan .price {
	display: inline-block;
	vertical-align: top;
	width: 308px;
}



.search_result .plan .price .icon_plan {
	margin-bottom: 3px;
}


.search_result .plan .price .icon_plan p {
	display: inline-block;
	width: calc(100% / 3 - 56px / 3);
	height: 17px;
	line-height: 17px;

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

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

.search_result .plan .price .icon_plan p:nth-child(1) { color:#ff9600; border-color:#ff9600; }
.search_result .plan .price .icon_plan p:nth-child(2) { color:#00b900; border-color:#00b900; }
.search_result .plan .price .icon_plan p:nth-child(3) { color:#a54cff; border-color:#a54cff; }

.search_result .plan .price .icon_plan p.limited { color:#fff; font-weight:bold; background:#e50000; border-color:#e50000 !important; }

.search_result .plan .price .icon_plan p:last-child {
	margin-right: 0;
}


.search_result .plan .price p.perDay {
	margin: 0 0 5px 0;
	font-size: 14px;
	text-align: center;

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

.search_result .plan .price p.perDay span {
	vertical-align: -6px;

	margin: 0 10px 0 5px;

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

.search_result .plan .price p.attention {
	display: block;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 10px;
	font-weight: bold;
	color: #e50000;
	background: 0 !important;
}




/* 【PR】 各種プラン専用 PR枠 */
.search_result ul li.search_PR .mark {
	float: left;

	position: relative;
	top: 6px;

	display: inline-block;
	vertical-align: middle;

	width: 42px;/*画像の幅*/
	height: 26px;/*画像の高さ*/
	line-height: 26px;

	font-size: 14px;
	font-weight: bold;
	text-align: center;
	letter-spacing: 1px;
	background-color: #fff;
}

.search_result ul li.search_PR .mark span {
	position: relative;
}

.search_result ul li.search_PR .shopLink {
	width: calc(100% - 99px);
}

.search_result ul li.search_PR .shopLink h3 {
	position: relative;
	left: 54px;
	width: calc(100% - 99px);
}


/* 【PR】 プレミアムプラン専用 PR枠 */
.search_result ul li.search_PR.Premium .mark {
	color: #ff66c4;
	border: 1px solid #ff66c4;
}


.search_result .plan_more {
	margin-top: 15px;
	height: 16px;
	line-height: 16px;
	font-size: 14px;
	font-weight: bold;
	text-align: right;

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

.search_result .plan_more a {
	display: unset;
	position: relative;
	top: 0;
	left: 0;
	color: #000;
	z-index: 3; /* リンク要素の重なりのベース順序指定 */
}

.search_result .plan_more i {
	margin-right: 3px;
	color: #e50000;
}




/* 【PR】 VIPバナー広告枠（検索結果ページ内） */
.search_result .vipBanner {
	width: 768px;
	margin: 40px auto;
}

.search_result .vipBanner img {
	width: 100%;
}




/************************************************************
　ページネーション （ 検索結果ページ用の色設定 ）
************************************************************/

.pagination .page_number a {
	border: 1px solid #38b6ff;
	background-color: #38b6ff;
}

.pagination .page_number a:not(:hover) {
	color: #38b6ff;
}

.pagination .page_number::-webkit-scrollbar-thumb {
	background-color: #38b6ff;
}