@charset "UTF-8";

/* form
----------------------------------------------- */
.formbox {margin: 0 auto; }
.formbox table {width: 100%;}
.formbox .mailformproTable th{display: block;width: 100%;font-size: 3.6vw;padding: 0;margin: 6% 0 4%;}
.formbox .mailformproTable td{display: block;width: 100%;padding: 0;font-size: 3.4vw;}
#mfp_buttons{width: 100%!important;}
.formbox input{width: 100%!important;}
.formbox textarea.w100 {width:100% !important;height: 150px !important;border: 1px solid #ddd;}
input[type="submit"] {background:none;border:none;font-size: 4vw;color: #fff;line-height: 2.4;font-weight: bold;font-style: normal;}
form#mailformpro input.time-box { margin-bottom:2%; width: 49% !important;vertical-align: middle;}

.formbox ul.select li {width: 100%;}
.formbox ul.select li:first-child { margin-bottom: 2%;}
.formbox .sub-ttl {margin-bottom: 2%;font-size: 14px;font-weight: bold;display: block;}

.formbox .contact-att {font-size: 88%;background: #f5f5f5;padding: 4%;width: 100%; }
.formbox .contact-att span { font-weight: bold; }
.formbox .contact-att span.red {color: #9c8b9f;font-weight: bold;padding: 1px 2px;}
.formbox .contact-att-voice{margin-top: 3%;}
.privacy-in{padding: 0;border: 1px solid #eee;border-radius:5px;margin: 10px auto;}
.privacy-in iframe { width:100%;}

.submit {margin: 10% auto;color: #fff;display: block;position: relative;width: 90%;text-align: center;height: 64px;padding: 1px;-webkit-transition: all 0.3s ease;transition: all 0.3s ease;font-size: 4vw;font-feature-settings: "palt";letter-spacing: .04em;font-weight: 600;background: #b398b8;border-radius: 70px;}
.submit:after {content: "\f105";font-family: 'icon';color: #fff;position: absolute;right: 16px;top: calc(50% - 18px);font-size: 5vw;line-height: 1.8;}
form#mailformpro .submit input{font-size: 4vw;cursor: pointer;}
form#mailformpro .submit:hover{opacity: 0.8;}

form#mailformpro .con_select-box li{width: 100%;}

form#mailformpro .con_select{width: 100%;position: relative;color: #858585;}
form#mailformpro .con_select select{display: block;width: 100%;cursor: pointer;text-overflow: ellipsis;border: none;border-bottom: 1px solid #ddd;outline: none;background: transparent;background-image: none;box-shadow: none;-webkit-appearance: none;appearance: none; padding: 12px 8px;color: #898a95;}
form#mailformpro .con_select:before{content: "\f107";font-size: 1.2rem;font-family: 'icon';display: inline-block;color: #898a95;position: absolute;right: 4%;top: 50%;-webkit-transform: translate(0, -50%);transform: translate(0, -50%);}
form#mailformpro .birth_y{width: 35%;display: inline-block;}
form#mailformpro .birth_m{width: 20%;display: inline-block;margin-left: 3vw;}
form#mailformpro .birth_d{width: 18%;display: inline-block;margin-left: 3vw;}

/* radio01 */
.mailformproTable td li.long{width: 100%;}
input[type=radio] {display: none;}
.radio01 {box-sizing: border-box;cursor: pointer; display: inline-block;padding-left: 28px; position: relative;width: auto;}
.radio01::before {border: 1px solid #9f9f9f; border-radius: 50%;content: '';display: block; height: 16px; left: 5px; margin-top: -8px; position: absolute;  top: 50%;width: 16px;}
.radio01::after {background: var(--pink);border-radius: 50%;content: '';display: block;height: 10px;left: 8px;margin-top: -5px;opacity: 0;position: absolute;top: 50%;width: 10px;}
input[type=radio]:checked ~ .radio01::after{ opacity: 1;}

/* checkbox01 */
input[type=checkbox] {display: none;}
.checkbox01 { box-sizing: border-box;  cursor: pointer;  display: inline-block;  padding-left: 30px;  position: relative;  width: auto;}
.checkbox01::before { border: 1px solid #9f9f9f; content: ''; display: block; height: 16px;left: 5px;margin-top: -8px;  position: absolute; top: 50%;width: 16px;}
.checkbox01::after {border-right: 3px solid #9e8f8f;border-bottom: 3px solid #9e8f8f; content: ''; display: block; height: 9px;left: 11px;margin-top: -7px; opacity: 0; position: absolute; top: 51%;transform: rotate(45deg);width: 5px;}
input[type=checkbox]:checked ~ .checkbox01::after {  opacity: 1;}
form#mailformpro .check_inline{display: -webkit-flex;display: flex;-webkit-justify-content: flex-start;justify-content: flex-start;-webkit-align-items: center;align-items: baseline;-webkit-flex-wrap: wrap;flex-wrap: wrap;}
form#mailformpro .check_inline li{width: 50%;margin-bottom: 2%;}
.checks label {margin-bottom: 2%;border-bottom: 1px solid #ddd;}

select#wkSelect{position: relative;}
button#wkSelect_ms {width: 100%!important; border: 1px solid #e1e1e1!important;padding: 10px;color: #858585;}
.ui-multiselect-menu.ui-widget.ui-widget-content.ui-corner-all{width: 90%!important;left: 5vw!important;}
label.ui-corner-all input[type=checkbox]{display: inline;}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover{padding: 0;}

.use-time td{border-bottom: 1px solid #ddd;padding-bottom: 4vw;}
.use-time ul{margin-bottom: 4vw;}


/* select_menu_box modaal
----------------------------------------------- */
.select_menu, .select_close, .all_check, .not_check {cursor: pointer; transition: all 0.3s ease;}
.select_menu:hover, .select_close:hover, .all_check:hover, .not_check:hover {opacity: 0.6;}
#select_menu_box { visibility: hidden; opacity: 0;position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 100;background: rgba(0,0,0,.6);transition: all 0.6s ease;}
.select_menu_open { position: fixed; width: 100%;}
.select_menu_open #select_menu_box { visibility: visible; opacity: 1;}
.select_menu_in {width: 90%;height: 80%;position: absolute;top: 54%;left: 50%;transform: translate(-50%, -54%);background: #fff;border-radius: 5px;overflow: hidden;}

.select_menu_top {display: -webkit-flex;display: flex;-webkit-justify-content: flex-start;justify-content: flex-start;-webkit-align-items: center;align-items: baseline;-webkit-flex-wrap: wrap;flex-wrap: wrap;position: relative;border-bottom: 1px solid #ccc;padding: 12vw 3vw;}
.select_menu_top p {margin-right: 6vw;}
.select_menu_top p span {margin-right: 2vw;}
.select_close {width: 8vw;height: 8vw;border: 2px solid #615c61;position: absolute;right: 3vw;top: 50%;transform: translate(0, -50%);border-radius: 50px;}
.select_close:before {content:""; width: 70%;height: 2px;background: #615c61;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%) rotate(45deg);}
.select_close:after {content:""; width: 70%;height: 2px;background: #615c61;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%) rotate(-45deg);}

.select_menu_main { overflow-y: auto;   }
.select_menu_main dl {border-bottom: 1px solid #ccc;}
.select_menu_main dl.color {border-bottom: none;}
.select_menu_main dt {font-weight: bold;}
.select_menu_main dd {padding: 2vw 4vw;display: none;background: #f5f5f5;}
.select_menu_main ul {display: -webkit-flex;display: flex;-webkit-justify-content: flex-start;-webkit-align-items: center;-webkit-flex-wrap: wrap;flex-wrap: wrap;justify-content: flex-start;align-items: flex-start;margin: 0 auto;}
.select_menu_main li {margin-right: 3vw;}
.select_menu_main li.long{width: 100%;}
.select_menu_main li:last-child { margin-bottom:0;}
.select_menu_main label {display: -webkit-flex;display: flex;-webkit-justify-content: flex-start;justify-content: flex-start;-webkit-align-items: center;align-items: baseline;-webkit-flex-wrap: wrap;flex-wrap: wrap;padding: 2vw 0;vertical-align: top;}
.select_menu_main .small {font-size: 80%; margin-top: 2%;}
.select_menu_main input[type=checkbox] {margin-right: 5px;}
.select_menu_main .checkbox01{font-feature-settings: "palt";letter-spacing: .02em;padding-left: 26px;line-height: 1.4;position: relative;}
.select_menu_main .checkbox01:before{top: 46%;}
.select_menu_main .checkbox01-type02:before{top: 22%;}
.select_menu_main .checkbox01-type02:after{top: 26%;}

/* accordion
----------------------------------------------- */
.category-f,.category-m{color: #fff;text-align: center;padding: 2.4vw;font-size: 4.6vw;line-height: 1.3;font-feature-settings: "palt";letter-spacing: .04em;margin-top: 6vw;}
.category-f{background: #b398b9;}

.menu-accordion dt {position: relative;cursor: pointer;padding: 4vw 4vw;}
.menu-accordion dt:before, .menu-accordion dt:after {content: '';background: #c3c8cf;position: absolute;top: 0;right: 0;}
.menu-accordion dt:before {width: 16px;height: 2px;top: calc(50% - 0px);right: 13px;}
.menu-accordion dt:after {width: 2px;height: 16px;top: calc(50% - 10px);right: 20px;-webkit-transition: 0.3s;transition: 0.3s;transform: translate(0, 3px);}
.menu-accordion dt.open:after {-moz-transform: rotate(90deg) translate(3px, 0);-ms-transform: rotate(90deg) translate(3px, 0);-webkit-transform: rotate(90deg) translate(3px, 0);transform: rotate(90deg) translate(3px, 0);}


/* =============================================
pc-size 
================================================*/
@media screen and (min-width: 736px) { 

/* form
----------------------------------------------- */
.formbox { margin-top: 50px;}
.formbox .mailformproTable th,.formbox .mailformproTable td{display: table-cell;padding: 14px;font-size: 14px;}
.formbox .mailformproTable th{width: 24%;}
.formbox ul.select {display:-webkit-box; display:-moz-box; display:box; display:-webkit-flex; display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;}
.formbox ul.select li {list-style: none;width: 49%;}
.formbox ul.select li:first-child { margin-bottom:0;}
input[type="submit"] { font-size:16px; }
.formbox .mailformproTable td.flex{ display: -webkit-box;display: -moz-box;display: box;display: -webkit-flex;display: flex;flex-wrap: wrap;align-items: flex-start;justify-content: space-between;}
.formbox .contact-att {padding: 16px;margin-bottom: 0;}
.formbox .contact-att-voice{margin-top: 12px;}
.submit {width: 400px;font-size: 17px;}
.submit:after {font-size: 20px;}
form#mailformpro .submit input{font-size: 16px;}
form#mailformpro .birth_y{width: 220px;display: inline-block;}
form#mailformpro .birth_m{width: 180px;margin-left: 30px;}
form#mailformpro .birth_d{width: 180px;margin-left: 30px;}
.use-time ul{margin-bottom: 6px;}

/* select_menu_box modaal
----------------------------------------------- */
.select_menu_in {width: 960px; height: 70%;   }

.select_menu_top {padding: 20px;}
.select_menu_top p {margin-right: 20px;}
.select_menu_top p span {margin-right: 5px;}
.select_close {width: 30px;height: 30px;right: 15px;}

.select_menu_main dd {padding: 10px 20px;background: #fafafa;}
.select_menu_main li {margin-right: 20px;margin-bottom: 0;}
.select_menu_main label {padding: 10px 0;}

/* accordion
----------------------------------------------- */
.category-f,.category-m{padding: 14px;font-size: 22px;margin-top: 30px;}
.menu-accordion dt {padding: 20px 20px;}
.menu-accordion dt:before {right: 23px;}
.menu-accordion dt:after {right: 30px;}

}