@charset "UTF-8";


/*
base
-------------------------------- */

#content #base{

  padding-top: 50px;
  p{
    font-weight: bold;
    color: #333;
  }

  .uList{
    margin-top: 50px;
    gap: 20px;

    @media screen and
    (max-width : 767px) {
      margin-top: 6vw;
    }

    > li{
      text-align: center;
      padding: 0 20px 20px 20px;

      @media 
      (max-width : 767px) {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 4vw;

      }

      &.au{
        .explain{
          > dt{
            color: #E43C00;
          }
        }
      }
      &.docomo{
        .explain{
          > dt{
            color: #C2001C;
          }
        }
      }
      &.softbank{
        .explain{
          > dt{
            color: #8E8E8F;
          }
        }
      }

      .image{
        margin-top: -35px;
        text-align: center;
        margin-bottom: 22px;

        @media 
        (max-width : 767px) {
          margin-top: 0;
          margin-bottom: 0;
          width: 16vw;
        }

        img{
          
          & + img{
            @media screen and
            (max-width : 767px) { 
              margin-top: 2vw;
            }
          }
        }
      }

      dl.explain{

        @media screen and
        (max-width : 767px) {
          flex-grow: 1;
        }

        > dt{
          font-size: 1.5rem;
          font-weight: 700;
          color: #00A2E6;
          text-align: center;
          min-height: 2.4em;
          display: flex;
          align-items: center;
          justify-content: center;

          @media screen and
          (max-width : 767px) {
            font-size: 1.375rem;
            min-height: revert;
          }
        }
       > dd{
          p.text{
            color: #000;
            margin: 0;
          }

          dl{
            margin-top: 15px;

            > dt{
              font-size: 0.875rem;
              font-weight: 700;
              background-color: #00A2E6;
              color: #fff;
              line-height: 1.2;
              padding: 5px 10px;
            }
            > dd{
              ul.iconList{
                margin-top: 14px;
                justify-content: center;
                gap: 8px;
              }
              p.text{
                margin-top: 14px;
                color: #000;
              }
            }
          }
        }
      }
    }
  }
}

#content{

  img{
    max-width: 100%;
    height: auto;
  }

  /* --------------------------------
     □ section
  -------------------------------- */
  .section {
    
    & + .section {
      margin-top: 56px;
    }
  }

  .subsection {
    & + .subsection {
      margin-top:24px;
    }
  }

  .bg_lightblue{
    background-color: #e6f1f9;
  }
  
  /* --------------------------------
    □ text
  -------------------------------- */
  .text{
    line-height: 1.75;

    &._m{
        font-size: 1.125rem;
    }

    &._s{
        font-size: 0.9375rem;
    }

    &._ss{
        font-size: 0.875rem;
    }

    &._center{
        text-align: center;
    }

    &._bold,
    &.bold{
        font-weight: 700;
    }

    & + .text{
        margin-top: 16px;
    }

    & + .image{
        margin-top: 23px;
    }

  }

  * + .text{
    margin-top: 24px;

    @media 
    (max-width : 767px) {
      margin-top: 4vw;
    }
  }

  /* --------------------------------
     □ title
  -------------------------------- */
  .title {
      font-weight: 700;
      line-height: 1.2;

      &._lv1 {
          font-size: 1.625rem;
          background: #00A2E6;
          color: #fff;
          margin: 0px;
          padding: 14px 20px;

          @media 
          (max-width : 767px) {
            font-size: 1.25rem;
          }
      }

      &._lv2 {
        font-size: 1.375rem;
        color: #00A2E6;
        border: none;
        border-bottom: 3px solid #00A2E6;
        border-radius: 0;

        margin: 0px;
        padding: 0 0 12px 0;

        @media 
        (max-width : 767px) {
          font-size: 1.125rem;
        }

        & + * {
          margin-top: 23px;
        }
      }

      &._flex {
        display: flex;
        align-items: center;
        gap: 0 10px;
        @media 
        (max-width : 767px) {
          gap: 0 6px;
        }
      }

      & + * {
        margin-top: 28px;
        @media 
        (max-width : 767px) {
          margin-top: 6vw;
        }
      }
  }

/* --------------------------------
   □ rice
-------------------------------- */
.rice{
  &._s{
    > li{
      font-size: 0.875rem;
    }
  }
}

/* --------------------------------
   □ sideImageBox
-------------------------------- */

.sideImageBox{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  gap:0 48px;
}


.sideImageBox .explain{
  width: 50.247557003%;
}

.sideImageBox .image{
  img{
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;

    & + span.image{
        display: block;
        margin-right: 37px;
        margin-top: 37px;
    }
  }
}

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

.sideImageBox.reverse .image img{

}

@media only screen and
(max-width : 767px) {
  
  .sideImageBox{
      display: block;
  }


  .sideImageBox .explain{
      width: auto;
  }

  .sideImageBox .image img,
  .sideImageBox.reverse .image img{
      max-width: 100%;
      width: auto;
      margin-right: 0;
      margin-left: 0;
  }

  .sideImageBox.reverse{
  }

  .sideImageBox .explain + .image,
  .sideImageBox .image + .explain{
      margin-top: 24px;
  }
      

}

    /* ◇ .flexbox
  -------------------------------- */
  .flex_box {
    display:flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .flex_box.nowrap {
    flex-wrap: nowrap;
  }
  .flex_box.between {
    justify-content: space-between;
  }
  .flex_box.around {
    justify-content: space-around;
  }
  .flex_box.jc_start {
    justify-content: flex-start;
  }
  .flex_box.jc_center {
    justify-content: center;
  }
  .flex_box.align_start {
    align-items: flex-start;
  }
  .flex_box.column {
    flex-direction: column;
  }
  .flex_box.col2 > * {
    width: 48%;
  }
  .flex_box.col3 > * {
    width: 32%;
  }

  .flex_box.gap32 {
    gap: 32px;
  }
  .flex_box.colgap32 {
    column-gap: 32px;
  }

  .flex_box.flex1 > * {
    flex: 1;
  }

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

    .flex_box.sp_no_flex {
        display:block;
    }

    .flex_box.col2.sp_no_flex > * {
        width: auto;
    }
    .flex_box.col3.sp_no_flex > * {
        width: auto;
    }
    .flex_box.sp_column {
        flex-direction: column;
    }
    .flex_box.sp_reverse {
        flex-direction: column-reverse;
    }
    .flex_box.sp_column > *,
    .flex_box.sp_reverse > * {
        width: 100%!important;
        max-width: 100%!important;
    }

    .flex_box.sp_gap32 {
        gap: 32px;
    }
    .flex_box.sp_gap24 {
        gap: 24px;
    }
  }
  
  /* ◇ .grid_box
  -------------------------------- */
  .grid_box {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 1.02675585284%
  }
  .grid_box.col1 {
    grid-template-columns: 1fr;
  }
  .grid_box.col2 {
    grid-template-columns: 1fr 1fr;
    gap: 40px 32px;

    @media screen and
    (max-width : 767px) {
        gap: 4vw 3.2vw;
    }
  }
  .grid_box.col3 {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px 32px;
  }


  .grid_box{
    &.gap8 {
        gap: 8px;
    }
    &.gap20 {
        gap: 20px 20px;
    }
    &.gap32 {
        gap: 32px;
    }
    &.gap40 {
        gap: 40px;
    }
    &.colgap32 {
        column-gap: 32px;
    }
  }

  * + .grid_box.content {
    margin-top: 34px;
  }

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

    .grid_box.pclimit_col1 {
        grid-template-columns: 1fr;
    }
    
  }
  @media only screen and
  (max-width : 999px) {

    .grid_box.md_col1 {
        grid-template-columns: 1fr;
    }
    
  }

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

    .grid_box.sp_col1 {
        grid-template-columns: 1fr;
    }
    
  }

}