/* -------------------------------------------- form */

.form { padding: 6rem 0 6rem; }
.form h2 { font-weight: 600; font-size: 2.75rem; }
.form .note { padding: 0 0 3rem; font-size: 1.75rem;  font-weight: 600; }
.form .note span { display: inline-block; } 
.form .tr.join { padding: 20px 0; }
.form .tr .th,
.form .tr .td { box-sizing: border-box; min-height: 1px; }
.form .tr .field { padding: 15px 0; }
.form .tr .field label { display: inline-block; min-width: 260px; }
.form .tr .th { width: 200px; }
.form .tr .th small { display: block; font-size: 0.75rem; }
.form .tr .th p { padding: 30px 0 0; }
.form .tr .td { width: calc(100% - 200px); }
.form .tr .td input { font-size: 1rem; }
.form .tr .td input[type="text"],
.form .tr .td input[type="password"],
.form .tr .td select,
.form .tr .td textarea { padding: 0 20px; height: 60px; line-height: 60px; font-size: 1rem; box-sizing: border-box; border: 2px solid #5E5C5D; font-size: 1.25rem; }
.form .tr .td input[type="password"],
.form .tr .td input[type="text"] { width: 100%; }
.form .tr .td input.short { width: 30%; }
.form .tr .td input.med { width: 60%; }
.form .tr .td textarea { width: 100%; resize: vertical; line-height: 180%; padding: 8px 20px; height: auto; width: 100%; }
.form .tr .td select { background-color: #fff; min-width: 100px; box-sizing: border-box; appearance: none; line-height: 100%; }
.form .tr .td .select_wrap { display: inline-block; }
.form .tr .td .select_wrap select { padding-right: 5rem; }
.form .tr .td .select_wrap.disabled { pointer-events: none; }
.form .tr .td .select_wrap.disabled select { border: 2px solid #c0c0c0; color: #c0c0c0; }
.form .tr .td .select_wrap.disabled::after { opacity: 0.6; }
.form .tr .td .select_wrap::after { width: 48px; height: 48px; right: 6px; top: 0; bottom: 0; pointer-events: none; margin: auto; background: url(../img/common/arw-box.png) no-repeat center center; background-size: 100% auto; }
.form .alert { font-size: 14px; color: #ec0404; }
.form .tr .td .options label { min-width: 260px; }
.form .req { margin-left: 10px; height: 20px; line-height: 20px; padding: 0 5px; display: inline-block; font-size: 12px; background-color: #CA0001; color: #fff; }
.form .tr .col span { display: inline-block; padding-left: 5px; }
.form .tr .col span:first-child { padding-right: 10px; padding-left: 0; }
.form .tr .col2 .col { width: 49%; }
.form .tr .col2 .col input { width: calc(100% - 120px); }
.form .tr .postal { width: 46%; }
.form .tr .postal::before { height: 20px; line-height: 20px; position: absolute; content: '〒'; left: 20px; top: 0; bottom: 0; z-index: 1; }
.form .tr .postal input { padding-left: 40px !important; } 
.form .find_address { padding: 0 20px; height: 30px; line-height: 30px; font-size: 14px; border-radius: 6px; background-color: #000; color: #fff; display: block; margin-left: 20px; }
.form .tr .td label { display: block; cursor: pointer; margin: 5px 0; }
.form .policy { font-size: 14px; padding: 2rem 0 0; }
.form .policy a { color: #1933A5; text-decoration: underline; display: inline-block; }
.form .policy span { display: inline-block; }
.form .error_msg { color: #ec0404; font-size: 14px; }
.form .btn_wrap { padding: 3rem 0 0; }
.form .btn_wrap .btn { font-weight: 600; padding: 0 4rem; font-size: 1.25rem; min-width: 200px; border-radius: 50px; height: 90px; line-height: 90px; margin: 0 5px; cursor: pointer; }

.form .tel { padding-top: 4rem; }
.form .confirm { max-width: 640px; margin: auto; }
.form .confirm .wrap { padding: 2rem 1rem; background-color: #f6f6f6; }
.form .confirm .tr .th,
.form .confirm .tr .td  { padding: 15px 20px; }
.form .confirm .tr .th p { padding: 0; }
.form .confirm .btn_wrap .btn { padding: 0 3rem; margin: 0.5rem; height: 80px; line-height: 80px; }

.form .col-2 .col { width: 50%; box-sizing: border-box; }

.login .form .tr .th { width: 200px; }
.login .form .tr .td { width: calc(100% - 200px); }

.form .links { padding: 2rem 0 0; }
.form .links p { padding: 0 0 0.5rem; }
.form .links p a { color: #CE2E19; text-decoration: underline; }

.mypage { padding: 4rem 0; }
.mypage .form .wrap { padding: 2rem 3rem; }
.mypage .form .tr .th { width: 180px; }
.mypage .form .tr .td { width: calc(100% - 180px); font-size: 1.25rem; }
.mypage .form .tr .th p { padding: 0; }
.mypage .form .tr { border-top: 1px solid #DCDCDC; padding: 1rem 0; }
.mypage .form .tr:first-child { border: none; }

.form .caution { padding: 0 0 2rem; }
.form .caution p { padding: 1rem 2rem; font-size: 14px; line-height: 180%; }
.form .caution p span { display: inline-block; }

/* -------------------------------------------- thanks */

.thanks { padding: 3rem 0 6rem; }
.thanks .txt_thanks { max-width: 640px; }
.thanks h3 { font-size: 2rem; padding: 1rem 0 3rem; font-weight: 600; }
.thanks .txt { padding: 0 0 4rem; }
.thanks .btn { border-radius: 8px; }

.thanks .thanks_txt img { max-width: 815px; }
.thanks .youtube_container { max-width: 714px; margin: 2rem auto 0; }
.thanks .tel a { font-size: clamp(2rem, 9.75vw, 4.75rem); }

/* -------------------------------------------- sp */

@media screen and (max-width: 767px) {

    main { padding-top: 102px; }

    .form { padding-top: 3rem; }
    .form .tr { display: block; padding: 10px 0 0; }
    .form .tr .th,
    .form .tr .td { width: 100%; font-size: 1rem; }
    .form .tr .field { padding: 8px 0 15px; }
    .form .tr .th p { font-size: 14px; }
    .form .tr .td input[type="text"],
    .form .tr .td input[type="password"],
    .form .tr .td select { height: 45px; line-height: 45px; padding: 0 15px; }
    .form .tr .td textarea { padding: 8px 12px; height: 150px; }
    .form .tr.join { padding: 10px 0 0; }
    .form .tr .td .options label { min-width: 290px; }

    .form .tr .th p { padding: 0; }
    
    .form .tr .col2 { display: block; }
    .form .tr .col2 .col { width: 100%; text-align: left; padding: 0 0 15px; }
    .form .tr .col2 .col input { width: calc(80% - 130px); }
    .form .tr .col span { min-width: 60px; box-sizing: border-box; }

    .form .tr .postal { width: 100%; }
    .form .tr .postal::before { left: 12px; }
    .form .find_address { margin: 15px 0 0; font-size: 12px; }

    .form .tr .td label { font-size: 14px; padding-right: 10px; }
    .form .privacy { padding: 0 0 20px; }

    .form h2 { font-size: 2rem; }
    .form .note { font-size: 1.25rem; padding-bottom: 2rem; }

    .form .confirm { padding: 30px 0; }
    .form .confirm .tr { padding: 15px 0; }
    .form .confirm .tr .th,
    .form .confirm .tr .td { padding: 0 3%; }
    .form .confirm .tr .td { font-weight: 600; }
    .form .confirm .tr .field { padding: 0; }

    .form .policy { padding: 2rem 0; }

    .form .btn_wrap { padding: 2rem 0 0; }
    .form .btn_wrap .btn { height: 60px; line-height: 60px; min-width: 150px; }

    .login .form .tr .td { width: 100%; }

    .form .caution p { text-align: center; padding: 1.5rem 6%; font-size: 12px; }

    .thanks h3 { font-size: 1.5rem; }
    .thanks .btn { height: 50px; line-height: 50px; }

    .mypage { padding: 0; }
    .mypage .form .tr .td { width: 100%; }
    .mypage .form .wrap { padding: 1rem 6%; }

    .form .tr .td .select_wrap::after { width: 34px; height: 35px;  }
}