@charset 'UTF-8';

.c-img {
  display: block;
  position: relative;
  img {
    display: block;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  &--contain {
    img {
      object-fit: contain;
    }
  }
  &--top {
    img {
      object-position: top;
    }
  }
}

.c-fw {
  width: 100%;
}

[rel~="js-lazy"] {
  opacity: 0;
  &:not(.initial) {
    transition: opacity 0.15s;
  }
  &.initial,
  &.loaded,
  &.error {
    opacity: 1;
  }
}

.c-lazybg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  &--top {
    background-position: center top;
  }
  &--contain {
    background-size: contain;
  }
}

/*-----------------------------------------------------------
Btn
------------------------------------------------------------*/
.c-btn01{
  border: solid 2px $color_heading;
  min-height: 43px;
  @include ffZKG;
  @include font(20, 20, .05, 500);
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: $color_white;
  padding: 9px;
  @include PC() {
    @include font(26, 26, .05, 700);
  }

  @include max-screen(374px){
    font-size: vw-convert(20px);
  }
  &__text{
    color: $color_heading;
    margin-top: -1px;
    @include SP() {
      margin-left: 10px;
    }
  }
  .icon{
    @include SP() {
      margin-left: -1px;
    }
    @include PC() {
      margin-left: 5px;
      position: relative;
      right: -4px;
    }
  }
}

.c-btn02{
  @include font(18, 20, .16, 700);
  @include ffZKG;
  width: 100%;
  min-height: 50px;
  border-radius: 50px;
  background-color: $color_heading;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 55px 7px;
  position: relative;
  @include SPSmall() {
    font-size: vw-convert(18px);
  }
  @include PC() {
    @include font(24, 26);
    min-height: 80px;
    padding: 7px 80px 7px;
  }
  &:after{
    content: '';
    width: 35px;
    height: 35px;
    background-image: url(../img/common/icon/ico_btn_blank.svg);
    background-size: cover;
    flex-shrink: 0;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    @include PC() {
      width: 54px;
      height: 54px;
      right: 20px;
      background-image: url(../img/common/icon/ico_btn_blank_pc.svg);
    }
  }
  &__text{
    color: $color_white;
    text-align: center;
    margin-top: -2px;
    display: block;
  }

  &--arrow{
    &:after{
      background-image: url(../img/common/icon/ico_btn_arrow.svg);
    }
    &--green{
      &:after{
        background-image: url(../img/common/icon/ico_btn_arrow_green.svg);
      }
    }
  }

  &--color02{
    background-color: $color_heading02;
    &:after{
      background-image: url(../img/common/icon/ico_btn_blank02.svg);
      @include PC() {
        background-image: url(../img/common/icon/ico_btn_blank02_pc.svg);
      }
    }
  }

  &--green{
    background-color: $color_green;
    .c-btn02{
      &__text{
        color: $color_body;
      }
    }
  }
}
.c-box-link-others{
  @include PC() {
    max-width: 557px;
    margin: 0 auto;
    .l-btn{
      &:nth-child(2){
        margin-top: 30px;
      }
    }
    .c-btn01{
      // @include font(26, 36, .05, 700);
      border-radius: 36px;
      min-height: 69px;
    }
    .icon{
      margin-left: 5px;
      position: relative;
      right: -4px;
    }
  }
  @include SP() {
    padding: 0 42px;
    .l-btn{
      &:nth-child(2){
        margin-top: 22px;
      }
      .c-btn01{
        @include SP() {
          font-weight: 500;
          font-size: 2rem;
          @include max-screen(374px){
            font-size: vw-convert(20px);
          }
        }
      }
      .icon{
        margin-left: -1px;
      }
    }
  }
}
/*-----------------------------------------------------------
Title
------------------------------------------------------------*/
.c-title01{
  &__jp{
    @include font(20, 22, .2, 500);
    display: table;
    @include PC() {
      @include font(36, 39);
    }
  }
  &__en{
    @include font(13, 18, .06, 400);
    color: $color_heading;
    border-top: 1px solid $color_heading;
    display: table;
    padding-right: 10px;
    margin-top: 5px;
    @include ffZKG;
    @include PC() {
      margin-top: 16px;
      @include font(23, 28);
    }
  }
}
.c-title02{
  &__jp{
    @include font(20, 30, .1);
    @include PC() {
      @include font(36, 60);
    }

  }
}

/*-----------------------------------------------------------
Blog
------------------------------------------------------------*/
.c-list-blog{
  ul{
    display: flex;
    flex-wrap: wrap;
    margin: -12px 0 0 -12px;
    @include PC() {
      margin: -20px 0 0 -20px;
    }
  }
  &__item{
    width: calc(50% - 12px);
    margin: 12px 0 0 12px;
    @include PC() {
      width: calc(50% - 20px);
      margin: 20px 0 0 20px;
    }
  }
  .img{
    @include aspect-ratio(188, 188);
    img{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .title{
    @include font(16, 30, .03, 400);
    @include multiLineEllipsis(2);
    @include ffSG;
    margin-top: 3px;
    @include PC() {
      @include font(18, 28);
      margin-top: 6px;
    }
  }
  .text{
    margin-top: 10px;
    @include font(13, 20, .03, 400);
    @include multiLineEllipsis(4);
    @include PC() {
      @include multiLineEllipsis(3);
      margin-top: 6px;
    }
  }
}

/*-----------------------------------------------------------
Title sub page
------------------------------------------------------------*/
.sec-c-ttl{
  .inner{
    @include PC() {
      max-width: 1220px;
    }
    @include SP() {
      padding: 0 20px;
    }
  }
  .c-ttl-jp{
    span{
      display: inline-block;
      position: relative;
      border-bottom: 1px solid #8DCFBC;
      @include SP() {
        @include font(28, 40, .13, 500);
        padding-bottom:4px;
        width: 182px;
      }
      @include PC() {
        @include font(36, 39, .2, 500);
        width: 278px;
        padding-bottom: 16px;
      }
    }
    small{
      @include font(16);
      padding-left: 5px;
    }
  }
  .c-txt-en{
    color: #8DCFBC;
    @include ffZKG;
    @include SP() {
      @include font(13, 16, .06, 400);
      margin-top: 1px;
    }
    @include PC() {
      margin-top: 1px;
      @include font(23, 25, .06, 400);
    }
  }
}

/*-----------------------------------------------------------
Button bottom about
------------------------------------------------------------*/
.c-btns-bottom{
  a{
    width: 100%;
    min-height: 50px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 50px 7px 63px;
    position: relative;
    @include ffZKG;
    @include font(18, 20, .16, 500);
    @include PC{
      min-height: 76px;
      padding: 7px 55px 7px 64px;
      @include font(26, 32, .16, 700);
    }
    @include screen(1024px, 1120px){
      padding: 7px 55px 7px 25px;
      @include font(22, 28);
    }
    @include max-screen(429px){
      padding: 7px 40px 7px 15px;
      @include font(16, 20, .05, 500);
    }
    &:after{
      content: '';
      width: 35px;
      height: 35px;
      background-size: cover;
      flex-shrink: 0;
      position: absolute;
      right: 13px;
      top: 50%;
      transform: translate3d(0, -50%, 0);
      @include PC() {
        width: 52px;
        height: 52px;
        right: 21px;
      }
      @include max-screen(429px){
        width: 30px;
        height: 30px;
        right: 10px;
      }
    }
    &.bg-default{
      color: #fff;
      background-color: #8ECFBC;
      &:after{
        background-image: url(../img/common/icon/ico_btns_bottom_1.svg);
      }
    }
    &.bg-dark{
      color: #fff;
      background: #66A793;
      &:after{
        background-image: url(../img/common/icon/ico_btns_bottom_2.svg);
      }
    }
    &.bg-light{
      color: #404041;
      background: #C9E1A9;
      &:after{
        background-image: url(../img/common/icon/ico_btns_bottom_3.svg);
      }
    }
    span{
      margin-top: -2px;
    }
  }

  .oneCol{
    li{
      margin-bottom: 19px;
      width: 100%;
      &:last-child{
        margin-bottom: 0;
      }

    }
  }
  .twoCol{
    max-width: 1190px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    @include SP{
      padding: 0 29px;
    }
    li{
      @include SP{
        margin-bottom: 21px;
        width: 100%;
        &:last-child{
          margin-bottom: 0;
        }
      }
      @include PC{
        margin-bottom: 43px;
        width: calc(50% - 8px);
      }
    }
  }
}

/*-----------------------------------------------------------
Table
------------------------------------------------------------*/
.c-list-details{
  @include SP() {
    padding: 0 6px;
  }
  &__box{
    border: 1px solid #707070;
  }

  &__item{
    display: flex;
    .ttl, .txt{
     border-bottom: 1px solid #707070;
    }
    .ttl{
      width: 200px;
      border-right: 1px solid #707070;
      background-color: #F8F7F7;
      @include font(21, 32, .03, 400);
      @include SP() {
        @include font(13, 20, 0);
      }
    }
    .txt{
      flex: 1;
      @include font(20, 32, .03, 400);
      @include SP() {
        @include font(13, 20, 0);
      }
    }

    &:last-child{
      .ttl, .txt{
        border-bottom: 0;
      }
    }
  }

}