@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_reservePage {
	margin: 4.5px 0 0 0;
	color: #969696;
}

#breadcrumb {
	margin-top: 51px;
}




.PlanDetails { 		/* プラン詳細ページにのみ適用する追加CSS要素 */
	margin: 40px auto 120px !important;
	padding-bottom: 0;
	border-bottom: none;
}



main #main_Region.PlanDetails .content {
	margin: 0;
	padding-bottom: unset;
	border-bottom: none;

	display: flex;	/* 左カラム追従に必要 */
}




main #main_Region.PlanDetails .content aside {
	width: calc(100% - 860px);
}


main #main_Region.PlanDetails .content aside .left {
	width: 300px;
	position: sticky;
	top: 90px;
}


aside .left .image {
	margin-bottom: 20px;
}

aside .left .image p {
	margin: 0;
}

aside .left .image p img {
	width: 100%;
}


aside .left .price {
	margin-bottom: 20px;
	padding: 10px 20px 20px 20px;
	border: 1px solid #ccc;
}

aside .left .price p.rate {
	margin: 0 0 10px 0;
	padding: 0;
	font-size: 14px;
	text-align: center;

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

aside .left .price p.rate span {
	vertical-align: -4px;

	margin: 0 8px 0 4px;

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

aside .left .price p.caution {
	margin: 0;
	font-size: 10px;
	font-weight: bold;
	color: #e50000;
	border-radius: 6px;
	letter-spacing: -0.6px;
}




/*** 左カラム PR（予約を促進するバナー等に限る）***/

aside .left .pr {
	margin-bottom: 0;
}

aside .left .pr p {
	margin: 0;
}

aside .left .pr p img {
	width: 100%;
}




main #main.preselection {
	float: right;
	width: 860px;
	margin: 0;
}

main #main.preselection .prohibit {
	width: calc(100% - 46px);
	margin: 0 auto 20px;
	padding: 20px;
	color: #fff;
	background: #ff0080;
	border: 3px solid #ff0;
	border-radius: 6px;
}
main #main.preselection .prohibit p {
	margin: 0;
}
main #main.preselection .prohibit p b {
	color: #ff0;
	text-decoration: underline;
}
main #main.preselection .prohibit p span {
	font-size: 12px;
}

main #main.preselection .prohibit p a {
	color: #ff0;
}

main #main.preselection h2 {
	font-size: 20px;
	text-align: left;
}

main #main.preselection h3 {
	margin: 0 0 10px 0;
	font-size: 20px;
}


main #main.preselection h3.Pink		{ color:#ff66c4; }
main #main.preselection h3.Orange	{ color:#ff9600; }
main #main.preselection h3.Green	{ color:#00b900; }
main #main.preselection h3.Blue		{ color:#38b6ff; }


main #main.preselection table {
	width: 100%;
	border-collapse: collapse;

	margin-bottom: 40px;

	font-size: 16px;
}

main #main.preselection table tr {
	border-bottom: solid 1px white;
}

main #main.preselection table tr:last-child {
	border-bottom: none;
}

main #main.preselection table th {
	position: relative;
	width: 40%;
	padding: 20px;
	font-weight: normal;
	color: white;
	text-align: center;
}

main #main.preselection table.overview th	{ background-color:#ff66c4; }
main #main.preselection table.option th		{ background-color:#ff9600; }
main #main.preselection table.insurance th	{ background-color:#00b900; }
main #main.preselection table.seat th		{ background-color:#38b6ff; }


main #main.preselection table th:after {
	display: block;
	content: "";

	position: absolute;
	top:calc(50% - 10px);
	right:-10px;

	width: 0;
	height: 0;
	border-left: 10px solid;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
}

main #main.preselection table.overview th:after		{ border-left-color:#ff66c4; }
main #main.preselection table.option th:after		{ border-left-color:#ff9600; }
main #main.preselection table.insurance th:after	{ border-left-color:#00b900; }
main #main.preselection table.seat th:after			{ border-left-color:#38b6ff; }


main #main.preselection table td {
	width:60%;
	padding: 20px 20px 20px 25px;

	background-color: #f2f2f2;

	font-size: 0;
}

main #main.preselection table td p {
	display: inline-block;
	vertical-align: middle;
	margin: 0;
	font-size: 16px;
}

main #main.preselection table td p.choice {
	float: left;
}


main #main.preselection table td p.price {
	float: right;

	font-family: Impact;
	font-size: 24px;
}

main #main.preselection table.overview td p.price	{ color:#ff66c4; }
main #main.preselection table.option td p.price		{ color:#ff9600; line-height:29px; }
main #main.preselection table.insurance td p.price	{ color:#00b900; line-height:29px; }
main #main.preselection table.seat td p.price		{ color:#38b6ff; line-height:82px; }

main #main.preselection table td p.price::before {
    content: "＋";
	vertical-align: middle;
	margin-right: 4px;
	font-size: 12px;
	font-weight: normal;
}
main #main.preselection table td p.price::after {
    content: "円";
	vertical-align: 1px;
	margin-left: 4px;
	font-size: 12px;
	font-weight: normal;
}

main #main.preselection table.seat td p.price::after {
    content: "円 / 個";
}

main #main.preselection table td p label {
	display: inline-block;
	height: 26px;
	font-size: 16px;
	cursor: pointer;
}

main #main.preselection table td p label input {
	vertical-align: text-bottom;
	margin: 0 5px 0 0;
	width: 20px;
	height: 20px;
	cursor: pointer;

	/*accent-color: #ff66c4;*/
}


main #main.preselection table.seat td p.image { width:82px; margin-right:20px; }
main #main.preselection table.seat td p.image img { width:100%; }


main #main.preselection table.seat td .level {
	display: inline-block;
	vertical-align: middle;
	width: 102px;
	margin-right: 20px;
}

main #main.preselection table.seat td .level p {
	display: block;
	height: 24px;
	line-height: 24px;
	margin-bottom: 5px;
	font-size: 12px;
}
main #main.preselection table.seat td .level p:last-child {
	margin-bottom: 0;
}

main #main.preselection table.seat td .level p span {
	margin-right: 5px;
	padding: 5px;
	background: #E0F3FF;
}


main #main.preselection table.seat td p.select {	/* selectボックスの親要素 */
    position: relative;
    width: 60px;
	margin: 0;
	margin-right: 20px;
}

main #main.preselection table.seat td p.select:after {	/* selectボックスの親要素にオリジナルの矢印を宣言 */
	content: "";
	position: absolute;
	right: 15px;
	top: 21.5px;
	width: 7px;
	height: 7px;
	transform: translateY(-50%) rotate(-135deg);
	pointer-events: none;

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

main #main.preselection table.seat td p.select select {
	position: relative;
	padding: 15px;
	width: 100%;
	-webkit-appearance: none;
	-moz-appearance: none;

	margin: 0;

	font-size: 16px;
	color: #333;

	appearance: none;

	/* 枠線・背景色などの装飾追記分 */
	border-color: #333;
	background-color: #ececec;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #ececec));
	background-image: -webkit-linear-gradient(top, white, #ececec);
	background-image: -moz-linear-gradient(top, white, #ececec);
	background-image: -ms-linear-gradient(top, white, #ececec);
	background-image: -o-linear-gradient(top, white, #ececec);
	background-image: linear-gradient(top, white, #ececec);

	border-radius: 6px;
}




main #main.preselection table td div.reserve_calendar,
main #main.preselection table td div.reserve_time {
	display: inline-block;
	vertical-align: bottom;

	/*
	height: 40px;
	line-height: 40px;
	*/
}

main #main.preselection table td div select {
	margin: 0;
	border-radius: 6px;
}


/***** 出発日カレンダー・返却日カレンダー *****/

main #main.preselection table td .reserve_calendar {
	width: 166px;
	height: 77px;
}
main #main.preselection table td .reserve_calendar:after {
	position: relative;
	left: 137px;
	bottom: 32.5px;

	font-family: "Font Awesome 5 Free";
	content: '\f073';
	font-size: 16px;
	font-weight: 900;
	color: #999;

	width: 16px;
	cursor: pointer;
}

main #main.preselection table td .reserve_calendar p {
	margin-bottom: 5px !important;
	font-weight: bold;
	color: #ff0080;
}

main #main.preselection table td .reserve_calendar input.calendar_start,
main #main.preselection table td .reserve_calendar input.calendar_end {
	width: calc(100% - 15px);
	height: 44px;
	padding: 0 0 0 15px;
	font-size: 16px;
	font-weight: bold;
	color: #333;
	cursor: pointer;

	border-top: 2px solid #333;
	border-right: 0;
	border-bottom: 2px solid #333;
	border-left: 2px solid #333;
}

main #main.preselection table td .reserve_calendar input.calendar_start::placeholder,
main #main.preselection table td .reserve_calendar input.calendar_end::placeholder {
	color: #333;
}


/***** 出発時間・返却時間 *****/

main #main.preselection table td .reserve_time {
	width: 140px;
	height: 48px;
}

main #main.preselection table td .reserve_time select.time_start,
main #main.preselection table td .reserve_time select.time_end {
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 0 0 15px;
	font-size: 16px;
	font-weight: bold;
	color: #333;
	cursor: pointer;
	border: 2px solid;
	border-color: #333;
	border-radius: 0px;
	appearance: none;
}


main #main.preselection table td .reserve_time:after {	/* selectボックスの親要素にオリジナルの矢印を宣言 */
	content: "";
	position: relative;
	left: 113px;
	bottom: 27px;
	width: 7px;
	height: 7px;
	transform: translateY(-50%) rotate(-135deg);
	pointer-events: none;

    border-top: 2px solid #333;
    border-left: 2px solid #333;
}




/*** 予約情報入力フォームにのみ適用 ここから ***/
main #main.preselection.reserve table th {
	width: 13%;
}

main #main.preselection.reserve table td {
	width:87%;
}

main #main.preselection.reserve table td p {
	display: block;
	margin-bottom: 10px;
}
main #main.preselection.reserve table td.breakdown p {
	font-size: 12px;
}
main #main.preselection.reserve table td p:last-child {
	margin-bottom: 0;
}

main #main.preselection.reserve table td.breakdown p.caution {
	font-size: 16px;
}
main #main.preselection.reserve table td.breakdown p.caution font {
	font-weight: bold;
	color: #ff0080;
	text-decoration: underline;
}

main #main.preselection.reserve table td p b {
	font-size: 16px;
}

main #main.preselection.reserve table td p span {
	font-size: 24px;
	font-weight: bold;
	color: #ff0080;
}
/*** 予約情報入力フォームにのみ適用 ここまで ***/




/* ［予約情報の入力へ進む］ボタン直上の注意事項 */

main #main.preselection .attention {
	width: 500px;
}

main #main.preselection .attention p {
	color: #e50000;
}

main #main.preselection .attention p span {
	font-weight: bold;
	border-bottom: 2px solid #e50000;
}




/* ［予約情報の入力へ進む］［確認画面へ進む］ボタン */

main #main.preselection .bottom {
	width: 540px;
	height: 60px;
	margin: 0 auto;
}

main #main.preselection .bottom button {
	position: absolute;

	padding: 0;
	border: 0;
	background: #fff;
}

main #main.preselection .bottom button::after {
	position: absolute;
	top: 20.5px;

	content: '\f101';
	font-family: "Font Awesome 6 Free";
	font-size: 20px;
	font-weight: 900;
	color: #ff0;
	text-shadow: 1px 2px 2px rgba(0,0,0,0.2);

	cursor: pointer;
}
main #main.preselection .bottom button.To-Reserve::after {
	left: 383px;
}
main #main.preselection .bottom button.To-Check::after {
	left: 349px;
}
main #main.preselection .bottom button.To-Reserve-Send::after {
	left: 399px;
}

main #main.preselection .bottom button:hover {
	opacity: 0.8;
}


main #main.preselection .bottom button input {
	width: 540px;
	height: 60px;

	font-size: 20px;
	font-weight: bold;
	letter-spacing: 1px;
	color: #fff;
	text-shadow: 1px 2px 2px rgba(0,0,0,0.2);
	border: 1px solid #e50000;

	border-radius: 6px;
	-webkit-border-radius: 6px;

	background: #e50000;
	background-image: -webkit-linear-gradient(#ff7272 0%, #e50000 100%);
	background-image: linear-gradient(#ff7272 0%, #e50000 100%);

	-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);

	cursor: pointer;
}




/*** 予約確認・キャンセルページにのみ適用 ここから ***/

main #main.preselection.reserve.order table td p a { color:#333; }
main #main.preselection.reserve.order table td p.contact a:hover { text-decoration:none; }
main #main.preselection.reserve.order table td p.contact a i { margin-right:5px; }
main #main.preselection.reserve.order table td p.contact a i.fa-square-phone	{ color:#38b6ff; }
main #main.preselection.reserve.order table td p.contact a i.fa-square-envelope { color:#00b900; }

main #main.preselection .bottom.Btn {
	width: 360px;
	height: 40px;
	margin-bottom: 20px;
}


/* ここでのボタン2つ共通CSS */




/* この予約を日時変更する */
main #main.preselection .bottom button.To-Change::after {
	top: 11px;
	left: 287px;
	color: #fff;
}

main #main.preselection .bottom button.To-Change input {
	width: 360px;
	height: 40px;

	font-size: 16px;

	border: 1px solid #ff0080;

	border-radius: 6px;
	-webkit-border-radius: 6px;

	background: #ff0080;
	background-image: -webkit-linear-gradient(#FF7FC1 0%, #ff0080 100%);
	background-image: linear-gradient(#FF7FC1 0%, #ff0080 100%);

	-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);

	cursor: pointer;
}


/* この予約をキャンセルする */
main #main.preselection .bottom button.To-Cancel::after {
	top: 11px;
	left: 287px;
	color: #fff;
}

main #main.preselection .bottom button.To-Cancel input {
	width: 360px;
	height: 40px;

	font-size: 16px;

	border: 1px solid #000;

	border-radius: 6px;
	-webkit-border-radius: 6px;

	background: #000;
	background-image: -webkit-linear-gradient(#888 0%, #000 100%);
	background-image: linear-gradient(#888 0%, #000 100%);

	-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);

	cursor: pointer;
}

/*** 予約確認・キャンセルページにのみ適用 ここまで ***/