@charset "utf-8";

/* =====================================================
  form
===================================================== */
#form{
	color: #FFF;
	background: #000;
}
#about .inner{
	max-width: 1000px;
	width: 94%;
	margin: 0 auto;
}
.aboutflex{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: row-reverse;
}
.aboutflex .flexright{
	width: 23.75rem;
	margin-left: 3.125rem;
}
.aboutflex .flexleft{
	flex: 1;
}
.aboutflex .flexleft p{
	font-size: 0.9375rem;
	margin-bottom: 1.875rem;
	line-height: 1.8;
	letter-spacing: 0.05em;
}
.aboutbtn{
	font-size: 0;
	margin-top: 1.875rem;
}
.borderbtn{
	color: #FFF;
	background: #0f73b8;
	display: inline-block;
	font-size: 1.25rem;
	padding: 9px;
	margin: 0 0.9375rem;
}
.borderbtn:hover{
	opacity: 0.8;
}
.borderbtn .btninner{
	border: 1px solid #FFF;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 23.75rem;
	height: 3.75rem;
}
.borderbtn .btninner div{
	display: inline-flex;
	align-items: center;
	letter-spacing: 0;
}
.borderbtn .btninner div.iconinfo::before{
	background: url("../common/img/icon_info.svg") no-repeat center center;
	background-size: cover;
	content: "";
	display: block;
	width: 1.5625rem;;
	height: 1.5625rem;;
	margin-right: 1rem;
	filter: brightness(0) saturate(100%) invert(100%) sepia(54%) saturate(2%) hue-rotate(227deg) brightness(107%) contrast(101%);
}
.borderbtn .btninner div.iconschedule::before{
	background: url("../common/img/icon_calendar.svg") no-repeat center center;
	background-size: cover;
	content: "";
	display: block;
	width: 1.5625rem;;
	height: 1.5625rem;;
	margin-right: 1rem;
	filter: brightness(0) saturate(100%) invert(100%) sepia(54%) saturate(2%) hue-rotate(227deg) brightness(107%) contrast(101%);
}
.borderbtn .btninner div.iconsend::before{
	background: url("../common/img/icon_send.svg") no-repeat center center;
	background-size: cover;
	content: "";
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	margin-right: 1rem;
	filter: brightness(0) saturate(100%) invert(100%) sepia(54%) saturate(2%) hue-rotate(227deg) brightness(107%) contrast(101%);
}

/*flow*/
.flowflex{
	display: flex;
	justify-content: space-between;
	gap:1.875rem;
	max-width: 60rem;
	width: 100%;
	margin: 2.5rem auto 5rem;
}
.step{
	position: relative;
	background: #FFF;
	width: calc((100% - 3.75rem) / 3);
	padding: 1.25rem 0 0;
}
.step .steplabel{
	position: relative;
	display: inline-flex;
	align-items: center;
	color: #FFF;
	font-size: 1.125rem;
	letter-spacing: 0.1em;
	height: 2.3125rem;
	padding-left: 1.4rem;
	padding-right: 3.75rem;
}
.step .steplabel span{
	z-index: 10;
}
.step .steplabel::before{
	position: absolute;
	left: 0;
	background: url("../common/img/bg_ribbon.svg") no-repeat right center;
	background-size: auto 100%;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
}
.step::after{
	position: absolute;
	bottom: 0;
	background-size: 100% auto;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
}
.step h3{
	font-size: 1.5rem;
	margin: 2.25rem 0 11.25rem;
	text-align: center;
}
.step01::after{
	background: url("../img/step01.png") no-repeat;
	background-position: bottom 1.875rem center;
	background-size: 100% auto;
}
.step02::after{
	background: url("../img/step02.png") no-repeat bottom center;
	background-position: bottom 1.25rem center;
	background-size: 100% auto;
}
.step03::after{
	background: url("../img/step03.png") no-repeat bottom center;
	background-size: 100% auto;
}
.step01::before,.step02::before{
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
	right: -1.25rem;
	background: url("../common/img/icon_steparw.svg") no-repeat;
	background-size: cover;
	content: "";
	display: block;
	width: 0.6875rem;
	height: 1.3125rem;
}
.feeinner{
	max-width: 1280px;
	width: 94%;
	margin: 0 auto;
}
.feeflex{
	display: flex;
	justify-content: space-between;
	column-gap: 5rem;
	margin-bottom: 2.5rem;
}
.feeflex .flexitem{
	text-align: center;
	width: calc((100% - 5rem) / 2);
	letter-spacing: 0.1em;
}
.feeflex .flexitem h4{
	border-bottom: 1px solid #0f73b8;
	font-size: 1.5rem;
	margin-bottom: 0.625rem;
	padding-bottom: 0.625rem;
}
.feeflex .flexitem .price{
	font-size: 1.5rem;
}
.feeflex .flexitem .price span{
	font-size: 0.875rem;
}
.feeinner p{
	font-size: 0.9375rem;
	line-height: 1.8;
}
.form_container{
	margin-top: 2rem;
}
.form_container table{
	border-left:1px solid #888;
	border-top:1px solid #888;
}
.form_container table th,.form_container table td{
	border-right:1px solid #888;
	border-bottom:1px solid #888;
	padding: 1rem 1.625rem;
}
.form_container table th{
	color: #000;
	background: #f7f7f7;
	width: 18.75rem;
}
.form_container table td{
	color: #000;
	background: #FFF;
}
.form_container table td input[type="text"],.form_container table td input[type="email"],.form_container table td textarea{
	padding: 0.625rem;
}
.formarea input[type="text"], .formarea input[type="tel"], .formarea input[type="email"], .formarea select, .formarea textarea {
	padding: 0.625rem;
	margin-bottom: 0.625rem;
}
.form_container table th{
	vertical-align: middle;
	text-align: center;
}
.formarea {
  margin: 0 auto 3.125rem;
}
.reqlabel{
	background: #b20000;
	color: #FFF;
	font-size: 0.75rem;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 0.125rem 0.325rem 0.3rem;
	line-height: 1;
	margin-right: 1rem;
}
.eventlist p.formtext {
  font-size: 0.875rem;
  margin: 0.625rem 0.9375rem 1.875rem;
}
.form_container table td .textm{
	min-width: 50%;
}
.form_container table td .textl{
	min-width: 70%;
}
.form_container table td textarea{
	width: 90%;
	height: 11.25rem;
}
#form .form_container a{
	color: #FFF;
}
.tc-r{
	color: #b20000;
}
.textm,.textl{
	margin-right: 1.5rem;
}
.form_container .center{
	margin: 3rem 0 0;
}
.form_container .center p{
	margin-top: 0.625rem;
}
.sendbtn{
	margin-top: 2.25rem;
}
.sendbtn button{
	font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	border: none;
	transition: 0.3s;
}
.arwlink_blue {
	color: #FFF;
	background: #600000;
	display: inline-block;
	font-size: 1.25rem;
	padding: 9px;
	margin: 0 0.9375rem;
}
.arwlink_blue p {
  display: block;
  margin: 0 !important;
}
.arwlink_blue input[type="submit"],.arwlink_blue input[type="button"]{
	border: 1px solid #FFF;
	color: #FFF;
	background: #600000;
	font-size: 1.25rem;
	padding: 9px;
	display: inline-flex;
	font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	justify-content: center;
	align-items: center;
	width: 23.75rem;
	height: 3.75rem;
}
span.wpcf7-spinner {
	display: none;
}
.wpcf7-list-item{
	margin: 0;
}
.eventlist .wpcf7-list-item{
	display: block;
}

@media screen and (min-width: 1021px) and (max-width: 1600px){
	.formarea{
		font-size:15px;
	}
	.form_container table th{
		width: 200px;
	}
	.eventlist p.formtext{
		font-size:12px;
	}
}

@media screen and (min-width: 768px) and (max-width: 1020px){
	.formarea{
		font-size:14px;
	}
	.form_container table th{
		width: 180px;
	}
	.arwlink_blue input[type="submit"], .arwlink_blue input[type="button"]{
		font-size: 13px;
		padding: 6px;
	}
	.eventlist p.formtext{
		font-size:11px;
	}
}

@media screen and (max-width: 767px){
	.aboutflex {
		display: block;
	}
	.aboutflex .flexright {
		width:100%;
		margin-left: 0;
		margin-bottom: 1.5rem;
	}
	.borderbtn {
		display: block;
		font-size: 1rem;
		padding: 4px;
		margin: 0.5rem 0.5rem;
	}
	.borderbtn .btninner {
		border: 1px solid #FFF;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		width: 100%;
	}
	.flowflex {
		display: flex;
		flex-wrap: wrap;
		margin: 1.25rem auto 2.5rem;
		gap: 2rem 0;
	}
	.step {
		position: relative;
		background: #FFF;
		width: 100%;
		padding: 0.625rem 0 0;
	}
	.step01::before,.step02::before{
		position: absolute;
		top: auto;
		left: 0;
		right: 0;
		margin: 0 auto ;
		bottom: -1.25rem;
		background: url("../common/img/icon_steparw_bottom.svg") no-repeat;
		background-size: cover;
		content: "";
		display: block;
		width: 1.3125rem;
		height: 0.6875rem;
	}
	.feeflex {
		column-gap: 2rem;
		margin-bottom: 1.25rem;
	}
	.feeflex .flexitem {
		width: calc((100% - 2rem) / 2);
	}
	.feeflex .flexitem span{
		display: block;
		text-align: center;
	}
	.form_container{
		margin-top: 1rem;
	}
	.form_container table th, .form_container table td {
		display: block;
		width: 100%;
		padding: 0.75rem;
	}
	.form_container table th {
		text-align: left;
	}
	.form_container table td .textm,.form_container table td .textl,.form_container table td textarea {
		min-width: 100%;
	}
	.form_container table td span {
		font-size: 0.8125rem;
		margin-left: 0;
		margin-top: 0.25rem;
	}
	.stext,.textm, .textl {
		margin-right: 0;
		width: 100%;
	}
	.form_container table td input[type="tel"], .form_container table td input[type="text"], .form_container table td input[type="email"], .form_container table td textarea {
		width: 100%;
	}
	.arwlink_blue{
		margin-top: 1rem;
	}
	.arwlink_blue input[type="submit"], .arwlink_blue input[type="button"] {
		width: 100%;
		min-width: 280px;
		height: 3.75rem;
	}
	.borderbtn {
		display: block;
		font-size: 1rem;
		width: 100%;
		padding: 4px;
		margin: 0;
	}
}