@charset "UTF-8";

/*
common
---------------------------------------------------------------- */

#content{
  --black: #333;
  --red: #E60012;
  --blue: #00A2E6;
  --lightblue: #eaf1f7;

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

  /* --------------------------------
     □ wideContent
  -------------------------------- */
  /* 横幅 */
  .wideContent{
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    @media (max-width: 1300px) and (min-width: 960px) {
      margin-left: auto;
      margin-right: auto;
    }

    @media (max-width: 959px) {
      padding-left: 15px;
      padding-right: 15px;
    }
  }
  /* --------------------------------
     □ section
  -------------------------------- */
  .section {
    & + .section {
      margin-top: 56px;
    }
  }

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

  /* 背景色 */
  .bg_lightblue{
    background-color: var(--lightblue);
  }
  
  .c_blue{
    color: var(--blue)!important;
  }
  .c_red{
    color: var(--red)!important;
  }
  /* --------------------------------
    □ 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;
    }
  }


  .accordion{
    cursor: pointer;
    position: relative;
    .toggle {
        display: inline-block;
        width: 20px;
        height: 20px;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
    }
    .toggle::before, .toggle::after {
        content: "";
        width: 100%;
        height: 2px;
        background: #333;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transition: .2s;
    }
    .toggle::before {
        transform: translate(-50%, -50%) rotate(90deg);
        -webkit-transform: translate(-50%, -50%) rotate(90deg);
        -ms-transform: translate(-50%, -50%) rotate(90deg);
    }
    
    &.open .toggle::before {
      transform: translate(-50%, -50%) rotate(0deg);
      -webkit-transform: translate(-50%, -50%) rotate(0deg);
      -ms-transform: translate(-50%, -50%) rotate(0deg);
    }
  }

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

      &._lv1 {
          font-size: 1.625rem;
          background: var(--blue);
          color: #fff;
          margin: 0px;
          padding: 14px 20px;
          border: none;
          border-radius: 0;

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

          .toggle::before, .toggle::after {
            background: #fff;
        }
      }

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

        &._flex {

          > span {
            flex-grow: 1;
          }
        }
      }

      &.n_lv1_old {
        font-size: 2.375rem;
        color: var(--blue);

        margin-top: 0;
        background: none;
        border: none;
        border-radius: 0;
        text-align: center;

        padding: 0;

        > span {
          display: inline;
          background: linear-gradient(transparent 60%, #FCD13E 0%);
        }

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

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

      &.n_lv2{
      border-radius: 0;
        font-size: 1.325rem;
        padding:0;
        border: none;
        border-bottom: 3px solid #00A2E6;

        > span{
          position: relative;
          width: 50%;
          background: #00A2E6;
          color: #fff;
          margin: 0px;
          padding: 14px 20px;

          @media screen and (max-width: 767px) {
            width: calc(100% - 40px);
          }

          &::before{
            content: "";
            position: absolute;
            top: 1px;
            right: -40px;
            width: 40px;
            height: 100%;
            clip-path: polygon(0 0, 0% 100%, 100% 100%);
            background: #00A2E6;
          }

          .new{
            background: var(--red);
            color: #fff;
            font-size: 0.8125rem;
            font-weight: normal;
            margin-left: 5px;
            padding: 2px 4px;
            border-radius: 4px;
          }
        }
        ._flex {
          display: flex;
          align-items: center;
          gap: 0 10px;
          @media 
          (max-width : 767px) {
            gap: 0 6px;
          }

          > em {
            flex-grow: 1;
            color: #fff;
          }
        }
      }

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

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

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

        &._border {
          border: 2px solid #afa8a8;
          background-color: #fff;
          border-radius: 8px;
          padding: 8px;

          &._rommy {
            padding: 16px;
          }

          img{
            border:1px solid var(--lightblue);
            border-radius: 60px;
          }

          .toggle::before, .toggle::after {
              background-color: #afa8a8;
          }

        }

        &._noborder {
          padding-bottom: 0;
          border: none;
            & + * {
              margin-top: 38px;

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

        &._multiple{
          display: flex;
          align-items: center;
          flex-direction: column;
        }

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

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

        &._sp_column {
          @media (max-width: 767px) {
            flex-direction: column;
            gap: 10px 0;
          }
        }
      }

      &._center {
        text-align: center;
      }

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

  /* textLink
  -------------------------------- */
  .textLink{

    &._center{
      text-align: center;
    }

    a{
      display: inline-block;
      position: relative;
      padding-right: 0.8em;
      font-weight: 700;
      color: var(--blue)!important;
			text-decoration: underline;

      &::before,
      &::after {
        content: "";
        position: absolute;
        top: 45%;
        right: 0;
        width: 0.5em;
        height: 2px;
        border-radius: 9999px;
        background-color: var(--blue);
        transform-origin: calc(100% - 0.5px) 50%;
        transition: all 0.3s ease;
      }
      
      &:hover{
        color: #028cc7!important;
        &::before,
        &::after {
          right: -2px;
        }
      }

      &::before {
        transform: rotate(45deg);
      }
      
      &::after {
        transform: rotate(-45deg);
      }
    }
  }
  /* --------------------------------
    □ buttonStyle
  -------------------------------- */
.buttonStyle{
  @media screen and (max-width: 767px) {
    text-align: center;
  }

  > a{
    display: inline-block;
    background: var(--blue);
    color: #fff;
    text-decoration: none;
    padding: 20px 20px;
    border-radius: 42px;
    margin-inline: auto;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.05em;

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

    > span{
      display: inline-block;
      position: relative;
      padding-right: 49px;

      &::before{
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0%;
        width: 36px;
        height: 36px;
        background: url(../img/common/icon/circle_arrow_blue.svg) no-repeat center center / contain;
        transition: all 0.3s ease;

        @media screen and (max-width: 767px) {
          width: 24px;
          height: 24px;
        }
      }
    }
    
    &:hover{
      background-color: #0898D4;
      > span{
        &::before{
          right: -1.5%;
        }
      }
    }
  }

  &._single{
    > a{
      width: 460px;

      @media (max-width: 767px) {
        width: 100%;
      }
    }
  }

  &._inBlock{
    display: block;
    > a{
      > span{
        display: block;
        padding-right: 0;
        @media (max-width: 767px) {
          padding-right: 42px;
        }
      }
    }
  }

  &._center{
    text-align: center;
  }

  &._left{
    > a{
      margin-inline: 0;
    }
  }

  &._orange{
    > a{
      background-color: #EB6009;
      > span{
        &::before{
          background-image: url(../img/common/icon/circle_arrow_orange.svg);
        }
      }
      &:hover{
        background-color: #D95C0E;
      }
    }
  }

  &._white{
    > a{
      background-color: #fff;
      color: var(--blue);
      border:2px solid var(--blue);
      > span{
        &::before{
          background-image: url(../img/common/icon/circle_arrow_white.svg);
          background-size: 26px auto;
          @media screen and (max-width: 767px) {
            background-size: 20px auto;
          }
        }
      }
      &:hover{
        background-color: var(--lightblue);
      }
    }
  }

  &._slim{
    > a{
      padding: 10px 20px;
    }
  }
}

* + p.buttonStyle._single{
  margin-top: 48px;
}


/* --------------------------------
   □ rice
-------------------------------- */
.rice{
  > li{
    @media (max-width: 767px) {
      font-size: 0.875rem;
    }
  }
  &._s{
    > li{
      font-size: 0.875rem;
    }
  }

}


/* --------------------------------
   □ pageNavi
-------------------------------- */
ul.pageNavi.col3{
  gap:25px 25px!important;
  padding:70px 0;
  justify-content: center;
  margin-top: 0;
  @media (max-width: 767px) {
    gap: 2.5vw 2.5vw!important;
    padding: 6vw 0;
  }
  >li{
    width: calc(100% / 3 - 25px);
    @media (max-width: 767px) {
      width: calc(100% / 2 - 2.5vw);
    }
    >a{
      display: block;
      border:1px solid #000;
      padding: 22px 43px 22px 20px;
      background:#fff url(../img/common/icon/down_arrow.svg) no-repeat 95% 50%;
      border-radius: 12px;
      box-sizing: border-box;

      color:#000;
      text-decoration: none;
      font-weight: 700;
      font-size: 1.125rem;
      line-height: 1.4;
      letter-spacing: 0.05em;
      text-align: center;
      transition: all 0.3s ease;

      @media (max-width: 767px) {
        padding: 2.5vw 4.3vw 2.5vw 2vw;
        font-size: 0.8rem;
        background-size: 0.8em auto;
      }

      &:hover{
        background-color: #efefef;
        background-position: 95% 54%;
      }
    }
  }
}

/* --------------------------------
   □ tabInterface
-------------------------------- */
.tabInterface{
  ul.tab{ 
    gap:0 20px;
    border-bottom: 3px solid var(--blue);

    @media screen and (max-width: 767px) {
      gap: 0 2.5vw;
    }

    > li{
      margin-bottom: -3px;
      width: auto;
      background: transparent;
      padding: 0;
      border: 0;
      > a{
        border-radius: 12px 12px 0 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--blue);
        border:3px solid var(--blue);
        padding: 18px 5px;
        font-weight: 700;
        font-size: 1.25rem;
        background: #fff;
        text-decoration: none;
        transition: all 0.3s ease;
        height: 100%;

        &:hover{
          background: var(--lightblue);
        }
        @media (max-width: 767px) {
          font-size: 1.125rem;
          flex-direction: column;
        }

        .icon{
          margin-left: 8px;
          display: flex;
          align-items: center;
          gap: 0 3px;

          img{
            width: 34px;
            height: 34px;
            @media (max-width: 767px) {
              width: 24px;
              height: 24px;
            }
          }

          :hover{
            opacity: 1;
          }
        }
      }

      &.active{
        > a{
          background: var(--blue);
          color: #fff;
        }
      }
    }
  }
}

/* --------------------------------
   □ tableStyle
-------------------------------- */
table.tableStyle{
  width: 100%;
  border-collapse: collapse;
  border: 2px solid var(--blue);

  th,td{
    padding: 10px 20px;
    border: 2px solid var(--blue);
    border-left-style: dotted;
    border-right-style: dotted;
    vertical-align: middle;
  }

  thead{
    th,td{
      border-color: #fff;
    }
    th{
      background: var(--blue);
      color: #fff;
      font-weight: 700;
      line-height: 1.4;
    }
  }

  tbody{
    background: #fff;
  }
}

/* --------------------------------
   □ frame
-------------------------------- */
.frame {
  border-radius: 8px;
  padding: 35px;
  
  @media screen and
  (max-width : 767px) {
    padding: 20px;
  }
  
  &._blue{
    background-color: var(--blue);
    color: #fff;
  }
}


/* --------------------------------
   □ imageList
-------------------------------- */
.imageList{
  > li{
    > figure{
      > p.image{
        > img{
          max-width: 100%;
          height: auto;
        }
        text-align: center;
      }

      > figcaption{
        margin-top: 13px;
        > dl{
          > dt{
            font-weight: 700;
            text-align: center;
            font-size: 1.125rem;
            color: var(--blue);
          }
          > dd{
            margin-top: 17px;
            text-align: center;
          }
        }
      }
    }
  }
}

/* --------------------------------
   □ 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;
    }

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

}