@charset "utf-8";

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

	フォーム共通

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

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

	common

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

#form {
	position: relative;
}


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

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

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


/* 基本設定
------------------------------------------------------------------------------*/

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

#form h3,
#form input,
#form textarea,
#form label,
#form select {
	font-size: 1.125em;
}

#form h3 {
	padding: 1.0625em;
}

#form input,
#form textarea,
#form select {
	padding: .75em 1em;
}

#form .wpcf7-radio label {
	padding: .75em .8em;
}

#form textarea {
	resize: vertical;
}

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

#form .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;
}

#form label:hover {
	cursor: pointer;
}

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

#form input,
#form textarea,
#form select {
	padding: 2vw;
}

#form label {
	font-size: 3.1vw;
}	
	
#form h3 {
	margin-bottom: 3vw;
	padding: 0;
}
	
#form .sub {
	left: 18vw;
}

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

}


/* section	の余白とエラーの余白
------------------------------------------------------------------------------*/

#form section,
#form .wpcf7-not-valid-tip {
	padding: 20px;
}

#form .wpcf7-not-valid-tip {
	padding-top: 13px;
}

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

#form section,
#form .wpcf7-not-valid-tip {
	padding: 6.5vw 3vw;
}

#form .wpcf7-not-valid-tip {
	padding-top: 1.65vw;
	font-size: 2.5vw;
}

}


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

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


/* 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;
}

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

.entry #form section:nth-of-type(11) input[type="checkbox"] + span,
.contact #form section:nth-of-type(9) input[type="checkbox"] + span { /* 個人情報保護方針のチェックマークとテキストのすき間の調整 */
	padding-left: 2.5em;
}

.entry #form section:nth-of-type(11) input[type="checkbox"]:checked + span::before,
.contact #form section:nth-of-type(9) input[type="checkbox"]:checked + span::before { /* 個人情報保護方針のチェックマークの位置調整 */
	left: .3em;
}
	
}


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

#form select {
	padding-right: 2.5em;
	border-radius: 3px;
	background-image: url(../img/icon_pulldown.svg);
	background-repeat: no-repeat;
	background-position: right .75em center;
	background-size: 5.5%;
}


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

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

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

#form .radio .wpcf7-list-item {
	margin-right: .5em;
}

#form .radio .wpcf7-list-item.last {
	margin-right: 0;
}

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

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

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

}


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

	各種配置

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

#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 h3 {
	width: 12em;
	margin-right: 2em;
	position: relative;
}

#form .box {
	flex: 1;
}

#form .radio {
	display: flex;
	flex-wrap: wrap;
	gap: 1em 0;
}

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


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

#form [name="title"],
#form [name="name"],
#form [name="furigana"],
#form [name="company"],
#form [name="school"],
#form [name="mail"] {
	width: 100%;
	max-width: 400px;
}

#form [name="post_code"],
#form [name="tel"] {
	width: 180px;
	max-width: 94%;
}

#form [name="address"],
#form [name="message"] {
	width: 100%;
}

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

#form [name="title"],
#form [name="name"],
#form [name="furigana"],
#form [name="company"],
#form [name="school"],
#form [name="mail"],
#form [name="message"] {
	max-width: none;
}
	
#form [name="post_code"],
#form [name="tel"] {
	width: 41vw;
}

}


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

	必須項目・個人情報保護方針

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

#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 .privacy_link {
	display: inline-block;
	margin-top: 1.25em;
	padding-right: 1.25em;
	background-image: url("../img/icon_external.svg");
	background-repeat: no-repeat;
	background-position: right 0;
	background-size: .85em;
	vertical-align: 1em;
	line-height: 1;
}


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

#form .required {
	font-size: 3vw;
}

}


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

	エラー

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

main .screen-reader-response,
main .hidden-fields-container {
	display: none;
}

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

#form .wpcf7-not-valid-tip::before,
#form .buttons .check_box .message::before,
#form .error_box p:first-of-type::before {
	content: url("../img/icon_caution.svg");
	display: inline-block;
	width: 1.5em;
	padding-right: .3em;
	vertical-align: -.2em;
}

#form .wpcf7-not-valid-tip:empty::after {
	content: '形式が正しくありません';
}

#form .error_box {
	padding: 30px;
	background-color: rgba(248,239,240,1);
}

#form .error_box p {
	line-height: 1.4;
}

#form .error_box p:first-of-type {
	font-weight: bold;
	color: rgba(162,44,58,1);
}

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

#form .error_box {
	padding: 4vw;
}

}


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

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

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

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

#form .buttons .check_box {
	display: block;
	width: 100%;
}

#form .buttons input[type="submit"],
#form .buttons button,
#form .buttons #confirm-send.loading {
	width: 22%;
	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(50,50,50,1);
	-webkit-appearance: none;
}

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

#form .buttons .check_box .message {
	margin-bottom: 2em;
	text-align: center;
	font-weight: bold;
	line-height: 1;
}

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

#form .wpcf7-spinner,
#form .wpcf7-submit {
	display: none !important;
}

#form .buttons #confirm-send img {
	width: 1em;
}

#form .buttons #confirm-send.loading:hover {
	cursor: default;
}

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

#form .buttons input[type="submit"]:hover,
#form .buttons button:hover {
	background-color: rgba(50,50,50,1);
}

}

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

#form .buttons {
	margin-top:  10vw;
}

#form .buttons input[type="submit"],
#form .buttons button,
#form .buttons #confirm-send.loading {
	width: 48%;
	font-size: 4vw;
}

#form .buttons .back {
	margin-right: 4%;
}

}