@charset "UTF-8";

@import "../../../n_common/css/_variable.css";
/* =========================================================
  ご契約者様の声　特設ページ
  掲載先: /special/owner-voice/css/local.css
  スコープ: .area_voice 配下のみに適用(既存スタイルと衝突しないよう
  すべて .area_voice を起点に記述)。.title-area のみ例外でページ固有に上書き。

  元データ: Asm久米_ご契約者様の声.pdf (2026-08-19解析)
  画像パーツ(文字アウトライン化済み・写真カード完成画像)は images/ 配下に
  書き出し済みのものを使用。
========================================================== */

/* ---------------------------------------------------------
  title-area (デザインに合わせてカスタマイズ)
--------------------------------------------------------- */
.title-area {
  position: relative;
  height: auto;
  aspect-ratio: 34 / 10; /* 元PDFで実測した写真の縦横比 */
  overflow: hidden;
  background: #cddcd6;
  @media (width < 896px) {
    aspect-ratio: 3 / 2;
  }
  .title-area__photo {
    position: absolute;
    inset: 0;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      @media (width < 896px) {
        object-position: 90% center;
      }
    }
  }
  .page-ttl {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 30%;
    text-align: left;
    max-width: 1280px;
    width: 100%;
    img {
      width: 22vw;
      max-width: 420px;
      min-width: 220px;
    }
  }
}

.area_voice {
  /* ---- design tokens (元PDFデータより抽出・ピクセル計測) ---- */
  --voice_c: #86c0af; /* Q見出し・Point・その他のお声吹き出し・チェック共通アクセント */
  --voice_bg: #f1f8f6; /* その他のお声セクション背景 */
  --voice_line: rgba(101, 96, 93, 0.35); /* 引用グリッドの区切り点線 */

  font-feature-settings: "palt";
  color: var(--font_c);
  overflow-wrap: break-word;
  text-align: left; /* 共通bodyのtext-align:centerを打ち消す既定値 */

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  padding-bottom: 56px;
  @media (width < 896px) {
    padding-bottom: 36px;
  }

  /* ---------------------------------------------------------
    リード文
  --------------------------------------------------------- */
  .voice-lead {
    max-width: 1080px;
    margin: 0 auto;
    padding: 40px 20px 0;
    text-align: center;
    line-height: 1.9;
    font-size: clamp(0.9375rem, 0.2vw + 0.85rem, 1.0625rem);
    @media (width < 896px) {
      padding-top: 28px;
      text-align: justify;
    }
  }

  /* ---------------------------------------------------------
    Q&A カード(お三方共通)
  --------------------------------------------------------- */
  .voice-card {
    margin-top: 72px;
    @media (width < 896px) {
      margin-top: 48px;
    }
  }

  .voice-q {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
    font-family: var(--font_gothic);
    font-weight: 700;
    font-size: clamp(1.25rem, 0.6vw + 1.1rem, 1.75rem);
    line-height: 1.5;
  }
  .voice-q__mark {
    flex-shrink: 0;
    color: var(--voice_c);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
    font-size: 1.5em;
    line-height: 1;
  }

  .voice-card__img {
    max-width: 1180px;
    margin: 20px auto 0;
    padding: 0 20px;
  }

  .voice-answer {
    max-width: 1180px;
    margin: 28px auto 0;
    padding: 0 20px;
    line-height: 2;
    font-size: clamp(0.9375rem, 0.2vw + 0.85rem, 1.0625rem);
    @media (width < 896px) {
      text-align: justify;
    }
  }

  .voice-mark {
    text-decoration: underline;
    text-decoration-color: var(--voice_c);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }

  /* ---------------------------------------------------------
    その他のお声
  --------------------------------------------------------- */
  .voice-more {
    position: relative;
    margin-top: 64px;
    background: var(--voice_bg);
    padding: 0 20px 40px;
    @media (width < 896px) {
      margin-top: 44px;
      padding-bottom: 32px;
    }
  }
  .voice-more__inner {
    max-width: 1180px;
    margin: 0 auto;
  }
  .voice-more__bubble {
    width: 200px;
    margin: 0 auto;
    transform: translateY(-52%);
    @media (width < 896px) {
      width: 160px;
    }
  }
  .voice-more__point {
    margin-top: -24px;
    @media (width < 896px) {
      margin-top: -16px;
    }
  }
  .voice-more__point__label {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .voice-more__point__label__img {
    width: 130px;
  }
  .voice-more__point__note {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem;
    color: var(--font_c);
  }
  .voice-more__point__note__icon {
    width: 16px;
    height: 16px;
  }
  .voice-more__point__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin-top: 16px;
    li {
      font-weight: 700;
      font-size: clamp(1rem, 0.3vw + 0.9rem, 1.125rem);
    }
    li,
    li a {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    li a {
      color: inherit;
      text-decoration: none;
      &:hover {
        text-decoration: underline;
        text-decoration-color: var(--voice_c);
      }
    }
    img {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
    }
  }

  .voice-quotes-wrap {
    position: relative;
    margin-top: 32px;
  }
  .voice-quotes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    @media (width < 896px) {
      grid-template-columns: 1fr;
    }
  }
  .voice-quotes__item {
    padding: 20px 32px 20px 0;
    border-top: 1px dashed var(--voice_line);
    @media (width < 896px) {
      padding: 20px 0;
    }
  }
  .voice-quotes__item:nth-child(odd) {
    border-right: 1px dashed var(--voice_line);
    @media (width < 896px) {
      border-right: none;
    }
  }
  .voice-quotes__item:nth-child(even) {
    padding-left: 32px;
    padding-right: 0;
    @media (width < 896px) {
      padding-left: 0;
    }
  }
  .voice-quotes__item:nth-child(-n + 2) {
    border-top: none;
    padding-top: 0;
  }
  @media (width < 896px) {
    .voice-quotes__item:first-child {
      border-top: none;
      padding-top: 0;
    }
    .voice-quotes__item:not(:first-child) {
      border-top: 1px dashed var(--voice_line);
    }
  }
  .voice-quotes--single {
    grid-template-columns: 1fr;
    .voice-quotes__item {
      border: none;
      padding: 0;
    }
  }
  .voice-quotes__text {
    line-height: 1.9;
    font-size: clamp(0.9375rem, 0.2vw + 0.85rem, 1rem);
  }
  .voice-quotes__profile {
    margin-top: 12px;
    font-size: 0.9375rem;
    color: var(--font_c);
  }
  .voice-more__note {
    margin-top: 16px;
    text-align: right;
    font-size: 0.9375rem;
    color: var(--font_c);
  }
}

.fav-voice {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: 20px;
  padding-block: 60px 0;
  @media (width < 896px) {
    padding-block: 40px 0;
  }
}

.newline {
  display: inline-block;
}

.txt_number {
  font-size: 1.5em;
  color: var(--point02);
  color: var(--main_c);
}

.txt_small {
  display: inline-block;
  font-size: 0.7em;
}

.pconly {
  @media (width <= 896px) {
    display: none;
  }
}

.sponly {
  @media (width > 896px) {
    display: none;
  }
}