@charset "UTF-8";
@media screen and (max-width: 768px) {
  #back-top {
    width: 50px;
    bottom: 23vw;
    right: 3%;
  }
  #back-top:hover {
    bottom: 23vw;
  }
  .header {
    background: #fff;
    border-bottom: 2px solid #4a5ea9;
    position: fixed;
    top: 0;
    left: 0;
    border-top: 0;
  }
  .header_wrapper {
    height: 52px;
    padding: 0 16px;
  }
  .header_wrapper .header_logo {
    left: 16px;
    width: 203px;
    transform: translateY(-50%);
  }
  .header_wrapper .header_logo img {
    width: 100%;
    height: auto;
  }
  #businesscard .contents_wrapper {
    padding-top: 54px;
  }
  #businesscard .inner_nav {
    display: none;
  }
  #businesscard .inner_main {
    max-width: 100%;
    width: 100%;
    padding-bottom: 366px;
  }
  #businesscard .download_text.obs {
    font-size: clamp(14px, 4vw, 17px);
    top: max(calc(-60vw * .065), -60px);
  }
  #sp_navi_wrapper .contents_nav {
    padding-inline: 12%;
  }
  #businesscard .inner_main .fix_block {
    padding-top: 4vw;
  }
  #sp_navi_wrapper .contents_nav {
    padding: 30px 5%;
    border: 4px solid #4a5da9;
    border-radius: 11px;
  }
  #sp_navi_wrapper .contents_nav::before {
    width: 50px;
    height: 45px;
    top: -3px;
    left: -3px;
  }
  #sp_navi_wrapper .nav_title {
    width: 220px;
    height: 46px;
    margin: 0 auto 12px;
    position: relative;
  }
  #sp_navi_wrapper .title_top {
    height: 44px;
  }
  #sp_navi_wrapper .nav_title_campaign {
    height: 76px;
  }
  #sp_navi_wrapper .nav_title a {
    padding: 12px 0 13px 30px;
  }
  #sp_navi_wrapper .nav_title a::before {
    width: 13px;
    height: 20px;
    top: 11px;
    left: 0;
    transform: translateY(0);
  }
  #sp_navi_wrapper .nav_title_campaign a::before {
    top: 26px;
  }
  #sp_navi_wrapper .nav_title::after {
    width: 100%;
    height: 20px;
    bottom: -17px;
    left: 0;
    background-size: 42px;
  }
  /*▼▼  オンライン申し込みボタン  ▼▼*/
  #businesscard .details-button::before {
    width: 5%;
    height: 18%;
  }
  #businesscard .cards {
    width: 90%;
    margin: 0 auto;
  }
  #businesscard label.card {
    display: flex;
    flex-direction: column;
  }
  #businesscard .card .left {
    margin-bottom: 10px;
  }
  #businesscard .card .thumb {
    width: 40%;
    height: 100%;
    flex: none;
    margin: 0 auto;
  }
  #businesscard .input {
    border-radius: 0;
  }
  #businesscard .form-group {
    width: 90%;
    margin: 0 auto 20px;
  }
  #businesscard .online_apply_btn a {
    width: 90%;
    padding: 4% 0;
  }
  /*▲▲  オンライン申し込みボタン  ▲▲*/
  #businesscard .accordion.radio .caution {
    width: 90%;
    margin: 0 auto;
  }
  /*▼▼ コンテンツ内ページリンク ▼▼*/
  #businesscard .text_pagelink {
    font-size: max(15px, 3.35vw);
  }
  #businesscard .text_pagelink.obs_02 {
    font-size: max(12px, 3.25vw);
  }
  /*▲▲ コンテンツ内ページリンク ▲▲*/
  /*▼▼ モーダル内ページリンク ▼▼*/
  .modal_img .text_pagelink {
    font-size: max(2.4vw, 12px);
  }
  .modal_img .text_pagelink a .link_border {
    transition-duration: .3s;
    position: relative;
  }
  .modal_img .text_pagelink.link_detail_01 {
    bottom: 4vw;
    left: 0;
  }
  .modal_img .text_pagelink a {
    padding-right: 6%;
  }
  .modal_img .text_pagelink.link_detail_06 {
    bottom: 0%;
    font-size: max(3.2vw, 13px);
  }
  /*▲▲ モーダル内ページリンク ▲▲*/
  /*▼ pagelink obs ▼*/
  #businesscard .text_pagelink.obs {
    bottom: 5vw;
  }
  #businesscard .text_pagelink.about_benefit {
    font-size: max(12px, 3.35vw);
    left: 13%;
  }
  /*▲ pagelink obs ▲*/
  /*▲ pagelink lounge ▲*/
  #businesscard .text_pagelink.lounge {
    font-size: max(12px, 3.35vw);
    left: 14%;
    bottom: 7vw;
  }
  /*▲ pagelink obs ▲*/
  /*=========================
▼▼conts_feature▼▼
===========================*/
  #businesscard #conts_feature .submenu {
    width: 100% !important;
  }
  /*=========================
▲▲conts_feature▲▲
===========================*/
  /*=========================
▼▼conts_card▼▼
===========================*/
  #businesscard #conts_card .details-button {
    margin-top: -23%;
    position: relative;
    top: 0;
    width: 100%;
    z-index: 2;
  }
  #businesscard #conts_card .submenu {
    width: 100% !important;
  }
  /*=========================
▲▲conts_card▲▲
===========================*/
  /*=========================
▼▼conts_card_gold▼▼
===========================*/
  #businesscard #conts_card_gold .details-button {
    margin-top: -23%;
    position: relative;
    top: 0;
    width: 100%;
    z-index: 2;
  }
  #businesscard #conts_card_gold .submenu {
    width: 100% !important;
  }
  /*=========================
▲▲conts_card▲▲
===========================*/
}