#top{
  margin-top: 4.25rem;
  & .c-inner{
    padding: 0.625rem 0 6.25rem;
  }
  & .c-btn{
    max-width: 21.25rem;
    margin: 2.5rem auto 0;
  }
}
@media screen and (max-width: 768px) {
  #top{
    margin-top: 6.656rem;
    & .c-inner{
      padding: 1.28rem 0 9.6rem;
    }
    & .c-btn {
      max-width: 38.4rem;
      margin: 3.84rem auto 0;
      font-size: 2.048rem;
    }
  }
}


.fv{
  background-image: url(../img/top/fv_background.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 39.6875rem; 
  & .wrap01{
    max-width: 27.5rem !important; 
    width: 100% !important;
  }
  & .title{
    font-size: 2.75rem; 
    letter-spacing: 0.11em;
    font-weight: 800;
    text-shadow: 0.125rem 0.1875rem 0.3125rem rgba(116, 116, 116, 0.25);
    line-height: 1.4;
    margin-bottom: 1.25rem; 
    & .big{
      font-size: 4.0625rem; 
      color: white;
      text-shadow: none;
      line-height: 1;
      letter-spacing: 0;
      position: relative;
      display: inline-block;
      z-index: 10;
      &::after{
        position: absolute;
        background: var(--mainBlue);
        z-index: -1;
        content: "";
        right: -0.5rem;
        left: -0.5rem;
        top: 0;
        bottom: -0.65rem;
      }
    }
    & .middle{
      font-size: 2.875rem;
    }
    & .small{
      font-size: 1.875rem; 
      letter-spacing: 0.1em;
    }
  }
  & .text01{
    text-align: center;
    font-size: 1.25rem; 
    letter-spacing: 0;
    margin-bottom: 0.25rem;
  }
  & .img01{
    margin-bottom: 1.875rem; 
    width: 27.5rem;
  }
  & .c-btn{
    margin: 0 auto 0 0 !important;
    max-width: 27.5rem !important; 
    width: 100% !important;
    text-align: center;
    font-size: 1.375rem;
  }
}
@media (max-width:768px) {
  .fv {
    background-image: url(../img/top/fv_background-sp.png);
    background-position: bottom;
    align-items: start;
    height: 64rem;
    padding: 5rem 0 0;
    & .inner{
      width: 92%;
      max-width: 100%;
      margin: 0 auto;
    }
      & .wrap01 {
        max-width: 56.32rem !important; 
        width: 100% !important;
      }
    & .title {
      font-size: 3.328rem; 
      letter-spacing: 0.1em;
      text-shadow: 0.256rem 0.384rem 0.64rem rgba(116, 116, 116, 0.25); 
      line-height: 1.4;
      margin-bottom: 1.92rem; 
        & .big {
          font-size: 5.12rem;
          &::after {
            right: -0.5rem;
            left: -0.5rem;
            top: 0;
            bottom: -0.65rem;
          }
        }
      & .middle {
        font-size: 3.584rem; 
      }
      & .small {
        font-size: 3.072rem; 
        line-height: 1.3;
        display: inline-block;
        margin-top: 1rem;
      }
    }
    & .text01 {
      font-size: 2.048rem; 
      margin-bottom: 0.5rem;
    }
    & .img01 {
      margin-bottom: 1.92rem; 
      width: 100%;
    }
    & .c-btn {
      max-width: 100% !important;
      font-size: 2.304rem;
      padding: 1.92rem 2.56rem !important; 
      &::after {
        width: 3.2rem; 
        height: 3.2rem;
        right: 2.56rem; 
      }
    }
  }
}


/* ゴーストレストランとは */
.section01{
  background-image: url(../img/top/section01_background.png);
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  & .img01{
    max-width: 66.25rem;
    width: 100%;
    margin: 0 auto;
  }
}
@media (max-width:768px) {
  .section01 {  
    & .img01 {
      max-width: 100%;
    }
  }
}


.brandSlider{
  padding: 2.5rem 0;
  & .swiper-slide{
    width: 12.5rem !important;
    height: 8rem !important;
    border-radius: 0.625rem;
    border: 1px solid var(--shadowBlue);
    overflow: hidden;
    & img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }
}
.swiper-wrapper {
  transition-timing-function: linear;
}
@media (max-width:768px) {
  .brandSlider {
    padding: 0 0 3.84rem;
    & .swiper-slide {
      width: 16.64rem !important;
      height: 11rem !important;
      border-radius: 1.024rem;
      border: 1px solid var(--shadowBlue);
    }
  }
}


/* X Kitchen ブランド */
@media (max-width:768px) {
  .section02{
    & .p-list01{
      width: 95%;
      margin: 0 auto;
    }
  }
}


/* ゴーストレストラン 加盟店インタビュー */
.section03{
  background: var(--shadowBlue);
  overflow: hidden;
  & .interviewSwier{
    margin-bottom: 5rem;
  }
  & .item01{
    width: 25.625rem !important;
    border-radius: 0.625rem;
    background: white;
    overflow: hidden;
  }
  & .wrap03 {
    gap: 0.375rem;
  }
  & .heading01{
    font-size: 1.125rem;
    margin-bottom: 1rem;
  }
  & .text01{
    font-size: 1rem;
    color: white;
    background: var(--mainBlue);
    border-radius: 0.3125rem;
    padding: 0.3125rem 0.75rem 0.375rem;
  }
  & .text02 {
    font-size: 1rem;
    letter-spacing: 0.05em;
    line-height: 1;
  }
  & .link01{
    padding: 1rem 0.9rem;
    color: var(--mainBlue);
  }
  & iframe{
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
  }
  & .swiper{
    overflow: visible;
  }
  & .img02 {
    width: 1.125rem;
  }
  & .swiper-button-prev,
  & .swiper-button-next {
    width: 2.8125rem !important;
    height: 2.8125rem !important;
  }
  & .swiper-button-prev {
    top: auto !important;
    bottom: -3.75rem;
    left: auto !important;
    right: 3.4375rem !important;
  }
  & .swiper-button-next {
    top: auto !important;
    bottom: -3.75rem;
    right: 0 !important;
  }
  & .swiper-button-next::after,
  & .swiper-button-prev::after {
    content: "" !important;
    background-image: url(../img/top/section03_icon01.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 2.8125rem !important;
    height: 2.8125rem !important;
  }
  & .swiper-button-prev::after {
    transform: rotate(180deg);
  }
}
@media (max-width:768px) {
  .section03 {
    & .interviewSwier {
      margin-bottom: 10.24rem;
    }
    & .item01 {
      width: 100% !important;
      border-radius: 1.024rem;
    }
    & .wrap03 {
      gap: 0.768rem;
    }
    & .heading01 {
      font-size: 2.048rem;
      margin-bottom: 1.75rem;
    }
    & .text01 {
      font-size: 1.536rem;
      border-radius: 0.512rem;
      padding: 0.64rem 1.408rem 0.768rem;
    }
    & .text02 {
      font-size: 1.792rem;
      letter-spacing: 0.05em;
      line-height: 1;
    }
    & .link01 {
      padding: 1.5rem 1.4rem 1.75rem;
    }
    & .img02 {
      width: 1.92rem;
    }
    & .swiper-button-prev,
    & .swiper-button-next {
      width: 4.8rem !important;
      height: 4.8rem !important;
    }
    & .swiper-button-prev {
      bottom: -6.4rem;
      right: 5.76rem !important;
    }
    & .swiper-button-next {
      bottom: -6.4rem;
    }
    & .swiper-button-next::after,
    & .swiper-button-prev::after {
      width: 4.8rem !important;
      height: 4.8rem !important;
    }
  }
}


/* お役立ちマガジン */
.section04{
  & .list01{
    gap: 1.25rem;
  }
  & .item01{
    width: calc((100% - 1.25rem) / 2);
    border-radius: 0.625rem;
    padding: 0.8rem;
    gap: 1.25rem;
    position: relative;
  }
  & .wrap01{
    flex: 1;
  }
  & .wrap02 {
    gap: 0.375rem;
  }
  & .texts01{
    gap: 1.6875rem;
  }
  & .title{
    font-size: 1.75rem;
    text-align: center;
    margin-bottom: 2.375rem;
  }
  & .heading01{
    font-size: 1rem;
    margin-bottom: 0.8rem;
  }
  & .text01{
    font-size: 0.875rem;
    letter-spacing: 0;
    background: var(--mainBlue);
    color: white;
    border-radius: 0.3125rem;
    padding: 0.3125rem 0.625rem;
  }
  & .text02 {
    font-size: 1rem;
    letter-spacing: 0.05em;
    line-height: 1;
  }
  & .img01{
    width: 10.9375rem;
    height: 6.5rem;
    object-fit: cover;
    object-position: center;
    border-radius: 0.625rem;
  }
  & .img02 {
    width: 1.125rem;
  }
}
@media (max-width:768px) {
  .section04 {
    & .list01 {
      gap: 2rem;
    }
    & .wrap02 {
      gap: 0.384rem;
    }
    & .item01 {
      width: 100%;
      border-radius: 1.024rem;
      padding: 1rem 1rem 1.4rem;
      gap: 1.536rem;
    }
    & .texts01 {
      gap: 1.5rem;
    }
    & .title {
      font-size: 2.56rem;
      margin-bottom: 2.5rem;
    }
    & .heading01 {
      font-size: 1.664rem;
      margin-bottom: 1rem;
    }
    & .text01 {
      font-size: 1.28rem;
      border-radius: 0.512rem;
      padding: 0.384rem 0.896rem 0.512rem;
    }
    & .text02 {
      font-size: 1.28rem;
      line-height: 0.5;
    }
    & .img01 {
      width: 12.8rem;
      height: 7.68rem;
      border-radius: 0.64rem;
    }
    & .img02 {
      width: 1.536rem;
    }
  }
}