/* =====================================================================
   My Page — auth (login / register) + dashboard.
   Reuses tokens.css / base.css / components.css. Load AFTER those.
   ===================================================================== */

:root {
  /* Dashboard-only insets: the left menu sits closer to the viewport
     edge than ordinary page copy (--gutter), per design direction. */
  --gutter-dash-left: clamp(14px, 2vw, 28px);
  --gutter-dash: clamp(16px, 2.4vw, 32px);
}

/* ---- Shared page shell ---------------------------------------------- */
.mp-body { background: var(--bg-blue); min-height: 100vh; display: flex; flex-direction: column; }

/* ---- Simple auth header (logo + My Page button) --------------------- */
.mp-header {
  background: var(--bg-white);
  border-bottom: 1px solid var(--color-border);
}
.mp-header__inner {
  max-width: 1200px; margin-inline: auto;
  padding: var(--space-sm) var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  min-height: 72px;
}
.mp-logo { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.mp-logo img { height: 44px; width: auto; }

/* ---- Auth main ------------------------------------------------------ */
.mp-auth { flex: 1; display: grid; place-items: start center; padding: clamp(24px, 5vw, 64px) var(--gutter); }
.mp-auth__wrap { width: 100%; max-width: 620px; display: grid; gap: var(--space-lg); }

.mp-card {
  background: var(--bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 48px);
}
.mp-card__head { text-align: center; display: grid; gap: var(--space-xs); margin-bottom: var(--space-xl); }
.mp-card__eyebrow {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  font-size: var(--fs-eyebrow); letter-spacing: 0.18em; font-weight: 700;
  color: var(--color-brand-blue); text-transform: uppercase;
}
.mp-card__eyebrow::before, .mp-card__eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.5; }
.mp-card__title { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); font-weight: 700; color: var(--color-navy); letter-spacing: 0.04em; }
.mp-card__lead { font-size: var(--fs-body); color: var(--color-text); line-height: 1.9; }

/* ---- Form ----------------------------------------------------------- */
.mp-form { display: grid; gap: var(--space-lg); }
.mp-field { display: grid; gap: var(--space-2xs); }
.mp-field__label { font-size: 0.9375rem; font-weight: 700; color: var(--color-navy); }
.mp-input-wrap { position: relative; display: flex; align-items: center; }
.mp-input-wrap__icon { position: absolute; left: 14px; width: 20px; height: 20px; color: var(--color-text-muted); pointer-events: none; }
.mp-input, .mp-select {
  width: 100%; min-height: 52px;
  padding: 0 var(--space-md) 0 44px;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--bg-white); color: var(--color-text); font-size: 1rem;
}
.mp-input::placeholder { color: #b6bfc9; }
.mp-input:focus, .mp-select:focus { outline: none; border-color: var(--color-brand-blue); box-shadow: 0 0 0 3px rgba(31,90,166,0.12); }
.mp-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2378828c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.mp-input--plain { padding-left: var(--space-md); }
.mp-textarea {
  width: 100%; min-height: 140px; resize: vertical;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--bg-white); color: var(--color-text); font-size: 1rem; line-height: 1.8;
}
.mp-textarea:focus { outline: none; border-color: var(--color-brand-blue); box-shadow: 0 0 0 3px rgba(31,90,166,0.12); }
.mp-consent { display: flex; align-items: flex-start; gap: var(--space-2xs); font-size: 0.9375rem; color: var(--color-text); }
.mp-consent input { accent-color: var(--color-brand-blue); width: 18px; height: 18px; margin-top: 2px; }
.mp-consent a { color: var(--color-brand-blue); text-decoration: underline; text-underline-offset: 3px; }

/* required badge */
.mp-req { display: inline-block; font-size: 0.6875rem; font-weight: 700; color: #fff; background: #d9534f; border-radius: 3px; padding: 1px 6px; margin-left: var(--space-2xs); vertical-align: middle; }

/* フォームのエラー表示 */
.mp-form-error-summary {
  background: #fdf2f1; border: 1px solid #f2c9c4; border-radius: var(--radius-md);
  padding: var(--space-md); color: #a5342a; font-size: 0.9375rem;
}
.mp-form-error-summary ul { margin: var(--space-2xs) 0 0; padding-left: 1.2em; display: grid; gap: 4px; }
.has-error .mp-input, .has-error .mp-select, .has-error .mp-textarea,
.has-error.mp-file__drop, .mp-file.has-error .mp-file__drop { border-color: #d9534f !important; }
.mp-field-error { color: #d9534f; font-size: 0.8125rem; margin-top: var(--space-3xs); }
fieldset.has-error, .mp-consent.has-error { outline: 1px solid #d9534f; outline-offset: 4px; border-radius: var(--radius-sm); }
.mp-opt { display: inline-block; font-size: 0.6875rem; font-weight: 700; color: var(--color-text-muted); background: var(--bg-blue); border: 1px solid var(--color-border); border-radius: 3px; padding: 1px 6px; margin-left: var(--space-2xs); vertical-align: middle; }

/* radio / checkbox option lists */
.mp-opts { display: grid; gap: var(--space-2xs); }
.mp-opts--inline { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }
.mp-opt-item {
  display: flex; align-items: center; gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-sm); min-height: 46px;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font-size: 0.9375rem; color: var(--color-text); cursor: pointer;
}
.mp-opt-item input { accent-color: var(--color-brand-blue); width: 18px; height: 18px; flex: none; }
.mp-opt-item:has(input:checked) { border-color: var(--color-brand-blue); background: var(--color-tint-blue); }

/* fieldsets must be allowed to shrink (browsers give them min-inline-size: min-content) */
.mp-form fieldset { min-width: 0; }
.mp-input, .mp-select, .mp-textarea { min-width: 0; }
/* sub-fieldset (address block) */
.mp-subgroup { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-lg); display: grid; gap: var(--space-md); min-width: 0; }
.mp-subgroup > legend, .mp-subgroup__title { font-weight: 700; color: var(--color-navy); padding: 0; margin-bottom: var(--space-2xs); }
.mp-subgroup__note { font-size: 0.8125rem; color: var(--color-text-muted); }

/* file upload */
.mp-file { display: grid; gap: var(--space-2xs); }
.mp-file__drop {
  display: flex; align-items: center; gap: var(--space-sm);
  border: 1px dashed #b7cbe0; border-radius: var(--radius-md); padding: var(--space-md);
  color: var(--color-text-muted); font-size: 0.9375rem; background: var(--bg-blue);
  min-width: 0; flex-wrap: wrap;
}
.mp-file input[type="file"] { font-size: 0.8125rem; min-width: 0; max-width: 100%; flex: 1 1 160px; }

/* terms box */
.mp-terms {
  max-height: 220px; overflow-y: auto;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-md); background: var(--bg-white);
  font-size: 0.8125rem; line-height: 1.9; color: var(--color-text);
}
.mp-terms h3 { font-size: 0.9375rem; color: var(--color-navy); margin-bottom: var(--space-2xs); }
.mp-terms ul { display: grid; gap: 4px; padding-left: 1.1em; list-style: disc; }

@media (max-width: 560px) { .mp-opts--inline { grid-template-columns: 1fr; } }
.mp-pw-toggle { position: absolute; right: 12px; width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 0; color: var(--color-text-muted); border-radius: var(--radius-sm); }
.mp-pw-toggle:hover { color: var(--color-brand-blue); }

/* horizontal field rows (register) */
.mp-field--row { grid-template-columns: 180px 1fr; align-items: center; gap: var(--space-md); }
@media (max-width: 640px) { .mp-field--row { grid-template-columns: 1fr; align-items: stretch; } }

/* checkbox group — 1行ずつ（縦幅は詰めめに） */
.mp-checks { display: grid; grid-template-columns: 1fr; gap: var(--space-3xs); }
.mp-check {
  display: flex; align-items: center; gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-sm); min-height: 38px;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font-size: 0.875rem; color: var(--color-text); cursor: pointer;
}
.mp-check input { accent-color: var(--color-brand-blue); width: 16px; height: 16px; }
.mp-check:has(input:checked) { border-color: var(--color-brand-blue); background: var(--color-tint-blue); }

/* buttons full width in forms */
.mp-btn-block { width: 100%; min-height: 56px; }

.mp-forgot { text-align: center; }
.mp-forgot a { color: var(--color-brand-blue); text-decoration: underline; text-underline-offset: 3px; font-size: 0.9375rem; }

.mp-divider { display: flex; align-items: center; gap: var(--space-md); color: var(--color-text-muted); font-size: 0.9375rem; margin: var(--space-lg) 0; }
.mp-divider::before, .mp-divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }

.mp-back { text-align: center; }
.mp-back a { color: var(--color-brand-blue); text-decoration: underline; text-underline-offset: 3px; font-size: 0.9375rem; }

/* registration step flow — 丸アイコン3つ（中にアイコン）＋矢印、ラベルは丸の上に小さく表示 */
.mp-progress { display: flex; align-items: flex-start; justify-content: center; gap: var(--space-2xs); margin: 0 0 var(--space-xl); }
.mp-progress__step { display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); }
.mp-progress__label { font-size: 0.75rem; color: var(--color-text-muted); white-space: nowrap; text-align: center; }
.mp-progress__icon {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--color-tint-blue); color: var(--color-brand-blue);
}
.mp-progress__icon svg { width: 20px; height: 20px; }
.mp-progress__arrow { flex: none; align-self: center; margin-top: 20px; color: var(--color-border); }
.mp-progress__arrow svg { width: 18px; height: 18px; display: block; }
@media (max-width: 480px) {
  .mp-progress__label { font-size: 0.6875rem; }
  .mp-progress { gap: var(--space-3xs); }
  .mp-progress__icon { width: 34px; height: 34px; }
  .mp-progress__icon svg { width: 17px; height: 17px; }
  .mp-progress__arrow { margin-top: 17px; }
  .mp-progress__arrow svg { width: 14px; height: 14px; }
}

/* ---- Auth info box -------------------------------------------------- */
.mp-info {
  display: flex; gap: var(--space-md); align-items: center;
  background: var(--bg-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-lg);
}
.mp-info__icon { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--color-tint-blue); display: grid; place-items: center; color: var(--color-brand-blue); }
.mp-info__icon svg { width: 28px; height: 28px; }
.mp-info__list { display: grid; gap: var(--space-2xs); }
.mp-info__list li { position: relative; padding-left: 1.1em; font-size: 0.9375rem; color: var(--color-text); }
.mp-info__list li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand-blue); }

/* ---- Support footer ------------------------------------------------- */
.mp-support {
  background: var(--bg-blue); border-top: 1px solid var(--color-border);
  padding: var(--space-lg) var(--gutter);
}
.mp-support__inner {
  max-width: 1200px; margin-inline: auto;
  display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap;
}
.mp-support__icon { flex: none; width: 56px; height: 56px; border-radius: 50%; background: #dbe7f4; display: grid; place-items: center; color: var(--color-brand-blue); }
.mp-support__body { flex: 1 1 320px; }
.mp-support__lead { font-size: 0.9375rem; color: var(--color-text); }
.mp-support__tel { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: 1.5rem; font-weight: 800; color: var(--color-brand-blue); margin-top: 2px; }
.mp-support__tel small { font-size: 0.8125rem; font-weight: 400; color: var(--color-text-muted); }
.mp-support__form { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--color-brand-blue); font-weight: 600; margin-top: var(--space-xs); }
.mp-support__urgent { margin-top: var(--space-sm); font-size: 0.8125rem; }
.mp-support__urgent a { color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 3px; }
.mp-support__urgent a:hover { color: var(--color-brand-blue); }

/* =====================================================================
   Dashboard
   ===================================================================== */
.mp-dash-header {
  background: var(--bg-white); border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; z-index: 50;
}
.mp-dash-header__inner {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-2xs) var(--gutter-dash) var(--space-2xs) var(--gutter-dash-left); min-height: 56px;
}
.mp-dash-header__logo img { height: 40px; }
.mp-dash-header__title { font-size: 1.25rem; font-weight: 700; color: var(--color-navy); padding-left: var(--space-md); border-left: 1px solid var(--color-border); }
.mp-dash-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-lg); }
.mp-dash-header__link { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--color-text); font-weight: 600; font-size: 0.9375rem; }
.mp-dash-header__link:hover { color: var(--color-brand-blue); }

/* icon-only header action (bell の「お知らせ」など) */
.mp-dash-header__link--icon-only { gap: 0; }
.mp-dash-header__link--icon-only span:not(.sr-only) { display: none; }

/* SP用サイドメニュー ハンバーガートグル（デスクトップでは非表示） */
.mp-nav-toggle {
  display: none; flex: none; width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--bg-white); color: var(--color-text);
}
.mp-nav-toggle:hover { color: var(--color-brand-blue); }

/* left-aligned so the menu always sits at the left edge (not centered).
   The left inset is intentionally smaller than the site's normal --gutter
   so the sidebar hugs the viewport edge more closely than body copy does. */
.mp-dash {
  max-width: none; margin: 0;
  padding: var(--space-xl) var(--gutter-dash) var(--space-3xl) var(--gutter-dash-left);
  display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: clamp(20px, 2.4vw, 40px); align-items: start;
}
.mp-main { max-width: 980px; min-width: 0; }

.mp-side { display: grid; gap: var(--space-3xs); position: sticky; top: 92px; align-self: start; }
.mp-side__link { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); color: var(--color-text); font-weight: 600; }
.mp-side__link svg { width: 20px; height: 20px; color: var(--color-brand-blue); flex: none; }
.mp-side__link:hover { background: var(--bg-white); text-decoration: none; }
.mp-side__link[aria-current="page"] { background: var(--color-tint-blue); color: var(--color-brand-blue); }
.mp-side__link--danger { color: #c0392b; border: 1px solid #f2c9c4; background: #fdf2f1; margin-top: var(--space-md); }
.mp-side__link--danger svg { color: #c0392b; }

/* ホームのフッター（ログアウトはヘッダーから移動） */
.mp-dash-footer { display: flex; justify-content: center; padding: var(--space-xl) var(--gutter-dash) var(--space-2xl); }
.mp-dash-footer__logout {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  color: var(--color-text-muted); font-weight: 600; font-size: 0.9375rem;
  padding: var(--space-sm) var(--space-lg); border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  background: var(--bg-white);
}
.mp-dash-footer__logout:hover { color: var(--color-brand-blue); border-color: var(--color-brand-blue); text-decoration: none; }

.mp-main { display: grid; gap: var(--space-xl); }
.mp-panel { background: var(--bg-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 36px); }
.mp-panel + .mp-panel { margin-top: 0; }
.mp-actions { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-lg); }
.mp-actions .c-btn { min-width: 200px; }
.mp-warn { display: flex; gap: var(--space-md); background: #fdf2f1; border: 1px solid #f2c9c4; border-radius: var(--radius-md); padding: var(--space-lg); color: #a5342a; }
.mp-warn__icon { flex: none; color: #c0392b; }
.mp-warn strong { color: #a5342a; }
.mp-greet__label { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.1em; color: var(--color-brand-blue); margin-bottom: var(--space-2xs); }
.mp-greet__name { font-size: 1.5rem; font-weight: 700; color: var(--color-navy); }
.mp-greet__sub { color: var(--color-text-muted); margin-top: 2px; }

.mp-contract {
  background: var(--bg-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 36px);
}
.mp-contract__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: center; }
.mp-contract__plan { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); font-weight: 800; color: var(--color-navy); display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.mp-badge { font-size: 0.8125rem; font-weight: 700; color: var(--color-brand-blue); background: var(--color-tint-blue); border-radius: var(--radius-pill); padding: 4px 14px; }
.mp-contract__label { font-size: 0.875rem; color: var(--color-brand-blue); font-weight: 600; }
.mp-contract__media { border-radius: var(--radius-md); overflow: hidden; background: var(--bg-blue); }
.mp-contract__media img { width: 100%; aspect-ratio: 4/3; object-fit: contain; padding: var(--space-md); }
.mp-dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm) var(--space-lg); align-items: baseline; margin-top: var(--space-md); }
.mp-dl dt { font-size: 0.9375rem; color: var(--color-text-muted); white-space: nowrap; }
.mp-dl dd { margin: 0; font-weight: 600; color: var(--color-text); }
/* 特定商取引法表記など、ラベルが長い表では折り返しを許可して縦積みにする（SP） */
@media (max-width: 640px) {
  .mp-dl { grid-template-columns: 1fr; gap: var(--space-2xs) var(--space-lg); }
  .mp-dl dt { white-space: normal; font-weight: 700; margin-top: var(--space-sm); }
  .mp-dl dt:first-child { margin-top: 0; }
}

/* ---- Simple tab switcher（会社概要ページなど） ----------------------- */
.mp-tabs { display: flex; gap: var(--space-md); border-bottom: 1px solid var(--color-border); margin: var(--space-lg) 0; }
.mp-tabs__btn { padding: var(--space-sm) var(--space-2xs); border: 0; background: none; font-weight: 700; font-size: 0.9375rem; color: var(--color-text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.mp-tabs__btn[aria-current="true"] { color: var(--color-brand-blue); border-bottom-color: var(--color-brand-blue); }
.mp-contract__cta {
  display: flex; align-items: center; justify-content: center; gap: var(--space-sm);
  width: 100%; min-height: 56px; margin-top: var(--space-lg);
  background: var(--bg-blue); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  color: var(--color-navy); font-weight: 700;
}
.mp-contract__cta:hover { background: var(--color-tint-blue); text-decoration: none; }

.mp-section-title { font-size: 1.25rem; font-weight: 700; color: var(--color-navy); margin-bottom: var(--space-md); }
.mp-faq-cat { margin-top: var(--space-2xl); }
.mp-faq-cat:first-of-type { margin-top: var(--space-lg); }
.mp-faq-cat .mp-section-title { padding-bottom: var(--space-sm); border-bottom: 2px solid var(--color-brand-blue); color: var(--color-brand-blue); }
.mp-faq-cat .c-faq { margin-top: var(--space-sm); }
/* 質問1件あたりの縦幅を、だいたいQ2行分に収まるまでコンパクトに */
.mp-faq-cat .c-faq__trigger { padding: var(--space-sm) var(--space-md); }
.mp-faq-cat .c-faq__label { font-size: 0.875rem; line-height: 1.5; }
.mp-faq-cat .c-faq__q, .mp-faq-cat .c-faq__icon { width: 24px; height: 24px; }
.mp-faq-cat .c-faq__answer { font-size: 0.875rem; line-height: 1.75; padding-left: calc(var(--space-md) + 24px + var(--space-sm)); }

/* よくある質問トップの 1〜7 ジャンプナビ */
.mp-faq-jump { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-lg); }
.mp-faq-jump a {
  padding: var(--space-2xs) var(--space-md); min-height: 36px; display: inline-flex; align-items: center;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  color: var(--color-brand-blue); font-size: 0.8125rem; font-weight: 600; background: var(--bg-white);
}
.mp-faq-jump a:hover { background: var(--color-tint-blue); border-color: var(--color-brand-blue); text-decoration: none; }

.mp-menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.mp-menu__item {
  display: grid; gap: var(--space-2xs); justify-items: center; text-align: center;
  padding: var(--space-lg); background: var(--bg-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); color: var(--color-text); position: relative;
}
.mp-menu__item:hover { border-color: var(--color-brand-blue); text-decoration: none; box-shadow: none; }
.mp-menu__icon { width: 40px; height: 40px; color: var(--color-brand-blue); }
.mp-menu__name { font-weight: 700; color: var(--color-navy); }
.mp-menu__desc { font-size: 0.8125rem; color: var(--color-text-muted); }
.mp-menu__arrow { position: absolute; right: 14px; bottom: 12px; color: var(--color-brand-blue); }

.mp-news { background: var(--bg-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.mp-news__item { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-border); color: var(--color-text); }
.mp-news__item:hover { background: var(--bg-blue); text-decoration: none; }
.mp-news__tag { flex: none; font-size: 0.75rem; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-sm); background: var(--color-tint-blue); color: var(--color-brand-blue); }
.mp-news__tag--maint { background: #fdf1de; color: #b9812a; }
.mp-news__text { flex: 1; font-weight: 600; }
.mp-news__date { color: var(--color-text-muted); font-size: 0.875rem; white-space: nowrap; }
.mp-news__all { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-md); font-weight: 700; color: var(--color-navy); }

/* =====================================================================
   使い方 (guide)
   ===================================================================== */
.mp-guide { display: block; min-width: 0; }
.mp-guide__back { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--color-brand-blue); font-weight: 600; margin-bottom: var(--space-lg); }
.mp-guide__head { margin-bottom: var(--space-2xl); }
.mp-guide__title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem); font-weight: 700; color: var(--color-navy); }
.mp-guide__lead { color: var(--color-text); margin-top: var(--space-sm); }
.mp-guide__switch { display: inline-flex; gap: var(--space-2xs); align-items: center; margin-top: var(--space-md); color: var(--color-brand-blue); font-weight: 600; border-bottom: 1.5px solid var(--color-brand-blue); }

/* top-level groups: "1. 酸素室が届いたら" / "2. 設置後のご利用方法について" / "3. FAQ" */
.mp-guide__group { margin-top: var(--space-3xl); }
.mp-guide__group:first-of-type { margin-top: var(--space-2xl); }
.mp-guide__group-title {
  display: flex; align-items: center; gap: var(--space-md);
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.4rem); font-weight: 700; color: var(--color-navy);
  padding-bottom: var(--space-md); border-bottom: 2px solid var(--color-navy);
}
.mp-guide__group-title .num-lg { width: 38px; height: 38px; border-radius: 50%; background: var(--color-navy); color: #fff; display: grid; place-items: center; font-size: 1.05rem; font-weight: 700; flex: none; }
.mp-guide__group-lead { color: var(--color-text-muted); font-size: 0.9375rem; margin-top: var(--space-sm); }

.mp-guide__section { margin-top: var(--space-xl); padding-left: clamp(0px, 2vw, 12px); }
.mp-guide__arrow { text-align: center; color: #b7cbe0; font-size: 1.15rem; line-height: 1; padding: var(--space-2xs) 0; }
.mp-guide__section-title {
  display: flex; align-items: center; gap: var(--space-sm);
  font-size: 1.0625rem; font-weight: 700; color: var(--color-brand-blue);
  padding-bottom: var(--space-xs); border-bottom: 1px solid var(--color-border);
}
.mp-guide__section-title .num { width: 26px; height: 26px; border-radius: 50%; background: var(--color-brand-blue); color: #fff; display: grid; place-items: center; font-size: 0.8125rem; flex: none; }

/* ---- Section 2 "設置後のご利用方法について" — diagram-style cards, no illustrations
   One full-width card per row (per design reference), not a 2-up grid — each
   card gets the whole content width to breathe. ---- */
.mp-usage-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); margin-top: var(--space-lg); }
.mp-usage-card { background: var(--bg-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 40px); display: grid; gap: var(--space-md); align-content: start; }
.mp-usage-card__head { display: flex; align-items: center; gap: var(--space-sm); }
.mp-usage-card__num { width: 32px; height: 32px; border-radius: 50%; background: var(--color-brand-blue); color: #fff; display: grid; place-items: center; font-size: 0.95rem; font-weight: 700; flex: none; }
.mp-usage-card__title { font-weight: 700; color: var(--color-navy); font-size: 1.15rem; }
.mp-usage-card__text { color: var(--color-text); font-size: 0.9375rem; line-height: 1.9; }
.mp-usage-card ol, .mp-usage-card > ul { margin-top: 2px; padding-left: 1.3em; display: grid; gap: 8px; }
.mp-usage-card ol li, .mp-usage-card > ul li { font-size: 0.9375rem; line-height: 1.85; }

.mp-usage-list { display: grid; gap: var(--space-sm); margin-top: 2px; }
.mp-usage-list__row { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-md); background: var(--bg-blue); font-size: 0.9375rem; line-height: 1.75; }
.mp-usage-list__row strong { display: block; color: var(--color-navy); font-size: 0.9375rem; margin-bottom: 2px; }

.mp-temp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); margin-top: 2px; }
.mp-temp-cell { display: flex; gap: var(--space-sm); align-items: flex-start; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-md); background: var(--bg-blue); }
.mp-temp-cell__body { flex: 1; min-width: 0; }
.mp-temp-cell strong { display: block; color: var(--color-navy); font-size: 0.875rem; margin-bottom: 3px; }
.mp-temp-cell span { font-size: 0.875rem; color: var(--color-text); line-height: 1.7; display: block; }

@media (max-width: 640px) {
  .mp-temp-grid { grid-template-columns: 1fr; }
}

.mp-step-card {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg);
  align-items: center; background: var(--bg-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-lg); margin-top: var(--space-md);
}
.mp-step-card__head { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.mp-step-card__badge { width: 28px; height: 28px; border-radius: 50%; background: var(--color-tint-blue); color: var(--color-brand-blue); font-weight: 700; display: grid; place-items: center; flex: none; }
.mp-step-card__title { font-weight: 700; color: var(--color-navy); font-size: 1.05rem; }
.mp-step-card__text { color: var(--color-text); font-size: 0.9375rem; }
.mp-step-card ul { display: grid; gap: var(--space-2xs); margin-top: var(--space-sm); }
.mp-step-card ul li { position: relative; padding-left: 1.5em; font-size: 0.9375rem; }
.mp-step-card ul li::before { content: "✓"; position: absolute; left: 0; color: var(--color-brand-blue); font-weight: 700; }

/* placeholder illustration box (real illustrations not supplied) */
.mp-illust {
  display: grid; place-items: center; min-height: 160px;
  background: var(--bg-blue); border: 1px dashed #b7cbe0; border-radius: var(--radius-md);
  color: #8aa4bd; font-size: 0.8125rem; text-align: center; padding: var(--space-md); line-height: 1.6;
}
.mp-illust svg { width: 32px; height: 32px; margin-bottom: var(--space-2xs); color: #b7cbe0; }
/* small square thumbnail variant, used inline beside compact list rows */
.mp-illust--sm { min-height: 0; width: 84px; aspect-ratio: 1/1; flex: none; font-size: 0.625rem; padding: var(--space-2xs); }
.mp-illust--sm svg { width: 22px; height: 22px; margin-bottom: 2px; }
/* 実写真・動画が入ったスロット — プレースホルダーの破線/背景色を消し、
   画像で枠いっぱいに埋める */
.mp-illust--photo { border-style: solid; border-color: var(--color-border); background: var(--bg-blue); padding: 0; overflow: hidden; }
.mp-illust--photo img, .mp-illust--photo video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

.mp-note { display: flex; gap: var(--space-sm); background: var(--color-tint-blue); border-radius: var(--radius-md); padding: var(--space-md); color: var(--color-text); font-size: 0.9375rem; margin-top: var(--space-md); }
.mp-note__mark { flex: none; font-weight: 700; color: var(--color-brand-blue); }

/* compact icon + label mini-grid (注意事項 など) */
.mp-icon-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); margin-top: var(--space-sm); }
.mp-icon-item { display: flex; align-items: center; gap: var(--space-sm); }
.mp-icon-item__mark { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--color-tint-blue); color: var(--color-brand-blue); display: grid; place-items: center; }
.mp-icon-item__mark svg { width: 20px; height: 20px; }
.mp-icon-item__text { font-size: 0.9375rem; color: var(--color-text); line-height: 1.6; }
@media (max-width: 480px) { .mp-icon-grid { grid-template-columns: 1fr; } }

.mp-o2table { display: grid; gap: var(--space-sm); margin-top: var(--space-md); }
.mp-o2row { display: flex; align-items: center; gap: var(--space-md); background: var(--bg-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-md); }
.mp-o2row__body { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.mp-o2row__name { font-weight: 700; color: var(--color-navy); }
.mp-o2row__val { text-align: right; color: var(--color-brand-blue); font-weight: 700; white-space: nowrap; }

/* compact list row with a small thumbnail placeholder */
.mp-usage-list__row { display: flex; align-items: flex-start; gap: var(--space-sm); }
.mp-usage-list__row-text { flex: 1; }

/* guide steps are text-only (no illustrations) → single column */
.mp-step-card--text { grid-template-columns: 1fr; }
.mp-step-card--text ol { margin: var(--space-sm) 0 0; padding-left: 1.4em; display: grid; gap: var(--space-xs); }
.mp-step-card--text ol li { font-size: 0.9375rem; line-height: 1.85; }
.mp-guide__dl { display: inline-flex; align-items: center; gap: var(--space-2xs); margin-top: var(--space-md); }
.mp-video { position: relative; aspect-ratio: 16/9; background: #000; border-radius: var(--radius-md); overflow: hidden; margin-top: var(--space-md); }
.mp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 640px) {
  .mp-step-card { grid-template-columns: 1fr; }
  .mp-o2row { grid-template-columns: 1fr; }
  .mp-o2row__val { text-align: left; white-space: normal; }
}

/* dashboard responsive */
@media (max-width: 900px) {
  .mp-dash { grid-template-columns: 1fr; padding-left: var(--gutter); padding-right: var(--gutter); position: relative; }
  /* ページタイトルの文字数によっては2行になってしまっていたため、左右余白を
     半分にし、タイトル・「マイページ」リンクの文字サイズも7割程度に縮小。 */
  .mp-dash-header__inner { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); gap: var(--space-2xs); }
  .mp-dash-header__title { padding-left: var(--space-2xs); flex: 1; min-width: 0; }
  .mp-dash-header__actions { gap: var(--space-xs); }
  .mp-dash-header__link { font-size: 0.65625rem; }
  .mp-nav-toggle { display: inline-flex; }
  /* サイドメニューはハンバーガーで開閉するドロワーに（常時表示のスタック一覧をやめる）。
     position: fixed で viewport 基準にする — .mp-dash (absolute だった頃の位置決め
     の基準) はページ全体の高さを持つため、position: absolute; top: 100% だと
     ヘッダー直下ではなくページ最下部（数千pxスクロールした先）に開いてしまい、
     クリックしても「何も出てこない」ように見える不具合があった。 */
  .mp-side {
    display: none; position: fixed; left: var(--gutter); right: var(--gutter); top: 57px;
    z-index: 40;
    max-height: calc(100vh - 76px); overflow-y: auto;
    background: var(--bg-white); border: 1px solid var(--color-border); border-radius: var(--radius-md);
    padding: var(--space-sm);
    box-shadow: 0 12px 32px rgba(20, 40, 70, 0.14);
  }
  .mp-side.is-open { display: grid; }
  .mp-contract__grid { grid-template-columns: 1fr; }
  .mp-menu { grid-template-columns: repeat(2, 1fr); }
  .mp-dash-header__title { font-size: 0.735rem; }
}
@media (max-width: 560px) {
  .mp-menu { grid-template-columns: 1fr; }
  .mp-news__item { flex-wrap: wrap; }
  .mp-support__tel { font-size: 1.25rem; }
}

/* =====================================================================
   クチコミを投稿 (review)
   ===================================================================== */
.mp-crumb { display: flex; align-items: center; gap: var(--space-2xs); font-size: 0.875rem; color: var(--color-text-muted); margin-bottom: var(--space-md); }
.mp-crumb a { color: var(--color-text-muted); }
.mp-crumb a:hover { color: var(--color-brand-blue); }
.mp-crumb__sep { color: #b6bfc9; }
.mp-crumb__current { color: var(--color-navy); font-weight: 600; }

.mp-review-intro { display: grid; gap: var(--space-sm); }
.mp-review-intro__title { font-weight: 700; color: var(--color-navy); font-size: 1.1rem; }
.mp-review-intro__text { color: var(--color-text); font-size: 0.9375rem; line-height: 1.9; }

.mp-tips-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); margin-top: var(--space-lg); }
.mp-tip { display: grid; gap: var(--space-2xs); justify-items: center; text-align: center; padding: var(--space-md); }
.mp-tip__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--color-tint-blue); color: var(--color-brand-blue); display: grid; place-items: center; }
.mp-tip__icon svg { width: 24px; height: 24px; }
.mp-tip__title { font-weight: 700; color: var(--color-navy); font-size: 0.9375rem; line-height: 1.6; }
.mp-tip__text { color: var(--color-text-muted); font-size: 0.8125rem; line-height: 1.7; }

.mp-review-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-lg); }
.mp-review-gallery figure { margin: 0; }
.mp-review-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--bg-blue); }
.mp-review-gallery figcaption { margin-top: var(--space-2xs); font-size: 0.8125rem; color: var(--color-text-muted); text-align: center; }
.mp-review-gallery__note { font-size: 0.8125rem; color: var(--color-text-muted); }

.mp-hint-chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.mp-hint-chip { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: var(--space-2xs) var(--space-md); min-height: 40px; background: var(--bg-white); border: 1px solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-brand-blue); font-size: 0.875rem; font-weight: 600; }
.mp-hint-chip svg { width: 15px; height: 15px; flex: none; }

.mp-review-example { background: var(--bg-blue); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-lg); margin-top: var(--space-lg); }
.mp-review-example__title { font-weight: 700; color: var(--color-navy); font-size: 0.9375rem; margin-bottom: var(--space-2xs); }
.mp-review-example__stars { color: var(--color-accent-ink); letter-spacing: 2px; margin-bottom: var(--space-xs); }
.mp-review-example__text { color: var(--color-text); font-size: 0.9375rem; line-height: 1.9; }
.mp-review-example__note { color: var(--color-text-muted); font-size: 0.8125rem; margin-top: var(--space-sm); }

.mp-review-cta { text-align: center; padding: var(--space-xl) var(--space-lg); }
.mp-review-cta .c-btn { min-width: min(420px, 100%); }
.mp-review-cta__meta { display: flex; align-items: center; justify-content: center; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-md); font-size: 0.8125rem; color: var(--color-text-muted); }
.mp-review-cta__meta span { display: inline-flex; align-items: center; gap: 4px; }

@media (max-width: 900px) {
  .mp-tips-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .mp-review-gallery { grid-template-columns: repeat(2, 1fr); }
  .mp-review-gallery figure:last-child { grid-column: 1 / -1; }
}