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

.form { padding: 2rem 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; }

/* register promo hero — reuses the top page's red box (styled in index.css),
   compacted so the form stays close to the top. The "今すぐ会員登録いただくと、"
   tag is moved in-flow above the headline (overriding the original absolute
   placement) so it never clips or overlaps the text at any width. */
.register_redbox { margin-bottom: 2.5rem; }
.register_redbox .red_box { padding: 2.5rem 0; overflow: hidden; }   /* extra bottom room so sub-copy clears the triangle pointer */
.register_redbox .red_box_wrap { width: 92%; max-width: 640px; align-items: center; }
.register_redbox .red_box .col_l { width: 65%; padding-top: 0; }
.register_redbox .red_box .col_l .ttl { font-size: clamp(1rem, 2.5vw, 1.5rem); line-height: 1.45; }
.register_redbox .red_box .col_l .txt { font-size: clamp(0.85rem, 0.75vw, 1.125rem); padding-top: .75rem; }
.register_redbox .red_box figure { width: 32%; }
.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="email"],
.form .tr .td input[type="tel"],
.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="email"],
.form .tr .td input[type="tel"],
.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 2rem; }
.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); }

.thanks .staff { border: 1px solid #ccc; max-width: 640px; margin: 0 auto 2rem; }

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

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

    main { padding-top: 57px; }

    .form { padding-top: 1.5rem; }
    .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="email"],
    .form .tr .td input[type="tel"],
    .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; }

    /* compact the red-box hero on mobile so personal-info inputs stay reachable
       without scrolling far. To save height, hide only the headline's first line
       (パスワード付き専用ページから) and show the laptop figure instead. */
    .register_redbox { margin-bottom: 1.5rem; }
    .register_redbox .red_box { padding: 1.5rem 0; }
    .register_redbox .red_box_wrap { width: 90%; }
    .register_redbox .red_box .col_l { width: 100%; padding-top: 0; }
    .register_redbox .red_box .col_l .ttl { font-size: clamp(1.125rem, 5.4vw, 1.75rem); line-height: 1.5; }
    .register_redbox .red_box .col_l .ttl .ttl_line1 { display: none; }
    .register_redbox .red_box .col_l .txt { font-size: clamp(.8125rem, 3.4vw, 1rem); }
    .register_redbox .red_box figure { display: block; width: 48%; max-width: 360px; margin: 1rem auto 0; }
    .register_redbox .red_box .decor2 { display: none; }

    .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;  }
}