/* -------------------------------------------通用css------------------------------------------------ */

/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&display=swap'); */


/* display flex-style */


body{
  color: #131415;
}

.d-flex{
    display: flex;
}


.flex-column{
    flex-direction: column;
}

.flex-row{
    flex-direction: row;
}


.align-self-center{
    align-items: center;
}

.align-self-end{
    align-items: flex-end;
}

.space-between{
    justify-content: space-between;
}

@media screen and (max-width: 578px){
.column{
flex-direction: column;
}
}


/* 文字style RWD */

h4{
    font-size: 24px;

}

h5{
    font-size: 20px;
 
}

h6{
    font-size: 16px;
}

p{
    font-size: 16px;
}

@media screen and (max-width: 992px){
    h4{
        font-size: 20px;
    
    }
    
    h5{
        font-size: 16px;
    }
    
    h6{
        font-size: 15px;
    }

    p{
        font-size: 14px;
    }

}


@media screen and (max-width: 576px){
    h4{
        font-size: 20px;
    
    }
    
    h5{
        font-size: 16px;
    }
    
    h6{
        font-size: 14px;
        
    }


    p{
        font-size: 14px;
    }

}

/* 文字style RWD */




/* margin size RWD */
.my-1{
    margin: 8px 0;
}

.my-2{
    margin: 16px 0;
}

.my-3{
    margin: 24px 0;
}

.my-4{
    margin: 32px 0;
}

.my-6{
    margin: 48px 0;
}

.my-8{
    margin: 64px 0;
}


.mt-1{
    margin-top: 8px;
}

.mt-2{
    margin-top: 16px;
}

.mt-3{
    margin-top: 24px;
}

.mt-4{
    margin-top:32px ;
}


.mt-6{
    margin-top:48px ;
}
.mt-8{
    margin-top:64px ;
}


.mb-1{
    margin-bottom: 8px;
}

.mb-2{
    margin-bottom: 16px;
}


.mb-3{
    margin-bottom: 24px;
}

.mb-4{
    margin-bottom: 32px;
}

.mb-6{
    margin-bottom: 48px;
}

.mb-8{
    margin-bottom: 64px;
}
/* margin size RWD */


.object-fit{
   max-width: 100%;
   max-height: 100%;
    object-fit:cover;
}



/* color style css */

.btn-red{
    background: #d7000f;
    color: #ffffff;
}


.btn-red:hover{
    background:#CC0000;
    color: #ffffff;

}

.btn-outline-red{
        border: 1px solid #d7000f;
        background: #ffffff;
        color: #d7000f;
    
}

.btn-outline-red:hover{
    background: #d7000f;
    color: #ffffff;

}


.text-red{
    color: #d7000f;
}

.text-gray{
color: #707070;
}

/* color style css */


header {
    background: #d7000f;
    height: 295px;
  }

  @media screen and (max-width: 768px) {
    header {
      background: #d7000f;
      height: 220px;
    }

  }


  @media screen and (max-width: 578px) {
    header {
      background: #d7000f;
      height: 100px;
    }

  }

  .navbar-logo {
    height: 80px;
    width: auto;
    margin-top: 32px;
  }

  @media screen and (max-width: 768px) {
    .navbar-logo {
      height: 60px;

    }

  }

  @media screen and (max-width: 578px) {
    .navbar-logo {
      height: 60px;

    }

  }

  .container{
    margin-bottom: 128px;
  }

  .rule-box {
    width: 100%;
    height: auto;
    padding: 64px 24px;
    background: #ffffff;
    border: 1px solid #979797;
    margin-top: -153px;
  }


  .rule-title {
    margin-bottom: 64px;
  }


  @media screen and (max-width: 768px) {
    .rule-box {
      width: 100%;
      height: auto;
      padding: 32px 16px;
      background: #ffffff;
      border: 1px solid #979797;
      margin-top: -96px;
    }


    .rule-title {
      margin-top: 16px;
      margin-bottom: 32px;
    }

  }


  @media screen and (max-width: 578px) {
    .rule-box {
      width: 100%;
      height: auto;
      padding: 0px;
      background: #ffffff;
      border: 0px solid transparent;
      margin-top: 0px;
    }


    .rule-title {
      margin-bottom: 0px;
    }

  }

  li {
    font-size: 18px;
    font-weight: 500;
    margin: 16px;
  }

  .list-box {
    padding-left: 16px;
  }

  @media screen and (max-width: 578px) {
    ol {
      padding: 8px;
    }

    li {
      font-size: 16px;

    }


  }


  @media screen and (max-width: 768px) {
    .card-body {
      padding: 16px;
    }


  }

  @media screen and (max-width: 578px) {
    .card-body {
      padding: 16px 8px;
    }


  }

  .line {
    margin: 0px 30px;
    width: 200px;
    height: 1px;
    background-color: #000000;
  }

  @media screen and (max-width: 578px) {
    .line {
      margin: 0px 8px;
      width: 70px;
      height: 1px;
      background-color: #000000;
    }
  }


  .card-header .accordion-toggle:before {
    content: "－";
  }

  .card-header .accordion-toggle.collapsed:before {
    content: "＋";
  }


  .btn:active,
  .btn:hover,
  .btn:focus {
    color: #d7000f;
  }

  .border-box {
    border: 1px solid #979797;
    border-radius: 4px;
    padding: 16px 24px;
  }


  @media screen and (max-width: 578px) {
    .border-box {
      padding: 16px 8px;
    }

  }

  .accordion {
    padding: 0;
  }

  .minus-title {
    padding: 8px;
  }


  .plus-score {
    color: #1da6d0;
  }

  .minus-score {
    color: #D7000f;
  }

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

    .minus-item,
    .minus-score {
      font-size: 14px;
    }
  }


  .footer {
    /* margin-top: 64px; */
    background: #d7000f;
    height: 64px;
  }