@charset "UTF-8";

/*-------  toitoytoi  -------*/
#toitoytoi {
  background: #f2eee7;
  container-type: inline-size;
  .page-ttl {
    padding: 0;
  }
  .lead {
    margin: 1.5rem 0 0.5rem 0;
    color: #f18f01;
    font-size: 1.3rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.06em;
    text-indent: 0.7em;
  }
  .text {
    width: 85.33%;
    margin: 0 auto 4rem auto;
    font-size: calc( 25 / 16 * 0.6rem);
    line-height: 1.8;
  }
  .area {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0 0 13.5cqw 0;
    padding-top: 40cqw;
    background: #f2eee7;
    .img {
      position: absolute;      
      top: -41cqw;
      width: 95.33%;
      overflow: hidden;
      z-index: 3;
    }
    .content {
      position: relative;
      width: 93.33%;
      padding: 19.5cqw 2rem 10cqw 3rem;
      color: #fff;
      z-index: 2;
      box-sizing: border-box;
      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        content: '';
      }
      &::after {
        position: absolute;
        z-index: 3;
        content: '';
      }
    }
    .sec-ttl {
      position: relative;
      margin-bottom: 1.3rem;
      z-index: 4;
    }
    .description {      
      font-size: calc( 25 / 16 * 0.6rem);
      line-height: 1.8;
    }
    &:nth-of-type(odd) {
      .img {        
        right: -1.8rem;
        border-radius: calc( 40 / 16 * 0.6rem) 0 0 calc( 40 / 16 * 0.6rem);
      }
      .content {
        &::before {
          border-radius: 0 calc( 40 / 16 * 0.6rem) calc( 40 / 16 * 0.6rem) 0;  
        }        
      }
    }
    &:nth-of-type(even) {      
      .img {
        left: -1.8rem;
        border-radius: 0 calc( 40 / 16 * 0.6rem) calc( 40 / 16 * 0.6rem) 0;
      }
      .content {
        margin-left: auto;
        padding-left: 2.5rem;
        padding-right: 3rem;
        &::before {
          border-radius: calc( 40 / 16 * 0.6rem) 0 0 calc( 40 / 16 * 0.6rem);  
        }        
      }
    }
  }
  #kitchen {
    .content {
      &::before {
        background-color: #f18f01;  
      }      
      &::after {
        right: -1.8rem;
        bottom: -1.8rem;
        aspect-ratio: 184/172;
        width: 7rem;
        background: url(../img/toitoytoi/icon_kitchen.png) no-repeat center center/contain;
      }
    }
  }
  #square {
    .content {
      &::before {
        background-color: #ea641b;
      }
      &::after {
        width: 7.2rem;
        aspect-ratio: 192/120;
        left: -2rem;
        bottom: -2.3rem;
        background: url(../img/toitoytoi/icon_square.png) no-repeat center center/contain;
      }
    }
  }
  #box {
    margin-bottom: 0;
    .content {
      &::before {
        background-color: #d73026;
      }
      &::after {
        width: 7rem;
        aspect-ratio: 188/101;
        bottom: -1.7rem;
        right: -.6rem;
        background: url(../img/toitoytoi/icon_box.png) no-repeat center center/contain;
      }
    }
  }
  .slider-wrap {
    position: relative;
    overflow: hidden;
    margin-top: -1rem;
    margin-bottom: 5rem;
    padding-top: 4.3rem;
    &::before {
      position: absolute;
      top: 0;
      left: -4px;
      display: block;
      width: 100%;
      height: calc(100% - 8px);
      border: 4px solid #d73026;
      pointer-events: none;
      border-radius: calc( 40 / 16 * 0.6rem);      
      background-color: #fff;
      content: '';
    }
  }
  .slider {
    position: relative;
    margin-bottom: 3.2rem;
    counter-increment: count;
    &::before {
      position: absolute;
      top: -1.1rem;
      left: 1.5rem;
      width: calc( 117 / 16 * 0.6rem);
      height: calc( 59 / 16 * 0.6rem);
      padding-top: .2rem;
      color: #fff;
      font-size: calc( 28 / 16 * 0.6rem);
      font-family: "Dela Gothic One", sans-serif;
      text-align: center;
      background: url(../img/toitoytoi/bg_counter.png) no-repeat center center/contain;
      pointer-events: none;
      z-index: 10;
      box-sizing: border-box;
      content: "0" counter(count);
    }
    .slider-list {      
      width: 85.33%;
      margin: 0 auto;
      border-radius: calc( 24 / 16 * 0.6rem);
      overflow: hidden;
    }
    .swiper-button-prev,
    .swiper-button-next {
      position: absolute;
      top: 28vw;
      width: calc( 24 / 16 * 0.6rem);
      height: calc( 37 / 16 * 0.6rem);
      border: none;
      svg {
        display: none;
      }
    }
    .swiper-button-prev {      
      left: 0.5rem;
      background: url(../img/toitoytoi/btn_prev.png) no-repeat center center/contain;
    }
    .swiper-button-next {
      right: 0.5rem;
      background: url(../img/toitoytoi/btn_next.png) no-repeat center center/contain;
    }
    .title {
      width: 85.33%;
      margin: 0.8rem auto 0 auto;
      font-size: calc( 22 / 16 * 0.6rem);
      line-height: 1.5;
    }
  }
}
@media screen and (min-width: 769px) {
  #toitoytoi {
    .lead {
      font-size: 1.7rem;
    }
    #kitchen::before { top: 17rem; }
    #square::before { top: 17rem; left: 4.8rem; }
    #box::before { top: 16.5rem; }
    .slider {
      .swiper-button-prev, .swiper-button-next {
        top: calc( 210 / 16 * 0.6rem);
      }
    } 
  }
}

/*-------  introduction  -------*/
#introduction{
  padding-bottom: 3.5rem;
  background: #f8dfbc;
}
#introduction h2{
  width: 100%;
  height: 6rem;
  padding-top: 2rem;
  margin-bottom: 3rem;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  position: relative;
  background: url(../img/top/title_introduction01.png) top center no-repeat;
  background-size: contain;
}
#introduction h2 .ttl-en{
  margin-bottom: -0.25rem;
  color: #fff2c0;
  font-size: 1rem;
  font-family: "DM Sans", sans-serif;
  font-weight: 900;
  display: block;
}
#introduction .list{
  padding: 0 .8rem;
}
#introduction .list p:first-child{
  margin-bottom: 1.25rem;
}
#introduction .sit-list{
  width: 82.9%;
  margin: 1.25rem auto 1.25rem;
  padding: 1.25rem;
  background: #f18f01;
  border-radius: 1.25rem;
}
#introduction .sit-list .ttl{
  margin-bottom: .625rem;
  text-align: center;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
}
#introduction .sit-list ul{
  display: inline-flex;
}
#introduction .sit-list li:first-child{
  margin-right: .7rem;
}
@media screen and (min-width: 769px) {
  #introduction h2{
    height: 9rem;
    padding-top: 2.7rem;
  }
}