/* CSS Document */

/*Form系共通*/
input,select,textarea {font-family: 'Noto Sans JP', sans-serif;}
input[type="text"] ,
input[type="tel"] ,
input[type="date"] ,
input[type="email"] ,
input[type="password"] ,
input[type="number"] ,
select,
textarea {font-size: 1.4rem; border:1px solid #000;font-weight: 300; padding:20px 15px; box-sizing: border-box; }

input[type="submit"] {-webkit-appearance: none;}
.flexbox li:last-of-type input[type="text"] { margin-right: 0;}
input[type="text"]:disabled,
textarea { width: 100%;min-height: 110px;}
textarea:disabled {background-color: #e5e5e5;}
::placeholder  { color:#6C6F72; }

select { width: 100%;}

.check_btn,.radio { font-size: 1.4rem;}
.check_btn input,
.radio input {display: none;}
.check_btn span {display: block;position: relative;cursor: pointer;border: 1px solid #000;}
.check_btn span::before {position: absolute;top: 0;left: 0;content: "";display: block;width: 24px; height: 24px; border: 1px solid #000;margin-right: 10px;box-sizing: border-box;background: #fff;border-radius: 50%;}

.check_btn input:checked + span::before {background: #0073B8; }
.check_btn input:checked + span::after { position: absolute;top: 6px;left: 4px;content: ""; width: 13px; height: 5px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-45deg);}

.radio span { display: block; border: 1px solid #000; line-height: 40px;cursor: pointer;position: relative;padding:10px 15px 10px 40px;}
.radio span::before {position: absolute;top: 50%;transform: translateY(-50%);left: 20px;content: "";display: block;width: 13px; height: 13px; border: 1px solid #000;box-sizing: border-box;background: #fff;border-radius: 50%;}
.radio input:checked + span::before {background: #000; }

.passwprd { position: relative;}
.passwprd input { padding-right: 50px;}
.passwprd button { background: none;border: none;position: absolute;top: 50%;transform: translateY(-50%);right: 10px;}
.passwprd input[type="text"] + button path#icon_hidden { fill: #EBEBEB;}

@media screen and (max-width: 599px) {
    .check_btn,.radio { font-size: 1.2rem;}
    .check_btn span::before {top: -2px;}
    input[type="text"] ,
    input[type="tel"] ,
    input[type="date"] ,
    input[type="email"] ,
    input[type="password"] ,
    input[type="number"] ,
    select,
    textarea {font-size: 1.2rem; padding: 15px 10px;}
}
button {-webkit-appearance: none;font-family: 'Noto Sans JP', sans-serif;}



#mypage_ttl {text-align: center;padding: 40px 0 100px;}
#mypage_ttl h1 { font-family: 'Playfair Display', serif;font-weight: 500;font-size: 4rem;letter-spacing: 0.2em;}
#mypage_ttl p { font-size: 1.4rem;letter-spacing: 0.1em;padding-top: 20px;font-weight: 500;}

.confirm_table { display: table;font-size: 1.4rem;border-collapse:collapse;margin-bottom: 50px;width: 100%;}
.confirm_table dl { display: table-row;}
.confirm_table dl dt,
.confirm_table dl dd { display: table-cell;box-sizing: border-box;padding: 20px 20px 20px 0;border-bottom: 1px solid #aaa;vertical-align: top;}
.confirm_table dl:last-of-type dt,
.confirm_table dl:last-of-type dd {border-bottom:none;}
.confirm_table dl dt { width: 200px;letter-spacing: 0.1em;}

#mypage_btn  { padding-bottom: 100px; }

@media screen and (max-width: 599px) {
    #mypage_ttl {padding: 20px 0 40px;}
    #mypage_ttl h1 { font-size: 2rem;}
    #mypage_ttl p { font-size: 1.1rem;padding-top: 10px;}
    .confirm_table { font-size: 1.2rem; }
    .confirm_table dl dt { width: 130px;}
    #mypage_btn  { padding-bottom: 40px; }
}


#form_ttl { text-align: center;margin-bottom: 60px;}
#form_ttl .logo_area { margin-bottom: 50px;}
#form_ttl h1 { font-size: 2.8rem;font-weight: 500;letter-spacing: 0.15em;}
#form_ttl p { font-size: 1.6rem;letter-spacing: 0.1em;padding-top: 10px;}

@media screen and (max-width: 599px) {
    #form_ttl { margin-bottom: 30px; }
    #form_ttl .logo_area { margin-bottom: 30px; }
    #form_ttl .logo_area img { width: 60px; }
    #form_ttl h1 { font-size: 1.6rem;}    
}
/*ログインフォーム*/
.forgot { text-align: center;font-size: 1.2rem;}
.login_table { margin-bottom: 40px;}
.login_table dl {}
.login_table dt { font-size: 1.5rem;letter-spacing: 0.1em;padding-bottom: 10px;}
.login_table dd {padding-bottom: 30px;}
.login_table dd input { width: 100%;}
#forgot_txt { text-align: center;background: #EBEBEB;font-size: 1.5rem;padding: 40px 60px;letter-spacing: 0.1em;line-height: 2;margin-bottom: 60px;}
#complete_msg { text-align: center; padding:20px 0 35px;}
#complete_msg p { margin-bottom: 35px;font-size: 1.8rem;font-weight: 500;letter-spacing: 0.1em;line-height: 2;}

@media screen and (max-width: 599px) {
    .login_table dt { font-size: 1.2rem;}
    .login_table dd {padding-bottom: 15px;}
    .login_table { margin-bottom: 25px;}
    #forgot_txt { margin: 0 15px 30px;width: calc(100% - 30px);font-size: 1.1rem;padding: 20px 0px;}
    #complete_msg { padding:10px 0 20px;}
    #complete_msg p { margin-bottom: 20px;font-size: 1.2rem;}
    #complete_msg p img { width: 30px;}
}

/*会員登録*/
#entry_btn {}
#agree { text-align: center;font-size: 1.2rem; padding:40px 0}
#go_login { border-top: 1px solid #000;text-align: center;font-size: 1.2rem; padding:40px 0 200px;}
#complete_msg2 { text-align: center;border-bottom:  1px solid #000;margin-bottom: 100px;padding-bottom: 65px;}
#complete_msg2 h1 {margin-bottom: 50px;font-size: 1.8rem;font-weight: 500;letter-spacing: 0.15em;}
#complete_msg2 p { margin-bottom: 35px;font-size: 1.8rem;line-height: 2;}
#complete_msg3 { line-height: 2;padding-bottom: 70px;}
#complete_msg3 p { font-size: 1.5rem; font-weight: 500;margin:0 auto 40px; background: url("../img/icon_check.svg")no-repeat 0 5px;padding-left: 30px;background-size: 20px auto; width: 300px;}
#complete_msg3 ul { font-size: 1.4rem;letter-spacing: 0;}

@media screen and (max-width: 599px) {
    #agree { text-align: center;font-size: 1.2rem; padding:40px 0}
    #go_login { border-top: 1px solid #000;text-align: center;font-size: 1.2rem; padding:40px 0 200px;}
    #complete_msg2 { padding-bottom: 30px; margin: 0 15px;width: calc(100% - 30px);margin-bottom: 60px;}
    #complete_msg2 h1 {margin-bottom: 30px;font-size: 1.2rem;}
    #complete_msg2 p { margin-bottom: 20px;font-size: 1.2rem;}
    #complete_msg2 p img { width: 30px;}

    #complete_msg3 { line-height: 2;padding-bottom: 40px;line-height: 1.8;}
    #complete_msg3 p { font-size: 1.2rem;margin:0 auto 20px; width: 250px; background-size: 12px auto;padding-left: 20px;}
    #complete_msg3 ul { font-size: 1rem;}
}

#form_navi ul { display: flex;justify-content: space-between;position: relative; z-index: 2; margin-bottom: 100px; }
#form_navi ul::before { content: ""; z-index: -1;width: 430px;height: 1px; background: #000;position: absolute;left: 20px;top: 25px;}
#form_navi ul li { text-align: center;font-size: 1.4rem;font-weight: 500;}
#form_navi ul li span { display: block;margin: 0 auto 15px;background: #A8A4A4;color: #fff; width: 50px;line-height: 50px;border-radius: 50%; text-align: center;font-size: 2.4rem;font-weight: 500;font-family: 'Hind', sans-serif;}
#form_navi ul li.now span { background: #000;}
@media screen and (max-width: 599px) {
    #form_navi ul { width: 250px;margin: 0 auto 40px;}
    #form_navi ul::before { width: 220px;top: 16px;}
    #form_navi ul li { font-size: 1rem;}
    #form_navi ul li span { width: 32px;line-height: 32px;font-size: 1.5rem;}

}

.required::after { content: "必需的"; color: #C84132;padding-left: 10px;font-size: 1.3rem;}
.any::after { content: "（任何）"; color: #C84132;padding-left: 5px;font-size: 1.3rem;}

.n_column,.column3,.column2,.tel { display: flex; justify-content: space-between;}
.n_column > dd { display: block; padding-bottom: 0;}
.n_column.column2 > dd,.column2 > li { width: 48%; }
.column3 li { width: 31%; }
.tel li:first-child { width: 70px;}
.tel li:last-child { width: calc(100% - 70px);}
.tel li p {font-size: 1.4rem; border:1px solid #000;border-right: none; font-weight: 300; padding:19px 15px; box-sizing: border-box;width: 70px;height: 62px;}

#confirm_msg { text-align: center; margin-bottom: 80px;}
#confirm_msg p { font-size: 1.6rem;font-weight: 500; line-height: 2;}

@media screen and (max-width: 599px) {
    .tel li:first-child { width: 50px;}
    .tel li:last-child { width: calc(100% - 50px);}
    .tel li p {font-size: 1.2rem;height: 49px; padding:14px 10px; }
    #confirm_msg { margin-bottom: 50px;}
    #confirm_msg p { font-size: 1.2rem;}
}

.bottom_line { border-bottom: 1px solid #000;}

/*プレミアム会員登録*/
.Premium_form #form_ttl h1 { color: #827831;}

#premium_fee {}
#premium_fee div { display: table; border-collapse: separate;border-spacing: 10px;}
#premium_fee dl { display: table-row;}
#premium_fee dl dt,
#premium_fee dl dd { display: table-cell;border: 1px solid #827831; box-sizing: border-box; height: 64px;text-align: center;vertical-align: middle; }
#premium_fee dl dt { font-size: 1.8rem; font-weight: 500;width: 110px; }
#premium_fee dl dd { font-size: 1.6rem;font-weight: 500; display: flex;align-items: center;justify-content: center;flex-wrap: wrap;line-height: 1.3; }
#premium_fee dl dd em { font-size: 2rem;}
#premium_fee dl dd span { font-size: 1.1rem; line-height: 1;}

.Premium_form #form_navi ul::before { background: #B4B47B;}
.Premium_form #form_navi ul li span { background: #B4B47B;}
.Premium_form #form_navi ul li.now span { background: #827831;}

@media screen and (max-width: 599px) {
    #premium_fee div { border-spacing: 5px;}
    #premium_fee dl dt,
    #premium_fee dl dd { height: 50px; }
    #premium_fee dl dt { font-size: 1.3rem;width: 70px; }
    #premium_fee dl dd { font-size: 1.2rem; }
    #premium_fee dl dd em { font-size: 1.6rem;}
    #premium_fee dl dd span { font-size: 1rem;}
}


/* 20240305追記 */
#upgrade { padding-bottom: 200px;}
#upgrade h2 { text-align: center;font-size: 2rem;letter-spacing: 0.1em;margin-bottom: 30px;}
.btn_more a.btn_gold { background: #B4B47B;border: 1px solid #B4B47B; color: #333;font-weight: bold; border-radius: 3px;}
.btn_more a.btn_gold:hover { color: #fff;}
.premium_detail { text-align: center;padding-top: 35px;font-size: 1.4rem;font-weight: bold;}
@media screen and (max-width: 599px) {
    #upgrade { padding-bottom: 120px;}
    #upgrade h2 { font-size: 1.4rem; margin-bottom: 20px;}
    .premium_detail { font-size: 1.2rem; padding-top: 25px; }
}