@charset "utf-8";
/*--------------------------------------
	copyright :　webcal
--------------------------------------*/


/*　index　==============================*/
section h2.sec_title { position: relative; margin-bottom: 10rem; padding: 1rem; font-size: 2.6rem; color: #fff; background: var(--base_color); }
section h2.sec_title::after { position: absolute; z-index: -1; bottom: -20px; left: 50%; content: ""; width: 0; height: 0; border-style: solid; border-width: 20px 20px 0 20px; border-color: var(--base_color) transparent transparent transparent; transform: translateX(-50%); }
section h3 { font-size: 2.2rem; }
section h4 { font-size: 2rem; }
section:not(#mv) { margin: 0 auto 5rem; }

.btn { width: 100%; max-width: 340px; margin: auto; }
.btn p { font-weight: bold; border: 1px solid var(--base_color); border-radius: 3px; }
.btn a { display: block; padding: 2rem; color: var(--base_color); }
.btn a:hover { color: #fff; opacity: 1; }
.btn a:hover { background: var(--base_color); }

@media screen and ( min-width: 769px ) {
	section:not(#mv) { margin: 0 auto 10rem; }
}

/* mv ----------*/
section#mv { margin-bottom: 10rem; }


/* contact */
#contact { width: 100%; max-width: 1200px; margin: auto; }
#contact .sec_inner { padding: 0 3rem; }
#contact .sec_inner .contact_view { display: none; }
#contact .sec_inner .contact_view.disp_on { display: block; }
#contact .sec_header { margin: 3rem 0; padding-top: 3rem; }
#contact .sec_header ul { display: flex; font-weight: bold; }
#contact .sec_header ul li { cursor: pointer; padding: 1rem; width: calc( (100% - 2rem) / 2 ); text-align: center; color: var(--base_color); border: 2px solid var(--base_color); }
#contact .sec_header ul li.current { background: var(--base_color); color: #fff;  }
#contact .sec_header ul li:not(:nth-last-of-type(1)) { margin-right: 2rem; }
#contact .contact_wrap { padding: 0 2rem; }
#contact .contact_wrap .btn { margin: auto auto 0 auto; }
#contact .contact_type { margin-bottom: 3rem; }
#contact .contact_type .line_erea .img_box { margin: 3rem; text-align: center; }


/* line_flow */
.pop_up,
.close_btn { display: none; }
.open_view{ overflow: hidden; }
.open_view .close_btn { display: block; position: fixed; z-index: 999; bottom: 0; width: 100%; height: 10rem; color: #fff; text-align: center; background: var(--base_color); cursor: pointer; }
.open_view .close_btn p { width: 100%; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.open_view .close_btn img { width: 7rem; }
.open_view #body-wrap::after { position: absolute; z-index: 1; top: 0; left: 0; content: ''; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); }
.open_view .pop_up { position: fixed; z-index: 99; top: 55%; left: 50%; display: block; width: 100%; height: 80%; max-width: 1200px; overflow: auto; margin: auto; background: #fff; transform: translate(-50%, -50%); }
.open_view #line_flow .sec_inner { padding: 2rem 2rem 5rem; }
.open_view #line_flow .flow_wrap { padding: 0 2rem; }
.flow_box { margin-bottom: 5rem; }
.flow_box h3 { margin-bottom: 3rem; padding: 2rem; color: #fff; text-align: center; background: var(--base_color); border-radius: 7px; }
.flow_box.flow_01 .flb li:nth-of-type(1) { border-bottom: 1px solid var(--base_color); margin-bottom: 5rem; }
.flow_box.flow_01 .flb h4 { margin-bottom: 5rem; color: var(--base_color); text-align: center; }
.flow_box.flow_01 .img_box { margin: 3rem 0; text-align: center; }
.flow_box.flow_02 .flb li { margin-bottom: 3rem; }
.flow_box.flow_02 .flb li p { margin: 0; color: #fff; text-align: center; background: var(--base_color); }
@media screen and ( min-width: 414px ) {
	.flow_box.flow_02 .flb { display: flex; flex-wrap: wrap; }
	.flow_box.flow_02 .flb li { width: calc( (100% - 3rem) / 2 ); }
	.flow_box.flow_02 .flb li:not(:nth-of-type(2n)) { margin-right: 3rem; }
}
@media screen and ( min-width: 769px ) {
	.open_view #line_flow .sec_inner { padding: 5rem 5rem 10rem; }
	.flow_box.flow_01 .flb { display: flex; }
	.flow_box.flow_01 .flb li { width: 50%; padding: 2rem; }
	.flow_box.flow_01 .flb li:nth-of-type(1) { border-right: 1px solid var(--base_color); border-bottom: none; margin-bottom: auto; }
	
	.flow_box.flow_02 .flb li { width: calc( (100% - 9rem) / 4 ); }
	.flow_box.flow_02 .flb li:not(:nth-of-type(2n)) { margin-right: auto; }
	.flow_box.flow_02 .flb li:not(:nth-of-type(4n)) { margin-right: 3rem; }
}

/* mw_wp_form */
.color-red { color: #ff0000; }
.hissu,
.req { color: var(--base_color); font-weight: bold; }
#contact .mw_wp_form { margin-bottom: 5rem; }
#contact .mwblock-preview { display: none; }
#contact .mw_wp_form_preview .mwblock-preview { display: block; }
#contact input,
#contact textarea { width: 100%; padding: 3px; }
#contact table { display: block; border-collapse: separate; width: 100%; max-width: 960px; margin: auto; }
#contact table tbody,
#contact table tr,
#contact table th,
#contact table td { display: block; width: 100%; }
#contact tr > * { display: block; padding: 10px; font-size: initial; }
#contact th { text-align: left; background: #f2f2f2; border: 5px solid #fff; }
#contact .contact_note { font-size: initial; }
#contact .contact_button { text-align: center; }
#contact .contact_button button { border: none; padding: 1rem 2rem; border-radius: 7px; background: var(--base_color); font-weight: bold; color: #fff; }
#contact .form-button > * { display: inline-block; appearance: none; -webkit-appearance: none; cursor: pointer; border: none; transition: opacity 0.2s; margin: 0.5em; }
.mwbtn { min-width: 300px; display: block; font-size: 1.8rem; font-weight: bold; color: #fff; text-align: center; background: var(--base_color); padding: 0.75em 2em; margin: 0 auto; border-radius: 3px; }
#contact .privacy { height: 300px; padding: 1.5em; border: 1px solid #aaa; overflow-y: auto; margin-top: 30px; }
#contact .privacy .title { font-size: 1.8rem; text-align: center; border-bottom: 1px solid; }
#contact .privacy dl { margin: 2em 0; }
#contact .privacy dl dt { font-size: 1.6rem; margin-bottom: 5px; }
#contact .privacy dl dd { font-size: 1.4rem; }
#line_contact { margin: 10rem 0; }
@media screen and ( min-width: 769px ) {
	#contact table tbody, #contact table tr, #contact table th, #contact table td { display: revert-layer; width: auto; }
	#contact tr > * { display: inherit; padding: 10px; background: #f2f2f2; border: 5px solid #fff; }
}