@charset "UTF-8";
/*----------------------------
    下層共通
----------------------------*/
/* ── Layout ── */
.under{
  padding-block: 160px 0;
}
@media only screen and (max-width: 767px) {
  .under{
    padding-block: 100px 0;
  }
}

.under-bg{
  background-color: var(--color-bg);
}

.no-border{
    border:none;
    text-decoration:none;
}

/* ── Archive ── */
.archive-title{
  margin-top: 50px;
}
@media only screen and (max-width: 767px) {
  .archive-title{
    margin: 0;
  }
}

/* ── Detail ── */
.sub-title{
    font-size:24px;
    margin-bottom: 15px;
}

.article-title{
  font-size: clamp(32px, var(--size-40), 36px);
  font-weight: 500;
  margin-bottom: 30px;
  white-space: pre-line;
}
@media only screen and (max-width: 767px) {
  .article-title{
    line-height: 1.5;
    margin-bottom: 16px;
    white-space: normal;
  }
}
.article-category__list{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Pager ── */
ul.page-numbers{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin: 100px auto 0;
  .page-numbers{
    background-color: var(--color-bg);
    border-radius: 10px;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    height: 36px;
    width: 36px;
    &.current{
      background-color: #333;
      color: var(--color-white);
    }
    &.dots{
      background: none;
      color: #333;
    }
    &.prev,
    &.next{
      background: none;
    }
  }
}

/*----------------------------
    Service共通
----------------------------*/
.service-page{
  .service-content__title{
    gap: 20px;
    span{
      opacity: 1;
      &:not(.service-content__number){
        font-size: clamp(16px, var(--size-32), 20px);
      }
    }
  }
  .section-title__sub{
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    font-size: clamp(32px, var(--size-60), 50px);
    .ja{
      font-size: clamp(13px, var(--size-20), 14px);
      transform: translateY(-1px);
    }
  }
}

/*----------------------------
    Service一覧
----------------------------*/
.service-archive{
  .section-title{
    margin-block: 52px 60px;
  }
  + .footer{
    padding-top: 160px;
  }
}
@media only screen and (max-width: 767px) {
  .service-archive{
    .section-title{
      margin-block: 20px 30px;
    }
    + .footer{
      padding-top: 120px;
      .page-top{
        .btn__icon-square{
          background-color: var(--color-bg-black);
        }
        .btn__icon-circle::after{
          background-image: url(../img/icon_arrow_white.svg);
        }
      }
    }
  }
}

.archive-service__wrap{
  padding-block: 100px 165px;
}
@media only screen and (max-width: 767px) {
  .archive-service__wrap{
    padding-block: 70px 63px;
  }
}

.archive-service__content{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  &:not(:last-child){
    margin-bottom: 170px;
  }
  .service-content__inner{
    max-width: 742px;
    width: 100%;
  }
  .service-content__title{
    margin-bottom: 40px;
  }
  .service-content__lead{
    font-size: clamp(20px, var(--size-32), 24px);
  }
  .service-image{
    border-radius: 60px;
    max-width: 338px;
    transform: none;
    padding: 10px;
    position: static;
    img{
      transform: none;
    }
  }
  .service-content__lead + .lead-text,
  .service-content__items,
  .service-image,
  .service-image img{
    opacity: 1;
  }
}

@media only screen and (max-width: 767px) {
  .archive-service__content{
    flex-direction: column-reverse;
    &:not(:last-child){
      margin-bottom: 80px;
    }
    .service-content__title{
      margin-bottom: 20px;
    }
    .service-content__items{
      align-items: flex-start;
      flex-direction: column;
    }
    .service-image{
      max-width: 100%;
    }
  }
}

/* ── Solution ── */
.service-solution{
  background-color: var(--color-white);
  padding-block: 100px;
  .lead-text{
    margin-bottom: 70px;
  }
}
@media only screen and (max-width: 767px) {
  .service-solution{
    border-radius: 15px;
    margin: 0 20px 68px;
    padding-block: 60px;
    .inner{
      padding-inline: 10px;
    }
  }

  .solution-image{
    overflow-x: scroll;
    padding-bottom: 30px;
    margin: 0 -10px;
    width: 100%;
    -ms-overflow-style: none;
    scrollbar-width: none;
    img{
      height: 390px;
      max-width: none;
    }
  }
  .solution-image::-webkit-scrollbar {
    display: none;
  }

  /* ── Scrollbar ── */
  .solution-scrollbar {
    background: #D9D9D9;
    border-radius: 999px;
    margin: auto;
    padding: 1px;
    height: 6px;
    width: 100%;
  }

  .solution-scrollbar__thumb {
    background: #909090;
    border-radius: 999px;
    height: 100%;
    width: 50px;
  }
}

/*----------------------------
    Service詳細
----------------------------*/
.service-article{
  margin-block: 35px 0;
  .common-btn{
    font-size: 14px;
    margin: 0 auto 70px;
  }
}
.service-article__header{
  margin-bottom: 53px;
  .service-content__title{
    margin-bottom: 30px;
  }
  .article-title{
    font-size: clamp(24px, var(--size-40), 36px);
    font-weight: bold;
  }
}
@media only screen and (max-width: 767px) {
  .service-article__header{
    margin-bottom: 70px;
    .service-content__title,
    .article-title{
      margin-bottom: 15px;
    }
    .article-title{
      font-weight: 500;
    }
    .lead-text{
      line-height: 1.75;
    }
  }
}

/* ── Swiper ── */
.works-swiper__wrap{
  .works-swiper{
    margin-left: calc(50% - 50vw);
    padding-inline: 80px;
    height: calc(1200px * 9 / 16 + 44px);
    width: 100vw;
  }
}
@media only screen and (max-width: 1200px) {
  .works-swiper__wrap{
    .works-swiper{
      height: calc((100vw - 40px) * 9 / 16 + 44px);
    }
  }
}
@media only screen and (max-width: 767px) {
  .works-swiper__wrap{
    margin-bottom: 50px;
    .works-swiper{
      padding-inline: 18px;
      height: auto;
    }
  }
}
.works-swiper{
  visibility: hidden;
  &.is-ready {
    visibility: visible;
  }
  .swiper-wrapper{
    display: flex;
    align-items: center;
    transition-timing-function: ease-out;
  }
  .swiper-slide {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 1200px;
  }
  .swiper-slide-active .img-box {
    aspect-ratio: 16 / 9;
  }
  .img-box {
    aspect-ratio: 100 / 47;
     transition: 0.3s cubic-bezier(0.22, 1, 0.36, 1); 
  }
  img{
    border-radius: 10px;
  }
  .caption{
    display: none;
    font-size: clamp(13px, var(--size-24), 18px);
    font-weight: 500;
    line-height: 2;
    margin-top: 8px;
  }
  .swiper-slide-active .caption {
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  .works-swiper{
    .swiper-slide:not(.swiper-slide-active) .img-box {
      aspect-ratio: 16 / 9;
    }
    .caption{
      display: block;
    }
  }
}
@media (hover: hover) {
  .works-swiper__link:hover{
    img{
      transform: scale(0.98);
    }
  }
}
.works-swiper__thumbnail{
  margin-block: 50px;
  .swiper-wrapper{
    display: flex;
    gap: 24px;
  }
  .img-box{
    aspect-ratio: 16 / 9;
    cursor: pointer;
    max-width: 180px;
    width: calc((100% - 120px) / 6);
  }
}

.works-swiper__nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translate(-50%, -50%);
  width: min(1200px, calc(100% - 160px));
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  .swiper-nav__btn{
    height: 40px;
    width: 40px;
    position: relative;
    &::after{
      height: 8px;
      width: 8px;
    }
  }
  .swiper-nav__prev{
    left: -1.5px;
    transform: translateX(-100%);
  }
  .swiper-nav__next{
    right: -1.5px;
    transform: translateX(100%);
  }
}
@media only screen and (max-width: 767px) {
  .works-swiper__nav{
    padding: 0;
    width: 100%;
    top: 43%;
    .swiper-nav__btn{
      height: 30px;
      width: 30px;
    }
    .swiper-nav__prev{
      left: 36px;
    }
    .swiper-nav__next{
      right: 36px;
    }
  }
}

/* ── Strength ── */
.service-strength{
  margin-block: 100px;
  .section-title__sub{
    margin-bottom: 70px;
  }
}
@media only screen and (max-width: 767px) {
  .service-strength{
    margin-block: 70px;
    .section-title__sub{
      margin-bottom: 47px;
    }
  }
}
.strength-item{
  display: flex;
  align-items: flex-start;
  gap: 48px;  
  &:not(:last-child){
    margin-bottom: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .strength-item{
    flex-direction: column;
    position: relative;
  }
}
.strength-icon{
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  width: 100px;
}
@media only screen and (max-width: 767px) {
  .strength-icon{
    width: 70px;
    position: absolute;
    top: 0;
    left: 0;
  }
}
.strength-title{
  display: flex;
  gap: 8px;
  font-size: clamp(20px, var(--size-32), 24px);
  font-weight: 500;
  margin-block: -9px 16px;
}
@media only screen and (max-width: 767px) {
  .strength-title{
    line-height: 1.8;
    min-height: 70px;
    padding-left: 84px;
    margin-bottom: 20px;
  }
}
.strength-heading br {
  display: none;
}
@media only screen and (max-width: 767px) {
  .strength-heading br {
    display: block;
  }
}

/* ── Flow ── */
.service-flow{
  padding-bottom: 110px;
}
@media only screen and (max-width: 767px) {
  .service-flow{
    padding-bottom: 58px;
  }
}
.step-list{
  display: flex;
  gap: 34px 0;
  flex-wrap: wrap;
  margin: 0 -27px 27px 27px;
}
@media only screen and (max-width: 767px) {
  .step-list{
    flex-direction: column;
    gap: 0;
    margin: 47px 0 40px;
  }
}
.step-item{
  background-color: var(--color-white);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  mask-image: url("../img/flow_arrow.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
  margin-left: -27px;
  min-height: 204px;
  max-width: 320px;
  width: 100%;
  &:first-child{
    mask-image: url("../img/flow_first.svg");
  }
}
@media only screen and (max-width: 767px) {
  .step-item{
    justify-content: flex-start;
    mask-image: url("../img/flow_arrow_sp.svg");
    margin: 0 0 -40px;
    min-height: 229px;
    max-width: 350px;
    &:first-child{
      mask-image: url("../img/flow_first_sp.svg");
      margin-bottom: -30px;
      min-height: 171px;
      .step-inner{
        padding-block: 28px;
      }
    }
  }
}
.step-inner{
  font-size: clamp(12px, var(--size-20), 14px);
  font-weight: 500;
  min-width: 200px;
  padding: 20px 60px;
}
@media only screen and (max-width: 767px) {
  .step-inner{
    padding: 48px 28px;
  }
}
.step-number{
  color: var(--bg-color);
  display: block;
  font-size: 14px;
  margin-bottom: 12px;
}
@media only screen and (max-width: 767px) {
  .step-number{
    margin-bottom: 0;
  }
}
.step-title{
  font-size: clamp(18px, var(--size-24), 20px);
  margin-bottom: 12px;
}
@media only screen and (max-width: 767px) {
  .step-title{
    margin-bottom: 8px;
  }
}
.step-text{
  white-space: pre-line;
}
@media only screen and (max-width: 767px) {
  .step-text{
    white-space: normal;
  }
}
.service-flow__text{
  font-size: 12px;
}

/* ── Related ── */
.related-wrap{
  background-color: var(--color-white);
  border-radius: 10px 10px 0 0;
  padding-block: 98px 176px;
}
@media only screen and (max-width: 767px) {
  .related-wrap{
    padding-block: 60px 117px;
  }
}
.related-interview{
  .section-title__sub{
    margin-bottom: 60px;
  }
  .archive-works__list{
    gap: 60px;
    padding: 0;
  }
  .archive-works__item{
    width: calc((100% - 120px) / 3);
  }
  .works-name{
    font-size: clamp(12px, var(--size-20), 14px);
  }
}
@media only screen and (max-width: 767px) {
  .related-interview{
    .section-title__sub{
      margin-bottom: 27px;
    }
    .archive-interview__link{
      gap: 15px;
    }
    .archive-works__list{
      gap: 40px;
    }
    .archive-works__item{
      width: 100%;
    }
  }
}
.related-services{
  margin-block: 100px 120px;
  .section-title__sub{
    margin-bottom: 54px;
  }
}
@media only screen and (max-width: 767px) {
  .related-services{
    margin-block: 45px 106px;
    .section-title__sub{
      margin-bottom: 30px;
    }
  }
}

/*----------------------------
    Works一覧
----------------------------*/
.works-archive{
  margin-bottom: 110px;
}
.works-search__wrap{
  background-color: var(--color-bg);
  border-radius: 10px;
  font-size: clamp(13px, var(--size-20), 14px);
  font-weight: 500;
  padding: 30px 40px;
  margin-block: 60px 90px;
}
@media only screen and (max-width: 767px) {
  .works-search__wrap{
    padding: 12px;
    margin-block: 40px 70px;
  }
}
.works-search__content{
  display: flex;
  align-items: center;
  gap: 20px;
  &:not(:last-child){
    margin-bottom: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .works-search__content{
    align-items: flex-start;
    flex-direction: column;
  }
}
.works-search__category{
  min-width: 80px;
}
.works__service{
  align-self: flex-start;
  line-height: 46px;
}
@media only screen and (max-width: 767px) {
  .works__service{
    line-height: 1.5;
  }
}
.works-search__list{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  .service-content__link{
    color: var(--color-primary);
    font-size: clamp(13px, var(--size-20), 14px);
    &.is-current{
      background-color: var(--bg-color);
      color: var(--color-white);
      &::after{
        background-color: var(--color-white);
        transform: translateY(-50%) scale(1.4);
      }
    }
  }
}
.works-search__filter{
  background-color: #fff;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 8px 8px 20px;
  position: relative;
  width: 180px;
  &::before{
    content: "";
    border-top: 1.5px solid var(--color-white);
    border-right: 1.5px solid var(--color-white);
    cursor: pointer;
    display: block;
    margin: auto;
    width: 7px;
    height: 7px;
    transform: rotate(135deg);
    position: absolute;
    top: -2px;
    right: 20px;
    bottom: 0;
  }
  &::after{
    content: "";
    background-color: var(--color-bg-black);
    border-radius: 8px;
    display: block;
    height: 30px;
    width: 30px;
  }
  &.is-active{
    &::before{
      transform: rotate(-45deg);
      top: 2px;
    }
    &::after{
      background-color: var(--color-light-gray);
    }
  }
}
.works-search__service{
  border-top: 1px solid var(--color-light-gray);
  display: none;
  margin-top: 25px;
  padding-top: 25px;
  &.is-show{
    display: block;
  }
}
.works__category-label{
  background-color: var(--color-white);
  border-radius: 5px;
  cursor: pointer;
  display: block;
  font-size: clamp(12px, var(--size-18), 13px);
  line-height: 1.5;
  padding: 6px 15px;
  &.is-current{
    background-color: var(--color-light-gray);
    color: var(--color-white);
  }
}
.archive-works__list{
  display: flex;
  gap: 50px 30px;
  flex-wrap: wrap;
  padding-bottom: 60px;
}
@media only screen and (max-width: 767px) {
  .archive-works__list{
    gap: 40px;
    padding-bottom: 100px;
  }
}
.archive-works__item{
  width: calc((100% - 60px) / 3);
}
@media only screen and (max-width: 767px) {
  .archive-works__item{
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .archive-works__image{
    flex-shrink: 0;
    width: 170px;
  }
}
.archive-works__text{
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.works-category__list{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
@media only screen and (max-width: 767px) {
  .works-category__list{
    margin-top: 4px;
  }
}

.archive-works__link{
  display: flex;
  flex-direction: column;
  gap: 15px;
  .works-name{
    margin: 0;
  }
}
@media (hover: hover) {
  .archive-works__link:hover{
    .archive-works__image{
      transform: scale(0.97);
    }
    .works-name{
      text-decoration: underline;
    }
  }
}
@media only screen and (max-width: 767px) {
  .archive-works__link{
    align-items: flex-start;
    flex-direction: row;
    gap: 10px;
  }
}
.works-territory__label{
  background-color: var(--bg-color);
  color: var(--text-color);
}

/*----------------------------
    Works詳細
----------------------------*/
.works-detail{
  .breadcrumb{
    margin: 0 40px 40px 0;
  }
}
.works-mv{
  aspect-ratio: 2 / 1;
  margin-block: 40px 100px;
}
@media only screen and (max-width: 767px) {
  .works-mv{
    margin-block: 40px;
  }
}
.works-article__content{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 70px;
  margin-bottom: 120px;
}
@media only screen and (max-width: 767px) {
  .works-article__content{
    flex-direction: column;
    gap: 40px;
    margin-bottom: 20px;
  }
}
.works-content{
  display: flex;
  flex-direction: column;
  gap: 50px;
  line-height: 2;
  a{
    text-decoration: underline;
  }
}
@media only screen and (max-width: 767px) {
  .works-content{
    gap: 40px;
    font-size: 16px;
  }
}
.works-credit{
  background-color: var(--color-bg);
  border-radius: 10px;
  flex-shrink: 0;
  padding: 30px;
  width: 300px;
}
@media only screen and (max-width: 767px) {
  .works-credit{
    width: 100%;
  }
}
.works-credit__title{
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 25px;
}
.works-credit__list{
  > dt{
    color: var(--color-light-gray);
    font-size: 11px;
    margin-bottom: 10px;
  }
  > dd{
    font-size: 13px;
    &:not(:last-child){
      margin-bottom: 25px;
    }
  }
}
.works-credit__role{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 20px;
  > dt{
    font-size: 11px;
    width: 100px;
  }
  > dd{
    font-size: 13px;
    width: calc(100% - 120px);
  }
}
.works-solution__list{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 10px;
  font-size: 11px;
}
.works-article__images{
  display: flex;
  flex-wrap: wrap;
  gap: 35px 50px;
  margin-bottom: 120px;
}
@media only screen and (max-width: 767px) {
  .works-article__images{
    gap: 30px;
    margin-bottom: 100px;
  }
}
.works-article__item{
  width: calc((100% - 50px) / 2);
}
@media only screen and (max-width: 767px) {
  .works-article__item{
    width: 100%;
  }
}
.works-figure img{
  height: 360px;
}
@media only screen and (max-width: 767px) {
  .works-figure img{
    height: 220px;
  }
}
.works-figure__caption{
  color: var(--color-dark-gray);
  font-size: 13px;
  margin-top: 15px;
}
@media only screen and (max-width: 767px) {
  .works-figure__caption{
    font-size: 12px;
    margin-top: 10px;
  }
}
@media (hover: hover) {
  .works-link:hover{
    .works-figure img{
      transform: scale(0.97);
    }
    .works-figure__caption{
      text-decoration: underline;
    }
  }
}
.works-connection{
  background-color: var(--color-bg);
  border-radius: 10px 10px 0 0;
  padding-block: 70px 100px;
}
.works-service{
  margin-bottom: 100px;
}
.works-service__list{
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
@media only screen and (max-width: 767px) {
  .works-service__list{
    flex-direction: column;
  }
}
.works-service__item{
  width: calc((100% - 60px) / 3);
}
@media only screen and (max-width: 767px) {
  .works-service__item{
    width: 100%;
  }
}
.works-related{
  --color-bg: var(--color-white);
  margin-bottom: 60px;
}
@media only screen and (max-width: 767px) {
  .works-related{
    margin-bottom: 40px;
    .archive-works__list{
      margin: 0;
    }
  }
}

/* ── Modal ── */
.works-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
  position: fixed;
  inset: 0;
  z-index: 9999;
  &.is-active {
    visibility: visible;
    opacity: 1;
  }
}
.works-modal__overlay {
  background: rgba(255,255,255,0.8);
  position: absolute;
  inset: 0;
}
.works-modal__content {
  max-width: 1000px;
  max-height: 90vh;
  position: relative;
  z-index: 1;
}
.works-modal__img {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
}
.works-modal__caption {
  color: var(--color-dark-gray);
  text-align: center;
  margin-top: 10px;
}
.works-modal__close {
  cursor: pointer;
  display: block;
  line-height: 1;
  height: 20px;
  width: 20px;
  position: absolute;
  top: -20px;
  right: -20px;
  &::before,
  &::after{
    content: "";
    background: var(--color-primary);
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 24px;
  }
  &::before {
    transform: translate(-50%,-50%) rotate(45deg);
  }
  &::after {
    transform: translate(-50%,-50%) rotate(-45deg);
  }
}

/*----------------------------
    インタビュー一覧
----------------------------*/
.interview-archive{
  padding-bottom: 50px;
}
@media only screen and (max-width: 767px) {
  .interview-archive{
    padding-bottom: 20px;
    .archive-title{
      flex-direction: column;
    }
  }
}
.interview-lead{
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
  line-height: 2;
  margin-block: 60px 100px;
}
@media only screen and (max-width: 767px) {
  .interview-lead{
    align-items: flex-start;
    gap: 20px;
    margin-block: 30px 70px;
    img{
      width: 70px;
    }
  }
}
.archive-interview__list{
  display: flex;
  flex-wrap: wrap;
  gap: 80px;
  margin-bottom: 80px;
}
@media only screen and (max-width: 767px) {
  .archive-interview__list{
    gap: 50px;
    margin-bottom: 100px;
  }
}
.archive-interview__item{
  width: calc((100% - 80px) / 2);
}
@media only screen and (max-width: 767px) {
  .archive-interview__item{
    width: 100%;
  }
}
@media (hover: hover) {
  .archive-interview__link:hover{
    .archive-interview__image{
      transform: scale(0.97);
    }
  }
}
@media only screen and (max-width: 767px) {
  .archive-interview__link{
    flex-direction: column;
    .archive-works__image{
      width: 100%;
    }
  }
}
.archive-interview__image{
  height: 350px;
}
@media only screen and (max-width: 767px) {
  .archive-interview__image{
    height: 219px;
  }
}
.archive-interview__info{
  display: flex;
  flex-direction: column;
  gap: 15px;
}
@media only screen and (max-width: 767px) {
  .archive-interview__info{
    gap: 10px;
  }
}
.archive-interview__client{
  background-image: url(../img/icon_triangle.svg);
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center left;
  font-weight: 500;
  padding-left: 25px;
}
.interview-category__label{
  background-color: var(--color-white);
}
.archive-interview__scroll{
  padding-block: 10px;
  .interview-scroll__list{
    color: #D9D9D9;
    gap: 55px;
  }
}

/*----------------------------
    インタビュー詳細
----------------------------*/
.interview-article{
  padding-bottom: 55px;
}
.article-header{
  margin-block: 50px 60px;
  .article-title{
    margin-bottom: 15px;
  }
}
@media only screen and (max-width: 767px) {
  .article-header{
    margin-block: 20px 27px;
  }
}
.interview-client{
  font-size: 14px;
  font-weight: 500;
  margin-block: 15px 20px;
}
.interview-mv{
  aspect-ratio: 2 / 1;
  margin-left: calc((100% - 100vw + 40px) / 2);
  margin-bottom: 100px;
  width: calc(100vw - 40px);
}
@media only screen and (max-width: 767px) {
  .interview-mv{
    margin: 0 0 28px;
    width: 100%;
  }
}
.interview-layout__section{
  color: var(--color-dark-gray);
  line-height: 2;
  margin-bottom: 100px;
}
@media only screen and (max-width: 767px) {
  .interview-layout__section{
    margin-bottom: 70px;
  }
}
.interview-meets__title{
  color: var(--color-primary);
  font-size: clamp(24px, var(--size-36), 32px);
  font-weight: 500;
  line-height: 1.8;
  margin-block: 20px 45px;
}
@media only screen and (max-width: 767px) {
  .interview-meets__title{
    line-height: 1.5;
    margin-block: 20px 40px;
  }
}
.interview-layout{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 50px;
  &.interview-layout__reverse{
    flex-direction: row-reverse;
  }
}
@media only screen and (max-width: 767px) {
  .interview-layout{
    flex-direction: column;
    &.interview-layout__reverse{
      flex-direction: column;
    }
  }
}
.interview-image__wrap{
  flex-shrink: 0;
  width: 420px;
  .interview-image__caption{
    margin-top: 15px;
  }
}
@media only screen and (max-width: 767px) {
  .interview-image__wrap{
    display: flex;
    align-items: flex-end;
    gap: 10px;
    width: 100%;
    img{
      width: 50%;
    }
  }
}
.interview-image__square{
  aspect-ratio: 1 / 1;
}
.interview-image__caption{
  font-size: clamp(12px, var(--size-20), 14px);
  line-height: 1.8;
  margin-top: 10px;
}
.caption-right{
  text-align: right;
}
.interview-layout__image{
  aspect-ratio: 2 / 1;
  margin-left: calc((100% - 100vw + 40px) / 2);
  width: calc(100vw - 40px);
}
@media only screen and (max-width: 767px) {
  .interview-layout__image{
    margin: 0;
    width: 100%;
  }
}
.interview-carousel__wrap{
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  position: relative;
  width: 100vw;
  .interview-carousel__item{
    width: 640px;
  }
}
@media only screen and (max-width: 767px) {
  .interview-carousel__wrap{
    .interview-carousel__item{
      width: 80%;
    }
    .interview-image__caption{
      margin-top: 5px;
    }
  }
}
.interview-carousel_images{
  display: flex;
  .img-box{
    aspect-ratio: 8 / 5;
  }
}
.interview-carousel__nav{
  .swiper-nav__btn{
    top: calc(50% - 30px);
    z-index: 2;
  }
  .swiper-nav__prev{
    left: 20px;
  }
  .swiper-nav__next{
    right: 20px;
  }
}
.interview-credit{
  background-color: var(--color-button-secondary);
  border-radius: 10px;
  padding: 30px 60px 40px;
  margin-bottom: 120px;
}
@media only screen and (max-width: 767px) {
  .interview-credit{
    padding: 30px;
    margin-bottom: 0;
  }
}
.interview-credit__other{
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 10px;
}
@media only screen and (max-width: 767px) {
  .interview-credit__other{
    flex-direction: column;
    gap: 25px;
    margin-bottom: 25px;
  }
}
.interview-credit__list{
  > dd{
    font-size: 11px;
    &:not(:last-child){
      margin-bottom: 10px;
    }
  }
}
@media only screen and (max-width: 767px) {
  .interview-credit__list{
    > dd{
      &:not(:last-child){
        margin-bottom: 25px;
      }
    }
  }
}

.interview-others{
  background-color: var(--color-white);
  padding-block: 70px 60px;
  .archive-works__list{
    gap: 60px;
    padding-bottom: 100px;
  }
  .archive-works__item{
    width: calc((100% - 120px) / 3);
  }
}
@media only screen and (max-width: 767px) {
  .interview-others{
    padding-block: 50px;
    .archive-works__list{
      gap: 50px;
      padding-bottom: 40px;
    }
    .archive-works__item{
      width: 100%;
    }
  }
}

/*----------------------------
    Shop一覧
----------------------------*/
.shop-lead{
  font-size: 14px;
  margin-block: 60px;
}
@media only screen and (max-width: 767px) {
  .shop-lead{
    margin-block: 30px 37px;
  }
}
.shop-area__wrap{
  padding-block: 90px 100px;
  position: relative;
  &::before {
    content: "";
    background-image: url(../img/interview_illust.png);
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    height: clamp(121px, var(--size-200), 170px);
    width: clamp(90px, var(--size-170), 126px);
    /*opacity: 0;*/
    /*transform: translateY(40px) scale(0.7);*/
    position: absolute;
    top: 50px;
    right: 5px;
    z-index: 1;
  }
  /*&.is-visible::before {*/
  /*  animation: illust-float-in 0.25s cubic-bezier(0.22, 1, 0.36, 1) forwards;*/
  /*}*/
}
@media only screen and (max-width: 767px) {
  .shop-area__wrap{
    padding-block: 120px 30px;
    &::before {
      top: 90px;
    }
  }
}
.shop-area{
  scroll-margin-top: 64px;
  margin-bottom: 100px;
}
@media only screen and (max-width: 767px) {
  .shop-area{
    margin-bottom: 70px;
  }
}
.shop-area__title{
  font-size: clamp(26px, var(--size-36), 32px);
  font-weight: 500;
  margin-bottom: 60px;
  .text-en{
    font-size: clamp(14px, var(--size-24), 18px);
    font-weight: 400;
    text-transform: capitalize;
    margin-left: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .shop-area__title{
    margin-bottom: 30px;
  }
}
.archive-shop__list{
  display: flex;
  flex-wrap: wrap;
  gap: 60px 50px;
}
@media only screen and (max-width: 767px) {
  .archive-shop__list{
    gap: 20px;
  }
}
.archive-shop__item{
  width: calc((100% - 50px) / 2);
}
@media only screen and (max-width: 767px) {
  .archive-shop__item{
    width: 100%;
  }
}
.archive-shop__card{
  background-color: var(--color-white);
  border-radius: 10px;
  display: flex;
  gap: 25px;
  padding: 14px 15px;
  height: 100%;
  width: 100%;
  position: relative;
  &::after{
    content: "";
    background-color: var(--color-bg-black);
    border-radius: 50%;
    display: block;
    transition: all 0.2s ease-out;
    height: 5px;
    width: 5px;
    position: absolute;
    right: 20px;
    bottom: 20px;
  }
}
@media (hover: hover) {
  .archive-shop__card:hover{
    &::after{
      transform: scale(2.6);
    }
    .archive-shop__name{
      text-decoration: underline;
    }
    img{
      transform: scale(1.1);
    }
  }
}
@media only screen and (max-width: 767px) {
  .archive-shop__card{
    gap: 15px;
    padding: 9px;
    &::after{
      display: none;
    }
  }
}
.archive-shop__image{
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  max-width: 272px;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .archive-shop__image{
    max-width: 166px;
  }
}
.archive-shop__info{
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
.archive-shop__name{
  font-size: 18px;
  font-weight: 500;
  transition: all 0.2s ease-out;
  margin-block: 25px 15px;
}
@media only screen and (max-width: 767px) {
  .archive-shop__name{
    font-size: 13px;
    margin-block: 13px 9px;
  }
}
.archive-shop__address{
  color: var(--color-dark-gray);
  font-size: 14px;
  padding-right: 20px;
}
@media only screen and (max-width: 767px) {
  .archive-shop__address{
    font-size: 12px;
    padding: 0;
  }
}
.shop-staff__label{
  background: var(--color-light-gray);
  color: var(--color-white);
  font-size: 13px;
  font-weight: bold;
  line-height: 1.3;
  padding: 3px 7px;
  margin-top: auto;
}
@media only screen and (max-width: 767px) {
  .shop-staff__label{
    font-size: 11px;
  }
}

/* 過去に運営した店舗 */
.shop-past{
  .shop-area__title .text-en{
    display: none;
  }
  .archive-shop__list{
    gap: 30px;
  }
  .archive-shop__item{
    width: calc((100% - 60px) / 3);
  }
  .archive-shop__card{
    flex-direction: column;
    gap: 20px;
    padding: 12px 15px 20px;
    &::after{
      top: auto;
      right: 15px;
      bottom: 15px;
    }
  }
  .archive-shop__image{
    aspect-ratio: 1.6 / 1;
    max-width: 100%;
  }
  .archive-shop__name{
    font-size: 14px;
    margin: 0;
  }
  .archive-shop__address,
  .shop-staff__label{
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .shop-past{
    .archive-shop__list{
      gap: 10px;
    }
    .archive-shop__item{
      width: calc((100% - 10px) / 2);
    }
    .archive-shop__card{
      gap: 9px;
      padding: 9px;
    }
  }
}

/*----------------------------
    Shop詳細
----------------------------*/
.shop-article{
  margin-block: 50px 0;
  .article-title{
    margin-bottom: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .shop-article{
    margin-block: 0;
  }
}
.shop-category{
  background-color: var(--color-white);
}
.shop-images__wrap{
  margin-block: 60px 90px;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .shop-images__wrap{
    margin: 40px -20px;
    width: 100vw;
  }
}
.shop-images__image{
  aspect-ratio: 35 / 22;
}
.shop-images__nav{
  .swiper-nav__btn{
    top: 50%;
    z-index: 2;
  }
  .swiper-nav__prev{
    left: -40px;
  }
  .swiper-nav__next{
    right: -40px;
  }
}
@media only screen and (max-width: 767px) {
  .shop-images__nav{
    position: static;
    .swiper-nav__btn{
      top: 42%;
    }
    .swiper-nav__prev{
      left: 3px;
    }
    .swiper-nav__next{
      right: 3px;
    }
  }
}
.shop-detail{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
}
@media only screen and (max-width: 767px) {
  .shop-detail{
    flex-direction: column-reverse;
    gap: 40px;
  }
}
.shop-detail__list{
  display: flex;
  flex-wrap: wrap;
  gap: 30px 0;
  font-size: 14px;
  > dt{
    font-weight: 500;
    width: 140px;
  }
  > dd{
    width: calc(100% - 140px);
  }
}
.map-link{
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: underline;
  margin-top: 10px;
  &::after{
    content: "";
    background-image: url(../img/icon_blank.svg);
    background-repeat: no-repeat;
    background-size: 13px;
    display: block;
    height: 13px;
    width: 13px;
  }
}
.sns-list{
  display: flex;
  align-items: center;
  gap: 20px;
  a,img{
    display: block;
  }
}
.link-underline{
  a{
    text-decoration: underline;
  }
}
.shop-map{
  margin-top: 6px;
  max-width: 400px;
  width: 100%;
  iframe{
    filter: grayscale(100%) opacity(0.8);
  }
}
@media only screen and (max-width: 767px) {
  .shop-map{
    max-width: 100%;
    iframe{
      aspect-ratio: 5 / 3;
      height: auto;
      width: 100%;
    }
  }
}
.shop-btns{
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 30px;
  padding-block: 95px 80px;
}

/*----------------------------
    News一覧
----------------------------*/
.news-page{
  .section-title{
    font-size: 90px;
    margin-block: 50px 120px;
  }
}
@media only screen and (max-width: 767px) {
  .news-page{
    .section-title{
      flex-direction: column;
      margin-block: 63px 70px;
      .ja{
        font-size: 14px;
      }
    }
  }
}
.news-search__wrap{
  margin-bottom: 60px;
}
@media only screen and (max-width: 767px) {
  .news-search__wrap{
    margin-bottom: 40px;
  }
}
.news-category__list{
  gap: 15px;
}
.news-category{
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  padding: 7.5px 30px 7.5px 20px;
  position: relative;
  &::after{
    content: "";
    background-color: var(--color-bg-black);
    border-radius: 50%;
    transition: all 0.2s;
    transform: translateY(-50%);
    height: 4px;
    width: 4px;
    position: absolute;
    top: 50%;
    right: 15px;
  }
  &.is-current{
    background-color: var(--color-primary);
    color: var(--color-white);
    &::after{
      background-color: var(--color-white);
    }
  }
}
@media (hover: hover) {
  .news-category:hover{
    background-color: var(--color-primary);
    color: var(--color-white);
    &::after{
      background-color: var(--color-white);
    }
  }
}
.news-archive{
  margin-bottom: 130px;
}
@media only screen and (max-width: 767px) {
  .news-archive{
    margin-bottom: 92px;
  }
}
.news-archive__list{
  max-width: 100%;
  margin-bottom: 100px;
}
@media only screen and (max-width: 767px) {
  .news-archive__list{
    margin-bottom: 50px;
    + .page-numbers{
      margin-top: 50px;
    }
  }
}
.news-archive__link{
  background-color: var(--color-bg);
  align-items: center;
}
.news-archive__label{
  background-color: var(--color-white);
  flex-shrink: 0;
  text-align: center;
  margin-right: 20px;
  min-width: 100px;
}
.news-archive__title{
  width: auto;
}

/*----------------------------
    News詳細
----------------------------*/
.news-detail{
  .breadcrumb{
    justify-content: start;
  }
}
.news-detail a{
    text-decoration:underline;
}
.news-article{
  margin-bottom: 130px;
}
@media only screen and (max-width: 767px) {
  .news-article{
    margin-bottom: 92px;
  }
}
.news-header{
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  max-width: 980px;
  margin: 130px auto 70px;
  .category-label{
    margin-bottom: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .news-header{
    margin: 0 auto 60px;
    .category-label{
      margin-bottom: 15px;
    }
    .news-date{
      font-size: 13px;
    }
  }
}
.news-article__title{
  color: var(--color-primary);
  font-size: clamp(24px, var(--size-40), 32px);
  font-weight: 500;
  margin-bottom: 7px;
}
@media only screen and (max-width: 767px) {
  .news-article__title{
    margin-bottom: 15px;
  }
}
.news-content{
  color: var(--color-dark-gray);
  line-height: 2;
  overflow-wrap: anywhere;
  max-width: 800px;
  margin: auto;
  figcaption{
    font-size: 13px;
    margin-top: 15px;
  }
  .img-box img{
    aspect-ratio: 8 / 5;
    height: auto;
  }
  .row{
    display: flex;
    gap: 40px;
    margin-block: 70px;
  }
  .item{
    width: 100%;
  }
}
.col-content{
   max-width: 100%;
}
@media only screen and (max-width: 767px) {
  .news-content{
    .row{
      flex-direction: column;
      gap: 20px;
      margin-block: 50px;
    }
    p.item{
      margin-top: 5px;
    }
  }
}
@media (hover: hover) {
  .news-content a:hover{
    text-decoration: underline;
  }
}

/*----------------------------
    404
----------------------------*/
.not-found{
  .section-title .en{
    color: var(--color-primary);
    margin-block: 100px;
  }
  .common-btn{
    margin-block: 100px;
  }
}

/* 実績：黄色背景のカテゴリは文字を黒に（店舗運営・商品開発 10/13） */
.works-territory__label[style*="palette-yellow"] {
  color: #171717;
}
.works-search__list li[style*="palette-yellow"] .service-content__link.is-current {
  color: #171717;
}
.works-search__list li[style*="palette-yellow"] .service-content__link.is-current::after {
  background-color: #171717;
}

/* 実績一覧・プロジェクトインタビュー一覧：カードのタイトル（Noto 14px/Medium）の行間を【PC】28px→25pxに（10/14）※SPは25pxのまま */
@media only screen and (min-width: 768px) {
  /* TOPのWorks（18px）は対象外 */
  body:not(.home) main .works-name {
    line-height: 25px;
  }
}

/* サービス一覧【SP】：イラストの枠をTOPのサービスと同じに（角丸38px・余白20px、画像もTOPと同じもの）（10/14） */
@media only screen and (max-width: 767px) {
  main .archive-service__wrap .archive-service__content .service-image {
    border-radius: 38px;
    padding: 20px;
  }
  main .archive-service__wrap .archive-service__content .service-image picture {
    display: block;
  }
}

/* 実績詳細・プロジェクトインタビュー詳細・運営店舗詳細【SP】：タイトル・見出しのフォントサイズ調整（10/16）
   タイトル 32px/48px → 26px/39px、見出し 24px/42px → 22px/38px */
@media only screen and (max-width: 767px) {
  body main:is(.works-detail, .interview-detail, .shop-page) .article-title,
  body main.interview-detail .article-header .article-title {
    font-size: 26px;
    line-height: 39px;
  }
  body main.interview-detail .interview-meets__title {
    font-size: 22px;
    line-height: 38px;
  }
}

/* サービス詳細「強み・得意分野」【SP】：見出しが1行でも2行でも、アイコン（70px）の上下中央に配置（10/16） */
@media only screen and (max-width: 767px) {
  /* アイコンと見出しを横並びのグリッドにし、行数に関係なく互いの上下中央を揃える */
  main .strength-item {
    display: grid;
    grid-template-columns: 70px 1fr;
    column-gap: 14px;
    row-gap: 0;
    align-items: center;
  }
  main .strength-item > dl {
    display: contents;
  }
  main .strength-item .strength-icon {
    position: static;
    grid-column: 1;
    grid-row: 1;
  }
  main .strength-item .strength-title {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    min-height: 0;
    padding-left: 0;
  }
  main .strength-item .lead-text {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 20px;
  }
}

/* プロジェクトインタビュー詳細：写真が2枚のカルーセルはスライダーにせず固定表示（PCは横並び・SPは縦並び）（10/16） */
.interview-carousel.is-static .swiper-wrapper {
  gap: 20px;
  justify-content: center;
  transform: none;
}
.interview-carousel.is-static .interview-carousel__item {
  width: min(640px, calc((100% - 60px) / 2));
}
.interview-carousel.is-static .interview-carousel__nav {
  display: none;
}
@media only screen and (max-width: 767px) {
  .interview-carousel.is-static .swiper-wrapper {
    align-items: center;
    flex-direction: column;
  }
  .interview-carousel.is-static .interview-carousel__item {
    width: calc(100% - 40px);
  }
}

/* サービス詳細「プロジェクトの流れ」【SP】：Step01 の囲みを調整（10/16）
   ・Step01 の文字下の余白を Step02 以降と同じに（囲みの高さを 190px → 209px）
   ・Step01 と Step02 の間の空きを、他の Step 間と同じに
     （Step01 の下側の矢印の形・比率を Step02 以降と同じにした flow_first_sp_v2.svg を使用し、重なりも -40px に統一） */
@media only screen and (max-width: 767px) {
  .step-list .step-item:first-child,
  main.service-detail .step-list .step-item:first-child {
    -webkit-mask-image: url("../img/flow_first_sp_v2.svg");
    mask-image: url("../img/flow_first_sp_v2.svg");
    margin-bottom: -40px;
    min-height: 209px;
  }
}