@charset "UTF-8";

#wrapper {
  background: var(--color-bg);
  letter-spacing: 0;
}

/* =====================
  icon
===================== */

#page_register .fv_ttl::before {
  background-image: url(../img/mypage/icon_register.svg);
}

#page_profile .fv_ttl::before {
  background-image: url(../img/mypage/icon_profile.svg);
}

#page_questionnaire .fv_ttl::before {
  background-image: url(../img/mypage/icon_questionnaire.svg);
}

#page_documents .fv_ttl::before {
  background-image: url(../img/mypage/icon_documents.svg);
}

#page_insurance .fv_ttl::before {
  background-image: url(../img/mypage/icon_insurance.svg);
}

#page_reservation .fv_ttl::before {
  background-image: url(../img/mypage/icon_reservation.svg);
}

#page_reservation_change .fv_ttl::before {
  background-image: url(../img/mypage/icon_reservation.svg);
}

#page_info .fv_ttl::before {
  background-image: url(../img/mypage/icon_info.svg);
}

#page_prepaid .fv_ttl::before {
  background-image: url(../img/mypage/icon_prepaid.svg);
}

#page_myresume .fv_ttl::before {
  background-image: url(../img/mypage/icon_myresume.svg);
}

#page_job .fv_ttl::before {
  background-image: url(../img/mypage/icon_job.svg);
}

#page_withdrawal .fv_ttl::before {
  background-image: url(../img/mypage/icon_withdrawal.svg);
}

/*-------------------------------------------*/
/*	PC
/*-------------------------------------------*/

@media screen and (min-width:900px) {

  #wrapper {
    padding-top: 65px;
  }

  .inner {
    width: 600px;
    max-width: 90%;
  }  

  /* =====================
    header
  ===================== */
  
  #header {
    width: 100%;
    height: 65px;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    box-shadow: var(--box-shadow);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
  }
  
  .h_logo {
    width: 150px;
  }
  
  .h_home a,
  .h_menu {
    width: 65px;
    height: 65px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 700;
  }
  
  .h_home a {
    padding-top: 2px;
    color: var(--color-gray);
  }
  
  .h_home img {
    width: 22px;
  }
  
  .h_text {
    font-size: 10px;
    margin-top: 2px;
  }
  
  .h_menu {
    cursor: pointer;
    padding-top: 5px;
    background: var(--color-main);
    color: #fff;
    position: relative;
    z-index: 1000;
  }
  
  .h_menu_trigger {
    width: 18px;
    height: 13px;
    display: block;
    position: relative;
  }
  
  .h_menu_trigger span {
    width: 100%;
    height: 1.5px;
    border-radius: 2px;
    display: block;
    background: #fff;
    position: absolute;
    transition: .3s;
    left: 0;
  }
  
  .h_menu_trigger span:nth-child(1) {
    top: 0;
  }
  
  .h_menu_trigger span:nth-child(2) {
    top: 50%;
    margin-top: -1px;
  }
  
  .h_menu_trigger span:nth-child(3) {
    bottom: 0;
  }

  .open-menu .h_menu_trigger span:nth-of-type(1) {
    transform: translateY(6px) rotate(-45deg);
  }
  
  .open-menu .h_menu_trigger span:nth-of-type(2) {
    opacity: 0;
  }
  
  .open-menu .h_menu_trigger span:nth-of-type(3){
    transform: translateY(-5.5px) rotate(45deg);
  }

  /* =====================
    g_nav
  ===================== */
  
  #g_nav {
    width: 88vw;
    max-width: 700px;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
    background: #fff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    padding: 65px 0 35px;
    display: flex;
    flex-direction: column;
  }

  body.open-menu #g_nav {
    transform: translateX(0);
  }

  #nav_overlay {
    background: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    position: fixed;
    inset: 0;
    z-index: 997;
  }

  body.open-menu #nav_overlay {
    opacity: 0.4;
    pointer-events: auto;
  }

  body.open-menu {
    position: fixed;
    left: 0;
    right: 0;
    overflow: hidden; 
  }

  #g_nav .btns {
    margin-bottom: 25px;
  }

  #g_nav .logo {
    width: 160px;
    margin: auto auto 0;
  }

  /*  g_nav_main
  ------------------------*/
  
  .g_nav_main {
    border-top: 1px solid rgba(219, 219, 219, 0.8);
  }

  .g_nav_main li {
    font-size: 16px;
    letter-spacing: 0.02em;
    font-weight: 700;
    line-height: 1.5;
    border-bottom: 1px solid rgba(219, 219, 219, 0.8);
  }

  .g_nav_main li a {
    display: block;
    padding: 18px 50px 18px 58px;
    position: relative;
  }

  .g_nav_main li a::after {
    content: '';
    width: 6px;
    height: 10px;
    display: block;
    background: url(../img/mypage/icon_arrow_gray.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);    
  }

  .g_nav_main li a::before {
    content: '';
    width: 18px;
    height: 18px;
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);    
  }

  .g_nav_main li.menu_search a::before {
    background-image: url(../img/common/menu_search.svg);
  }

  .g_nav_main li.menu_beginner a::before {
    background-image: url(../img/common/menu_beginner.svg);
  }

  .g_nav_main li.menu_tanki a::before {
    background-image: url(../img/common/menu_tanki.svg);
  }

  .g_nav_main li.menu_history a::before {
    background-image: url(../img/common/menu_history.svg);
  }

  .g_nav_main li.menu_favo a::before {
    background-image: url(../img/common/menu_favo.svg);
  }

  /*  g_nav_sub_area
  ------------------------*/
  
  .g_nav_sub_area {
    background: var(--color-bg);
    padding: 25px 20px;
    margin-bottom: 25px;
  }

  .g_nav_sub li {
    font-size: 14px;
    letter-spacing: 0.05em;
    line-height: 1.4;
    margin-bottom: 18px;
  }

  .g_nav_sub li:last-child {
    margin-bottom: 0;
  }

  .btn_support {
    width: 230px;
    height: 63px;
    border: 1px solid var(--color-main);
    border-radius: 100px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin: 25px auto 0;
    line-height: 1.3;
  }

  .btn_support a {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--color-main);
  }

  .btn_support a span {
    display: block;
    font-size: 11px;
    letter-spacing: 0.02em;
    font-weight: 400;
  }
  
  /* =====================
    btn
  ===================== */
  
  .btn {
    width: 200px;
    max-width: 360px;
    margin: 0 auto;
    border-radius: 100px;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.02em;
    background: var(--color-main);
  }

  .btn.w100 {
    width: 100%;
  }
  
  .btn a,
  .btn.nolink {
    display: block;
    padding: 15px 25px;
    color: #fff;
    position: relative;
  }
  
  .btn a::before {
    content: '';
    width: 6px;
    height: 10px;
    display: block;
    background: url(../img/mypage/icon_arrow.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
  }
  
  /*  btn_mini
  ------------------------*/
  
  .btn_mini {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
  }
  
  .btn_mini a,
  .btn_mini.nolink span {
    display: inline-block;
    min-width: 160px;
    padding: 10px 30px;
    color: var(--color-main);
    border-radius: 50px;
    border: 1px solid var(--color-main);
    cursor: pointer;
  }  
    
  /*  btn_back
  ------------------------*/
  
  .btn.btn_back {
    background: #fff;
    border: 2px solid #EAEAEA;
    color: var(--color-black);
  }

  .btn.btn_back a {
    color: var(--color-black);
  }

  /*  submit_btn
  ------------------------*/

  .submit_btn {
    margin-top: 30px;
  }

  .submit_btn .form .btn {
    margin: 0 auto 10px;
  }

  .submit_btn .form .btn:last-child {
    margin-bottom: 0;
  }

  .submit_btn .form .btn_submit_comp,
  .btn_submit  {
    background: var(--color-red);
  }  
  
  .submit_btn .form .btn_text {
    font-size: 13px;
    line-height: 1.6;
    margin-top: 10px;
    text-align: center;
  }

  /* =====================
    box
  ===================== */
  
  .box {
    background: #fff;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    padding: 40px;
  }
    
  /* =====================
    f_search
  ===================== */

  #f_search {
    background: var(--color-sub);
    padding: 20px 0 30px;
  }
  
  #f_search .inner {
    width: 1060px;
  }

  .f_search_item {
    border-bottom: 1px solid #DBDBDB;
  }

  .f_search_ttl {
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: 0.05em;
  }

  .f_search_ttl label {
    display: block;
    padding: 15px 30px 15px 0;
    position: relative;
    transition: 0.3s;
    cursor: pointer;
  }

  .f_search_ttl label::before {
    content: '';
    width: 15px;
    height: 15px;
    display: block;
    background: url(../img/common/icon_acc.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
  }

  .f_search_item .accshow {
    padding-left: 0;
    padding-right: 0;
  }

  .cssacc:checked + .f_search_ttl + .accshow {
    height: auto;
    opacity: 1;
    padding-top: 5px;
    padding-bottom: 25px;
  }

  .cssacc:checked + .f_search_ttl label {
    padding-top: 25px;
    font-weight: 700;
  }

  .cssacc:checked + .f_search_ttl label::before {
    background: url(../img/common/icon_acc_show.svg) no-repeat center;
    background-size: contain;
  }

  .f_search_item ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 0;
  }

  .f_search_item ul::before,
  .f_search_item ul::after  {
    content: '';
    width: calc( ( 100% - 8px ) / 4 );
  }

  .f_search_item ul::before {
    order: 1;
  }

  .f_search_item ul li {
    width: calc( ( 100% - 8px ) / 4 );
    background: #fff;
    border: 2px solid #EAEAEA;
    border-radius: 5px;
    font-size : 13px;
    letter-spacing: 0.05em;
    min-height: 40px;
    line-height: 1.4;
  }

  .f_search_item ul li a {
    display: block;
    height: 100%;
    padding: 8px 18px 8px 12px;
    position: relative;
  }

  .f_search_item ul li a::before {
    content: '';
    width: 6px;
    height: 10px;
    display: block;
    background: url(../img/mypage/icon_arrow_gray.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
  }
  
  /* =====================
    footer
  ===================== */
  
  #footer {
    background: var(--color-main);
    padding: 20px 0 30px;
  }

  #footer .inner {
    width: 1060px;
  }

  #footer .btn_support {
    border-color: #fff;
  }

  #footer .btn_support a {
    color: #fff;
  }

  #footer .link_logout a {
    color: #fff;
  }

  #footer .logo {
    width: 160px;
    margin: 60px auto 15px;
  }
  
  address {
    font-weight: 400;
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.05em;
    text-align: center;
    color: #fff;
  }
  
  /*  f_nav_main
  ------------------------*/

  .f_nav_main li {
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .f_nav_main li a {
    color: #fff;
    display: block;
    padding: 12px 30px 12px 0;
    position: relative;
  }

  .f_nav_main li a::before {
    content: '';
    width: 6px;
    height: 10px;
    display: block;
    background: url(../img/mypage/icon_arrow.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 2px;
    transform: translateY(-50%);    
    opacity: .7;
  }  

  /*  f_nav_sub
  ------------------------*/
  
  .f_nav_sub {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px 0;
    padding: 30px 0;
  }

  .f_nav_sub li {
    width: 49%;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 0.05em;
    position: relative;
    padding-left: 13px;
  }

  .f_nav_sub li::before {
    content: '';
    width: 8px;
    height: 1px;
    display: block;
    background: #fff;
    opacity: .7;
    position: absolute;
    top: 8px;
    left: 0;
  }

  .f_nav_sub li a {
    color: #fff;
  }

  /*  sns_list
  ------------------------*/
  
  .sns_list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 20px;
    margin-top: 30px;
  }  

  .sns_list li {
    width: 35px;
  }
  
  /* =====================
    mypage
  ===================== */
  
  /*  news
  ------------------------*/
  
  #news {
    background: var(--gradient-main);
    padding: 30px 0 45px;
    position: relative;
  }
  
  #news::before {
    content: '';
    width: calc( 100% + 20px );
    height: 45px;
    border-radius: 30px 30px 0 0;
    background: var(--color-bg);
    position: absolute;
    bottom: -25px;
    left: 0;
    transform: translateX(-10px);
  }
  
  .news_swiper {
    overflow: visible;
  }
  
  .news_item {
    background: #fff;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    line-height: 1.4;
    height: auto;
  }
  
  .news_item a {
    display: block;
    height: 100%;
    padding: 15px 35px 20px 25px;
    position: relative;
  }
  
  .news_item a::before {
    content: '';
    width: 6px;
    height: 10px;
    display: block;
    background: url(../img/mypage/icon_arrow_g.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
  }
  
  .news_cat {
    color: var(--color-red);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.05em;
    position: relative;
    padding-left: 17px;
    margin-bottom: 5px;
  }
  
  .news_cat::before {
    content: '';
    width: 13px;
    height: 13px;
    display: block;
    background: url(../img/mypage/icon_news.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 1px;
    left: 0;
  }
  
  .news_text {
    font-size: 14px;
  }
  
  .news_swiper .swiper-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 8px;
    margin-top: 15px;
  }
  
  .news_swiper .swiper-pagination-bullet {
    background: #fff;
    width: 8px;
    height: 8px;
    display: block;
    border-radius: 50%;
  }
  
  .news_swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #EDFF60;
  }

  /*  step
  ------------------------*/
    
  #step {
    padding-top: 0;
    position: relative;
  }
  
  .step_bar[date-step="step1"] figure:not(.step1),
  .step_bar[date-step="step2"] figure:not(.step2),
  .step_bar[date-step="step3"] figure:not(.step3),
  .step_bar[date-step="step4"] figure:not(.step4) {
      display: none;
  }

  .step_bar figure {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }
  
  #step .btn {
    margin-top: 20px;
  }
 
  /*  menu
  ------------------------*/
    
  .menu_conts {
    margin-bottom: 45px;
  }
  
  .menu_conts:last-of-type {
    margin-bottom: 0;
  }
  
  .menu_ttl {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    margin-bottom: 15px;
  }
  
  .menu_list {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 15px;
  }
  
  .menu_list li {
    width: calc( ( 100% - 45px ) / 4 );
    height: 0;
    padding-bottom: calc( ( 100% - 45px ) / 4 );
    background: #fff;
    box-shadow: var(--box-shadow);
    border-radius: 10px;
    position: relative;
  }
  
  .menu_list::before,
  .menu_list::after {
    content: '';
    width: calc( ( 100% - 45px ) / 4 );
  }

  .menu_list::before {
    order: 1;
  }
  
  .menu_list li a {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .menu_list li.notice a::before {
    content: '';
    width: 10px;
    height: 10px;
    display: block;
    border-radius: 50%;
    background: var(--color-red);
    position: absolute;
    top: 20px;
    right: 20px;
  }
  
  .menu_list li img {
    width: 50px;
    margin: 0 auto;
  }
  
  .menu_list li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    font-size: 13px;
    color: var(--color-gray);
    font-weight: 600;
    line-height: 1.2;
    margin-top: 7px;
    text-align: center;
  }
  
  .menu_text {
    font-size: 14px;
    line-height: 1.6;
  }
  
  /*  menu_sub
  ------------------------*/

  .menu_sub_list {
    background: #fff;
  }
  
  .menu_sub_list li {
    font-size: 14px;
    border-bottom: 1px solid rgba(219, 219, 219, 0.5);
  }

  .menu_sub_list li:last-child {
    margin-bottom: 0;
    border: none;
  }

  .menu_sub_list li a {
    display: block;
    padding: 15px 30px 15px 15px;
    position: relative;
  }

  .menu_sub_list li a::before {
    content: '';
    width: 23px;
    height: 23px;
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    top: 17px;
    left: 15px;
  }

  .menu_sub_list li.icon_pdf a {
    padding-left: 45px;
  }

  .menu_sub_list li.icon_pdf a::before {
    background-image: url(../img/mypage/icon_pdf.svg);
  }

  .menu_sub_list li a::after {
    content: '';
    width: 6px;
    height: 10px;
    display: block;
    background: url(../img/mypage/icon_arrow_gray.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);    
  }

  /*  bnr
  ------------------------*/

  .bnr_list {
    max-width: 360px;
    margin: 0 auto;
  }
  
  .bnr_list li {
    margin-bottom: 10px;
  }
  
  .bnr_list li:last-child {
    margin-bottom: 0;
  }
  
  /*  navi
  ------------------------*/
  
  .navi_item {
    height: auto;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--box-shadow);
  }
  
  .navi_item a {
    display: flex;
    height: 100%;
    flex-direction: column;
  }
  
  .navi_img {
    width: 100%;
    height: 0;
    padding-bottom: 52.5%;
    position: relative;
  }
  
  .navi_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .navi_text {
    height: 100%;
    display: flex;
    flex-direction: column;
    line-height: 1.5;
    padding: 20px;
  }
  
  .navi_ttl {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 10px;
  }
  
  .navi_date {
    font-family: proxima-nova, sans-serif;
    font-weight: 400;
    font-size: 12px;
    text-align: right;
    color: #CECECE;
    margin-top: auto;
  }
  
  /*  questionnaire
  ------------------------*/
  
  #questionnaire .box .text {
    font-size: 14px;
    line-height: 1.6;
  }
  
  #questionnaire .box .btn_mini {
    margin-top: 10px;
  }
 
  body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }
  
  .modal_bg {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
  }
  
  .modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000; 
    pointer-events: auto;
  }
  
  .modal-content {
    width: 500px;
    margin: 0 auto;
    position: relative;
  }
  
  .modal-content .close {
    display: block;
    width: 25px;
    height: 25px;
    position: absolute;
    top: -35px;
    right: 0;
    cursor: pointer;
  }
  
  .modal-content .close span {
    display: block;
    background-color: #FFFFFF;
    width: 25px;
    height: 2px;
    position: absolute;
    left: 0;
    margin-top: -1px;
  }
  
  .modal-content .close span:first-child {
    top: 50%;
    transform: rotate(45deg);
  }
  
  .modal-content .close span:nth-child(2) {
    top: 50%;
    transform: rotate(-45deg);
  }
  
  .modal_questionnaire {
    padding: 50px;
  }
  
  .modal_ttl {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    margin-bottom: 15px;
    text-align: center;
  }
 
  .modal_sub {
    color: var(--color-main);
    font-size: 15px;
    font-weight: 600;
    margin: 20px 0 5px;
  }

  .modal_text {
    font-size: 14px;
    max-height: 50vh;
    overflow-y: auto;
  }

  .modal_text p:not(:last-of-type) {
    margin-bottom: 18px;
  }
  
  .modal_btns {
    margin-top: 20px;
  }
  
  .modal_btns .btn:not(:last-of-type) {
    margin-bottom: 8px;
  }
  
  /*  link_logout
  ------------------------*/
  
  .link_logout {
    font-size: 14px;
    text-align: center;
    margin-top: 20px;
  }
  
  .link_logout a {
    display: inline-block;
    text-decoration: underline;
    color: #909090;
  }

  /* =====================
    fv
  ===================== */

  #fv {
    padding: 30px 0 20px;
  }

  .fv_ttl {
    font-size: 18px;
    font-weight: 600;
    padding-left: 30px;
    position: relative;
  }

  .fv_ttl::before {
    content: '';
    width: 28px;
    height: 28px;
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    top: 0;
    left: -5px;
  }

  .fv_text {
    font-size: 13px;
    line-height: 1.6;
    margin-top: 10px;
  }

  .fv_text p > a:not([href^="tel:"]) {
    text-decoration: underline;
  }

  .fv_text strong,
  .fv_text strong a {
    color: var(--color-red);
    font-weight: 400;
  }  
        
  /* =====================
    form
  ===================== */
  
  .form input[type="text"],
  .form input[type="email"],
  .form input[type="password"],
  .form select,
  .form textarea {
    width: 100%;
    padding: 12px;
    background: #fff;
    border: 2px solid #EAEAEA;
    border-radius: 5px;
    font-size : 16px;
    min-height: 45px;
    line-height: 1.4;
    padding: 8px 14px;
  }

  textarea {
    resize: vertical;
    line-height: 1.4;
  }

  .radio input,
  .check input {
    display: none;
  }

  .radio label,
  .check label,
  select,
  button {
    cursor: pointer;
    color: var(--color-black);
  }

  :-moz-placeholder {
    color: #CECECE;
    opacity: 1;
  }

  ::-moz-placeholder {
    color: #CECECE;
    opacity: 1;
  }

  :-ms-input-placeholder {
    color: #CECECE;
  }

  ::-ms-input-placeholder {
    color: #CECECE;
  }

  ::-webkit-input-placeholder {
    color: #CECECE;
  }

  ::placeholder {
    color: #CECECE;
  }

  .form .input textarea {
    resize: vertical;
  }

  .form .select {
    position: relative;
  }

  .form .select::before {
    content: '';
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-top: 6px solid #909090;
    border-bottom: 0;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
  }

  .form .select:has(.error_text)::before {
    top: calc(50% + 16px);
  }

  .form .select select {
    padding-right: 22px;
  }

  .form .input_file {
    display: none;
  }  

  .input_file_area {
    margin-bottom: 10px;
    position: relative;
  }

  .input_file_area:last-of-type {
    margin-bottom: 0;
  }

  .input_file_area .thumbnail {
    display: none;
    margin: 5px auto 20px;
  }

  .input_file_area:last-of-type .thumbnail {
    margin-bottom: 5px;
    cursor: pointer;
  }
  
  .input_file_area .btn.btn_file {
    margin-top: 5px;
    padding: 12px 10px;
    cursor: pointer;
  }

  .input_file_area .btn.btn_file span {
    display: inline-block;
    position: relative;
    padding-left: 25px;
  }

  .input_file_area .btn.btn_file span::before {
    content: '';
    width: 18px;
    height: 18px;
    display: block;
    background: url(../img/mypage/icon_file.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }

  .input_file_area .btn.btn_file.has-file {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: block;
    background: #fff url(../img/mypage/icon_edit.svg) no-repeat center;
    background-size: 15px;
    position: absolute;
    top: -15px;
    right: -10px;
    cursor: pointer;
    box-shadow: var(--box-shadow);
  }

  .input_file_area .btn.btn_file.has-file span {
    display: none;
  }
  
  .input.eye_toggle {
    position: relative;
  }

  .input.eye_toggle input {
    padding-right: 35px;
  }

  .input.eye_toggle .icon_eye {
    width: 20px;
    height: 20px;
    display: block;
    cursor: pointer;
    background: url(../img/mypage/icon_eye.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
  }

  .input.eye_toggle:has(.error_text) .icon_eye {
    top: calc(50% + 12px);
  }

  .input.eye_toggle .icon_eye.off {
    background: url(../img/mypage/icon_eye_off.svg) no-repeat center;
    background-size: contain;
  }

  /* =====================
    form_cnts
  ===================== */
    
  .form_cnts {
    padding: 15px 0 40px;
    background: #fff;
    position: relative;
    z-index: 0;
  }

  .form_cnts::before {
    content: '';
    width: calc(100% + 20px);
    height: 45px;
    border-radius: 30px 30px 0 0;
    background: #fff;
    position: absolute;
    top: -15px;
    left: 0;
    transform: translateX(-10px);
    z-index: -1;
  }

  .form_cnts:last-of-type {
    margin-bottom: 0;
  }

  .form_cnts_ttl {
    font-size: 18px;
    color: var(--color-main);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.05em;
    margin-bottom: 15px;
  }

  .form_cnts .text {
    font-size: 13px;
    line-height: 1.6;
    margin: 10px 0;
  }

  .form_cnts .text strong {
    color: var(--color-red);
    font-weight: 400;
  }

  .form_list {
    margin-top: 25px;
  }

  .form_item {
    margin-bottom: 25px;
  }
  
  .form_item:last-of-type {
    margin-bottom: 0;
  }

  .form_item .label {
    margin-bottom: 5px;
  }

  .form_item .label label {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
  }

  .form_item .label .tag {
    display: block;
    width: 30px;
    height: 14px;
    line-height: 14px;
    border-radius: 50px;
    text-align: center;
    letter-spacing: 0.05em;
    font-size: 10px;
    font-weight: 600;
    margin-right: 5px;
  }

  .form_item .label .tag.required {
    background: rgba(235, 106, 140, 0.3);
    color: var(--color-red);
  }

  .form_item .label .tag.any {
    background: var(--color-bg);
    color: #909090;
  }

  .form_item .note {
    font-size: 12px;
    color: #909090;
    line-height: 1.5;
    margin-bottom: 5px;
  }

  .form_item .input:not(:last-of-type) {
    margin-bottom: 8px;
  }

  .form_item .input.c_y input,
  .form_item .input.c_y select {
    background: #F7FFB5;
  }

  .form_item .radio label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border: 2px solid #EAEAEA;
    background: #fff;
    color: #909090;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.05em;
    border-radius: 5px;
    padding: 0 25px;
    cursor: pointer;
    position: relative;
    font-size: 15px;
  }

  .form_item .radio label::before {
    content: '';
    width: 16px;
    height: 16px;
    display: block;
    border-radius: 50%;
    background-color: #EAEAEA;
    background-image: url(../img/mypage/icon_check.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 9px;
    position: absolute;
    top: 12px;
    left: 10px;
  }

  .form_item .radio.horizontal {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .form_item .radio.horizontal:has(> :nth-child(2n):last-child) label {
    width: calc( ( 100% - 10px ) / 2 );
  }

  .form_item .radio.horizontal:has(> :nth-child(3n):last-child) label {
    width: calc( ( 100% - 15px ) / 3 );
  }

  .form_item .radio:not(.horizontal) label {
    margin-bottom: 5px;
    text-align: left;
    display: block;
    padding: 7px 10px 7px 35px;
    height: auto;
  }

  .form_item .radio:not(.horizontal) label:last-of-type {
    margin-bottom: 0;
  }

  .form_item .radio input:checked + label {
    border-color: var(--color-main);
    color: var(--color-main);
  }

  .form_item .radio input:checked + label::before {
    background-color: var(--color-main);;    
  }

  .form_item.error input {
    background: rgba(235, 106, 140, 0.1);
    border-color: var(--color-red);
  }

  .form_item .error_text {
    color: var(--color-red);
    font-weight: 600;
    font-size: 12px;
    line-height: 1.5;
    margin: 10px 0 5px;
  }

  .form_item .input_table table {
    width: 100%;
    border-collapse: collapse;
  }

  .form_item .input_table table td {
    font-size: 14px;
    border: 1px solid #ddd;
    padding: 7px;
    text-align: center;
    transition: background-color 0.2s;
    cursor: pointer;
  }

  .form_item .input_table table td.disabled {
    color: #ccc;
    background-color: #f8f8f8;
    cursor: default;
    pointer-events: none; 
  }

  .form_item .input_table table td:not(.disabled):hover {
    background-color: #e5e5e5;
  }

  /*
  .form .btn {
    width: auto;
    min-width: 50px;
    margin: 20px auto 40px;
  }
  */
 
  .form .btn {
    margin-top: 20px;
  }

  .input_flx {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }

  .input_flx.single {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .input_flx .input {
    margin: 0;
  }
  
  .s_73 .input:first-child,
  .s_37 .input:last-child {
    width: 69%;
  }

  .s_73 .input:last-child,
  .s_37 .input:first-child {
    width: 29%;
  }

  .s_55 .input {
    width: 50%;
  }

  /*  input_box
  ------------------------*/
  
  .input_box {
    background: var(--color-bg);
    border-radius: 5px;
    padding: 10px 15px 15px;
    margin-bottom: 20px;
  }

  .input_box:last-of-type {
    margin-bottom: 0;
  }

  .input_box .input,
  .input_box .input_flx {
    margin-bottom: 10px;
  }

  .input_box .input:last-child,
  .input_box .input_flx:last-child {
    margin-bottom: 0;
  }
  
  .input_box .input_flx .input {
    margin-bottom: 0;
  }

  .input_box .text {
    margin-top: 5px;
  }

  .input_flx span {
    font-weight: 600;
    margin: 0 5px;
    font-size: 12px;
  }

  /*  modal
  ------------------------*/
  
  .form_item .btn_modal {
    margin: 5px 0 7px;
  }

  .form_item .btn_modal span {
    background: var(--color-main);
    color: #fff;
  }

  .form_item .btn_mini.nolink.btn_modal span {
    padding: 10px 10px 10px 25px;
    position: relative;
  }

  .form_item .btn_modal span::before {
    content: '';
    width: 16px;
    height: 16px;
    display: block;
    background: url(../img/mypage/icon_modal.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
  }

  /*  acc_box
  ------------------------*/

  .acc_box .btn {
    margin-top: 5px;
    position: relative;
    cursor: pointer;
  }

  .acc_box .btn::before,
  .acc_box .btn::after {
    content: '';
    display: block;
    background: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .acc_box .btn::before {
    width: 10px;
    height: 1.5px;
    right: 20px;
  }

  .acc_box .btn::after {
    width: 1.5px;
    height: 10px;
    right: 24px;
  }

  .acc_sub {
    font-weight: 600;
    margin-top: 15px;
    margin-bottom: 5px;
  }

  .acc_box .text p:not(:last-of-type) {
    margin-bottom: 10px;
  }

  .acc_box .text strong {
    color: var(--color-black);
    font-weight: 600;
  }

  .acc_box .link {
    color: var(--color-red);
    margin-top: 15px;
  }

  .acc_box .link a {
    color: var(--color-red);
    font-weight: 600;
    text-decoration: underline;
  }

  .cssacc {
    display: none;
  }

  .accshow {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
    justify-content: space-between;
  }

  .cssacc:checked + .acc_ttl + .accshow {
    height: auto;
    opacity: 1;
    padding-top: 10px;
  }

  .cssacc:checked + .acc_ttl label::after {
    opacity: 0;
  }
 
  /*  conf
  ------------------------*/

  .conf_conts:not(:last-of-type) {
    margin-bottom: 40px;
  }

  .conf_conts .form_list {
    margin-top: 15px;
  }

  .form_cnts .conf_text {
    color: var(--color-red);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 40px;
    line-height: 1.6;
  }

  .conf_conts .form_item {
    border-bottom: 1px solid #EAEAEA;
    padding: 12px 0;
    margin-bottom: 0;
  }

  .conf_conts .form_item .label {
    margin-bottom: 0;
  }

  .conf_conts .form_item:first-of-type {
    border-top: 1px solid #EAEAEA;
  }

  .conf_conts .input img {
    margin-top: 5px;
  }

  .conf_note {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    color: #fff;
    background: var(--color-red);
    padding: 7px;
    margin-bottom: 10px;
  }

  /*  end
  ------------------------*/
  
  .form_cnts .end_text {
    font-size: 14px;
    line-height: 1.6;
    margin-top: 15px;
  }

  /* =====================
    page_register
  ===================== */

  /*  fv
  ------------------------*/
  
  #page_register #fv {
    padding-bottom: 0;
  }

  /*  progress
  ------------------------*/

  #progress {
    width: 100%;
    height: 60px;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    position: sticky;
    top: 65px;
    left: 0;
    z-index: 998;
  }
  
  .progress_ttl {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: #909090;
    position: relative;
    padding-left: 18px;
    margin-bottom: 2px;
  }

  .progress_ttl::before {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: block;
    background: var(--color-red) url(../img/mypage/icon_check.svg) no-repeat center;
    background-size: 7px;
    position: absolute;
    top: 0;
    left: 0;
  }

  .progress_bar {
    align-items: center;
    justify-content: space-between;
  }

  .progress_bar .num {
    display: block;
    width: 40px;
    text-align: right;
    font-family: proxima-nova, sans-serif;
    color: var(--color-red);
    transform: scale(0.8); 
    font-weight: 600;   
    line-height: 1;
  }

  .progress_bar .num strong {
    font-size: 13px;
    transform: scale(1.6);
    font-weight: 600;
    display: inline-block;
    margin-right: 5px;
  }

  .progress_bar progress {
    -webkit-appearance: none;
    -moz-appearance: none;
   appearance: none;
    width: calc( 100% - 45px );
    height: 5px;
    background: #fff;
    border-radius: 50px;
    overflow: hidden;
  }
  
  .progress_bar ::-webkit-progress-bar {
    background: #fff;
  }
  
  .progress_bar ::-webkit-progress-value {
    background: var(--color-red);
    transition: .3s;
  }
  
  .progress_bar ::-moz-progress-bar {
    background: var(--color-red);
    transition: .3s;
  }
  
  /*  form_cnts
  ------------------------*/

  #register_form {
    margin-top: 15px;
  }

  .fixed_btn {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 10px;
    background: var(--color-bg);
    position: sticky;
    bottom: 0;
    left: 0;
    margin-top: 20px;
  }

  .fixed_btn .btn {
    margin: 0;
  }

  /* =====================
    page_reservation / reservation_change
  ===================== */

  .table_calendar {
    width: 100%;
  }

  .table_calendar th,
  .table_calendar td {
    border: solid 1px #EAEAEA;
    text-align: center;
    vertical-align: middle;
    line-height: 1.4;
    position: relative;
  }

  .table_calendar thead th {
    padding: 5px 0;
    font-size: 12px;
  }

  .table_calendar thead th.time {
    width: 15%;
  }

  .table_calendar thead th.date {
    width: calc( 85% / 7 );
  }

  .table_calendar thead th.sat {
    background-color: #EDFBFF;
  }

  .table_calendar thead th.sun {
    background-color: #FFEDED;
  }

  .table_calendar tbody td input[type=radio] {
    display: none;
  }

  .table_calendar tbody th,
  .table_calendar tbody td {
    font-size: 13px;
  }

  .table_calendar tbody td label {
    display: block;
    position: relative;
    cursor: pointer;
    margin-bottom: 0;
  }

  .table_calendar tbody td label::before {
    content: '◯';
    display: block;
    text-align: center;
    padding: 10px 0;
  }

  .table_calendar tbody td label.disabled {
    pointer-events: none;
  }

  /* 予約不可の場合 */
  .table_calendar tbody td label.disabled::before {
    content: '×';
    background: var(--color-bg);
    padding: 10px 0;
  }

  /* 予約チェックした場合 */
  .table_calendar tbody td input[type=radio]:checked + label {
    color: #FFF;
    background: var(--color-main);
    width: 100%;
    height: 100%;
    border: solid 1px #EAEAEA;
    position: absolute;
    top: 0;
    left: 0;
  }

  /* 予約チェックした場合（チェックマーク） */
  .table_calendar tbody td input[type=radio]:checked + label::before {
    content: '';
    width: 8px;
    height: 13px;
    font-weight: bold;
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
    padding: 0;
    position: absolute;
    top: 42%;
    left: 50%;
  }

  /*  end
  ------------------------*/
  
  .reservation_end_box {
    margin-top: 20px;
    text-align: center;
    padding: 25px 50px 30px;
  }

  .reservation_end_box_ttl {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 5px;
  }

  .reservation_end_box .text {
    margin-bottom: 20px;
  }

  .reservation_end_box .text strong {
    color: var(--color-black);
    font-size: 18px;
    font-weight: 600;
  }

  .reservation_end_box .btn {
    margin-top: 10px;
  }
  
  /* =====================
    text_cnts
  ===================== */
    
  .text_cnts {
    padding: 25px 0 50px;
    margin-bottom: 30px;
  }

  .text_cnts:last-of-type {
    margin-bottom: 0;
  }

  .text_cnts .form_cnts_ttl {
    margin-bottom: 20px;
  }

  .text_cnts .text {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 20px;
  }

  .text_cnts .text:last-child {
    margin-bottom: 0;
  }

  .text_cnts .text strong {
    color: var(--color-red);
    font-weight: 400;
  }

  .ttl_sub {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.05em;
    margin: 35px 0 10px;
  }

  .list_disc,
  .list_num {
    margin-bottom: 20px;
  }

  .list_disc:last-child,
  .list_num:last-child {
    margin-bottom: 0;
  }

  .list_num {
    counter-reset: number 0;
  }

  .list_disc li,
  .list_num li {
    position: relative;
    padding-left: 15px;
  }

  .list_num li {
    counter-increment: number 1;
    padding-left: 25px;
  }

  .list_disc li::before {
    content: '';
    width: 4px;
    height: 4px;
    display: block;
    border-radius: 50%;
    background: #cdcdcd;
    position: absolute;
    top: 10.5px;
    left: 2px;   
  }

  .list_num li::before {
    content: counter(number)'.';
    position: absolute;
    top: 0;
    left: 0;
  }

  .text_scroll {
    background: var(--color-bg);
    padding: 35px 30px;
    height: 300px;
    overflow-y: auto;
  }

  .text_scroll_ttl {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.05em;
    margin-bottom: 15px;
    text-align: center;
  }

  .text_scroll .text {
    font-size: 13px;
  }

  /* =====================
    page_info
  ===================== */
  
  .tel_box {
    background: var(--color-bg);
    border-radius: 5px;
    padding: 10px 15px;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
  }

  .tel_box.bg_w {
    background: #fff;
  }
   
  /* =====================
    nav_local
  ===================== */

  #nav_local {
    margin-bottom: 30px;
  }
  
  #nav_local ul {
    display: flex;
    justify-content: space-between;
  }

  #nav_local ul li {
    width: 49%;
    height: 45px;
    background: #fff;
    border-radius: 5px;
    box-shadow: var(--box-shadow);
    font-size: 13px;
    border: 2px solid #EAEAEA;
  }

  #nav_local ul li a {
    height: 100%;
    color: var(--color-gray);
    display: flex;
    align-items: center;
    position: relative;
    padding: 5px 25px 5px 15px;
  }

  #nav_local ul li a::before {
    content: '';
    width: 6px;
    height: 10px;
    display: block;
    background: url(../img/mypage/icon_arrow_gray.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);    
  }

  /*  active
  ------------------------*/
  
  #nav_local ul li.active {
    border-color: var(--color-main);
  }

  #nav_local ul li.active a {
    color: var(--color-main);
  }

}

/*-------------------------------------------*/
/*	SP
/*-------------------------------------------*/

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

  #wrapper {
    padding-top: 55px;
  }

  /* =====================
    header
  ===================== */
  
  #header {
    width: 100%;
    height: 55px;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    box-shadow: var(--box-shadow);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
  }
  
  .h_logo {
    width: 127px;
  }
  
  .h_home a,
  .h_menu {
    width: 55px;
    height: 55px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  
  .h_home a {
    padding-top: 2px;
    color: var(--color-gray);
  }
  
  .h_home img {
    width: 17px;
  }
  
  .h_text {
    font-size: 10px;
    transform: scale(0.9);
    font-weight: 700;
    margin-top: 1px;
  }
  
  .h_menu {
    cursor: pointer;
    padding-top: 5px;
    background: var(--color-main);
    color: #fff;
    position: relative;
    z-index: 1000;
  }
  
  .h_menu_trigger {
    width: 15px;
    height: 11px;
    display: block;
    position: relative;
  }
  
  .h_menu_trigger span {
    width: 100%;
    height: 1.5px;
    border-radius: 2px;
    display: block;
    background: #fff;
    position: absolute;
    transition: .3s;
    left: 0;
  }
  
  .h_menu_trigger span:nth-child(1) {
    top: 0;
  }
  
  .h_menu_trigger span:nth-child(2) {
    top: 50%;
    margin-top: -1px;
  }
  
  .h_menu_trigger span:nth-child(3) {
    bottom: 0;
  }
  
  .open-menu .h_menu_trigger span:nth-of-type(1) {
    transform: translateY(5px) rotate(-45deg);
  }
  
  .open-menu .h_menu_trigger span:nth-of-type(2) {
    opacity: 0;
  }
  
  .open-menu .h_menu_trigger span:nth-of-type(3){
    transform: translateY(-4.5px) rotate(45deg);
  }
  
  /* =====================
    g_nav
  ===================== */
  
  #g_nav {
    width: 88vw;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
    background: #fff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    padding: 55px 0 25px;
  }

  body.open-menu #g_nav {
    transform: translateX(0);
  }

  #nav_overlay {
    background: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    position: fixed;
    inset: 0;
    z-index: 997;
  }

  body.open-menu #nav_overlay {
    opacity: 0.4;
    pointer-events: auto;
  }

  body.open-menu {
    position: fixed;
    left: 0;
    right: 0;
    overflow: hidden; 
  }

  #g_nav .logo {
    width: 160px;
    margin: 20px auto 0;
  }

  /*  g_nav_main
  ------------------------*/
  
  .g_nav_main {
    border-top: 1px solid rgba(219, 219, 219, 0.8);
  }

  .g_nav_main li {
    font-size: 15px;
    letter-spacing: 0.02em;
    font-weight: 700;
    line-height: 1.5;
    border-bottom: 1px solid rgba(219, 219, 219, 0.8);
  }

  .g_nav_main li a {
    display: block;
    padding: 15px 40px 15px 48px;
    position: relative;
  }

  .g_nav_main li a::after {
    content: '';
    width: 6px;
    height: 10px;
    display: block;
    background: url(../img/mypage/icon_arrow_gray.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);    
  }

  .g_nav_main li a::before {
    content: '';
    width: 18px;
    height: 18px;
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);    
  }

  .g_nav_main li.menu_search a::before {
    background-image: url(../img/common/menu_search.svg);
  }

  .g_nav_main li.menu_beginner a::before {
    background-image: url(../img/common/menu_beginner.svg);
  }

  .g_nav_main li.menu_tanki a::before {
    background-image: url(../img/common/menu_tanki.svg);
  }

  .g_nav_main li.menu_history a::before {
    background-image: url(../img/common/menu_history.svg);
  }

  .g_nav_main li.menu_favo a::before {
    background-image: url(../img/common/menu_favo.svg);
  }

  /*  g_nav_sub_area
  ------------------------*/
  
  .g_nav_sub_area {
    background: var(--color-bg);
    padding: 20px;
    margin-bottom: 20px;
  }

  .g_nav_sub li {
    font-size: 13px;
    letter-spacing: 0.05em;
    line-height: 1.4;
    margin-bottom: 15px;
  }

  .g_nav_sub li:last-child {
    margin-bottom: 0;
  }

  .btn_support {
    width: 230px;
    height: 63px;
    border: 1px solid var(--color-main);
    border-radius: 100px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin: 20px auto 0;
    line-height: 1.3;
  }

  .btn_support a {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--color-main);
  }

  .btn_support a span {
    display: block;
    font-size: 11px;
    letter-spacing: 0.02em;
    font-weight: 400;
  }

  /* =====================
    btn
  ===================== */
  
  .btn {
    width: 150px;
    max-width: 360px;
    margin: 0 auto;
    border-radius: 100px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.02em;
    background: var(--color-main);
  }
  
  .btn.w100 {
    width: 100%;
  }

  .btn a,
  .btn.nolink {
    display: block;
    padding: 12px 25px;
    color: #fff;
    position: relative;
  }
  
  .btn a::before {
    content: '';
    width: 6px;
    height: 10px;
    display: block;
    background: url(../img/mypage/icon_arrow.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
  }
  
  /*  btn_mini
  ------------------------*/
  
  .btn_mini {
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
  }
  
  .btn_mini a,
  .btn_mini.nolink span {
    display: inline-block;
    min-width: 150px;
    padding: 5px 30px;
    color: var(--color-main);
    border-radius: 50px;
    border: 1px solid var(--color-main);
  }
  
  /*  btn_back
  ------------------------*/
  
  .btn.btn_back {
    background: #fff;
    border: 2px solid #EAEAEA;
    color: var(--color-black);
  }

  .btn.btn_back a {
    color: var(--color-black);
  }

  /*  submit_btn
  ------------------------*/

  .submit_btn {
    margin-top: 20px;
  }

  .submit_btn .form .btn {
    margin: 0 auto 10px;
  }

  .submit_btn .form .btn:last-child {
    margin-bottom: 0;
  }

  .submit_btn .form .btn_submit_comp,
  .btn_submit {
    background: var(--color-red);
  }

  .submit_btn .btn_text {
    font-size: 11px;
    line-height: 1.6;
    margin-top: 10px;
    text-align: center;
  }
  
  /* =====================
    box
  ===================== */
  
  .box {
    background: #fff;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    padding: 20px;
  }

  /* =====================
    f_search
  ===================== */

  #f_search {
    background: var(--color-sub);
    padding: 20px 0 30px;
  }
  
  #f_search .inner {
    width: 90%;
  }

  .f_search_item {
    border-bottom: 1px solid #DBDBDB;
  }

  .f_search_ttl {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.05em;
  }

  .f_search_ttl label {
    display: block;
    padding: 13px 25px 13px 0;
    position: relative;
    transition: 0.3s;
    cursor: pointer;
  }

  .f_search_ttl label::before {
    content: '';
    width: 14px;
    height: 14px;
    display: block;
    background: url(../img/common/icon_acc.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
  }

  .f_search_item .accshow {
    padding-left: 0;
    padding-right: 0;
  }

  .cssacc:checked + .f_search_ttl + .accshow {
    height: auto;
    opacity: 1;
    padding-top: 5px;
    padding-bottom: 20px;
  }

  .cssacc:checked + .f_search_ttl label {
    padding-top: 20px;
    font-weight: 700;
  }

  .cssacc:checked + .f_search_ttl label::before {
    background: url(../img/common/icon_acc_show.svg) no-repeat center;
    background-size: contain;
  }

  .f_search_item ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 3px 0;
  }

  .f_search_item ul.n3::after {
    content: '';
    width: calc( ( 100% - 6px ) / 3 );
  }

  .f_search_item ul li {
    width: 100%;
    background: #fff;
    border: 2px solid #EAEAEA;
    border-radius: 5px;
    font-size : 12px;
    letter-spacing: 0.05em;
    min-height: 35px;
    line-height: 1.4;
  }

  .f_search_item ul.n2 li {
    width: calc( ( 100% - 3px ) / 2 );
  }

  .f_search_item ul.n3 li {
    width: calc( ( 100% - 6px ) / 3 );
  }

  .f_search_item ul li a {
    display: block;
    height: 100%;
    padding: 8px 18px 8px 12px;
    position: relative;
  }

  .f_search_item ul li a::before {
    content: '';
    width: 5px;
    height: 8px;
    display: block;
    background: url(../img/mypage/icon_arrow_gray.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
  }
  
  /* =====================
    footer
  ===================== */
  
  #footer {
    background: var(--color-main);
    padding: 5px 0 30px;
  }

  #footer .inner {
    width: 90%;
  }

  #footer .btn_support {
    border-color: #fff;
  }

  #footer .btn_support a {
    color: #fff;
  }

  #footer .link_logout a {
    color: #fff;
  }

  #footer .logo {
    width: 160px;
    margin: 45px auto 10px;
  }
  
  address {
    font-weight: 400;
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.05em;
    text-align: center;
    color: #fff;
  }
  
  /*  f_nav_main
  ------------------------*/
  
  .f_nav_main {
    width: 100vw;
    max-width: 500px;
    margin: 0 calc(50% - 50vw);
  }

  .f_nav_main li {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .f_nav_main li a {
    color: #fff;
    display: block;
    padding: 10px 30px 10px 5%;
    position: relative;
  }

  .f_nav_main li a::before {
    content: '';
    width: 6px;
    height: 10px;
    display: block;
    background: url(../img/mypage/icon_arrow.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);    
    opacity: .7;
  }  

  /*  f_nav_sub
  ------------------------*/
  
  .f_nav_sub {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px 0;
    padding: 20px 0;
  }

  .f_nav_sub li {
    width: 49%;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.05em;
    position: relative;
    padding-left: 13px;
  }

  .f_nav_sub li::before {
    content: '';
    width: 8px;
    height: 1px;
    display: block;
    background: #fff;
    opacity: .7;
    position: absolute;
    top: 7px;
    left: 0;
  }

  .f_nav_sub li a {
    color: #fff;
  }

  /*  sns_list
  ------------------------*/
  
  .sns_list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 20px;
    margin-top: 20px;
  }  

  .sns_list li {
    width: 30px;
  }  
  
  /* =====================
    mypage
  ===================== */
  
  /*  news
  ------------------------*/
  
  #news {
    background: var(--gradient-main);
    padding: 20px 0 35px;
    position: relative;
  }
  
  #news::before {
    content: '';
    width: calc( 100% + 20px );
    height: 45px;
    border-radius: 30px 30px 0 0;
    background: var(--color-bg);
    position: absolute;
    bottom: -25px;
    left: 0;
    transform: translateX(-10px);
  }
  
  .news_swiper {
    overflow: visible;
  }
  
  .news_item {
    background: #fff;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    line-height: 1.4;
    height: auto;
  }
  
  .news_item a {
    display: block;
    height: 100%;
    padding: 10px 25px 10px 15px;
    position: relative;
  }
  
  .news_item a::before {
    content: '';
    width: 6px;
    height: 10px;
    display: block;
    background: url(../img/mypage/icon_arrow_g.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
  }
  
  .news_cat {
    color: var(--color-red);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.05em;
    position: relative;
    padding-left: 17px;
    margin-bottom: 5px;
  }
  
  .news_cat::before {
    content: '';
    width: 13px;
    height: 13px;
    display: block;
    background: url(../img/mypage/icon_news.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 1px;
    left: 0;
  }
  
  .news_text {
    font-size: 12px;
  }
  
  .news_swiper .swiper-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 6px;
    margin-top: 10px;
  }
  
  .news_swiper .swiper-pagination-bullet {
    background: #fff;
    width: 6px;
    height: 6px;
    display: block;
    border-radius: 50%;
  }
  
  .news_swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #EDFF60;
  }
 
  /*  step
  ------------------------*/
    
  #step {
    padding-top: 0;
    position: relative;
  }
  
  .step_bar[date-step="step1"] figure:not(.step1),
  .step_bar[date-step="step2"] figure:not(.step2),
  .step_bar[date-step="step3"] figure:not(.step3),
  .step_bar[date-step="step4"] figure:not(.step4) {
      display: none;
  }
  
  #step .btn {
    margin-top: 15px;
  }
 
  /*  menu
  ------------------------*/
    
  .menu_conts {
    margin-bottom: 30px;
  }
  
  .menu_conts:last-of-type {
    margin-bottom: 0;
  }
  
  .menu_ttl {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    margin-bottom: 10px;
  }
  
  .menu_list {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 15px;
  }
  
  .menu_list li {
    width: calc( ( 100% - 30px ) / 3 );
    height: 0;
    padding-bottom: calc( ( 100% - 30px ) / 3 );
    background: #fff;
    box-shadow: var(--box-shadow);
    border-radius: 10px;
    position: relative;
  }
  
  .menu_list::after {
    content: '';
    width: calc( ( 100% - 30px ) / 3 );
  }
  
  .menu_list li a {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .menu_list li.notice a::before {
    content: '';
    width: 7px;
    height: 7px;
    display: block;
    border-radius: 50%;
    background: var(--color-red);
    position: absolute;
    top: 16px;
    right: 18px;
  }
  
  .menu_list li img {
    width: 40px;
    margin: 0 auto;
  }
  
  .menu_list li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    font-size: 10px;
    color: var(--color-gray);
    font-weight: 600;
    line-height: 1.2;
    margin-top: 2px;
    text-align: center;
  }
  
  .menu_text {
    font-size: 12px;
    line-height: 1.6;
  }
  
  /*  menu_sub
  ------------------------*/

  #menu_sub {
    padding: 0;
    background: #fff;
    margin: 15px 0;
  }

  #menu_sub .inner {
    width: 100%;
  }
 
  .menu_sub_list li {
    font-size: 13px;
    border-bottom: 1px solid rgba(219, 219, 219, 0.4);
  }

  .menu_sub_list li:last-child {
    margin-bottom: 0;
    border: none;
  }

  .menu_sub_list li a {
    display: block;
    padding: 13px 30px 13px 15px;
    position: relative;
  }

  .menu_sub_list li a::before {
    content: '';
    width: 23px;
    height: 23px;
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    top: 14px;
    left: 15px;
  }

  .menu_sub_list li.icon_pdf a {
    padding-left: 45px;
  }

  .menu_sub_list li.icon_pdf a::before {
    background-image: url(../img/mypage/icon_pdf.svg);
  }

  .menu_sub_list li a::after {
    content: '';
    width: 6px;
    height: 10px;
    display: block;
    background: url(../img/mypage/icon_arrow_gray.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);    
  }
  
  /*  bnr
  ------------------------*/
  
  .bnr_list {
    max-width: 360px;
    margin: 0 auto;
  }

  .bnr_list li {
    margin-bottom: 10px;
  }
  
  .bnr_list li:last-child {
    margin-bottom: 0;
  }
  
  /*  navi
  ------------------------*/
  
  .navi_item {
    height: auto;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--box-shadow);
  }
  
  .navi_item a {
    display: flex;
    height: 100%;
    flex-direction: column;
  }
  
  .navi_img {
    width: 100%;
    height: 0;
    padding-bottom: 52.5%;
    position: relative;
  }
  
  .navi_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .navi_text {
    height: 100%;
    display: flex;
    flex-direction: column;
    line-height: 1.4;
    padding: 10px 15px;
  }
  
  .navi_ttl {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 10px;
  }
  
  .navi_date {
    font-family: proxima-nova, sans-serif;
    font-weight: 400;
    font-size: 10px;
    text-align: right;
    color: #CECECE;
    margin-top: auto;
  }
  
  /*  questionnaire
  ------------------------*/
  
  #questionnaire .box .text {
    font-size: 12px;
    line-height: 1.6;
  }
  
  #questionnaire .box .btn_mini {
    margin-top: 10px;
  }

  body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }
  
  .modal_bg {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
  }
  
  .modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000; 
    pointer-events: auto;
  }
  
  .modal-content {
    width: 400px;
    max-width: 84vw;
    margin: 0 auto;
    position: relative;
  }
    
  .modal-content .close {
    display: block;
    width: 25px;
    height: 25px;
    position: absolute;
    top: -35px;
    right: -1vw;
    cursor: pointer;
  }
  
  .modal-content .close span {
    display: block;
    background-color: #FFFFFF;
    width: 25px;
    height: 2px;
    position: absolute;
    left: 0;
    margin-top: -1px;
  }
  
  .modal-content .close span:first-child {
    top: 50%;
    transform: rotate(45deg);
  }
  
  .modal-content .close span:nth-child(2) {
    top: 50%;
    transform: rotate(-45deg);
  }
  
  .modal_questionnaire {
    padding: 40px;
  }
  
  .modal_ttl {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    margin-bottom: 15px;
    text-align: center;
  }
  
  .modal_sub {
    color: var(--color-main);
    font-size: 13px;
    font-weight: 600;
    margin: 20px 0 5px;
  }

  .modal_text {
    font-size: 12px;
    max-height: 50vh;
    overflow-y: auto;
  }
  
  .modal_text p:not(:last-of-type) {
    margin-bottom: 15px;
  }
  
  .modal_btns {
    margin-top: 20px;
  }
  
  .modal_btns .btn:not(:last-of-type) {
    margin-bottom: 8px;
  }

  .modal_btns .btn {
    width: auto;
  }
  
  /*  link_logout
  ------------------------*/
  
  .link_logout {
    font-size: 12px;
    text-align: center;
    margin-top: 20px;
  }
  
  .link_logout a {
    display: inline-block;
    text-decoration: underline;
    color: #909090;
  }

  /* =====================
    fv
  ===================== */

  #fv {
    padding: 15px 0;
  }

  .fv_ttl {
    font-size: 16px;
    font-weight: 600;
    padding-left: 30px;
    position: relative;
  }

  .fv_ttl::before {
    content: '';
    width: 28px;
    height: 28px;
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    top: -2px;
    left: -5px;
  }

  .fv_text {
    font-size: 11px;
    line-height: 1.6;
    margin-top: 10px;
  }

  .fv_text p > a:not([href^="tel:"]) {
    text-decoration: underline;
  }

  .fv_text strong,
  .fv_text strong a {
    color: var(--color-red);
    font-weight: 400;
  }  
    
  /* =====================
    form
  ===================== */

  .form input[type="text"],
  .form input[type="email"],
  .form input[type="password"],
  .form select,
  .form textarea {
    width: 100%;
    padding: 12px;
    background: #fff;
    border: 2px solid #EAEAEA;
    border-radius: 5px;
    font-size : 14px;
    min-height: 40px;
    line-height: 1.4;
    padding: 8px 14px;
  }

  textarea {
    resize: vertical;
    line-height: 1.4;
  }

  .radio input,
  .check input {
    display: none;
  }

  .radio label,
  .check label,
  select,
  button {
    cursor: pointer;
    color: var(--color-black);
  }

  :-moz-placeholder {
    color: #CECECE;
    opacity: 1;
  }

  ::-moz-placeholder {
    color: #CECECE;
    opacity: 1;
  }

  :-ms-input-placeholder {
    color: #CECECE;
  }

  ::-ms-input-placeholder {
    color: #CECECE;
  }

  ::-webkit-input-placeholder {
    color: #CECECE;
  }

  ::placeholder {
    color: #CECECE;
  }

  .form .input textarea {
    resize: vertical;
  }

  .form .select {
    position: relative;
  }

  .form .select::before {
    content: '';
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-top: 6px solid #909090;
    border-bottom: 0;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
  }

  .form .select:has(.error_text)::before {
    top: calc(50% + 14px);
  }

  .form .select select {
    padding-right: 22px;
  }

  .form .input_file {
    display: none;
  }  

  .input_file_area {
    margin-bottom: 10px;
    position: relative;
  }

  .input_file_area:last-of-type {
    margin-bottom: 0;
  }

  .input_file_area .thumbnail {
    display: none;
    margin: 5px auto 20px;
  }

  .input_file_area:last-of-type .thumbnail {
    margin-bottom: 5px;
  }
  
  .input_file_area .btn.btn_file {
    margin-top: 5px;
    padding: 12px 10px;
  }

  .input_file_area .btn.btn_file span {
    display: inline-block;
    position: relative;
    padding-left: 25px;
  }

  .input_file_area .btn.btn_file span::before {
    content: '';
    width: 18px;
    height: 18px;
    display: block;
    background: url(../img/mypage/icon_file.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }

  .input_file_area .btn.btn_file.has-file {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: block;
    background: #fff url(../img/mypage/icon_edit.svg) no-repeat center;
    background-size: 13px;
    position: absolute;
    top: -15px;
    right: -10px;
    cursor: pointer;
    box-shadow: var(--box-shadow);
  }

  .input_file_area .btn.btn_file.has-file span {
    display: none;
  }

  .input.eye_toggle {
    position: relative;
  }

  .input.eye_toggle input {
    padding-right: 35px;
  }

  .input.eye_toggle .icon_eye {
    width: 20px;
    height: 20px;
    display: block;
    cursor: pointer;
    background: url(../img/mypage/icon_eye.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
  }

  .input.eye_toggle:has(.error_text) .icon_eye {
    top: calc(50% + 12px);
  }

  .input.eye_toggle .icon_eye.off {
    background: url(../img/mypage/icon_eye_off.svg) no-repeat center;
    background-size: contain;
  }

  /* =====================
    form_cnts
  ===================== */
  
  .form_cnts {
    padding: 10px 0 30px;
    background: #fff;
    position: relative;
    z-index: 0;
  }

  .form_cnts::before {
    content: '';
    width: calc(100% + 20px);
    height: 45px;
    border-radius: 30px 30px 0 0;
    background: #fff;
    position: absolute;
    top: -15px;
    left: 0;
    transform: translateX(-10px);
    z-index: -1;
  }

  .form_cnts:last-of-type {
    margin-bottom: 0;
  }

  .form_cnts_ttl {
    font-size: 16px;
    color: var(--color-main);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
  }

  .form_cnts .text {
    font-size: 11px;
    line-height: 1.6;
    margin: 8px 0 10px;
  }

  .form_cnts .text strong {
    color: var(--color-red);
    font-weight: 400;
  }

  .form_list {
    margin-top: 15px;
  }

  .form_item {
    margin-bottom: 20px;
  }
  
  .form_item:last-of-type {
    margin-bottom: 0;
  }

  .form_item .label {
    margin-bottom: 5px;
  }

  .form_item .label label {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
  }

  .form_item .label .tag {
    display: block;
    width: 30px;
    height: 14px;
    line-height: 14px;
    border-radius: 50px;
    text-align: center;
    letter-spacing: 0.05em;
    font-size: 10px;
    font-weight: 600;
    margin-right: 5px;
  }

  .form_item .label .tag.required {
    background: rgba(235, 106, 140, 0.3);
    color: var(--color-red);
  }

  .form_item .label .tag.any {
    background: var(--color-bg);
    color: #909090;
  }

  .form_item .note {
    font-size: 10px;
    color: #909090;
    line-height: 1.5;
    margin-bottom: 5px;
  }

  .form_item .input:not(:last-of-type) {
    margin-bottom: 5px;
  }

  .form_item .input.c_y input,
  .form_item .input.c_y select {
    background: #F7FFB5;
  }

  .form_item .radio label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border: 2px solid #EAEAEA;
    background: #fff;
    color: #909090;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.05em;
    border-radius: 5px;
    padding: 0 25px;
    cursor: pointer;
    position: relative;
  }

  .form_item .radio label::before {
    content: '';
    width: 14px;
    height: 14px;
    display: block;
    border-radius: 50%;
    background-color: #EAEAEA;
    background-image: url(../img/mypage/icon_check.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 9px;
    position: absolute;
    top: 10.5px;
    left: 11px;
  }

  .form_item .radio.horizontal {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .form_item .radio.horizontal:has(> :nth-child(2n):last-child) label {
    width: calc( ( 100% - 6px ) / 2 );
  }

  .form_item .radio.horizontal:has(> :nth-child(3n):last-child) label {
    width: calc( ( 100% - 12px ) / 3 );
  }

  .form_item .radio:not(.horizontal) label {
    margin-bottom: 5px;
    text-align: left;
    display: block;
    padding: 7px 10px 7px 35px;
    height: auto;
  }

  .form_item .radio:not(.horizontal) label:last-of-type {
    margin-bottom: 0;
  }

  .form_item .radio:not(.horizontal) label::before {
    top: 12px;
  }

  .form_item .radio input:checked + label {
    border-color: var(--color-main);
    color: var(--color-main);
  }

  .form_item .radio input:checked + label::before {
    background-color: var(--color-main);;    
  }

  .form_item.error input {
    background: rgba(235, 106, 140, 0.1);
    border-color: var(--color-red);
  }

  .form_item .error_text {
    color: var(--color-red);
    font-weight: 600;
    font-size: 12px;
    line-height: 1.5;
    margin: 10px 0 5px;
  }

  .form_item .input_table table {
    width: 100%;
    border-collapse: collapse;
  }

  .form_item .input_table table td {
    font-size: 13px;
    border: 1px solid #ddd;
    padding: 7px;
    text-align: center;
    transition: background-color 0.2s;
    cursor: pointer;
  }

  .form_item .input_table table td.disabled {
    color: #ccc;
    background-color: #f8f8f8;
    cursor: default;
    pointer-events: none; 
  }

  .form_item .input_table table td:not(.disabled):hover {
    background-color: #e5e5e5;
  }

  .form_item.error input {
    background: rgba(235, 106, 140, 0.1);
    border-color: var(--color-red);
  }

  .form_item .error_text {
    color: var(--color-red);
    font-weight: 600;
    font-size: 10px;
    line-height: 1.5;
    margin: 5px 0;
  }
  
  .form .btn {
    margin-top: 20px;
  }
 
  .input_flx {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }

  .input_flx.single {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .input_flx .input {
    margin: 0;
  }

  .s_73 .input:first-child,
  .s_37 .input:last-child {
    width: 69%;
  }

  .s_73 .input:last-child,
  .s_37 .input:first-child {
    width: 29%;
  }

  .s_55 .input {
    width: 50%;
  }

  /*  input_box
  ------------------------*/
  
  .input_box {
    background: var(--color-bg);
    border-radius: 5px;
    padding: 10px 15px 15px;
    margin-bottom: 20px;
  }

  .input_box:last-of-type {
    margin-bottom: 0;
  }

  .input_box .input,
  .input_box .input_flx {
    margin-bottom: 10px;
  }

  .input_box .input:last-child,
  .input_box .input_flx:last-child {
    margin-bottom: 0;
  }
  
  .input_box .input_flx .input {
    margin-bottom: 0;
  }

  .input_box .text {
    margin-top: 3px;
  }

  .input_flx span {
    font-weight: 600;
    margin: 0 5px;
    font-size: 12px;
  }

  /*  modal
  ------------------------*/
  
  .form_item .btn_modal {
    margin: 5px 0 7px;
  }

  .form_item .btn_modal span {
    background: var(--color-main);
    color: #fff;
  }

  .form_item .btn_mini.nolink.btn_modal span {
    padding: 5px 10px 5px 20px;
    position: relative;
  }

  .form_item .btn_modal span::before {
    content: '';
    width: 14px;
    height: 14px;
    display: block;
    background: url(../img/mypage/icon_modal.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
  }

  /*  acc_box
  ------------------------*/

  .acc_box .btn {
    margin-top: 5px;
    position: relative;
    cursor: pointer;
  }

  .acc_box .btn::before,
  .acc_box .btn::after {
    content: '';
    display: block;
    background: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .acc_box .btn::before {
    width: 10px;
    height: 1.5px;
    right: 15px;
  }

  .acc_box .btn::after {
    width: 1.5px;
    height: 10px;
    right: 19px;
  }

  .acc_sub {
    font-weight: 600;
    margin-top: 15px;
    margin-bottom: 5px;
  }

  .acc_box .text p:not(:last-of-type) {
    margin-bottom: 10px;
  }

  .acc_box .text strong {
    color: var(--color-black);
    font-weight: 600;
  }

  .acc_box .link {
    color: var(--color-red);
    margin-top: 15px;
  }

  .acc_box .link a {
    color: var(--color-red);
    font-weight: 600;
    text-decoration: underline;
  }

  .cssacc {
    display: none;
  }

  .accshow {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
    justify-content: space-between;
  }

  .cssacc:checked + .acc_ttl + .accshow {
    height: auto;
    opacity: 1;
    padding-top: 10px;
  }

  .cssacc:checked + .acc_ttl label::after {
    opacity: 0;
  }
  
  /*  conf
  ------------------------*/

  .conf_conts:not(:last-of-type) {
    margin-bottom: 30px;
  }

  .form_cnts .conf_text {
    color: var(--color-red);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 30px;
    line-height: 1.6;
  }

  .conf_conts .form_item {
    border-bottom: 1px solid #EAEAEA;
    padding: 10px 0;
    margin-bottom: 0;
  }

  .conf_conts .form_item .label {
    margin-bottom: 0;
  }

  .conf_conts .form_item:first-of-type {
    border-top: 1px solid #EAEAEA;
  }

  .conf_conts .input img {
    margin-top: 5px;
  }

  .conf_note {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: #fff;
    background: var(--color-red);
    padding: 5px;
    margin-bottom: 10px;
  }

  /*  end
  ------------------------*/
  
  .form_cnts .end_text {
    font-size: 12px;
    line-height: 1.6;
    margin-top: 10px;
  }

  /* =====================
    page_register
  ===================== */

  /*  fv
  ------------------------*/
  
  #page_register #fv {
    padding-bottom: 0;
  }

  /*  progress
  ------------------------*/

  #progress {
    width: 100%;
    height: 55px;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    position: sticky;
    top: 50px;
    left: 0;
    z-index: 998;
  }
  
  .progress_ttl {
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    color: #909090;
    position: relative;
    padding-left: 14px;
  }

  .progress_ttl::before {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: block;
    background: var(--color-red) url(../img/mypage/icon_check.svg) no-repeat center;
    background-size: 7px;
    position: absolute;
    top: 0;
    left: 0;
  }

  .progress_bar {
    align-items: center;
    justify-content: space-between;
  }

  .progress_bar .num {
    display: block;
    width: 40px;
    text-align: right;
    font-family: proxima-nova, sans-serif;
    color: var(--color-red);
    transform: scale(0.7); 
    font-weight: 600;   
    line-height: 1;
  }

  .progress_bar .num strong {
    font-size: 13px;
    transform: scale(1.6);
    font-weight: 600;
    display: inline-block;
    margin-right: 5px;
  }

  .progress_bar progress {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: calc( 100% - 45px );
    height: 5px;
    background: #fff;
    border-radius: 50px;
    overflow: hidden;
  }
  
  .progress_bar ::-webkit-progress-bar {
    background: #fff;
  }
  
  .progress_bar ::-webkit-progress-value {
    background: var(--color-red);
    transition: .3s;
  }
  
  .progress_bar ::-moz-progress-bar {
    background: var(--color-red);
    transition: .3s;
  }

  /*  form_cnts
  ------------------------*/

  #register_form {
    margin-top: 15px;
  }

  .fixed_btn {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 10px;
    background: var(--color-bg);
    position: sticky;
    bottom: 0;
    left: 0;
    margin-top: 20px;
  }

  .fixed_btn .btn {
    margin: 0;
  }

  /* =====================
    page_reservation
  ===================== */

  .table_calendar {
    width: 100%;
  }

  .table_calendar th,
  .table_calendar td {
    border: solid 1px #EAEAEA;
    text-align: center;
    vertical-align: middle;
    line-height: 1.4;
    position: relative;
  }

  .table_calendar thead th {
    padding: 5px 0;
    font-size: 10px;
  }

  .table_calendar thead th.time {
    width: 15%;
  }

  .table_calendar thead th.date {
    width: calc( 85% / 7 );
  }

  .table_calendar thead th.sat {
    background-color: #EDFBFF;
  }

  .table_calendar thead th.sun {
    background-color: #FFEDED;
  }

  .table_calendar tbody td input[type=radio] {
    display: none;
  }

  .table_calendar tbody th,
  .table_calendar tbody td {
    font-size: 11px;
  }

  .table_calendar tbody td label {
    display: block;
    position: relative;
    cursor: pointer;
    margin-bottom: 0;
  }

  .table_calendar tbody td label::before {
    content: '◯';
    display: block;
    text-align: center;
    padding: 7px 0;
  }

  .table_calendar tbody td label.disabled {
    pointer-events: none;
  }

  /* 予約不可の場合 */
  .table_calendar tbody td label.disabled::before {
    content: '×';
    background: var(--color-bg);
    padding: 7px 0;
  }

  /* 予約チェックした場合 */
  .table_calendar tbody td input[type=radio]:checked + label {
    color: #FFF;
    background: var(--color-main);
    width: 100%;
    height: 100%;
    border: solid 1px #EAEAEA;
    position: absolute;
    top: 0;
    left: 0;
  }

  /* 予約チェックした場合（チェックマーク） */
  .table_calendar tbody td input[type=radio]:checked + label::before {
    content: '';
    width: 7px;
    height: 11px;
    font-weight: bold;
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
    padding: 0;
    position: absolute;
    top: 42%;
    left: 50%;
  }

  /*  end
  ------------------------*/
  
  .reservation_end_box {
    margin-top: 20px;
    text-align: center;
    padding: 25px 50px 30px;
  }

  .reservation_end_box_ttl {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 5px;
  }

  .reservation_end_box .text {
    margin-bottom: 20px;
  }

  .reservation_end_box .text strong {
    color: var(--color-black);
    font-size: 16px;
    font-weight: 600;
  }

  .reservation_end_box .btn {
    margin-top: 10px;
  }

  /* =====================
    text_cnts
  ===================== */
    
  .text_cnts {
    padding: 15px 0 30px;
    margin-bottom: 25px;
  }

  .text_cnts:last-of-type {
    margin-bottom: 0;
  }

  .text_cnts .form_cnts_ttl {
    margin-bottom: 12px;
  }

  .text_cnts .text {
    font-size: 13px;
    line-height: 1.8;
    margin-bottom: 20px;
  }

  .text_cnts .text:last-child {
    margin-bottom: 0;
  }

  .text_cnts .text strong {
    color: var(--color-red);
    font-weight: 400;
  }

  .ttl_sub {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.05em;
    margin: 25px 0 12px;
  }

  .list_disc,
  .list_num {
    margin-bottom: 20px;
  }

  .list_num {
    counter-reset: number 0;
  }

  .list_disc:last-child,
  .list_num:last-child {
    margin-bottom: 0;
  }

  .list_disc li,
  .list_num li  {
    position: relative;
    padding-left: 15px;
  }

  .list_num li {
    counter-increment: number 1;
    padding-left: 20px;
  }

  .list_disc li::before {
    content: '';
    width: 4px;
    height: 4px;
    display: block;
    border-radius: 50%;
    background: #cdcdcd;
    position: absolute;
    top: 9px;
    left: 2px;   
  }

  .list_num li::before {
    content: counter(number)'.';
    position: absolute;
    top: 0;
    left: 0;
  }

  .text_scroll {
    background: var(--color-bg);
    padding: 25px 20px;
    height: 250px;
    overflow-y: auto;
  }

  .text_scroll_ttl {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
    text-align: center;
  }

  .text_scroll .text {
    font-size: 12px;
  }

  /* =====================
    nav_local
  ===================== */

  #nav_local {
    margin-bottom: 30px;
  }
  
  #nav_local ul {
    display: flex;
    justify-content: space-between;
  }

  #nav_local ul li {
    width: 48.5%;
    height: 40px;
    background: #fff;
    border-radius: 5px;
    box-shadow: var(--box-shadow);
    font-size: 12px;
    border: 2px solid #EAEAEA;
  }

  #nav_local ul li a {
    height: 100%;
    color: var(--color-gray);
    display: flex;
    align-items: center;
    position: relative;
    padding: 5px 25px 5px 15px;
  }

  #nav_local ul li a::before {
    content: '';
    width: 6px;
    height: 10px;
    display: block;
    background: url(../img/mypage/icon_arrow_gray.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);    
  }

  /*  active
  ------------------------*/
  
  #nav_local ul li.active {
    border-color: var(--color-main);
  }

  #nav_local ul li.active a {
    color: var(--color-main);
  }

  /* =====================
    page_job
  ===================== */
  
  #job .form_cnts .inner {
    width: 90%;
  }

  @media screen and (min-width:500px) {
    
    /* =====================
      footer
    ===================== */
    
    .f_nav_main {
      width: 100%;
      margin: 0 auto;
    }

    .f_nav_main li a {
      padding-left: 0;
    }

    .f_nav_main li a::before {
      right: 0;
    }
    
  }

}