@charset "UTF-8";

/*-------------------------
__entry_style
-------------------------*/

#wrap.contents #page_title .basic_title span span{ font-size: .6em; display: inline-block; margin-left: 10px;}

.entry_prologue{ margin-bottom: 90px;}
.entry_prologue .prologue_text{ margin-bottom: 90px;}
.entry_prologue .step{ width: 100%; max-width: 500px; margin: 0 auto 50px; padding: 30px 0; box-sizing: border-box;}
.entry_prologue .step ol { display: flex; justify-content: center; list-style-type: none; padding: 0;}
.entry_prologue .step ol li { display: flex; flex: 1 1; flex-direction: column; align-items: center; position: relative; z-index: 1; color: #969da3; font-size: .8em;}
.entry_prologue .step ol li span.step_top{ font-size: 2.3em; display: block; position: absolute; top: -30px; left: 50%; transform: translateX(-50%);}
.entry_prologue .step ol li span.step_btm{ font-size: 2em; display: block; position: absolute; top: 30px; left: 50%; transform: translateX(-50%); font-weight: 700; white-space: nowrap;}

.mw_wp_form_input .entry_prologue .step ol li:nth-of-type(1) span.step_top,
.mw_wp_form_confirm .entry_prologue .step ol li:nth-of-type(1) span.step_top,
.mw_wp_form_confirm .entry_prologue .step ol li:nth-of-type(2) span.step_top,
.mw_wp_form_complete .entry_prologue .step ol li:nth-of-type(1) span.step_top,
.mw_wp_form_complete .entry_prologue .step ol li:nth-of-type(2) span.step_top,
.mw_wp_form_complete .entry_prologue .step ol li:nth-of-type(3) span.step_top,
.entry_prologue .step ol li.prev span.step_top,
.entry_prologue .step ol li.current span.step_top{ color: #0062b1;}
.mw_wp_form_input .entry_prologue .step ol li:nth-of-type(1) span.step_btm,
.mw_wp_form_confirm .entry_prologue .step ol li:nth-of-type(1) span.step_btm,
.mw_wp_form_confirm .entry_prologue .step ol li:nth-of-type(2) span.step_btm,
.mw_wp_form_complete .entry_prologue .step ol li:nth-of-type(1) span.step_btm,
.mw_wp_form_complete .entry_prologue .step ol li:nth-of-type(2) span.step_btm,
.mw_wp_form_complete .entry_prologue .step ol li:nth-of-type(3) span.step_btm,
.entry_prologue .step ol li.prev span.step_btm,
.entry_prologue .step ol li.current span.step_btm{ color: var(--base_navy);}
.entry_prologue .step ol li::before { display: inline-block; width: 7px; height: 7px; margin-bottom: 3px; content: ''; border: 2px solid #d6dde3;  border-radius: 50%; background-color: #fff;}
.mw_wp_form_input .entry_prologue .step ol li:nth-of-type(1)::before,
.mw_wp_form_confirm .entry_prologue .step ol li:nth-of-type(1)::before,
.mw_wp_form_confirm .entry_prologue .step ol li:nth-of-type(2)::before,
.mw_wp_form_complete .entry_prologue .step ol li:nth-of-type(1)::before,
.mw_wp_form_complete .entry_prologue .step ol li:nth-of-type(2)::before,
.mw_wp_form_complete .entry_prologue .step ol li:nth-of-type(3)::before,
.entry_prologue .step ol li.prev::before,
.entry_prologue .step ol li.current::before{ border-color: var(--main_blue);}
.entry_prologue .step ol li:not(:last-child)::after { position: absolute; top: 4px; left: 50%;  z-index: -1; width: 100%; height: 2px; background-color: #d6dde3; content: '';}
.mw_wp_form_input .entry_prologue .step ol li:nth-of-type(1)::before,
.mw_wp_form_confirm .entry_prologue .step ol li:nth-of-type(1)::after,
.mw_wp_form_confirm .entry_prologue .step ol li:nth-of-type(2)::before,
.mw_wp_form_complete .entry_prologue .step ol li:nth-of-type(1)::after,
.mw_wp_form_complete .entry_prologue .step ol li:nth-of-type(2)::after,
.mw_wp_form_complete .entry_prologue .step ol li:nth-of-type(3)::before,
.entry_prologue .step ol li.current::before,
.entry_prologue .step ol li.prev::after{ background-color: #0062b1;}
.must{ color: #e62850;}

@media screen and (max-width: 767px) {
.entry_prologue{ margin-bottom: 30px;}
.entry_prologue .prologue_text{ margin-bottom: 30px;}
.entry_prologue .step ol li span.step_top{ font-size: 1.9em; top: -25px;}
.entry_prologue .step ol li span.step_btm{ font-size: 1.5em; top: 25px;}
}

/*-------------------------
__form
-------------------------*/

.form_base{ max-width: 1000px; margin: 0 auto; text-align: left;}

#id_occupation{ border-top: 1px solid #23374b;}
#id_occupation,
#id_shop,
#id_personal{ padding: 40px 0; box-sizing: border-box; border-bottom: 1px solid #23374b;}
#id_occupation h2,
#id_shop h2,
#id_personal h2{ font-size: 1.5em; color: #999; margin-bottom: 30px;}
#id_occupation h2 span,
#id_shop h2 span,
#id_personal h2 span{ font-size: 1.5em; font-weight: 700; color: #23374b; display: inline-block; margin-right: 10px;}

.form_base label{ cursor: pointer;}
.form_base .ck_list,
.form_base table{ font-size: 1.5em; line-height: 1.4; width: 100%; color: #23374b; border-collapse: collapse;}
.form_base .ck_list,
.form_base .personal_list{ padding: 0 30px; box-sizing: border-box;}
.form_base table th{ width: 200px; box-sizing: border-box; font-weight: 700; border-bottom: 1px solid #ddd;}
.form_base table td{ padding: 15px 15px; box-sizing: border-box; border-bottom: 1px solid #ddd;}
.form_base table th span.must{ color: #e62850;}
.form_base span.err{ color: #e62850; font-size: 12px; display: block;}

.form_base input[type="text"],
.form_base input[type="password"],
.form_base textarea{ -webkit-appearance: none; appearance: none; font-size: 16px; line-height: 1.4; margin: 4px 0; padding: 12px; border: 1px solid #999; background-color: #fff; box-sizing: border-box; transition: .2s;}
.form_base input[type="text"]:hover,
.form_base input[type="password"]:hover,
.form_base textarea:hover{ border: 1px solid #666;}
.form_base input[type="text"]:focus,
.form_base input[type="password"]:focus,
.form_base textarea:focus{ background-color: #ffc; border: 1px solid #333;}

.form_base .w20per {width:20%;}
.form_base .w50per {width:50%;}
.form_base .w100per {width:100%;}

/* ラジオボタン */
#content .form_base label.radio{display:inline-block;margin:0 10px 10px 0;position:relative;}
#content .form_base label.radio input{display:none;}
#content .form_base label.radio span{display:inline-block;padding:10px 15px 10px 45px;border-radius:8px;border:1px solid #DDD;cursor:pointer;transition:0.3s;background-color: #fff;}
#content .form_base label.radio span sup{display:inline-block;vertical-align:top;}
#content .form_base label.radio input + span::before{content:"";display:block;width:20px;height:20px;border-radius:40px;box-sizing:border-box;border:1px solid #AAA;position:absolute;top:12px;left:15px; background-color: #fff;}
#content .form_base label.radio input + span::after{transition:0.1s;opacity:0;content:"";display:block;width:10px;height:10px;border-radius:40px;position:absolute;top:17px;left:20px;background-color:#0062b1;}
#content .form_base label.radio input:checked + span{background-color:#c4e4f5;}
#content .form_base label.radio input:checked + span::after{opacity:1;}
/* チェックボックス */
#content .form_base .ck_list{display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;}
#content .form_base .ck_wrap .horizontal-item{margin:0;}
#content .form_base .ck_wrap label{margin-right:10px;}
#content .form_base .agree_box .ck_wrap label{margin:5px 0 5px 5px;}
#content .form_base .ck_wrap label{display:inline-block;vertical-align:middle;margin:0 10px 10px 0;position:relative;transition: .2s;}
#content .form_base .ck_wrap label input{display:none;}
#content .form_base .ck_wrap label span{display:inline-block;vertical-align:middle;padding:10px 15px 10px 45px;border-radius:3px;border:1px solid #DDD;cursor:pointer;transition:0.3s;background-color: #fff;}
#content .form_base .ck_wrap label span sup{display:inline-block;vertical-align:top;}
#content .form_base .ck_wrap label input + span::before{content:"";display:inline-block;width:20px;height:20px;border-radius:5px;box-sizing:border-box;background-color:#FFF;border:1px solid #AAA;position:absolute;top:12px;left:15px;}
#content .form_base .ck_wrap label input + span::after{transition:0.1s;opacity:0;content:"";display:block;width:5px;height:15px;transform:rotate(40deg);border-bottom:3px solid #0062b1;border-right:3px solid #0062b1;position:absolute;top:12px;left:21px;}
#content .form_base .ck_wrap label input:checked + span{background-color:#c4e4f5;}
#content .form_base .ck_wrap label input:checked + span::after{opacity:1;}
#content .form_base .ck_wrap label.reform span{ background-color: #ffd1a3;}
#content .form_base .ck_wrap label.reform input + span::after{ opacity: 1!important; width:24px; height:1px; background:#AAA; transform:rotate(-45deg); border-bottom: 0; border-right: 0; position: absolute; top: 22px; left: 13px;}
/* セレクトボタン */
#content .form_base .select_box{ display:inline-block; vertical-align:middle; 
	background: url(../../images/entry/arrow.png) no-repeat right 6px center;
	background-size: auto 9px;
	overflow:hidden; box-sizing:border-box; position: relative; border: solid 1px #CCC; transition: .2s;}
#content .form_base label.select{ position: relative; display: inline-block;}
#content .form_base label.select::after{content:"";display:inline-block;width:0;height:0;margin:auto;position:absolute;top:5px;bottom:0;right:10px;border:5px solid transparent;border-top:7px solid #bbb;}
#content .form_base select{ font-size:1em; line-height:2; padding:8px 2em 8px 8px; appearance: none; border-radius: 0; border: 0;box-sizing:border-box;cursor:pointer;position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:#121212;background-color:#FFF;}
#content .form_base select.select_boxt::-ms-expand{display:none;}
#content .form_base select.select_box:not(:target){width:120% \9;}

.agree_box{ padding: 40px 30px 30px; box-sizing: border-box;}
.agree_box h3{ font-size: 1.5em; line-height: 1.4; color: #23374b; font-weight: 700; margin-bottom: 15px;}
.agree_box h3 span.must{ color: #e62850;}
.agree_box > p{ font-size: 1.5em; line-height: 1.4; margin-bottom: 30px; text-align: center;}
.agree_box > p a{ color: var(--base_navy); text-decoration: underline;}
.agree_box .privacy_list{ margin-bottom: 50px;}
.agree_box .privacy_list iframe{ width: 100%; height: 300px; margin: 0 auto; border: 1px solid #ddd;}
.agree_box .item_wrap{ text-align: center; font-size: 1.5em; line-height: 1.4;}
.mw_wp_form_confirm .agree_box .item_wrap{text-align:left;}
.conf .agree_box{ font-size: 1.5em; line-height: 1.4;}
.conf .agree_box h3{ font-size: 1em;}
.send_box{ text-align: center; margin-bottom: 80px;}
.send_box input{ display: block; margin: 0 auto;}
.send_box .submit_btn,
.send_box input#to_conf_btn_df1,
.send_box #submit_btn{ margin:20px auto 50px; font-size: 2em; padding: 40px 100px; box-sizing: border-box; color: #fff; background-image: linear-gradient(90deg, #46a3ee, #0062b1); font-weight: 700; cursor: pointer; border: none; display: block; transition: .2s;}
.send_box input.reset,
#return_btn{ font-size: 1.4em; padding: 10px 20px; box-sizing: border-box; color: #321414; background-color: #fff; border: 1px solid #ddd; cursor: pointer; margin: 0 auto; display: block; transition: .2s;}
.transmit { font-size: 1.5em; line-height: 1.2; padding-bottom: 10px; text-align: center; margin-top: 50px;}

.top_btn { text-align: center; width: 260px; margin: 0 auto;}
.top_btn a { width: 100%; height: 70px; color: var(--base-navy); border: 1px solid var(--base_navy); background-color: #fff; font-size: 1.6em; font-weight: 700; display: flex; justify-content: center; align-items: center; padding: 0 40px; box-sizing: border-box; position: relative; z-index: 1; text-align: center;}

.mw_wp_form_complete dl{ text-align: center;}
.mw_wp_form_complete dl dt{ font-size: 2.2em; font-weight: 700; margin-bottom: 20px; line-height: 1.4em;}
.mw_wp_form_complete dl dd{ font-size: 1.5em; margin-bottom: 40px; line-height: 1.4em;}
.mw_wp_form_complete .go_top{ display: block; margin: 0 auto; text-align: center;}
.mw_wp_form_complete .go_top a{ display: inline-block; font-size: 1.5em; padding: 15px 25px; box-sizing: border-box; border: 1px solid var(--base_navy); color: var(--base_navy); transition: .2s;}

@media screen and (max-width: 999px) {
	.form_base .ck_wrap,
	.form_base .personal_list{ padding: 0;}
	.form_base table th{ width: 170px;}

	.agree_box{ padding: 40px 0 30px;}
}
@media screen and (min-width: 768px) {
	#content .form_base .select_box:hover{ border: 1px solid #888;}
	.top_btn a:hover { color: #fff;}
	.top_btn a::after { background: var(--base_navy); position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; transform: scale(0, 1); transform-origin: left top; transition: .2s cubic-bezier(0.45, 0, 0.55, 1); z-index: -1;}
	.top_btn a:hover::after { transform: scale(1, 1);}
	#content .form_base .ck_wrap label:hover span{border:1px solid #aaa;}
	.send_box .submit_btn:hover,
	.send_box input#to_conf_btn_df1:hover,
	.send_box #submit_btn:hover{ filter: brightness(1.2);}
	.send_box input.reset:hover,
	#return_btn:hover{ border: 1px solid #aaa;}
  .mw_wp_form_complete .go_top a:hover{ background-color:var(--base_navy); color: #fff;}
    .agree_box > p a:hover{ text-decoration: none;}
}
@media screen and (max-width: 767px) {
	.form_base table tr{ display: flex; flex-wrap: wrap; margin-bottom: 15px;}
	.form_base table th{ width: 100%; border-bottom: none; margin-bottom: 5px;}
	.form_base table td{ width: 100%; padding: 0 0 15px;}
	
	.form_base .w20per{ width: 4em;}
	.form_base .w50per,
	.form_base .w100per {width:100%;}
	
	.agree_box{ padding: 40px 0 20px;}
	.agree_box .privacy_list{ margin-bottom: 30px;}
	.send_box{ margin-bottom: 50px;}
	.send_box .submit_btn,
	.send_box input#to_conf_btn_df1,
	.send_box #submit_btn{ margin:10px auto 30px; font-size: 2em; padding: 30px 0; width: 100%;}
	.mw_wp_form_complete dl{ text-align: left;}
	.mw_wp_form_complete dl dt{ font-size: 1.6em;}
	.mw_wp_form_complete dl dd{ font-size: 1.4em;}
  .mw_wp_form_complete .go_top a{ font-size: 1.3em;}
}