@charset "utf-8";

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

	フォーム共通

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

/*------------------------------------------------------------------------------

	common

------------------------------------------------------------------------------*/

#form {
	position: relative;
	z-index: 1;
}


/* 既存スタイルのリセット
------------------------------------------------------------------------------*/

#form h2 {
	margin: 0;
	padding: 0;
	background-color: transparent;
	border: none;
}

#form h2::before,
#form h2::after {
	display: none;
}


/* debug
------------------------------------------------------------------------------*/

#debug {
	display: block;
	padding: .75em;
	background-color: rgba(162,44,58,.75);
	line-height: 1;
	font-size: .85em;
	text-align: center;
	color: #FFF;
}


/* select、input、textarea、入力項目の見出しh○、確認画面の入力テキストの余白などの基本設定
------------------------------------------------------------------------------*/

#form section {
	padding: 20px;
}

#form select,
#form input,
#form textarea,
#form .mwform-radio-field label {
	vertical-align: bottom;
	border: 1px solid rgba(var(--main-color),.3);
	border-radius: 5px;
	webkit-appearance: none;
	background-color: #FFF;
}

#form h2,
#form input,
#form textarea,
#form label,
#form select,
.mw_wp_form_preview #form .box,
.mw_wp_form_preview #form .box .select select {
	font-size: 1.125em;
}

#form h2 {
	padding: 1em;
	font-weight: bold;
}

#form h3 {
	padding-bottom: .5em;
	font-weight: bold;
}

#form input,
#form textarea,
#form select,
#form .mwform-radio-field label {
	padding: .75em 1em;
}

#form textarea {
	resize: vertical;
}

#form h2 {
	padding-left: 0;
	padding-right: 0;
}

.mw_wp_form_preview #form h2 {
	padding: 0;
}

#form h2 .sub {
	position: absolute;
	bottom: 0;
	left: 0;
	font-size: .75em;
	display: block;
	font-weight: normal;
}

#form label input {
	width: auto;
}

#form input:focus,
#form textarea:focus,
#form select:focus {
	background-color: rgba(255,255,230,1);
}

#form input::placeholder  {
	color: rgba(0,0,0,.25);
}

#form label {
	position: relative;
	display: block;
	padding: .25em 0;
}

#form label:hover {
	cursor: pointer;
}

@media screen and (max-width: 767px) {
	
#form {
	margin-bottom: 10vw;
}
	
#form section {
	padding: 6vw 1.5vw;
}

#form input,
#form textarea,
#form select,
#form .mwform-radio-field label {
	padding: 2vw;
}
		
#form h2 {
	margin-bottom: 3vw;
	padding: 0;
}

#form h2 .sub {
	left: 18vw;
}

/* フォーカスの拡大対策 */
#form input,
#form textarea {
	font-size: 16px;
}
	
}


/*------------------------------------------------------------------------------

	checkbox & radio & select

------------------------------------------------------------------------------*/

#form input[type="checkbox"],
#form input[type="radio"] {
	margin: 0;
	padding: .625em;
	background-color: #FFF;
	border: 1px solid rgba(0,0,0,.3);
	-webkit-appearance: none;
}

#form input[type="checkbox"],
#form input[type="radio"] {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	margin: 0;
}

#form input[type="checkbox"] + span,
#form input[type="radio"] + span {
	padding-left: 1.85em;
}

#form input[type="checkbox"]:focus,
#form input[type="radio"]:focus {
	background-color: #FFF;
}

#form input[type="checkbox"]:checked + span::before,
#form input[type="radio"]:checked + span::before {
	content: "";
	position: absolute;
	display: block;
	background-image: url(../img/icon_check.svg);
	background-repeat: no-repeat;
	background-size: cover;
}

@media screen and (max-width: 1200px) {
	
#form input[type="radio"] + span {
	padding-left: 2rem;
}

}

/* checkbox
------------------------------------------------------------------------------*/

#form input[type="checkbox"] {
	border-radius: 3px;
}

#form input[type="checkbox"]:focus {
	background-color: #FFF;
}

#form input[type="checkbox"]:checked + span::before {
	display: block;
	top: 50%;
	transform: translateY(-50%);
	left: .21em;
	width: 1em;
	height: 1em;
}

#form .check_list {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
}

#form .check_list .horizontal-item {
	margin-right: 1em;
}

#form .check_list .horizontal-item:last-child {
	margin-right: 0;
}


/* radio
------------------------------------------------------------------------------*/

#form input[type="radio"] {
	left: 1em;
	border-radius: 50%;
}

#form input[type="radio"]:checked + span::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 1.45em;
	transform: translateY(-50%);
	background-image: none;
	background-color: rgba(0,0,0,1);
	border-radius: 50%;
	width: .85em;
	height: .85em;
}

#form .horizontal-item {
	margin-right: .5em;
}

#form .radio.list .horizontal-item {
	display: block;
	margin-right: 0;
	margin-bottom: .5em;
}

#form .horizontal-item:last-child {
	margin-right: 0;
}

#form .radio.list .horizontal-item:last-child {
	margin-bottom: 0;
}

#form .horizontal-item + .horizontal-item {
	margin-left: 0;
}

@media screen and (max-width: 767px){

#form input[type="radio"] {
	left: 2vw;
}

#form input[type="radio"]:checked + span::before {
	left: 3.12vw;
}

}

/* select
------------------------------------------------------------------------------*/

#form .select {
	display: inline-block;
	position: relative;
	margin: 0 .5em;
}

.mw_wp_form_preview #form .select {
	margin: 0;
}

#form .select:first-child,
#form .error + .select {
	margin-left: 0;
}

#form .select select {
	padding-right: 2em;
	border-radius: 3px;
}

#form .select::before {
	content: "";
	display: block;
	position: absolute;
	top: 45%;
	right: .75em;
	transform: translateY(-50%) rotate(-135deg);
	width: .6em;
	height: .6em;
	border-top: 2px solid rgba(0,0,0,1);
	border-left: 2px solid rgba(0,0,0,1);
	z-index: 2;
	pointer-events: none;
}


/* attached
------------------------------------------------------------------------------*/

#form .attached input {
	padding-top: 1.125em;
	padding-bottom: 1.125em;
	font-size: .875em;
}

#form .attached .mwform-file-delete {
	position: absolute;
	top: .5em;
	right: .5em;
	padding: .5em .65em;
	background-color: rgba(50,50,50,1);
	line-height: 1;
	font-size: 1.125em;
	color: #FFF;
}

#form .attached .box .sub {
	display: block;
	margin-top: .5em;
}

@media screen and (max-width: 767px){

#form .attached .mwform-file-delete {
	top: 16vw;
	right: 3vw;
}

}




/*------------------------------------------------------------------------------

	表組（各種配置関係）

------------------------------------------------------------------------------*/

#form section {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	border-bottom: 1px dotted rgba(0,0,0,.4);
}

#form > section:first-of-type {
	border-top: 1px dotted rgba(0,0,0,.4);
}

#form h2 {
	width: 14em;
	margin-right: 2.5em;
	position: relative;
}

#form h2:has(span.required) {
	padding-right: 3.5em;
}

#form .box {
	flex: 1;
}

#form .radio {
	display: flex;
	flex-wrap: wrap;
}

#form .radio.list {
	display: block;
}


@media screen and (max-width: 1200px){
	
#form .tour .radio {
	display: block;
}

#form .tour .radio span {
	display: block;
	margin-top: 10px;
	margin-left: 0;
}

#form .tour .radio span:first-of-type {
	margin-top: 0;
}

}

@media screen and (max-width: 767px) {
	
#form h2 {
	margin-right: 0;
}
	
#form h2,
#form .box {
	width: 100%;
}

}

/* お問い合わせ頂く際の注意事項
------------------------------------------------------------------------------*/

#form .highlight {
	margin-bottom: 40px;
}


/* 入力項目
------------------------------------------------------------------------------*/

#form [name="名前"],
#form [name="ふりがな"],
#form [name="メールアドレス"],
#form [name="所属"] {
	width: 100%;
	max-width: 400px;
}

#form [name="郵便番号"],
#form [name="電話番号"] {
	width: 180px;
	max-width: 94%;
}

#form [name="住所"],
#form [name="内容"],
#form .textarea textarea,
#form .attached input {
	width: 100%;
}

@media screen and (max-width: 767px) {

#form [name="名前"],
#form [name="ふりがな"],
#form [name="メールアドレス"],
#form [name="内容"] {
	max-width: none;
}
	
#form [name="郵便番号"],
#form [name="電話番号"] {
	width: 41vw;
}

}


/* 個人情報保護方針
------------------------------------------------------------------------------*/

#form .privacy {
	align-items: center;
}

#form .privacy.top_align {
	align-items: flex-start;
}

#form .privacy input {
	padding: .625em;
}

#form .privacy .horizontal-item {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	font-weight: 600;
}

#form .privacy .detail {
	font-size: .875em;
	margin-bottom: 1em;
}

/* 確認画面で非表示 */
.mw_wp_form_preview #form .sub,
.mw_wp_form_preview #form .privacy {
	display: none;
}


/* 外部リンク
------------------------------------------------------------------------------*/

#form .external {
	background-image: url(../img/icon_external.svg);
	background-repeat: no-repeat;
	background-position: right .25em top .225em;
	background-size: .85em;
	padding-right: 1.35em;
}

/*------------------------------------------------------------------------------

	必須項目

------------------------------------------------------------------------------*/

#form .required {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	padding: .5em;
	background-color: rgba(162,44,58,1);
	border-radius: 3px;
	line-height: 1;
	font-size: .875rem;
	color: #FFF;
}


/*------------------------------------------------------------------------------

	エラー

------------------------------------------------------------------------------*/

#form .error {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	padding: 15px 20px;	
	width: 100%;
	height: 100%;
	line-height: 1;
	font-weight: bold;
	font-size: .875rem;
	color: rgba(162,44,58,1);
	background-color: rgba(248,239,240,1); /* 生年月日箇所のエラーが重なると濃くなるのでopacityなし */
}

#form .error::before {
	content: url("../img/icon_caution.svg");
	display: inline-block;
	width: 1.5em;
	padding-right: .3em;
	vertical-align: -.2em;
}

@media screen and (max-width: 767px) {

#form .error {
	padding-top: 1vw;
	padding-left: 1vw;
	font-size: 3vw;
}

}


/*------------------------------------------------------------------------------

	ボタン（確認画面、戻る、送信）

------------------------------------------------------------------------------*/

.mw_wp_form #form .buttons {
	display: flex;
	justify-content: center;
	margin-top: 40px;
	text-align: center;
}

.mw_wp_form #form .buttons input[type="submit"] {
	width: 25%;
	padding: 1.25em 2em;
	border: none;
	border-radius: 3px;
	text-align: center;
	text-decoration: none;
	transition: all .4s;
	font-weight: 600;
	font-size: 1.125em;
	line-height: 1;
	color: #FFF;
	background-color: rgba(var(--main-color),1);
	-webkit-appearance: none;
}

.mw_wp_form #form .buttons input[type="submit"]:hover {
	cursor: pointer;
	color: #FFF;
	background-color: rgba(var(--main-color),.7);
}

.mw_wp_form #form .buttons .back {
	margin-right: 20px;
}

@media screen and (max-width: 767px) {

.mw_wp_form #form .buttons {
	padding: 0 5vw;
	margin-top:  6vw;
}

.mw_wp_form #form .buttons input[type="submit"] {
	width: 48%;
	padding-top: 1em;
	padding-bottom: 1em;
	font-size: 4vw;
}

.mw_wp_form #form .buttons .back {
	margin-right: 3vw;
}

}


/*------------------------------------------------------------------------------

	確認画面

------------------------------------------------------------------------------*/

/* 確認画面のタイトル変更
------------------------------------------------------------------------------*/

.mw_wp_form_preview #form  .transition_title::before {
	content: '確認';
}

.mw_wp_form_preview #form .transition_title span {
	display: none;
}


.mw_wp_form_preview #form h2 {
	padding-right: 0 !important;
}


/* h2のline-heightを入力項目に揃える
------------------------------------------------------------------------------*/

.mw_wp_form_preview #form h2 {
	line-height: inherit;
}


/* 非表示にしたいもの
------------------------------------------------------------------------------*/

.mw_wp_form_preview #form .explanation,
.mw_wp_form_preview #form .highlight,
.mw_wp_form_preview #form .select::before,
.mw_wp_form_preview #form .checking,
.mw_wp_form_preview #form .required,
.mw_wp_form_preview #form .privacy .button,
.mw_wp_form_preview #form .attached {
	display: none;
}


/*------------------------------------------------------------------------------

	完了画面

------------------------------------------------------------------------------*/

.mw_wp_form_complete #form dl {
	margin-bottom: 0;
}

.mw_wp_form_complete #form dt {
	margin-bottom: .5em;
	font-size: 1.25em;
	font-weight: bold;
}