@charset "utf-8";
 /*
 * 新規CSS
 * -------------------------------------------------------------------
 */

/*フォント*/

.font-family-Arial{
    font-family: Arial;
}

.font-family-YuGothicUI{
    font-family: "Yu Gothic UI";
}

.fs-14{
    font-size: 14px;
}

.fs-16{
    font-size: 16px;
}


.letter-space-0{
    letter-spacing: 0;
}

.letter-space-0-6{
    letter-spacing: 0.6px;
}

.letter-space-0-7{
    letter-spacing: 0.7px;
}

.letter-space-0-8{
    letter-spacing: 0.8px;
}

.letter-space-1-2{
    letter-spacing: 1.2px;
}
/* マイページ */
.mar-tb0 {
    margin-top: 0px;
    margin-bottom: 0px;
}

/*マージントップ*/
.mar-t0 {
    margin-top: 0px;
}

.mar-t5 {
    margin-top: 5px;
}

.mar-t8 {
    margin-top: 8px;
}

.mar-t10 {
    margin-top: 10px;
}

.mar-t15 {
    margin-top: 15px;
}

.mar-t16 {
    margin-top: 16px;
}

.mar-t20 {
    margin-top: 20px;
}

.mar-t25 {
    margin-top: 25px;
}

.mar-t30 {
    margin-top: 30px;
}

.mar-t32 {
    margin-top: 32px;
}

.mar-t35 {
    margin-top: 35px;
}

.mar-t40 {
    margin-top: 40px;
}

.mar-t50 {
    margin-top: 50px;
}

/*マージンボトム*/
.mar-b0 {
    margin-bottom: 0px;
}

.mar-b5 {
    margin-bottom: 5px;
}

.mar-b10 {
    margin-bottom: 10px;
}

.mar-b11 {
    margin-bottom: 11px;
}

.mar-b15 {
    margin-bottom: 15px;
}

.mar-b16 {
    margin-bottom: 15px;
}

.mar-b20 {
    margin-bottom: 20px;
}

.mar-b24 {
    margin-bottom: 24px;
}

.mar-b25 {
    margin-bottom: 25px;
}

.mar-b30 {
    margin-bottom: 30px;
}

.mar-b35 {
    margin-bottom: 35px;
}

.mar-b40 {
    margin-bottom: 40px;
}

.mar-b48 {
    margin-bottom: 48px;
}

.mar-b50 {
    margin-bottom: 50px;
}

.mar-b60 {
    margin-bottom: 60px;
}

.mar-b65 {
    margin-bottom: 65px;
}

/*マージンレフト*/
.mar-l0 {
    margin-left: 0px;
}

.mar-l5 {
    margin-left: 5px;
}

.mar-l10 {
    margin-left: 10px;
}

.mar-l15 {
    margin-left: 15px;
}

.mar-l20 {
    margin-left: 20px;
}

.mar-l25 {
    margin-left: 25px;
}

.mar-l30 {
    margin-left: 30px;
}

.mar-l35 {
    margin-left: 35px;
}

.mar-l40 {
    margin-left: 40px;
}

/*マージンライト*/
.mar-r0 {
    margin-right: 0px;
}

.mar-r5 {
    margin-right: 5px;
}

.mar-r10 {
    margin-right: 10px;
}

.mar-r15 {
    margin-right: 15px;
}

.mar-r20 {
    margin-right: 20px;
}

.mar-r25 {
    margin-right: 25px;
}

.mar-r30 {
    margin-right: 30px;
}

.mar-r35 {
    margin-right: 35px;
}

.mar-r40 {
    margin-right: 40px;
}


/*パディングトップボトム*/
.pad-tb0 {
    padding-top: 0px;
    padding-bottom: 0px;
}

.pad-tb10-lr-16 {
    padding: 10px 16px 10px 16px;
}

.pad-0{
  padding: 0;
}

/*パディングトップ*/
.pad-t0 {
    padding-top: 0px;
}

.pad-t5 {
    padding-top: 5px;
}

.pad-t10 {
    padding-top: 10px;
}

.pad-t15 {
    padding-top: 15px;
}

.pad-t20 {
    padding-top: 20px;
}

.pad-t21 {
    padding-top: 21px;
}

.pad-t25 {
    padding-top: 25px;
}

.pad-t30 {
    padding-top: 30px;
}

.pad-t35 {
    padding-top: 35px;
}

.pad-t40 {
    padding-top: 40px;
}

/*パディングボトム*/
.pad-b0 {
    padding-bottom: 0px;
}

.pad-b5 {
    padding-bottom: 5px;
}

.pad-b10 {
    padding-bottom: 10px;
}

.pad-b15 {
    padding-bottom: 15px;
}

.pad-b20 {
    padding-bottom: 20px;
}

.pad-b25 {
    padding-bottom: 25px;
}

.pad-b30 {
    padding-bottom: 30px;
}

.pad-b35 {
    padding-bottom: 35px;
}

.pad-b40 {
    padding-bottom: 40px;
}

/*パディングレフト*/
.pad-l0 {
    padding-left: 0px;
}

.pad-l5 {
    padding-left: 5px;
}

.pad-l10 {
    padding-left: 10px;
}

.pad-l15 {
    padding-left: 15px;
}

.pad-l20 {
    padding-left: 20px;
}

.pad-l25 {
    padding-left: 25px;
}

.pad-l30 {
    padding-left: 30px;
}

.pad-l35 {
    padding-left: 35px;
}

.pad-l40 {
    padding-left: 40px;
}

/*パディングライト*/
.pad-r0 {
    padding-right: 0px;
}

.pad-r5 {
    padding-right: 5px;
}

.pad-r10 {
    padding-right: 10px;
}

.pad-r15 {
    padding-right: 15px;
}

.pad-r20 {
    padding-right: 20px;
}

.pad-r25 {
    padding-right: 25px;
}

.pad-r30 {
    padding-right: 30px;
}

.pad-r35 {
    padding-right: 35px;
}

.pad-r40 {
    padding-right: 40px;
}

/* フロート */
.fl-r {
    float: right;
}

.fl-l {
    float: left;
}

/* clear */
.clear {
    clear: both;
}


/*画像サイズ調整*/
.height-auto {
    height: auto;
}

.modal-body .mod-media+.mod-freeHTML {
    padding-bottom: 40px;
}

a.event-none {
    pointer-events: none;
}

/* 非表示 */
.tag-hide {
    display: none;
}

/* 表示 */
.tag-display {
    display: block;
}

.flex-style {
    display: flex;
    align-items: baseline;
    justify-content: center;
}

.flex-display-center {
    display: flex;
    align-items: baseline;
    justify-content: center;
}

.flex-justify-center{
    display: flex;
    justify-content: center;
}

/* フォント */

.fz-s20 {
    font-size: 20px;
}

.fz-s28 {
    font-size: 28px;
}

.fz-s30 {
    font-size: 30px;
}

.fz-s16 {
    font-size: 16px;
}

.fw-w700 {
    font-weight: 700;
}

.fw-normal{
    font-weight: normal;
}

.ft-s16-l16 {
    font-size: 16px;
    line-height: 16px;
}

.ft-s16-l26 {
    font-size: 16px;
    line-height: 26px;
}

.ft-s20-l17 {
    font-style: normal;
    font-weight: bold;
    font-variant: normal;
    font-size: 20px;
    line-height: 17px;
}

.ft-s14-l17 {
    font-style: normal;
    font-weight: bold;
    font-variant: normal;
    font-size: 14px;
    line-height: 17px;
}

/* テキスト */
.tx-center {
    text-align: center;
}

/* カラー */
.color-red {
    color: #e60020;
}

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

.font-weight-bold {
    font-weight: bold;
}


a {
    text-decoration: none;
}

.bg-color-FEF2F4 {
    background-color: #FEF2F4;
}

.PC-show {
    display: block !important;
}

/* PCモード */
@media only screen and (min-width: 1024px) {
    .fz-p-16 {
        font-size: 16px;
    }
    .flex-jc{
      display: flex;
      justify-content: center;
    }
}

/* SPモード */
@media only screen and (max-width: 767px) {

    /*マージントップ*/
    .mar-sp-t0 {
        margin-top: 0px;
    }

    .mar-sp-t5 {
        margin-top: 5px;
    }

    .mar-sp-t7 {
        margin-top: 7px;
    }

    .mar-sp-t8 {
        margin-top: 8px;
    }

    .mar-sp-t9 {
        margin-top: 9px;
    }

    .mar-sp-t10 {
        margin-top: 10px;
    }

    .mar-sp-t12 {
        margin-top: 12px;
    }

    .mar-sp-t15 {
        margin-top: 15px;
    }

    .mar-sp-t20 {
        margin-top: 20px;
    }

    .mar-sp-t25 {
        margin-top: 25px;
    }

    .mar-sp-t30 {
        margin-top: 30px;
    }

    .mar-sp-t35 {
        margin-top: 35px;
    }

    .mar-sp-t40 {
        margin-top: 40px;
    }

    .mar-sp-t50 {
        margin-top: 50px;
    }

    /*マージンボトム*/
    .mar-sp-b0 {
        margin-bottom: 0px;
    }

    .mar-sp-b5 {
        margin-bottom: 5px;
    }

    .mar-sp-b10 {
        margin-bottom: 10px;
    }

    .mar-sp-b15 {
        margin-bottom: 15px;
    }

    .mar-sp-b20 {
        margin-bottom: 20px;
    }

    .mar-sp-b25 {
        margin-bottom: 25px;
    }

    .mar-sp-b30 {
        margin-bottom: 30px;
    }

    .mar-sp-b35 {
        margin-bottom: 35px;
    }

    .mar-sp-b40 {
        margin-bottom: 40px;
    }

    .mar-sp-b50 {
        margin-bottom: 50px;
    }

    .mar-sp-b60 {
        margin-bottom: 60px;
    }

    .mar-sp-b65 {
        margin-bottom: 65px;
    }

    /*マージンレフト*/
    .mar-sp-l0 {
        margin-left: 0px;
    }

    .mar-sp-l5 {
        margin-left: 5px;
    }

    .mar-sp-l10 {
        margin-left: 10px;
    }

    .mar-sp-l15 {
        margin-left: 15px;
    }

    .mar-sp-l20 {
        margin-left: 20px;
    }

    .mar-sp-l25 {
        margin-left: 25px;
    }

    .mar-sp-l30 {
        margin-left: 30px;
    }

    .mar-sp-l35 {
        margin-left: 35px;
    }

    .mar-sp-l40 {
        margin-left: 40px;
    }

    /*マージンライト*/
    .mar-sp-r0 {
        margin-right: 0px;
    }

    .mar-sp-r5 {
        margin-right: 5px;
    }

    .mar-sp-r10 {
        margin-right: 10px;
    }

    .mar-sp-r15 {
        margin-right: 15px;
    }

    .mar-sp-r20 {
        margin-right: 20px;
    }

    .mar-sp-r25 {
        margin-right: 25px;
    }

    .mar-sp-r30 {
        margin-right: 30px;
    }

    .mar-sp-r35 {
        margin-right: 35px;
    }

    .mar-sp-r40 {
        margin-right: 40px;
    }


    /*パディングトップボトム*/
    .pad-sp-tb0 {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .pad-sp-tb10-lr-sp-16 {
        padding: 10px 16px 10px 16px;
    }

    /*パディングトップ*/
    .pad-sp-t0 {
        padding-top: 0px;
    }

    .pad-sp-t5 {
        padding-top: 5px;
    }

    .pad-sp-t10 {
        padding-top: 10px;
    }

    .pad-sp-t15 {
        padding-top: 15px;
    }

    .pad-sp-t20 {
        padding-top: 20px;
    }

    .pad-sp-t25 {
        padding-top: 25px;
    }

    .pad-sp-t30 {
        padding-top: 30px;
    }

    .pad-sp-t35 {
        padding-top: 35px;
    }

    .pad-sp-t40 {
        padding-top: 40px;
    }

    /*パディングボトム*/
    .pad-sp-b0 {
        padding-bottom: 0px;
    }

    .pad-sp-b5 {
        padding-bottom: 5px;
    }

    .pad-sp-b10 {
        padding-bottom: 10px;
    }

    .pad-sp-b15 {
        padding-bottom: 15px;
    }

    .pad-sp-b20 {
        padding-bottom: 20px;
    }

    .pad-sp-b25 {
        padding-bottom: 25px;
    }

    .pad-sp-b30 {
        padding-bottom: 30px;
    }

    .pad-sp-b35 {
        padding-bottom: 35px;
    }

    .pad-sp-b40 {
        padding-bottom: 40px;
    }

    /*パディングレフト*/
    .pad-sp-l0 {
        padding-left: 0px;
    }

    .pad-sp-l5 {
        padding-left: 5px;
    }

    .pad-sp-l10 {
        padding-left: 10px;
    }

    .pad-sp-l15 {
        padding-left: 15px;
    }

    .pad-sp-l20 {
        padding-left: 20px;
    }

    .pad-sp-l25 {
        padding-left: 25px;
    }

    .pad-sp-l30 {
        padding-left: 30px;
    }

    .pad-sp-l35 {
        padding-left: 35px;
    }

    .pad-sp-l40 {
        padding-left: 40px;
    }

    /*パディングライト*/
    .pad-sp-r0 {
        padding-right: 0px;
    }

    .pad-sp-r5 {
        padding-right: 5px;
    }

    .pad-sp-r10 {
        padding-right: 10px;
    }

    .pad-sp-r15 {
        padding-right: 15px;
    }

    .pad-sp-r20 {
        padding-right: 20px;
    }

    .pad-sp-r25 {
        padding-right: 25px;
    }

    .pad-sp-r30 {
        padding-right: 30px;
    }

    .pad-sp-r35 {
        padding-right: 35px;
    }

    .pad-sp-r40 {
        padding-right: 40px;
    }

    .SP-show {
        display: block !important;
    }

    .PC-show {
        display: none !important;
    }

    .mar-s-t15 {
        margin-top: 15px;
    }

    .mar-s-t17 {
        margin-top: 17px;
    }

    .width-100 {
        width: 100%;
    }

    .width-65 {
        width: 65%;
    }

    .width-3 {
        min-width: calc(100% / 3);
    }

    .bg-color-F8 {
        background-color: #F8F8F8;
    }

    .bg-color-FF {
        background-color: #FFFFFF;
    }

    /* フォント Start*/
    .ft-s12-l15 {
        font-style: normal;
        font-variant: normal;
        font-size: 12px;
        line-height: 15px;
    }

    .ft-s12-l19 {
        font-style: normal;
        font-variant: normal;
        font-size: 12px;
        line-height: 19px;
    }

    .br-left {
        border-left: 1px double rgba(0, 0, 0, 0.2);
    }

    /* フォント End*/

    .height-30 {
        height: 30px;
    }

    .height-20 {
        height: 20px;
    }

    .height-14 {
        height: 14px;
    }

    .height-12-5 {
        height: 12.5px;
    }

    .tx-s-left {
        text-align: left;
    }

    .font-weight-bold {
        font-weight: bold;
    }
}

 /*
 *  フォント　Start　
 * -------------------------------------------------------------------
 */
 body {
    padding-top: 156px;
    font-family: "ヒラギノ角ゴシック", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN,"Yu Gothic Medium", YuGothic, Arial, "メイリオ", Meiryo, sans-serif;
    line-height: 1.6;
    font-size: 16px;
    letter-spacing: .05em;
    color: #000;
    font-feature-settings: "palt";
  }

  h1{
    font-size: 16px;
  }
  
  h2,
  h3{
    font-size: 24px;
  }
  
  h4{
    font-size: 22px;
  }
  
  h5{
    font-size: 18px;
  }
  
  .font-family-Arial{
    font-family: Arial;
  }
  .bold{
  font-weight: bold;
  }
  
  .comment{
    font-size: 14px;
  }
  
  .fz14{
    font-size: 14px;
  }
  
  .fz20{
    font-size: 20px;
  }
  
  .fz16-lh16{
    font-size: 16px;
    line-height: 16px;
  }
  
  .fz16-lh24{
    font-size: 16px;
    line-height: 24px;
  }
  
  .fz20-lh20{
    font-size: 20px;
    line-height: 20px;
  }
  
  .fz20-lh30{
    font-size: 20px;
    line-height: 30px;
  }
  @media only screen and (max-width: 1024px) {
    .viewport-wrapper {
      padding-left: 16px;
      padding-right: 16px;
    }
  }

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

/*
 *  Table　Start
 * -------------------------------------------------------------------
 */
 th,td{
    border: 1px solid #CCCCCC;
    height: 100px;
    padding-left: 16px;
    vertical-align: middle;
  }
  
  th,td:first-child{
  font-weight: bold;
  }
  
  
  /*Tab*/
  .nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
  }
  
  .nav-link.disabled {
    pointer-events: none;
    cursor: default;
  }
  
  .tab-content>.tab-pane {
    display: none;
  }
  
  .tab-content>.active {
    display: block;
  }
  
  .nav-width .nav-item .nav-link {
    width: 100%;
  }
  .main-column {
    margin-top: 32px;
  }
  
  /* .main-tab a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  .main-tab .no-hover-effect:hover {
    opacity: 1;
    transition: none; 
  }
  
  .main-tab .tabs-container {
    display: flex;
    justify-content: space-between;
  }
  
  .main-tab .main-tab-top .tab {
    align-items: center;
    justify-content: center;
    height: 54px;
    border: 1px solid #51BA97;
    border-radius: 8px 8px 0 0;
    background-color: #ffffff;
    flex: 1;
    margin-right: 8px;
    text-align: left;
    font-variant: normal; 
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0.8px;
    color: #000000;
    opacity: 1;
  }
  
  .main-tab .main-tab-top .tab:last-child {
    margin-right: 0;
    position: relative;
  }
  
  
  .main-tab .tab-icon-campaign-tip-top {
    width: 44px;
    height: 24px;
    position: absolute;
    top: -12px;
    left: 8px;
  }
  
  .main-tab .tab-icon-campaign-tip-bottom {
    width: 44px;
    height: 24px;
    position: absolute;
    top: 42px;
    left: 8px;
  }
  
  .main-tab .main-tab-bottom .tab {
    align-items: center;
    justify-content: center;
    height: 54px;
    border: 1px solid #51BA97;
    border-radius: 0 0 8px 8px;
    background-color: #ffffff;
    flex: 1;
    margin-right: 8px;
    text-align: left;
    font-variant: normal; 
    font-size: 16px;
    line-height: 26px;
    
    letter-spacing: 0.8px;
    color: #000000;
    opacity: 1;
  }
  
  .main-tab .main-tab-bottom .tab:last-child {
    margin-right: 0;
    position: relative;
  }
  
  .main-tab .tab-icon {
    margin-right: 8px;
    max-width: 24px;
    max-height: 24px;
  }
  
  .main-tab .tab-line {
    height: 2px;
    background-color: #51BA97;
    width: 100%;
  }
  
  .main-tab .active {
    background: #E5F5EF !important;
    border: 1px solid #51BA97 !important;
  }
  
  .main-tab .tab:hover {
    color: #34A078 !important;
    background: #E5F5EF !important;
    border: 1px solid #51BA97 !important;
  } */
  
  /*modal*/
  
  .modal-background{
    display: none;
    background:  rgba(0, 0, 0, 0.5);
    position: fixed; 
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center
  }
  
  .modal-block{
    width: 760px;
    height: 640px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 15px;
    opacity: 1;
    /* z-index: 2; */
    position: fixed;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
  
  .modal-scroll-block{
    margin-top: 32px;
    margin-bottom: 16px;
    height: 430px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  
  .modal-title{
    border-bottom: 1px solid #EFEFEF; 
    height: 39px;
    margin: 0px 32px 32px 32px;
    display: flex;
  }
  
  .modal-title-image{
    width: 16px;
    height: 16px;
    margin-top: 8px;
  }
  
  .modal-title-text{
    margin-left: 8px;
  }
  
  .modal-contents{
    margin: 32px 32px 32px 32px;
  }
  
  .modal-divider{
    width: 100%;
    height: 8px;
    background: #EFEFEF 0% 0% no-repeat padding-box;
    opacity: 1;
  }
  
  .modal-contents-title{
    margin-top: 32px;
  }
  
  .modal-contents-text{
    text-align: left;
    /* font: normal normal normal 16px/26px ヒラギノ角ゴシック;
    letter-spacing: 0.8px;
    color: #000000;
    opacity: 1; */
    margin-top: 16px;
  }
  
  .modal-block .contents-change{
    margin-top: 24px;
    width: 320px;
    height: 58px;
  }
  
  .modal-block .contents-change-link{
    border: 1px solid #34A078;
    border-radius: 500px;
    background: url('../../img/common/ico-arrow-modal-double-right-white.png') #34A078 no-repeat 26px center / 18px auto;
  
    display: block;
    max-width: 320px;
    height: 58px;
    line-height: 58px;
    margin-left: 0px;
  }
  .modal-block .modal-cancel-button{
    margin-top: 16px;
    width: 86px;
    height: 32px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 50px;
    opacity: 1;
  }
  .modal-block .modal-cancel-button:hover{
  
    background: #E5F5EF 0% 0% no-repeat padding-box;
  
  }
  
  .modal-block .modal-cancel-image{
    width: 9.33px;
    height: 9.33px;
    margin-right: 7.33px;
  }
  
  /*width*/
  .contents .width-102{
    width: 102px;
  }
  .contents .width-200{
    width: calc(522px - 322px);
  }
  
  .contents .width-468{
    width: calc(522px - 54px);
  }
  
  .contents .width-490{
    width: calc(522px - 36px) ;
  }
  
  .contents .width-696{
    width: calc(760px - 64px);
  }
  
  /*Margin*/
  .mar-t0 {
    margin-top: 0px;
  }
  
  .mar-r5 {
    margin-right: 5px;
  }
  
  .mar-t8 {
    margin-top: 8px;
  }
  
  .mar-t16 {
    margin-top: 16px;
  }
  
  .mar-t32 {
    margin-top: 32px;
  }
  
  .mar-t40 {
    margin-top: 40px;
  }
  
  .mar-t48 {
    margin-top: 48px;
  }
  
  .mar-t64 {
    margin-top: 64px;
  }
  
  .mar-b0 {
    margin-bottom: 0px;
  }
  
  .mar-b8 {
    margin-bottom: 8px;
  }
  
  .mar-b16 {
    margin-bottom: 16px;
  }
  
  .mar-b32 {
    margin-bottom: 32px;
  }
  
  .mar-b40 {
    margin-bottom: 40px;
  }
  
  .mar-b48 {
    margin-bottom: 48px;
  }
  
  .mar-b64 {
    margin-bottom: 64px;
  }
  
  .mar-l0 {
    margin-left: 0px;
  }
  
  .mar-l4 {
    margin-left: 14px;
  }
  
  .mar-l8 {
    margin-left: 8px;
  }
  
  .mar-l16 {
    margin-left: 16px;
  }
  
  .mar-l32 {
    margin-left: 32px;
  }
  
  .mar-l40 {
    margin-left: 40px;
  }
  
  .mar-l48 {
    margin-left: 48px;
  }
  
  .mar-l64 {
    margin-left: 64px;
  }
  
  .mar-r0 {
    margin-right: 0px;
  }
  
  .mar-r8 {
    margin-right: 8px;
  }
  
  .mar-r16 {
    margin-right: 16px;
  }
  
  .mar-r32 {
    margin-right: 32px;
  }
  
  .mar-r40 {
    margin-right: 40px;
  }
  
  .mar-r48 {
    margin-right: 48px;
  }
  
  .mar-r64 {
    margin-right: 64px;
  }
  
  /*padding*/
  .pad-t0-l16-r0-b0{
    padding: 0 0 0 16px !important;
  }
  
  .pad-t15{
    padding-top: 15px;
  }
  
  /*center*/
  .dis-column-center{
    display: flex;
    align-items: center;
  }

/*
 *  Table　End
 * -------------------------------------------------------------------
 */


/*
 *  Customize Global Button Style Start
 * -------------------------------------------------------------------
 */
 .common-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 320px;
    height: 46px;
    opacity: 1;
    border: 1px solid #E60020;
    border-radius: 500px;
    background: #FFFFFF url(../../img/common/button/ico-arrow-double-right-red.png) no-repeat 27px center / 15px auto;
    color: #E60020;
  }
  
  .common-button-hover {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 320px;
    height: 46px;
    opacity: 1;
    border: 1px solid #E60020;
    border-radius: 500px;
    background: #FFFFFF url(../../img/common/button/ico-arrow-double-right-red.png) no-repeat 27px center / 15px auto;
    color: #E60020;
  }
  
  .common-button-inactive {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 320px;
    height: 46px;
    opacity: 1;
    border: 1px solid #949494;
    border-radius: 500px;
    background: #FFFFFF url(../../img/common/button/ico-arrow-double-right-grey.png) no-repeat 27px center /15px auto;
    color: #949494;
  }
  
  .primary-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 320px;
    height: 46px;
    opacity: 1;
    border-radius: 500px;
    background: #34A078 url(../../img/common/button/ico-arrow-double-right-white.png) no-repeat 27px center /15px auto;
    color: #FFFFFF;
  }
  
  .primary-button-hover {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 320px;
    height: 46px;
    opacity: 1;
    border-radius: 500px;
    background: #34A078 url(../../img/common/button/ico-arrow-double-right-white.png) no-repeat 27px center /15px auto;
    color: #FFFFFF;
  }
  
  .primary-button-inactive {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 320px;
    height: 46px;
    opacity: 1;
    border-radius: 500px;
    background: #CCCCCC url(../../img/common/button/ico-arrow-double-right-white.png) no-repeat 27px center /15px auto;
    color: #FFFFFF;
  }
  
  .secondary-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 320px;
    height: 46px;
    opacity: 1;
    border: 1px solid #34A078;
    border-radius: 500px;
    background: #FFFFFF url(../../img/common/button/ico-arrow-double-right-green.png) no-repeat 27px center / 15px auto;
  }
  
  .secondary-button-hover {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 320px;
    height: 46px;
    opacity: 1;
    border: 1px solid #34A078;
    border-radius: 500px;
    background: #E5F5EF url(../../img/common/button/ico-arrow-double-right-green.png) no-repeat 27px center / 15px auto;
  }
  
  .secondary-button-inactive {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 320px;
    height: 46px;
    opacity: 1;
    border: 1px solid #949494;
    border-radius: 500px;
    background: #FFFFFF url(../../img/common/button/ico-arrow-double-right-grey.png) no-repeat 27px center / 15px auto;
    color: #949494;
  }
  
  .small-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180px;
    height: 34px;
    opacity: 1;
    border: 1px solid #34A078;
    border-radius: 500px;
    background: #FFFFFF url(../../img/common/button/ico-arrow-double-right-green.png) no-repeat 15px center / 15px auto;
  }
  
  .small-button-hover {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180px;
    height: 32px;
    opacity: 1;
    border: 1px solid #34A078;
    border-radius: 500px;
    background: #E5F5EF url(../../img/common/button/ico-arrow-double-right-green.png) no-repeat 15px center / 15px auto;
  }
  
  .small-button-inactive {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180px;
    height: 32px;
    opacity: 1;
    border: 1px solid #949494;
    border-radius: 500px;
    background: #FFFFFF url(../../img/common/button/ico-arrow-double-right-grey.png) no-repeat 15px center / 15px auto;
    color: #949494;
  }
  
  .x-small-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 71px;
    height: 26px;
    opacity: 1;
    border: 1px solid #34A078;
    border-radius: 500px;
    background: #FFFFFF url(../../img/common/button/ico-arrow-double-right-green.png) no-repeat 10px center / 15px auto;
    padding-left: 20px;
    font-size: 14px;
    line-height: 19px;
    box-sizing: content-box;
  }
  
  .x-small-button:hover {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 73px;
    height: 27px;
    opacity: 1;
    border: 1px solid #34A078;
    border-radius: 500px;
    background: #E5F5EF url(../../img/common/button/ico-arrow-double-right-green.png) no-repeat 10px center / 15px auto;
    padding-left: 20px;
  }
  
  .x-small-button-inactive {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 73px;
    height: 27px;
    opacity: 1;
    border: 1px solid #949494;
    border-radius: 500px;
    background: #FFFFFF url(../../img/common/button/ico-arrow-double-right-grey.png) no-repeat 10px center / 15px auto;
    color: #949494;
    padding-left: 20px;
  }
  
  .tertiary-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 320px;
    height: 48px;
    opacity: 1;
    border: 1px solid #949494;
    border-radius: 500px;
    background: #FFFFFF url(../../img/common/button/ico-arrow-double-left-green.png) no-repeat 27px center / 15px auto;
  }
  
  .tertiary-button-hover {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 320px;
    height: 46px;
    opacity: 1;
    border: 1px solid #949494;
    border-radius: 500px;
    background: #E5F5EF url(../../img/common/button/ico-arrow-double-left-green.png) no-repeat 27px center / 15px auto;
  }
  
  .anchor-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 320px;
    height: 46px;
    opacity: 1;
    border: 1px solid #949494;
    border-radius: 500px;
    background: #FFFFFF url(../../img/common/button/ico-arrow-double-down-green.png) no-repeat 277px center / 15px auto;
  }
  
  .anchor-button-hover {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 320px;
    height: 46px;
    opacity: 1;
    border: 1px solid #949494;
    border-radius: 500px;
    background: #E5F5EF url(../../img/common/button/ico-arrow-double-down-green.png) no-repeat 277px center / 15px auto;
  }

/*
 *  Customize Global Button Style End
 * -------------------------------------------------------------------
 */

/*
 *   色　Start
 * -------------------------------------------------------------------
 */
 .color-f00000 {
    color: #f00000;
  }
  
  /* ニュートラルカラー */
  .color-000000 {
    color: #000000;
  }
  
  .color-636363 {
    color: #636363;
  }
  
  .color-d0d0d0 {
    color: #d0d0d0;
  }
  
  .color-e6e6e6 {
    color: #e6e6e6;
  }
  
  .color-efefef {
    color: #efefef;
  }
  
  .color-f8f8f8 {
    color: #f8f8f8;
  }
  
  .color-fbfbfb {
    color: #fbfbfb;
  }
  
  .color-ffffff {
    color: #ffffff;
  }
  
  /* キーカラー */
  .color-e60020 {
    color: #e60020;
  }
  
  .color-f06679 {
    color: #f06679;
  }
  
  .color-b8001a {
    color: #b8001a;
  }
  
  .color-fef2f4 {
    color: #fef2f4;
  }
  
  .color-51ba97 {
    color: #51ba97;
  }
  
  .color-34a078 {
    color: #34a078;
  }
  
  .color-398e74 {
    color: #398e74;
  }
  
  .color-cceae0 {
    color: #cceae0;
  }
  
  .color-e5f5ef {
    color: #e5f5ef;
  }
  
  .color-f2f8f5 {
    color: #f2f8f5;
  }
  
  /* リンクカラー(既存) */
  .color-005096 {
    color: #005096;
  }
  
  /* エラー(既存) */
  .color-e62000 {
    color: #e62000;
  }
  
  /* ユーザーステータス (新規) */
  .color-ffd700 {
    color: #ffd700;
  }
  
  .color-c0c0c0 {
    color: #c0c0c0;
  }
  
  .color-cd7f32 {
    color: #cd7f32;
  }
  
  .color-0ac3d2 {
    color: #0ac3d2;
  }


 /*
 *   色  End
 * -------------------------------------------------------------------
 */


/*
 *   境界線  Start
 * -------------------------------------------------------------------
 */

 .divider-h1{
    border-bottom: 1px solid #D0D0D0;
  }
  
  .divider-h4{
    border-bottom: 4px solid #E6E6E6;
  }
  
  .divider-h8{
    border-bottom: 8px solid #E6E6E6;
  }

/*
 *   境界線  End
 * -------------------------------------------------------------------
 */


/*
 *   任意／必須項目   Start
 * -------------------------------------------------------------------
 */
 .form-must{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 26px;
    border-radius: 5px;
    background-color: #E60020;
    font-size: 14px;
    color: #FFFFFF;
  }
  
  .form-arbitrarily{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 26px;
    border-radius: 5px;
    background-color: #E6E6E6;
    font-size: 14px;
  }
/*
 *   任意／必須項目   End
 * -------------------------------------------------------------------
 */


/*
 *   テキスト入力デザイン  Start
 * -------------------------------------------------------------------
 */
 .default-input{
    width: 204px;
    height: 46px;
    border: 1px solid #636363;
    border-radius: 8px;
    text-indent: 16px;
    outline: none;
  }
  
  .default-input:focus{
    border: 2px solid #51BA97;
    background-color: #F2F8F5;
  }
  
  .error-input{
    width: 202px;
    height: 44px;
    border-radius: 8px;
    text-indent: 16px;
    outline: none;
    border: 2px solid #E62000;
  }
  
  .disabled-input{
    width: 204px;
    height: 46px;
    border-radius: 8px;
    text-indent: 16px;
    outline: none;
    border: 1px solid #949494;
    background-color: #EFEFEF;
  }

/*
 *   テキスト入力デザイン  End
 * -------------------------------------------------------------------
 */

/*
 *   日付選択デザイン  Start
 * -------------------------------------------------------------------
 */

 .default-date-input{
    width: 128px;
    height: 46px;
    border-radius: 8px;
    outline: none;
    border: 1px solid #636363;
    text-indent: 5px;
    font-size: 16px;
    line-height: 16px;
    font-weight: bold;
    padding-right: 5px;
  }
  
  .default-date-input::-webkit-calendar-picker-indicator{
    background: url(../../img/common/icon-date.png) no-repeat 2px center;
  }
  
  .default-date-input:focus{
    border: 2px solid #51BA97;
    background-color:  #F2F8F5;
  }
  
  .error-date-input{
    width: 126px;
    height: 44px;
    border-radius: 8px;
    outline: none;
    border: 2px solid #E62000;
    text-indent: 5px;
    font-size: 16px;
    line-height: 16px;
    font-weight: bold;
    padding-right: 5px;
  }
  
  .error-date-input::-webkit-calendar-picker-indicator{
    background: url(../../img/common/icon-date.png) no-repeat 2px center;
  }
  
  .disabled-date-input{
    width: 128px;
    height: 46px;
    border-radius: 8px;
    outline: none;
    border: 1px solid #949494;
    text-indent: 5px;
    font-size: 16px;
    line-height: 16px;
    font-weight: bold;
    padding-right: 5px;
    background-color: #EFEFEF;
  }
  
  .disabled-date-input::-webkit-calendar-picker-indicator{
    background: url(../../img/common/icon-data-disabled.png) no-repeat 2px center;
  }

/*
 *   ドロップダウンボックスデザイン  End
 * -------------------------------------------------------------------
 */
 .default-ddl{
    width: 200px;
    height: 48px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #636363;
    border-radius: 8px;
    opacity: 1;
    margin-right: 8px;
    padding: 13px 14px;

    appearance: none;
    background: url('../../img/common/ico-arrow-modal-ddl.png') no-repeat right 12px center; 
}

.default-ddl:hover{
  background: #F2F8F5 0% 0% no-repeat padding-box;
  border: 2px solid #51ba97;
  padding-top: 12px;
  padding-bottom: 12px;
  appearance: none;
  background: url('../../img/common/ico-arrow-modal-ddl.png') no-repeat right 12px center; 
}

.default-ddl:focus {
  border: 2px solid #51ba97;
  padding-top: 12px;
  padding-bottom: 12px;
  outline: none; 
}

.default-ddl-error{
  width: 200px;
  height: 48px;
  background: #FFFFFF 0% 0% no-repeat padding-box;
  border: 2px solid #E62000;
  border-radius: 8px;
  opacity: 1;
  margin-right: 8px;
  padding: 16px;

  appearance: none;
  background: url('../../img/common/ico-arrow-modal-ddl.png') no-repeat right 12px center; 
}

.default-ddl-error:focus {
  border: 2px solid #E62000;
  outline: none; 
}

.default-ddl-disabled{
  width: 200px;
  height: 48px;
  background: #EFEFEF 0% 0% no-repeat padding-box;
  border: 1px solid #949494;
  border-radius: 8px;
  opacity: 1;
  margin-right: 8px;
  padding: 16px;
  
  appearance: none;
  background: url('../../img/common/ico-chevron-down-grey.png') no-repeat right 12px center; 
}
/*
 *   ラジオデザイン  End
 * -------------------------------------------------------------------
 */
 .common-radio-button input[type="radio"] {
    display: none;
  }
  
  .common-radio-button label {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-right: 32px;
    font-variant: normal; 
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0.8px;
    color: #000000;
  }
  
  .common-radio-button label::before {
    content: "";
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #707070;
    border-radius: 50%;
    background: #FFFFFF;
  }
  
  .common-radio-button .error-label {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-right: 32px;
    font-variant: normal; 
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0.8px;
    color: #000000;
  }
  
  .common-radio-button .error-label::before {
    content: "";
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #E62000;
    border-radius: 50%;
    background: #FFFFFF;
  }
  
  .common-radio-button input[type="radio"]:checked + label {
    font-weight: 600; 
  }
  
  .common-radio-button input[type="radio"]:checked + label::before {
    background: #51BA97;
    box-shadow: inset 0 0 0 4px #FFFFFF;
    border: 1px solid #51BA97;
  }

/*
 *   ラジオデザイン  End
 * -------------------------------------------------------------------
 */
 .default-checkbox input[type="checkbox"] {
    display: none;
  }
  
  .default-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
  }
  
  .default-checkbox .checkmark {
    width: 20px;
    height: 20px;
    background-color: #FFFFFF;
    border: 1px solid #707070;
    border-radius: 5px;
    display: inline-block;
    margin-right: 8px;
    position: relative;
  }
  
  
  .default-checkbox .checkmark-error {
    width: 20px;
    height: 20px;
    background-color: #FFFFFF;
    border: 1px solid #E62000;
    border-radius: 5px;
    display: inline-block;
    margin-right: 8px;
    position: relative;
  }
  
  .default-checkbox input[type="checkbox"]:checked + .checkmark {
    border: 1px solid #51BA97;
    background-color: #51BA97;
  }
  
  .default-checkbox .checkmark::after {
    content: "";
    position: absolute;
    display: none;
    left: 5px;
    top: 4px;
    width: 6px; 
    height: 10px; 
    border-top: 1px solid #FFFFFF; 
    border-bottom: 1px solid #FFFFFF; 
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #FFFFFF;
  }
  
  .default-checkbox input[type="checkbox"]:checked + .checkmark::after {
    display: block;
  }
/*
 *   ラジオデザイン  Start
 * -------------------------------------------------------------------
 */


 /*
 *   SPモード  Start
 * -------------------------------------------------------------------
 */
 @media only screen and (max-width: 767px) {
  body{
    padding-top: 57px;
    font-size: 13px;
  }

 h2{
    font-size: 20px;
  }
  
  .comment{
    font-size: 12px;
  }
  .modal-block{
    width: calc(100vw - 32px);
    height: calc(100vh - 48px);
    display: flex;
    flex-direction: column; 
    opacity: 1;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }


  .modal-background{
      align-items: unset
  }

  .modal-title{
      border-bottom: 1px solid #EFEFEF; 
      height: 35px;
      margin: 0px 16px 24px 16px;
      align-items: baseline;
  }

  .modal-title-text{
      margin-left: 5px;
  }

  .modal-title-image{
      width: 18px;
      height: 18px;
      margin-top: 3px;
  }

  .modal-contents{
      margin: 24px 16px 16px 16px;
  }

  .modal-contents-title{
      margin-top: 0px;
  }


  .modal-scroll-block{
    flex-grow: 1; 
  }

  .modal-divider{
    height: 8px;
  }

  .modal-button{
    height: 130px
  }

  .modal-block .contents-change{
    margin-top: 16px;
    width: calc(100vw - 64px);
    height: 58px;
  }


  .modal-block .contents-change-link{
    max-width:  calc(100vw - 64px);
  }

  .modal-block .modal-cancel-button{
    margin-top: 8px;
  }

}

/*
 *   SPモード  End
 * -------------------------------------------------------------------
 */

 .H4-02 h4 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 20px;
  line-height: 30px;
}
.only_PC{
  display: block;
}
.only_SP {
  display: none;
}

@media only screen and (max-width: 767px) {
  .only_PC{
     display: none;
   }
   .only_SP {
     display: block;
   }
}
 /*
*  ログイン画面  Start PC
* -------------------------------------------------------------------
*/
.contents_login {
   padding: 26px 50px 40px 50px;
}
.breadcrumb a {
   /* color: #004ac3; */
   text-decoration: underline;
}
.login_main .breadcrumb {
  font-size: 12px;
  margin: 10px 0;
}
.login_main .H3-01 {
  margin: 0;
  padding: 17px 0;
}
.login_main .L-06 {
  margin: 0;
  padding: 0px 20%;
}
.login_child {
   width: 760px;
   margin: auto;
}
.login_context {
  width: 760px;
  margin: auto;
}
.login_ttl_left {
  padding-left: 17px;
}
.login_btn {
  display: flex;
   justify-content: center;
   margin: 20px 0 8px 0;
}
.login_main .password-forget-link a {
  background: url(../img/ico-arrow-double-right-green.png) no-repeat 225px center / 15px auto;
  width: 240px;
  text-decoration:unset;
  color: black;
}

.login_btn .Btn-CV {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 320px;
  height: 58px;
  border-radius: 500px;
  background: #34A078 url(../img/ico-arrow-double-right-white.png) no-repeat 27px center /15px auto;
  color: #FFFFFF;
  font-size: 18px;
  text-decoration:unset;
  margin: 0;
}
.topTitleLarge {
  margin: 10px 0;
  background: url(../img/t_large.gif) no-repeat;
  background-size: cover;
  width: 100%;
  height: 56px;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  padding-left: 20px;
}
.first_time_user {
  font-size: 16px;
  text-align: center;
}
.customer_ttc {
  display: flex;
  justify-content: center;
  margin-top: 17px;
}
.customer_ttc .btn01 {
  background: #FFFFFF url(../img/ico-arrow-double-right-green.png)   no-repeat 27px center / 15px auto;
}

 /*
*  ログイン画面  End PC
* -------------------------------------------------------------------
*/

 /*
*  ログイン画面 – エラー表示  Start PC
* -------------------------------------------------------------------
*/

.login_main .Text-error-Frame{
  margin: 20px 0 0;
}
.login_main .Column-full {
  padding: 30px 20px 30px 20px;
  margin-top: 20px;
}
.login_main .Column-full a {
  text-decoration: underline;
}
.login_main .Column-full .btn01 {
  text-decoration:unset
}

 /*
*  ログイン画面 – エラー表示  End PC
* -------------------------------------------------------------------
*/



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

/*
*  ログイン画面  Start SP
* -------------------------------------------------------------------
*/
  .login_child,.login_context{
     width: 100%;
  }
  .login_main .breadcrumb {
     display: none;
  }
  .H2-01 {
     margin: 0 -16px 0 -16px;
  
 }
 .contents_login {
  padding: 20px 0 40px 0;
 }
 .login_main .L-06 {
  margin: 0;
  padding: 0;
 }
 .login_main .H3-01 h3 {
  padding: 0 20%;
 }
 .login_main .L-06 .password-forget-link {
  justify-content:end;
 }
 .login_main .L-06 .H3-01 h3 {
  background: linear-gradient(to bottom, #FFFFFF 50%, #CCEAE0 50%);
 }
 
 /*
*  ログイン画面  End SP
* -------------------------------------------------------------------
*/

 /*
*  ログイン画面 – エラー表示  Start SP
* -------------------------------------------------------------------
*/
.login_main .Column-full {
  margin: 20px 0 0 0;
  font-size: 16px;
  padding: 15px;
}


  /*
*  ログイン画面 – エラー表示  End SP
* -------------------------------------------------------------------
*/


/*
*  パスワードを忘れた方 – パスワード再発行 メール送信完了  Start SP
* -------------------------------------------------------------------
*/
.login_main .flex {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: center;
}
.H4-02 h4 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 1.2rem;
  line-height: 30px;
}
/*
*  パスワードを忘れた方 – パスワード再発行 メール送信完了  End SP
* -------------------------------------------------------------------
*/
}
.login_main .H3-01 {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  width: auto;
  background:unset;
  height: auto;
}
.login_main .H3-01 h2 {
  margin: 40px 0 16px;
  padding: 0 25px;
  text-align: center;
  background: linear-gradient(to bottom, #FFFFFF 50%, #CCEAE0 50%);
}
.login_main .H2-01 {
  margin: 0;
  width: 100%;
  height: 60px;
  background: #E5F5EF;
  display: flex;
}
.login_main .H2-01 h1 {
  font-size: 24px;
  letter-spacing:normal;
}

@media only screen and (max-width: 767px) {
  .login_main .H2-01 {
     height: 60px;
     background: #E5F5EF;
     display: flex;
  }
  .login_main .H2-01 h1 {
     font-size: 20px;
  }
  .login_main .H3-01 {
     margin: 0;
     padding:0;
     display: flex;
     justify-content: center;
  }
  .login_main .H3-01 h2 {
     padding: 0 20%;
     text-align: center;
     background: linear-gradient(to bottom, #FFFFFF 80%, #CCEAE0 60%);
 
  }
  
}
.customer_ttc .btn01:hover {
  background: #E5F5EF url(../img/ico-arrow-double-right-green.png) no-repeat 27px center / 15px auto;
  opacity: 1;
}

.login_btn .Btn-CV:hover {
  opacity: 0.6;
  color: #FFFFFF;
}

.L-06 .login-form-group .error-input {
  border: 2px solid #E62000;
}
/* input[type="password"] {
  font-size: 30px; 
  letter-spacing: -1px; 
} */
@media only screen and (min-width: 768px) {
  .text-center {
     display: flex;
     align-items: center;
      flex-wrap: wrap;
      justify-content: center;
      font-size: 20px;
      line-height: 30px;
  }
}