@charset "utf-8";

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

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

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

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


header .head .logo h1 img {
	height: 29px;
}

header .head nav p {
	margin: 0;
}

header .head nav p.login_shopPage {
	margin: 4.5px 0 0 0;
}

#breadcrumb {
	margin-top: 51px;
}






.shopPage { 		/* ショップ詳細ページにのみ適用する追加CSS要素 */
	margin: 40px auto 120px !important;
	padding-bottom: 120px;
	border-bottom: 1px solid #eee;
}




/***** 重要なお知らせ *****/

main #topics_shop {
	width: 100%;
	padding: 20px 0 0 0;
	margin-bottom: -20px;
}

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

main #topics_shop ul li {
	position: relative;

	height: 17px;
	line-height: 17px;
	margin-bottom: 20px;
	padding: 5.5px 10px;
	/* font-weight: bold; */
	text-align: center;
	background-color: #fff;
	border: 1px solid #ff66c4;
	border-radius: 6px;

	transition: 0.2s;
}

main #topics_shop ul li:hover {
	background-color: #ffff00;
}

main #topics_shop ul li:last-child {
	margin-bottom: 0;
}

main #topics_shop ul li a {
	display: block;

	position: absolute;
	top: 0;
	left: 0;
	width: 1178px;

	padding: 5.5px 10px;
	color: #333;
	text-decoration: none;

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

main #topics_shop ul li a:hover {
	color: #333;
}

main #topics_shop ul li a i {
	margin-right: 5px;
	color: #ff66c4;
}




/************************************************************
　店舗情報（全幅）
************************************************************/

/***** 店舗情報 *****/

main #headline {
	margin-bottom: 40px;
}

main #headline .hashtag {
	width: 100%;
}

main #headline .hashtag ul {
	margin-bottom: 10px;
}

main #headline .hashtag ul li {
	display: inline-block;
	margin-right: 10px;
}

main #headline .hashtag ul li:last-child {
	margin-right: 0;
}

main #headline .hashtag ul li a {
	/* font-size: 12px; */
	/* font-weight: bold; */

	color: #8000ff;
	background: -webkit-linear-gradient(270deg, #ff0080, #c850c0 50%, #4158d0);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

	text-decoration: none;
}

main #headline .hashtag ul li a:hover{
	opacity: 0.8;
	transition: 0.5s;
}

main #headline .hashtag ul li a::before {
	content: "#";
}



main #headline .Data {
	float: left;
	width: 582px;
}

main #headline .Data p,
main #headline .Data h2,
main #headline .GoTo p,
main #headline .GoTo h2 {
	width: 100%;
}

main #headline .Data h2 {
	margin: 0;

	font-size: 28px;
	text-align: unset;

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

main #headline .Data p.read {
	font-size: 12px;
	color: #ccc;

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

	clear: both;
}

main #headline .Data p.review {
	margin: 0 0 15px 0;
}

main #headline .Data p.review:last-child {
	margin-right: 0;
}

main #headline .Data p.review a {
	display: unset;

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

/*
main #headline .Data p.review i {
	margin-right: 5px;
}
*/


/************************************************************
　レビュー星 （ ショップ詳細ページ 店舗情報（全幅）内のみ適用 ）
************************************************************/

main #headline .Data p.review span.star5_rating {
	margin-right: 7.5px;
	line-height: 29px; /* 星の右に表示される数字の文字サイズが24px（=高さ29pxになる）のため。*/
	font-size: 24px;
}


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


main #headline .Data ul.features {
	margin-bottom: 0;
}

/* ▼ ▼ ▼ 店舗詳細ページ内の全体で使用するタグ ▼ ▼ ▼ */
main .shopPage ul.features li {
	display: inline-block;
	width: 136px;
	margin-right: 10px;
	font-size: 12px;
	color: #333;
	text-align: center;
	border: 1px solid;
}

main .shopPage ul.features li:nth-child(1) { color:#00b900; border-color:#00b900; }
main .shopPage ul.features li:nth-child(2) { color:#38b6ff; border-color:#38b6ff; }
main .shopPage ul.features li:nth-child(3) { color:#ff66c4; border-color:#ff66c4; }
main .shopPage ul.features li:nth-child(4) { color:#ff9600; border-color:#ff9600; }

main .shopPage ul.features li.off { vertical-align:top; padding:3px 0; line-height:16px; color:#ccc; border-color:#ccc; }


main .shopPage ul.features li:last-child {
	margin-right: 0;
}

main .shopPage ul.features li a {
	display: block;
	width: unset;
	padding: 3px 5px;
	line-height: 16px;
	font-weight: bold;
	color: unset;
	text-decoration: none;
}

main .shopPage ul.features li a:hover{
	opacity: 0.8;
	transition: 0.5s;
}
/* ▲ ▲ ▲ 店舗詳細ページ内の全体で使用するタグ ▲ ▲ ▲ */


main #headline .GoTo ul.items1 {
	margin-bottom: 10px;
}

main #headline .GoTo ul.items1 li {
	display: block;
	margin-right: 0;
}

main #headline .GoTo ul.items1 li.horizontal {
	display: inline-block;
	margin-right: 20px;
}

main #headline .GoTo ul.items2 li.horizontal {
	display: block;
	margin-bottom: 10px;
}
main #headline .GoTo ul.items2 li.horizontal:last-child {
	margin-bottom: 0;
}

main #headline .GoTo ul.items1 li.horizontal p,
main #headline .GoTo ul.items2 li.horizontal p {
	margin: 0;
}

main #headline .GoTo ul.items1 li.horizontal p span {
	font-weight: bold;
	color: #ff0080;
}

main #headline .GoTo ul.items1 li:last-child {
	margin-right: 0;
}

main #headline .GoTo ul.items1 li p,
main #headline .GoTo ul.items2 li p {

}

main #headline .GoTo ul.items1 li p.item {

}

main #headline .GoTo ul.items2 li p.item {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

main #headline .GoTo ul.items1 li p.item font,
main #headline .GoTo ul.items2 li p.item font {
	margin-right: 5px;
	font-weight: bold;
}

main #headline .GoTo ul.items1 li p.item font::before,
main #headline .GoTo ul.items2 li p.item font::before {
	content: "【";
	margin-right: 2px;
}
main #headline .GoTo ul.items1 li p.item font::after,
main #headline .GoTo ul.items2 li p.item font::after
 {
	content: "】";
	margin-left: 2px;
}

main #headline .Data p.item a,
main #headline .GoTo p.item a {
	color: #777;
	text-decoration: underline;
}

main #headline .Data p.item a:hover,
main #headline .GoTo p.item a:hover {
	color: #999;
	text-decoration: none;
}



main #headline .GoTo {
	float: right;
	width: 578px;
}

main #headline .GoTo p {
	width: 100%;
}

main #headline .GoTo p.smooth {
	margin: 0 0 15px 0;
}

main #headline .GoTo p.smooth font {
	margin-right: 2px;
	padding: 0 3px;
	font-weight: bold;
	color: #38b6ff;

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

main #headline .GoTo p.smooth font {
  position: relative;
  z-index: 1;
}
main #headline .GoTo p.smooth font:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0%;
  height: 10px;
  background: #ffff00;
  z-index: -1;
  transition: all 1.6s;
}
main #headline .GoTo p.smooth font.isActive:after {
  width: 100%;
}

main #headline .GoTo p.smooth span::before {
	content: "「";
	margin-right: 2px;
}
main #headline .GoTo p.smooth span::after {
	content: "」";
	margin-right: 2px;
	margin-left: 2px;
}



main #headline .GoTo .actions {
	margin: 18px 0 0 0;
}

main #headline .GoTo .actions button {
	display: inline-block;
	margin-right: 10px;
	padding: 0;

	background: -webkit-linear-gradient(90deg, #ddd, #fff);
	border: 1px solid #ccc;
	border-radius: 6px;
	box-shadow: 0 0 4px 0 rgba(64, 64, 64, 0.1);
}

main #headline .GoTo .actions button:last-child {
	margin-right: 0;
}

main #headline .GoTo .actions button a {
	display: block;
	width: unset;
	line-height: 19px;
	padding: 7.5px 10px;
	color: #4c4c4c;
	font-weight: bold;
	text-shadow: 0px -1px 0px #ddd;
	text-decoration: none;
}

main #headline .GoTo .actions button a:hover {
	opacity: 0.8;
	transition: 0.5s;
}

main #headline .GoTo .actions button a i {
	margin-right: 5px;
	text-shadow: none;
}

main #headline .GoTo .actions button a i.fa-solid.fa-heart.off { color:#FF7FC1; }
main #headline .GoTo .actions button a i.fa-solid.fa-heart.on { color:#ff0080; }

main #headline .GoTo .actions button a i.fa-solid.fa-circle-check { color:#38b6ff; }

main #headline .GoTo .actions button a i.fa-solid.fa-comment { color:#ff9600; }

main #headline .GoTo .actions button a i.fa-solid.fa-image { color: #a54cff; }

main #headline .GoTo p.shopData_Link {
	margin: 0;
	/* font-size: 12px; */
}

main #headline .GoTo p.shopData_Link a {
	color: #2864f0;
	text-decoration: none;
}

main #headline .GoTo p.shopData_Link a:hover {
	opacity: 0.8;
	transition: 0.5s;
}

main #headline .GoTo p.shopData_Link a i {
	margin-right: 3px;
}




/************************************************************
　店舗ナビゲーションMENU（全幅）
************************************************************/

/***** 店舗ナビゲーションMENU メインメニューバー *****/

.gnavi__wrap {
	width: 1200px;
	margin: 0 auto 20px;
}
.gnavi__lists {
	display: flex;
	border: 1px solid #ccc;
}
.gnavi__list {
	width: calc( 100% / 5 );
	height: 45px;
	line-height: 45px;

	position: relative;
	transition: all .3s;

	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	color: #333;
	letter-spacing: 0.05em;
	font-weight: 600;

}

.gnavi__list.top	{ background: -webkit-linear-gradient(90deg, #E0F3FF, #fff); }
.gnavi__list.plan	{ background: -webkit-linear-gradient(90deg, #FFCCEB, #fff); }
.gnavi__list.review	{ background: -webkit-linear-gradient(90deg, #FFE9CC, #fff); }
.gnavi__list.photo	{ background: -webkit-linear-gradient(90deg, #ECDBFF, #fff); }
.gnavi__list.access	{ background: -webkit-linear-gradient(90deg, #CCFFCC, #fff); }

.gnavi__list:hover {
	/* background: #ff9600; */
}

.gnavi__list:not(:first-child)::before {
	content: "";
	width: 1px;
	height: 100%;
	background-color: #ccc;
	position: absolute;
	top: 0;
	left: 0;
	transition: all .3s;
}
.gnavi__list:hover::before {
	background-color: #ccc;
}


/* 項目が無い場合 */
.gnavi__list.nothing {
	background: #ddd;
}
.gnavi__list.nothing:hover {
	background: #ddd;
}
.gnavi__list.nothing:hover::before {
	background-color: #ccc;
}


.gnavi__list a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: #333;
}
.gnavi__list.top:hover a	{ color: #38b6ff; }
.gnavi__list.plan:hover a	{ color: #ff66c4; }
.gnavi__list.review:hover a	{ color: #ff9600; }
.gnavi__list.photo:hover a	{ color: #a54cff; }
.gnavi__list.access:hover a	{ color: #00b900; }

.gnavi__list a i {
	margin-right: 5px;
}

.gnavi__list.top a i	{ color: #38b6ff; }
.gnavi__list.plan a i	{ color: #ff66c4; }
.gnavi__list.review a i	{ color: #ff9600; }
.gnavi__list.photo a i	{ color: #a54cff; }
.gnavi__list.access a i	{ color: #00b900; }

.gnavi__list.nothing i {
	margin-right: 5px;
}



/********** メインコンテンツ（中央カラム） ********/

main #main {
	float: left;
	width: 880px;
	margin: 0;
}

main #main .content {
	margin: 0;
}


section {
	padding-bottom: 40px;
	border-bottom: 1px solid #eee;
	margin-bottom: 40px;
}

section:last-child {
	padding-bottom: 0;
	border-bottom: 0;
	margin-bottom: 0;
}

section h3,
div#staff h3 {
	display: inline-block;

	margin: 0 0 20px 0;
	padding: 0;

	font-size: 18px;
	font-weight: bold;
}


section p.moreLink {
	margin: 0;
	font-weight: bold;
	text-align: center;
}

section p.moreLink a { display:unset; text-decoration:none; }
section p.moreLink a:hover { opacity:0.8; transition: 0.5s; }

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



/************************************************************
　店舗TOP > 「ちゅらベル」を見た！で特典あり　※各箇所に設置
************************************************************/

section.specialOffer h3 {
	display: inline-block;
	padding: 10px 15px !important;
	color: #ff66c4;
	/* border: 1px solid #ff66c4; */

	margin: 0;
}

section.specialOffer table {
	display: table;
	border-collapse: separate;
	border-spacing: 0;

	width: 100%;
	line-height: 1.5;

	font-size: 14px;
	text-align: left;

	border-top: 1px solid #38b6ff;
	border-left: 1px solid #38b6ff;
}


section.specialOffer table th {
	width: 25%;
	padding: 20px;
	font-weight: normal;
	text-align: center;
	vertical-align: middle;
	/* border-right: 1px solid #38b6ff; */
	border-bottom: 1px solid #38b6ff;
	/* border-top: 1px solid #fff; */
	/* border-left: 1px solid #fff; */
	background: #E0F3FF;
}


section.specialOffer table td {
	width: 75%;
	padding: 20px;
	vertical-align: middle;
	border-right: 1px solid #38b6ff;
	border-bottom: 1px solid #38b6ff;
}

section.specialOffer table td p {
	margin: 0;
}

section.specialOffer table td div {
	display: inline-block;
	margin: 0 0 5px 0;
	padding: 4px 8px;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	background: #ff66c4;
}



/************************************************************
　店舗TOP > 当店のレンタカー予約プラン（最大2つ表示）
************************************************************/


/* 各プランの表示デザイン枠 */

section#plan ul.planList {

}

section#plan ul.planList li {
	z-index: 1;
	position: relative;

	display: block;
	width: 874px;
	height: 404px;
	margin-bottom: 20px;
	background: #fff;

	border: 3px solid;
	border-color: #ccc;
	border-radius: 6px;
}

section#plan ul.planList li:hover {
	border-color: #ff66c4;
}

section#plan ul.planList li a {
	display: unset;
	color: #333;
}


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


section#plan .inner .icon_plan {
	margin-bottom: 20px;
}

section#plan .inner .icon_plan p {
	display: inline-block;
	width: calc(100% / 6 - 122px / 6);

	letter-spacing: -0.3px;

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

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

section#plan .inner .icon_plan p:nth-child(1) { color:#ff9600; border-color:#ff9600; }
section#plan .inner .icon_plan p:nth-child(2) { color:#ff66c4; border-color:#ff66c4; }
section#plan .inner .icon_plan p:nth-child(3) { color:#00b900; border-color:#00b900; }
section#plan .inner .icon_plan p:nth-child(4) { color:#a54cff; border-color:#a54cff; }
section#plan .inner .icon_plan p:nth-child(5) { color:#38b6ff; border-color:#38b6ff; }
section#plan .inner .icon_plan p:nth-child(6) { color:#ff9600; border-color:#ff9600; }

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

section#plan .inner .icon_plan p:last-child {
	margin-right: 0;
}


section#plan .inner .planLink {
	height: 27px;
	line-height: 27px;
	margin-bottom: 20px;
}

section#plan .inner .planLink 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; /* 必要であればリンク要素の重なりのベース順序指定 */
}

section#plan .inner .planLink h4 {
	position: relative;
	top: 50px;

	margin: 0;
	font-size: 18px;
	font-weight: bold;

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


section#plan .inner .left {
	float: left;
	width: 231px;
}

section#plan .inner .left .image {

}

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

section#plan .inner .left .image img:hover { opacity:unset; }


section#plan .inner .right {
	float: right;
	width: 583px;
}


section#plan .inner .right .carInfo {
	font-size: 14px;
}

section#plan .inner .right .carInfo table {
	width: 100%;
	margin-bottom: 1px;
	border-collapse: collapse;
}

section#plan .inner .right .carInfo table:last-child {
	margin-bottom: 0;
}

section#plan .inner .right .carInfo table tr {
	border-bottom: solid 2px white;
}

section#plan .inner .right .carInfo table tr:last-child {
	border-bottom: none;
}


section#plan .inner .right .carInfo table th {
	position: relative;
	width: 25%;
	line-height: 20px;
	padding: 5px 0;
	font-size: 12px;
	font-weight: normal;
	color: white;
	text-align: center;
}
section#plan .inner .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;
}

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

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

section#plan .inner .right .carInfo table:nth-child(3) th { background-color:#00b900; }
section#plan .inner .right .carInfo table:nth-child(3) th:after { border-left-color: #00b900; }

section#plan .inner .right .carInfo table:nth-child(4) th { background-color:#a54cff; }
section#plan .inner .right .carInfo table:nth-child(4) th:after { border-left-color: #a54cff; }

section#plan .inner .right .carInfo table:nth-child(5) th { background-color:#38b6ff; }
section#plan .inner .right .carInfo table:nth-child(5) th:after { border-left-color: #38b6ff; }


section#plan .inner .right .carInfo table td {
	width: 75%;
	line-height: 20px;
	padding: 5px 10px 5px 16px;
	text-align: left;
}

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


section#plan .inner .right .carInfo table td p {
	width: 100%;
	margin: 0;

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


section#plan .inner .bottom {
	width: 576px;
	margin: 10px auto 0;
}

section#plan .inner .bottom .price {
	float: left;
	display: inline-block;
	vertical-align: middle;
	width: 272px;
	margin: 0 0 10px 0;
	padding: 0 5px;
	font-size: 14px;
	text-align: center;

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

section#plan .inner .bottom .price span {
	vertical-align: -6px;

	margin: 0 10px 0 5px;

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


section#plan .inner .bottom .reserve {
	float: right;
	display: inline-block;
	vertical-align: middle;

	position: relative;
	top: 8px;
	right: 15px;

	width: 245px;
	height: 42px;
	line-height: 22px;
	font-size: 14px;
	font-weight: bold;
}

/* ボタン 響きアニメーションCSS */
.reserve:before,
.reserve:after {
	content: "";
	position: absolute;
	z-index: -10;
	width: 245px;
	height: 42px;
	top: 0;
	left: 0;
	border-radius: 50px;
	background: #e50000;
	transform: translate3d(0,0,0);
}

.reserve:before	{ animation:resound 1s ease-out infinite; }
.reserve:after	{ animation:resound 1s ease-out 1s infinite; }

@keyframes resound{
	0%	{ transform:scale(.95); opacity:1 }
	90%	{ opacity:.1 } to { transform:scale(1.1,1.2); opacity:0 }
}


section#plan .inner .bottom .reserve a {
	z-index: 3;
	position: absolute;
	top: 0;
	right: 0;

	width: calc(100% - 20px);
	height: calc(100% - 20px);
	margin: 0;
	padding: 10px;
	color: #fff;
	text-align: center;
	background: #e50000;
	border-radius: 21px;

	animation: pypy 2s ease-out infinite;
	opacity: 1;
}

/* ボタン 縮小＆拡大アニメーションCSS */
@keyframes pypy {
	0%, 40%, 60%, 80%	{ transform: scale(1.0); }
	50%, 70%			{ transform: scale(0.95); }
}


section#plan .inner .bottom .reserve a:hover {
	color: #ffff00;
}

section#plan .inner .bottom .reserve a i {
	margin-left: 5px;
}


section#plan .inner .bottom .attention {
	padding: 10px;
	font-size: 10px;
	font-weight: bold;
	color: #e50000;
	background: #ffffc0;
	border-radius: 6px;
}


section#plan .inner a {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 0;

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

section#plan .inner 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;
}

section#plan .inner:hover p.more {
	color: #ffff00;
}

section#plan .inner p.more i {
	margin-right: 5px;
}

section#plan p.moreLink a {
	color: #ff66c4;
}




/************************************************************
　店舗TOP > みんなの口コミ
************************************************************/

section#review {

}

section#review h3 {
	float: left;

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

	height: 32px;
	line-height: 32px;
}

section#review button {
	float: right;

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

	margin: 0;
	padding: 0;

	background: -webkit-linear-gradient(90deg, #ddd, #fff);
	border: 1px solid #ccc;
	border-radius: 6px;
	box-shadow: 0 0 4px 0 rgba(64, 64, 64, 0.1);
}

section#review button a {
	display: block;
	width: unset;
	padding: 5px 10px;
	color: #4c4c4c;
	font-weight: bold;
	text-shadow: 0px -1px 0px #ddd;
	text-decoration: none;
}

section#review button a i {
	margin-right: 5px;
	color: #ff9600;
	text-shadow: none;
}


section#review ul {
	clear: both;
}

section#review ul li {
	margin-bottom: 20px;
}

section#review ul li .userIcon {
	/* float: left; */

	display: inline-block;
	width: 104px;
}

section#review ul li .userIcon p {
	margin-bottom: 3.5px;
	font-size: 11px;
	color: #ccc;
}

section#review ul li .userIcon p:last-child {
	margin-bottom: 0;
}

section#review ul li .userIcon p.userName {
	height: 20px;
	line-height: 20px;
	margin-bottom: 4px;
	font-size: 14px;
	font-weight: bold;
	color: unset;
	text-align: center;

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

section#review ul li .userIcon p i {
	margin-right: 3px;
}

section#review ul li .userIcon p span {
	font-weight: bold;
}

section#review ul li .userIcon p a {

}

section#review ul li .userIcon p a:hover {

}

section#review ul li .userIcon p a img {
	width: 100%;
	border-radius: 50%;
}

section#review ul li .reviewDetails {
	float: right;

  position: relative;
  display: inline-block;
  margin: 0 0 0 18px;
  padding: 10px;
  width: 748px;
  font-size: 14px;
  background: #fff;
  border: solid 2px #ff9600;
	border-radius: 6px;

  box-sizing: border-box;

	background: #fff;
}
section#review ul li .reviewDetails:before {
  content: "";
  position: absolute;
  top: 30%;
  left: -30px;
  margin-top: -13px;
  border: 13px solid transparent;
  border-right: 19px solid #fff;
  z-index: 2;
}
section#review ul li .reviewDetails:after {
  content: "";
  position: absolute;
  top: 30%;
  left: -34px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-right: 20px solid #ff9600;
  z-index: 1;
}

section#review ul li .reviewDetails:hover {
	background: #FFE9CC;
}
section#review ul li .reviewDetails:hover:before {
  border-right: 19px solid #FFE9CC;
}


section#review ul li .reviewDetails .post {
	float: left;

	width: 571px;
}

section#review ul li .reviewDetails .post p.title {
	height: 27px;
	margin-bottom: 4px;

	font-size: 18px;
	font-weight: bold;
}

section#review ul li .reviewDetails .post p.title a {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% - 173px);
	height: calc(100% - 20px);

	padding: 10px 163px 10px 10px;

	color: #333;
	text-decoration: none;

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

	z-index: 2; /* 理由：星レビューが「z-index:1;」のため */
}

/*
section#review ul li .reviewDetails .post p.title a:hover {
	color: #333;
	text-decoration: none;
}
*/


section#review ul li .reviewDetails .post p.text {
	display: -webkit-box;
	    -webkit-box-orient: vertical;
	    -webkit-line-clamp: 4;
	    overflow: hidden;

	height: 80px;
}



section#review ul li .reviewDetails .post p.star5,
section#review ul li .reviewDetails .post p.date {
	display: inline-block;
	vertical-align: middle;
	margin-bottom: 0;
}

section#review ul li .reviewDetails .post p.star5 {
	margin-right: 20px;
}

section#review ul li .reviewDetails .post p.date {
	color: #ccc;
}



section#review ul li .reviewDetails .post p span.star5_rating {
	line-height: 22px; /* 星の右に表示される数字の文字サイズが24px（=高さ29pxになる）のため。*/
	font-size: 14px;
}


section#review ul li .reviewDetails .post p span.average {
	vertical-align: middle;
	font-size: 18px;
	font-weight: bold;
	color: #ff9600;
}


section#review ul li .reviewDetails .photo {
	float: right;

	width: 143px;
	height: 143px;
}

section#review ul li .reviewDetails .photo p {
	height: 100%;
	margin: 0;
}

section#review ul li .reviewDetails .photo p img {
	width: 143px;
	height: 143px;
	object-fit: cover;

	border-radius: 6px;
}

section#review p.moreLink a {
	color: #ff9600;
}






/********** 右カラム ********/

aside {
	float: right;
	width: 300px;
	margin: 0;

	height: 1000px;
}


/************************************************************
　店舗TOP > 店舗基本情報　※右カラム
************************************************************/

table.shopData {
	display: table;
	border-collapse: separate;
	border-spacing: 0;

	width: 100%;
	line-height: 1.5;

	font-size: 14px;
	text-align: left;

	border-top: 1px solid #38b6ff;
	border-left: 1px solid #38b6ff;
}


table.shopData th {
	display: block;
	padding: 10px;
	font-weight: normal;
	text-align: center;
	vertical-align: middle;
	border-right: 1px solid #38b6ff;
	/* border-bottom: 1px solid #38b6ff; */
	/* border-top: 1px solid #fff; */
	/* border-left: 1px solid #fff; */
	background: #E0F3FF;
}

table.shopData td {
	display: block;
	padding: 10px;
	vertical-align: middle;
	border-right: 1px solid #38b6ff;
	border-bottom: 1px solid #38b6ff;
}

table.shopData td p {
	margin: 0;
}

table.shopData td p.headline {
	margin: 0 0 5px 0;
}


table.shopData td p a { color:#00b900; }

table.shopData td p i.fa-location-dot { margin-right:3px; }


table.shopData td hr {
	width: 100%;
	margin: 10px 0;
	border: none;
	border-top: dashed 1px #CCC;
	height: 1px;
}


table.shopData td ul {
	margin: 0;
}


/* お支払い方法 ここから */
table.shopData td ul.brand li {
	display: inline-block;
	width: calc(100% / 3 - 50px / 3);
	margin-right: 10px;
	margin-bottom: 10px;
	padding: 2.5px 5px;
	font-size: 12px;
	color: #fff;
	text-align: center;
	border-radius: 50px;
}

table.shopData td ul.brand.money li			{ background: #a54cff; }
table.shopData td ul.brand.card li			{ background: #ff66c4; }
table.shopData td ul.brand.electronic li	{ background: #00b900; }
table.shopData td ul.brand.qrcode li		{ background: #ff9600; }

table.shopData td ul.brand li:nth-child(3n) {
	margin-right: 0;
}
table.shopData td ul.brand li:nth-last-child(-n+3) {
	margin-bottom: 0;
}
/* お支払い方法 ここまで */




/************************************************************
　店舗TOP > 店舗スタッフ紹介　※右カラム
************************************************************/

div#staff {
	padding-bottom: 0;	/* 別CSSの適用を打ち消すため */
	border-bottom: 0;	/* 別CSSの適用を打ち消すため */
	margin-bottom: 0;	/* 別CSSの適用を打ち消すため */

	margin-top: 40px;
}

div#staff ul {

}

div#staff ul li {
	display: inline-block;
	vertical-align: top;

	width: 140px;
	margin-right: 20px;
	margin-bottom: 20px;
}

div#staff ul li:nth-child(2n) {
	margin-right: 0;
}

div#staff ul li:nth-last-child(-n+2) {
	margin-bottom: 0;
}

div#staff ul li .image {

}

div#staff ul li .image img {
	width: calc(100% - 2px);
	height: 139px;

	object-fit: cover;

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

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

div#staff ul li .text {
	height: 81px;

	margin: 0;
	padding: 10px;

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

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

div#staff ul li .text p {
	margin: 0;

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




/************************************************************
　店舗詳細ページ（全体）各箇所アニメーション設定
************************************************************/

/*==================================================
背景色が伸びて出現＝左から右へ流れる背景（適用箇所： 等）
※『「ちゅらベル」見た！で特典』以外
===================================*/

/*背景色が伸びて出現（共通）*/
.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: #ffff00;/*伸びる背景色の設定*/
}
@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;
}




/*==================================================
フェードアップ＝下から上へ出現（適用箇所：「class="box"」を設定済みの<li> 等）
===================================*/

/* スタート時は要素自体を透過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);
  }
}




/*==================================================
枠線が伸びて出現（適用箇所：「ちゅらベル」を見た！で特典あり の<h3>）
===================================*/

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

.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:#ff66c4;/* 枠線の色*/
}

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

/*上線*/
.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);
  }
}




/************************************************************
　店舗詳細ページ（全体）lightbox設定
************************************************************/

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