﻿/* ------------------------------------------------
Common
------------------------------------------------ */
:root{
  --container-default-top: 100%;
}
@media screen and (min-width: 768px) {
  :root{
    --container-default-top: min(90%,80rem);
  }
}
.global-container {
  display: block;
}
.global-contents__inner {
  width: 100%;
  padding-bottom: 0;
}

/* ボタン */
.c-button--top-secondary{
  background-color: #FDB105;
  border-radius: .8rem;
  color: #fff;
  display: grid;
  place-content: center;
  height: 5.6rem;
  font-size: 1.7rem;
  letter-spacing: .05em;
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: .05em;
  padding-inline: 1rem;
}
.c-button--top-voice-all{
  background-color: #436AED;
  border-radius: .8rem;
  color: #fff;
  display: grid;
  place-content: center;
  height: 5.6rem;
  font-size: 1.7rem;
  letter-spacing: .05em;
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: .05em;
  padding-inline: 1rem;
}
.fw-bold{
  font-weight: var(--fw-bold);
}
.td-underline{
  text-decoration: underline;
}
/* 背景 */
.bg-gray{
  background-color: var(--color-bg-gray);
}

/* 動画 */
.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.video-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* タイトル */
.top-common-heading{
  text-align: center;
  font-size: 2.1rem;
  font-family: var(--font-ja-mincho);
  line-height: 1;
  letter-spacing: 0.06em;
}

/* マーカー */
.marker-yellow{
  background: linear-gradient(#FFEB90 100%, #FFEB90 0%);
  padding: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@media screen and (min-width: 768px) {
  .global-contents__inner {
    /* padding-bottom: 6rem; */
    padding-bottom: 0;
  }

  /* ボタン */
  .c-button--top-secondary,
  .c-button--top-voice-all{
    max-width: 40rem;
    border-radius: 1.6rem;
    height: 7rem;
    font-size: 2rem;
    margin-inline: auto;
  }

  /* タイトル */
  .top-common-heading{
    font-size: 2.6rem;
  }

  .po-wrapper{
    position: relative;
    width: 100%;
    display: block;
  }
  .po-item{
    position: absolute;
  }
}

/* ------------------------------------------------
 Subscription(共通)
------------------------------------------------ */
/* 限定 */
.subscription-first{
  padding-top: 2.7rem;
}
.subscription-third,
.subscription-forth,
.subscription-fifth{
  padding-top: 3.8rem;
}
.subscription-fifth{
  margin-top: 1.5rem;
}
.subscription-second{
  padding-top: 3.5rem;
}
.subscription-sixth{
  padding-top: 3.7rem;
}
@media screen and (min-width: 768px){
  /* 限定 */
  .subscription-first{
    padding-top: 3rem;
  }
  .subscription-second,
  .subscription-third,
  .subscription-forth{
    padding-top: 0;
  }
  .subscription-fifth{
    margin-top: 2.7rem;
    padding-top: 0;
  }
  .subscription-sixth{
    display: none;
  }
}
@media screen and (max-width: 767px){
  .subscription-limited__image{
    display: none;
  }
  .subscription-first .subscription-limited__image{
    display: block;
  }

}

/* ------------------------------------------------
 Important Information
------------------------------------------------ */
.information{
  background-color: var(--color-secondary);
}
.information__inner{
  padding-block: 1.45rem;
  margin-inline: auto;
  width: 100%;
  padding-inline: 1.5rem;
}
.information-item{
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: 1rem;
  letter-spacing: -0.01em;
}
@media screen and (min-width: 768px){
  .information__inner{
    padding-block: 1.5rem;
    padding-inline: 0;
    width: 90%;
  }
  .information-item{
    font-size: 2rem;
  }
}
/* ------------------------------------------------
 KV
------------------------------------------------ */
.kv{
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../Contents/ThemeImage/top/bg_kv_sp.jpg);
}
.kv__inner{
  padding-bottom: 3.6rem;
}
.home-mv-slider {
  transition: opacity var(--transition-default);
}
.home-mv-slider:not(.swiper-initialized) {
  height: 77rem;
  opacity: 0;
}
.home-mv-slider__slide {
  transition: opacity var(--transition-default);
}
.home-mv-slider__slide:not(.swiper-slide-active) {
  opacity: 0.2;
}

.home-mv-slider__pagination {
  position: static;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.7rem;
  margin-top: 1.65rem;
}

.home-mv-slider__pagination .swiper-pagination-bullet {
  margin: 0 !important;
  border: 1px solid #D2B76D !important;
  background-color: #D2B76D !important;
  opacity: 1 !important;
  width: 1rem !important;
  height: 1rem !important;
}
.home-mv-slider__pagination .swiper-pagination-bullet-active {
  opacity: var(--hover-opacity)!important;
}

@media screen and (min-width: 768px) {
  .kv{
    background-image: url(../Contents/ThemeImage/top/bg_kv_pc.jpg);
  }
  .home-mv-slider:not(.swiper-initialized) {
    height: 76rem;
  }
  .kv__inner{
    padding-bottom: 3rem;
    margin-inline: auto;
    max-width: 140rem;
  }
  .home-mv-slider__pagination {
    margin-top: 2.7rem;
  }
  .home-mv-slider__pagination .swiper-pagination-bullet {
    width: 1.4rem !important;
    height: 1.4rem !important;
  }
}


/* ------------------------------------------------
 Award
------------------------------------------------ */
.award{
  background-color:var(--color-bg-brown) ;
  padding: 1.2rem ;
}
.award-detail{
  display: grid;
  align-items: center;
  justify-content: center;
  gap: 1.5rem 2rem;
  /* grid-template-columns: 8.7rem auto; */

  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
}
.award-text{
  color: #fff;
}
.award-img{
  grid-area: 1/1/3/2;
  width: 8.7rem;

  justify-self: center;
  align-self: center;
}
.award-text__heading{
  font-family: var(--font-ja-mincho);
  font-size: 2rem;
  line-height: 1.5;
  grid-area: 1/2/3/5;
}
.award-text__description{
  font-size: 1.2rem;
  text-align: center;
  line-height: 1.7;
  grid-area: 3/1/4/5;
}
@media screen and (min-width: 768px) {
  .award{
    padding: 2.4rem 1.3rem;
  }
  .award-detail{
    gap: 0 4.2rem;
    /* grid-template-columns: 12.5rem auto; */
  }
  .award-img{
    grid-area: 1/1/4/2;
    width: 16.8rem;
  }
  .award-text__heading{
    font-size: 3rem;
    line-height: 1.36;
    grid-area: 1/2/3/4;
  }
  .award-text__description{
    font-size: 1.8rem;
    line-height: 1.5;
    grid-area: 3/2/4/4;
  }
}


/* ------------------------------------------------
 Stop Minor
------------------------------------------------ */
@media screen and (min-width: 768px) {
  .stop-minor__inner{
    max-width: min(90%,72rem);
    margin-inline: auto;
  }
}



/* ------------------------------------------------
 Service
------------------------------------------------ */
/* Head */
.service-head__idea{
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../Contents/ThemeImage/top/bg_service_head_sp.jpg);
  display: grid;
  place-content: center;
}
.service-head__idea{
  padding-block: 3.8rem 4rem;
}
.service-head__idea p{
  font-size: 2rem;
  text-align: center;
  line-height: 2.3;
  font-family: var(--font-ja-mincho);
}

/* Contents */
.service-contents__inner{
  padding-block: 4.2rem 3.7rem;
}
.service-contents__top{
}

.service-contents__top-detail{

}
.service-contents__top-detail p{
  font-size: 1.2rem;
  line-height: 2;
}
.service-contents__top-detail-image{
  margin-top: 2.4rem;
}
.service-contents__bottom{
  text-align: center;
  font-family: var(--font-ja-mincho);
  margin-top: 3.12rem;
}
.service-contents__text-sub{
  font-size: 1.6rem;
  line-height: 1;
}
.service-contents__text-main{
  margin-top: 3rem;
  font-size: 2rem;
  line-height: 2;
  letter-spacing: 0.06em;
  font-weight: var(--fw-semibold);
}
.service-contents__text-notice{
  margin-top: 2.4rem;
  padding-inline: 3.6rem;
  font-size: 1.2rem;
  text-align: left;
  line-height: 1.5;
}
/* Point */
.service-point{
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../Contents/ThemeImage/top/bg_service_point_sp.jpg);
}
.service-point__inner{
  margin-inline: auto;
  padding-block: 3.5rem;
  text-align: center;
}
.service-point__heading{
  font-family: var(--font-ja-mincho);
  font-size: 1.6rem;
  line-height: 1.875;
  margin-bottom: 3.2rem;
  font-weight: var(--fw-medium);
}
.service-point__list{
  display: grid;
  gap: 3rem;
  margin-top: 2.4rem;
}
.service-point__item{
  display: grid;
  gap: 1.6rem;
}
.service-point__item dt{
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: 0.06em;
  font-family: var(--font-ja-mincho);
  font-weight: var(--fw-semibold);
}
.service-point__item dd{
  font-size: 1.2rem;
  line-height: 1.75;
}
@media screen and (min-width: 768px){
  /* Head */
  .service__head{
    display: grid;
    grid-template-columns: 55% 45%;
  }
  .service-head__idea{
    order: 1;
    background-image: url(../Contents/ThemeImage/top/bg_service_head_pc.jpg);
  }
  .service-head__idea p{
    font-size: 2.4rem;
    text-align: right;
  }
  .service-head__image{
    order: 2;
  }

  /* Contents */
  .service-contents__inner{
    width: min(90%,94rem);
    margin-inline: auto;
    padding-block: 8rem 9rem;
    position: relative;
  }
  .service-contents__top{

  }
  .service-contents-title{
    position: absolute;
    top: 8rem;
    left: 0;
    width: 3.5rem;
  }
  .service-contents-common-container{
    width: min(90%,66rem);
    margin-inline: auto;
  }
  .service-contents__top-detail p{
    font-size: 1.8rem;
    line-height: 2.1;
  }
  .service-contents__top-detail-image{
    margin-top: 2rem;
    transform: translateX(-1rem);
  }
  .service-contents__bottom{
    text-align: center;
    font-family: var(--font-ja-mincho);
    margin-top: 3.12rem;
  }
  .service-contents__text-sub{
    font-size: 2.2rem;
    line-height: 1;
  }
  .service-contents__text-main{
    margin-top: 2.4rem;
    font-size: 2.4rem;
    line-height: 2.1;
  }
  .service-contents__text-notice{
    margin-top: 2rem;
    font-size: 1.6rem;
    text-align: center;
  }
  /* Point */
  .service-point{
    background-image: url(../Contents/ThemeImage/top/bg_service_point_pc.jpg);
  }
  .service-point__inner{
    padding-block: 6rem 6.2rem;
  }
  .service-point__heading{
    font-size: 2.6rem;
    line-height: 2;
    margin-bottom: 4rem;
  }
  .service-point__image{
    margin-inline: auto;
    width: min(90%,72rem);
    display: block;
  }
  .service-point__list{
    gap: 5rem;
    margin-top: 4.6rem;
  }
  .service-point__item{
    gap: 2rem;
  }
  .service-point__item dt{
    font-size: 2.2rem;
  }
  .service-point__item dd{
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 767px){
  /* Contents */
  .service-contents__top{
    display: grid;
    grid-template-columns: 2.6rem auto;
    gap: 4.6rem;
    padding-inline: 3.8rem;
  }
  .service-contents__middle{
    margin-top: 2rem;
    padding-inline: 4.5rem 7.8rem;
  }

}

/* ------------------------------------------------
 Step
------------------------------------------------ */
/* Step Head */
.step-head{
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../Contents/ThemeImage/top/bg_point_haad_sp.jpg);
}
.step-head{
  padding-block: 3.2rem 4.5rem;
}
.step-head__heading{
  padding-inline: 5.28rem;
}
.step-head-movie{
  margin-top: 1.9rem;
}
.step-head-description{
  margin-top: 3.12rem;
  padding-inline: 3.7rem;
}
.step-head-description__message{
  font-size: 1.4rem;
  line-height: 2;
}
.step-head-description__feature{
  margin-top: 4.7rem;
  font-size: 1.4rem;
  font-weight: var(--fw-bold);
  line-height: 2.1;
  /* text-decoration-line: underline;
  text-decoration-thickness: .25rem;
  text-underline-offset: .5rem; */
}
.step-head-description__notice{
  margin-top: 2rem;
  font-size: 1.2rem;
  line-height: 2;
}

/* Step First Year */
.step-first-year{
  background-image: linear-gradient(180deg, rgba(235, 234, 224, 1), rgba(255, 255, 255, 1) 60%);
  padding-block: 4rem 2.3rem;
}
.step-item__heading{
  background-color: var(--color-black);
  padding: 1rem 4rem 1rem 1.8rem;
  color: #fff;
  font-size: 1.8rem;
  font-family: var(--font-ja-mincho);
  line-height: 1;
  letter-spacing: .06em;
  display: inline-block;
  clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%);
}
.step-first-year .step-item__heading{
}
.step-item__description{
  font-size: 1.4rem;
  font-family: var(--font-ja-mincho);
  line-height: 2.1;
}
.step-first-year .step-item__description{
  margin-top: 2.8rem;
  padding-inline: 3.7rem 1rem;
}
.step-item__visual{
  display: grid;
}
.step-first-year .step-item__visual{
  margin-top: 3rem;
  grid-template-columns: 68.47222% 31.52777%;
}
.step-item__explanation{
  font-size: 1.4rem;
  line-height: 2;
}
.step-first-year .step-item__explanation{
  margin-top: 2.7rem;
  padding-inline: 3.64rem;
}
.step-item__notice{
  font-size: 1.4rem;
  text-align: center;
  line-height: 1.9;
  font-weight: var(--fw-bold);
}
.step-item__notice{
  margin-top: 2.6rem;
  padding-inline: 1.9rem;
}
.step-item__notice-inner{
  border: 1px solid #969696;
  padding: 2rem 1rem 1.5rem;
  background-color: #fff;
}

 /* Step Mid Year */
.step-mid-year{
  background-image: linear-gradient(180deg, rgba(210, 183, 109, 1) 68%, rgba(255, 255, 255, 1));
  padding-block: 4.8rem 3.8rem;
}
.step-mid-year .step-item__heading{
  padding: 1rem 2.4rem 1rem 1.8rem;
  clip-path: polygon(0 0, 100% 0%, 94% 100%, 0% 100%);
}
.step-mid-year .step-item__description{
  margin-top: 4rem;
  padding-inline: 3rem;
}
.step-mid-year .step-item__visual{
  margin-top: 2.8rem;
  grid-template-columns: 50% 50%;
  align-items: center;
}
.step-mid-year .step-item__explanation{
  margin-top: 4.2rem;
  padding-inline: 3.7rem;
}

/* Step Last Year */
.step-last-year{
  background-image: linear-gradient(180deg, rgba(195, 135, 56, 1), rgba(255, 255, 255, 1));
  padding-block: 2.9rem 6.5rem;
}
.step-last-year .step-item__heading{
  padding: 1rem 3.5rem 1rem 1.8rem;
  clip-path: polygon(0 0, 100% 0%, 94% 100%, 0% 100%);
}
.step-last-year .step-item__description{
  margin-top: 3.6rem;
  padding-inline: 3rem;
}
.step-last-year .step-item__visual{
  margin-top: -8rem;
  grid-template-columns: 64.16666% 35.83333%;
  align-items: flex-end;
}
.step-last-year .step-item__explanation{
  margin-top: 5.5rem;
  padding-inline: 3.7rem;
}
@media screen and (min-width: 768px){
  /* Step Head */
  .step-head{
    background-image: url(../Contents/ThemeImage/top/bg_point_haad_pc.jpg);
  }
  .step-head{
    padding-block: 6rem;
  }
  .step-head__heading{
    padding-inline: 0;
    margin-inline: auto;
    width: min(90%,31.2rem);
  }
  .step-head-movie{
    margin-top: 3rem;
    margin-inline: auto;
    padding-inline: 0;
    /* width: min(90%,58rem); */
    width: min(90%,72rem);
  }
  .step-head-description{
    margin-top: 4rem;
    margin-inline: auto;
    padding-inline: 0;
    width: min(90%,72rem);
  }
  .step-head-description__message{
    font-size: 1.6rem;
  }
  .step-head-description__feature{
    margin-top: 3.5rem;
    font-size: 1.6rem;
    line-height: 1.875;
    text-decoration-thickness: .5rem;
    text-underline-offset: .8rem;
  }
  .step-head-description__notice{
    margin-top: 2.5rem;
    font-size: 1.6rem;
  }

  /* Step First Year */
  .step-first-year{
    padding-block: 6rem;
  }
  .step-item__inner{
    margin-inline: auto;
    position: relative;
  }
  .step-first-year .step-item__inner,
  .step-last-year .step-item__inner{
    width: min(90%, 80rem);
  }
  .step-mid-year .step-item__inner{
    width: min(90%, 94rem);
  }
  .step-item__heading{
    padding: 2.6rem 6.9rem 2.2rem 5.4rem;
    font-size: 2.8rem;
  }
  .step-item-first-year .step-item__heading{
    position: absolute;
    right: 0;
    top: 0;
  }
  .step-item__description{
    font-size: 2.4rem;
    line-height: 1.9;
  }
  .step-first-year .step-item__description{
    margin-top: 0;
    padding-inline: 9rem 0;
  }
  .step-first-year .step-item__visual{
    margin-top: -6rem;
    grid-template-columns: 62.5% 27.5%;
    justify-content: space-between;
    align-items: flex-end;
  }
  .step-item__explanation{
    font-size: 1.6rem;
  }
  .step-first-year .step-item__explanation{
    margin-top: 4.2rem;
    padding-inline: 3rem;
  }
  .step-item__notice{
    font-size: 1.8rem;
    line-height: 2.2;
  }
  .step-item__notice{
    margin-top: 3.4rem;
    padding-inline: 3rem;
  }
  .step-item__notice-inner{
    border: 2px solid #969696;
    padding: 3rem 1rem;
  }
  /* Step Mid Year */
  .step-mid-year{
    background-image: linear-gradient(180deg, rgba(210, 183, 109, 1) 68%, rgba(255, 255, 255, 1));
    padding-block: 6rem 8rem;
  }
  .step-mid-year .step-item__heading{
    margin-left: 7rem;
    padding: 2.5rem 14.7rem 2.3rem 2.5rem;
    clip-path: polygon(0 0, 100% 0%, 94% 100%, 0% 100%);
  }
  .step-mid-year .step-item__description{
    margin-top: 4rem;
    padding-inline: 15rem 1rem;
  }
  .step-mid-year .step-item__visual{
    margin-top: 6rem;
    grid-template-columns: 46.80851% 53.19148%;
  }
  .step-mid-year .step-item__explanation{
    margin-top: 5rem;
    padding-inline: 11rem;
  }
  /* Step Last Year */
  .step-last-year{
    background-image: linear-gradient(180deg, rgba(195, 135, 56, 1), rgba(255, 255, 255, 1) 70%);
    padding-block: 7.7rem 8rem;
  }
  .step-last-year .step-item__heading{
    padding: 2.4rem 8.7rem 2.4rem 3.5rem;
    clip-path: polygon(0 0, 100% 0%, 93% 100%, 0% 100%);
    position: absolute;
    right: 0;
    top: 0;
  }
  .step-last-year .step-item__description{
    margin-top: 0;
    padding-inline: 4rem 1rem;
  }
  .step-last-year .step-item__visual{
    margin-top: 1.5rem;
    grid-template-columns: 62.5% 27.5%;
    align-items: flex-end;
    justify-content: space-between;
  }
  .step-last-year .step-item__explanation{
    margin-top: 5rem;
    padding-inline: 3.7rem;
  }
}
/* ------------------------------------------------
 Stoey
------------------------------------------------ */
.story-head{
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../Contents/ThemeImage/top/bg_story_sp.jpg);
  padding-block: 5.4rem 43.8rem;
}
.srtory-head__inner{
  display: grid;
  grid-template-columns: 2rem 15rem;
  gap: 7.5rem;
  margin-inline: auto;
  padding-inline: 3.64rem;
}

.story__body{
  margin-top: -38.4rem;
}
.c-tab-panel__panel {
  transition: opacity var(--transition-default);
}
.c-tab-panel__panel[aria-hidden="true"] {
  opacity: 0;
  height: 0;
  pointer-events: none;
}
.c-tab-panel__panel[aria-hidden="false"] {
  opacity: 1;
  height: auto;
  transition: opacity 1s ease;
}
.case-list{
  padding-bottom: 3.7rem;
  padding-inline: 1.5rem;
  display: grid;
  gap: 1.2rem;
}
.case-tab{
  /* padding: 1.9rem 4rem 1.9rem 2rem; */
  padding-inline: 2rem 4rem;
  display: grid;
  grid-template-columns: auto .15rem 1fr;
  align-items: center;
  gap: 1.9rem;
  height: 7rem;
  position: relative;
}
.case-tab::after{
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 2rem;
  margin-block: auto;
  content: '';
  width: 1.2rem;
  height: 1.1rem;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2221%22%20viewBox%3D%220%200%2024%2021%22%3E%20%3Cpath%20id%3D%22%E5%A4%9A%E8%A7%92%E5%BD%A2_6%22%20data-name%3D%22%E5%A4%9A%E8%A7%92%E5%BD%A2%206%22%20d%3D%22M12%2C0%2C24%2C21H0Z%22%20transform%3D%22translate(24%2021)%20rotate(180)%22%20fill%3D%22%23222%22%2F%3E%3C%2Fsvg%3E')
}
.case-tab__numeric{
  font-size: 1.5rem;
  line-height: 1.9;
  font-family: var(--font-ja-mincho);
}
.case-tab__dividing-line{
  width: .15rem;
  height: 3.5rem;
  background-color: var(--color-black);
}
.case-tab__title{
  font-size: 1.3rem;
  line-height: 1.9;
  text-align: left;
}
[data-case="case1"]{
  background-color: #EBEAE0;
}
[data-case="case2"]{
  background-color: #EAC7B1;
}
[data-case="case3"]{
  background-color: #9D8545;
}
[data-case="case4"]{
  background-color: #2F4045;
}

.case-tab[data-case="case1"]::after,
.case-tab[data-case="case2"]::after{
  background-color: var(--color-black);
}
.case-tab[data-case="case3"],
.case-tab[data-case="case4"]{
  color: #fff;
}
.case-tab[data-case="case3"]::after,
.case-tab[data-case="case4"]::after,
[data-case="case3"] .case-tab__dividing-line,
[data-case="case4"] .case-tab__dividing-line{
  background-color: #fff;
}

/* Case Contents */
.case-item__inner{
  padding-block: 3.6rem 4rem;
}
[data-case="case1"] .case-item__inner{
  padding-bottom: 0;
}
.case-item__contents{
  margin-inline: auto;
}
.case-item__heading{
  font-size: 1.8rem;
  line-height: 2;
  text-align: center;
  font-family: var(--font-ja-mincho);
}
.case-item__body{
  margin-top: 3.4rem;
  padding-bottom: 3rem;
  display: grid;
  gap: 3.1rem;
  background-color: #fff;
}
.case-item__text{
  padding-inline: 2.8rem;
}
.case-item__text *{
  font-size: 1.4rem;
  line-height: 1.8;
}
[data-paragraph="case01_01"] .case-item__text{
  margin-top: 1.5rem;
}
[data-paragraph="case01_02"] .case-item__text{
  margin-top: 3.7rem;
}
[data-paragraph="case01_03"] .case-item__text{
  margin-top: 3.5rem;
}
[data-paragraph="case01_04"] .case-item__text{
  margin-top: 2.9rem;
}
.case-item__image--common{
  padding-block: 2rem;
  display: block;
}
.case-item__feature-text{
  margin-top: 3.5rem;
  font-size: 1.35rem;
  line-height: 1.5;
  padding-inline: 2.8rem;
}
[data-case="case3"] .case-item__feature-text,
[data-case="case4"] .case-item__feature-text{
  color: #fff;
}
[data-paragraph="case02_01"] .case-item__text{
  margin-top: 1rem;
}
[data-paragraph="case02_02"] .case-item__text{
  margin-top: 4.4rem;
}
[data-paragraph="case02_03"] .case-item__text{
  margin-top: 4.9rem;
}
[data-paragraph="case02_04"] .case-item__text{
  margin-top: 2.9rem;
}

[data-paragraph="case03_01"] .case-item__text{
  margin-top: 1rem;
}
[data-paragraph="case03_02"] .case-item__text{
  margin-top: 4rem;
}
[data-paragraph="case03_03"] .case-item__text{
  margin-top: 3.6rem;
}
[data-paragraph="case03_04"] .case-item__text{
  margin-top: 2.9rem;
}

[data-paragraph="case04_01"] .case-item__text{
  margin-top: 1rem;
}
[data-paragraph="case04_02"] .case-item__text{
  margin-top: 5rem;
}
[data-paragraph="case04_03"] .case-item__text{
  margin-top: 3.3rem;
}
[data-paragraph="case04_04"] .case-item__text{
  margin-top: 2.9rem;
}

.story-bottom{
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../Contents/ThemeImage/top/bg_youtube_sp.jpg);
  padding-block: 5.4rem 5.9rem;
}
.story-bottom__inner{
  padding-inline: 6.8rem;
}


@media screen and (min-width: 768px){
  .story-head{
    background-image: url(../Contents/ThemeImage/top/bg_story_pc.jpg);
    padding-block: 6rem 13.5rem;
  }
  .srtory-head__inner{
    width: min(90%,94rem);
    grid-template-columns: unset;
    justify-content: center;
    gap: 0;
    padding-inline: 0;
    position: relative;
  }
  .story-head__title{
    position: absolute;
    top: 0;
    left: 0;
    width: 3.5rem;
  }
  .srtory-head__description{
    width: 22rem;
    margin-top: 2rem;
  }


  .story__body{
    margin-top: -7.5rem;
  }
  .case-list{
    padding-bottom: 0;
    padding-inline: 0;
    margin-inline: auto;
    /* width: min(90%,140rem); */
    max-width: 140rem;
    grid-template-columns: repeat(4,minmax(0,1fr));
    justify-content: center;
    gap: 0;
  }
  .case-tab{
    /* padding: 1.9rem 4rem 1.9rem 2rem; */
    padding-inline: 2.4rem min( 3svw,5.3rem);
    grid-template-columns: auto .2rem 1fr;
    gap: 1.9rem;
    height: 7.5rem;
  }
  .case-tab::after{
    right: 1.8rem;
    width: 1.3rem;
    height: 1.1rem;
  }
  .case-tab__numeric{
    font-size: min(1svw,1.5rem);
  }
  .case-tab__dividing-line{
    width: .2rem;
    height: 3.7rem;
  }
  .case-tab__title{
    font-size: min(1svw,1.5rem);
  }
  /* Case Contents */
  .case-item__inner{
    padding-block: 10rem 8.7rem;
  }
  .case-item__contents{
    width: min(90%, 80rem);
    background-color: #fff;
    padding: 8rem;
    border-radius: 4rem;
  }

  .case-item__heading{
    font-size: 2.4rem;
  }
  .case-item__body{
    margin-top: 4rem;
    padding-bottom: 0;
    gap: 5rem;
  }
  .case-item__text{
    padding-inline: 3rem;
  }
  .case-item__text *{
    font-size: 1.5rem;
    line-height: 1.8;
  }
  [data-paragraph="case01_01"] .case-item__text,
  [data-paragraph="case01_02"] .case-item__text,
  [data-paragraph="case01_03"] .case-item__text,
  [data-paragraph="case01_04"] .case-item__text{
    margin-top: 4rem;
  }
  .case-item__image--common{
    padding-block: 0;
    display: block;
    width: 21rem;
  }
  [data-paragraph="case01_02"] .po-item{
    top: 0;
    right: -5rem;
  }
  [data-case="case1"] .case-item__inner{
    padding-bottom: 8rem;
  }

  [data-paragraph="case02_01"] .case-item__text{
    margin-top: 1.1rem;
  }
  [data-paragraph="case02_02"] .case-item__text{
    margin-top: 4.7rem;
  }
  [data-paragraph="case02_03"] .case-item__text{
    margin-top: 4.4rem;
  }
  [data-paragraph="case02_04"] .case-item__text{
    margin-top: 5.6rem;
  }
  [data-paragraph="case02_02"] .po-item{
    top: 0;
    right: -4.5rem;
  }
  .case-item__feature-text{
    margin-top: 6rem;
    font-size: 2.4rem;
    line-height: 2.1;
    text-align: center;
    padding-inline: 0;
  }
  [data-paragraph="case03_01"] .case-item__text{
    margin-top: 2rem;
  }
  [data-paragraph="case03_02"] .case-item__text{
    margin-top: 4.8rem;
  }
  [data-paragraph="case03_03"] .case-item__text{
    margin-top: 3.6rem;
  }
  [data-paragraph="case03_04"] .case-item__text{
    margin-top: 5.6rem;
  }
  [data-paragraph="case03_02"] .po-item{
    top: -2rem;
    right: 0rem;
  }
  [data-paragraph="case04_01"] .case-item__text{
    margin-top: 2rem;
  }
  [data-paragraph="case04_02"] .case-item__text{
    margin-top: 7.3rem;
  }
  [data-paragraph="case04_03"] .case-item__text{
    margin-top: 6.5rem;
  }
  [data-paragraph="case04_04"] .case-item__text{
    margin-top: 5.6rem;
  }
  [data-paragraph="case04_02"] .po-item{
    top: -2rem;
    right: -2rem;
  }
  .story-bottom{
    background-image: url(../Contents/ThemeImage/top/bg_youtube_pc.jpg);
    padding-block: 8rem;
    display: grid;
    place-content: center;
  }
  .story-bottom__inner{
    padding-inline: 0;
    margin-inline: auto;
    /* width: min(90%,36.5rem); */
    width: 36.5rem;
  }
}

@media screen and (max-width: 767px){
  [data-case="case3"] .case-item__heading,
  [data-case="case4"] .case-item__heading{
    color: #fff;
  }
}
/* ------------------------------------------------
 Youtube
------------------------------------------------ */
.youtube{
  /* padding-bottom: 8.3rem; */
  padding-bottom: 0.7rem;
}
.youtube-body{
  margin-top: .7rem;  
}

@media screen and (min-width: 768px){
  .youtube{
    padding-bottom: 8rem;
  }
  .youtube-body{
    margin-top: 10rem;
  }
  .youtube-body__inner{
    width: 78rem;
    margin-inline: auto;
  }
}

/* ------------------------------------------------
 Voice(トップ用)
------------------------------------------------ */
.voice{
  padding-block: 4.7rem 3.4rem;
}
.voice__inner{
  padding-inline: 1rem;
  margin-inline: auto;
}
.voice__button-area{
  margin-top: 2.4rem;
  /* padding-inline: 4.5rem; */
  padding-inline: 3.5rem;
}
.voice-item--hidden {
  display: none;
}
.voice-list__unit--hidden {
  display: none;
}
.voice__button-area {
  display: none;
}
.voice__viewmore {
  margin-top: 2rem;
  padding-inline: 4.5rem;
  text-align: center;
}
.c-button--viewmore {
  background-color: #818181;
  color: #fff;
  /* background-color: #fff; */
  /* border: 0.1rem solid #FDB105; */
  border-radius: .8rem;
  /* color: #FDB105; */
  display: grid;
  place-content: center;
  width: 100%;
  height: 5.6rem;
  font-size: 1.7rem;
  letter-spacing: .05em;
  font-weight: var(--fw-bold);
  line-height: 1;
  cursor: pointer;
}
.voice-notice{
  font-size: 1rem;
  line-height: 1.8;
  text-align: center;
  margin-top: 1.5rem;
}
@media screen and (min-width: 768px){
  .voice{
    margin-top: 1.8rem;
    padding-block: 10rem;
  }
  .voice__inner{
    padding-inline: 0;
    width: min(90%, 98rem);
  }
  .voice__button-area{
    margin-top: 6rem;
    padding-inline: 0;
  }
  .voice__viewmore {
    margin-top: 3rem;
    padding-inline: 0;
  }
  .c-button--viewmore {
    max-width: 40rem;
    border-radius: 1.6rem;
    height: 7rem;
    font-size: 2rem;
    margin-inline: auto;
  }
  .voice-notice{
    font-size: 1.2rem;
  }
}

/* ------------------------------------------------
 Service Detail
------------------------------------------------ */
/* Common */
.service-detail{
  margin-block: 2.5rem 2.9rem;
}
.service-detail__heading{
  display: block;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: .06em;
  font-family: var(--font-ja-mincho);
  text-align: center;
}
.service-detail__sub-heading{
  display: block;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: .06em;
  font-family: var(--font-ja-mincho);
  text-align: center;
  color: #fff;
  background-color: var(--color-primary);
  padding: 2.267rem 1rem;
}
.service-detail__contents-container{
  width: 100%;
  margin-inline: auto;
}
.service-detail__text-container--s1{
  padding-inline: 2.8rem;
}
.service-detail__text-container--s2{
  padding-inline: 3.25rem;
}
/* .service-detail__text-container--large{
  padding-inline: ;
} */
.service-detail__text--s1{
  font-size: 1.4rem;
  line-height: 1.8;
}
.service-detail__text--s2{
  font-size: 1.4rem;
  line-height: 2;
}
.service-detail__text--s3{
  font-size: 1.4rem;
  line-height: 2.7;
}
.service-detail__text--s4{
  font-size: 1.4rem;
  line-height: 1.8;
}
.service-detail__body{
  margin-top: 3.1rem;
}
/* Premise */
.service-premise__inner{
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../Contents/ThemeImage/top/bg_service_detail_sp.jpg);

  color: #fff;
  padding-block: 4.3rem 4.6rem;
}
.era-stock-message{
  text-align: center;
  font-weight: var(--fw-bold);
  font-size: 1.56rem;
  line-height: 1.66;
}
.era-list{
  display: flex;
  justify-content: center;
  gap: 3.3rem;
  margin-top: 3.4rem;
}
.era-list-side{
  display: grid;
  gap: 1.8rem;
}
.era-list-side li{
  font-size: 1.7rem;
  line-height: 1;
  font-family: var(--font-ja-mincho);
  letter-spacing: 0.02em;
}
.service-premise__inner .era-notice{
  color: #fff;
}
.era-notice{
  margin-top: 4.5rem;
  font-size: 1.2rem;
  padding-inline: 2rem 1.5rem;
  line-height: 1.8;
}

/* Service About */
.service-about{
  margin-top: 3.9rem;
}
.service-about__head-description{
  margin-top: 3.4rem;
}
.service-about__body{
  margin-top: 2.5rem;
  display: grid;
  gap: 4.1rem;
}
.swhiskey-types__description{
  margin-top: 2.4rem;
}
.service-price__description{
  margin-top: 2.9rem;
}
.service-price__heading{
  font-size: 1.8rem;
  line-height: 1;
  text-align: center;
  font-weight: var(--fw-semibold);
  font-family: var(--font-ja-mincho);
}
.service-price__price{
  margin-top: 2rem;
  font-size: 1.5rem;
  line-height: 1;
  text-align: center;
}
.service-price__notice-list{
  margin-block: 2rem 2.9rem;
  display: grid;
  gap: .1rem;
}
.service-price__notice-list li{
  font-size: 1.2rem;
  line-height: 2;
  text-align: center;
}
.option__description{
  margin-top: 2.9rem;
  display: grid;
  gap: 1.6rem;
}
.option__notice{
  font-size: 1.4rem;
}
.service-quality__body{
  margin-top: 3.8rem;
}
.service-quality{
  margin-top: 3.2rem;
}
.service-detail__heading{
  text-align: center;
  font-family: var(--font-ja-mincho);
  line-height: 1;
  letter-spacing: 0.06em;
}
.service-quality__head{
  text-align: center;
}
.service-quality__head-description{
  margin-top: 2rem;
  font-family: var(--font-ja-mincho);
}
.distillery-introduction-list li + li{
  margin-top: 3rem;
}
.distillery-introduction-item figure{
  display: grid;
  gap: 3rem;
}
.distillery-introduction-item figure figcaption{
  padding-inline: 2.8rem;
  font-size: 1.1rem;
  line-height: 1.8;
}
.distillery-introduction-item p{
  margin-top: 0.5rem;
}



@media screen and (min-width: 768px){
  /* Common */
  .service-detail{
    margin-block: 10rem;
  }
  .service-detail__heading{
    font-size: 2.6rem;
  }
  .service-detail__sub-heading{
    font-size: 2.6rem;
    padding: 2.7rem 1rem;
  }
  .service-detail__contents-container{
    width: var(--container-default-top);
  }
  .service-detail__text-container--s1{
    padding-inline: 4.1rem;
  }
  .service-detail__text-container--s2{
    /* padding-inline: 3.25rem; */
    padding-inline: 4.1rem;
  }
  /* .service-detail__text-container--large{
    padding-inline: ;
  } */
  .service-detail__text--s1{
    font-size: 1.6rem;
  }
  .service-detail__text--s2{
    font-size: 1.5rem;
  }
  .service-detail__text--s3{
    font-size: 2rem;
  }
  .service-detail__text--s4{
    font-size: 1.6rem;
  }

  .service-detail__body{
    margin-top: 5rem;
  }
  /* Premise */
  .service-premise__inner{
    background-image: url(../Contents/ThemeImage/top/bg_service_detail_pc.jpg);
    padding-block: 11rem;
  }
  .era-stock-message{
    font-size: 2.6rem;
    line-height: 1.9;
  }
  .era-list{
    gap: 8.3rem;
    margin-top: 5rem;
  }
  .era-list-side{
    gap: 4rem;
  }
  .era-list-side li{
    font-size: 2.8rem;
  }
  .era-notice{
    margin-top: 6rem;
    font-size: 1.8rem;
    text-align: center;
    padding-inline: 0;
  }

  /* Service About */
  .service-about{
    margin-top: 10rem;
  }
  .service-about__head-description{
    margin-top: 5rem;
  }
  .service-about__head-description + .service-about__head-description{
    margin-top: 4rem;
  }
  .service-about__body{
    margin-top: 8rem;
    gap: 6rem;
  }
  .swhiskey-types__description{
    margin-top: 4rem;
  }
  .service-detail-common__body{
    margin-top: 2rem;
  }
  .service-price__description{
    margin-top: 2.9rem;
  }
  .service-price__heading,
  .service-detail__heading{
    font-size: 2.6rem;
  }
  .service-price__price{
    margin-top: 3rem;
    font-size: 1.8rem;
  }
  .service-price__notice-list{
    margin-block: 3rem 4rem;
    gap: .1rem;
  }
  .service-price__notice-list li{
    font-size: 1.4rem;
  }
  
  .option__description{
    margin-top: 4rem;
  }

  .option__description.service-detail__text-container--s1{
    padding-inline: 8rem;
  }
  .service-quality{
    margin-top: 8rem;
  }
  .service-quality__head-description{
    margin-top: 4rem;
  }

  .service-quality__body{
    margin-top: 6rem;
  }
  .distillery-introduction-list{
    margin-top: 4rem;
  }
  .distillery-introduction-list li + li{
    margin-top: 4rem;
  }

  .distillery-introduction-item figure{
    grid-template-columns: 50% 45%;
    gap: 5%;
    align-items: center;
  }
  .distillery-introduction-item.introduction--reverse picture{
    order: 2;
  }
  .distillery-introduction-item.introduction--reverse figcaption{
    order: 1;
    margin-left: 4rem;
  }
  .distillery-introduction-item figure figcaption{
    padding-inline: 2.8rem;
    font-size: 1.1rem;
    line-height: 1.8;
  }
  .distillery-introduction-item p{
    margin-top: 0.5rem;
  }
}


/* ------------------------------------------------
  news
------------------------------------------------ */
.news__inner{
  width: var(--container-default-top);
  margin-inline: auto;
  padding-block: 4.4rem 3.6rem;
  padding-inline: 1rem;
}

.news-list-area--top .news-item .news-item__content--detail{
  display: none;
}

.news__button-area {
  margin-top: 2.2rem;
  padding-inline: 4.5rem;
}

@media screen and (min-width: 768px){
  .news__inner{
    padding-block: 6rem;
    padding-inline: 0;
  }
  .news__button-area {
    margin-top: 5rem;
    padding-inline: 0;
  }
}

/* ------------------------------------------------
  Attention
------------------------------------------------ */
.attention__inner{
  width: 100%;
  margin-inline: auto;
  padding-block: 4.1rem 2.8rem;
  padding-inline: 2.8rem;
}
.attention__body{
  margin-top: 3.8rem;
  display: grid;
  gap: 2.8rem;
  font-size: 1.1rem;
  line-height: 1.8;
}
@media screen and (min-width: 768px){
  .attention__inner{
    width: min(90%,58rem);
    padding-block: 8rem 4rem;
    padding-inline: 0;
  }
  .attention__body{
    margin-top: 4rem;
    gap: 2.8rem;
    font-size: 1.5rem;
  }
}

/* ------------------------------------------------
  Faq
------------------------------------------------ */
.faq__inner{
  width: var(--container-default-top);
  margin-inline: auto;
  padding-block: 4.4rem 3.6rem;
  padding-inline: 1rem;
}
.faq__body{
  margin-top: 2.9rem;
}
.faq-list{
  display: grid;
  gap: 1.1rem;
}




@media screen and (min-width: 768px){
  .faq__inner{
    padding-block: 6rem;
    padding-inline: 0;
  }
  .faq__body{
    margin-top: 4rem;
  }
  .faq-list{
    gap: 1rem;
  }

}


.faq-heading__title{
  display: flex;
  flex-wrap: nowrap;
  /* align-items: center; */
  gap: 2.2rem;
  font-size: 1.4rem;
  line-height: 2;
}
.faq-heading__title::before{
  content: 'Q';
  font-family: var(--font-ja-mincho);
  font-size: 2rem;
}
@media (min-width: 769px) {
  .faq-heading__title{
    gap: 1.6rem;
    font-size: 1.6rem;
    line-height: 1.6;
    position: relative;
    padding-left: 8.5ch;
    padding-top: 1rem;
  }
  .faq-heading__title::before{
    font-size: 4rem;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 1;
  }
}



@media (hover: hover) and (pointer: fine) {
  .home-mv-slider__pagination .swiper-pagination-bullet,
  .case-tab{
    transition: opacity var(--transition-default);
  }
  .home-mv-slider__pagination .swiper-pagination-bullet:hover,
  .case-tab:hover{
    opacity: var(--hover-opacity);
  }
}




@media screen and (min-width: 768px){

}
  