@charset "UTF-8";

/* =========================================================
   KOKETSU A.D.
   Voice Page

   読み込み順
   1. ../common/base.css
   2. ../common/navigation.css
   3. style.css
========================================================= */


/* =========================================================
   Page
========================================================= */

.voice-page {
  width: 100%;
  color: var(--color-text);
  background: var(--color-bg);
}


/* =========================================================
   Hero
========================================================= */

.voice-hero {
  position: relative;
  min-height: calc(100svh - 82px);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  color: var(--color-white);
  background: var(--color-dark);
}

.voice-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("images/voice-fv.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transform: scale(1.015);
}

.voice-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      90deg,
      rgba(18, 24, 23, 0.9) 0%,
      rgba(18, 24, 23, 0.72) 40%,
      rgba(18, 24, 23, 0.3) 72%,
      rgba(18, 24, 23, 0.12) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.08) 0%,
      rgba(0, 0, 0, 0.3) 100%
    );
}

.voice-hero__inner {
  position: relative;
  z-index: 2;
  width: min(
    var(--content-width),
    calc(100% - (var(--side-space-pc) * 2))
  );
  margin-inline: auto;
  padding: 140px 0 130px;
}

.voice-hero__label {
  margin-bottom: 30px;
  font-family: var(--font-en);
  font-size: var(--hero-label-size);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing-label);
  color: rgba(255, 255, 255, 0.7);
}

.voice-hero__title {
  max-width: 900px;
  margin: 0;
  font-size: clamp(42px, 5vw, 70px);
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: var(--hero-title-letter-spacing);
  text-shadow: 0 3px 24px rgba(0, 0, 0, 0.24);
}

.voice-hero__lead {
  max-width: 640px;
  margin-top: 42px;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 2.1;
  color: rgba(255, 255, 255, 0.82);
}


/* =========================================================
   Introduction
========================================================= */

.voice-intro {
  padding: 120px 0;
  background: var(--color-bg-white);
}

.voice-intro__inner {
  width: min(
    var(--content-width-narrow),
    calc(100% - (var(--side-space-pc) * 2))
  );
  margin-inline: auto;
  text-align: center;
}

.voice-intro__label {
  margin-bottom: 26px;
  font-family: var(--font-en);
  font-size: var(--font-size-label);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-sub);
}

.voice-intro__title {
  margin: 0;
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: var(--letter-spacing-heading);
}

.voice-intro__text {
  max-width: 680px;
  margin: 46px auto 0;
  color: var(--color-text-soft);
}

.voice-intro__text p {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.voice-intro__text p + p {
  margin-top: 22px;
}


/* =========================================================
   Voice Index
========================================================= */

.voice-index {
  padding: 120px 0 150px;
  background: var(--color-bg);
}

.voice-index__inner {
  width: min(
    var(--content-width),
    calc(100% - (var(--side-space-pc) * 2))
  );
  margin-inline: auto;
}

.voice-index__header {
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border-dark);
}

.voice-index__label {
  margin-bottom: 18px;
  font-family: var(--font-en);
  font-size: var(--font-size-label);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-sub);
}

.voice-index__title {
  margin: 0;
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: var(--letter-spacing-heading);
}

.voice-index__count {
  display: none;
}

.voice-index__noscript {
  margin-top: 50px;
  text-align: center;
  color: var(--color-text-soft);
}


/* =========================================================
   Filter
========================================================= */

.voice-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 36px;
}

.voice-filter__button {
  min-height: 42px;
  padding: 9px 18px;
  border: 1px solid var(--color-border-dark);
  color: var(--color-text-soft);
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.voice-filter__button:hover,
.voice-filter__button.is-active {
  color: var(--color-white);
  background: var(--color-dark);
  border-color: var(--color-dark);
}


/* =========================================================
   Voice List
========================================================= */

.voice-list {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  align-items: stretch;
}


/* =========================================================
   Voice Card
========================================================= */

.voice-card {
  position: relative;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 34px 34px 88px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  grid-template-rows: auto auto;
  grid-template-areas:
    "summary summary"
    "meta    media";
  column-gap: 30px;
  row-gap: 28px;
  align-content: start;
  align-items: start;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(65, 58, 48, 0.14);
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.voice-card:hover {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(65, 58, 48, 0.24);
  box-shadow: 0 18px 44px rgba(28, 25, 21, 0.07);
  transform: translateY(-3px);
}

.voice-card.is-open {
  grid-column: 1 / -1;
  height: auto;
  padding-bottom: 34px;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "summary summary"
    "meta    media"
    "detail  detail";
  overflow: visible;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 60px rgba(28, 25, 21, 0.09);
  transform: none;
}


/* =========================================================
   Summary Structure
========================================================= */

.voice-card__summary,
.voice-card__content {
  display: contents;
}


/* =========================================================
   Catch
========================================================= */

.voice-card__catch {
  grid-area: summary;
  width: 100%;
  min-width: 0;
  margin: 0;
  font-size: clamp(22px, 2vw, 29px);
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0.055em;
}

.voice-card:not(.is-open) .voice-card__catch {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}


/* =========================================================
   Meta
========================================================= */

.voice-card__meta {
  grid-area: meta;
  min-width: 0;
  margin: 0;
  align-self: start;
}

.voice-card__owner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.voice-card__location {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-soft);
}

.voice-card__customer {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.05em;
}

.voice-card__date {
  margin-top: 8px;
  font-family: var(--font-en);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0.09em;
  color: var(--color-text-light);
}


/* =========================================================
   Card Toggle
========================================================= */

.voice-card__toggle {
  position: absolute;
  left: 34px;
  bottom: 34px;
  width: max-content;
  margin: 0;
  padding: 9px 2px 8px;
  display: flex;
  align-items: center;
  gap: 24px;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border-dark);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.08em;
  transition:
    color var(--transition-fast),
    gap var(--transition-fast);
}

.voice-card__toggle:hover {
  color: var(--color-sub);
  gap: 30px;
}

.voice-card__toggle-arrow {
  font-family: var(--font-en);
  font-size: 15px;
  line-height: 1;
}

.voice-card.is-open .voice-card__toggle {
  display: none;
}


/* =========================================================
   Card Image
========================================================= */

.voice-card__media {
  grid-area: media;
  width: 200px;
  height: 150px;
  margin: 0;
  align-self: start;
  justify-self: end;
  overflow: hidden;
  background: var(--color-border);
}

.voice-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.9);
}


/* =========================================================
   Card Detail
========================================================= */

.voice-card__detail {
  grid-area: detail;
  width: 100%;
  margin-top: 8px;
  padding: 40px 0 8px;
  border-top: 1px solid var(--color-border);
}

.voice-card__detail[hidden] {
  display: none;
}

.voice-card__body {
  max-width: 820px;
  margin-inline: auto;
  color: var(--color-text-soft);
}

.voice-card__body p {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.voice-card__body p + p {
  margin-top: 22px;
}


/* =========================================================
   Tags
========================================================= */

.voice-card__tags {
  max-width: 820px;
  margin: 38px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.voice-card__tag {
  padding: 7px 12px;
  border: 1px solid var(--color-border);
  background: rgba(245, 243, 238, 0.68);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--color-text-light);
}


/* =========================================================
   Close Button
========================================================= */

.voice-card__close {
  width: max-content;
  margin: 42px auto 0;
  padding: 10px 2px;
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--color-text-soft);
  border-bottom: 1px solid var(--color-border-dark);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.08em;
}


/* =========================================================
   Empty
========================================================= */

.voice-list__empty {
  grid-column: 1 / -1;
  padding: 80px 20px;
  border-top: 1px solid var(--color-border-dark);
  border-bottom: 1px solid var(--color-border-dark);
  text-align: center;
  color: var(--color-text-soft);
}


/* =========================================================
   Closing
========================================================= */

.voice-closing {
  padding: 140px 0;
  color: var(--color-white);
  background: var(--color-dark);
}

.voice-closing__inner {
  width: min(
    var(--content-width-narrow),
    calc(100% - (var(--side-space-pc) * 2))
  );
  margin-inline: auto;
  text-align: center;
}

.voice-closing__label {
  margin-bottom: 28px;
  font-family: var(--font-en);
  font-size: var(--font-size-label);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing-label);
  color: rgba(255, 255, 255, 0.5);
}

.voice-closing__title {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: var(--letter-spacing-heading);
}

.voice-closing__text {
  max-width: 650px;
  margin: 42px auto 0;
  color: rgba(255, 255, 255, 0.74);
}

.voice-closing__text p {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.voice-closing__text p + p {
  margin-top: 20px;
}

.voice-closing__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 760px;
  margin: 54px auto 0;
}

.voice-closing__link {
  min-height: 66px;
  padding: 16px 22px 16px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-white);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.06em;
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.voice-closing__link:hover {
  color: var(--color-dark);
  background: var(--color-white);
  border-color: var(--color-white);
}

.voice-closing__link--primary {
  color: var(--color-dark);
  background: var(--color-white);
  border-color: var(--color-white);
}

.voice-closing__link--primary:hover {
  color: var(--color-white);
  background: transparent;
}


/* =========================================================
   Compact Desktop
========================================================= */

@media (max-width: 1050px) {
  .voice-card {
    height: 100%;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) 160px;
    padding: 30px 30px 82px;
    column-gap: 24px;
    row-gap: 24px;
  }

  .voice-card.is-open {
    height: auto;
    padding-bottom: 30px;
  }

  .voice-card__catch {
    font-size: 22px;
  }

  .voice-card__media {
    width: 160px;
    height: 120px;
  }

  .voice-card__toggle {
    left: 30px;
    bottom: 30px;
  }
}


/* =========================================================
   Tablet
========================================================= */

@media (max-width: 820px) {
  .voice-hero {
    min-height: calc(100svh - 70px);
  }

  .voice-hero__inner {
    padding: 110px 0 100px;
  }

  .voice-intro {
    padding: 100px 0;
  }

  .voice-index {
    padding: 100px 0 120px;
  }

  .voice-list {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .voice-card,
  .voice-card.is-open {
    grid-column: auto;
  }

  .voice-closing {
    padding: 110px 0;
  }
}


/* =========================================================
   Mobile
========================================================= */

@media (max-width: 640px) {
  .voice-hero {
    min-height: calc(100svh - 66px);
    align-items: flex-end;
  }

  .voice-hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(17, 23, 22, 0.14) 0%,
        rgba(17, 23, 22, 0.42) 42%,
        rgba(17, 23, 22, 0.88) 100%
      );
  }

  .voice-hero::after {
    background-position: 58% center;
  }

  .voice-hero__inner,
  .voice-intro__inner,
  .voice-index__inner,
  .voice-closing__inner {
    width: calc(100% - 32px);
  }

  .voice-hero__inner {
    padding: 90px 0 76px;
  }

  .voice-hero__label {
    margin-bottom: 22px;
    font-size: 11px;
  }

  .voice-hero__title {
    font-size: 34px;
    line-height: 1.6;
  }

  .voice-hero__lead {
    margin-top: 28px;
    font-size: 14px;
    line-height: 2;
  }

  .voice-intro {
    padding: 82px 0;
  }

  .voice-intro__title {
    font-size: 28px;
  }

  .voice-intro__text {
    margin-top: 36px;
  }

  .voice-intro__text p {
    font-size: var(--font-size-body-sp);
    line-height: var(--line-height-body-sp);
  }

  .voice-index {
    padding: 82px 0 96px;
  }

  .voice-index__title {
    font-size: 28px;
  }

  .voice-filter {
    margin-top: 28px;
    gap: 8px;
  }

  .voice-filter__button {
    min-height: 39px;
    padding: 8px 13px;
    font-size: 11px;
  }

  .voice-list {
    margin-top: 46px;
  }

  .voice-card {
    height: auto;
    min-height: 0;
    padding: 24px 22px 78px;
    grid-template-columns: minmax(0, 1fr) 150px;
    grid-template-rows: auto auto;
    grid-template-areas:
      "summary summary"
      "meta    media";
    column-gap: 18px;
    row-gap: 22px;
    align-content: start;
  }

  .voice-card.is-open {
    height: auto;
    min-height: 0;
    padding-bottom: 24px;
    grid-template-areas:
      "summary summary"
      "meta    media"
      "detail  detail";
  }

  .voice-card__catch {
    font-size: 21px;
    line-height: 1.78;
  }

  .voice-card:not(.is-open) .voice-card__catch {
    -webkit-line-clamp: 4;
  }

  .voice-card__owner {
    display: block;
  }

  .voice-card__location {
    display: block;
    font-size: 11px;
  }

  .voice-card__customer {
    display: block;
    margin-top: 3px;
    font-size: 18px;
  }

  .voice-card__date {
    margin-top: 7px;
    font-size: 9px;
  }

  .voice-card__media {
    width: 150px;
    height: 112px;
    align-self: start;
  }

  .voice-card__toggle {
    left: 22px;
    bottom: 24px;
    font-size: 11px;
  }

  .voice-card__detail {
    margin-top: 8px;
    padding: 30px 0 6px;
  }

  .voice-card__body p {
    font-size: var(--font-size-body-sp);
    line-height: var(--line-height-body-sp);
  }

  .voice-card__tags {
    margin-top: 30px;
  }

  .voice-card__close {
    margin-top: 34px;
  }

  .voice-closing {
    padding: 90px 0;
  }

  .voice-closing__title {
    font-size: 28px;
  }

  .voice-closing__text {
    margin-top: 34px;
  }

  .voice-closing__text p {
    font-size: var(--font-size-body-sp);
    line-height: var(--line-height-body-sp);
  }

  .voice-closing__links {
    grid-template-columns: 1fr;
    margin-top: 44px;
  }
}


/* =========================================================
   Small Mobile
========================================================= */

@media (max-width: 420px) {
  .voice-hero__title {
    font-size: 31px;
  }

  .voice-card {
    height: auto;
    min-height: 0;
    padding: 22px 18px 74px;
    grid-template-columns: minmax(0, 1fr) 130px;
    column-gap: 14px;
    row-gap: 20px;
  }

  .voice-card.is-open {
    height: auto;
    min-height: 0;
    padding-bottom: 22px;
  }

  .voice-card__catch {
    font-size: 19px;
  }

  .voice-card__media {
    width: 130px;
    height: 98px;
  }

  .voice-card__toggle {
    left: 18px;
    bottom: 22px;
  }
}


/* =========================================================
   Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .voice-filter__button,
  .voice-card,
  .voice-card__toggle,
  .voice-closing__link {
    transition: none;
  }

  .voice-card:hover {
    transform: none;
  }
}