/* MYGS1 */
/* avoid showing triangle ponting right emoji on iOS */
.right-pointing-triangle::after {
content: "\25B6 \FE0E";
}
hr{
  opacity: 1;
}

/* PC */
@media (min-width:992px) {
  /* general */
  .mobile{
    display: none;
  }
  .table-odd {
    background-color: rgba(0, 0, 0, 0.05);
  }
  .text-center-pc{
    text-align: center !important;
  }
  .form-responsive{
    width: auto;
  }
  /* purchase/detail */
  .purchase-detail-table{
    margin-left: 3em;
  }
  .mobile-warning {
    display: none;
  }
}

/* mobile */
@media (max-width: 991px) {
  /* navbar header */
  .nav-container{
    padding-left: 0;
  }
  .navbar-toggle{
    display: unset;
  }
  .navbar-collapse.collapse{
    /* display: none !important; */
  }
  .navbar-inverse .navbar-toggle .icon-bar{
    background-color: #888B8D;
    width: 27px;
    height: 3px;
  }
  .navbar-inverse .navbar-toggle .icon-fa-user{
    color: #888B8D;
  }
  .navbar-inverse [class="navbar-toggle"] .icon-bar{
    background-color: #002C6C;
  }
  .navbar-inverse [class="navbar-toggle"] .icon-fa-user{
    color: #002C6C;
  }
  .icon-fa-user{
    font-size: 1.7em;
  }
  .icon-fa-cart{
    font-size: 1.7em;
    color: #78BC27
  }
  .icon-fa-cart:hover{
    opacity: 0.5;
  }
  .navbar-logo-mobile:hover{
    opacity: 0.5;
  }
  .navbar-collapse{
    border: 0;
    text-align: center;
  }
  .navbar-inverse .navbar-nav>li>a:hover{
    color: #002C6C;
  }
  .toolkit .header-top{
    border-bottom: 1px solid #b1b3b3;
  }

  /* general */
  .pc-only {
    display: none !important;
  }
  .title-shade{
  background-color: rgba(0, 0, 0, 0.05);
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  }

  /* captcha section */
  .captcha_div, .captcha_div div{
    display: flow-root;
  }
  .captcha_div .captcha_image img{
    width: 100% !important;
  }
  .captcha_div .captcha_field input{
    width: 100% !important;
  }
  .captcha_div .captcha_field{
    margin-top: 20px !important;
  }
  .captcha-btn-mobile{
    margin-top: 12px;
    padding: 5.25px 10.5px !important;
  }
  .captcha_label{
    display: none !important;
  }

  /* general */
  .remove-margin-mobile{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .remove-padding-mobile{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .consistent-margin-mobile{
    margin-left: 15px !important;
    margin-right: 15px !important;
  }
  .consistent-padding-mobile{
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .consistent-padding-sm-mobile{
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  .margin-top{
    margin-top: 10px;
  }
  .remove-margin{
    margin-bottom: 0 !important;
  }
  .remove-margin-top{
    margin-top: 0 !important;
  }
  .border-box-solid{
    border: 1px solid #B1B3B3;
  }
  .form-responsive{
    width: 100%;
  }
  .text-left{
    text-align: left;
  }
  .text-left-mobile{
    text-align: left !important;
  }
  *.btn-secondary:hover{
    opacity: 0.5;
  }

  /* inline form */
  .inline-container{
    display: flex;
  }
  .inline-radio-form{
    width: 50%;
  }

  /* button flip */
  #wrapper {
    display: flex;
    flex-direction: column;
  }
  .top {
    order: 1;
  }
  .image2 {
    display: block;
    order: 2;
  }
  .image3 {
    display: block;
    order: 3;
  }
  .margin-bottom-btn{
    margin-bottom: 15px !important;
  }

  /* top page */
  /* accordion top page */
  .accordion-button::after{
    background-size: 3rem;
    width: 3rem;
    height: 3rem;
  }
  .top-menu-block{
    width: auto !important;
  }
  /* view_user_info page */
  .gepir{
    padding-top: 15px;
  }

  /* confirm_terms*/
  .consent-accordion{
    padding-top: 0;
    margin-top: 10px;
  }
  #accordion-button{
    background-color: #002C6C;
  }
  #accordion-button:not(.collapsed){
    background-color: #002C6C;
  }
  .accordion-title{
    color: #FBFBFB !important;
  }
  #accordion-button:not(.collapsed)::after{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FBFBFB'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
  }
  #accordion-button::after{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FBFBFB'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
  }
  .notice-checkbox-background-mobile {
    background-color: transparent !important;
  }
  .consent-label{
    text-align: left;
  }

  /* subuser list page */
  .user-table-mobile thead{
    display: none;
  }
  .user-table-mobile, .user-table-mobile tbody, .user-table-mobile tr, .user-table-mobile td{
    display: block;
    width: 100%;
  }
  .user-table-mobile td{
    border: 0 !important;
  }
  .user-table-mobile tr{
    border-left-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
  }
  .btn-info{
    color: white !important;
    text-align: center;
    margin-bottom: 10px;
  }
  .table-card{
    padding: 8px 10px 0 10px !important;
  }
  .table-card-last{
    padding: 8px 10px 10px 10px !important;
  }
  .bold{
    font-weight: bold;
  }

  /* purchase/select */
.barcode-item-row{
  font-size: 14px;
}
.number-dropdown{
  font-size: 14px !important;
}

  /* zoom-in when typing input on iOS solution */
  .form-control{
    font-size: 16px;
  }
  /* footer */
  .icon-user-div{
    top: 10%;
  }
  .icon-user-sub-div{
    top: -5%;
  }
  .icon-book-div{
    top: 15%;
  }
  .padding-top-mobile{
    padding-top: 10px  !important;
  }
  .copyright-footer{
    padding-top: 15px;
    padding-bottom: 15px;
  }

  /* progress bar 3 steps*/
  .progressbar{
    counter-reset: step;
    padding-left: 0
  }
  .progressbar li{
    list-style-type: none;
    float: left;
    width: 33.33%;
    position: relative;
    text-align: center;
    color: white;
  }
  .progressbar li:before{
    content: counter(step);
    counter-increment: step;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #888B8D;
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    background-color: #888B8D;
    z-index: 2;
    position: relative;
  }
  .progressbar li:after{
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: #888B8D;
    top: 20px;
    left: -50%;
    z-index: 1;
  }
  .progressbar li:first-child:after{
    content: none;
  }
  .progressbar li.active{
    color: white;
  }
  .progressbar li.active:before{
    border-color: #002c6c;
    background-color: #002c6c;
  }
  .progressbar li.done{
    color: #002c6c;
  }
  .progressbar li.done + li:after{
    background-color: #002c6c;
  }
  .progressbar li.done:before{
    content: '✓';
    border-color: #002c6c;
    background-color: #002c6c;
    color: white;
  }

  /* progress bar 4 steps*/
  .progressbar4{
    counter-reset: step;
    padding-left: 0
  }
  .progressbar4 li{
    list-style-type: none;
    float: left;
    width: 25%;
    position: relative;
    text-align: center;
    color: white;
  }
  .progressbar4 li:before{
    content: counter(step);
    counter-increment: step;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #888B8D;
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    background-color: #888B8D;
    z-index: 2;
    position: relative;
  }
  .progressbar4 li:after{
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: #888B8D;
    top: 20px;
    left: -50%;
    z-index: 1;
  }
  .progressbar4 li:first-child:after{
    content: none;
  }
  .progressbar4 li.active{
    color: white;
  }
  .progressbar4 li.active:before{
    border-color: #002c6c;
    background-color: #002c6c;
  }
  .progressbar4 li.done{
    color: #002c6c;
  }
  .progressbar4 li.done + li:after{
    background-color: #002c6c;
  }
  .progressbar4 li.done:before{
    content: '✓';
    border-color: #002c6c;
    background-color: #002c6c;
    color: white;
  }
  /* progress bar 6 steps*/
  .progressbar6{
    counter-reset: step;
    padding-left: 0
  }
  .progressbar6 li{
    list-style-type: none;
    float: left;
    width: 16.6%;
    position: relative;
    text-align: center;
    color: white;
  }
  .progressbar6 li:before{
    content: counter(step);
    counter-increment: step;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #888B8D;
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    background-color: #888B8D;
    z-index: 2;
    position: relative;
  }
  .progressbar6 li:after{
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: #888B8D;
    top: 20px;
    left: -50%;
    z-index: 1;
  }
  .progressbar6 li:first-child:after{
    content: none;
  }
  .progressbar6 li.active{
    color: white;
  }
  .progressbar6 li.active:before{
    border-color: #002c6c;
    background-color: #002c6c;
  }
  .progressbar6 li.done{
    color: #002c6c;
  }
  .progressbar6 li.done + li:after{
    background-color: #002c6c;
  }
  .progressbar6 li.done:before{
    content: '✓';
    border-color: #002c6c;
    background-color: #002c6c;
    color: white;
  }

  /* モバイル用：横並び＋改行対応 */
  .mobile-warning {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 40px 0;
  }
  .mobile-warning img {
    flex-shrink: 0;
    margin-left: 20px;
  }
  .mobile-warning span {
    color: red;
    font-weight: bold;
    font-size: 1em;
  }
}
.warning-pc span {
  color: red;
  font-weight: bold;
  font-size: 1.2em;
}
.warning-pc {
  margin: 40px 0 40px 20px;
}
.warning-pc img {
  margin-right: 15px;
}
.warning-pc span {
  font-size: 1.2em;
}
.info-msg-date {
  margin: 0;
}