@charset "UTF-8";

.contact *, .contact *::before, .contact *::after {
	position: relative;
	box-sizing: border-box;
	text-decoration: none;
	transition: 0.2s linear;
}

/* main */

.contact {
	width: 100%;
	margin: 0 auto 80px;
	font-size: 16px;
}

	.contact .banner img {
		width: 100%;
	}

	.contact p.form-note {
		color: #e30043;
	}

		.contact p.form-note.word-4 {
			margin: 0 0 24px 5.5em;
		}

		.contact p.form-note.word-6 {
			margin: 0 0 24px 7.5em;
		}

	.contact .explain {
		margin: 4px 0 4px 0.4em;
		font-size: 16px;
		text-indent: -0.4em;
	}

.form-list {
	display: flex;
	align-items: baseline;
	width: calc(50% - 24px);
	margin: 8px 12px;
	font-size: 16px;
}

	.form-list.w-100 {
		width: calc(100% - 24px);
	}

	.form-list .title {
		display: inline-block;
		padding: 0 1em 0 0;
		font-size: 1em;
		text-align-last: justify;
	}
/* title word-4 */
.title.word-4 {
	width: 5em;
}

	.title.word-4 + .form-control {
		width: calc(100% - 5em);
	}

	.title.word-4 + .form-multiple {
		width: calc(100% - 5em);
	}

	.title.word-4 ~ .select-list {
		left: 5em;
		width: calc(100% - 5em);
	}

/* title word-6 */
.title.word-6 {
	width: 7em;
}

	.title.word-6 + .form-control {
		width: calc(100% - 7em);
	}

	.title.word-6 + .form-multiple {
		width: calc(100% - 7em);
	}

	.title.word-6 ~ .select-list {
		left: 7em;
		width: calc(100% - 7em);
	}

.form-list.subject, .form-list.caption {
	flex-direction: column;
	width: 100%;
}

.form-list.subject {
	margin: 0 8px 36px 5em;
}

	.form-list.subject .title {
		font-size: 28px;
	}

		.form-list.subject .title:before {
			position: absolute;
			top: 4px;
			left: -48px;
			content: url(/Content/Img/ReqForm/file.png);
		}

	.form-list.subject .explain {
		font-size: 15px;
	}

		.form-list.subject .explain a {
			display: inline-block;
			color: #ec6519;
		}

.form-list.caption {
	width: calc(100% - 16px);
	margin: 0 8px 36px;
	border-bottom: 3px solid #ec6519;
}

	.form-list.caption .title {
		margin: 0 0 20px;
		font-size: 20px;
	}

		.form-list.caption .title:before {
			display: inline-block;
			margin: 0 8px 0 0;
			vertical-align: middle;
		}

.base .form-list.caption .title:before {
	content: url(/Content/Img/ReqForm/base.png);
}

.detail .form-list.caption .title:before {
	content: url(/Content/Img/ReqForm/detail.png);
}

/* contact-form overwrite */

/* 連絡方式 */
.form-list.method .form-multiple {
	max-width: 480px;
}

.form-list.method .opt-control label {
	width: 50%;
}

/* 送出 */
.form-list.sent {
	justify-content: center;
	width: 100%;
	margin: 60px 0 12px;
}

	.form-list.sent .btn {
		background-color: #fff;
		width: 124px;
		margin: 12px;
		padding: 6px;
		color: #45403f;
		font-size: 16px;
		text-align: center;
		border: 1px solid #686564;
		cursor: pointer;
	}

		.form-list.sent .btn a {
			color: inherit;
			transition: 0s linear;
		}

		.form-list.sent .btn.submit {
			background-color: #ff671e;
			color: #fff;
			border-color: #ff671e;
		}

		.form-list.sent .btn.return:hover {
			color: #ff671e;
			border-color: #ff671e;
		}

/* firm-form overwrite */

/* 連絡人 */
.form-list.firm-contact .form-multiple {
	justify-content: space-between;
}

.form-list.firm-contact .form-control {
	width: calc(100% - 8.5em);
}

.form-list.firm-contact .opt-control label:last-child span {
	margin: 0;
}

/* 旅遊地點 */
/* .form-list.firm-site .form-control.icon:before { content:url(../images/site.png); } */

/* 指定艙等 */
.form-list.firm-rank .form-control.icon:before {
	content: url(/Content/Img/ReqForm/rank.png);
}

.form-list.firm-rank .select-list li .st-item:before {
	content: url(/Content/Img/ReqForm/plain.png);
	display: inline-block;
	margin: 0 12px 0 4px;
	vertical-align: middle;
	transition: 0s linear;
}

.form-list.firm-rank .select-list li .st-item:hover:before {
	filter: brightness(100);
}

/* 出發日期 */
.form-list.firm-date .form-control {
	width: calc(50% - 4.25em);
	min-width: 300px;
	margin: 0 20px 0 0;
	color: #ec6519;
}

	.form-list.firm-date .form-control.icon:before {
		content: url(/Content/Img/ReqForm/date.png);
	}

/* module */
.asterisk .title:after {
	position: absolute;
	content: '*';
	display: inline-block;
	margin: 0 2px;
	color: #e30043;
}

.dash {
	margin: 0 8px;
}

.count-word {
	margin: 0 0 0 8px;
}

/* form 表單 */
.form-group {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	max-width: 960px;
	margin: 40px auto;
}

	.form-group.detail {
		flex-direction: column;
	}

.form-multiple {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
}

	.form-multiple.form-tel {
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	.form-multiple.column-lines {
		flex-direction: column;
		align-items: baseline;
	}

	.form-multiple.rows-lines {
		align-items: baseline;
	}

.form-control {
	background-color: #fff;
	width: auto;
	height: 36px;
	padding: 6px 8px;
	font-size: 1em;
	text-align: justify;
	vertical-align: middle;
	border: 1px solid #686564;
	white-space: nowrap;
	overflow: hidden;
	resize: none;
}

	.form-control.w-20, .form-control.w-20 ~ .select-list {
		width: 20%;
	}

	.form-control.w-40, .form-control.w-40 ~ .select-list {
		width: 40%;
	}

	.form-control.w-60, .form-control.w-60 ~ .select-list {
		width: 60%;
	}

	.form-control.w-80, .form-control.w-80 ~ .select-list {
		width: 80%;
	}

	.form-control.w-100, .form-control.w-100 ~ .select-list {
		width: 100%;
	}

	.form-control.minw-120, .form-control.minw-120 ~ .select-list {
		min-width: 120px;
	}

	.form-control.minw-160, .form-control.minw-160 ~ .select-list {
		min-width: 160px;
	}

	.form-control.elastic {
		height: 9em;
		white-space: normal;
		overflow: auto;
	}

	.form-control:focus {
		border: 1px solid #ec6519;
		outline: none;
	}

	.form-control:disabled {
		border-color: #ccc;
	}

.opt-control {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
}

	.opt-control label {
		display: inline-block;
		margin: 4px 0;
		cursor: pointer;
	}

	.opt-control.td-4 label {
		width: 180px;
	}

	.opt-control label.w-500 {
		display: flex;
		align-items: center;
		width: 500px;
	}

		.opt-control label.w-500 .form-control {
			flex-grow: 2;
		}

	.opt-control label input {
		margin: 0 8px 0 0;
		vertical-align: middle;
	}

	.opt-control label span {
		margin: 4px 8px 4px 0;
		vertical-align: middle;
		white-space: nowrap;
	}

	.opt-control input[type="checkbox"], .opt-control input[type="radio"] {
		width: 16px;
		height: 16px;
		border: 1px solid #999;
		appearance: none;
		cursor: pointer;
	}

	.opt-control input[type="radio"] {
		border-radius: 50%;
	}

		.opt-control input[type="checkbox"]:checked, .opt-control input[type="radio"]:checked {
			background-color: #ff671e;
			border-color: #ff671e;
		}

.opt-lines {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	width: 100%;
	margin: 0 0 16px;
}

	.opt-lines:last-child {
		margin: 0;
	}

	.opt-lines .subtitle.word-3 {
		width: 4em;
		letter-spacing: 1em;
	}

.subtitle.word-3 ~ .select-list {
	left: 4em;
}

.opt-lines .subtitle.word-6 {
	width: 7em;
}

.subtitle.word-6 ~ .select-list {
	left: 7em;
}

/* select 選單 */
.form-control.select {
	padding: 6px 48px 6px 8px;
	cursor: pointer;
}

	.form-control.select.active {
		border: 1px solid #ec6519;
		outline: none;
	}

	.form-control.select:after {
		position: absolute;
		top: 50%;
		right: 16px;
		content: '';
		display: block;
		width: 0;
		height: 0;
		border-width: 6px 6px 0 6px;
		border-style: solid;
		border-color: #ec6519 transparent transparent transparent;
		transform: translateY(-50%);
	}

.select-list {
	position: absolute;
	top: 36px;
	display: none;
	background-color: #fff;
	z-index: 200;
}

	.select-list:before {
		position: absolute;
		top: 0;
		left: 0;
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		border: solid #686564;
		border-width: 0 1px 1px;
	}

	.select-list.show {
		display: block;
	}

	.select-list li {
		display: block;
		width: 100%;
		list-style: none;
	}

	.select-list > li.hide {
		display: none;
	}

/* 選單項目 */
.st-return, .st-title, .st-item {
	display: block;
	width: 100%;
	padding: 8px;
	color: #686564;
	cursor: pointer;
	transition: 0.1s ease-out;
}

.select-list li .st-return:hover, .select-list li .st-title:hover, .select-list li .st-item:hover {
	background-color: #ed6f25;
	color: #fff;
}

.st-return {
	display: none;
	padding: 12px 8px;
	color: #ed6f25;
	font-size: 14px;
}

/* 第二層 選單 */
.select-list.show li.show .st-return {
	display: block;
}

.select-list.show li.show .st-title {
	color: #000;
	font-size: 14px;
	font-weight: bold;
}

	.select-list.show li.show .st-title:hover {
		background-color: transparent;
		color: #000;
		cursor: default;
	}

.select-sublist {
	display: none;
	width: 100%;
}

	.select-sublist li .st-item {
		padding: 8px 8px 8px 40px;
	}

.select-list.show li.show .select-sublist {
	display: block;
}

/* form-control icon */
.form-control.icon {
	padding: 6px 8px 6px 36px;
}

.form-control.select.icon {
	padding: 6px 36px;
}

.form-control.icon:before {
	position: absolute;
	top: 50%;
	left: 8px;
	content: '';
	display: block;
	width: 20px;
	height: 20px;
	transform: translateY(-50%);
}

/* input[type="date"] */
input.form-control.select[type="date"]::-webkit-calendar-picker-indicator {
	position: absolute;
	width: 100%;
	opacity: 0;
	cursor: pointer;
	z-index: 10;
}


/* overwrite */


/* rwd */
@media screen and (max-width:800px) {
	/* .contact { width:96%; } */
	.form-group.detail {
		flex-direction: row;
	}

	.form-list {
		width: 100%;
	}

		.form-list.method .opt-control label {
			width: 100%;
		}

	.opt-control {
		width: 100%;
	}

		.opt-control.td-4 label {
			width: calc(100%/3);
		}

			.opt-control.td-4 label.w-500 {
				width: 100%;
			}

	.rows-lines .form-control.select {
		flex-grow: 2;
	}

	.rows-lines .opt-control {
		width: auto;
	}

		.rows-lines .opt-control label:last-child span {
			margin: 0;
		}
}

@media screen and (max-width:600px) {
	.form-list {
		font-size: 15px;
	}

	.form-control.elastic {
		height: 30vh;
	}

	.opt-control.td-4 label {
		width: 100%;
	}

	.firm-traffic .opt-control.td-4 label {
		flex-wrap: wrap;
	}

	.rows-lines .form-control, .rows-lines .form-control.select {
		width: 100% !important;
		min-width: unset;
		margin: 0;
	}

	.rows-lines .opt-control {
		width: 100%;
	}
}