@charset "utf-8";
/*---------------------------
  Single Pages
---------------------------*/
.main-container{
  padding: calc(var(--header-height) + 56px) 0 96px;
}
/* For PC */
@media (912px < width) {
  .section-container.--mb-only{
      gap: 0;
  }
}
/*------Text Stye------*/
body{
  text-wrap: wrap;
}
h1{
  font-size: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--accent-color);
}
h2{
  width: 100%;
}
.heading__sub-line::before{
  margin-bottom: 1rem;
}
.__staff-name{
  text-align-last: right;
}
/* For PC */
@media (912px < width) {
  h1{
    font-size: 3.2rem;
  }
  h2{
    font-size: 2.4rem;
  }
}
.bg__slider::after{
  background: linear-gradient(
    to bottom,
    rgba(252, 248, 245, 1) 0%,
    rgba(252, 248, 245, 0.9) 10%,
    rgba(252, 248, 245, 0.9) 60%,
    rgba(252, 248, 245, 1) 100%
  );
}
/*---------------------------
  Component
---------------------------*/
/*------Heading------*/
.singular__heading{
  width: min(80%, 1000px);
  margin: 0 auto;
}
.works-tags{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.works-tags .__tag{
  margin-left: 1rem;
}
.works-tags .__tag::before{
  content: '#';
}
/*------Slider------*/
.works__gallery-slider{
  display: grid;
  gap: 32px;
}
#main-carousel,
#thumbnail-carousel{
  width: 80%;
  margin: 0 auto;
}
.splide__track{
  margin: 0 auto;
  overflow: hidden;
}
.splide__slide {
  display: grid;
  place-content: center;
  opacity: 0.6;
}
.splide__slide.is-active {
  opacity: 1;
}
.modal-trigger {
  display: block; 
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}
.splide__slide a,
.splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (912px < width) {
  #thumbnail-carousel{
    width: 80%;
  }
}
/*------Works Data------*/
.works__data-list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}
.works__data-heading,
.works__data-detail{
  padding: 0.5rem 1rem;
}
.works__data-heading{
  background-color: rgba(200, 165, 106, 60%);
  font-weight: bold;
}
.works__data-detail{
  background-color: rgba(255, 255, 255, 60%);
}
@media (912px < width) {
  .works__data-list{
    grid-template-columns: repeat(4, 1fr);
  }
}
/*------Floor Plans(before&after)------*/
.floor-plans{
  display: grid;
  gap: 96px;
}
.floor-plans > div{
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  justify-content: center;
}
.floor-plans__image img{
  height: auto;
}
.floor-plans__heading{
  font-size: 2.4rem;
  text-align: center;
}
.floor-plans__before{
  position: relative;
}
/* Arrow */
.floor-plans__before .floor-plans__heading::after{
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  transform: translateY(8px);
  content: "↓";
  font-size: 40px;
  color: var(--accent-color);
}
/* For PC */
@media (912px < width) {
  .floor-plans{
    grid-template-columns: repeat(2,1fr);
  }
  .floor-plans__before .floor-plans__heading::after{
    top: 50%;
    right: -48px;
    left: auto;
    transform: translateY(-20px) translateX(20px) rotate(-90deg);
  }
}
/* Staff Comments, Designer's Note */
:is(.__comments-wrap, .__staff-comment, .__staff-grid, .__grid-wrap){
  display: grid;
}
/* Margin Gap */
.__comments-wrap{
  gap: 56px;
}
.__staff-comment{
  gap: 32px;
  align-content: start;
}
.__staff-grid{
  grid-template-columns: 0.4fr 1fr;
  gap: 1.5rem;
}
.__grid-wrap{
  gap: 16px;
}
/* Images */
img{
  width: 100%;
  height: auto;
}
.__comment-image{
  aspect-ratio: 16/9;
  overflow: hidden;
}
.__staff-icon{
  max-width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 0;
  max-height: 112px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid var(--accent-color);
  border-radius: 50%;
  overflow: hidden;
}

/* For PC */
@media (912px < width) {
  .__comments-wrap{
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: auto 1fr;
    gap: 72px;
  }
  /* 一つしかない場合は幅いっぱいに表示 */
  .__comments-wrap > :first-child:last-child {
    grid-column: span 2;
  }
  .__staff-grid{
    grid-template-columns: 0.2fr 1fr;
    gap: 1.5rem;
    align-items: center;
  }
  /* 幅いっぱい表示の時のレイアウト */
  .__comments-wrap > :first-child:last-child .__staff-grid{
    grid-template-columns: 0.1fr 1fr;
    gap: 3rem;
  }
  .__comment-image{
    aspect-ratio: 16/6;
  }
}

/*---------------------------
  Works
---------------------------*/
/*------Works Points------*/
.works__point-flex{
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.works.bg__slider-container{
  display: grid;
  gap: 144px;
}
@media (912px < width) {
  .works.bg__slider-container{
  gap: 96px;
}
  .works__point-image{
    flex-basis: 50%;
    flex-shrink: 0;
  }
  .works__point-flex{
    flex-direction: row-reverse;
    align-items: center;
  }
  .section-container:nth-child(even) .works__point-flex{
    flex-direction: row;
  }
}

/*---------------------------
  Testimonials
---------------------------*/
/*------Heading------*/
.testimonials-data li{
  display: inline-block;
  padding-bottom: 2rem;
}
/* For PC */
@media (912px < width) {
  .panel__works-data{
    padding: 64px 56px;
  }
}
/*------Summary------*/
.testimonials__summary,
.testimonials__summary-title{
  display: grid;
  text-align-last: left;
}
.testimonials__summary{
  gap: 32px;
}
.testimonials__summary-title{
  gap: 24px;
  padding-bottom: 32px;
}
/* For PC */
@media (912px < width) {
  .testimonials__summary img{
    height: 100%;
  }
  .testimonials__summary{
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}
/*------Interview------*/
.testimonials__interview,
.testimonials__interview-section,
.interview__section-titles.section__title--line,
.interview__QA, .interview__images
{
  display: grid;
}
.testimonials__interview{
  gap: 72px;
}
.testimonials__interview-section{
  gap: 40px;
}
.interview__section-titles.section__title--line{
  gap: 24px;
  text-align: left;
}
.interview__QA{
  gap: 16px;
  font-size: 2.0rem;
  text-align: left;
}
.interview__section-titles{
  padding: 1.6rem;
}
.interview__QA .--row{
  display: block;
}
.interview__QA .--indent{
  padding-left: 0.5em;
}
.interview__question-text{
  font-size: 1.6rem;
}
/* Image's Slide */
.interview__images.--is-slider{
  position: relative;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-content: center;
  overflow: hidden;
}
.interview__image.--is-slider{
  grid-column: 1/ 2;
  grid-row: 1/2;
  opacity: 0;
  animation: fadeSlideshow 10s infinite;
}
.interview__image.--is-slider img{
  width: 100%;
  height: auto;
}
.interview__image.--is-slider:nth-child(1) {
  animation-delay: 0s;
}
.interview__image.--is-slider:nth-child(2) {
  animation-delay: 5s; /* 全体の半分の時間で開始 */
}
@keyframes fadeSlideshow {
  0% { opacity: 0; }
  10% { opacity: 1; }
  40% { opacity: 1; }
  60% { opacity: 0; }
  100% { opacity: 0; }
}
/* For PC */
@media (912px < width) {
  .testimonials__interview{
    gap: 144px;
  }
  .interview__QA{
    font-size: 2.4rem;
  }
  .interview__question-text{
    font-size: 1.8rem;
  }
  .testimonials__interview-section{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto 1fr;
    gap: 56px;
  }
  .interview__images{
    grid-column: 1;
    grid-row: 1/ -1;
  }
  .testimonials__interview-section:nth-child(even) .interview__images{
    grid-column: 2;
  }
  .interview__images img{
    height: 100%;
  }
}
/*------Staff Comment------*/
@media (912px < width) {
  .testimonials:not(.__note).width-container{
    width: min(70%, 900px);
  }
  .testimonials:not(.__note).__staff-grid{
    width: min(80%, 1000px);
    margin: 0 auto;
    gap: 32px;
  }
}