@charset "utf-8";
.pg-fv__right {
      background-image: url(https://shinei-mei.com/system_panel/uploads/images/pg-fv-bg-service.png);
  background-position: center;
}
.pg-fv__title--service {
  font-size: clamp(3.063rem, 1.104rem + 4.08vw, 6rem);
}
.pg-fv__title--service u {
      text-decoration: none;
    font-size: clamp(1.563rem, 0.521rem + 2.17vw, 3.125rem);
    margin-top: clamp(3.75rem, 1.25rem + 5.21vw, 7.5rem);
}

.goods {
  padding-top: 40px;
}
.goods__inner {
      padding-left: clamp(1.25rem, -17.917rem + 39.93vw, 30rem);
    padding-right: clamp(2.5rem, -2.458rem + 10.33vw, 9.938rem);
    position: relative;
}
.goods__deco {
      position: absolute;
    width: clamp(13.875rem, 7.534rem + 26.01vw, 38.75rem);
    left: 0;
    z-index: 10;
    top: 0;
}
.goods__bg {
      position: absolute;
    height: clamp(12.5rem, 6.667rem + 12.15vw, 21.25rem);
    background-color: #fff;
    width: 70%;
    right: 0;
    top: 14%;
}
.goods__container {
      display: flex;
    flex-direction: row-reverse;
  column-gap: clamp(5rem, 3.5rem + 3.13vw, 7.25rem);
      position: relative;
    z-index: 20;
}
.goods__right {
  position: relative;
  width: fit-content;
}
.goods__title {
      font-size: clamp(1.25rem, 0.75rem + 1.04vw, 2rem);
    font-weight: 700;
    line-height: 1.5;
      position: relative;
    z-index: 20;
}
.goods__title span {
      color: #a03435;
    font-size: clamp(2.25rem, 1.417rem + 1.74vw, 3.5rem);
}
.goods-title__deco {
      position: absolute;
    width: clamp(9.25rem, 4.583rem + 9.72vw, 16.25rem);
    max-width: unset;
    left: 50%;
    top: 13%;
    transform: translateX(-50%);
    z-index: 10;
}
.goods__items {
      margin-top: clamp(5rem, 1.667rem + 6.94vw, 10rem);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.goods__item {
      display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: clamp(1rem, 0.667rem + 0.69vw, 1.5rem);
}
.goods__img {
      aspect-ratio: 320/400;
    object-fit: cover;
    height: auto;
}
.goods-item__bottom {
      display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: clamp(1rem, 0.667rem + 0.69vw, 1.5rem);
}
.goods-item__title {
      font-size: clamp(1.25rem, 0.75rem + 1.04vw, 2rem);
    font-weight: 500;
}
.goods-item__text {
      font-size: clamp(0.75rem, 0.5rem + 0.52vw, 1.125rem);
    text-align: center;
}

.sample {
  padding-top: clamp(5rem, 3rem + 4.17vw, 8rem);
}
.sample__inner {
      padding: 0 clamp(5rem, -12.25rem + 35.94vw, 30.875rem);
    position: relative;
}
.sample-cta_deco {
      position: absolute;
    width: clamp(9.938rem, 5.556rem + 17.97vw, 27.125rem);
    right: 0;
    top: -80%;
}
.sample__container {
      position: relative;
    z-index: 20;
}
.sample__cta {
      display: flex;
    align-items: center;
    background-color: #fff;
}
.sample-cta__img {
      width: 38%;
    object-fit: cover;
    height: stretch;
}
.sample-cta__right {
      width: 62%;
    background-color: #0B263E;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(1rem, 0.625rem + 0.78vw, 1.563rem) clamp(2.5rem, 0.667rem + 3.82vw, 5.25rem);
    row-gap: 16px;
}
.entry-btn {
      padding: 16px 24px;
    background: #D95F2E;
    color: #fff;
    box-shadow: 0 3px 8px #000;
    display: flex;
    align-items: center;
    justify-content: space-between;
  column-gap: clamp(1.25rem, 0.5rem + 1.56vw, 2.375rem);
    transition: background .5s ease;
}
/* ホバーで色変更 */
.sample__cta:hover .entry-btn {
  background: #A03435;
}
.entry-btn__text {
      font-size: clamp(1rem, 0.917rem + 0.17vw, 1.125rem);
    font-weight: 500;
}
.sample-cta__title {
      width: clamp(18.375rem, 13.792rem + 9.55vw, 25.25rem);
    object-fit: contain;
}
/* 矢印エリア */
.cp_arrows {
  position: relative;
  width: 40px;
}
/* 三角矢印 */
.cp_arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  animation: arrow-slide 1.8s linear infinite;
}
.arrow-1 {
  left: 0;
  border-top: 6.5px solid transparent;
  border-bottom: 6.5px solid transparent;
  border-left: 7px solid #fff;
  animation-delay: 0s;
}

/* 中：少し大きく */
.arrow-2 {
  left: 16px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 9px solid #fff;
  animation-delay: .2s;
}

/* 右：さらに大きく */
.arrow-3 {
  left: 36px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 10px solid #fff;
  animation-delay: .4s;
}

/* 横に流れる */
@keyframes arrow-slide {
  0% {
    opacity: 0;
    transform: translateY(-50%) translateX(-12px);
  }

  30% {
    opacity: .5;
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-50%) translateX(12px);
  }
}

.service {
  padding-top: 128px;
}
.service__inner {
  padding-left: clamp(0rem, -4rem + 8.33vw, 6rem);
}
.service__container {
      background-color: #fff;
    padding: clamp(4rem, 2.667rem + 2.78vw, 6rem) clamp(1.25rem, -1.917rem + 6.6vw, 6rem);
    display: flex;
    column-gap: clamp(1.25rem, -2.542rem + 7.9vw, 6.938rem);
  position: relative;
}
.melit__deco {
      position: absolute;
    right: 0;
    width: clamp(8.375rem, 2.13rem + 25.62vw, 32.875rem);
    top: 50%;
    z-index: 10;
}


.switch-img {
    position: absolute;
    right: 0;
    width: clamp(8.375rem, 2.13rem + 25.62vw, 32.875rem);
    top: 50%;
    z-index: 10;
  overflow: hidden;
}
/* 下画像 */
.switch-img__base {
  position: relative;
  z-index: 1;
}
/* 上画像 */
.switch-img__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  /* 最初は右へ隠す */
  clip-path: inset(0 0 0 100%);
  transition: clip-path 1s ease;
}
/* 表示 */
.switch-img.is-show .switch-img__overlay {
  clip-path: inset(0 0 0 0);
}


.service__left {
      position: sticky;
    top: clamp(5rem, 2.083rem + 6.08vw, 9.375rem);
    height: fit-content;
    display: flex;
    flex-direction: column;
    row-gap: clamp(1rem, 0.833rem + 0.35vw, 1.25rem);
    white-space: nowrap;
}
.side-nav__item {
  display: block;
  opacity: 0.2;
  transition: opacity .3s ease;
}
.side-nav__item.is-active {
  opacity: 1;
}
.service-left__item {
      display: flex;
    align-items: center;
    column-gap: clamp(0.5rem, 0.167rem + 0.69vw, 1rem);
}
.service-left-item__number {
      width: clamp(1.875rem, 1.667rem + 0.43vw, 2.188rem);
    height: clamp(2.188rem, 1.979rem + 0.43vw, 2.5rem);
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.75rem, 0.667rem + 0.17vw, 0.875rem);
    font-weight: 700;
    color: #fff;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.service-left-item__text {
      font-size: clamp(0.875rem, 0.708rem + 0.35vw, 1.125rem);
    font-weight: 700;
}

.service__right {
      display: flex;
    flex-direction: column;
    row-gap: clamp(6rem, 5rem + 2.08vw, 7.5rem);
      position: relative;
    z-index: 20;
}
.choose {
  padding-right: clamp(0rem, -8rem + 16.67vw, 12rem);
}
.choose__content {
  position: relative;
}
.choose-item__bg {
      position: absolute;
    height: 80%;
    width: 67%;
    background-color: #F4F5F5;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  z-index: 10;
}
.choose__item {
      display: flex;
    align-items: center;
    column-gap: clamp(1rem, 0.333rem + 1.39vw, 2rem);
      position: relative;
    z-index: 20;
}
.choose-item-slide {
  width: 69%;
}
.choose__item--2 {
  flex-direction: row-reverse;
}
.choose-item__img {
    aspect-ratio: 720/232;
    object-fit: cover;
      position: relative;
    z-index: 20;
}
.choose-item__text1 {
      font-size: clamp(0.75rem, 0.583rem + 0.35vw, 1rem);
    font-weight: 400;
      position: relative;
    z-index: 20;
}
.choose-item__text2 {
      font-size: clamp(1.125rem, 0.542rem + 1.22vw, 2rem);
    font-weight: 500;
      position: relative;
    z-index: 20;
}

.voice__content {
      display: flex;
    flex-direction: column;
    row-gap: 8px;
  max-width: 870px;
}
.voice__item {
      border: clamp(0.25rem, -0.083rem + 0.69vw, 0.75rem) solid #DCDDDD;
    padding: 24px clamp(1rem, 2.08vw, 2.5rem);
  background-color: #fff;
}
.voice-item__title {
      font-size: clamp(1.125rem, 1.042rem + 0.17vw, 1.25rem);
    font-weight: 500;
}
.voice-item__line {
      width: clamp(7.875rem, -0.208rem + 16.84vw, 20rem);
    height: 1px;
    background-color: #000;
    margin-top: clamp(0.5rem, 0.167rem + 0.69vw, 1rem);
}
.voice-item__text {
      margin-top: clamp(0.5rem, 0.167rem + 0.69vw, 1rem);
    font-size: clamp(0.75rem, 0.625rem + 0.26vw, 0.938rem);
    font-weight: 400;
}

.merit__content {
      display: flex;
    column-gap: clamp(2rem, 0.333rem + 3.47vw, 4.5rem);
}
.merit__item {
      display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: clamp(1.25rem, 0.75rem + 1.04vw, 2rem);
}
.merit-content__top {
      display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 8px;
  height: 160px;
}
.merit-content__number {
  width: 64px;
}
.merit-content__number--2 {
  margin-left: 20px;
}
.merit-content__title {
      font-size: 40px;
    color: #1C4973;
    font-weight: 700;
}
.merit-contenet__text {
      font-weight: 400;
    text-align: center;
}

.difference__content {
      margin-top: 32px;
    display: flex;
    flex-direction: column;
    row-gap: 56px;
}
.difference__item {
      display: flex;
    width: 100%;
}
.difference-item__left {
      width: 78%;
    position: relative;
    background-color: #F4F5F5;
    padding: clamp(2.375rem, 1.625rem + 1.56vw, 3.5rem) clamp(0.625rem, -0.625rem + 2.6vw, 2.5rem);
}
.difference-item__title {
      position: absolute;
    height: clamp(2.5rem, 1.5rem + 2.08vw, 4rem);
    object-fit: contain;
    width: auto;
    left: clamp(0.625rem, -0.625rem + 2.6vw, 2.5rem);
    top: -10%;
}
.difference-item__text1 {
      font-size: clamp(0.875rem, 0.708rem + 0.35vw, 1.125rem);
    font-weight: 500;
    line-height: 1.7;
}
.difference-item__text2 {
      margin-top: clamp(1.375rem, 0.958rem + 0.87vw, 2rem);
    font-size: clamp(0.75rem, 0.583rem + 0.35vw, 1rem);
    font-weight: 500;
    padding-bottom: clamp(0.25rem, 0.083rem + 0.35vw, 0.5rem);
    width: fit-content;
    border-bottom: clamp(0.063rem, 0.021rem + 0.09vw, 0.125rem) solid #000;
}
.difference-item__text3 {
      margin-top: 8px;
    font-size: clamp(0.75rem, 0.625rem + 0.26vw, 0.938rem);
    font-weight: 400;
}
.difference-item__img {
      width: 22%;
    object-fit: cover;
}

.recipe {
  padding-top: clamp(5rem, 4.333rem + 1.39vw, 6rem);
      position: relative;
    z-index: 20;
}
.recipe__inner {
  padding: 0 clamp(0.625rem, -13.958rem + 30.38vw, 22.5rem);
}
.recipe__line {
      width: 100%;
    height: 1px;
    background-color: #000;
}
.swiper {
  margin: 0 calc(50% - 50vw);
      margin-top: clamp(2.5rem, 2.167rem + 0.69vw, 3rem);
    margin-bottom: clamp(2rem, 1.333rem + 1.39vw, 3rem);
    position: relative;
    z-index: 100;
  width: 100vw;
}
.swiper-wrapper {
  transition-timing-function: linear;
}
.swiper-slide img {
  height: auto;
  width: 100%;
    aspect-ratio: 304/304;
    object-fit: cover;
}
.swiper-slide p {
      font-size: clamp(0.625rem, 0.417rem + 0.43vw, 0.938rem);
    font-weight: 400;
    margin-top: clamp(0.25rem, 0.083rem + 0.35vw, 0.5rem);
}

.individual {
  padding-top: clamp(7.313rem, 6.854rem + 0.95vw, 8rem);
}
.individual__inner {
  padding: 0 clamp(0.625rem, -13.958rem + 30.38vw, 22.5rem);
      position: relative;
}
.individual__deco {
      position: absolute;
    width: clamp(12.188rem, 4.987rem + 29.54vw, 40.438rem);
    right: 0;
    top: -100%;
}
.individual__container {
      position: relative;
    z-index: 20;
}
.individual__content {
      margin-top: clamp(2.5rem, 1.5rem + 2.08vw, 4rem);
    display: flex;
    column-gap: clamp(1.25rem, -0.583rem + 3.82vw, 4rem);
}
.individual__left {
  width: 45%;
}
.individual__img {
    aspect-ratio: 536/299;
    object-fit: contain;
    height: fit-content;
}
.individual__right {
  width: 55%;
}
.individual__text {
      font-size: clamp(0.875rem, 0.708rem + 0.35vw, 1.125rem);
    font-weight: 500;
    line-height: 1.7;
}
.individual__btn {
      margin-top: clamp(2rem, 1.333rem + 1.39vw, 3rem);
    justify-content: flex-start;
}

.faq {
  padding-top: clamp(4.313rem, 1.854rem + 5.12vw, 8rem);
      position: relative;
    z-index: 20;
}
.faq__inner {
  padding: 0 clamp(0.625rem, -13.958rem + 30.38vw, 22.5rem);
}
.accordion {
  margin-top: 40px;
}
.accordion-content {
  display: block;
}
.accordion-header {
  background-color: #FFF;
  padding: clamp(0.75rem, 0.583rem + 0.35vw, 1rem) clamp(1rem, 2.08vw, 2.5rem);
  margin: 10px 0 0;
  transition: background .3s ease;
  cursor: pointer;
  position: relative;
}
.accordion-header::before,
.accordion-header::after{
  position:absolute;
  content:'';
  top:1px;
  right:20px;
  bottom:0;
  width:clamp(0.625rem, 0.208rem + 0.87vw, 1.25rem);
  height:1px;
  margin:auto;
  background:#151E2F;
}
.accordion-header::after{
  transform:rotate(-90deg);
  transition:transform 0.3s;
}
.accordion-header.active::after{transform:rotate(0deg);}
.accordion-content {
  background-color: #FFF;
  padding: clamp(0.75rem, 0.583rem + 0.35vw, 1rem) clamp(1rem, 2.08vw, 2.5rem);
}
.accordion-header h3 {
  padding-left: clamp(1.875rem, 1.708rem + 0.35vw, 2.125rem);
  position: relative;
      color: #1C4973;
    font-size: clamp(0.875rem, 0.708rem + 0.35vw, 1.125rem);
    font-weight: 500;
}
.accordion-header h3::before{
      position: absolute;
    content: "Q.";
    top: 0;
    left: 0;
    color: #1C4973;
    font-size: clamp(0.875rem, 0.708rem + 0.35vw, 1.125rem);
  font-weight: 500;
}
.accordion-content p {
      padding-left: clamp(1.875rem, 1.708rem + 0.35vw, 2.125rem);
    font-weight: 500;
}

@media (max-width: 767px) {
  .goods__inner {
    padding-right: 10px;
  }
  .goods__bg {
        top: unset;
    bottom: 0;
    height: clamp(43.75rem, 29.849rem + 57.03vw, 57.188rem);
    width: 80%;
  }
  .goods__container {
        flex-direction: column;
    row-gap: 85px;
        max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
  .goods__right {
    margin-left: auto;
    padding-right: 50px;
  }
  .goods__items {
        margin-top: 0;
    grid-template-columns: repeat(1, 1fr);
  }
  .goods__item {
        flex-direction: row;
    column-gap: 24px;
  }
  .goods__img {
    width: 44%;
  }
  .goods-item__bottom {
        width: 56%;
    align-items: flex-start;
  }
  .goods-item__title {
    font-size: clamp(1.25rem, 0.474rem + 3.18vw, 2rem);
  }
  .goods-item__text {
        font-size: clamp(0.75rem, 0.362rem + 1.59vw, 1.125rem);
    text-align: left;
  }
  
  .sample__inner {
        padding-left: 20px;
    padding-right: 20px;
  }
  .sample-cta_deco {
    top: 80%;
  }
  .sample__cta {
        flex-direction: column;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
  .sample-cta__img {
    width: 100%;
  }
  .sample-cta__right {
        width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .service__container {
        padding-left: 10px;
    padding-right: 10px;
  }
  .melit__deco {
    top: 46%;
  }
  .service__left {
    display: none;
  }
  .service__right {
        max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  .choose-item-slide {
      width: 55%;
  }
  .choose-item__img {
    aspect-ratio: 206/171;
  }
  .merit__content {
        flex-direction: column;
    row-gap: 48px;
  }
  .merit-content__top {
    height: auto;
  }
  .difference-item__left {
    width: 68%;
  }
  .difference-item__img {
    width: 32%;
  }
  .individual__deco {
    top: -24%;
  }
  .individual__content {
        flex-direction: column;
    row-gap: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  .individual__left {
    width: 100%;
  }
  .individual__img,
  .individual__right {
    width: 100%;
  }
  .individual__btn {
    justify-content: center;
  }
  .accordion-content p {
    padding-left: 0;
  }
}

@media (max-width: 389px) {
  .goods__inner {
    padding-left: 10px;
  }
  .goods__bg {
    height: clamp(37.5rem, 8.514rem + 144.93vw, 43.75rem);
  }
  .goods__item {
    column-gap: 10px;
  }
  .entry-btn {
        column-gap: 10px;
    padding-left: 18px;
    padding-right: 18px;
  }
  .entry-btn__text {
    font-size: 14px;
  }
  .choose-item-slide {
      width: 50%;
  }
  .switch-img {
    top: 44%;
  }
  .difference__item {
    flex-direction: column;
  }
  .difference-item__left {
        width: 100%;
  }
  .difference-item__img {
        width: 100%;
    aspect-ratio: 3/2;
  }
}