@charset "utf-8";

:root {
    --main_blue: #0062b1;
    --base_navy: #23374b;
    --line_skyblue: #bad8f2;
}

/*-------------------------
__blog_listbox
-------------------------*/

.sp_on{ display: none;}
@media screen and (max-width: 767px) {
	.sp_on{ display: block;}
}

h2.sub_title {position: relative;font-weight:bold;margin: 170px auto 50px;text-align: center;}
h2.sub_title span {font-size: 2.333em;font-weight: 700;align-items: center;text-transform: uppercase; line-height: 1.4em;}
h2.sub_title span::before {content: '';display: inline-block;width: 1px;height: 53px;background-color:var(--base_navy);position: absolute;top:-85px;left: 50%;transform: translateX(-50%);-webkit- transform:translateX(-50%);}
@media screen and (max-width:999px){
#wrap.contents #page_title .contents_visual .contents_en{ top: -100px!important;}
}
@media screen and (max-width: 767px) {
h2.sub_title {margin: 30vw auto 5vw;}
h2.sub_title span {font-size: 1.8em;}
h2.sub_title span::before {height: 10vw;top:-17vw;}
}


#internship {}
#internship .inner { width: 100%; max-width: 1000px; margin: 0 auto;}
#internship .inner .dl_wrap dl { display: flex; align-items: stretch; border-bottom: 1px solid var(--base_navy); font-size: 1.8em; font-weight: 700; padding: 20px 0;}
#internship .inner .dl_wrap dl:first-of-type { border-top: 1px solid var(--base_navy);}
#internship .inner .dl_wrap dl dt{ width: 210px; border-right: 1px solid var(--base_navy); text-align: center; font-weight: 700; padding: 10px 0; display: flex; justify-content: center; align-items: center;}
#internship .inner .dl_wrap dl dd{ padding: 10px 0 10px 46px; width: calc(100% - 211px);}
#internship .inner .dl_wrap dl dd span{ padding-right: 25px; display: inline-block;}
#internship .inner .dl_wrap dl dd span:last-of-type{ padding-right: 0;}

#internship .inner .program_wrap{ margin-bottom: 70px; position: relative;}
#internship .inner .program_wrap .program_img{ width: 100%; height: 380px; overflow: hidden;}
#internship .inner .program_wrap .program_img img{ width: 100%; height: 100%; object-fit: cover;}
#internship .inner .program_wrap .program_text{ background: rgba(255,255,255,0.8); position: absolute; width: 100%; padding: 50px 100px; box-sizing: border-box; bottom: 0; font-weight: 700;}
#internship .inner .program_wrap .program_text h3{ font-size: 2.5em; font-weight: 700; margin-bottom: 30px;}
#internship .inner .program_wrap .program_text p{ font-size: 1.6em; line-height: 1.6em;}
@media screen and (max-width: 999px) {
	#internship .inner {}
	#internship .inner .dl_wrap dl{ font-size: 1.6em;}
	#internship .inner .dl_wrap dl dt{ width: 140px; padding: 10px 0;}
	#internship .inner .dl_wrap dl dd{ padding-left: 30px; width: calc(100% - 141px);}
	#internship .inner .dl_wrap dl dd span{ padding-right: 0; padding-top: 14px;}
	#internship .inner .dl_wrap dl dd span:first-of-type{ padding-top: 0;}
	
	#internship .inner .program_wrap{ margin-bottom: 50px; position: relative;}
	#internship .inner .program_wrap .program_text{ padding: 30px 50px;}
	#internship .inner .program_wrap .program_text h3{ margin-bottom: 20px;}
}
@media screen and (max-width: 767px) {
	#internship .inner .dl_wrap dl { font-size: 1.4em;}
	#internship .inner .dl_wrap dl dt{ width: 90px; padding: 10px 0;}
	#internship .inner .dl_wrap dl dd{ padding-left: 20px; width: calc(100% - 91px);}
	#internship .inner .dl_wrap dl dd span{ display: block;}

	#internship .inner .program_wrap{ margin-bottom: 30px;}
	#internship .inner .program_wrap .program_img{ height: 220px;}
	#internship .inner .program_wrap .program_text{ padding: 20px 20px;}
	#internship .inner .program_wrap .program_text h3{ font-size: 1.8em; margin-bottom: 10px;}
	#internship .inner .program_wrap .program_text p{ font-size: 1.3em; line-height: 1.4em;}
}
@media screen and (max-width: 374px) {
	#internship .inner dl { font-size: 1.3em;}
	#internship .inner dl dt { width: 60px; padding: 0px 0; border-right: none;}
	#internship .inner dl dd { width: calc(100% - 61px); padding: 0px 0 0px 20px;}
    #internship .inner .program_wrap { margin: 0 -30px 10px;}
	#internship .inner .program_wrap .program_img { height: 200px;}
	#internship .inner .program_wrap .program_text { padding: 20px 30px; position: initial;}
}

/*-------------------------
__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_list label.ck{margin-right:10px;}
label.ck{display:inline-block;vertical-align:middle;margin:0 10px 10px 0;position:relative;transition: .2s;}
label.ck input{display:none;}
label.ck 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;}
label.ck span sup{display:inline-block;vertical-align:top;}
label.ck 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;}
label.ck 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;}
label.ck input:checked + span{background-color:#c4e4f5;}
label.ck input:checked + span::after{opacity:1;}
label.ck.reform span{ background-color: #ffd1a3;}
label.ck.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; 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;}
.send_box{ text-align: center; margin-bottom: 80px;}
.send_box input{ display: block; margin: 0 auto;}
.send_box input#to_conf_btn_df1,
#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;}

.rgst dl{ text-align: center;}
.rgst dl dt{ font-size: 2.2em; font-weight: 700; margin-bottom: 20px; line-height: 1.4em;}
.rgst dl dd{ font-size: 1.5em; margin-bottom: 40px; line-height: 1.4em;}

@media screen and (max-width: 999px) {
	.form_base .ck_list,
	.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);}
	label.ck:hover span{border:1px solid #aaa;}
	.send_box input#to_conf_btn_df1:hover,
	#submit_btn:hover{ filter: brightness(1.2);}
	.send_box input.reset:hover,
	#return_btn:hover{ border: 1px solid #aaa;}
    .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 input#to_conf_btn_df1,
	#submit_btn{ margin:10px auto 30px; font-size: 2em; padding: 30px 0; width: 100%;}
	.rgst dl{ text-align: left;}
	.rgst dl dt{ font-size: 1.6em;}
	.rgst dl dd{ font-size: 1.4em;}
}