@charset "UTF-8";
/* ==========================================================================
   アワソフホールディングス合同会社 LP
   style.css
   目次
     1. デザイントークン（カスタムプロパティ）
     2. リセット / ベース
     3. 共通パーツ（レイアウト・見出し・ボタン・カード）
     4. ヘッダー
     5. ヒーロー
     6. 各セクション
     7. フォーム
     8. フッター / SP固定CTAバー
     9. アニメーション
    10. レスポンシブ
   ========================================================================== */

/* ==========================================================================
   1. デザイントークン
   ========================================================================== */
:root {
  /* 色 */
  --navy:        #0E2A47; /* 基調色・見出し */
  --navy-mid:    #1B4C82;
  --blue-bright: #3D8FD1; /* アクセント（英語ラベル・アイコン） */
  --blue-pale:   #9CC9EC; /* 濃色背景上のラベル */
  --paper:       #F5F8FB; /* 背景 */
  --white:       #FFFFFF;
  --orange:      #E8823C; /* CTA */
  --orange-pale: #FBEADD;
  --gray-text:   #5A6B7C; /* 本文補助 */
  --line:        rgba(14, 42, 71, .10);
  --line-strong: rgba(14, 42, 71, .16);

  /* グラデーション */
  --grad-navy: linear-gradient(135deg, #0E2A47 0%, #1B4C82 55%, #3D8FD1 130%);

  /* 影 */
  --shadow-card:   0 2px 16px rgba(14, 42, 71, .06);
  --shadow-cta:    0 6px 20px rgba(232, 130, 60, .28);

  /* 書体 */
  --font-base: "Noto Sans JP", sans-serif;      /* 本文 */
  --font-head: "Zen Kaku Gothic New", sans-serif; /* 和文見出し */
  --font-en:   "Outfit", sans-serif;            /* 欧文・数字 */

  /* 角丸 */
  --radius:    12px;
  --radius-lg: 16px;

  /* 余白 */
  --gutter:     20px;   /* 左右の基本余白 */
  --container:  1120px; /* コンテンツ最大幅 */
  --section-y:  clamp(72px, 9vw, 120px); /* セクション上下 */
  --round-edge: clamp(40px, 6vw, 90px);  /* セクション境界の大きな角丸 */
}

/* ==========================================================================
   2. リセット / ベース
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--navy);
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .04em;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
iframe { max-width: 100%; }

img { height: auto; }

a { color: var(--navy-mid); }
a:hover { color: var(--blue-bright); }

:focus-visible {
  outline: 2px solid var(--blue-bright);
  outline-offset: 2px;
}

/* 日本語の折り返しを文節単位に（未対応ブラウザは通常折り返し） */
p, li, dd, dt, h1, h2, h3, blockquote, summary, label, figcaption {
  word-break: auto-phrase;
}

/* 見出しの意図的な改行位置 */
.line { display: block; }

/* PC / SP 出し分け */
@media (max-width: 860px) { .is-pc { display: none !important; } }
@media (min-width: 861px) { .is-sp { display: none !important; } }

/* ==========================================================================
   3. 共通パーツ
   ========================================================================== */
.l-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.l-container--narrow { max-width: 900px; }
.l-container--form   { max-width: 780px; }

.l-section { padding-block: var(--section-y); }
.l-section--white { background: var(--white); }
.l-section--paper { background: var(--paper); }
.l-section--navy  { background: var(--grad-navy); color: var(--white); position: relative; overflow: hidden; }

/* 上下端を大きな角丸で切る */
.l-section--round-top    { border-radius: var(--round-edge) var(--round-edge) 0 0; }
.l-section--round-bottom { border-radius: 0 0 var(--round-edge) var(--round-edge); }

/* セクション見出し */
.c-label {
  margin: 0 0 16px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .18em;
  color: var(--blue-bright);
}
.c-label--on-navy { color: var(--blue-pale); }

.c-heading {
  margin: 0 0 clamp(32px, 4vw, 48px);
  max-width: 640px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(24px, 3.6vw, 34px);
  line-height: 1.6;
}
.c-heading--lg { font-size: clamp(24px, 3.8vw, 38px); margin-bottom: clamp(28px, 4vw, 40px); }
.c-heading--xl {
  max-width: none;
  font-weight: 900;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.55;
  letter-spacing: .03em;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.c-heading--center { max-width: none; text-align: center; margin-bottom: 36px; line-height: 1.7; font-size: clamp(23px, 3.6vw, 36px); }
.c-heading--tight  { margin-bottom: clamp(28px, 4vw, 40px); }

/* 1024px以上で1行に収める見出し */
@media (min-width: 1024px) {
  .c-heading--nowrap-pc { white-space: nowrap; }
}

/* ボタン */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border-radius: var(--radius);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .06em;
  text-decoration: none;
}
.c-btn--primary {
  flex-direction: column;
  gap: 2px;
  background: var(--orange);
  color: var(--white);
  box-shadow: var(--shadow-cta);
}
.c-btn--primary:hover { color: var(--white); }
.c-btn--outline {
  background: var(--white);
  color: var(--navy);
  border: 1.5px solid var(--line-strong);
}
.c-btn--outline:hover { color: var(--navy); }
.c-btn--ghost { background: var(--white); color: var(--navy); }
.c-btn--ghost:hover { color: var(--navy); }
.c-btn--lg { padding: 16px 30px; }

.c-btn__tel {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 25px;
  line-height: 1.2;
}
.c-btn__note { font-size: 12px; letter-spacing: .04em; opacity: .92; }

.c-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.c-btn-group--center { justify-content: center; gap: 14px; }

/* カード */
.c-card {
  display: flex;
  flex-direction: column;
  padding: 32px 26px;
  border-radius: var(--radius);
  background: var(--paper);
}
.c-card--white {
  background: var(--white);
  padding: clamp(28px, 4vw, 40px);
  box-shadow: var(--shadow-card);
}
.c-card__icon { margin-bottom: 18px; }
.c-card__title {
  margin: 0 0 12px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.7;
}
.c-card__title--lg { font-size: clamp(20px, 2.6vw, 25px); line-height: 1.6; margin-bottom: 18px; }
.c-card__text { margin: 0; color: var(--gray-text); }
.c-card__text + .c-list { margin-top: 24px; }

/* 箇条書き */
.c-list {
  list-style: none;
  margin: auto 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.c-list li {
  display: flex;
  gap: 10px;
  line-height: 1.75;
}
.c-list li::before {
  content: "—";
  color: var(--blue-bright);
  flex: none;
}

/* グリッド */
.c-grid { display: grid; gap: 20px; align-items: stretch; }
.c-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.c-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.c-grid--2wide { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.c-grid--4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* 背景の「弧」 */
.c-arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.c-arc--faint { opacity: .12; }
.c-arc--on-navy { opacity: .16; }

/* ==========================================================================
   4. ヘッダー
   ========================================================================== */
.p-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(14, 42, 71, .08);
}
.p-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
}
.p-header__logo { display: flex; align-items: center; text-decoration: none; }
.p-header__logo img { height: 40px; width: auto; display: block; }

.p-nav { display: flex; align-items: center; gap: 26px; }
.p-nav a {
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
}
.p-nav a:hover { color: var(--blue-bright); }

.p-header__actions { display: flex; align-items: center; gap: 14px; }
.p-header__tel {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 22px;
  color: var(--navy);
  text-decoration: none;
  letter-spacing: .01em;
}
.p-header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  border-radius: var(--radius);
  background: var(--orange);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}
.p-header__cta:hover { color: var(--white); }
.p-header__tel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  border: 1.5px solid rgba(14, 42, 71, .18);
  color: var(--navy);
  text-decoration: none;
}

/* ==========================================================================
   5. ヒーロー
   ========================================================================== */
.p-hero {
  position: relative;
  overflow: hidden;
  background: var(--paper);
}
.p-hero__inner {
  position: relative;
  padding-top: clamp(40px, 6vw, 76px);
  padding-bottom: clamp(52px, 6vw, 84px);
}
.p-hero__title {
  margin: 0 0 26px;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(30px, 7.4vw, 84px);
  line-height: 1.3;
  letter-spacing: .01em;
  color: var(--navy);
  text-wrap: balance;
}
.p-hero__lead {
  margin: 0 0 32px;
  max-width: 560px;
  font-size: clamp(17px, 2.2vw, 22px);
  font-weight: 500;
  color: var(--navy-mid);
}
.p-hero__note {
  margin: 22px 0 0;
  color: var(--gray-text);
}
.p-hero__label { margin-bottom: 20px; }

/* 走る写真帯 */
.p-marquee {
  position: relative;
  overflow: hidden;
  height: 260px;
  background: var(--navy);
}
.p-marquee__track {
  display: flex;
  gap: 16px;
  height: 100%;
  width: max-content;
  padding-inline: 8px;
  animation: marquee 40s linear infinite;
}
.p-marquee:hover .p-marquee__track { animation-play-state: paused; }
.p-marquee__item {
  position: relative;
  margin: 0;
  width: 380px;
  height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
}
.p-marquee__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-marquee__caption {
  position: absolute;
  left: 14px;
  bottom: 12px;
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .08em;
  text-shadow: 0 1px 6px rgba(14, 42, 71, .7);
}
.p-marquee__caption span {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: .16em;
  opacity: .8;
}

/* ==========================================================================
   6. 各セクション
   ========================================================================== */

/* Concept ------------------------------------------------------------- */
.p-concept__body {
  display: grid;
  gap: 26px;
  font-size: 17px;
  line-height: 1.95;
  color: rgba(255, 255, 255, .92);
}
.p-concept__body p { margin: 0; }

/* Message ------------------------------------------------------------- */
.p-message__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.p-message__photo {
  display: block;
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.p-message__name {
  margin: 20px 0 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .06em;
}
.p-message__name-en {
  margin-left: 12px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--gray-text);
}
.p-message__stats {
  display: flex;
  gap: 14px;
  margin-top: 24px;
}
.p-stat {
  flex: 1;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--paper);
}
.p-stat__num {
  margin: 0;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 42px;
  line-height: 1;
  color: var(--navy-mid);
}
.p-stat__num span { font-size: 18px; margin-left: 4px; }
.p-stat__caption {
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--gray-text);
}
.p-message__text {
  display: grid;
  gap: 28px;
}
.p-message__text p {
  margin: 0;
  font-size: 17px;
  line-height: 1.95;
}
.p-quote {
  margin: 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--orange);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(19px, 2.6vw, 24px);
  line-height: 1.8;
  color: var(--navy);
}

/* Why Us -------------------------------------------------------------- */
.p-feature {
  margin-bottom: 20px;
  padding: clamp(32px, 4.5vw, 52px);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #0E2A47 0%, #1B4C82 70%, #3D8FD1 140%);
  color: var(--white);
}
.p-feature__label {
  margin: 0 0 14px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--blue-pale);
}
.p-feature__title {
  margin: 0 0 18px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(22px, 3.2vw, 32px);
  line-height: 1.6;
  
}
.p-feature__text {
  margin: 0;
  max-width: 640px;
  font-size: 17px;
  line-height: 1.95;
  color: rgba(255, 255, 255, .9);
}

/* Area ---------------------------------------------------------------- */
.p-area__box {
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-card);
}
.p-area__map { width: 100%; height: auto; display: block; }
.p-area__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 24px;
}
.p-tag {
  padding: 8px 16px;
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--navy);
  font-size: 15px;
}
.p-tag--base {
  background: var(--orange-pale);
  font-weight: 500;
}
.p-area__note { margin: 0; color: var(--gray-text); }

/* Flow ---------------------------------------------------------------- */
.p-flow {
  list-style: none;
  margin: 0;
  padding: 0;
}
.p-flow__item {
  padding: 30px 24px;
  border-radius: var(--radius);
  background: var(--paper);
}
.p-flow__num {
  margin: 0 0 14px;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 32px;
  line-height: 1;
  color: var(--blue-bright);
}
.p-flow__title {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 19px;
}
.p-flow__text { margin: 0 0 14px; color: var(--gray-text); }
.p-flow__free {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--orange);
}
.p-flow__free--muted { font-weight: 400; color: var(--gray-text); }

/* Listings / Blog ----------------------------------------------------- */
.p-card__label {
  margin: 0 0 12px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--blue-bright);
}
.p-card__tel {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 20px;
  text-decoration: none;
  color: var(--navy-mid);
}

/* FAQ ----------------------------------------------------------------- */
.p-faq { display: grid; gap: 12px; }
.p-faq__item {
  padding: 4px 24px;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-card);
}
.p-faq__q {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding-block: 20px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.7;
}
.p-faq__q::-webkit-details-marker { display: none; }
.p-faq__q::before {
  content: "Q";
  font-family: var(--font-en);
  color: var(--blue-bright);
}
.p-faq__a {
  margin: 0;
  padding: 0 0 22px 30px;
  color: var(--gray-text);
}

/* 会社概要 ------------------------------------------------------------ */
.p-company__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}
.p-company__dl { margin: 0; }
.p-company__row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
}
.p-company__row:last-child { border-bottom: 0; }
.p-company__row dt {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--gray-text);
}
.p-company__row dd { margin: 0; line-height: 1.8; }
.p-company__tel {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 19px;
  text-decoration: none;
}
.p-company__todo {
  display: inline-block;
  padding: 6px 14px;
  border: 1px dashed var(--orange);
  border-radius: var(--radius);
  background: var(--orange-pale);
  color: var(--orange);
  font-size: 15px;
  font-weight: 500;
}
.p-company__map {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  min-height: 320px;
}
.p-company__map iframe {
  border: 0;
  width: 100%;
  height: 100%;
  min-height: 320px;
  display: block;
}

/* ==========================================================================
   7. フォーム
   ========================================================================== */
.p-form {
  display: grid;
  gap: 26px;
  min-width: 0;
  padding: clamp(26px, 4vw, 44px);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-card);
}
.p-form__row { display: grid; gap: 10px; min-width: 0; }
.p-form__label {
  font-size: 15px;
  font-weight: 500;
}
.p-form__required {
  margin-left: 8px;
  font-size: 13px;
  color: var(--orange);
}
.p-form__lead { margin: 0 0 clamp(28px, 4vw, 40px); color: var(--gray-text); }

/* iOSでの右はみ出し・ネイティブ装飾を抑止 */
.p-form input,
.p-form textarea,
.p-form select,
.p-form button {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  font-size: 16px; /* iOSの自動ズーム防止 */
  border-radius: var(--radius);
}
.p-form input[type="text"],
.p-form input[type="tel"],
.p-form input[type="email"],
.p-form textarea {
  padding: 14px 16px;
  border: 1.5px solid var(--line-strong);
  background: var(--paper);
  color: var(--navy);
}
.p-form textarea { line-height: 1.9; resize: vertical; }
.p-form input[type="radio"],
.p-form input[type="checkbox"] {
  width: auto;
  -webkit-appearance: auto;
  appearance: auto;
  accent-color: var(--navy-mid);
  border-radius: 0;
}

.p-form__fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  min-width: 0;
}
.p-form__legend {
  padding: 0;
  margin-bottom: 2px;
  font-size: 15px;
  font-weight: 500;
}
.p-form__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.p-form__choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1.5px solid rgba(14, 42, 71, .12);
  border-radius: var(--radius);
  background: var(--paper);
  cursor: pointer;
}
.p-form__choice input { width: 18px; height: 18px; }

.p-form__agree {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.8;
  cursor: pointer;
}
.p-form__agree input {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  flex: none;
}

.p-form__submit {
  padding: 18px 24px;
  border: 0;
  background: var(--orange);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .08em;
  cursor: pointer;
  box-shadow: var(--shadow-cta);
}

/* スクリーンリーダー用・スパム対策の隠しフィールド */
.u-visually-hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   8. フッター / SP固定CTAバー
   ========================================================================== */
.p-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, .78);
}
.p-footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 36px;
  padding-top: clamp(48px, 6vw, 72px);
  padding-bottom: clamp(100px, 12vw, 56px);
}
.p-footer__logo {
  height: 42px;
  width: auto;
  display: block;
  margin-bottom: 20px;
}
.p-footer p { margin: 0 0 8px; }
.p-footer__hours { margin: 0; font-size: 15px; }
.p-footer__tel {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 22px;
  color: var(--white);
  text-decoration: none;
}
.p-footer__nav {
  display: grid;
  gap: 12px;
  align-content: start;
}
.p-footer__nav a {
  color: rgba(255, 255, 255, .8);
  text-decoration: none;
}
.p-footer__nav a:hover { color: var(--white); }
.p-footer__copy {
  margin: 0;
  padding: 0 var(--gutter) clamp(96px, 12vw, 32px);
  text-align: center;
  font-size: 13px;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .5);
}

/* SP固定CTAバー（スクロールで表示。表示制御は script.js） */
.p-spbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  box-shadow: 0 -1px 0 rgba(14, 42, 71, .08);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.p-spbar.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.p-spbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  border-radius: var(--radius);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .06em;
  text-decoration: none;
}
.p-spbar__tel { background: var(--orange); color: var(--white); }
.p-spbar__tel:hover { color: var(--white); }
.p-spbar__mail {
  background: var(--white);
  color: var(--navy);
  border: 1.5px solid var(--navy);
}
.p-spbar__mail:hover { color: var(--navy); }

/* ==========================================================================
   9. アニメーション
   ========================================================================== */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* スクロールで浮かび上がる要素（初期状態は script.js が付与） */
.js-fade.is-hidden {
  opacity: 0;
  transform: translateY(16px);
}
.js-fade {
  transition: opacity .7s cubic-bezier(.22, .7, .3, 1),
              transform .7s cubic-bezier(.22, .7, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .p-marquee__track { animation: none !important; }
  .js-fade { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ==========================================================================
   10. レスポンシブ
   ========================================================================== */
@media (min-width: 900px) {
  .p-message__grid { grid-template-columns: 4fr 6fr; }
}

@media (max-width: 860px) {
  .p-marquee { height: 160px; }
  .p-marquee__item { width: 260px; }
}

@media (max-width: 420px) {
  .p-hero__title .line { word-break: auto-phrase; }
}

@media (max-width: 380px) {
  .p-hero__title { font-size: 26px; }
}

/* === 固定ページ / 404ページの本文 === */
/* WordPress の the_content() が出力する本文を、既存のトークンに馴染ませる。 */
.p-page__body {
  margin-bottom: clamp(40px, 5vw, 56px);
}
.p-page__body > *:first-child { margin-top: 0; }
.p-page__body > *:last-child  { margin-bottom: 0; }

.p-page__body p {
  margin: 0 0 1.6em;
}

.p-page__body h2 {
  margin: clamp(40px, 5vw, 56px) 0 20px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 24px);
  line-height: 1.6;
}
.p-page__body h3 {
  margin: clamp(32px, 4vw, 40px) 0 16px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.7;
}

.p-page__body ul,
.p-page__body ol {
  margin: 0 0 1.6em;
  padding-left: 1.4em;
}
.p-page__body li { margin-bottom: 8px; }

.p-page__body dl { margin: 0 0 1.6em; }
.p-page__body dt { font-weight: 500; }
.p-page__body dd { margin: 0 0 16px; color: var(--gray-text); }

.p-page__body table {
  width: 100%;
  margin: 0 0 1.6em;
  border-collapse: collapse;
}
.p-page__body th,
.p-page__body td {
  padding: 14px 16px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.p-page__body th { background: var(--paper); font-weight: 500; }

.p-page__body blockquote {
  margin: 0 0 1.6em;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--blue-bright);
  color: var(--gray-text);
}

.p-page__back {
  margin: 0;
}

/* === Contact Form 7 の出力調整 === */
/*
   CF7 が生成する <form> には inc/cf7.php で p-form クラスを付与しているため、
   既存の .p-form 系スタイルはそのまま効く。ここでは CF7 固有の
   ラッパー（wpcf7-*）だけを既存デザインに合わせる。
   CF7本体のCSSより後に読み込まれない場合に備え、.p-form を前置して詳細度を上げている。
*/

/* 入力欄のラッパー。span のままだと幅計算が崩れるのでブロック化する */
.p-form .wpcf7-form-control-wrap {
  display: block;
  min-width: 0;
}

/* CF7 が先頭に差し込む隠しフィールド群が grid の隙間を作らないようにする
   （CF7 6系では <fieldset class="hidden-fields-container">） */
.p-form > .hidden-fields-container {
  display: none;
}

/* CF7 が項目ラベルの前後に入れる空白を打ち消す（flex の gap で間隔を作るため） */
.p-form .wpcf7-list-item-label::before,
.p-form .wpcf7-list-item-label::after {
  content: none;
}

/* ---- ラジオボタン（.p-form__choice の見た目に合わせる） ---- */
/* .p-form__choices（flex）の中に CF7 のラッパーが1つ入るため、全幅を取らせる */
.p-form .p-form__choices > .wpcf7-form-control-wrap {
  flex: 1 1 100%;
}
.p-form .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.p-form .wpcf7-radio .wpcf7-list-item {
  margin: 0; /* CF7 標準の margin-left: 1em を打ち消す */
  display: flex;
}
.p-form .wpcf7-radio .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 18px;
  border: 1.5px solid rgba(14, 42, 71, .12);
  border-radius: var(--radius);
  background: var(--paper);
  cursor: pointer;
}
.p-form .wpcf7-radio .wpcf7-list-item input[type="radio"] {
  width: 18px;
  height: 18px;
  flex: none;
}
.p-form .wpcf7-list-item-label { line-height: 1.6; }

/* ---- 同意チェックボックス（.p-form__agree の見た目に合わせる） ---- */
.p-form .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}
.p-form .wpcf7-acceptance .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.8;
  cursor: pointer;
}
.p-form .wpcf7-acceptance input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  flex: none;
}

/* ---- 送信ボタン（.p-form__submit と同じ見た目） ---- */
.p-form .wpcf7-submit {
  padding: 18px 24px;
  border: 0;
  border-radius: var(--radius);
  background: var(--orange);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .08em;
  cursor: pointer;
  box-shadow: var(--shadow-cta);
}

/*
   同意チェックが未チェックの間、CF7 は送信ボタンを disabled にする。
   CF7標準は cursor しか変えないため、押せないことが見た目でも分かるようにする。
*/
.p-form .wpcf7-submit:disabled {
  opacity: .45;
  box-shadow: none;
  cursor: not-allowed;
}

/*
   送信中のスピナー。
   CF7 は読み込み時にスピナーを送信ボタンの直後に挿入し、visibility: hidden で
   隠す。.p-form は grid のため、そのままだと常に1行分（24px＋gap）の余白が
   できてしまう。送信中だけ表示させる。
*/
.p-form .wpcf7-spinner {
  display: none;
}
.wpcf7 form.p-form.submitting .wpcf7-spinner {
  display: block;
  visibility: visible;
  margin: 12px auto 0;
}

/* ---- エラー表示 ---- */
.p-form .wpcf7-not-valid-tip {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--orange);
}
.p-form input.wpcf7-not-valid,
.p-form textarea.wpcf7-not-valid {
  border-color: var(--orange);
}

/* ---- 送信後・検証結果のメッセージ ---- */
/*
   CF7 標準の `.wpcf7 form .wpcf7-response-output`（詳細度 0,2,1）が
   margin: 2em 0.5em 1em / padding: 0.2em 1em / border: 2px を持つため、
   `.p-form .wpcf7-response-output`（0,2,0）では打ち消せない。
   form.p-form まで含めて詳細度を上げている。
*/
.wpcf7 form.p-form .wpcf7-response-output {
  margin: 0;
  padding: 16px 20px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 1.8;
}
/* 入力エラー・未同意 */
.wpcf7 form.p-form.invalid .wpcf7-response-output,
.wpcf7 form.p-form.unaccepted .wpcf7-response-output,
.wpcf7 form.p-form.payment-required .wpcf7-response-output {
  border-color: var(--orange);
  background: var(--orange-pale);
  color: var(--navy);
}
/* 送信失敗・中断・スパム判定 */
.wpcf7 form.p-form.failed .wpcf7-response-output,
.wpcf7 form.p-form.aborted .wpcf7-response-output,
.wpcf7 form.p-form.spam .wpcf7-response-output {
  border-color: var(--orange);
  background: var(--orange-pale);
  color: var(--navy);
}
/* 送信完了 */
.wpcf7 form.p-form.sent .wpcf7-response-output {
  border-color: var(--blue-bright);
  background: var(--paper);
  color: var(--navy);
}

/* === ブログ === */
/*
   Phase 2 で追加。記事カード（c-postcard）／一覧ページ（p-blog）／
   ページネーション（c-pagination）。
   色・書体・角丸は :root のトークンだけを使う。
*/

/* ---- 記事カード ---- */
/*
   カード全体が <a> のため、text-decoration / color / hover を明示する。
   transition に opacity と transform を含めているのは、
   .js-fade（930行目）の transition をこの指定が上書きしてしまい、
   フェードインが効かなくなるのを防ぐため。値も .js-fade と揃えている。
*/
.c-postcard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-card);
  color: var(--navy);
  text-decoration: none;
  transition: opacity .7s cubic-bezier(.22, .7, .3, 1),
              transform .7s cubic-bezier(.22, .7, .3, 1),
              box-shadow .3s cubic-bezier(.22, .7, .3, 1),
              color .25s ease;
}
/*
   hover の影は --shadow-card を2枚重ねて濃くしている。
   別の色を書き起こさずに済み、既存カードと色味が完全に揃うため。
*/
.c-postcard:hover {
  color: var(--navy);
  box-shadow: var(--shadow-card), var(--shadow-card);
}
.c-postcard:hover .c-postcard__title { color: var(--blue-bright); }

/* サムネイル枠。16:9 で固定し、画像の縦横比に依存させない */
.c-postcard__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper);
}
.c-postcard__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-postcard__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px var(--gutter) 26px;
}
/* アイキャッチが無い場合は、上の余白を少し足して頭が詰まって見えないようにする */
.c-postcard--noimg .c-postcard__body { padding-top: 28px; }

.c-postcard__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 10px;
}
.c-postcard__date {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--blue-bright);
}
.c-postcard__cat {
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--paper);
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: .04em;
  color: var(--gray-text);
}

/* c-heading は max-width: 640px を持つため、カードでは使わず独自に定義する */
.c-postcard__title {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.7;
}
.c-postcard__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--gray-text);
}

/* ---- 記事が0件のとき ---- */
.p-blog__empty {
  margin: 0;
  padding: clamp(40px, 6vw, 64px) var(--gutter);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--gray-text);
  text-align: center;
}

/* ---- ページネーション ---- */
/*
   the_posts_pagination() の出力を受ける。
   .navigation .nav-links .page-numbers .current .dots .screen-reader-text は
   WordPress 側のクラスなので、こちらで吸収する（マークアップは書き換えない）。
*/
.c-pagination { margin-top: clamp(40px, 5vw, 56px); }

/* 見出し（h2.screen-reader-text）はこのテーマにCSSが無く、
   そのままでは見えてしまうため u-visually-hidden と同じ指定で隠す */
.c-pagination .screen-reader-text {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.c-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.c-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--white);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  color: var(--navy);
  text-decoration: none;
}
.c-pagination a.page-numbers:hover {
  border-color: var(--blue-bright);
  color: var(--blue-bright);
}
/* 現在のページ */
.c-pagination .page-numbers.current {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
}
/* 省略記号 */
.c-pagination .page-numbers.dots {
  min-width: 0;
  padding: 0 4px;
  border-color: transparent;
  background: none;
  color: var(--gray-text);
}
/* 「前へ」「次へ」は和文なので本文書体に戻す */
.c-pagination .prev,
.c-pagination .next {
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .04em;
}

/* ---- 記事詳細のヘッダー ---- */
.p-entry__header { margin-bottom: clamp(28px, 4vw, 40px); }

.p-entry__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 0 0 14px;
}
.p-entry__cat {
  display: inline-flex;
  padding: 1px 12px;
  border-radius: 999px;
  background: var(--paper);
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: .04em;
  color: var(--gray-text);
  text-decoration: none;
}
.p-entry__cat:hover { color: var(--blue-bright); }

.p-entry__date {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--blue-bright);
}
/* 「更新」の文字は和文なので本文書体のまま、日付だけ欧文書体にする */
.p-entry__updated {
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--gray-text);
}
.p-entry__updated time {
  font-family: var(--font-en);
  font-weight: 700;
  letter-spacing: .08em;
}

/* アイキャッチは切り抜かず、元の縦横比のまま出す */
.p-entry__thumb { margin-top: clamp(24px, 3vw, 32px); }
.p-entry__thumb img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.p-entry__foot { margin-top: clamp(40px, 5vw, 56px); }

/* ---- 記事本文（ブロックエディタの出力への対応） ---- */
/*
   既存の .p-page__body（961〜1023行目）は h2 / h3 / p / ul / ol / dl /
   table / blockquote までをカバーしている。
   ここではそこに無い要素を補う。既存の記述は編集せず、
   このブロックが後に来ることで上書きされるようにしている。
*/
.p-page__body a {
  color: var(--navy-mid);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.p-page__body a:hover { color: var(--blue-bright); }

.p-page__body h4 {
  margin: clamp(28px, 3.4vw, 32px) 0 12px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.7;
}

.p-page__body figure { margin: 0 0 1.6em; }
.p-page__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.p-page__body figcaption,
.p-page__body .wp-caption-text {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--gray-text);
}

.p-page__body .wp-block-image { margin: 0 0 1.6em; }
.p-page__body .wp-block-image img { display: block; }

.p-page__body .wp-block-embed { margin: 0 0 1.6em; }
.p-page__body .wp-block-embed iframe {
  display: block;
  width: 100%;
  max-width: 100%;
}

.p-page__body .wp-block-separator {
  height: 0;
  margin: clamp(32px, 4vw, 48px) auto;
  border: 0;
  border-top: 1px solid var(--line);
}

/*
   .wp-block-quote は blockquote 要素そのものなので、
   既存の .p-page__body blockquote の指定がそのまま効く。
   ここでは出典（cite）と余白だけを補い、既存の指定は上書きしない。
*/
.p-page__body .wp-block-quote > :last-child { margin-bottom: 0; }
.p-page__body .wp-block-quote cite,
.p-page__body .wp-block-quote__citation {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-style: normal;
  color: var(--gray-text);
}

/* 表は狭い画面で横スクロールさせる（ラッパーは .wp-block-table） */
.p-page__body .wp-block-table {
  margin: 0 0 1.6em;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.p-page__body .wp-block-table > table {
  margin: 0;
  min-width: 520px;
}

/* ---- 前後記事ナビゲーション ---- */
/*
   the_post_navigation() の出力を受ける。
   .nav-links / .nav-previous / .nav-next / .screen-reader-text は
   WordPress 側のクラスなので、こちらで吸収する。
*/
.p-postnav { margin-top: clamp(40px, 5vw, 56px); }

/* 見出し（h2.screen-reader-text）はこのテーマにCSSが無く、
   そのままでは見えてしまうため u-visually-hidden と同じ指定で隠す */
.p-postnav .screen-reader-text {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.p-postnav .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/*
   flex-grow を持たせないことで、前後どちらか一方しか無い場合でも
   片側が横いっぱいに伸びない。「次の記事」だけのときは
   margin-left: auto で右に寄る。
*/
.p-postnav .nav-previous,
.p-postnav .nav-next {
  display: flex;
  flex: 0 1 calc(50% - 6px);
  min-width: 0;
}
.p-postnav .nav-next {
  margin-left: auto;
  text-align: right;
}

.p-postnav a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  padding: 16px 18px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--navy);
  text-decoration: none;
}
.p-postnav a:hover {
  border-color: var(--blue-bright);
  color: var(--blue-bright);
}
.p-postnav__label {
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--gray-text);
}
/* 長いタイトルでも高さが暴れないよう2行で切る */
.p-postnav__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.7;
}

/* ---- パンくずリスト ---- */
/*
   項目を inline で流すことで、長い記事タイトルでも自然に折り返す。
   flex にすると折り返し位置が項目単位に固定されてしまい、
   SP幅で1項目が横にはみ出す原因になるため、あえて使っていない。
   横スクロールはさせない。
*/
.c-breadcrumb {
  margin-bottom: clamp(24px, 3vw, 32px);
  font-size: 13px;
  line-height: 1.9;
  color: var(--gray-text);
}
.c-breadcrumb__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-breadcrumb__item { display: inline; }

/* 区切り記号。読み上げに乗らないよう擬似要素で入れる */
.c-breadcrumb__item + .c-breadcrumb__item::before {
  content: "›";
  margin: 0 8px;
  color: var(--line-strong);
}

.c-breadcrumb a {
  color: var(--gray-text);
  text-decoration: none;
}
.c-breadcrumb a:hover {
  color: var(--blue-bright);
  text-decoration: underline;
}
.c-breadcrumb__current { color: var(--navy); }

/* ---- アーカイブ / 検索結果 ---- */
/* 説明文が続くときだけ、見出しの下余白を詰める */
.p-archive__title { margin-bottom: 12px; }

.p-archive__desc {
  margin: 0 0 clamp(28px, 4vw, 40px);
  max-width: 720px;
  color: var(--gray-text);
}
.p-archive__desc > *:first-child { margin-top: 0; }
.p-archive__desc > *:last-child { margin-bottom: 0; }

.p-blog__foot { margin-top: clamp(40px, 5vw, 56px); }

/* ---- 記事リスト（トップページのカード内など、幅の狭い場所向け） ---- */
/*
   c-list は margin: auto 0 0 でカード下端に寄る設計のため流用しない。
   サムネイルは出さず「日付＋タイトル」の1行構成にしている。
*/
.c-postlist {
  display: grid;
  gap: 12px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.c-postlist__item a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  color: var(--navy);
  text-decoration: none;
}
.c-postlist__item a:hover .c-postlist__title {
  color: var(--blue-bright);
  text-decoration: underline;
}

/* 日付は折り返させない。タイトル側だけが折り返す */
.c-postlist__date {
  flex: none;
  white-space: nowrap;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--blue-bright);
}
/* 長いタイトルでもカードの高さが暴れないよう2行で切る */
.c-postlist__title {
  flex: 1 1 auto;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.7;
}

/*
   カード内のボタン。
   .c-card は flex-direction: column なので、既定では横いっぱいに伸びる。
   左寄せにしたうえで、隣のカードの電話番号と同じくカード下端に置く。
*/
.c-card .c-postlist + .c-btn {
  align-self: flex-start;
  margin-top: auto;
}

/* === 物件紹介 === */
/*
   Phase 3 で追加。物件カード（c-propcard）／ステータスバッジ（c-status）／
   物件概要（c-spec）／物件詳細（p-property）。
   色・書体・角丸は :root のトークンだけを使う。

   一覧ページの枠（l-section / l-container / c-grid）、0件表示（p-blog__empty）、
   ページネーション（c-pagination）、見出しまわり（p-archive__title / __desc）、
   一覧下の余白（p-blog__foot）、物件本文（p-page__body）、
   前後ナビ（p-postnav）は、ブログ側・固定ページ側の記述をそのまま流用しているため
   ここには書かない。
*/

/* ---- 物件カード ---- */
/*
   記事カード（c-postcard）とは出す情報が違うため流用せず、別に起こしている。
   カード全体が <a> のため、text-decoration / color / hover を明示する。

   transition に opacity と transform を含めているのは、
   .js-fade（930行目）の transition をこの指定が上書きしてしまい、
   フェードインが効かなくなるのを防ぐため。値も .js-fade と揃えている。
   c-postcard と同じ理由なので、こちらも外さないこと。
*/
.c-propcard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-card);
  color: var(--navy);
  text-decoration: none;
  transition: opacity .7s cubic-bezier(.22, .7, .3, 1),
              transform .7s cubic-bezier(.22, .7, .3, 1),
              box-shadow .3s cubic-bezier(.22, .7, .3, 1),
              color .25s ease;
}
/* hover の影は --shadow-card を2枚重ねて濃くしている（c-postcard と同じ手） */
.c-propcard:hover {
  color: var(--navy);
  box-shadow: var(--shadow-card), var(--shadow-card);
}
.c-propcard:hover .c-propcard__title { color: var(--blue-bright); }

/* サムネイル枠。16:9 で固定し、画像の縦横比に依存させない。
   ステータスバッジを重ねるため position: relative を持たせている */
.c-propcard__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper);
}
.c-propcard__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 写真の上に重ねる位置。--noimg のカードには __media 自体が無いので効かない */
.c-propcard__media .c-status {
  position: absolute;
  top: 12px;
  left: 12px;
}

.c-propcard__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 20px var(--gutter) 24px;
}
/* アイキャッチが無い場合は、上の余白を少し足して頭が詰まって見えないようにする */
.c-propcard--noimg .c-propcard__body { padding-top: 26px; }
/*
   写真が無いカードでは、ステータスバッジが本文の先頭に入る。
   __body は flex-direction: column なので、放っておくと横いっぱいに伸びる。
*/
.c-propcard__body > .c-status {
  align-self: flex-start;
  margin-bottom: 12px;
}

.c-propcard__type {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: .04em;
  color: var(--gray-text);
}

/* c-heading は max-width: 640px を持つため、カードでは使わず独自に定義する */
.c-propcard__title {
  margin: 0 0 12px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.7;
}

/*
   価格はカードの中で最も目立たせる（タイトルより大きくする）。
   欧文書体（--font-en）には和文のグリフが無く、「億」「万円」だけが
   別の書体に落ちてしまうため、数字と和文が混ざるここでは --font-head を使う。
*/
.c-propcard__price {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(21px, 2.4vw, 24px);
  line-height: 1.4;
  letter-spacing: .02em;
  color: var(--navy);
}

/*
   所在地と最寄駅。カードごとに行数が違っても下端が揃うよう margin-top: auto で
   下に寄せる。長い住所でも高さが暴れないよう2行で切る。
*/
.c-propcard__spec {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: auto 0 0;
  padding-top: 4px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--gray-text);
}

/* ---- ステータスバッジ ---- */
/*
   template-parts/property/status.php の出力。物件カードと物件詳細の両方から呼ぶ。
   修飾子は awasof_get_property_status() が返すキーと1対1で対応する。

   ★ ACF側の選択肢（キー）を増やしたときは、inc/property.php の $labels と
     ここの .c-status--* の両方に足すこと。片方だけだと無地のバッジになる。

   写真の上に重ねても読めるよう、背景には半透明色を使わない。
*/
.c-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 12px;
  border-radius: 999px;
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: .06em;
  white-space: nowrap;
}
/* 販売中：いちばん強く出す */
.c-status--sale {
  background: var(--blue-bright);
  color: var(--white);
}
/* 商談中：販売中より一段弱く */
.c-status--talk {
  background: var(--blue-pale);
  color: var(--navy);
}
/* 成約済み：主張させない */
.c-status--sold {
  background: var(--paper);
  color: var(--gray-text);
}
/* 非公開：一覧には出ないが、URLを直接開いた場合と管理用に定義しておく */
.c-status--private {
  background: var(--navy);
  color: var(--white);
}

/* ---- 物件詳細 ---- */
/*
   本文のスタイルは固定ページ・記事詳細と共用（p-page__body）。
   前後ナビ（p-postnav）もブログ側の記述をそのまま使うため、ここには書かない。
*/
.p-property__header { margin-bottom: clamp(24px, 3vw, 32px); }

.p-property__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
}
/* 物件種別。p-entry__cat と同じトーンだが、別のブロックなので独立に定義する */
.p-property__type {
  display: inline-flex;
  padding: 1px 12px;
  border-radius: 999px;
  background: var(--paper);
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: .04em;
  color: var(--gray-text);
  text-decoration: none;
}
.p-property__type:hover { color: var(--blue-bright); }

/* メイン画像。カードと違い、切り抜かず元の縦横比のまま出す */
.p-property__main img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/*
   セクション（物件概要・本文・写真）の間隔。
   隣り合う要素の margin と相殺されるので、続けて置いても間隔は広がらない。
*/
.p-property__section { margin-top: clamp(40px, 5vw, 56px); }

/*
   セクション見出し（物件概要・写真）。
   c-heading は max-width: 640px を持つため使わず、
   本文中の見出し（.p-page__body h2）と同じトーンで独自に定義する。
   margin-top を書かないのは、p-property__section 側の指定を活かすため。
*/
.p-property__subtitle {
  margin-bottom: 20px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 24px);
  line-height: 1.6;
}

/* 成約済みの案内。c-status--sold と同じトーンにして、主張させすぎない */
.p-property__notice {
  margin: clamp(24px, 3vw, 32px) 0 0;
  padding: 14px 20px;
  border-radius: var(--radius);
  background: var(--paper);
  font-size: 15px;
  line-height: 1.9;
  color: var(--gray-text);
}

/* ---- 物件概要（スペック表） ---- */
/*
   p-company__row と同じトーンだが、p- はページ固有ブロックのため流用せず
   c- として独立に定義する。
   行の並びは PC で2カラム、SP で1カラム。行の中は「項目名 / 値」の2カラムで、
   幅が足りないときだけ縦に積む。
*/
.c-spec {
  display: grid;
  gap: 0 clamp(24px, 3vw, 48px);
  margin: 0;
  border-top: 1px solid var(--line);
}
.c-spec__row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
}
.c-spec__row dt {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--gray-text);
}
.c-spec__row dd {
  margin: 0;
  line-height: 1.8;
}

@media (min-width: 861px) {
  .c-spec { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .c-spec__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ---- 物件の写真 ---- */
/*
   Phase 4 で変更。縦長の写真が混ざると高さが不揃いになるため、
   サムネイルは 4:3 に切りそろえる（縦長は上下が切れる）。
   切れた分はクリックで開くライトボックス（script.js の3つ目の機能）で補う。
   auto-fit なので SP では1列、PC では最大3列になる（c-grid--3 と同じ考え方）。
*/
.p-property__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  align-items: start;
}
.p-property__figure { margin: 0; }

/*
   サムネイルのリンク。角丸と影は <a> 側に付け、中の img は枠いっぱいに敷く。
   クリックできることが分かるよう、cursor: zoom-in ＋ hover で拡大と影を出す。
   フォーカスリングは共通の :focus-visible（87行目）がそのまま効く。
*/
.p-property__link {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-card);
  cursor: zoom-in;
  transition: box-shadow .3s cubic-bezier(.22, .7, .3, 1);
}
/* hover の影は --shadow-card を2枚重ねて濃くしている（c-propcard と同じ手） */
.p-property__link:hover { box-shadow: var(--shadow-card), var(--shadow-card); }
.p-property__link img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .4s cubic-bezier(.22, .7, .3, 1);
}
.p-property__link:hover img { transform: scale(1.04); }

.p-property__caption {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--gray-text);
}

/* 一覧へ戻るリンク */
.p-property__foot { margin-top: clamp(40px, 5vw, 56px); }

/* ---- 物件リスト（トップページのカード内など、幅の狭い場所向け） ---- */
/*
   c-postlist と同じ見た目の系統だが、あちらは __date が <time>（日付）前提の
   命名・スタイルなので流用せず別に起こしている。
   先頭は価格。価格が未入力の物件では物件種別が入る。
*/
.c-proplist {
  display: grid;
  gap: 12px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.c-proplist__item a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  color: var(--navy);
  text-decoration: none;
}
.c-proplist__item a:hover .c-proplist__title {
  color: var(--blue-bright);
  text-decoration: underline;
}

/*
   価格は折り返させない。物件名側だけが折り返す。
   欧文書体（--font-en）には和文のグリフが無く「万円」だけ別書体に落ちるため、
   c-propcard__price と同じく --font-head を使う。
*/
.c-proplist__price {
  flex: none;
  white-space: nowrap;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--blue-bright);
}
/* 長い物件名でもカードの高さが暴れないよう2行で切る */
.c-proplist__title {
  flex: 1 1 auto;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.7;
}

/*
   カード内のボタン。ブログ側の .c-card .c-postlist + .c-btn と同じ挙動にする。
   既存のセレクタ（1675行目）は書き換えず、こちらに同じ指定を書いている。
*/
.c-card .c-proplist + .c-btn {
  align-self: flex-start;
  margin-top: auto;
}

/* ---- 写真のライトボックス ---- */
/*
   Phase 4 で追加。Phase 3 では「JSを増やさない」方針で見送っていたが、
   縦長写真をサムネイルで切る（aspect-ratio 4/3）ことにしたため、
   全体を見る手段として拡大表示を用意した。

   マークアップは HTML に無い。script.js の3つ目の機能が
   <dialog class="c-lightbox"> ＋ .c-lightbox__img ＋ .c-lightbox__close を
   ページに1つだけ生成する。テンプレートを探しても見つからないので注意。
   <dialog> 非対応の環境では生成されず、リンクとしてフルサイズ画像が開くだけになる。
*/
.c-lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
/*
   dialog は開いていない間 UA スタイルの display: none が効く。
   開いている間だけ中身を中央に置く。画面いっぱいを覆うので、
   写真の外側をクリックすると「背景のクリック」として閉じられる（判定は script.js）。
*/
.c-lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
   背景。::backdrop はカスタムプロパティを継承しない環境（古いブラウザ）があるため、
   --navy と同じ値をフォールバックに書いている。色を新しく足しているわけではない。
*/
.c-lightbox::backdrop {
  background: var(--navy, #0E2A47);
  opacity: .82;
}

/* 拡大した写真。切り抜かず、画面内に全体が収まるようにする */
.c-lightbox__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--white);
}

/*
   閉じるボタン。画面の右上に固定する（親の dialog が position: fixed）。
   指で押しやすいよう 48px 角を確保し、切り欠きのある端末に隠れないよう
   セーフエリアを見て位置をずらす。
*/
.c-lightbox__close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--white);
  box-shadow: var(--shadow-card);
  color: var(--navy);
  font-family: var(--font-base);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.c-lightbox__close:hover { color: var(--blue-bright); }

/* 開いている間は背面をスクロールさせない（クラスの付け外しは script.js） */
.is-lightbox-open { overflow: hidden; }

/*
   開くときのアニメーション。
   prefers-reduced-motion: reduce のときは script.js が --anim を付けないため、
   そもそもこの指定に当たらない。下の @media は保険。
*/
.c-lightbox--anim[open] {
  animation: awasof-lightbox-in .24s cubic-bezier(.22, .7, .3, 1) both;
}
.c-lightbox--anim[open]::backdrop {
  animation: awasof-lightbox-backdrop .24s ease both;
}

@keyframes awasof-lightbox-in {
  from { opacity: 0; transform: scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes awasof-lightbox-backdrop {
  from { opacity: 0; }
  to   { opacity: .82; }
}

@media (prefers-reduced-motion: reduce) {
  .p-property__link,
  .p-property__link img { transition: none; }
  .p-property__link:hover img { transform: none; }
  .c-lightbox--anim[open],
  .c-lightbox--anim[open]::backdrop { animation: none; }
}