@charset "utf-8";

/* COMMON STYLE
------------------------------- */
html { width: 100%; }
body {
	width: 100%;
	font-family: 'Poppins', 'Noto Sans JP', sans-serif;
	letter-spacing: 2px;
	color: #000000;
	background-color: #fff;
}
img { display: block; max-width: 100%; }
.none { display: none !important; }

.header { position: relative; z-index: 100; }
.container { width: 100%; position: relative; }
.sec_ttl { font-size: 32px; font-weight: bold; position: relative; text-align: center; border-bottom: 3px solid #000000; display: table; margin: 0 auto; line-height: 1.2em; }
.container.top .sec_ttl, .container.error .sec_ttl { border-bottom: none; }
.sec_ttl span { font-size: 16.6vw; }
.sec_txt { font-weight: bold; letter-spacing: .4em; }
.sec_ttl_sub { width: 100%; height: 60px; font-size: 4vw; font-weight: bold; background-color: #e9b800; border-radius: 4px; display: flex; justify-content: center; align-items: center; color: #000000; border: 3px solid #000000; }
.sec_ttl_sub_warn { width: 100%; height: 60px; font-size: 4vw; font-weight: bold; background-color: #ee7800; border-radius: 4px; display: flex; justify-content: center; align-items: center; color: #000000; }
.sec_ttl_line { margin-top: 30px; padding-bottom: 5px; font-size: 4.8vw; font-weight: bold; text-align: center; color: #000000; border-bottom: 1px solid rgba(255, 255, 255, .3); }

/* 背景色 */
.bg_yellow { background-color: #FFFF00; }
.bg_gray { background-color: #7F7F7F; }

/* top */
.sec_top { padding-top: 20vh; text-align: center; position: relative; }
.sec_top .logo { width: 65vw; margin: 6vh auto 0; }
.sec_top .sec_ttl { font-size: 4.8vw; letter-spacing: 5px; text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0px 1px 0 #FFF, 0-1px 0 #FFF, -1px 0 0 #FFF, 1px 0 0 #FFF; }
/* .sec_top .sec_ttl { margin-top: 15vh; } */
.sec_top .sec_ttl span { text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0px 1px 0 #FFF, 0-1px 0 #FFF, -1px 0 0 #FFF, 1px 0 0 #FFF; }
.sec_top .sec_txt { margin-top: 3vh; font-size: 4.8vw; line-height: 2; color: #000000; text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0px 1px 0 #FFF,  0-1px 0 #FFF, -1px 0 0 #FFF, 1px 0 0 #FFF; }
.sec_top .icon_arrow { margin-top: 5vh; height: 14px; position: relative; }
.sec_top .icon_arrow span { margin: 0 auto; width: 3px; height: 100%; background-color: #000000; display: block; }
.sec_top .icon_arrow span::after { content: ''; width: 12px; height: 12px; border-right: 3px solid #000000; border-bottom: 3px solid #000000; position: absolute; bottom: -6px; left: 0; right: 0; margin: 0 auto; transform: rotate(45deg); }
.sec_top .btn { margin: 4vh auto 0; width: 31vw; height: 10vw; }
.sec_top .btn a { display: block; width: 100%; height: 100%; font-size: 4.8vw; font-weight: 600; background-color: #feffda; border: 2px solid #000000; color: #000000; border-radius: 35px; display: flex; justify-content: center; align-items: center; }
.sec_top .txt_area {  width: 100%; }
/* login */
.sec_top.login { background: none; padding-top: 10vh; }
.sec_top.login .sec_ttl { font-size: 32px; letter-spacing: .3em; }
.sec_top.login .sec_txt { font-size: 4.8vw; }
.sec_top.login .icon_arrow { margin-top: 2vh; }
.sec_top.login .btn { margin: 5vh auto 0; width: 46vw; height: 54px; }
.sec_top.login .btn input { width: 100%; height: 100%; font-size: 4.2vw; font-weight: 400; letter-spacing: 3px; border-radius: 30px; background-color: #e9b800; color: #000; border: none; display: flex; justify-content: center; align-items: center; border: 2px solid #000; font-weight: bold; }
.sec_top.login .login_mail { width: 75vw; margin: 5vh auto 0; }
.sec_top.login .login_mail input { width: 100%; height: 100%; font-size: 3.2vw; font-weight: 600; letter-spacing: 3px; padding: 10px 10px; background-color: #000000; color: #e9b800; border: none; border-bottom: 5px solid #e9b800; }
.sec_top.login .login_mail ::placeholder { color: #e9b800; }

/* service menu */
.sec_service { padding: 50px 20px 20px; }
.sec_service .txt_areaIn { margin-bottom: 100px; }
.sec_service .title_area { display: flex; align-items: center; }
.sec_service .title_area h2 { background: #000000; color: #fff; padding: 3px 15px; margin-right: 25px; font-size: 20px; word-break: keep-all; }
.sec_service .title_area .sec_txt { font-size: 16px; }
.sec_service .design_list{ margin: 40px 0 60px; display: flex; flex-wrap: wrap; justify-content: space-between; }
.sec_service .design_list li { width: 48%; font-weight: bold; text-align: center; background: #feffda; border: 4px solid #000000; position: relative; }
.sec_service .design_list li:before, .sec_service .design_list li:after { content: ""; position: absolute; width: 0; height: 0; margin: auto; }
.sec_service .design_list li:before { bottom: -30px; left: 0; border-style: solid; border-color: transparent transparent transparent #feffda; border-width: 0 0 31px 31px; z-index: 10; }
.sec_service .design_list li:after { bottom: -40px; left: -4px; border-style: solid; border-color: transparent transparent transparent #000000; border-width: 0 0 40px 40px; }
.sec_service .design_list li:hover:before { border-color: transparent transparent transparent #e9b800; }
.sec_service .design_list li:hover { background: #e9b800; }
.sec_service .design_list li a{ color: #000000; display: block; padding: 0 0 20px; }
.sec_service .design_list .course_name { font-size: 18px; margin-bottom: 20px; padding: 5px 0; color: #fff; background: #717071; }
.sec_service .design_list .course_content { padding: 0 10px; font-size: 14px; text-align: left; margin: 0 auto; display: inline-block; }
.sec_service .design_list .link_txt { margin-top: 20px; margin-right: 20px; position: relative; text-align: right; }
.sec_service .design_list .link_txt span { padding-right: 0.5em; }
.sec_service .annotation{ font-size: 14px; }
.sec_service .annotation a{ color: #000000; text-decoration: underline; }
.sec_service .annotation a:hover{ text-decoration: none; }
.sec_service .note{ margin-top: 100px; border: 2px solid #000000; padding: 10px 15px; }
.sec_service .note .note_list{ font-size: 14px; }
.sec_service .note .note_list li{ list-style: decimal; margin-left: 1.5em; margin-bottom: 15px;  font-weight: bold;}

/* calendar */
.sec_calendar { padding: 50px 20px 20px; }
.sec_calendar .month_area { margin-top: 15px; display: flex; justify-content: space-between; align-items: center; }
.sec_calendar .month_area .btn { width: 62px; }
.sec_calendar .month_area .txt { display: flex; align-items: center; font-size: 4.8vw; font-weight: bold; line-height: 1.5; letter-spacing: .4em; text-align: center; }
.sec_calendar .month_area .txt span { display: block; font-size: 3.4vw; font-weight: bold; margin-right: 20px; }
.sec_calendar .calendar_area .week_list,
.sec_calendar .calendar_area .date_list { display: flex; flex-wrap: wrap;}
.sec_calendar .calendar_area .week_list { margin-top: 15px; }
.sec_calendar .calendar_area .week_list li,
.sec_calendar .calendar_area .date_list li { width: calc(100% / 7); height: 70px; font-size: 14px; border-bottom: 5px solid #ffffff; border-right: 5px solid #ffffff; position: relative; display: flex; justify-content: center; align-items: center; background: #e9b800; }
.sec_calendar .calendar_area .week_list li { font-weight: bold; color: #ffffff; background-color: #000000; }
.sec_calendar .calendar_area .date_list .today { background-color: #848a62; }
.sec_calendar .calendar_area .date_list .num { font-weight: 600; position: absolute; left: 0; top: 0; }
.sec_calendar .calendar_area .date_list .status { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.sec_calendar .calendar_area .date_list .status.st_non, .sec_calendar .calendar_area .date_list .status.st_ng { background: #717071; }
.sec_calendar .calendar_area .date_list .status.st_ng::after, .sec_calendar .calendar_area .date_list .status.st_non::after { content: ''; width: 25%; height: 1px; background-color: #ffffff; position: absolute; top: 50%; left: 38%; }
.sec_calendar .calendar_area .date_list .status a { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #000000; }
.sec_calendar .calendar_area .date_list .status.st_ng a, .sec_calendar .calendar_area .date_list .status.st_non a { pointer-events: none; }
.sec_calendar .calendar_area .date_list .status span { display: block; width: 5vw; height: 5vw;  position: relative; text-align: center; }
.sec_calendar .calendar_area .date_list .status.st_ng span, .sec_calendar .calendar_area .date_list .status.st_non span { display: none; }
/*.sec_calendar .calendar_area .date_list .status span.st_ok { background-color: #c76679; border-radius: 50%; }*/
.sec_calendar .calendar_area .date_list .status span.st_ok { background-color: #FFFFFF; border-radius: 50%; }
.sec_calendar .calendar_area .date_list .status span.st_non::after { content: ''; width: 100%; height: 3px; background-color: rgba(255, 255, 255, .3); position: absolute; top: 50%; left: 0; }
.sec_calendar .calendar_area .date_list .status span.st_ng::before { content: ''; width: 100%; height: 3px; background-color: #000000; position: absolute; top: 50%; left: 0; transform: rotate(45deg); }
.sec_calendar .calendar_area .date_list .status span.st_ng::after { content: ''; width: 100%; height: 3px; background-color: #000000; position: absolute; top: 50%; left: 0; transform: rotate(-45deg); }
.sec_calendar .calendar_area .date_list .status span.st_lit::after { content: ''; width: 0; height: 0; border-style: solid; border-width: 0 2.2vw 4vw 2.2vw; border-color: transparent transparent #746656 transparent; position: absolute; top: 2px; left: 0; right: 0; margin: 0 auto; }
.sec_calendar .calendar_area .date_list .status span.st_sudden::before { content: ""; position: absolute; top: 0; left: 0;     width: 100%; height: 3px; border-top: 1vw solid transparent; border-left: 1vw solid #746656; border-bottom: 1vw solid transparent; }
.sec_calendar .calendar_area .date_list .status span.st_sudden::after  { content: ""; position: absolute; top: 0; left: 0.8vw; width: 100%; height: 3px; border-top: 1vw solid transparent; border-left: 1vw solid #746656; border-bottom: 1vw solid transparent; }

/* form */
.sec_form { padding: 20px; }
.sec_form .month_txt { display: flex; align-items: center; justify-content: center; margin-top: 25px; font-size: 4.8vw; font-weight: bold; line-height: 1.5; letter-spacing: .4em; text-align: center; }
.sec_form .month_txt span { display: block; font-size: 3.4vw; margin-right: 20px; }
.sec_form .form_area { margin-top: 30px; }
.sec_form .form_area .sec_txt { margin-top: 30px; font-size: 3.6vw; font-weight: bold; text-align: center; letter-spacing: 2px; }
.sec_form .form_area .check { margin-top: 5px; text-align: center; }
.sec_form .form_area .check a { font-size: 3.6vw; font-weight: bold; text-decoration: underline; color: #000000; pointer-events: none; text-decoration: none; }
.sec_form .form_area .btn_area { margin: 30px 20px 0; height: 54px; display: flex; justify-content: space-between; }
.sec_form .form_area .btn_back,
.sec_form .form_area .btn_edit { width: 40%; height: 100%; }
.sec_form .form_area .btn_conf,
.sec_form .form_area .btn_send { width: 55%; height: 100%; }
.sec_form .form_area .btn_back a,
.sec_form .form_area .btn_conf input,
.sec_form .form_area .btn_edit input,
.sec_form .form_area .btn_send input { display: block; width: 100%; height: 100%; font-size: 4vw; font-weight: 400; letter-spacing: 3px; border-radius: 30px; display: flex; justify-content: center; align-items: center; }
.sec_form .form_area .btn_back a { background-color: #feffda; border: 2px solid #000000; color: #000000; font-weight: bold; }
.sec_form .form_area .btn_conf input,
.sec_form .form_area .btn_send input { background-color: #e9b800; color: #000; border: 2px solid #000000; font-weight: bold; }
.sec_form .form_area .btn_edit input { background-color: #000000; color: #fff; border: none; }
.sec_form .form_list { display: flex; flex-wrap: wrap; }
.sec_form .form_list dt,
.sec_form .form_list dd { font-size: 3.0vw; font-weight: bold; margin-bottom: 15px; }
.sec_form .form_list dt { width: 38%; }
.sec_form .form_list dd { width: 62%; }
.sec_form .form_list dd.error { color:#ee7800; }
.sec_form div.error { color:#ee7800; }
.sec_form .form_list .required::after { content: '必須'; font-size: 2vw; font-weight: 600; padding: 0 3px; display: inline-block; background: #e9b800; border-radius: 3px; margin-left: 3px; transform: translateY(0px); }
.sec_form .form_list .meter { padding-left: 10px; }
.sec_form .form_list .elem_area { display: flex; justify-content: space-between; }
.sec_form .form_list .elem_area .elem { width: 30%; }
.sec_form .form_list .elem.select { position: relative; }
.sec_form .form_list .elem.address { width: 60%; }
.sec_form .form_list .elem.use { width: 70%; }
.sec_form .form_list .elem.file { text-decoration: underline; }
.sec_form .form_list .elem.select::after { content: ''; width: 0; height: 0; border-style: solid; border-width: 6px 5px 0 5px; border-color: #000000 transparent transparent transparent; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); }
.sec_form .form_list .elem input::placeholder,
.sec_form .form_list .elem textarea::placeholder,
.sec_form .form_list .elem select::placeholder { opacity: 0.5; }
.sec_form .form_list .elem input,
.sec_form .form_list .elem textarea,
.sec_form .form_list .elem select { width: 100%; font-size: 3.6vw; padding: 10px; color: #000000; border: 2px solid #000000; font-weight: bold; }
.sec_form .form_list .elem textarea { min-height: 20vw; }
.sec_form .form_list .elem select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #feffda; }
.sec_form .form_list .elem.half input { width: 50%; }
.sec_form .form_list .elem.half input { width: 50%; }
.sec_form .form_list .elem input[type="file"] { display: none; }
.sec_form .form_list .elem .btn_file label { display: inline-block; width: 80%; font-size: 3.8vw; padding: 10px 20px; background: #e9b800 url(../img/icon_file_b.png) no-repeat right 20px center / 8px; border-radius: 30px; border: 2px solid #000000; color: #000000; margin-bottom: 10px; margin-top: 10px; }
.sec_form .btn_file .btn { min-width: 20px; height: 20px; }
.sec_form .btn_file .btn a { width: 100%; height: 100%; font-size: 20px; font-weight: 300; background-color: #000000; border-radius: 50%; display: flex; justify-content: center; align-items: center; }



/* .sec_form .form_list .elem .btn_file p { width: 80%; font-size: 11px; font-weight: 100; text-align: center; margin-top: 5px; opacity: .5; } */
.sec_form .form_list .elem .btn_file .file_name { border: 2px solid #848a62; border-radius: 30px; padding: 15px 15px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; }
.sec_form .form_list .elem .btn_file .file_name .file_nameIn { word-break: break-all; }
.sec_form .form_list .elem .btn_file .file_name .file_nameIn div { padding-right: 1em; }
.sec_form .form_area .check input[type="checkbox"] { display: none; }
.sec_form .form_area .check input[type="checkbox"]+label { display: inline-block; padding-left: 30px; position: relative; }
.sec_form .form_area .check input[type="checkbox"]+label::before { content: ''; width: 20px; height: 20px; border: 2px solid #000000; position: absolute; top: 4px; left: 0; }
.sec_form .form_area .check input[type="checkbox"]+label::after { content: ''; width: 14px; height: 9px; border-bottom: 2px solid; border-left: 2px solid; border-color: #000000; transform: rotate(-45deg); position: absolute; top: 5px; left: 3px; opacity: 0; }
.sec_form .form_area .check input[type="checkbox"]:checked+label::after { opacity: 1; }
.sec_form .form_list .elem ::placeholder { color: #000000; }
.sec_form.confirm .form_list { align-items: flex-start; }
.sec_form.confirm .form_list .required { margin-top: -5px; }
.sec_form.confirm .form_list .elem_area { justify-content: flex-start; }
.sec_form.confirm .form_list .elem_area .elem { width: auto; position: relative; }
.sec_form.confirm .form_list .elem_area .elem:not(:last-child) { margin-right: 2em; }
.sec_form.confirm .form_list .elem_area .elem:not(:last-child)::after { content: ''; width: .5em; height: 1px; background-color: #fff; position: absolute; top: 50%; right: -1.2em; }
.sec_form.confirm .btn_area form { width: 100%; height: 100%; }
.sec_form.thanks .sec_txt { margin-top: 45px; font-size: 3.8vw; font-weight: 100; text-align: center; line-height: 2; letter-spacing: 2px; }


/* reception */
.sec_reception .sec_ttl_line:not(:first-child) { margin-top: 40px; }
.sec_reception .reception_list { padding-top: 5px; }
.sec_reception .reception_list li { margin-top: 15px; height: 60px; }
.sec_reception .reception_list li a { width: 100%; height: 100%; padding: 0 40px 0 20px; background-color: #e9b800; border-radius: 4px; display: flex; align-items: center; position: relative; color: #000000; border: 2px solid #000000; }
.sec_reception .reception_list li a::before { content: ''; width: 12px; height: 2px; background-color: #000; transform: translateY(-50%) ; position: absolute; top: 50%; right: 23px; }
.sec_reception .reception_list li a::after { content: ''; width: 12px; height: 12px; border-top: 2px solid #000; border-right: 2px solid #000; transform: translateY(-50%) rotate(45deg); position: absolute; top: 50%; right: 20px; }
.sec_reception .reception_list .data { width: 32%; font-size: 3.6vw; }
.sec_reception .reception_list .name { width: 68%; font-size: 3.6vw; }
.container.reception { position: relative; padding: 0 20px; }
.top_area { display: flex; justify-content: flex-end; }
.top_area a { background: #feffda; color: #000; padding: 10px 20px; border-radius: 30px; transition-duration: .3s; border: 2px solid #000000; font-weight: bold; }
.top_area a:hover { background: #e9b800; }
.login_retention { position: fixed; z-index: 101; bottom: 0; left: 0; right: 0; padding: 0 20px; }
.login_retention .login_retentionIn { margin: auto auto 20px; max-width: 970px; background: #fff; border: #000000 solid 2px; padding: 1em 1.5em; display: flex; justify-content: space-between; align-items: center; }
.login_retention .login_retentionIn .login_detail { font-size: 14px; font-weight: bold; }
.login_retention .login_retentionIn .login_detail .retention_period { font-size: 12px; color: #e9b800; }
.login_retention .login_retentionIn a { background: #feffda; color: #000000; padding: 10px 20px; border-radius: 30px; transition-duration: .3s; border: 2px solid #000000; font-weight: bold; }
.login_retention .login_retentionIn a:hover { background: #e9b800; }

/* detail */
.sec_detail .sec_ttl_line { margin-top: 30px; }
.sec_detail .detail_box { width: 100%; background-color: #e9b800; border-radius: 4px; margin-top: 40px; border: 2px solid #000000; }
.sec_detail .detail_head { width: 100%; height: 60px; padding: 0 40px 0 20px; display: flex; align-items: center; position: relative; }
.sec_detail .detail_head::after { content: ''; width: 12px; height: 12px; border-bottom: 2px solid #000; border-right: 2px solid #000; transform: translateY(-50%) rotate(45deg); position: absolute; top: 50%; right: 20px; transition-duration: .3s; transition-property: transform; }
.sec_detail .detail_head.active::after { transform: translateY(-50%) rotate(-135deg); }
.sec_detail .detail_head .data { width: 32%; font-size: 3.6vw; color:#000; }
.sec_detail .detail_head .name { width: 68%; font-size: 3.6vw; color:#000; }
.sec_detail .detail_body { width: 100%; padding: 0 20px 20px; display: none; }
.sec_detail .detail_list { display: flex; flex-wrap: wrap; }
.sec_detail .detail_list dt { width: 35%; margin-bottom: 5px; font-size: 3.6vw; color:#000; }
.sec_detail .detail_list dd { width: 65%; margin-bottom: 5px; font-size: 3.8vw; color:#000; }
.sec_detail .file_history_list li { display: flex; flex-direction: column; padding: 10px 20px; background: #feffda; border: 2px solid #000; }
.sec_detail .file_history_list li:nth-child(n+2) { border-top: none; }
.sec_detail .file_history_list li .data { width: 20%; }
.sec_detail .file_history_list li a { color: #000000; text-decoration: underline; margin-left: 30px; }
.sec_detail .file_history_list li a:hover { text-decoration: none; }
.sec_detail .history_list { margin-top: 15px; border-top: 1px solid rgba(255, 255, 255, .3); }
.sec_detail .history_list li { padding: 10px 20px; border-bottom: 1px solid rgba(255, 255, 255, .3); display: flex; justify-content: space-between; align-items: center; }
.sec_detail .history_list li .fa-reply { display: none; }
.sec_detail .history_list .icon { width: 32px; height: 32px; background-color: #000000; border-radius: 50%; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.sec_detail .history_list .icon img { width: 50%; }
.sec_detail .history_list .txt_area { width: 75%; }
.sec_detail .history_list .txt_area a { color:#000000; }
.sec_detail .history_list .data { font-size: 3.2vw; }
.sec_detail .history_list .name { font-size: 3.6vw; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec_detail .history_list .file { width: 20px; height: 20px; }
.sec_detail .history_list .file a { display: block; width: 100%; height: 100%; background: url(../img/icon_file.png) no-repeat center / 8px; }
.sec_detail .btn_mail { margin: 15px auto 0; width: 66vw; height: 40px; font-size: 4vw; font-weight: 400; letter-spacing: 3px; border-radius: 30px; background-color: #e9b800; display: flex; justify-content: center; align-items: center; border: 2px solid #000000; font-weight: bold; }
.sec_detail .btn_mail span { display: inline-block; padding-right: 23px; position: relative; }
.sec_detail .btn_mail span::after { content: ''; width: 18px; height: 13px; background: url(../img/ico_mail.png) no-repeat right center / contain; position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
.sec_detail .btn_back { margin-top: 30px; padding-left: 40px; width: 46vw; height: 54px; }
.sec_detail .btn_back a { display: block; width: 100%; height: 100%; font-size: 4vw; font-weight: 400; letter-spacing: 3px; border-radius: 30px; background-color: #feffda; color: #000; display: flex; justify-content: center; align-items: center; border: 2px solid #000000; font-weight: bold; }

/* mail */
.message_modal { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 500; display: none; }
.message_modal .modal_bg { width: 100%; height: 100%; background: rgba(0, 0, 0, .5); position: absolute; top: 0; left: 0; }
.message_modal .modal_content { width: calc(100% - 40px); max-height: 90%; padding: 60px 20px 40px; color: #000000; background: #fff; border-radius: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.message_modal .modal_content .form_area { overflow: scroll; height: 300px; display: block; }
.message_modal .modal_content .form_area form { padding: 10px; }
.message_modal .modal_close { width: 15px; height: 15px; position: absolute; top: 10px; right: 10px; }
.message_modal .modal_close::before,
.message_modal .modal_close::after { content: ''; width: 2px; height: 100%; background-color: #000000; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; }
.message_modal .modal_close::before { transform: rotate(45deg); }
.message_modal .modal_close::after { transform: rotate(-45deg); }
.message_modal .form_list { display: flex; flex-wrap: wrap; }
.message_modal .form_list dt,
.message_modal .form_list dd { font-size: 3.8vw; letter-spacing: 0; margin-bottom: 15px; }
.message_modal .form_list dt { width: 32%; }
.message_modal .form_list dd { width: 68%; }
.message_modal .form_list .as-c { align-self: center; }
.message_modal .form_list .elem input,
.message_modal .form_list .elem textarea { width: 100%; font-size: 3.8vw; padding: 10px; background-color: #e9e9ec; border: none; border-radius: 5px; }
.message_modal .form_list .subject textarea { min-height: 15vh; }
.message_modal .form_list .text textarea { min-height: 30vh; }
.message_modal .form_list .elem a { color:#000000; text-decoration: underline; }
.message_modal .form_list .elem a:hover { text-decoration: none; }
.message_modal .form_area .btn_group { display: flex; justify-content: center; align-items: center; }
.message_modal .form_area .btn_group .btn_deal { margin: 15px auto 0; width: 45%; height: 54px; }
.message_modal .form_area .btn_group .btn_deal input { display: block; width: 100%; height: 100%; font-size: 4vw; font-weight: 400; letter-spacing: 3px; background-color: #a9bf2a; color: #fff; border: none; border-radius: 30px; display: flex; justify-content: center; align-items: center; }
.message_modal .form_area .btn_group .btn_reply { margin: 15px auto 0; width: 45%; height: 54px; }
.message_modal .form_area .btn_group .btn_reply input { display: block; width: 100%; height: 100%; font-size: 4vw; font-weight: 400; letter-spacing: 3px; background-color: #e9b800; color: #000; border: none; border-radius: 30px; display: flex; justify-content: center; align-items: center; }
/* mail form */
.message_form_modal { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 500; display: none; }
.message_form_modal .modal_bg { width: 100%; height: 100%; background: rgba(0, 0, 0, .5); position: absolute; top: 0; left: 0; }
.message_form_modal .modal_content { width: calc(100% - 40px); max-height: 90%; padding: 60px 20px 40px; color: #000000; background: #fff; border-radius: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.message_form_modal .modal_close { width: 15px; height: 15px; position: absolute; top: 10px; right: 10px; }
.message_form_modal .modal_close::before,
.message_form_modal .modal_close::after { content: ''; width: 2px; height: 100%; background-color: #000000; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; }
.message_form_modal .modal_close::before { transform: rotate(45deg); }
.message_form_modal .modal_close::after { transform: rotate(-45deg); }
.message_form_modal .form_list { display: flex; flex-wrap: wrap; }
.message_form_modal .form_list dt,
.message_form_modal .form_list dd { font-size: 3.8vw; letter-spacing: 0; margin-bottom: 15px; }
.message_form_modal .form_list dt { width: 32%; }
.message_form_modal .form_list dd { width: 68%; }
.message_form_modal .form_list .as-c { align-self: center; }
.message_form_modal .form_list .elem input,
.message_form_modal .form_list .elem textarea { width: 100%; font-size: 3.8vw; padding: 10px; background-color: #e9e9ec; border: none; border-radius: 5px; }
.message_form_modal .form_list .subject textarea { min-height: 15vh; }
.message_form_modal .form_list .text textarea { min-height: 30vh; }
.message_form_modal .form_list .elem input[type="file"] { display: none; }
.message_form_modal .form_list .elem .file_name { display: flex; align-items: center; }
.message_form_modal .form_list .elem .file_name .btn { width: 20px; height: 20px; margin-left: 10px; }
.message_form_modal .form_list .elem .file_name .btn a { width: 100%; height: 100%; font-size: 20px; font-weight: 300; background-color: #000000; border-radius: 50%; display: flex; justify-content: center; align-items: center; }
.message_form_modal .form_list .elem .btn_file label { display: inline-block; width: 40%; padding: 20px 0; background: #e9b800 url(../img/icon_file_b.png) no-repeat center / 8px; border-radius: 30px; }
.message_form_modal .form_area .btn_send { margin: 15px auto 0; width: 50%; height: 54px; }
.message_form_modal .form_area .btn_send input { display: block; width: 100%; height: 100%; font-size: 4vw; font-weight: 400; letter-spacing: 3px; background-color: #e9b800; color: #000; border: none; border-radius: 30px; display: flex; justify-content: center; align-items: center; }




/* error */
.sec_error { padding: 20px; }
.sec_error .txt_area { margin-top: 20px;  text-align: center; }
.sec_error .btn { margin: 8vh auto 0; width: 118px; height: 118px; }
.sec_error .btn a { display: block; width: 100%; height: 100%; font-weight: 600; background-color: #e9b800; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #000; border: 2px solid #000; font-weight: bold; }
.sec_error .btn a:hover { background-color: #feffda; }

/* PC
------------------------------- */
@media screen and (max-width: 1000px) {
	.sec_service .design_list .course_name { font-size: 2.1vw; }
	.sec_service .design_list .course_content { font-size: 1.6vw; }
	.sec_service .design_list .link_txt { font-size: 1.8vw; }
	
	/* reception */
	.login_retention .login_retentionIn { flex-direction: column; }
	.login_retention .login_retentionIn .login_detail { margin-bottom: 25px; width: 100%; }
}

@media screen and (min-width: 751px) {
	.for-sp { display: none !important; }
	
	.sec_ttl { font-size: 36px; }
	.sec_ttl span { font-size: 47px; }
	.sec_ttl_sub { margin-top: 20px; height: 60px; font-size: 20px; letter-spacing: 4px; }
	.sec_ttl_sub_warn { margin-top: 20px; height: 100px; font-size: 20px; letter-spacing: 4px; }
	.sec_ttl_line { padding-bottom: 15px; font-size: 20px; font-weight: 300; }
	.container:not(.top) { max-width: 1080px; margin: 30px auto; }
	
	.header .logo { width: 440px; margin: 0 auto; padding: 60px 0 0; }
	.header .sec_ttl { font-size: 26px; font-weight: 600; letter-spacing: .5em; text-align: center; padding: 5px 0; }

	/* top */
	.sec_top .logo { width: 440px; }
	.sec_top .sec_ttl { font-size: 24px; } 
	.sec_top .sec_ttl span { font-size: 53px; } 
	.sec_top .sec_txt { margin-top: 10vh; font-size: 24px;  }
	.sec_top .icon_arrow { margin-top: 8vh; }
	.sec_top .btn { margin: 4vh auto 0; width: 160px; height: 50px; }
	.sec_top .btn a { font-size: 24px; transition-duration: .3s; transition-property: color, background-color; }
	.sec_top .btn a:hover { background-color: #e9b800; }
	/* login */
	.sec_top.login .sec_ttl { font-size: 34px; }
	.sec_top.login .sec_txt { font-size: 16px; }
	.sec_top.login .icon_arrow { margin-top: 3vh; }
	.sec_top.login .btn { width: 280px; }
	.sec_top.login .btn input { font-size: 20px; cursor: pointer; transition-duration: .3s; transition-property: color, background-color; }
	.sec_top.login .btn input:hover { color: #000; background-color: #feffda; }
	.sec_top.login .login_mail { width: 420px; }
	.sec_top.login .login_mail input { font-size: 12px; }

    /* service menu */
	.sec_service .btn a{ font-size: 16px; transition-duration: .3s; transition-property: color, background-color; }
	.sec_service .txt_areaIn:nth-child(2) .design_list li { width: 31%; }
	
	/* calendar */
	.sec_calendar .month_area { margin-top: 50px; }
	.sec_calendar .month_area .btn { width: 110px; }
	.sec_calendar .month_area .txt { font-size: 26px; font-weight: bold; }
	.sec_calendar .month_area .txt span { font-size: 18px; }
	.sec_calendar .calendar_area .week_list,
	.sec_calendar .calendar_area .date_list { /* border-left: 1px solid rgba(255, 255, 255, .3); */ }
	.sec_calendar .calendar_area .week_list li { height: 50px; font-size: 18px; }
	.sec_calendar .calendar_area .date_list li { height: 100px; font-size: 18px; }
	.sec_calendar .calendar_area .date_list .status a { transition-duration: .3s; transition-property: background-color; }
	.sec_calendar .calendar_area .date_list .status a:hover { background-color: #feffda; }
	.sec_calendar .calendar_area .date_list .status span { width: 30px; height: 30px; }
	.sec_calendar .calendar_area .date_list .status span.st_lit::after { border-width: 0 16px 28px 16px; top: 2px; }

	/* form */
	.sec_form .month_txt { margin-top: 30px; font-size: 20px; }
	.sec_form .month_txt span { font-size: 15px; font-weight: bold; }
	.sec_form .form_area { margin-top: 40px; }
	.sec_form .form_area .sec_txt { margin-top: 40px; font-size: 18px; }
	.sec_form .form_area .check { margin-top: 20px; text-align: center; }
	.sec_form .form_area .check a { font-size: 18px; transition-duration: .3s; transition-property: color; }
	.sec_form .form_area .check a:hover { text-decoration: none; }
	.sec_form .form_area .btn_area { margin: 60px auto 0; height: 72px; width: 80%; }
	.sec_form .form_area .btn_back a,
	.sec_form .form_area .btn_conf input,
	.sec_form .form_area .btn_edit input,
	.sec_form .form_area .btn_send input { font-size: 20px; border-radius: 40px; cursor: pointer; transition-duration: .3s; transition-property: color, background-color; }
	.sec_form .form_area .btn_back a:hover { background-color: #e9b800; }
	.sec_form .form_area .btn_edit input:hover {  }
	.sec_form .form_area .btn_conf input:hover,
	.sec_form .form_area .btn_send input:hover { background-color: #feffda; }
	.sec_form .form_list dt,
	.sec_form .form_list dd { font-size: 15px; }
	.sec_form .form_list dt { width: 25%; }
	.sec_form .form_list dd { width: 75%; }
	.sec_form .form_list .required::after { font-size: 14px; margin-left: 10px; transform: translateY(0px); }
	.sec_form .form_list .meter { padding-left: 20px; }
	.sec_form .form_list .elem.select::after { border-width: 8px 6.5px 0 6.5px; right: 20px; }
	.sec_form .form_list .elem input,
	.sec_form .form_list .elem textarea,
	.sec_form .form_list .elem select { font-size: 14px; padding: 15px; }
	.sec_form .form_list .elem textarea { min-height: 130px; }
	.sec_form .form_list .elem select { cursor: pointer; }
	.sec_form .form_list .elem.half input { width: 50%; }
	.sec_form .form_list .elem input[type="file"] { display: none; }
	.sec_form .form_list .elem .btn_file label { width: 60%; font-size: 14px; padding: 15px 30px; background-position: right 30px center; cursor: pointer; transition-duration: .3s; transition-property: color, background; }
	.sec_form .form_list .elem .btn_file label:hover { background: #feffda url(../img/icon_file_b.png) no-repeat right 30px center / 8px; }
	.sec_form.thanks .sec_txt { margin-top: 60px; font-size: 20px; }

	/* reception */
	.sec_reception .reception_list li a { padding-left: 30px; transition-duration: .3s; transition-property: color, background-color; }
	.sec_reception .reception_list li a::before { transition-duration: .3s; transition-property: background-color; }
	.sec_reception .reception_list li a::after { transition-duration: .3s; transition-property: border-color; }
	.sec_reception .reception_list li a:hover { color: #000; background-color: #feffda; }
	.sec_reception .reception_list li a:hover::before { background-color: #000; }
	.sec_reception .reception_list li a:hover::after { border-color: #000; }
	.sec_reception .reception_list .data { width: 20%; font-size: 15px; }
	.sec_reception .reception_list .name { width: 80%; font-size: 15px; }
	/* detail */
	.sec_detail .sec_ttl_line { margin-top: 40px; }
	.sec_detail .detail_head { height: 100px; padding: 0 60px 0 30px; cursor: pointer; }
	.sec_detail .detail_head::after { right: 30px; }
	.sec_detail .detail_head .data { width: 25%; font-size: 18px; }
	.sec_detail .detail_head .name { width: 75%; font-size: 20px; }
	.sec_detail .detail_body { padding: 0 30px 50px; }
	.sec_detail .detail_list dt { margin-bottom: 15px; font-size: 15px; }
	.sec_detail .detail_list dd { margin-bottom: 15px; font-size: 15px; }
	.sec_detail .file_history_list li { flex-direction: initial; }
	.sec_detail .history_list { margin-top: 30px; }
	.sec_detail .history_list .icon { width: 40px; height: 40px; }
	.sec_detail .history_list .txt_area { width: 80%; }
	.sec_detail .history_list .txt_area a { color:#000000; }
	.sec_detail .history_list .data { font-size: 11px; }
	.sec_detail .history_list .name { font-size: 15px; }
	.sec_detail .history_list .file { width: 30px; height: 30px; }
	.sec_detail .history_list .file a { background-size: 14px auto; /*border-radius: 50%; transition-duration: .3s; transition-property: background;*/ }
	/* .sec_detail .history_list .file a:hover { background: #fff url(../img/icon_file_b.png) no-repeat center / 14px; }
	.sec_detail .history_list .file a:hover { background-color: #000000; } */
	.sec_detail .btn_mail { margin: 30px auto 0; width: 420px; height: 72px; font-size: 20px; border-radius: 40px; cursor: pointer; transition-duration: .3s; transition-property: color, background-color; }
	.sec_detail .btn_mail:hover { color: #000; background-color: #feffda; }
	.sec_detail .btn_mail span { padding-right: 50px; }
	.sec_detail .btn_mail span::after { width: 35px; height: 25px; transition-duration: .3s; transition-property: background-image; }
	.sec_detail .btn_mail:hover span::after { background-image: url(../img/ico_mail.png); }
	.sec_detail .btn_back { margin-top: 50px; padding-left: 0; width: 180px; height: 72px; }
	.sec_detail .btn_back a { font-size: 20px; border-radius: 40px; transition-duration: .3s; transition-property: color, background-color; }
	.sec_detail .btn_back a:hover { color: #000; background-color: #e9b800; }
	/* mail */
	.message_modal .modal_content_wrap { margin: 0 auto; height: 100%; max-width: 1080px; position: relative; }
	.message_modal .modal_content { width: calc(100% - 360px); left: auto; right: 0; transform: translate(0, -50%); }
	.message_modal .modal_close { width: 20px; height: 20px; top: 15px; right: 15px; cursor: pointer; }
	.message_modal .modal_close::before,
	.message_modal .modal_close::after { transition-duration: .3s; transition-property: background-color; }
	.message_modal .modal_close:hover::before,
	.message_modal .modal_close:hover::after { background-color: #e9b800; }
	.message_modal .form_list { display: flex; flex-wrap: wrap; }
	.message_modal .form_list dt,
	.message_modal .form_list dd { font-size: 15px; }
	.message_modal .form_list dt { width: 32%; }
	.message_modal .form_list dd { width: 68%; }
	.message_modal .form_list .elem input,
	.message_modal .form_list .elem textarea { font-size: 15px; }
	.message_modal .form_list .subject textarea { min-height: 10vh; }
	.message_modal .form_list .text textarea { min-height: 30vh; }
	.message_modal .form_list .elem a { color:#000000; }
	.message_modal .form_area .btn_group { display: flex; justify-content: center; align-items: center; }
	.message_modal .form_area .btn_group .btn_deal { margin: 15px auto 0; width: 200px; height: 72px; }
	.message_modal .form_area .btn_group .btn_deal input { font-size: 20px; border-radius: 40px; border: 2px solid #a9bf2a; cursor: pointer; transition-duration: .3s; transition-property: color, background-color; }
	.message_modal .form_area .btn_group .btn_deal input:hover { color: #a9bf2a; background-color: #fff; }
	.message_modal .form_area .btn_group .btn_reply { margin: 15px auto 0; width: 200px; height: 72px; }
	.message_modal .form_area .btn_group .btn_reply input { font-size: 20px; border-radius: 40px; border: 2px solid #000; cursor: pointer; transition-duration: .3s; transition-property: color, background-color; }
	.message_modal .form_area .btn_group .btn_reply input:hover { color: #000; background-color: #feffda; }
	/* mail form */
	.message_form_modal .modal_content_wrap { margin: 0 auto; height: 100%; max-width: 1080px; position: relative; }
	.message_form_modal .modal_content { width: calc(100% - 360px); left: auto; right: 0; transform: translate(0, -50%); }
	.message_form_modal .modal_close { width: 20px; height: 20px; top: 15px; right: 15px; cursor: pointer; }
	.message_form_modal .modal_close::before,
	.message_form_modal .modal_close::after { transition-duration: .3s; transition-property: background-color; }
	.message_form_modal .modal_close:hover::before,
	.message_form_modal .modal_close:hover::after { background-color:#e9b800; }
	.message_form_modal .form_list { display: flex; flex-wrap: wrap; }
	.message_form_modal .form_list dt,
	.message_form_modal .form_list dd { font-size: 15px; }
	.message_form_modal .form_list dt { width: 32%; }
	.message_form_modal .form_list dd { width: 68%; }
	.message_form_modal .form_list .elem input,
	.message_form_modal .form_list .elem textarea { font-size: 15px; }
	.message_form_modal .form_list .subject textarea { min-height: 10vh; }
	.message_form_modal .form_list .text textarea { min-height: 30vh; }
	.message_form_modal .form_list .elem .btn_file label { width: 120px; padding: 25px 0; background-size: 12px auto; border: 2px solid #000; cursor: pointer; transition-duration: .3s; transition-property: background; }
	.message_form_modal .form_list .elem .btn_file label:hover { background: #feffda url(../img/icon_file_b.png) no-repeat center / 12px; }
	.message_form_modal .form_area .btn_send { margin: 15px auto 0; width: 280px; height: 72px; }
	.message_form_modal .form_area .btn_send input { font-size: 20px; border-radius: 40px; border: 2px solid #000; cursor: pointer; transition-duration: .3s; transition-property: color, background-color; }
	.message_form_modal .form_area .btn_send input:hover { color: #000; background-color: #feffda; }
}

@media screen and (min-width:751px) and ( max-width:1080px) {
	.container:not(.top) { }
	.header .logo { left: 20px; }
	.sec_calendar .month_area .btn { width: 10vw; }
	.message_modal .modal_content { width: calc(70% - 20px); left: auto; right: 20px; }
	.message_form_modal .modal_content { width: calc(70% - 20px); left: auto; right: 20px; }
}

/* SP
------------------------------- */
@media screen and (max-width: 750px) {
	.for-pc { display: none !important; }
	.container:not(.top) { padding-bottom: 50px; }
	.inner { margin-top: 20px; }
	
	.sec_ttl { margin-top: 25px; }
	.header { width: 100%; display: flex; justify-content: center; align-items: center; z-index: 100; }
	.header .logo { width: 300px; padding: 40px 0 0; }
	.header .sec_ttl { font-size: 3.8vw; letter-spacing: 4px; }

	
    /* service menu */
	.sec_service .title_area { display: block; }
	.sec_service .title_area h2 { display: inline; }
	.sec_service .title_area .sec_txt { margin-top: 15px; }
	.sec_service .txt_area { padding: 0 0; }
	.sec_service .design_list li { width: 100%; margin: 0 0; }
	.sec_service .design_list .course_name { font-size: 20px; }
	.sec_service .design_list .course_content { font-size: 16px; }
	.sec_service .design_list .link_txt { font-size: 16px; }
	.sec_service .design_list li:nth-child(n+2) { margin-top: 60px; }
	
	/* calendar */
	.sec_calendar .calendar_area .week_list li:nth-child(7n),
	.sec_calendar .calendar_area .date_list li:nth-child(7n) { border-right: none; }
	
	/* form */
	.sec_form .btn_file .btn { max-width: 20px; width: 10%; }
	
	/* reception */
	.top_area { margin-top: 25px; }
	
}