@charset "UTF-8";

/*
 * MW Form
 * page-mwform.php 専用。見た目は既存 style.css のフォーム指定に合わせている。
 */

.u-contact_form {
	--form-text: #000;
	--form-muted: #838383;
	--form-border: #e2e2e2;
	--form-input-border: #b9b9b9;
	--form-required: #d50000;
	--form-optional: #acacac;
	--form-accent: #67b0de;
	--form-accent-dark: #278cc3;
	--form-confirm-bg: #f5f5f5;
	--form-policy-bg: #f5f5f5;
	--form-waku-bg: #f4fafc;
	--form-radius: 4px;
	--form-input-pad: 8px;

	margin-top: 30px;
}

/* ----------------------------------------
   見出し
---------------------------------------- */

.u-contact_form h2 {
	background: none;
	border: none;
	margin-bottom: 10px;
	color: var(--form-text);
	font-size: 1.25rem;
	font-weight: bold;
}

.u-contact_form table + h2,
.u-contact_form div + h2 {
	margin-top: 50px;
}

/* ----------------------------------------
   定義リスト（旧レイアウト互換）
---------------------------------------- */

.u-contact_form dl {
	border-top: 1px solid var(--form-border);
}

.u-contact_form dl + dl {
	border-top: none;
}

.u-contact_form dl dt {
	margin: 0 0 10px;
	padding: 20px 10px 10px;
	font-weight: bold;
}

.u-contact_form dl dd {
	padding: 0 10px 20px;
	border-bottom: 1px solid var(--form-border);
}

/* ----------------------------------------
   テーブル
---------------------------------------- */

.u-contact_form table {
	width: 100%;
	border-top: 1px solid var(--form-border);
	border-collapse: collapse;
}

.u-contact_form table tr {
	border-bottom: 1px solid var(--form-border);
}

.u-contact_form table th,
.u-contact_form table td {
	vertical-align: top;
	text-align: left;
}

.u-contact_form table td {
	padding: 24px 10px;
}

.u-contact_form table th {
	position: relative;
	line-height: 1.6;
}

/* ----------------------------------------
   必須 / 任意
---------------------------------------- */

.u-contact_form .his,
.u-contact_form .nini {
	display: inline-block;
	padding: 3px 5px;
	border-radius: 2px;
	color: #fff;
	font-size: 0.75rem;
	line-height: 1;
	text-align: center;
}

.u-contact_form .his {
	background: var(--form-required);
}

.u-contact_form .nini {
	background: var(--form-optional);
}

.u-contact_form table th .his,
.u-contact_form table th .nini {
	position: static;
	margin-left: 0.5em;
	vertical-align: 0.15em;
}

/* ----------------------------------------
   入力部品
---------------------------------------- */

.u-contact_form input[type="text"],
.u-contact_form input[type="tel"],
.u-contact_form input[type="email"],
.u-contact_form select,
.u-contact_form textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 640px;
	margin: 0;
	padding: var(--form-input-pad);
	border: 1px solid var(--form-input-border);
	border-radius: var(--form-radius);
	font-size: 1rem;
	appearance: none;
}

.u-contact_form button {
	appearance: none;
}

.u-contact_form textarea {
	height: 150px;
	resize: vertical;
}

.u-contact_form select {
	padding-right: 20px;
	background: url(../img/contact/select.svg) no-repeat center right 5px;
}

.u-contact_form .datepicker {
	padding-right: 30px !important;
	background: url(../img/cmn/datepicker.svg) no-repeat center right 10px;
}

.u-contact_form input[type="radio"] {
	position: relative;
	top: -1px;
	margin: 0 5px 0 0 !important;
}

.u-contact_form label {
	cursor: pointer;
}

.u-contact_form .error {
	display: block;
	margin-top: 6px;
	color: var(--form-required);
	font-size: 0.75rem;
}

/* ----------------------------------------
   補足テキスト
---------------------------------------- */

.u-contact_form .hosoku,
.u-contact_form .hosoku2,
.u-contact_form .hosoku3,
.u-contact_form .hosoku4,
.u-contact_form .hosoku5 {
	display: block;
}

.u-contact_form .hosoku,
.u-contact_form .hosoku2 {
	color: var(--form-muted);
	font-size: 0.75rem;
	font-weight: 500;
}

.u-contact_form .hosoku2 {
	padding: 10px 0 0;
}

.u-contact_form .hosoku3 {
	padding: 10px 0 0;
	color: var(--form-text);
	font-size: 0.875rem;
	font-weight: bold;
}

.u-contact_form .hosoku4 {
	padding: 0;
	color: var(--form-text);
	font-size: 0.875rem;
	font-weight: 500;
}

.u-contact_form .hosoku5 {
	color: var(--form-text);
	font-size: 0.75rem;
	font-weight: 500;
}

.u-contact_form .hosoku.c-red {
	color: #f00;
}

/* ----------------------------------------
   ラジオ / チェック
---------------------------------------- */

.u-contact_form .radio_wrap._col2 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 28px;
}

.u-contact_form .radio_wrap._col2 label {
	display: inline-flex;
	align-items: center;
	margin-right: 0;
	white-space: nowrap;
}

.u-contact_form .radio_wrap._col2 .mwform-radio-field,
.u-contact_form .radio_wrap._col2 .mwform-checkbox-field {
	display: inline-flex;
	align-items: center;
	margin: 0;
}

.u-contact_form .radio_wrap._col1 label {
	display: block;
}

.u-contact_form .radio_wrap._col1 .mwform-checkbox-field,
.u-contact_form .radio_wrap._col1 .mwform-radio-field,
.u-contact_form .mwform-checkbox-field.vertical-item {
	display: block;
}

.u-contact_form .radio_wrap + .hosoku {
	margin-top: 8px;
}

.hide_label + .mwform-checkbox-field-text {
	display: none;
}

/* 本社と異なる / 担当者アドレスと異なる など */
.u-contact_form [toggle-name] {
	display: none;
	margin-top: 14px;
}

.mw_wp_form_confirm [toggle-name] {
	display: block;
}

/* ----------------------------------------
   幅ユーティリティ / インライン入力
---------------------------------------- */

.u-contact_form .w70 { width: 69%; }
.u-contact_form .w60 { width: 59%; }
.u-contact_form .w50 { width: 49%; }
.u-contact_form .w40 { width: 40%; }
.u-contact_form .w30 { width: 30%; }
.u-contact_form .w20 { width: 20%; }

.u-contact_form .w120px {
	width: 120px !important;
}

.u-contact_form ._intxt,
.u-contact_form ._intxt2,
.u-contact_form .flex2 {
	display: flex;
	align-items: center;
}

.u-contact_form ._intxt,
.u-contact_form ._intxt2 {
	justify-content: space-between;
}

.u-contact_form ._intxt input[type="text"],
.u-contact_form ._intxt input[type="tel"],
.u-contact_form ._intxt input[type="email"],
.u-contact_form ._intxt select {
	width: 87%;
}

.u-contact_form ._intxt2 input[type="text"],
.u-contact_form ._intxt2 input[type="tel"],
.u-contact_form ._intxt2 input[type="email"],
.u-contact_form ._intxt2 select,
.u-contact_form .w20._intxt input[type="text"],
.u-contact_form .w20._intxt input[type="tel"],
.u-contact_form .w20._intxt input[type="email"],
.u-contact_form .w20._intxt select {
	width: 80%;
}

/* ----------------------------------------
   請求書送付先（〒の下を空け、入力欄の左端を揃える）
---------------------------------------- */

.mw_wp_form:not(.mw_wp_form_confirm) .is-zip-address {
	display: grid;
	grid-template-columns: 1.75em minmax(0, 1fr);
	column-gap: 8px;
	row-gap: 10px;
	box-sizing: border-box;
	width: 100%;
	max-width: 640px;
	min-width: 0;
	margin-top: 8px;
}

.mw_wp_form:not(.mw_wp_form_confirm) .is-zip-row {
	display: contents;
}

.mw_wp_form:not(.mw_wp_form_confirm) .is-zip-mark {
	grid-column: 1;
	align-self: center;
	line-height: 1;
}

.mw_wp_form:not(.mw_wp_form_confirm) .is-zip-row > *:not(.is-zip-mark),
.mw_wp_form:not(.mw_wp_form_confirm) .is-zip-follow {
	grid-column: 2;
	box-sizing: border-box;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
}

.mw_wp_form:not(.mw_wp_form_confirm) .is-zip-address input,
.mw_wp_form:not(.mw_wp_form_confirm) .is-zip-address select {
	box-sizing: border-box;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
}

/* ----------------------------------------
   同意文 / ランク / 時間割
---------------------------------------- */

.u-contact_form .doui_txt {
	display: block;
	padding: 5px 0 20px 20px;
	color: #005f91;
	font-size: 0.875rem;
	line-height: 1.4;
}

.u-contact_form .doui_policy {
	height: 140px;
	margin: 8px 0;
	padding: 20px;
	overflow-y: scroll;
	border-radius: 5px;
	background: var(--form-policy-bg);
}

.u-contact_form .doui_policy p {
	margin-bottom: 1em;
}

.u-contact_form .doui_policy p.tit {
	margin-bottom: 10px;
	font-weight: bold;
}

.u-contact_form .doui_policy p.tit_wrap {
	font-size: 1.125rem;
	font-weight: bold;
}

.u-contact_form .doui_policy ul {
	margin-bottom: 1.5em;
}

.u-contact_form .doui_policy ul li {
	padding-left: 0.8em;
	text-indent: -0.8em;
	line-height: 1.4;
}

.u-contact_form .doui_policy ul li + li {
	margin-top: 5px;
}

.u-contact_form .doui_policy ul li > ul {
	margin-top: 10px;
}

.u-contact_form .doui_policy ul li > ul li {
	padding-left: 1em;
	text-indent: -1em;
}

.u-contact_form .rank_list {
	max-width: 600px;
}

.u-contact_form .rank_list li {
	overflow: hidden;
}

.u-contact_form .rank_list li + li {
	margin-top: 5px;
}

.u-contact_form .rank_list li .list_title {
	float: left;
}

.u-contact_form .rank_list li .list_radio {
	float: right;
}

.u-contact_form .rank_list li .list_radio label + label {
	margin-left: 20px;
}

.u-contact_form .timetable th,
.u-contact_form .timetable td {
	width: auto;
	padding: 5px;
}

.u-contact_form .timetable .wth {
	width: 120px;
}

.u-contact_form .timetable thead th {
	background: #f8fdff;
	font-weight: bold;
	text-align: center;
}

.u-contact_form .timetable tbody th {
	text-align: left;
}

.u-contact_form .timetable tbody td {
	vertical-align: middle;
	text-align: center;
}

/* ----------------------------------------
   送信ボタン
---------------------------------------- */

.u-contact_form .submit_wrap,
.submit_wrap {
	max-width: 500px;
	margin: 0 auto;
	padding: 30px 0;
	text-align: center;
}

.u-contact_form .submit_wrap input,
.u-contact_form .submit_wrap .backbtn,
.submit_wrap input,
.submit_wrap .backbtn {
	display: inline-block;
	box-sizing: border-box;
	min-width: 250px;
	padding: 16px 58px;
	border: 2px solid var(--form-accent);
	border-radius: 5px;
	color: #fff;
	background: var(--form-accent-dark) url(../img/cmn/icon_link_white.svg) no-repeat center right 15px;
	font-size: 1rem;
	letter-spacing: 1px;
	text-decoration: none !important;
	cursor: pointer;
	transition: opacity 0.5s;
}

.u-contact_form .submit_wrap input:hover,
.u-contact_form .submit_wrap .backbtn:hover,
.submit_wrap input:hover,
.submit_wrap .backbtn:hover {
	opacity: 0.7;
}

/* ----------------------------------------
   確認画面
---------------------------------------- */

.mw_wp_form.mw_wp_form_confirm .mw_confirm-hidden {
	display: none;
}

.mw_wp_form:not(.mw_wp_form_confirm) .mw_confirm-show,
.mw_wp_form .confirm__text {
	display: none;
}

.mw_wp_form_confirm .hosoku,
.mw_wp_form_confirm .hosoku2,
.mw_wp_form_confirm .hosoku3,
.mw_wp_form_confirm .hosoku4,
.mw_wp_form_confirm .hosoku5,
.mw_wp_form_confirm .his,
.mw_wp_form_confirm .nini,
.mw_wp_form_confirm .name,
.mw_wp_form_confirm .doui_txt,
.mw_wp_form_confirm .title,
.mw_wp_form_confirm .doui_policy,
.mw_wp_form_confirm .c-link {
	display: none !important;
}

.mw_wp_form_confirm .confirm__text {
	display: block;
	margin-top: 15px;
	color: #f00;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
}

.mw_wp_form_confirm .confirm__span {
	font-size: 13px;
}

.mw_wp_form_confirm .submit_wrap input + input {
	min-width: 250px;
	margin-top: 10px;
	padding: 16px 58px;
	border: none;
	color: #818181;
	background: #fff url(../img/cmn/icon_back.svg) no-repeat center left 15px;
}

.mw_wp_form_confirm .is-zip-address,
.mw_wp_form_confirm .is-zip-row,
.mw_wp_form_confirm .is-zip-follow,
.mw_wp_form_confirm [toggle-name] {
	display: block !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0;
	margin: 0 !important;
	grid-template-columns: none;
}

.mw_wp_form_confirm .is-zip-mark {
	display: inline;
	margin-right: 0.4em;
}

.mw_wp_form_confirm [toggle-name] .w50,
.mw_wp_form_confirm [toggle-name] .w30,
.mw_wp_form_confirm [toggle-name] .w40,
.mw_wp_form_confirm [toggle-name] .w20,
.mw_wp_form_confirm .is-zip-address .w50,
.mw_wp_form_confirm .is-zip-address .w30 {
	display: block !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 0 6px !important;
}

.mw_wp_form_confirm [toggle-name] ._intxt,
.mw_wp_form_confirm .is-zip-row {
	display: block !important;
	justify-content: flex-start;
}

.mw_wp_form_confirm [toggle-name] .mwform-text-field,
.mw_wp_form_confirm [toggle-name] .mwform-select-field,
.mw_wp_form_confirm [toggle-name] .mwform-email-field,
.mw_wp_form_confirm td .mwform-text-field,
.mw_wp_form_confirm td .mwform-select-field {
	display: block;
	width: auto;
	max-width: 100%;
	margin: 0 0 6px;
	word-break: normal;
	overflow-wrap: break-word;
	white-space: normal;
}

.mw_wp_form_confirm td {
	word-break: normal;
	overflow-wrap: break-word;
}

.mw_wp_form .mw__group .error {
	position: absolute;
	left: 0;
	bottom: -25px;
	display: block;
	white-space: nowrap;
}

.mw_wp_form .mw__post,
.mw_wp_form .mw__address,
.mw_wp_form .mw__text {
	position: relative;
	margin-top: 25px;
}

/* ----------------------------------------
   利用規約モーダル
---------------------------------------- */

.overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}

.modal-window {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 1100;
	box-sizing: border-box;
	width: 100%;
	max-width: 1000px;
	height: 90%;
	padding: 10px;
	border-radius: 5px;
	background-color: #fff;
	transform: translate(-50%, -50%);
}

.modal-window .doui_policy {
	box-sizing: border-box;
	height: 100%;
	margin: 0;
	padding: 10px;
	background: #fff;
}

.modal-window .doui_policy .c-waku {
	background: var(--form-waku-bg);
	padding: 20px 20px 15px;
	border-radius: 10px;
}

.modal-window .doui_policy .c-waku label {
	color: #b24a4a;
	font-size: 1rem;
	font-weight: bold;
}

.modal-window .doui_policy .c-waku + .c-waku {
	margin-top: 30px;
}

.js-open {
	margin-top: 15px;
}

.u-doui_btn {
	display: block;
	margin: 0 auto 20px;
	padding: 15px 30px;
	border: none;
	border-radius: 5px;
	background: #ddd;
	font-size: 0.875rem;
	cursor: pointer;
}

.u-doui_btn._doui {
	color: #fff;
	background: var(--form-accent);
}

.no_scroll {
	overflow: hidden;
}

/* ----------------------------------------
   案内ボックス / 完了
---------------------------------------- */

.u-contact_pickup {
	box-sizing: border-box;
	max-width: 840px;
	margin: 0 auto 30px;
	padding: 20px 10px 20px 90px;
	border: 1px solid #2998c9;
	border-radius: 10px;
	background: url(../img/contact/bg01@2x.png) no-repeat center left 15px / 58px auto;
	font-size: 1.25rem;
	font-weight: bold;
}

.u-contact_thanks {
	text-align: center;
}

.u-contact_thanks p + p {
	margin-top: 10px;
}

/* ----------------------------------------
   PC
---------------------------------------- */

@media (min-width: 769px) {
	.u-contact_form table th {
		width: 30%;
		max-width: 320px;
		padding: 24px 16px 24px 10px;
	}

	.u-contact_form .flex,
	.u-contact_form .radio_flex {
		display: flex;
		justify-content: space-between;
	}
}

/* ----------------------------------------
   SP
---------------------------------------- */

@media (max-width: 768px) {
	.u-contact_form dl dt,
	.u-contact_form dl dd {
		padding-left: 0;
		padding-right: 0;
	}

	.u-contact_form table {
		table-layout: fixed;
	}

	.u-contact_form table th,
	.u-contact_form table td {
		display: block;
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
		overflow-wrap: break-word;
		font-size: 0.875rem;
	}

	.u-contact_form table th {
		padding: 16px 0 8px;
		font-weight: bold;
	}

	.u-contact_form .radio_wrap._col2 {
		gap: 12px 20px;
		margin-bottom: 6px;
	}

	.u-contact_form table td {
		padding: 0 0 24px;
	}

	.u-contact_form input[type="text"],
	.u-contact_form input[type="tel"],
	.u-contact_form input[type="email"],
	.u-contact_form select,
	.u-contact_form textarea {
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		min-height: 44px;
		padding: 10px 12px;
		font-size: 16px;
	}

	.u-contact_form .is-zip-address {
		width: 100%;
		max-width: 100%;
	}

	.u-contact_form .radio_wrap._col1 label + label {
		margin-top: 5px;
	}

	.u-contact_form .w70,
	.u-contact_form .w60 {
		width: 100%;
	}

	.u-contact_form .w50 { width: 250px; }
	.u-contact_form .w40 { width: 200px; }
	.u-contact_form .w30 { width: 150px; }
	.u-contact_form .w20 { width: 100px; }

	.u-contact_form .w70 + div,
	.u-contact_form .w60 + div,
	.u-contact_form .w50 + div,
	.u-contact_form .w40 + div,
	.u-contact_form .w30 + div,
	.u-contact_form .w20 + div {
		margin-top: 15px;
	}

	.u-contact_form .w30 + .w30 {
		margin-top: 0;
	}

	.u-contact_form .radio_flex .txt,
	.u-contact_form .radio_flex label {
		display: block;
	}

	.u-contact_form .radio_flex label {
		margin-left: 10px;
	}

	.u-contact_form .radio_flex label + label {
		margin-top: 5px;
	}

	.u-contact_form .doui_policy {
		height: 250px;
	}

	.u-contact_form .doui_policy p.tit_wrap {
		font-size: 1rem;
	}

	.u-contact_form .timetable th,
	.u-contact_form .timetable td {
		display: table-cell;
	}

	.submit_wrap input,
	.submit_wrap .backbtn {
		font-size: 0.875rem;
	}

	.mw_wp_form_confirm td {
		padding: 10px !important;
		background: var(--form-confirm-bg);
	}

	.mw_wp_form_confirm .confirm__text {
		font-size: 16px;
	}

	.u-contact_pickup {
		padding: 50px 15px 15px;
		background: url(../img/contact/bg01@2x.png) no-repeat top 13px center / 30px auto;
		font-size: 1rem;
	}

	.modal-window {
		width: 90%;
		padding: 10px 0;
	}

	.modal-window .doui_policy {
		height: 100%;
	}

	.js-open {
		display: block;
		margin: 15px auto 0;
	}
}