/*------   フォント    ------*/

@font-face {
    font-family: "NotoSansJP";
    font-style: normal;
    font-weight: 400;
    src: local("Noto Sans CJK JP"), local("NotoSansJP-Regular"), local("NotoSansJP-Regular"), url("/font/NotoSansJP-Regular.woff2") format("woff2"), url("/font/NotoSansJP-Regular.woff") format("woff");
  }
  @font-face {
    font-family: "NotoSansJP";
    font-style: normal;
    font-weight: 700;
    src: local("NotoSansJP-Bold"), local("NotoSansJP-Bold"), url("/font/NotoSansJP-Bold.woff2") format("woff2"), url("/font/NotoSansJP-Bold.woff") format("woff");
  }
  @font-face {
    font-family: "NotoSansJP-Black";
    font-style: normal;
    font-weight: 900;
    src: local("NotoSansJP-Black"), local("NotoSansJP-Black"), url("/font/NotoSansJP-Black.woff2") format("woff2"), url("/font/NotoSansJP-Black.woff") format("woff");
  } 
  @font-face {
    font-family: "DINAlternate";
    font-style: normal;
    font-weight: 700;
      src: local("DINAlternate-Bold"), local("DINAlternate-Bold"), url("/font/DINAlternate-Bold.woff2") format("woff2"), url("/font/DINAlternate-Bold.woff") format("woff");
  }

.maintenance{
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #000;
}

/*------   初期スタイル    ------*/
*,
*::after,
*::before{
    box-sizing: border-box;
}

a{
    cursor: pointer;
}

a:hover{
    text-decoration: none;
}

.disp-sp {
    display: block;
}

@media screen and (min-width: 767px) {
    .disp-sp {
    display: none;
    }
}

.disp-pc {
    display: none;
}

@media screen and (min-width: 767px) {
    .disp-pc {
    display: block;
    }
}


/*------   タイトル / テキスト    ------*/
.section-title__h1{
    font-size: 30px;
    font-weight: 900;
    color: #011463;
}

.section-title__h2{
    font-size: 24px;
    font-weight: 700;
    color: #011463;
    text-align: center;
}

.section-title__h3{
    font-size: 24px;
    font-weight: 700;
    color: #011463;
    line-height: 1.25;
    border-bottom: 3px solid #011463;
    padding-bottom: 4px;
}

.section-title__h3 span{
    font-size: 14px;
    font-weight: 400;
    color: #011463;
    margin-left: 8px;
}

.section-text{
    font-weight: 700;
    font-size: 16px;
    color: #000;
    line-height: 1.5;
    margin-top: 32px;
}

.section-text-cation{
    font-size: 14px;
    line-height: 1.5;
    color: #000;
    margin-top: 16px;
}

@media screen and (min-width:768px) {
    .section-title__h1{
        font-size: 50px;
    }
    
    .section-title__h2{
        font-size: 32px;
    }
    
    .section-title__h3{
        font-size: 32px;
        border-bottom: 5px solid #011463;
        padding-bottom: 8px;
    }
    
    .section-title__h3 span{
        font-size: 16px;
    }
    
    .section-text{
        font-size: 18px;
        margin-top: 40px;
        text-align: center;
    }
    
    .section-text-cation{
        margin-top: 8px;
        text-align: center;
    }
}

/*------   メンテナンス    ------*/
.maintenance{
    width: 100%;
}

.maintenance-mv{
    width: 100%;
    background-color: #EBECF2;
    padding: 58px 22px 67px;
}

.maintenance-mv__title{
    text-align: center;
}

.maintenance-mv__image{
    max-width: 311px;
    width: 100%;
    margin: auto;
    margin-top: 70px;
}

@media screen and (min-width:768px) {
    .maintenance-mv{
        padding: 57px 0 85px;
    }

    .maintenance-mv__wrap{
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 890px;
        width: 100%;
        margin: auto;
        flex-direction: row-reverse;
    }

    .maintenance-mv__title{
        width: calc(100% - 298px);
        text-align: left;
        margin-left: 40px;
    }
    
    .maintenance-mv__image{
        width: 298px;
        margin: 0;
    }
}

/*------   メンテナンスオプションとは？    ------*/
.maintenance-about{
    margin: 80px 0;
}

.maintenance-about__inner{
    max-width: 1000px;
    width: 100%;
    margin: auto;
    padding: 0 24px;
}

.maintenance-about__content{
    border: 2px solid #011463;
    padding: 40px 16px;
    border-radius: 10px;
    margin-top: 32px;
}

.maintenance-about__items{
    margin-top: 44px;
    display: flex;
    flex-wrap: wrap;
}

.maintenance-about__item{
    width:calc(50% - 30px / 2);
    text-align: center;
}

.maintenance-about__item:nth-child(2n){
    margin-left: 30px;
}

.maintenance-about__item:nth-child(n+3){
    margin-top: 24px;
}

.maintenance-about__item img{
    max-width: 122px;
    width: 100%;
}

.maintenance-about-item__text{
    font-size: 14px;
    color: #011463;
    line-height: 1.5;
    text-align: center;
}

.maintenance-faq{
    margin-top: 40px;
}

.maintenance-faq__title{
    text-align: center;
}

.maintenance-faq__title span{
    display: inline-block;
    padding: 7px 40px;
    border-radius: 50px;
    background-color: #011463;
    color: #fff;
    font-size: 16px;
}


.maintenance-faq__content{
    margin-top: 16px;
}

.maintenance-faq__Q{
    font-size: 18px;
    font-weight: 700;
    color: #011463;
    line-height: 1.5;
    padding-bottom: 16px;
    border-bottom: 3px solid #011463;
}

.maintenance-faq__A{
    font-size: 16px;
    color: #011463;
    line-height: 1.5;
    margin-top: 16px;
}

.maintenance-faq__A span{
    font-weight: 700;
}

.maintenance-faq__description{
    margin-top: 32px;
    font-size: 14px;
    line-height: 1.5;
}

@media screen and (min-width:768px) {
    .maintenance-about{
        margin: 120px 0;
    }

    .maintenance-about__inner{
        padding: 0;
    }
    
    .maintenance-about__content{
        border: 3px solid #011463;
        padding: 40px 80px;
        border-radius: 20px;
        margin-top: 40px;

    }
    
    .maintenance-about__items{
        margin-top: 44px;
        display: flex;
        flex-wrap: wrap;
    }
    
    .maintenance-about__item{
        width: 25%;
    }
    
    .maintenance-about__item:nth-child(2n){
        margin-left: 0;
    }
    
    .maintenance-about__item:nth-child(n+3){
        margin-top: 0;
    }
    
    .maintenance-about-item__text{
        font-size: 16px;
    }
    
    .maintenance-faq{
        margin-top: 40px;
    }
    
    .maintenance-faq__title{
        text-align: left;
    }
    
    .maintenance-faq__title span{
        display: inline-block;
        padding: 7px 40px;
        border-radius: 50px;
        background-color: #011463;
        color: #fff;
        font-size: 16px;
    }
    
    
    .maintenance-faq__content{
        margin-top: 30px;
    }

    .maintenance-faq__A span{
        font-size: 18px;
    }
    
    .maintenance-faq__description{
        margin-top: 40px;
    }
}

/******  加入について  *******/

/*------   加入価格    ------*/
.maintenance-entry{
    padding: 80px 0;
    background-color: #EBECF2;
}

.maintenance-entry__inner{
    max-width: 1000px;
    width: 100%;
    padding: 0 24px;
    margin: auto;
}

.maintenance-entry__content{
    margin-top: 40px;
}

.entry-price,
.entry-info{
    background-color: #fff;
    border-radius: 20px;
    padding: 40px 16px;
}

.entry-price__items{
    margin-top: 40px;
}

.entry-price__item--normal{
    text-align: center;
}

.entry-price-item:nth-child(2){
    margin-top: 25px;
}

.entry-price-item__title--gray,
.entry-price-item__title--blue {
    text-align: center;
}

.entry-price-item__title--gray span{
    display: inline-block;
    max-width: 120px;
    width: 100%;
    padding: 7px;
    background-color: #EBECF2;
    color: #000;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    border-radius: 50px;
}

.entry-price-item__title--blue span{
    display: inline-block;
    max-width: 295px;
    width: 100%;
    padding: 7px;
    background-color: #011463;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    border-radius: 50px;
}

.entry-price-item__price-en.price-mt{
    margin-top: 16px;
    margin-left: 15px;
}

.entry-price-item__price-en{
    font-size: 28px;
    font-weight: 700;
    font-family: "DINAlternate", "NotoSansJP", "Noto Sans", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}

.entry-price-item__price-ja{
    font-size: 24px;
    font-weight: 700;
}

.entry-price-item__price-en span{
    font-size: 12px;
}

.entry-price-item__wrap{
    margin-top: 20px;
}

.entry-price-item__content{
    display: flex;
    max-width: 245px;
    width: 100%;
    margin: auto;
}

.entry-price-item__wrap .entry-price-item__content:nth-child(2){
    margin-top: 16px;
}

.entry-price-item__rank{
    width: 52%;
}
.entry-price-item__price{
    width: 48%;
    margin-left: 12px;
}

.rank-sapphire,
.rank-diamond {
    display: flex;
    align-items: center;
}

.rank-sapphire img{
    width: 27px;
}

.rank-diamond img{
    width: 32px;
    margin-left: -4px;
}

.rank-sapphire span{
    color: #529CC7;
    font-size: 14px;
    font-weight: 900;
    margin-left: 8px;
}

.rank-diamond span{
    color: #E0A43B;
    font-size: 14px;
    font-weight: 900;
    margin-left: 8px;
}

@media screen and (min-width:768px) {
    .entry-price-item__price-en{
        font-size: 41px;
        font-weight: 700;
    }

    .entry-price-item__price-en span{
        font-size: 14px;
    }

    .entry-price-item__title--gray span{
        max-width: 160px;
        font-size: 18px;
    }

    .entry-price-item__title--blue span{
        max-width: 527px;
        font-size: 18px;
    }

    .entry-price-item__price-ja{
        font-size: 30px;
    }

    .entry-price-item__wrap{
        width: 530px;
    }

    .entry-price-item__content{
        max-width: initial;
        width: 50%;
    }

}

/*------   加入方法    ------*/

.entry-info{
    margin-top: 32px;
}

.entry-info__image{
    width: 113px;
    margin: 40px auto 0;
}

.entry-info__text-bold{
    margin-top: 16px;
    font-size: 18px;
    font-weight: 700;
}

.entry-info__text{
    font-size: 16px;
    line-height: 1.5;
    margin-top: 16px;
}

.entry-info__link a{
    margin-top: 24px;
    font-size: 14px;
    color: #000;
    display: inline-block;
    padding-right: 12px;
    border-bottom: 1px solid #000;
    position: relative;
}

.entry-info__link a::after{
    content: "";
    width: 6px;
    height: 9px;
    background: url(../_image/triangle-r.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    position: absolute;
    top: 54%;
    transform: translateY(-50%);
    right: 0;
}


.maintenance-entry__description{
    margin-top: 32px;
    font-size: 14px;
    line-height: 1.5;
}

/*------   加入価格    ------*/
@media screen and (min-width:768px) {
    .maintenance-entry{
        padding: 120px 0;
    }

    .maintenance-entry__inner{
        padding: 0;
    }

    .entry-price,
    .entry-info{
        padding: 40px 80px;
    }

    .entry-price__items{
        margin-top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin: 32px auto 0;
    }

    .entry-price__item--normal{
        width: 28%;
        text-align: left;
    }

    .entry-price-item__wrap{
        display: flex;

    }

    .entry-price-item__title--gray, .entry-price-item__title--blue{
        text-align: left;
    }

    .entry-price-item__wrap .entry-price-item__content:nth-child(2) {
        margin-top: 0;
    }

    .entry-price-item:nth-child(2) {
        margin-top: 0;
    }

    .entry-price-item__content{
        margin: 0;
        align-items: center;
    }

    .entry-price-item__rank{
        width: initial;
        margin-right: 16px;
    }
    .entry-price-item__price{
        width: initial;
        margin-left: 0px;
    }
    
    .rank-sapphire,
    .rank-diamond {
        display: flex;
        align-items: center;
    }
    
    .rank-sapphire img{
        width: 31px;
    }
    
    .rank-diamond img{
        width: 38px;
        margin-left: -4px;
    }
    
    .rank-sapphire span{
        margin-left: 6px;
    }
    
    .rank-diamond span{
        margin-left: 6px;
    }
    

    /* 加入方法 */
    .entry-info{
        margin-top: 32px;
    }

    .entry-info__items{
        display: flex;
        margin-top: 40px;
    }
    
    .entry-info__image-wrap{
        width: 180px;
    }

    .entry-info__image{
        width: 140px;
        margin: 0;
        margin-left: 40px;
    }

    .entry-info__text-wrap{
        width: calc(100% - 180px);
        margin-left: 85px;
    }
    
    .entry-info__text-bold{
        margin-top: 0;
        font-size: 22px;
    }
    
    .entry-info__text{
        margin-top: 24px;
    }
    
    .entry-info__link a{
        font-size: 16px;
    }
    
    .maintenance-entry__description{
        margin-top: 48px;
    }

}


/*------   車両追加で有効期限が延長    ------*/
.maintenance-option{
    margin: 80px 0;
}

.maintenance-option__inner{
    max-width: 1000px;
    width: 100%;
    padding: 0 24px;
    margin: auto;
}

.maintenance-option__wrap .maintenance-option__content:nth-child(2){
    margin-top: 80px;
}

.maintenance-option__image-bg{
    width: 100%;
    padding: 16px 5px 40px 15px;
    background-color: #EBECF2;
    border-radius: 20px;
    margin-top: 32px;
}

.maintenance-option__image-title{
    text-align: center;
}

.maintenance-option__image-title span{
    display: inline-block;
    max-width: 263px;
    width: 100%;
    padding: 7px;
    background-color: #fff;
    color: #000;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    border-radius: 50px;
}

.maintenance-option__image{
    width: 100%;
    margin: 16px auto 0;
}

.maintenance-option__image img{
    width: 100%;
}

.plan-new{
    margin-top: 32px;
    border: 1px solid #061463;
    width: 100%;
    text-align: center;
}

.plan-new__bg-white{
    padding: 20px 0;
    background-color: #fff;
}

.plan-new__bg-white p{
    font-size: 16px;
    font-weight: 700;
}

.plan-new__bg-white span{
    font-size: 14px;
    color: #000;
    font-weight: 400;
}

.plan-new__bg-blue{
   padding: 20px 0;
   background-color: #EBECF2;
   color: #011463;
   font-size: 16px;
   font-weight: 700;
}

.plan-new__bg-blue p{
    color: #011463;
    font-size: 16px;
    font-weight: 700;
 }

.plan-new__bg-blue span{
    font-size: 24px;
    color: #011463;
    font-weight: 700;
}

.plan-old{
    margin-top: 16px;
    border: 1px solid #061463;
    width: 100%;
    text-align: center;
}

.plan-old__bg-white{
    padding: 20px 0;
    background-color: #fff;
    border-bottom: 1px solid #061463;
}

.plan-old__bg-white p{
    font-size: 14px;
    color: #000;
    font-weight: 700;
}

.plan-old__bg-blue{
    padding: 20px 0;
    background-color: #EBECF2;
}

.plan-old__text-black{
    font-size: 14px;
    color: #000;
}

.plan-old__text-mt{
    margin-top: 10px;
}

.plan-old__text-normal{
    font-size: 24px;
    color: #011463;
    font-weight: 700;
}
.plan-old__text-small{
    font-size: 16px;
    color: #011463;
    font-weight: 700;
}

.plan-old__content .plan-old__bg-blue:nth-child(2){
    margin-top: 4px;
}

@media screen and (min-width:768px){
    .maintenance-option{
        margin: 120px 0;
    }
    
    .maintenance-option__inner{
        padding: 0;
    }
    
    .maintenance-option__wrap .maintenance-option__content:nth-child(2){
        margin-top: 120px;
    }
    
    .maintenance-option__image-bg{
        width: 100%;
        padding: 32px 0 40px;
        text-align: center;
        margin-top: 40px;
    }
    
    .maintenance-option__image-title{
        text-align: center;
    }
    
    .maintenance-option__image-title span{
        font-size: 18px;
    }
    
    .maintenance-option__image{
        width: 535px;
        margin: auto;
        margin-top: 24px;
    }
    
    /*------   テーブル    ------*/
    .plan__table{
        margin-top: 40px;
    }

    table {
        width: 100%;
        border: 1px solid #061463;
      }
       th {
        border-right: 1px solid #061463;
        background-color: #fff;
        color: #000;
        font-size: 14px;
      }

      th span{
        font-size: 16px;
        font-weight: 700;
      }

      td{
        width: 50%;
        background-color: #EBECF2;
        font-size: 14px;
        font-weight: 700;
        color: #011463;
      }

      td span{
        font-size: 24px;
        font-weight: 700;
        letter-spacing: 0.015em;
      }
      
      th, td {
        border-bottom: 1px solid #061463;
        padding: 16px;
        text-align: center;
      }
    
}