.nav-tabs-2 {
    display:none;
}

.nav-tabs-3 {
    display:none;
}

.mb-0{
    background: #0080ca;
    padding: 15px;

}

.mb-0 a h3{
  color: #fff;
  margin: 5px 0;
}


.mb-0 h2{
  color: #fff;
  margin: 0px;
}


.mb-1 {
  background: #fff;
  border: 1px solid #0080CA;
  border-radius: 11px;
}

.mb-1 .mobile-item{
  width: 100%;
  position: relative;

}
.mb-1 .mobile-item .logo{
  float: left;
  width: 80px;
}

.mb-1 .mobile-item .content{
  float: left;
  width: auto;
  padding-left: 20px;

}

.symbol-adj{
  position: absolute;
    right: 10px;
    top: 15px;
    font-size: 20px;
}

.mb-1 .mobile-item .content h2 {
  color: #000;
  padding-top: 15px;
  font-size: 25px;

  
}
.card-body{
  padding: 20px;
}

.tab-content-sp {
     padding: 20px 10% 20px;
  }



 @media (min-width: 768px) {
    .tab-content-sp {
        padding: 20px 15px 20px;
    }
    

   .nav-tabs-2 {
       display: flex;
       justify-content: space-between;
       max-width: 1000px;
       margin: 0 auto 29px auto;
       border-bottom: none;
    }

    .nav-tabs-2>li {
      width: 22.5%;
    }

    /*.nav-tabs-2 h3 {
      color: #fff !important;
    }*/


    .nav-tabs-2>li>a {
      text-align: center;
      opacity: 1;
     
      border: 2px solid #0080CA;
      color: #0080CA;
      border-radius: 11px;
      
    }



    .nav-tabs-3>li>a {
      text-align: center;
      opacity: 1;
      border: 2px solid #0080CA;
      color: #0080CA;
      border-radius: 11px;
      
    }

    .nav-tabs-3>li>a:hover {
      border-color: #0080CA #0080CA #0080CA;
       background-color: #e7f8ff !important;
    }

    .nav-tabs-2>li>a:hover {
      text-align: center;
      opacity: 1;
      background-color: #0080ca;
      color: #ffffff;
      border-radius: 11px;
      padding-bottom: 10px;
      border-color: #0080ca;

      
    }

    .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
        color: white;
        cursor: pointer;
        background-color: #0080ca;
        border: 2px solid #0080CA;
        border-bottom-color: transparent;
    }

    .nav-tabs-3>li.active>a, .nav-tabs-3>li.active>a:focus, .nav-tabs-3>li.active>a:hover {
        color: blue;
        cursor: pointer;
        /*background-color: #fff;*/
        background-color: #e7f8ff;
        border: 2px solid #0080ca;
        border-bottom-color: none;
    }

   

    .nav-tabs-2>li.active>a {
    color: none;
    cursor: pointer;
    border: 2px solid #0080CA;
    /*border: none;*/
    border-bottom-color: transparent;
    text-align: center;
      opacity: 1;
      background-color: #0080ca;
      color: #ffffff;
      border-radius: 11px;
      padding-bottom: 10px;
      border-color: #0080ca;
    }

    .nav-tabs-3 {
      display: flex;
       justify-content: space-between;
       
       margin: 0 auto 29px auto;
       border-bottom: none;

       max-width: 1000px;
      
       
      
    }


    .nav-tabs-3>li {
      width: 30%;
      padding: 10px;
    }

    .nav-tabs-3 img{

      max-width: 80%;
      margin: 0 auto;
      padding: 20px 0 30px;
    }
    
    .nav-tabs-3>li.active>a {
    color: none;
    cursor: pointer;
    border: 2px solid #0080CA;
    /*border: none;*/
    border-bottom-color: transparent;
    text-align: center;
      opacity: 1;
      background-color: #fff;
      color: #ffffff;
      border-radius: 11px;
      padding-bottom: 10px;
      border-color: #0080CA;
      background-color: #e7f8ff;

    }
    .nav-tabs-3 .nav-item a .logo-container{
      padding: 20px;
    }

    .nav-tabs-2>li>a:focus ::after {
      content: '';
      display: block;
      width: calc(100% + 9px);
      border-top: 8px solid #e94709;
      position: absolute;
      left: -4px;
      bottom: -34px;
      z-index: 998;
    }

    .nav-tabs-2>li>a:focus {
      text-align: center;
      opacity: 1;
      background-color: #0080ca !important;
      color: #ffffff !important;
      border-radius: 11px !important;
      
      border-color: #0080ca !important;

      
    }

    .nav-tabs-2>li.active>a, .nav-tabs-2>li.active>a:focus, .nav-tabs-2>li.active>a:hover {
      color: none;
      cursor: default;
      background-color: none;
    /*  border: none;*/
      border-bottom-color: none;
    }

    .nav-tabs-2>li.active>a ::after, .nav-tabs-2>li.active>a:focus ::after, .nav-tabs-2>li.active>a:hover ::after {
      content: '';
      display: block;
      width: calc(100% + 9px);
      border-top: 8px solid #e94709;
      position: absolute;
      left: -4px;
      bottom: -34px;
      z-index: 998;
    }

    /*.nav-tabs-3>li.active>a ::after, .nav-tabs-2>li.active>a:focus ::after, .nav-tabs-2>li.active>a:hover ::after {
      content: '';
      display: block;
      width: calc(100% + 9px);
      border-top: none;
      position: absolute;
      left: -4px;
      bottom: -34px;
      z-index: 998;
    }*/

    .nav-tabs-3 h2{
      color: #000 !important;
      font-size: 22px;
    }

    

    .product-selected{
      text-align: center;
      opacity: 1;
      background-color: #0080ca;
      color: #ffffff;
      border-radius: 11px;
      padding-bottom: 10px;
      border-color: #0080ca;
    }

    .product-selected ::after{
      content: '';
      display: block;
      width: calc(100% + 9px);
      /*border-top: 8px solid #e94709;*/
      position: absolute;
      left: -4px;
      bottom: -34px;
      z-index: 998;
      
    }

    .product-selected h2{
      color: #fff;
    }


    .nav-tabs-2>li>a>h2{
      font-weight: bold;
      padding: 0px;
      margin: 10px 0;
    }

    
    .card {
        border: none;
    }

    .card .card-header {
        display:none;
    }  

    .card .collapse{
        display:block;
    }
}



 @media (max-width: 767px) {
   .tab-content > .tab-pane {
        display: block !important;
        background-color: #f5f5f5;
        opacity: 1;
    }

     .mb-1 .mobile-item .content h2{
      font-size: 25px;
      /*padding-top: 22%;*/
    }

    .symbol-adj{
    position: absolute;
      right: 1px;
      top: 10px;
      font-size: 33px;
      
  }
   


    .tab-content-sp {
        padding: 0px 15px 20px;
    }
}

@media (max-width: 650px) {

   .mb-1 .mobile-item .logo {
        float: left;
        width: 60px;
    }

    .mb-1 .mobile-item .content h2{
      font-size: 18px;
      /*padding-top: 22%;*/
      padding-top: 12px;
    }

    .symbol-adj{
      font-size: 20px;
      
  }
}

/* style announcement page */
.main-announcement {padding-top: 40px; padding-right: 15px; padding-left: 15px}
.main-announcement__content {padding: 20px 15px; background-color: lightpink}
.main-announcement a {color: #000; font-weight: 700; font-size: 14px; text-decoration: none}
.main-announcement .text-red {color: #f00; font-size: 14px}
.main-announcement .underline {text-decoration: underline; text-underline-offset: 2px}
.announcement-page {padding-bottom: 50px}
.announcement-page .font-bold {font-weight: 700}
.announcement-page .text-red {color: #f00}
.announcement-page .text-pink {color: #d11145}
.announcement-page img {max-width: 100%}
@media screen and (min-width: 980px) {
    .main-announcement {padding-top: 100px}
    .main-announcement__content {padding-right: 30px; padding-bottom: 30px; padding-left: 30px; margin-right: -20px; margin-left: -20px}
    .main-announcement a {font-size: 22px}
    .main-announcement .text-red {font-size: 18px}
    .product-announcement {
        width: 479px;
    }
}
/* end style announcement page */