@charset "UTF-8";

/* ==========================================================================
   Foundation — リセット、ベース、変数
   ========================================================================== */

:root {
  /* ---------- Color (Figma から取得) ---------- */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-text: #000000;
  --color-text-muted: #808080;     /* メルマガ説明 等 */
  --color-text-num: #5b5c57;       /* ページリンク 01〜06 */
  --color-text-date: #9f9f9f;      /* News 日付 */
  --color-text-label: #6a7282;     /* NEWS ラベル */
  --color-bg: #ffffff;
  --color-bg-soft: #f3f1f1;        /* ページリンク背景 */
  --color-overlay: #7e807c;        /* Contact / pickup の暗幕 */
  --color-accent: #cfdc00;         /* 東京ショールーム予約ボタン */
  --color-border: #d1d5dc;         /* Email Input border */
  --color-line: #e5e5e5;           /* News 区切り線 */
  --color-step-line: #dcdcdc;      /* support step 枠線 */
  --color-orange: #c74d2f;         /* support アクセント色 */
  --color-orange-bg: #fff5f3;      /* support アクセント背景 */
  --color-step-num: #7e807c;       /* support step 番号文字色 */

  /* ---------- Font ---------- */
  --font-en: "Lato", "Helvetica Neue", Arial, sans-serif;
  --font-ja: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN",
             "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --font-base: var(--font-ja);

  /* ---------- Layout ---------- */
  --bp-pc: 768px;
  --container-max: 1366px;
  --content-max: 1260px;

  /* ---------- Easing / Transition ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-base: 0.4s;
}

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, dd, figure {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--duration-base) var(--ease-out);
}

a:hover {
  opacity: 0.7;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* ==========================================================================
   Layout — ヘッダー、フッター、メインなど大枠
   ========================================================================== */

.l-wrapper {
  overflow-x: hidden;
}

.l-main {
  display: block;
}

.l-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: 20px;
}

@media (min-width: 768px) {
  .l-container {
    max-width: var(--content-max);
    padding-inline: 40px;
  }
}

/* -------- Header -------- */

.l-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 12px;
  pointer-events: none;
}

.l-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  pointer-events: auto;
}

.l-header__logo {
  display: block;
  width: 62px;
  flex-shrink: 0;
}

.l-header__logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* SP ハンバーガー: Figma 178-2414 — 2本線（上 30px / 下 24px、間 4px） */
.l-header__hamburger {
  position: relative;
  width: 32px;
  height: 12px;
  flex-shrink: 0;
  z-index: 110;
}

.l-header__hamburger span {
  position: absolute;
  left: 0;
  height: 1.5px;
  background: var(--color-black);
  transition: all var(--duration-base) var(--ease-out);
  transform-origin: left center;
}

.l-header__hamburger span:nth-child(1) {
  top: 0;
  width: 30px;
}

.l-header__hamburger span:nth-child(2) {
  bottom: 0;
  width: 24px;
}

.l-header__hamburger.is-open span {
  transform-origin: center center;
}

.l-header__hamburger.is-open span:nth-child(1) {
  top: 50%;
  left: 50%;
  width: 28px;
  transform: translate(-50%, -50%) rotate(45deg);
}

.l-header__hamburger.is-open span:nth-child(2) {
  bottom: auto;
  top: 50%;
  left: 50%;
  width: 28px;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.l-header__sp-menu {
  position: fixed;
  inset: 0;
  background: var(--color-white);
  padding: 80px 24px 40px;
  overflow-y: auto;
  z-index: 90;
  pointer-events: auto;
}

.l-header__sp-menu ul {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.l-header__sp-menu a {
  display: block;
  font-family: var(--font-en);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.0875em;
  color: var(--color-black);
}

@media (min-width: 768px) {
  .l-header {
    padding: 34px 23px;
  }

  .l-header__logo {
    width: 113px;
  }

  .l-header__nav {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: nowrap;
  }

  .l-header__list {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: nowrap;
  }

  .l-header__list li {
    flex-shrink: 0;
  }

  .l-header__list a {
    font-family: var(--font-en);
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.012em;
    color: var(--color-black);
    white-space: nowrap;
  }

  .l-header__special {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .l-header__special-arrow {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-right: 1.2px solid currentColor;
    border-bottom: 1.2px solid currentColor;
    transform: rotate(-45deg);
  }

  .l-header__contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 32px;
    border: 1px solid var(--color-black);
    font-family: var(--font-en);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: -0.012em;
    color: var(--color-black);
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* -------- Footer -------- */

.l-footer {
  position: relative;
  background: var(--color-white);
  padding: 60px 24px 24px;
}

.l-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* SP: l-footer__newsletter が最上部 (HTML順 通り) → サイトマップ → bottom */

.l-footer__newsletter {
  width: 100%;
  border: 1px solid var(--color-black);
  padding: 24px 28px;
}

.l-footer__newsletter-title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.063em;
  margin-bottom: 6px;
}

.l-footer__newsletter-desc {
  font-size: 12px;
  color: var(--color-text-muted);
  letter-spacing: 0.083em;
  margin-bottom: 16px;
}

.l-footer__form {
  display: flex;
  gap: 6px;
}

.l-footer__form input {
  flex: 1;
  height: 30px;
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.013em;
}

.l-footer__form input::placeholder {
  color: rgba(10, 10, 10, 0.22);
}

.l-footer__form button {
  width: 52px;
  height: 30px;
  background: var(--color-black);
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
}

.l-footer__form svg {
  width: 17px;
  height: 12px;
}

.l-footer__sitemap {
  width: 100%;
}

.l-footer__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 16px;
}

.l-footer__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.l-footer__head {
  display: block;
  font-family: var(--font-ja);
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.083em;
  color: var(--color-black);
}

.l-footer__sublist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 0;
}

.l-footer__sublist a {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.083em;
  color: var(--color-text-muted);
}

.l-footer__bottom {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  text-align: center;
}

.l-footer__legal {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-ja);
  font-size: 12px;
  letter-spacing: 0.083em;
}

.l-footer__legal li {
  position: relative;
}

.l-footer__legal li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -8px;
  width: 1px;
  height: 10px;
  background: var(--color-black);
  transform: translateY(-50%);
}

.l-footer__copy {
  font-size: 12px;
  letter-spacing: 0.083em;
}

.l-footer__sns {
  display: flex;
  gap: 12px;
}

.l-footer__sns a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  color: var(--color-black);
}

.l-footer__sns img {
  width: 100%;
  height: 100%;
}

@media (min-width: 768px) {
  .l-footer {
    padding: 88px 53px 32px;
  }

  /* PC: サイトマップ（左） + メルマガ（右） を横並び */
  .l-footer__inner {
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
  }

  .l-footer__sitemap {
    flex: 1;
  }

  .l-footer__cols {
    grid-template-columns: repeat(4, max-content);
    gap: 0 104px;
  }

  .l-footer__head,
  .l-footer__sublist a {
    font-size: 14px;
    line-height: 14px;
  }

  .l-footer__newsletter {
    width: 353px;
    padding: 28px 24px;
    flex-shrink: 0;
  }

  /* PC bottom: Privacy（左）｜ ©（中央）｜ SNS（右） */
  .l-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    margin-top: 56px;
  }

  .l-footer__legal {
    font-size: 14px;
    order: 1;
  }

  .l-footer__copy {
    font-size: 14px;
    order: 2;
    margin-left: auto;
    margin-right: 24px;
  }

  .l-footer__sns {
    order: 3;
  }
}

/* ==========================================================================
   Object / Component — 再利用可能な小さなパーツ
   ========================================================================== */

/* -------- Button -------- */

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 270px;
  max-width: 100%;
  height: 44px;
  padding: 8px 32px;
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.022em;
  text-align: center;
  border: 1px solid currentColor;
  background: transparent;
  transition: opacity var(--duration-base) var(--ease-out),
              background var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}

.c-btn__arrow {
  position: absolute;
  top: 50%;
  right: 22px;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.c-btn--white,
.c-btn--white-outline {
  color: var(--color-white);
}

.c-btn--accent {
  color: var(--color-accent);
}

@media (min-width: 768px) {
  .c-btn {
    width: 300px;
    font-size: 16px;
  }
}

/* -------- Breadcrumb -------- */

.c-breadcrumb {
  padding: 67px 20px 0;
}

.c-breadcrumb ol {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--color-black);
}

.c-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.c-breadcrumb li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-left: 4px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
}

.c-breadcrumb a {
  display: inline-flex;
  align-items: center;
  color: inherit;
}

.c-breadcrumb a img {
  display: block;
  width: 10px;
  height: 10px;
  object-fit: contain;
}

.c-breadcrumb [aria-current="page"] {
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .c-breadcrumb a img {
    width: 13px;
    height: 13px;
  }
}

@media (min-width: 768px) {
  .c-breadcrumb {
    padding: 81px 67px 0;
    font-size: 13px;
  }
}

/* -------- Page Title (h1, common to下層ページ) -------- */

.c-page-title {
  padding: 24px 24px 48px;
  text-align: center;             /* SP: センター揃え */
  font-family: var(--font-en);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-black);
}

.c-page-title__en {
  display: block;
  font-size: 32px;
  line-height: 1.1;
}

@media (min-width: 768px) {
  .c-page-title {
    padding: 56px 67px 72px;
    text-align: left;             /* PC: 左揃えに戻す */
  }
  .c-page-title__en {
    font-size: 48px;
  }
}

/* -------- Section Label (MISSION / VISION / HISTORY 等) -------- */

.c-section-label {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.089em;
  color: var(--color-black);
}

.c-section-label--vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* -------- Tag (showroom 等で使う 都道府県タグ) -------- */

.c-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  background: #99a1af;
  color: var(--color-white);
  font-family: var(--font-ja);
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  letter-spacing: 0.04em;
}

/* -------- Reserve Button (来場予約ボタン: 黒背景・白文字) -------- */

.c-reserve-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 64px;
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0.1em;
  transition: opacity var(--duration-base) var(--ease-out);
}

.c-reserve-btn:hover {
  opacity: 0.85;
}

.c-reserve-btn__icon {
  display: inline-flex;
  width: 15px;
  height: 12px;
}

.c-reserve-btn__icon svg {
  width: 100%;
  height: 100%;
}

@media (min-width: 768px) {
  .c-reserve-btn {
    padding: 20px 64px;
    font-size: 16px;
  }
  .c-reserve-btn__icon {
    width: 20px;
    height: 16px;
  }
}

/* -------- Required Tag (必須ラベル) -------- */

.c-tag-required {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  padding: 2px 6px;
  background: var(--color-white);
  color: #e7000b;
  border: 0.8px solid #e7000b;
  font-family: var(--font-ja);
  font-size: 10px;
  font-weight: 500;
  line-height: 11px;
  letter-spacing: 0.1em;
}

/* -------- Tag Pill (おすすめ / 安全上の注意 共通) -------- */

.c-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 16px;
  background: var(--color-orange);
  color: var(--color-white);
  font-family: var(--font-ja);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.03em;
  border-radius: 100px;
  white-space: nowrap;
}

.c-tag-pill img {
  width: 11px;
  height: 8px;
  display: block;
}

/* -------- Pill (Mission/Vision badge) -------- */

.c-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 97px;
  height: 27px;
  background: var(--color-white);
  border: 1px solid var(--color-black);
  border-radius: 0 15px 0 15px;
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.089em;
  color: var(--color-black);
}

@media (min-width: 768px) {
  .c-pill {
    width: 118px;
    height: 33px;
    font-size: 16px;
  }
}

/* ==========================================================================
   Object / Project — ページ固有のセクション
   ========================================================================== */

/* -------- p-fv -------- */

.p-fv {
  position: relative;
  width: 100%;
  height: 56vh;
  min-height: 320px;
  background: var(--color-white);
  overflow: hidden;
}

.p-fv__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.p-fv__media picture,
.p-fv__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.p-fv__scroll {
  position: absolute;
  bottom: 0;
  left: 71px;
  height: 335px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  pointer-events: none;
}

.p-fv__scroll-text {
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.125em;
  color: #333;
  writing-mode: vertical-rl;
  text-orientation: sideways;
  transform: rotate(180deg);
}

.p-fv__scroll-line {
  width: 1px;
  flex: 1;
  background: var(--color-black);
  position: relative;
  overflow: hidden;
}

.p-fv__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-white);
  animation: scroll-line 2s var(--ease-out) infinite;
}

@keyframes scroll-line {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

@media (min-width: 768px) {
  .p-fv {
    height: 100vh;
    min-height: 768px;
  }
}

/* -------- p-mv (Mission & Vision) -------- */

.p-mv {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 80px 24px;
}

.p-mv__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.p-mv__text {
  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.875;
  letter-spacing: 0.0875em;
  text-align: center;
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-mv {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0;
    padding: 172px 200px 96px;
    max-width: var(--container-max);
    margin-inline: auto;
  }

  .p-mv__item {
    gap: 40px;
  }

  .p-mv__item--right {
    margin-top: 169px;
  }

  .p-mv__text {
    font-size: 26px;
    line-height: 30px;
    letter-spacing: 0.054em;
  }
}

/* -------- p-pickup -------- */

.p-pickup {
  width: 100%;
  position: relative;
  z-index: 2;            /* pagelink の背景より手前に出す */
}

.p-pickup__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.p-pickup__item {
  position: relative;
  width: 100%;
}

.p-pickup__card {
  display: block;
  position: relative;
  width: 100%;
  height: 410px;
  overflow: hidden;
  color: var(--color-white);
}

.p-pickup__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s var(--ease-out);
}

.p-pickup__card:hover .p-pickup__bg {
  transform: scale(1.04);
}

/* グラデーション暗幕（下部） */
.p-pickup__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(207, 207, 207, 0) 73%,
    rgba(126, 128, 124, 0.93) 98%);
  pointer-events: none;
}

/* 名前 + ライン: カード上部 (24px / PC 32px) */
.p-pickup__body {
  position: absolute;
  left: 17px;
  right: 17px;
  top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 1;
}

.p-pickup__name {
  font-family: var(--font-en);
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0.031em;
  color: var(--color-white);
}

.p-pickup__line {
  display: block;
  width: 92px;
  height: 1px;
  background: var(--color-white);
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .p-pickup__list {
    flex-direction: row;
    gap: 8px;
    padding: 0 53px;
  }

  .p-pickup__item {
    flex: 1;
    min-width: 0;
  }

  .p-pickup__card {
    height: 620px;
  }

  .p-pickup__body {
    left: 32px;
    right: 32px;
    top: 32px;
  }
}

/* -------- p-pagelink -------- */

.p-pagelink {
  position: relative;
  background: var(--color-bg-soft);
  padding: 80px 24px;
  z-index: 1;
}

.p-pagelink__inner {
  position: relative;
  max-width: var(--content-max);
  margin-inline: auto;
}

.p-pagelink__label {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.089em;
  color: var(--color-black);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}

.p-pagelink__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.p-pagelink__link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-black);
}

.p-pagelink__list .p-pagelink__item:first-child .p-pagelink__link {
  border-top: 1px solid var(--color-black);
}

.p-pagelink__num {
  flex-shrink: 0;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 900;
  line-height: 14px;
  letter-spacing: 0.071em;
  color: var(--color-text-num);
}

.p-pagelink__name {
  flex: 1;
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0.098em;
  color: var(--color-black);
}

.p-pagelink__arrow {
  flex-shrink: 0;
  width: 8px;
  height: 11px;
  position: relative;
}

.p-pagelink__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 2px;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid var(--color-black);
  border-top: 1.5px solid var(--color-black);
  transform: translateY(-50%) rotate(45deg);
}

/* Catalog ボックス */
.p-pagelink__catalog {
  position: relative;
  margin-top: 48px;
  padding: 0;
  color: var(--color-white);
  /* 装飾 PNG が背景。色背景は持たない */
}

.p-pagelink__catalog-shape {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.p-pagelink__catalog-shape img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.p-pagelink__catalog-body {
  position: relative;
  z-index: 1;
  padding: 56px 32px 56px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.p-pagelink__catalog-image {
  position: relative;
  margin: 0 auto;
  max-width: 320px;
  aspect-ratio: 250/175;
}

.p-pagelink__catalog-image img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p-pagelink__catalog-thumb {
  position: absolute;
  bottom: -24px;
  right: -8px;
  width: 110px;
  height: auto;
  border: 4px solid var(--color-white);
}

.p-pagelink__catalog-title {
  font-family: var(--font-ja);
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 0.076em;
  text-align: center;
}

.p-pagelink__catalog-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

@media (min-width: 768px) {
  /* PC: pickup と被さる構造 */
  .p-pagelink {
    margin-top: -240px;
    padding: 320px 53px 144px;
  }

  .p-pagelink__inner {
    display: grid;
    grid-template-columns: minmax(432px, 1fr) minmax(0, 1fr);
    gap: 80px;
    align-items: start;
  }

  .p-pagelink__label {
    height: 60px;
    top: 0;
    left: -46px;
  }

  .p-pagelink__list {
    margin-left: 119px;
    gap: 32px;
  }

  .p-pagelink__link {
    padding: 0 0 32px;
    border-top: none !important;
  }

  .p-pagelink__num {
    font-size: 14px;
  }

  .p-pagelink__name {
    font-size: 18px;
  }

  .p-pagelink__catalog {
    margin-top: 0;
    align-self: center;
    min-height: 700px;
  }

  .p-pagelink__catalog-body {
    padding: 80px 64px;
    gap: 56px;
  }

  .p-pagelink__catalog-title {
    font-size: 22px;
    text-align: left;
  }

  .p-pagelink__catalog-image {
    margin: 0;
    max-width: 403px;
  }

  .p-pagelink__catalog-thumb {
    width: 175px;
    bottom: -32px;
    right: -16px;
  }

  .p-pagelink__catalog-actions {
    align-items: flex-start;
  }
}

/* -------- p-series -------- */

.p-series {
  width: 100%;
  padding: 64px 0;
  overflow: hidden;
}

.p-series__list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0;
}

.p-series__row {
  width: 100%;
}

.p-series__row > ul {
  display: flex;
  align-items: stretch;
  gap: 1.87%;
  height: 100%;
}

.p-series__row--top {
  height: 114px;
}

.p-series__row--bottom {
  height: 308px;
}

/* 上下行で左右の比率を変える（非対称グリッド） */
.p-series__item--tl { flex: 0 0 54.13%; }
.p-series__item--tr { flex: 1 1 auto; }
.p-series__item--bl { flex: 0 0 38.13%; }
.p-series__item--br { flex: 1 1 auto; }

.p-series__item {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.p-series__link,
.p-series__link picture {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.p-series__link picture {
  position: relative;
}

/* SP: 画像はスロット実寸書き出しのため、視差スクロール (yPercent ±8) の */
/* はみ出し用に上下 10% のブリードを持たせる */
.p-series__link img {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
  will-change: transform;
}

.p-series__link:hover img {
  transform: scale(1.06);
}

@media (min-width: 768px) {
  .p-series {
    padding: 70px 53px;
  }

  .p-series__list {
    gap: 18px;
    max-width: 1260px;
    margin-inline: auto;
  }

  .p-series__row > ul {
    gap: 18px;
  }

  .p-series__row--top {
    height: 135px;
  }

  .p-series__row--bottom {
    height: 365px;
  }

  /* PC は SP と微妙に比率が違うが許容範囲内（54%/44%・38%/60%） */
  .p-series__item--tl { flex: 0 0 54.29%; }
  .p-series__item--tr { flex: 1 1 auto; }
  .p-series__item--bl { flex: 0 0 38.02%; }
  .p-series__item--br { flex: 1 1 auto; }

  /* PC は SP のような白露出が現状目立たないため、ブリードを解除して */
  /* Figma 通りの実寸表示に戻す */
  .p-series__link img {
    position: static;
    top: auto;
    height: 100%;
  }
}

/* -------- p-news -------- */

.p-news {
  padding: 80px 24px;
  background: var(--color-white);
}

.p-news__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.p-news__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.p-news__label {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.104em;
  color: var(--color-text-label);
}

.p-news__title {
  font-family: var(--font-ja);
  font-size: 22px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0.064em;
  color: var(--color-black);
}

.p-news__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.p-news__item {
  border-bottom: 1px solid var(--color-line);
}

.p-news__item:first-child {
  border-top: 1px solid var(--color-line);
}

.p-news__link {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 0;
}

.p-news__date {
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.07em;
  color: var(--color-text-date);
}

.p-news__text {
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-black);
}

.p-news__more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: 96px;
  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.02em;
}

.p-news__more-arrow {
  width: 5px;
  height: 5px;
  border-right: 1.5px solid var(--color-black);
  border-top: 1.5px solid var(--color-black);
  transform: rotate(45deg);
}

@media (min-width: 768px) {
  .p-news {
    padding: 120px 53px;
  }

  /* PC: 左カラムに見出し + もっと見る、右カラムにリスト */
  .p-news__inner {
    display: grid;
    grid-template-columns: 237px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "head list"
      "more list";
    gap: 0 120px;
    align-items: start;
  }

  .p-news__head {
    grid-area: head;
  }

  .p-news__list {
    grid-area: list;
  }

  .p-news__more {
    grid-area: more;
    align-self: end;
  }

  .p-news__label {
    font-size: 14px;
    letter-spacing: 0.089em;
  }

  .p-news__title {
    font-size: 28px;
    letter-spacing: 0.05em;
  }

  .p-news__link {
    flex-direction: row;
    align-items: center;
    gap: 32px;
    padding: 24px 0;
  }

  .p-news__date {
    flex-shrink: 0;
  }

  .p-news__text {
    font-size: 16px;
  }
}

/* -------- p-contact -------- */

.p-contact {
  position: relative;
  width: 100%;
  background: var(--color-overlay);
  overflow: hidden;
}

.p-contact__bg {
  position: absolute;
  inset: 58.54% 0 0 0;
}

.p-contact__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* mix-blend-mode: なし — 加工なしでそのまま表示 */
}

.p-contact__inner {
  position: relative;
  z-index: 1;
  padding: 72px 22px 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
  color: var(--color-white);
  min-height: 603px;
}

.p-contact__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.p-contact__title-en {
  font-family: var(--font-en);
  font-size: 28px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0.045em;
}

.p-contact__title-ja {
  font-family: var(--font-ja);
  font-size: 12px;
  font-weight: 500;
  line-height: 15px;
  letter-spacing: 0.117em;
}

.p-contact__lead {
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}

@media (min-width: 768px) {
  .p-contact {
    height: 482px;
  }

  .p-contact__bg {
    inset: 0 0 0 38.21%;
  }

  .p-contact__inner {
    padding: 123px 0 0 112px;
    width: 100%;
    max-width: 522px;
    min-height: 0;
    height: 100%;
    background: var(--color-overlay);
  }

  .p-contact__title-en {
    font-size: 33px;
  }

  .p-contact__title-ja {
    font-size: 15px;
  }

  .p-contact__lead {
    font-size: 16px;
    letter-spacing: -0.02em;
  }
}

/* -------- p-page (下層ページ共通: ヘッダー固定分の余白) -------- */

.p-page {
  padding-top: 60px;
}

@media (min-width: 768px) {
  .p-page {
    padding-top: 100px;
  }
}

/* -------- p-about-mission -------- */

.p-about-mission {
  padding: 32px 0 64px;
}

.p-about-mission__inner {
  padding: 0 20px;
  margin-bottom: 40px;
}

.p-about-mission__inner .c-section-label {
  margin-bottom: 24px;
}

.p-about-mission__title {
  font-family: var(--font-ja);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.07em;
  color: var(--color-black);
  margin-bottom: 32px;
}

.p-about-mission__text {
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--color-black);
}

/* 段落（<p>）間の余白を SP/PC 共通で 1em */
.p-about-mission__text p {
  margin: 0;
}

.p-about-mission__text p + p {
  margin-top: 1em;
}

/* SP: 左 60px インデント、右 0 (viewport端)。2 枚の画像を縦に積む */
.p-about-mission__cards {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 60px;
  padding-right: 0;
}

.p-about-mission__cards img {
  width: 100%;
  height: auto;
  aspect-ratio: 315/159;
  object-fit: cover;
  display: block;
}

@media (min-width: 768px) {
  /* PC: セクション側に水平 padding、grid 1fr/1fr で内側 50% 均等 */
  .p-about-mission {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: center;
    padding: 64px 67px;
  }

  .p-about-mission__inner {
    padding: 0;
    padding-right: 40px;
    margin-bottom: 0;
  }

  .p-about-mission__title {
    font-size: 32px;
    line-height: 1.4;
  }

  .p-about-mission__text {
    font-size: 16px;
  }

  /* PC: cards は右カラムに、より横長アスペクトで縦幅を抑える */
  .p-about-mission__cards {
    grid-row: 1;
    grid-column: 2;
    padding: 0;
    height: auto;
    gap: 0;
  }

  .p-about-mission__cards img {
    width: 100%;
    height: auto;
    aspect-ratio: 2.5 / 1;      /* PC: 縦幅をやや増やす */
    object-fit: cover;
  }
}

/* -------- p-about-vision -------- */

.p-about-vision {
  padding: 80px 0 64px;
  /* 背景色なし（白） */
}

.p-about-vision__inner {
  padding: 0 20px;
  margin-bottom: 48px;
}

.p-about-vision__inner .c-section-label {
  margin-bottom: 24px;
}

.p-about-vision__title {
  font-family: var(--font-ja);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.07em;
  color: var(--color-black);
  margin-bottom: 32px;
}

.p-about-vision__text {
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--color-black);
}

/* 段落（<p>）はデフォルト margin 0、p + p で SP/PC 共通の段落間スペース */
.p-about-vision__text p {
  margin: 0;
}

.p-about-vision__text p + p {
  margin-top: 1em;
}

/* SP: 6 grid (3 列 × 2 行)、左寄せ、右に 60px の余白 */
.p-about-vision__grid {
  display: grid;
  grid-template-columns: repeat(3, 105px);
  grid-auto-rows: 92px;
  gap: 0;
  width: 315px;
  margin-left: 0;
  margin-right: 60px;
}

.p-about-vision__grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 768px) {
  /* PC: テキストは全幅（z-index: 1）、6 grid は右半分に absolute 配置（背景的） */
  .p-about-vision {
    position: relative;
    padding: 120px 67px 96px;
    overflow: hidden;
  }

  .p-about-vision__inner {
    position: relative;
    z-index: 1;
    max-width: 1232px;
    margin: 0 auto;
    padding: 0;
  }

  .p-about-vision__title {
    font-size: 32px;
  }

  .p-about-vision__text {
    font-size: 16px;
  }

  .p-about-vision__grid {
    position: absolute;
    top: 50%;
    right: 15%;
    transform: translateY(-50%);
    z-index: 0;
    width: 50%;
    max-width: 683px;
    height: 601px;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    margin: 0;
    opacity: 0.5;
    pointer-events: none;
  }

}

/* -------- p-history --------
   背景: ダークグレー(#7e807c) / テキスト: 白
   項目 1, 2: 画像なし
   項目 3: 2 枚重なり画像
   項目 4: SP Swiper / PC 3 列横並び
   項目 5, 6: 単一画像
   ============================================ */

.p-history {
  padding: 80px 0 64px;
  background: var(--color-overlay);
  color: var(--color-white);
}

.p-history__inner {
  padding: 0 20px;
}

.p-history__head {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  margin-bottom: 56px;
}

.p-history__head .c-section-label {
  margin-top: 4px;
  color: var(--color-white);
}

.p-history__intro {
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--color-white);
}

.p-history__list {
  display: flex;
  flex-direction: column;
  gap: 56px;
  list-style: none;
  counter-reset: history;
}

.p-history__item {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;      /* 左寄せ（SP/PC 共通） */
  text-align: left;
}

.p-history__heading-block {
  display: flex;
  flex-direction: column;
  gap: 16px;                    /* SP: 16px / PC: 20px (PC で上書き) */
  align-items: flex-start;
}

.p-history__num {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* 番号バッジ: 白い小箱 (14×18, 角丸 2px) + グレー文字 */
.p-history__num-fig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 18px;
  background: var(--color-white);
  color: var(--color-overlay);
  border-radius: 2px;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.p-history__num-label {
  font-family: var(--font-ja);
  font-size: 18px;
  font-weight: 500;
  line-height: 18px;
  color: var(--color-white);
}

.p-history__heading {
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--color-white);
}

.p-history__figure {
  margin: 0;
  width: 100%;
}

.p-history__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 335/220;
  object-fit: cover;
  display: block;
}

/* 項目 3: 2 枚重なり画像（重なりを控えめに） */
.p-history__figure--stack {
  position: relative;
  aspect-ratio: 335/240;
}

.p-history__figure--stack img {
  position: absolute;
  width: 55%;
  height: auto;
  aspect-ratio: 1.4/1;
  object-fit: cover;
}

.p-history__figure--stack img:first-child {
  top: 0;
  left: 0;
  z-index: 1;
}

.p-history__figure--stack img:last-child {
  bottom: 0;
  right: 0;
  z-index: 2;
  border: 4px solid var(--color-overlay); /* 重なり感を強調する縁取り */
}

.p-history__text {
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0.04em;
  color: var(--color-white);
  text-align: left;
}

.p-history__text--note {
  font-size: 12px;
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.7);
}

/* 項目 4: gallery (SP Swiper / PC 3 列横並び) */
.p-history__gallery {
  width: 100%;
  overflow: hidden;
}

.p-history__gallery .swiper-slide {
  width: 80%;
}

.p-history__gallery img {
  width: 100%;
  height: auto;
  aspect-ratio: 305/220;
  object-fit: cover;
  display: block;
}

.p-history__gallery-pagination {
  position: relative;
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.p-history__gallery-pagination .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  background: var(--color-white);
  opacity: 0.4;
  border-radius: 50%;
}

.p-history__gallery-pagination .swiper-pagination-bullet-active {
  opacity: 1;
}

.p-history__concept-lead {
  margin-top: 32px;
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-white);
  text-align: center;
}

.p-history__concepts {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 16px 0 0;
  width: 100%;
}

.p-history__concept {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 16px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  text-align: center;
}

.p-history__concept dt {
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-white);
}

.p-history__concept dd {
  font-family: var(--font-ja);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-white);
}

@media (min-width: 768px) {
  .p-history {
    padding: 144px 0 144px;
  }

  .p-history__inner {
    max-width: 1254px;
    margin: 0 auto;
    padding: 0 60px;
  }

  .p-history__head {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 96px;
  }

  .p-history__head .c-section-label {
    font-size: 24px;
    writing-mode: horizontal-tb;
  }

  .p-history__intro {
    font-size: 16px;
  }

  .p-history__list {
    gap: 96px;
  }

  /* PC: 通常項目は左寄せ。max-width は項目 1, 2 含めて 1100px に統一 */
  .p-history__item {
    align-items: flex-start;
    max-width: 1100px;
    margin: 0;
    text-align: left;
  }

  .p-history__heading-block {
    align-items: flex-start;
    gap: 20px;                  /* PC */
  }

  /* 項目 3, 5, 6 (画像あり、フィーチャー以外) は 2 カラム交互レイアウト */
  .p-history__item:has(.p-history__figure):not(.p-history__item--feature) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 64px;
    row-gap: 24px;
    align-items: center;
    max-width: 1100px;
  }

  .p-history__item:has(.p-history__figure):not(.p-history__item--feature) .p-history__heading-block,
  .p-history__item:has(.p-history__figure):not(.p-history__item--feature) .p-history__text {
    grid-column: 1;
  }

  .p-history__item:has(.p-history__figure):not(.p-history__item--feature) .p-history__figure {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  /* --reverse モディファイア: テキスト右 / 画像左 */
  .p-history__item--reverse.p-history__item:has(.p-history__figure):not(.p-history__item--feature) .p-history__heading-block,
  .p-history__item--reverse.p-history__item:has(.p-history__figure):not(.p-history__item--feature) .p-history__text {
    grid-column: 2;
  }

  .p-history__item--reverse.p-history__item:has(.p-history__figure):not(.p-history__item--feature) .p-history__figure {
    grid-column: 1;
  }

  /* 項目 3 (2 枚重なり) は PC でもサイズ感維持 */
  .p-history__figure--stack {
    width: 100%;
    aspect-ratio: 4/3;
  }

  /* feature item (4. 2024年) */
  .p-history__item--feature {
    max-width: 1100px;
    align-items: stretch;
  }
  /* feature の heading 上書きは廃止。1〜6 で同一サイズ (PC 22px) で統一 */

  /* PC: gallery は 3 列横並び (Swiper の slidesPerView: 3 と組み合わせ) */
  .p-history__gallery .swiper-wrapper {
    transform: none !important;   /* Swiper を無効化して 3 列固定 */
  }

  .p-history__gallery .swiper-slide {
    width: calc((100% - 48px) / 3) !important;
    margin-right: 24px;
  }

  .p-history__gallery .swiper-slide:last-child {
    margin-right: 0;
  }

  .p-history__gallery-pagination {
    display: none;
  }

  /* concept blocks: PC は横並び 3 列、幅広 */
  .p-history__concept-lead {
    font-size: 16px;
    margin-top: 48px;
  }

  .p-history__concepts {
    flex-direction: row;
    gap: 24px;
    margin-top: 24px;
    max-width: 100%;
  }

  .p-history__concept {
    flex: 1;
    padding: 32px 24px;
  }

  .p-history__concept dt {
    font-size: 18px;
  }

  .p-history__concept dd {
    font-size: 14px;
  }

  .p-history__num-fig {
    font-size: 12px;
  }

  .p-history__num-label {
    font-size: 18px;
  }

  .p-history__heading {
    font-size: 22px;
    line-height: 1.4;
  }

  .p-history__text {
    font-size: 16px;
    line-height: 1.875;
    text-align: left;
  }
}

/* -------- p-company -------- */

.p-company {
  padding: 80px 20px 64px;
  background: var(--color-white);
}

.p-company__inner {
  max-width: 896px;
  margin: 0 auto;
}

.p-company__inner .c-section-label {
  margin-bottom: 16px;
}

.p-company__title {
  font-family: var(--font-ja);
  font-size: 22px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0.05em;
  color: var(--color-black);
  margin-bottom: 32px;
}

.p-company__table {
  display: flex;
  flex-direction: column;
}

/* SP: dt(label) の下に dd(値) が来る縦並び。区切り線で分ける */
.p-company__row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-line);
}

.p-company__row:first-child {
  border-top: 1px solid var(--color-line);
}

.p-company__row dt {
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-black);
}

.p-company__row dd {
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-company {
    padding: 144px 67px 96px;
  }

  .p-company__title {
    font-size: 36px;
    line-height: 1.4;
    margin-bottom: 56px;
  }

  /* PC: dt と dd が左右に並ぶ */
  .p-company__row {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 32px;
    padding: 24px 0;
  }

  .p-company__row dt,
  .p-company__row dd {
    font-size: 16px;
  }
}

/* -------- p-locations (黒枠カードのみ・マップ画像なし) -------- */

.p-locations {
  padding: 32px 20px 96px;
  background: var(--color-white);
}

.p-locations__inner {
  max-width: 1232px;
  margin: 0 auto;
}

.p-locations__title {
  font-family: var(--font-ja);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-black);
  margin-bottom: 32px;
}

.p-locations__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 各カード: 黒枠線、内側にテキストを縦に並べる */
.p-locations__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--color-black);
  padding: 24px 20px;
  background: transparent;
}

.p-locations__name {
  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-black);
  margin-bottom: 4px;
}

.p-locations__address,
.p-locations__tel {
  display: flex;
  gap: 8px;
  font-family: var(--font-ja);
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-black);
}

.p-locations__icon {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}

.p-locations__sub-title {
  font-family: var(--font-ja);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-black);
  margin-top: 4px;
}

.p-locations__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-family: var(--font-ja);
  font-size: 12px;
  color: var(--color-black);
  align-self: flex-start;
}

.p-locations__link-arrow {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
}

@media (min-width: 768px) {
  .p-locations {
    padding: 32px 67px 144px;
  }

  .p-locations__title {
    font-size: 28px;
    margin-bottom: 56px;
  }

  .p-locations__list {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 24px;
  }

  .p-locations__item {
    flex: 1 1 calc((100% - 48px) / 3);
    min-width: 0;
    padding: 32px 28px;
  }

  .p-locations__name {
    font-size: 20px;
  }

  .p-locations__address,
  .p-locations__tel {
    font-size: 14px;
  }
}

/* -------- p-showroom -------- */

.p-showroom__lead {
  padding: 0 20px 48px;
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.04em;
  color: var(--color-black);
  text-align: center;
}

.p-showroom {
  padding: 32px 20px 48px;
  background: var(--color-white);
}

.p-showroom--honsha {
  background: #ededed;
  padding: 48px 20px;
}

.p-showroom__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1232px;
  margin: 0 auto;
}

.p-showroom__title {
  font-family: var(--font-ja);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.07em;
  color: var(--color-black);
  margin-bottom: 0;
}

.p-showroom .c-tag {
  align-self: flex-start;
}

.p-showroom__desc {
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.04em;
  color: var(--color-black);
}

/* スライダー */
.p-showroom__slider {
  width: 100%;
  position: relative;
  padding-bottom: 32px;          /* ページネーション用スペース */
  border-radius: 1.232px;
}

.p-showroom__slider .swiper-slide {
  width: 100%;
  aspect-ratio: 335/188;
  overflow: hidden;
}

.p-showroom__slider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-showroom__slider .swiper-pagination {
  bottom: 0;
}

.p-showroom__slider .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  background: var(--color-text-muted);
  opacity: 0.4;
  border-radius: 50%;
  margin: 0 4px !important;
}

.p-showroom__slider .swiper-pagination-bullet-active {
  background: var(--color-black);
  opacity: 1;
}

.p-showroom__slider-prev,
.p-showroom__slider-next {
  width: 48px;
  height: 48px;
  background: var(--color-white);
  border: 1px solid var(--color-black);
  border-radius: 50%;
  color: var(--color-black);
  top: 50%;
  margin-top: -24px;
}

.p-showroom__slider-prev::after,
.p-showroom__slider-next::after {
  font-size: 16px;
}

/* アクセス情報カード（黒枠） */
.p-showroom__access {
  border: 1px solid var(--color-black);
  padding: 28px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.p-showroom__access-title {
  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-black);
  margin-bottom: 4px;
}

.p-showroom__access-icon {
  display: inline-block;
  width: 10px;
  height: 12px;
  flex-shrink: 0;
  margin-top: 6px;               /* テキスト 1 行目の中央に揃う調整 */
  object-fit: contain;
}

.p-showroom__access-address,
.p-showroom__access-tel {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-ja);
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-black);
}

.p-showroom__access-tel {
  align-items: center;
}

.p-showroom__access-tel .p-showroom__access-icon {
  margin-top: 0;
}

.p-showroom__access-route {
  font-family: var(--font-ja);
  font-size: 12px;
  line-height: 16px;
  color: var(--color-black);
  padding-left: 0;               /* 左余白なし */
}

.p-showroom > .p-showroom__inner > .c-reserve-btn {
  align-self: center;
  margin-top: 8px;
}

/* heading とタグの間隔を 16px に縮小（Figma に合わせる） */
.p-showroom__title + .c-tag {
  margin-top: -8px;
}

/* バーチャルツアー（本社ショールーム内） */
.p-showroom__virtual-title {
  font-family: var(--font-ja);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-black);
  margin-top: 16px;
}

.p-showroom__virtual-desc {
  font-family: var(--font-ja);
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-black);
}

.p-showroom__rooms {
  display: flex;
  flex-direction: column;
  gap: 32px;
  list-style: none;
  padding: 0;
}

.p-showroom__room {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.p-showroom__room-name {
  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.085em;
  color: var(--color-black);
}

.p-showroom__room-figure {
  margin: 0;
  width: 100%;
  overflow: hidden;
}

.p-showroom__room-figure img {
  width: 100%;
  aspect-ratio: 336/335;
  object-fit: cover;
}

.p-showroom__room-figure iframe {
  display: block;
  width: 100%;
  max-width: 840px;
  height: auto;
  aspect-ratio: 840 / 480;       /* 比率 7:4 を維持。幅に応じて高さが追随する */
  margin: 0 auto;
  border: 0;
}

@media (min-width: 768px) {
  .p-showroom__lead {
    padding: 0 67px 80px;
    font-size: 16px;
    text-align: left;
  }

  .p-showroom {
    padding: 80px 67px;
  }

  .p-showroom--honsha {
    padding: 96px 67px;
  }

  .p-showroom__inner {
    gap: 32px;
  }

  .p-showroom__title {
    font-size: 32px;
  }

  .p-showroom__desc {
    font-size: 16px;
    max-width: 1100px;
  }

  .p-showroom__slider .swiper-slide {
    aspect-ratio: 1088/612;
  }

  .p-showroom__access {
    padding: 32px 40px;
    max-width: 1100px;
    width: 100%;
    align-self: center;
  }

  .p-showroom__access-title {
    font-size: 18px;
  }

  .p-showroom__access-address,
  .p-showroom__access-tel,
  .p-showroom__access-route {
    font-size: 16px;
  }

  .p-showroom__virtual-title {
    font-size: 24px;
  }

  .p-showroom__rooms {
    flex-direction: row;
    gap: 24px;
  }

  .p-showroom__room {
    flex: 1 1 calc((100% - 48px) / 3);
    min-width: 0;
  }

  .p-showroom__room-figure {
    aspect-ratio: 16/12;
  }
}

/* -------- p-values-hero -------- */

.p-values-hero {
  padding: 32px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.p-values-hero__title {
  font-family: var(--font-ja);
  font-size: 20px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--color-black);
  text-align: center;
}

.p-values-hero__figure {
  margin: 0;
  width: 100%;
}

.p-values-hero__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 335/280;
  object-fit: cover;
}

@media (min-width: 768px) {
  .p-values-hero {
    padding: 48px 67px 0;
    gap: 96px;
  }

  .p-values-hero__title {
    font-size: 32px;
    line-height: 1.8;
  }

  .p-values-hero__figure img {
    aspect-ratio: 1366/500;
    max-height: 600px;
  }
}

/* -------- p-values-flow（製品が届くまで） -------- */

.p-values-flow {
  padding: 64px 20px;
  background: var(--color-white);
}

.p-values-flow__list {
  display: flex;
  flex-direction: column;
  gap: 56px;
  list-style: none;
}

.p-values-flow__item {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.p-values-flow__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;       /* SP/PC ともに左寄せ */
  gap: 16px;
}

.p-values-flow__sub {
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.089em;
  color: #99a1af;
}

.p-values-flow__title {
  font-family: var(--font-ja);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.07em;
  color: var(--color-black);
  text-align: left;              /* SP/PC ともに左寄せ */
}

.p-values-flow__text {
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.785;
  letter-spacing: 0.04em;
  color: var(--color-black);
}

.p-values-flow__figure {
  margin: 0;
  width: 100%;
}

.p-values-flow__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 356/191;
  object-fit: cover;
}

@media (min-width: 768px) {
  .p-values-flow {
    padding: 120px 107px;
  }

  .p-values-flow__list {
    gap: 96px;
    max-width: 1152px;
    margin: 0 auto;
  }

  /* PC: 左右交互レイアウト（odd: 画像左/テキスト右、even: テキスト左/画像右） */
  .p-values-flow__item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
    row-gap: 24px;
    align-items: center;
  }

  .p-values-flow__item .p-values-flow__head,
  .p-values-flow__item .p-values-flow__text {
    grid-column: 2;
  }

  .p-values-flow__item .p-values-flow__figure {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .p-values-flow__item--reverse .p-values-flow__head,
  .p-values-flow__item--reverse .p-values-flow__text {
    grid-column: 1;
  }

  .p-values-flow__item--reverse .p-values-flow__figure {
    grid-column: 2;
  }

  .p-values-flow__head {
    align-items: flex-start;
  }

  .p-values-flow__title {
    font-size: 32px;
    text-align: left;
  }

  .p-values-flow__text {
    font-size: 16px;
  }

  .p-values-flow__figure img {
    aspect-ratio: 552/414;
  }
}

/* -------- p-values-quality（品質の追求 / 背景ダーク・白文字） -------- */

.p-values-quality {
  padding: 64px 20px;
  background: var(--color-overlay);
  color: var(--color-white);
}

.p-values-quality__inner {
  max-width: 1232px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.p-values-quality__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.p-values-quality__sub {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.104em;
  color: var(--color-white);
}

.p-values-quality__title {
  font-family: var(--font-ja);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.27;
  letter-spacing: 0.064em;
  color: var(--color-white);
}

.p-values-quality__lead {
  font-family: var(--font-ja);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.078em;
  color: var(--color-white);
  text-align: center;
}

.p-values-quality__text {
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.785;
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.p-values-quality__text p {
  margin: 0;
}

.p-values-quality__cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
}

.p-values-quality__card {
  background: var(--color-white);
  color: var(--color-black);
  padding: 32px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.p-values-quality__card-title {
  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.03em;
  color: var(--color-black);
  border-left: 3px solid var(--color-black);
  padding-left: 12px;
}

.p-values-quality__card-text {
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.785;
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-values-quality {
    padding: 120px 67px;
  }

  .p-values-quality__inner {
    gap: 56px;
  }

  .p-values-quality__title {
    font-size: 36px;
  }

  .p-values-quality__lead {
    font-size: 24px;
  }

  .p-values-quality__text {
    font-size: 16px;
  }

  .p-values-quality__cards {
    gap: 16px;
  }

  .p-values-quality__card {
    padding: 32px 48px;
  }

  .p-values-quality__card-title {
    font-size: 22px;
  }

  .p-values-quality__card-text {
    font-size: 16px;
  }
}

/* -------- p-values-eco（環境への取り組み） -------- */

.p-values-eco {
  padding: 64px 0 80px;
  background: var(--color-white);
}

.p-values-eco__head {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  margin-bottom: 32px;
}

.p-values-eco__sub {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.104em;
  color: #99a1af;
  margin-bottom: -16px;          /* sub→title の間隔を 16px に縮小 */
}

.p-values-eco__title {
  font-family: var(--font-ja);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.27;
  letter-spacing: 0.064em;
  color: var(--color-black);
  text-align: center;
}

.p-values-eco__lead {
  font-family: var(--font-ja);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.078em;
  color: var(--color-black);
  text-align: center;
}

.p-values-eco__hero {
  margin: 0 0 32px;
  width: 100%;
}

.p-values-eco__hero img {
  width: 100%;
  height: auto;
  aspect-ratio: 375/250;
  object-fit: cover;
}

.p-values-eco__inner {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1152px;
  margin: 0 auto;
}

.p-values-eco__text {
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.785;
  color: var(--color-black);
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.p-values-eco__text p {
  margin: 0;
}

.p-values-eco__cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
}

.p-values-eco__card {
  border: 1px solid var(--color-overlay);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.p-values-eco__card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.p-values-eco__card-icon {
  display: block;
  width: auto;
  height: 28px;
  flex-shrink: 0;
  object-fit: contain;
}

.p-values-eco__card-title {
  font-family: var(--font-ja);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--color-black);
}

.p-values-eco__card-title small {
  font-size: 12px;
  font-weight: 700;
  display: block;
  margin-top: 4px;
}

.p-values-eco__card-text {
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.785;
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-values-eco {
    padding: 120px 0;
  }

  .p-values-eco__head {
    padding: 0 67px;
    gap: 32px;
    margin-bottom: 64px;
  }

  .p-values-eco__title {
    font-size: 36px;
  }

  .p-values-eco__lead {
    font-size: 28px;
  }

  .p-values-eco__hero {
    margin: 0 0 64px;
    padding: 0 67px;
  }

  .p-values-eco__hero img {
    aspect-ratio: 1152/648;
    max-width: 1152px;
    margin: 0 auto;
  }

  .p-values-eco__inner {
    padding: 0 67px;
    gap: 56px;
  }

  .p-values-eco__text {
    font-size: 16px;
  }

  .p-values-eco__cards {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
  }

  .p-values-eco__card {
    flex: 1 1 calc((100% - 48px) / 3);
    min-width: 280px;
  }

  .p-values-eco__card-icon {
    height: 32px;
  }

  .p-values-eco__card-title {
    font-size: 20px;
  }
}

/* -------- p-recruit-hero -------- */

.p-recruit-hero {
  padding: 0 20px 48px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.p-recruit-hero__catch {
  font-family: var(--font-ja);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.05em;
  color: var(--color-black);
  text-align: center;
}

.p-recruit-hero__text {
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.785;
  letter-spacing: 0.04em;
  color: var(--color-black);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.p-recruit-hero__text p {
  margin: 0;
}

/* SP: section の左右 padding 20px を打ち消して全幅。
   Figma 通りに画像を 154%×155% に拡大して左寄りに配置し、
   右下を白マスクで隠して椅子部分を非表示にする */
.p-recruit-hero__figure {
  position: relative;
  overflow: hidden;
  aspect-ratio: 375/187;
  margin: 0 -20px;
  width: calc(100% + 40px);
  background: var(--color-white);
}

.p-recruit-hero__figure > img {
  position: absolute;
  width: 154%;
  max-width: none;
  height: auto;
  left: -36.2%;
  top: -2.67%;
  display: block;
}

/* SP のみ：右下に白い領域を作り、その中に椅子画像を配置 */
.p-recruit-hero__figure-mask {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 35.5%;
  height: 49.7%;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.p-recruit-hero__figure-mask img {
  width: 56%;
  height: auto;
  object-fit: contain;
}


@media (min-width: 768px) {
  .p-recruit-hero {
    padding: 0 67px 80px;
    gap: 48px;
    align-items: center;
  }

  .p-recruit-hero__catch {
    font-size: 32px;
  }

  .p-recruit-hero__text {
    font-size: 18px;
    text-align: center;
    align-items: center;
  }

  /* PC: SP と同じクロップ／マスクを継承し、フルブリードで表示 */
  .p-recruit-hero__figure {
    margin: 0 -67px;
    width: calc(100% + 134px);
  }
}

/* -------- p-recruit-org（組織図） -------- */

.p-recruit-org {
  padding: 64px 20px;
  background: var(--color-white);
}

.p-recruit-org__title {
  font-family: var(--font-ja);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.27;
  letter-spacing: 0.05em;
  color: var(--color-black);
  text-align: center;
  margin-bottom: 48px;
}

.p-recruit-org__chart {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1152px;
  margin: 0 auto;
}

.p-recruit-org__top {
  display: flex;
  justify-content: center;
}

.p-recruit-org__node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border: 1px solid var(--color-black);
  font-family: var(--font-ja);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--color-black);
  text-align: center;
  min-width: 103px;
}

.p-recruit-org__node--exec {
  min-width: 140px;
  padding: 12px 24px;
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

.p-recruit-org__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
}

.p-recruit-org__departments {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 24px 16px;
  margin-top: 20px;
  background: #ededed;
}

.p-recruit-org__dept {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.p-recruit-org__dept-name {
  font-family: var(--font-ja);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--color-black);
  text-align: center;
  padding: 6px 0;
  border: 1px solid var(--color-black);
  background: var(--color-white);
}

.p-recruit-org__sublist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
}

.p-recruit-org__sublist li {
  font-family: var(--font-ja);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--color-black);
  text-align: left;
}

@media (min-width: 768px) {
  .p-recruit-org {
    padding: 120px 67px;
  }

  .p-recruit-org__title {
    font-size: 36px;
    margin-bottom: 88px;
  }

  .p-recruit-org__chart {
    gap: 32px;
  }

  .p-recruit-org__node {
    font-size: 16px;
    padding: 16px 32px;
    min-width: 220px;
  }

  .p-recruit-org__node--exec {
    min-width: 280px;
  }

  .p-recruit-org__row {
    gap: 24px;
    max-width: 896px;
    margin: 0 auto;
    width: 100%;
  }

  .p-recruit-org__departments {
    gap: 32px;
    margin-top: 48px;
    padding: 48px 32px;
  }

  .p-recruit-org__dept-name {
    font-size: 18px;
    padding: 12px 0;
  }

  .p-recruit-org__sublist li {
    font-size: 14px;
  }
}

/* -------- p-recruit-benefits（福利厚生） -------- */

.p-recruit-benefits {
  padding: 64px 20px 80px;
  background: var(--color-white);
}

.p-recruit-benefits__title {
  font-family: var(--font-ja);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.27;
  letter-spacing: 0.05em;
  color: var(--color-black);
  text-align: center;
  margin-bottom: 32px;
}

.p-recruit-benefits__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  margin: 0 auto 48px;
  max-width: 768px;
}

.p-recruit-benefits__list li {
  position: relative;
  padding-left: 16px;
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--color-black);
}

.p-recruit-benefits__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c1c1c1;
}

.p-recruit-benefits__note {
  margin-top: 8px;
}

/* 採用サイト動線 ボタン */
.c-btn-recruit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 269px;
  max-width: 100%;
  height: 46px;
  padding: 0 32px;
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.05em;
  margin: 0 auto;
  display: flex;
  position: relative;
  transition: opacity var(--duration-base) var(--ease-out);
}

.c-btn-recruit:hover {
  opacity: 0.85;
}

.c-btn-recruit__icon {
  display: inline-block;
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  /* SVG はもともと白で描画されるため filter は不要 */
}

@media (min-width: 768px) {
  .p-recruit-benefits {
    padding: 80px 67px 144px;
  }

  .p-recruit-benefits__title {
    font-size: 36px;
    margin-bottom: 56px;
  }

  .p-recruit-benefits__list {
    gap: 20px;
    max-width: 931px;
  }

  .p-recruit-benefits__list li {
    font-size: 18px;
    padding-left: 32px;
  }

  .p-recruit-benefits__list li::before {
    top: 0.4em;
  }

  .p-recruit-benefits__note {
    font-size: 16px !important;
  }

  .c-btn-recruit {
    width: 257px;
    height: 60px;
    font-size: 18px;
  }
}

/* -------- p-aicopro-hero -------- */

.p-aicopro-hero {
  padding: 32px 20px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.p-aicopro-hero__title {
  font-family: var(--font-ja);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.79;
  letter-spacing: 0.058em;
  color: var(--color-black);
  text-align: center;
}

.p-aicopro-hero__lead {
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.04em;
  color: var(--color-black);
  text-align: left;
}

@media (min-width: 768px) {
  .p-aicopro-hero {
    padding: 48px 67px 96px;
    gap: 48px;
  }

  .p-aicopro-hero__title {
    font-size: 36px;
  }

  .p-aicopro-hero__lead {
    font-size: 18px;
    text-align: center;
    max-width: 1232px;
  }
}

/* -------- p-aicopro-usability -------- */

.p-aicopro-usability {
  padding: 32px 20px 64px;
  background: var(--color-white);
}

.p-aicopro-usability__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.p-aicopro-usability__title {
  font-family: var(--font-en);
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.064em;
  color: var(--color-black);
  text-align: center;
}

.p-aicopro-usability__sub {
  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.43;
  color: var(--color-black);
}

.p-aicopro-usability__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  max-width: 1152px;
  margin: 0 auto;
}

.p-aicopro-usability__card {
  border: 1px solid var(--color-black);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.p-aicopro-usability__num-row {
  display: flex;
  align-items: center;
  gap: 11px;
}

.p-aicopro-usability__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 28px;
  border: 1px solid var(--color-black);
  font-family: var(--font-ja);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-black);
}

.p-aicopro-usability__name {
  font-family: var(--font-ja);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--color-black);
}

.p-aicopro-usability__lead {
  font-family: var(--font-ja);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-black);
}

.p-aicopro-usability__text {
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-aicopro-usability {
    padding: 80px 67px 96px;
  }

  .p-aicopro-usability__head {
    gap: 16px;
    margin-bottom: 64px;
  }

  .p-aicopro-usability__title {
    font-size: 36px;
  }

  .p-aicopro-usability__sub {
    font-size: 24px;
  }

  /* PC: 2 列 grid */
  .p-aicopro-usability__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .p-aicopro-usability__card {
    padding: 32px;
  }

  .p-aicopro-usability__name {
    font-size: 24px;
  }

  .p-aicopro-usability__lead {
    font-size: 18px;
  }

  .p-aicopro-usability__text {
    font-size: 16px;
  }
}

/* -------- p-aicopro-lineup -------- */

.p-aicopro-lineup {
  padding: 64px 20px 80px;
  background: var(--color-white);
}

.p-aicopro-lineup__title {
  font-family: var(--font-ja);
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.064em;
  color: var(--color-black);
  text-align: center;
  margin-bottom: 48px;
}

.p-aicopro-lineup__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding: 0;
  max-width: 1152px;
  margin: 0 auto;
}

.p-aicopro-lineup__item {
  display: block;
}

.p-aicopro-lineup__link {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--color-black);
  transition: opacity var(--duration-base) var(--ease-out);
}

.p-aicopro-lineup__link:hover {
  opacity: 0.85;
}

.p-aicopro-lineup__figure {
  margin: 0;
  width: 100%;
  aspect-ratio: 335/363;
  overflow: hidden;
  background: var(--color-bg-soft);
}

.p-aicopro-lineup__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.p-aicopro-lineup__link:hover .p-aicopro-lineup__figure img {
  transform: scale(1.04);
}

.p-aicopro-lineup__name {
  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.085em;
  color: var(--color-black);
}

.p-aicopro-lineup__desc {
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.575;
  color: var(--color-black);
}

.p-aicopro-lineup__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: var(--font-ja);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-black);
}

.p-aicopro-lineup__arrow {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
}

@media (min-width: 768px) {
  .p-aicopro-lineup {
    padding: 96px 67px 144px;
  }

  .p-aicopro-lineup__title {
    font-size: 36px;
    margin-bottom: 80px;
  }

  /* PC: 3 列 grid */
  .p-aicopro-lineup__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 56px 24px;
  }

  .p-aicopro-lineup__figure {
    aspect-ratio: 363/363;
  }

  .p-aicopro-lineup__name {
    font-size: 20px;
  }

  .p-aicopro-lineup__desc {
    font-size: 16px;
  }
}

/* -------- p-support -------- */

.p-support__lead {
  padding: 0 20px 48px;
  max-width: 1232px;
  margin: 0 auto;
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.79;
  letter-spacing: 0.04em;
  color: var(--color-black);
}

.p-support__sections {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 64px;
  padding: 0 20px;
  margin: 0 auto 64px;
  max-width: 1232px;
}

.p-support__section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.p-support__section-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* セクション番号: 黒背景・白文字の四角ボックス */
.p-support__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 28px;
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.p-support__title {
  font-family: var(--font-ja);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--color-black);
  flex: 1;
}

.p-support__body {
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-black);
}

.p-support__body p {
  margin: 0 0 0.5em;
}

.p-support__body p:last-child {
  margin-bottom: 0;
}

/* サブ項目カード（安全性 / 検査） */
.p-support__items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  margin: 0;
}

.p-support__item {
  border: 1px solid var(--color-overlay);
  padding: 12px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.p-support__item-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Figma の SVG アイコン: 各々アスペクト比が異なるため width 固定 + height auto */
.p-support__item-icon {
  display: block;
  width: 27px;
  height: auto;
  max-height: 28px;
  flex-shrink: 0;
  object-fit: contain;
}

.p-support__item-name {
  font-family: var(--font-ja);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--color-black);
}

.p-support__item-text {
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-black);
}

/* セクション 4 灰色 notice（標準使用期間 8 年） */
.p-support__notice {
  background: var(--color-bg-soft);
  padding: 24px 32px;
  font-family: var(--font-ja);
  font-size: 14px;
  line-height: 1.43;
  color: var(--color-black);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.p-support__notice p {
  margin: 0;
}

/* セクション 4 おすすめ枠（オレンジ） */
.p-support__recommend {
  position: relative;
  border: 1px solid var(--color-orange);
  background: var(--color-white);
  padding: 28px 32px;
  margin-top: 16px;
}

.p-support__recommend > .c-tag-pill {
  position: absolute;
  top: -12px;
  left: 24px;
}

.p-support__recommend-title {
  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.125;
  letter-spacing: 0.03em;
  color: var(--color-orange);
  margin-bottom: 6px;
}

.p-support__recommend-text {
  font-family: var(--font-ja);
  font-size: 14px;
  line-height: 1.43;
  color: var(--color-black);
}

/* セクション 5: 保証 サブブロック */
.p-support__sub {
  padding-top: 16px;
}

.p-support__sub-title {
  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-black);
  margin: 0 0 16px;
}

.p-support__sub-text {
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-black);
  margin: 0;
}

/* sub-text 同士は連続表示（隙間なし）。
   sub-text 後にブロック要素（list/table 等）が続く場合は margin-top を付ける */
.p-support__sub-text + .p-support__warranty-list,
.p-support__sub-text + .p-support__table-wrap,
.p-support__sub-text + .p-support__bullet-list {
  margin-top: 16px;
}

/* 5-4 最後の段落だけオレンジ + Bold */
.p-support__sub-text--accent {
  color: var(--color-orange);
  font-weight: 700;
}

/* 5-4 ボックス全体: オレンジ破線枠 + 薄オレンジ背景 */
.p-support__sub--accent {
  background: var(--color-orange-bg);
  border: 1px dashed var(--color-orange);
  padding: 28px 32px;
}

/* SP 用 保証期間（部位ごとにヘッダー + def 2 つ、カード境界なし） */
.p-support__warranty-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  margin: 0;
}

.p-support__warranty-row {
  display: block;
}

.p-support__warranty-name {
  background: #ededed;
  padding: 12px 32px;
  text-align: center;
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-black);
  margin: 0 0 16px;
}

.p-support__warranty-defs {
  margin: 0;
}

.p-support__warranty-def {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 19px;
  align-items: center;
  padding: 12px 0;
}

.p-support__warranty-def dt {
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-black);
  margin: 0;
}

.p-support__warranty-def dd {
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.43;
  color: var(--color-black);
  margin: 0;
}

.p-support__warranty-period {
  font-family: var(--font-ja);
  font-weight: 700 !important;
  color: var(--color-orange) !important;
}

/* PC 用 テーブル */
.p-support__table-wrap {
  overflow-x: auto;
}

.p-support__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ja);
  font-size: 14px;
}

.p-support__table th,
.p-support__table td {
  padding: 16px 24px;
  border: 1px solid var(--color-line);
  text-align: left;
  vertical-align: middle;
}

.p-support__table thead th {
  background: var(--color-bg-soft);
  font-weight: 700;
}

.p-support__table tbody th {
  font-weight: 500;
  background: transparent;
}

/* デフォルト: オレンジ枠の囲いボックス（※業務で複数台 等の補足） */
.p-support__note {
  background: var(--color-white);
  border: 1px solid var(--color-orange);
  padding: 28px 32px;
  font-family: var(--font-ja);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-black);
  margin: 16px 0 0;
}

/* メモ表記（※24時間運用など）: 囲いなし、小さい文字 */
.p-support__note--memo {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 10px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.p-support__bullet-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.p-support__bullet-list li {
  position: relative;
  padding-left: 20px;
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-black);
}

.p-support__bullet-list li::before {
  content: "•";
  position: absolute;
  left: 4px;
  top: 0;
  color: var(--color-black);
}

/* セクション 7: 対応の流れ（Figma: 白背景 + 薄グレー枠 + グレー番号） */
.p-support__steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.p-support__step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: var(--color-white);
  border: 1px solid var(--color-step-line);
}

.p-support__step-num {
  flex-shrink: 0;
  width: 17px;
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-step-num);
}

.p-support__step-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.p-support__step-title {
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--color-black);
  margin: 0;
}

.p-support__step-sub {
  font-family: var(--font-ja);
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: var(--color-black);
  margin: 0;
}

/* セクション 8: リソースリンク */
.p-support__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 0;
}

.p-support__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border: 1px solid var(--color-line);
  font-family: var(--font-ja);
  color: var(--color-black);
  transition: opacity var(--duration-base) var(--ease-out);
}

.p-support__link:hover {
  opacity: 0.7;
}

/* アイコンを統一幅の wrap で囲い、画像サイズは HTML の width/height 属性に従う */
.p-support__link-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}

.p-support__link-icon {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.p-support__link-text {
  flex: 1;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.03em;
}

.p-support__link-text small {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-black);
  display: block;
  margin-top: 4px;
  letter-spacing: 0;
}

/* 安全上の注意 (オレンジ枠 + 薄オレンジ背景 + 白い項目) */
.p-support__caution {
  position: relative;
  margin: 24px 20px 80px;
  padding: 28px 16px;
  background: var(--color-orange-bg);
  border: 1px solid var(--color-orange);
  max-width: 1232px;
}

.p-support__caution-tag {
  position: absolute;
  top: -12px;
  left: 24px;
}

.p-support__caution-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.p-support__caution-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 24px;
  background: var(--color-white);
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--color-black);
}

.p-support__caution-icon {
  display: block;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  object-fit: contain;
}

.p-support__caution-list li > span:last-child {
  flex: 1;
}

@media (min-width: 768px) {
  .p-support__lead {
    padding: 0 67px 80px;
    font-size: 16px;
    line-height: 2;
  }

  .p-support__sections {
    padding: 0 67px;
    gap: 96px;
    margin-bottom: 96px;
  }

  .p-support__section {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 32px 24px;
    align-items: start;
  }

  .p-support__section-head {
    grid-column: 1 / span 2;
    align-items: center;
    gap: 24px;
    padding-bottom: 16px;
  }

  .p-support__num {
    width: 48px;
    height: 48px;
    font-size: 32px;
    font-weight: 500;
  }

  .p-support__title {
    font-size: 28px;
  }

  .p-support__body {
    grid-column: 1 / span 2;
    font-size: 16px;
    line-height: 2;
  }

  .p-support__items {
    grid-column: 1 / span 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  /* 安全性は 2 列、検査は 3 列（デフォルト） */
  .p-support__items--two-col {
    grid-template-columns: 1fr 1fr;
  }

  .p-support__item {
    padding: 16px 24px;
  }

  .p-support__item-name {
    font-size: 18px;
  }

  .p-support__notice,
  .p-support__recommend,
  .p-support__sub,
  .p-support__steps,
  .p-support__links {
    grid-column: 1 / span 2;
  }

  .p-support__notice {
    padding: 32px 48px;
    font-size: 16px;
    line-height: 1.875;
  }

  .p-support__recommend {
    padding: 32px 48px;
  }

  .p-support__recommend-title {
    font-size: 20px;
  }

  .p-support__recommend-text {
    font-size: 16px;
    line-height: 1.875;
  }

  .p-support__sub-title {
    font-size: 20px;
  }

  .p-support__sub-text {
    font-size: 16px;
    line-height: 1.875;
  }

  .p-support__table {
    font-size: 16px;
  }

  .p-support__bullet-list li {
    font-size: 16px;
  }

  .p-support__steps {
    gap: 16px;
  }

  .p-support__step {
    padding: 16px 24px;
    gap: 16px;
  }

  .p-support__step-num {
    font-size: 18px;
    width: 24px;
  }

  .p-support__step-title {
    font-size: 16px;
  }

  .p-support__step-sub {
    font-size: 14px;
  }

  .p-support__note {
    grid-column: 1 / span 2;
    font-size: 14px;
  }

  .p-support__links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .p-support__link {
    padding: 24px 32px;
    gap: 16px;
  }

  .p-support__link-icon {
    height: 28px;
  }

  .p-support__link-text {
    font-size: 20px;
  }

  .p-support__caution {
    margin: 24px auto 120px;
    padding: 40px 48px;
    max-width: 1232px;
  }

  .p-support__caution-list {
    gap: 12px;
  }

  .p-support__caution-list li {
    padding: 12px 32px;
    font-size: 16px;
  }
}

/* -------- p-contact-page (Contact ページ独自) -------- */

.p-contact-page__intro {
  padding: 0 20px 32px;
  max-width: 1232px;
  margin: 0 auto;
  text-align: center;
}

.p-contact-page__lead-en {
  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--color-black);
  margin: 0 0 24px;
}

.p-contact-page__lead-ja {
  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.43;
  color: var(--color-black);
  margin: 0 0 32px;
}

.p-contact-page__notice {
  font-family: var(--font-ja);
  font-size: 13px;
  line-height: 1.65;
  color: var(--color-black);
  text-align: left;
  margin: 0;
}

/* お電話ボックス（白背景・黒枠・center 寄せ） */
.p-contact-page__tel {
  background: var(--color-white);
  border: 1px solid var(--color-black);
  padding: 32px;
  margin: 0 20px 56px;
  max-width: 547px;
  margin-inline: auto;
  text-align: center;
}

.p-contact-page__tel-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.p-contact-page__tel-label {
  font-family: var(--font-ja);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--color-black);
  margin: 0;
}

.p-contact-page__tel-divider {
  display: block;
  width: 25px;
  height: 1px;
  background: var(--color-black);
}

.p-contact-page__tel-body {
  display: block;
}

.p-contact-page__tel-name {
  font-family: var(--font-ja);
  font-size: 18px;
  font-weight: 500;
  line-height: 20px;
  color: var(--color-black);
  margin: 0 0 12px;
  text-align: center;
}

.p-contact-page__tel-number {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 4px;
  margin: 0 0 8px;
}

.p-contact-page__tel-icon {
  display: block;
  flex-shrink: 0;
  width: 15px;
  height: 20px;
  object-fit: contain;
}

.p-contact-page__tel-number a {
  font-family: var(--font-ja);
  font-size: 30px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0.05em;
  color: var(--color-black);
}

.p-contact-page__tel-hours {
  font-family: var(--font-ja);
  font-size: 12px;
  line-height: 21px;
  color: var(--color-black);
  margin: 0;
}

/* お問い合わせフォーム */
.p-contact-page__form-section {
  padding: 0 20px 80px;
  max-width: 896px;
  margin: 0 auto;
}

.p-contact-page__form-title {
  font-family: var(--font-ja);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--color-black);
  margin: 0 0 40px;
  text-align: center;
}

.p-contact-page__form {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.p-contact-page__field {
  display: block;
}

.p-contact-page__label {
  display: block;
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-black);
  margin: 0 0 8px;
}

.p-contact-page__input,
.p-contact-page__select {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background: var(--color-white);
  font-family: var(--font-ja);
  font-size: 14px;
  color: var(--color-black);
  transition: border-color var(--duration-base) var(--ease-out);
}

.p-contact-page__textarea {
  display: block;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background: var(--color-white);
  font-family: var(--font-ja);
  font-size: 14px;
  color: var(--color-black);
  transition: border-color var(--duration-base) var(--ease-out);
}

.p-contact-page__input:focus,
.p-contact-page__select:focus,
.p-contact-page__textarea:focus {
  outline: none;
  border-color: var(--color-black);
}

.p-contact-page__input::placeholder,
.p-contact-page__textarea::placeholder {
  color: var(--color-text-muted);
}

.p-contact-page__select-wrap {
  position: relative;
}

.p-contact-page__select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--color-black);
  border-bottom: 1.5px solid var(--color-black);
  transform: translateY(-75%) rotate(45deg);
  pointer-events: none;
}

.p-contact-page__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  cursor: pointer;
}

.p-contact-page__textarea {
  height: 218px;
  resize: vertical;
}

/* 個人情報の取り扱い */
.p-contact-page__privacy {
  margin: 16px 0 0;
}

.p-contact-page__privacy-title {
  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-black);
  margin: 0 0 12px;
}

.p-contact-page__privacy-text {
  font-family: var(--font-ja);
  font-size: 13px;
  line-height: 1.65;
  color: var(--color-black);
  margin: 0;
}

.p-contact-page__privacy-text a {
  color: var(--color-black);
  text-decoration: underline;
}

.p-contact-page__submit-wrap {
  display: flex;
  justify-content: center;
  margin: 32px 0 0;
}

.p-contact-page__submit {
  width: 213px;
  max-width: 100%;
  height: 46px;
  padding: 0 32px;
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  border: none;
  cursor: pointer;
  transition: opacity var(--duration-base) var(--ease-out);
}

.p-contact-page__submit:hover {
  opacity: 0.85;
}

@media (min-width: 768px) {
  .p-contact-page__intro {
    padding: 0 67px 56px;
  }

  .p-contact-page__lead-en {
    font-size: 32px;
  }

  .p-contact-page__lead-ja {
    font-size: 24px;
  }

  .p-contact-page__notice {
    font-size: 16px;
    line-height: 1.625;
    text-align: center;
    max-width: 832px;
    margin: 0 auto;
  }

  .p-contact-page__tel {
    margin: 0 auto 96px;
    padding: 48px 64px;
    max-width: 547px;
  }

  .p-contact-page__tel-label {
    font-size: 20px;
  }

  .p-contact-page__tel-name {
    font-size: 20px;
  }

  .p-contact-page__tel-number a {
    font-size: 36px;
  }

  .p-contact-page__tel-hours {
    font-size: 14px;
  }

  .p-contact-page__form-section {
    padding: 0 67px 144px;
  }

  .p-contact-page__form-title {
    font-size: 28px;
    margin-bottom: 56px;
    text-align: center;
  }

  .p-contact-page__label {
    font-size: 16px;
  }

  .p-contact-page__input,
  .p-contact-page__select {
    height: 50px;
    padding: 0 16px;
    font-size: 16px;
  }

  .p-contact-page__textarea {
    padding: 16px;
    font-size: 16px;
  }

  .p-contact-page__privacy {
    margin: 32px 0 0;
    padding: 24px 32px;
    background: var(--color-bg-soft);
  }

  .p-contact-page__privacy-title {
    font-size: 18px;
  }

  .p-contact-page__privacy-text {
    font-size: 14px;
  }

  .p-contact-page__submit {
    width: 240px;
    height: 60px;
    font-size: 16px;
  }
}

/* ==========================================================================
   Object / Utility — 補助クラス
   メディアクエリで「対象外ビューポートでだけ非表示」にする設計。
   これにより [hidden] 属性や display: flex を上書きしない。
   ========================================================================== */

@media (max-width: 767px) {
  .u-pc-only { display: none !important; }
}

@media (min-width: 768px) {
  .u-sp-only { display: none !important; }
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}