@charset "UTF-8";

/*
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
WP Maruso Group Theme
	ver.2023.08.16.Custom-
	プラグイン「MW WP Form」使用フォームメール　スタイルシート
────────────────────────────────────────
FileName:		/marusogroupTheme/assets/css/style-mw_wp_form-custom.css
Editor:			TRUSTEC
Description:	プラグイン「MW WP Form」使用フォームメール　スタイルシート
────────────────────────────────────────
2023/07/25:		公開。
2022/12/01:		開発開始。
2022/11/01:		サンプル開発開始。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/





/* ::::: [COMMON] ::::: */






/* ::::: [COMMON-PARTS] ::::: */






/* ::::: [SECTION : PROGRESSBAR] ::::: */

/* Setting
--------- --------- --------- ------- */
.progressbar {
	--flow-base-background-color: #ffffff;
	/*--flow-base-background-color: rgba(255, 180, 0, 0.1);*/
	--flow-common-background-color: #ebebeb;
	--flow-common-color: #707070;
	--flow-current-background-color: var(--common-pointed-color-1);
	--flow-current-color: #ffffff;
/*	--flow-past-background-color: #a0a0a0;
	--flow-past-color: currentColor;*/
	--flow-past-background-color: #ebebeb;
	--flow-past-color: #707070;

	background-color: var(--flow-base-background-color);
	font-size: max(0.8rem, 1.3vw);
	font-family: var(--common-font-family);
	font-style: var(--common-font-style);
	font-weight: var(--common-font-weight-bold);
}

.progressbar-wrapper {
	/*background-color: rgba(255, 180, 0, 0.1);*/
}

/**	Lists	*/
.progressbar ol {
	counter-reset: progressbar-count;
	list-style-type: none;

	font-size: inherit;
	font-family: inherit;
	font-style: inherit;
	font-weight: inherit;

	margin: 0;
	padding: 0;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.progressbar ol li {
	counter-increment: progressbar-count;

	background-color: var(--flow-common-background-color);
	color: var(--flow-common-color);
	line-height: 1.5;
	text-align: center;
	width: calc(30% - 2em);
	padding: 1em 0;
	position: relative;
}

.progressbar ol li::before,
.progressbar ol li::after {
	content: "";

	margin: auto;
	border: solid 1.7em transparent;
	border-left: solid 1.4em var(--flow-common-background-color);
	position: absolute;
	top: 0;
	bottom: 0;
	left: 100%;
	z-index: 2;
}
.progressbar ol li::before {
	margin-left: 0;
	border-width: 2em;
	border-left-width: 1.7em;
	border-left-color: var(--flow-base-background-color);
}

/**	Past Item	*/
.progressbar ol li.past {
	background-color: var(--flow-past-background-color);
	color: var(--flow-past-color);
}
.progressbar ol li.past::after {
	border-left-color: var(--flow-past-background-color);
}

/**	Current Item	*/
.progressbar ol li.current {
	background-color: var(--common-pointed-color-1);
	color: var(--flow-current-color);
}
.progressbar ol li.current::after {
	border-left-color: var(--common-pointed-color-1);
}


/* Media Query
--------- --------- --------- ------- */
/*	DisplayWidth > XL	*/
@media (min-width: 1400px) {
}
/*	DisplayWidth < MD	*/
@media (max-width: 767px) {
}
/*	DisplayWidth < XS	*/
@media (max-width: 575px) {

	/* Setting
	--------- --------- --------- ------- */
	.progressbar {
	}

	/**	Lists	*/
	.progressbar ol {
		display: block;
		background-color: var(--flow-common-background-color);
	}
	.progressbar ol::after {
		content: "";
		display: block;
		clear: both;
	}

	.progressbar ol li {
		float: left;
		margin-right: 2em;
	}
}






/* ::::: [SECTION : CONTACT FORMS] ::::: */

/* Setting
--------- --------- --------- ------- */
.contact-form {
	/*background-color: rgba(180, 255, 0, 0.1);*/
}

::placeholder {
	color: #aaaaaa;
}


.contact-form .lead {
	font-size: max(1rem, 1.57vw);	/*	30px	*/
	text-align: center;
	line-height: 1.5em;
}

.contact-form .formsend-buttons {
	display: flex;
	justify-content: center;
	/*gap: 2em;*/
}


/* Controlls BootStrap Hack
--------- --------- --------- ------- */
/**	見出し	*/
.contact-form .form-label {
	font-weight: var(--common-font-weight-bold);
	padding: 1.3em 0;
	/*background-color: rgba(255, 180, 0, 0.1);*/
}

/**	テキスト入力	*/
.contact-form .form-text {
	background-color: #ebebeb;
	color: currentColor;
	line-height: 1.5em;
	margin: 0;
	padding: 1em 2em;
	border: none;
	border-radius: 1vw;
}
.contact-form .form-text.form-text-year4 {
	width: 10em;
}
.contact-form .form-textarea.form-text-month {
	width: 10em;
}
.contact-form .form-text.form-text-day {
	width: 10em;
}

/**	テキストエリア入力	*/
.contact-form .form-textarea {
	background-color: #ebebeb;
	color: currentColor;
	line-height: 1.5em;
	margin: 0;
	padding: 1em 2em;
	border: none;
	border-radius: 1vw;
}

/**	セレクトボックス入力	*/
.contact-form .form-select {
	background-color: #ebebeb;
	line-height: 1.5em;
	margin: 0;
	padding: 1em 2em;
	border: none;
	border-radius: 1vw;
}
.contact-form .form-select.form-select-year4 {
	width: 10em;
}
.contact-form .form-select.form-select-month {
	width: 10em;
}
.contact-form .form-select.form-select-day {
	width: 10em;
}

/**	同意するチェックボックス入力	*/
.form-check-agree {
	vertical-align: middle;
}
input[type=checkbox].form-check-agree {
	transform: scale(2);
}

/**	ボタン	*/
.form-button {
	background-color: buttonface;
	color: buttontext;
	font-size: max(1rem, 1.3vw);
	letter-spacing: 0.1em;
	max-width: 100%;
	padding: 1.5em 4em;
	border: none;
	border-radius: 1.7vw;
}
.form-button.send {
	background-color: #14C4A9;
	color: #ffffff;
}


/* Layouts
--------- --------- --------- ------- */
/**		*/
.contact-form .form-content {
	font-size: max(1rem, 1.15vw);	/*	20px	*/
	padding: 2em 0;
	/*background-color: rgba(180, 255, 0, 0.1);*/
}
.contact-form .form-content .form-content-wrapper {
	display: flex;
	align-items: baseline;
}
.contact-form .form-content:not(:last-of-type) {
	border-bottom: solid 1px var(--common-border-color-1);
}

.contact-form .form-content.confirm {
	display: none;
}


.contact-form .form-group {
}
.contact-form .form-group .form-group-label {
	font-size: smaller;
	font-weight: var(--common-font-weight-bold);
}




/**		*/
.contact-form .form-content .form-content-wrapper::before {
	content: "　";
	font-size: small;
	text-align: center;
	margin-right: 1em;
	padding: 0 1em;
	border-radius: 5px;
	flex-basis: 6em;
	/*background-color: rgba(255, 180, 0, 0.1);*/
}

/**	必須入力項目	*/
.contact-form .form-content .form-content-wrapper.required::before {
	content: "必須";
	background-color: #be3535;
	color: #ffffff;
}

/**	フォーム内の見出し	*/
.contact-form .form-content .form-content-wrapper > .form-label {
	font-size: max(1rem, 1.41vw);	/*	28px	*/
	flex-basis: calc(35% - 7em);
}

/**	フォーム内のコントロールグループ	*/
.contact-form .form-content .form-content-wrapper > .form-group {
	display: initial;
	flex-basis: calc(65% + 7em);
	/*background-color: rgba(255, 180, 0, 0.1);*/
}
.contact-form .form-content .form-content-wrapper > .form-group p:last-of-type {
	margin-bottom: 0;
}

/**	フォーム内のテキスト入力	*/
.contact-form .form-content .form-content-wrapper > .form-text {
	flex-basis: calc(65% + 7em);
}

/**	フォーム内のテキストエリア入力	*/
.contact-form .form-content .form-content-wrapper > .form-textarea {
	flex-basis: calc(65% + 7em);
}

/**	フォーム内のセレクトボックス入力	*/
.contact-form .form-content .form-content-wrapper > .form-select {
	flex-basis: calc(65% + 7em);
}

/**	フォーム内のラジオボタン入力	*/
.contact-form .form-content .form-content-wrapper > .form-radio {
}
/**	フォーム内のチェックボックス入力	*/
.contact-form .form-content .form-content-wrapper > .form-check {
}


/* Privacy Policy
--------- --------- --------- ------- */
.form-privacy-policy {
	font-size: max(1rem, 1.15vw);	/*	20px	*/
	/*background-color: rgba(0, 180, 0, 0.1);*/
}
.form-privacy-policy-wrapper {
	/*background-color: rgba(0, 0, 180, 0.1);*/
}

.privacy-policy-agree {
	/*background-color: rgba(180, 0, 0, 0.1);*/
}


/* Media Query
--------- --------- --------- ------- */
/*	DisplayWidth > XL	*/
@media (min-width: 1400px) {
}
/*	DisplayWidth < MD	*/
@media (max-width: 767px) {

	/* Controlls BootStrap Hack
	--------- --------- --------- ------- */

	/* Layouts
	--------- --------- --------- ------- */
	/**		*/
	.contact-form .form-content {
		padding: 2em 0;
	}
	.contact-form .form-content .form-content-wrapper {
		display: block;
	}

	/**		*/
	.contact-form .form-content .form-content-wrapper::before {
		content: none;
	}

	/**	フォーム内の見出し	*/
	.contact-form .form-content .form-content-wrapper > .form-label {
		padding-top: 0;
		padding-bottom: 0;
	}

	/**	フォーム内のテキスト入力	*/
	.contact-form .form-content .form-content-wrapper .form-text,
	.contact-form .form-content .form-content-wrapper .form-textarea,
	.contact-form .form-content .form-content-wrapper .form-select {
		width: 100%;
	}
}
/*	DisplayWidth < XS	*/
@media (max-width: 575px) {

	/* Controlls BootStrap Hack
	--------- --------- --------- ------- */
	/**	ボタン	*/
	.form-button {
		padding: 1em 2em;
	}
	.form-button.send {
	}

	/* Layouts
	--------- --------- --------- ------- */
	.contact-form .lead {
		text-align: left;
	}

	/**	フォーム内のテキスト入力	*/
	.contact-form .form-content .form-content-wrapper .form-text,
	.contact-form .form-content .form-content-wrapper .form-textarea,
	.contact-form .form-content .form-content-wrapper .form-select {
		padding: 1em 0.5em;
	}
}








/* ::::: [MW WP FORM HACKS] ::::: */

/* 共通クラス
--------- --------- --------- ------- */
/**	共通クラス	*/
.mw_wp_form	{
}


/* 入力画面クラス
--------- --------- --------- ------- */
.mw_wp_form_input {
}

/**	入力画面の進捗バー	*/
.mw_wp_form_input .progressbar ol li:nth-child(1) {
	background-color: var(--common-pointed-color-1);
	color: var(--flow-current-color);
}
.mw_wp_form_input .progressbar ol li:nth-child(1)::after {
	border-left-color: var(--common-pointed-color-1);
}


/* 確認画面
--------- --------- --------- ------- */
.mw_wp_form_confirm {
}

/**	確認画面の進捗バー	*/
.mw_wp_form_confirm .progressbar ol li:nth-child(1) {
	background-color: var(--flow-past-background-color);
	color: var(--flow-past-color);
}
.mw_wp_form_confirm .progressbar ol li:nth-child(1)::after {
	border-left-color: var(--flow-past-background-color);
}
/**		*/
.mw_wp_form_confirm .progressbar ol li:nth-child(2) {
	background-color: var(--common-pointed-color-1);
	color: var(--flow-current-color);
}
.mw_wp_form_confirm .progressbar ol li:nth-child(2)::after {
	border-left-color: var(--common-pointed-color-1);
}

/**	確認画面の	*/
.mw_wp_form_confirm .formsend-buttons {
	gap: 2em;
}

/**	確認画面のプライバシーポリシー	*/
.mw_wp_form_confirm .form-privacy-policy {
	display: none;
}
.mw_wp_form_confirm .form-content.confirm {
	display: block;
}

/**	確認画面のボタン	*/
.mw_wp_form_confirm .form-button {
	padding: 1.5em 2em;
	width: 14em;
}


/* 完了画面
--------- --------- --------- ------- */
.mw_wp_form_complete {
}

/**	完了画面の進捗バー	*/
.mw_wp_form_complete .progressbar ol li:nth-child(1),
.mw_wp_form_complete .progressbar ol li:nth-child(2) {
	background-color: var(--flow-past-background-color);
	color: var(--flow-past-color);
}
.mw_wp_form_complete .progressbar ol li:nth-child(1)::after,
.mw_wp_form_complete .progressbar ol li:nth-child(2)::after {
	border-left-color: var(--flow-past-background-color);
}
/**		*/
.mw_wp_form_complete .progressbar ol li:nth-child(3) {
	background-color: var(--common-pointed-color-1);
	color: var(--flow-current-color);
}
.mw_wp_form_complete .progressbar ol li:nth-child(3)::after {
	border-left-color: var(--common-pointed-color-1);
}


/* 送信エラー画面
--------- --------- --------- ------- */
.mw_wp_form_send_error {
	margin-top: var(--magazin-layout-space-height);
	margin-bottom: var(--magazin-layout-space-height);
}


/* Parts Hack
--------- --------- --------- ------- */
.contact-form .mwform-tel-field,
.contact-form .mwform-zip-field {
	display: flex;
	align-items: baseline;
	gap: 0 0.5em;
}

.mw_wp_form .error {
	display: block;
}


/* Media Query
--------- --------- --------- ------- */
/*	DisplayWidth > XL	*/
@media (min-width: 1400px) {
}
/*	DisplayWidth < MD	*/
@media (max-width: 767px) {
}
/*	DisplayWidth < XS	*/
@media (max-width: 575px) {

	/* 確認画面
	--------- --------- --------- ------- */
	.mw_wp_form_confirm {
	}

	/**	確認画面の	*/
	.mw_wp_form_confirm .formsend-buttons {
		gap: 1em;
	}

	/**	確認画面のボタン	*/
	.mw_wp_form_confirm .form-button {
		padding: 1em;
	}
}