@charset "utf-8";
/*--------------------------------------
copyright :
page style sheet : page layout
--------------------------------------*/

@import url(normalize.css);
@import url(../_plugin/fontawesome/css/all.min.css);
@import url(https://unpkg.com/aos@next/dist/aos.css);
/*@import url(../_plugin/OwlCarousel/assets/owl.carousel.min.css); @import url(../_plugin/OwlCarousel/assets/owl.theme.default.css);*/
/*@import url(../_plugin/lightGallery/css/lightgallery.min.css);*/
@import url(common_parts.css);
@import url(common.css);

/* 共通 form_layout */
.radio_btn { display: none; }
.radio_btn + label{ position:relative; margin-right: 20px; padding-left: 20px; cursor: pointer; }
.radio_btn + label::before{ position: absolute; top: 50%; left: 0; content: ""; display: block; width: 15px; height: 15px; background: #fff; border: 1px solid #999; border-radius: 50%; transform: translateY(-50%); }
.radio_btn:checked + label{ color: #3398cc; }
.radio_btn:checked + label::after{ position: absolute; top: 50%; left: 3px; content: ""; display: block; width: 9px; height: 9px; background: #3398cc; border-radius: 50%; transform: translateY(-50%); }
/* Checkbox */
input[type=checkbox] { position: relative; bottom: 0; left: 0; right: 0; display: inline-block; width: 20px; height: 20px; margin: .4rem; color: #fff; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; vertical-align: -0.8rem; transition:all .15s ease-out 0s; cursor: pointer; outline: none; border-radius: 10%; }
.chk_btn input[type=checkbox]:before,
.chk_btn input[type=checkbox]:after { position: absolute; content: ""; background: #fff; transition: all .2s ease-in-out; }
.chk_btn input[type=checkbox]:before { top: 6px; left: 2px; width: 0; height: 2px; transform: rotate(45deg); }
.chk_btn input[type=checkbox]:after { bottom: 3px; right: 9px; width: 2px; height: 0; transform: rotate(40deg); transition-delay: .2s; }
.chk_btn input[type=checkbox]:checked:before { top: 10px; left: 1px; width: 6px; height: 2px; }
.chk_btn input[type=checkbox]:checked:after { bottom: 1px; right: 5px; width: 2px; height: 14px; }
.chk_btn input[type=checkbox]:indeterminate:before,
.chk_btn input[type=checkbox]:indeterminate:after { width: 7px; height: 2px; transform: rotate(0); }
.chk_btn input[type=checkbox]:indeterminate:before { top: 7px; left: 1px; }
.chk_btn input[type=checkbox]:indeterminate:after { bottom: 7px; right: 1px; }
.chk_btn input[type=checkbox].red,
.chk_btn input[type=radio].red { border: 2px solid #f44336; }
.chk_btn input[type=checkbox].red:checked,
.chk_btn input[type=checkbox].red:indeterminate,input[type=radio].blue:checked:before { background: #f44336; }

/* form ==============================*/
#form #form_wrap h2 { margin-bottom: 2rem; font-size: 2.8rem; }
#form #form_wrap .error { color: #ff0000; }
#form #form_wrap .table_wrap { padding: 0 2rem; }
#form #form_wrap table { width: 100%; }
#form #form_wrap tr { border: 1px solid #ddd; }
#form #form_wrap tr:nth-of-type(even) { background: rgba(230, 230, 230, 0.5); }
#form #form_wrap tr.address li:nth-of-type(2) { line-height: 3; }
#form #form_wrap tr.address .for_bg_w { margin-top: 1rem; }
#form #form_wrap th { position: relative; padding: 1rem 0.5rem 1rem 1rem; text-align: left; vertical-align: middle; border-right: 1px solid #ddd; }
#form #form_wrap th .required { position: absolute; top: 50%; right: 0.5rem; padding: 0 1rem; font-size: 1.4rem; color: #fff; background: #ff0000; transform: translateY(-50%); }
#form #form_wrap td { width: 75%; padding: 2rem; }
#form #form_wrap td.ac p { display: inline; }
#form #form_wrap td.ac label { display: block; }
#form #form_wrap label strong { cursor: pointer; }
#form #form_wrap input[type="text"],
#form #form_wrap input[type="email"],
#form #form_wrap input[type="tel"] { width: 100%; padding: 1rem; background: #ffffe5; }
#form #form_wrap .for_bg_w:focus { background: #fff; }
#form #form_wrap .btn { width: 100%; max-width: 300px; margin: 2rem auto; color: #ffffff; background: #3398cc; border-radius: 10px; }
#form #form_wrap button { display: block; width: 100%; margin: auto; padding: 1.5rem 2rem; background: none; border: none; }
#form #form_wrap table .form_btn { justify-content: center; }
#form #form_wrap table .form_btn li { width: 30%; }
#form #form_wrap table .form_btn li:nth-of-type(1) { margin-right: 5rem; }
@media screen and ( max-width: 768px ) {
	#form #form_wrap tr,
	#form #form_wrap th,
	#form #form_wrap td { display: block; width: 100%; font-size: 2.2rem; }
	#form #form_wrap th { border-right: none; }
	#form #form_wrap td { padding-top: 0; }
	#form #form_wrap table .flb { flex-wrap: wrap; }
	#form #form_wrap table .flb li { width: 50%; text-align: center; }
	#form #form_wrap table .tab_br { text-align: center; }
	#form #form_wrap tr.address .flb { flex-wrap: nowrap; }
	#form #form_wrap tr.address .flb li,
	#form #form_wrap tr.address li input { width: auto; }
	#form #form_wrap .form_btn { display: block; }
	#form #form_wrap table .form_btn li { width: 70%; margin: auto; }
	#form #form_wrap table .form_btn li:nth-of-type(1) { margin-right: auto; margin-bottom: 3rem; }
}
@media screen and ( max-width: 480px ) {
	#form #form_wrap .table_wrap { padding: 0; }
	#form #form_wrap td { padding: 1rem 0.5rem; }
	#form #form_wrap table .tab_br { display: inline; }
	#form #form_wrap table .form_btn li { width: 90%; }
}

/* registration ==============================*/
#user_form form h2 { padding: 2rem; font-size: 3rem; color: #fff; background: #3398cc; }
#user_form form ol li:nth-of-type(1) { margin-right: 2rem; }
#user_form form ul.add_num { margin-bottom: 1rem; }
#user_form form ul.add_num li input { padding: 0.5rem; }
#user_form .error { margin: 0; color: #ff0000; }
#user_form { position: relative; height: 100vh; }
#user_form table { width: 100%; }
#user_form tr { border: 1px solid #ddd; }
#user_form tr:nth-of-type(odd) { background: #efefef; }
#user_form tr:nth-of-type(even) { background: #fff; }
#user_form th { width: 20%; vertical-align: middle; border-right: 1px solid #ddd; }
#user_form td { padding: 3.5rem 2rem; position: relative; }
#user_form td .required { position: absolute; top: 0.5rem; left: 0.5rem; padding: 0 1rem; font-size: 1.4rem; color: #fff; background: #ff0000; font-weight: bold; }
#user_form input:not([type="checkbox"]) { width: 80%; margin: auto; padding: 1rem 1.5rem; border-radius: 5px; border: 1px solid #ddd; }
#user_form li input:not([type="checkbox"]) { width: 100%; }
#user_form button { position: relative; width: 40%; margin: auto; padding: 1rem 1.5rem; font-size: 1.8rem; color: #fff; background: #3398cc; border: none; border-radius: 5px; }
#user_form button::after { position: absolute; top: 50%; right: 1em; content:"\f30d"; display: block; width: 2em; height: 2em; font-family: "Font Awesome 5 PRO"; font-weight: normal; transform: translateY(-50%); transform: translateY(-50%); }
#user_form button:hover::after { content:"\f3c2"; }
#user_form .regist p { margin: 2rem 0 0; }
#user_form .regist a { color: #333; }
#user_form .regist .hover-underline-animation span::after { background-color: #3398cc; }
#user_form button:hover span { opacity: 0.6; }
#user_form .sendmail { margin-bottom: 2rem; }
@media screen and ( max-width: 650px ) {
	#user_form table tr { background: none!important; }
	#user_form table th, #user_form table td { display: block; width: 100%; }
	#user_form table th { border-right: none; border-bottom: 1px solid #ddd; font-size: 2rem; padding: 1rem 0; }
	#user_form table tr:nth-of-type(1) th { border-bottom: none; padding: 0; }
	#user_form table th { background: #efefef!important; }
	#user_form table td { padding: 3rem 1rem 2rem; }
	#user_form input:not([type="checkbox"]) { width: 100%; }
	#user_form button { width: 70%; }
}
@media screen and ( max-width: 414px ) {
	#user_form button { width: 90%; }
	#user_form tr:nth-last-of-type(2) p { text-align: left!important; }
}