/* ==========================================================================
   デジタル庁デザインシステム（DADS）の規律に合わせた基盤スタイル
   - タイポグラフィ: Zen Kaku Gothic New（Wix版と同じ。2026-10-03 クライアント指定） / 14px未満は使用しない / 行間は最大175%
   - 余白: 8px を基準単位（ルート16pxで Tailwind の spacing がそのまま一致）
   - アクセシビリティ: WCAG 2.2 AA（コントラスト・フォーカス・ターゲットサイズ）
   ブランド要素（primary #3E85C5 / 見出しの明朝体）は意図的に維持している。
   ========================================================================== */

/* ルートは 18px 固定をやめ、利用者のブラウザ既定文字サイズを尊重する（100% = 通常16px）。
   本文は DADS の Std-17（17px / 行間170% / 字間2%）に合わせる。 */
html {
    font-size: 100%;
    /* sticky ヘッダー（スマホ64px / md以上96px）にアンカー先が隠れないようにする（WCAG 2.4.11） */
    scroll-padding-top: 5rem;
}
@media (min-width: 768px) {
    html { scroll-padding-top: 7rem; }
}

body {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 1.125rem;  /* 18px。クライアント指定で大きめに（2026-10-03） */
    font-weight: 500;     /* Zen Kaku Gothic New の400は線が細く、Wix版も本文は500 */
    color: #1c1917;
    overflow-x: hidden;
    line-height: 1.75;      /* DADS 175%（従来の1.8は規定の上限超過） */
    letter-spacing: 0.02em; /* DADS Standard 標準サイズ 2% */
}
h1, h2, h3, h4 {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.4; /* DADS 見出し 140%。個別のTailwind leading-* が優先される */
}

/* 本文の最終行に1〜2文字だけ残るのを避ける（共通ルール §4）。
   対応ブラウザでは自動で改行位置を調整してくれる。 */
p, li, figcaption {
    text-wrap: pretty;
}
/* スマホで文の途中（「ヒアリ／ング」など）で折り返さないようにする（design-rules §4、2026-10-03）。
   文節の切れ目には生成時に <wbr> が入っている（phrase_wrap.py）。
   keep-all：<wbr> 以外では折り返さない。break-word：1文節が1行に収まらないときだけ途中で折る */
body {
    word-break: keep-all;
    overflow-wrap: break-word;
    line-break: strict;
}

/* --------------------------------------------------------------------------
   フォーカス表示（WCAG 2.4.7 / 1.4.11）
   白背景でも primary 背景でも 3:1 以上を確保するため、
   暗いリングと白いリングを二重に描く。
   -------------------------------------------------------------------------- */
:focus-visible {
    outline: 3px solid #1c1917;
    outline-offset: 2px;
    border-radius: 2px;
    box-shadow: 0 0 0 5px #ffffff;
}
/* 暗い面の上では内外を反転させる */
.on-dark :focus-visible,
footer :focus-visible {
    outline-color: #ffffff;
    box-shadow: 0 0 0 5px #1c1917;
}

/* タップ領域の確保（WCAG 2.5.8 Target Size: 最小 24×24px）
   文中のリンクは例外だが、一覧として並ぶリンクは高さが足りないため余白で稼ぐ。 */
footer li > a,
footer p > a,
dd > a,
nav[aria-label="パンくずリスト"] a {
    display: inline-block;
    padding-block: 0.3125rem; /* 20px → 30px */
}

/* ヘッダー。白いヒーローと溶けないよう、地色を一段落とす。
   ナビ文字 #44403c はこの地色に対して 9.4:1、ロゴもそのまま使える。 */
/* 下線と影はオーナー指示で外した（2026-10-03「ヘッダーの線がいらない」） */
.site-header {
    background-color: rgba(238, 243, 248, 0.92);
}

/* メインコンテンツへのスキップリンク（WCAG 2.4.1） */
.skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 100;
    display: inline-block;
    padding: 0.75rem 1.25rem;
    background: #1c1917;
    color: #ffffff;
    font-size: 1.0625rem;
    font-weight: 700;
    border-radius: 0.5rem;
    transition: top 0.15s ease-out;
}
.skip-link:focus {
    top: 1rem;
}

.fade-in { animation: fadeIn 0.5s ease-out forwards; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* PCのナビ。ロゴ・お問い合わせボタンとの間を最低2.5remあける（2026-10-03 オーナー指示「近すぎる」）。
   1280〜1439pxは収まりきらないため、項目の間隔と文字を一段詰める */
.site-nav { gap: 1.25rem; margin-inline: 2.5rem; }
.site-nav .nav-link { font-size: 0.9375rem; flex-shrink: 0; }
@media (min-width: 1440px) {
    .site-nav { gap: 1.75rem; margin-inline: 3rem; }
    .site-nav .nav-link { font-size: 1rem; }
}
.nav-link {
    position: relative;
    font-weight: 700;
    font-size: 1rem; /* 16px */
    color: #44403c;      /* 白背景で10.3:1 */
    white-space: nowrap;
    transition: color 0.2s;
}
.nav-link:hover,
.nav-link[aria-current="page"] { color: #2E699F; } /* 5.77:1。従来の #3E85C5 は3.91:1で不足 */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: #2E699F;
    transition: width 0.25s;
}
.nav-link[aria-current="page"]::after,
.nav-link:hover::after { width: 100%; }

#mobile-menu-overlay {
    transition: opacity 0.3s ease-in-out, visibility 0.3s;
}
#mobile-menu-content {
    transition: transform 0.3s ease-in-out;
    transform: translateX(100%);
}
#mobile-menu-overlay:not(.invisible) {
    opacity: 1;
}
#mobile-menu-overlay:not(.invisible) #mobile-menu-content {
    transform: translateX(0);
}

/* 事業領域の一覧。カードで囲まず、区切り線だけで並べる（共通ルール §1） */
.service-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid #d6d3d1;
}
@media (min-width: 640px) {
    .service-list { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
}
.service-list__item {
    padding: 0.875rem 0;
    border-bottom: 1px solid #d6d3d1;
    font-weight: 700;
    color: #292524;
}

/* 地図の埋め込み。スマホでも高さが潰れないよう比率で確保する */
.map-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border: 1px solid #d6d3d1;
    overflow: hidden;
}
@media (min-width: 768px) {
    .map-embed { aspect-ratio: 16 / 7; }
}
.map-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.quote-mark {
    font-family: Georgia, serif;
    line-height: 0.5;
    opacity: 0.15;
}

/* メディア掲載実績。媒体名を文字で出すのが要点。
   リンクではないので、枠・影・ホバーの動きは付けない（共通ルール §1 / §2）。 */
.media-card {
    display: flex;
    flex-direction: column;
    margin: 0;
}
/* 画像は白い余白を削り、3:2・左上基準で切り出し直している（2026-10-03）。媒体名のラベルが左上に入っているため */
.media-card__shot {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    background: #f5f5f4;
}
.media-card__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.media-card__name {
    padding-top: 0.75rem;
    font-size: 1.0625rem;
    font-weight: 700;
    color: #292524;
    line-height: 1.5;
}
/* 2列になる狭い画面では「クローズアップ現代」「ゴールドオンライン」が1行に収まる大きさにする */
@media (max-width: 639px) { .media-card__name { font-size: 1rem; letter-spacing: 0; } }

/* ==========================================================================
   トップページ（モック構成）
   ========================================================================== */

/* 見出しの上のラベル。モックに合わせて短い罫線を添える */
.eyebrow {
    font-size: 1rem; /* 16px */
    font-weight: 700;
    letter-spacing: 0.22em;
    color: #2E699F;
    margin-bottom: 0.75rem;
}
.eyebrow--line {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.eyebrow--line::after {
    content: '';
    flex: none;
    width: 2rem;
    height: 1px;
    background: #8fa6bd;
}
/* 狭い画面では罫線の分だけ幅が足りず1文字が折り返すので、罫線を省く */
@media (max-width: 480px) {
    .eyebrow--line::after { display: none; }
}
.eyebrow--center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}
.eyebrow--center::before,
.eyebrow--center::after {
    content: '';
    width: 1.5rem;
    height: 1px;
    background: #8fa6bd;
}

/* ---- ヒーロー：写真を画面いっぱいに敷き、文字を白で重ねる（2026-10-03 オーナー指示） ----
   高さは「画面の高さ − ヘッダー（スマホ64px／PC96px）」。
   文字の下は紺のグラデーションで暗くし、白文字のコントラストを 4.5:1 以上に保つ */
.hero-section {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: calc(100svh - 4rem);
    color: #ffffff;
    overflow: hidden;
    background: #142448;
}
@media (min-width: 768px) {
    .hero-section { min-height: calc(100svh - 6rem); }
}
.hero-bg, .hero-bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.hero-bg img {
    object-fit: cover;
    object-position: 62% center;   /* スマホの縦長でも代表の顔が入る位置 */
}
/* 写真の上の暗幕。スマホは全体を、PCは文字のある左側を中心に暗くする */
.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    /* スマホは文字を下側に寄せるので、上（代表の顔）は明るく、下に向かって濃くする */
    background: linear-gradient(180deg, rgba(20, 36, 72, .15) 0%, rgba(20, 36, 72, .4) 22%, rgba(20, 36, 72, .8) 42%, rgba(20, 36, 72, .9) 100%);
}
/* 画面の低いスマホ（iPhoneでアドレスバーが出ている状態など）は見出しの位置が上がるため、
   暗くなり始める位置を上げて白文字を読めるようにする。上部（代表の顔）は明るいまま */
@media (max-width: 999px) and (max-height: 760px) {
    .hero-section::before {
        background: linear-gradient(180deg, rgba(20, 36, 72, .2) 0%, rgba(20, 36, 72, .45) 18%, rgba(20, 36, 72, .82) 32%, rgba(20, 36, 72, .9) 100%);
    }
}
@media (min-width: 1000px) {
    .hero-bg img { object-position: center 35%; }
    .hero-section::before {
        background: linear-gradient(90deg, rgba(20, 36, 72, .9) 0%, rgba(20, 36, 72, .82) 38%, rgba(20, 36, 72, .35) 68%, rgba(20, 36, 72, .1) 100%);
    }
}
.hero-content {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;   /* スマホは下寄せ。上の代表の顔に文字を重ねない */
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding: 2rem 1.25rem 1.5rem;
}
@media (min-width: 1000px) {
    .hero-content { justify-content: center; padding: 3rem 3rem 2rem; }
}
/* 画面が低いPC（1280×720 など）は、実績の数字まで1画面に収まるよう詰める */
@media (min-width: 1000px) and (max-height: 820px) {
    .hero-content { padding: 1.25rem 3rem 0.25rem; }
    .hero-title { font-size: 2.125rem !important; margin-bottom: 1.25rem !important; }
    .hero-stats-band { padding-top: 1.75rem !important; }
    .hero-stats strong { font-size: 3.5rem !important; }
}
.hero-content .eyebrow { color: #DCEBF8; margin-bottom: 1rem; }
/* スマホではラベルを画面に出さず、見出しから始める（2026-09-30 オーナー指定）。検索エンジンと読み上げソフトには残す */
@media (max-width: 999px) {
    .hero-content .eyebrow {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}
.hero-content .eyebrow--line::after { background: #A9CBEA; }
.hero-title {
    font-size: 1.5rem;          /* 1行目「不動産に起因する不幸をなくし」14字が360px幅で1行に収まる大きさ */
    line-height: 1.45;
    letter-spacing: 0.02em;
    color: #ffffff;
    margin-bottom: 1.75rem;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .25);
}
@media (max-width: 389px) { .hero-title { font-size: 1.375rem; } }
@media (min-width: 430px) { .hero-title { font-size: 1.625rem; } }
@media (min-width: 768px) { .hero-title { font-size: 2.25rem; } }
@media (min-width: 1000px) { .hero-title { font-size: 2.75rem; letter-spacing: 0.03em; margin-bottom: 2rem; } }
.hero-cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
}
.hero-cta .btn {
    min-height: 3.75rem;
    border-radius: 0.625rem;
    font-size: 1.125rem;
    justify-content: center;
}
.hero-cta .link-arrow { align-self: center; }
@media (min-width: 640px) {
    .hero-cta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
    .hero-cta .btn { border-radius: 999px; min-height: 3.25rem; }
    .hero-cta .link-arrow { white-space: nowrap; }
}

/* 実績の数字：写真の下端に紺の帯で重ねる */
.hero-stats-band {
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, rgba(20, 36, 72, 0) 0%, rgba(20, 36, 72, .9) 30%, rgba(20, 36, 72, .96) 100%);
    padding: 1.5rem 1.25rem 0.75rem;
}
@media (min-width: 1000px) {
    .hero-stats-band { padding: 3rem 3rem 1.25rem; }
}
.hero-stats {
    display: grid;
    grid-template-columns: auto 1fr;   /* 右の「ご紹介によるご依頼」が1行に収まるよう、左は中身の幅に */
    max-width: 80rem;
    margin: 0 auto;
}
@media (min-width: 1000px) {
    .hero-stats { grid-template-columns: auto auto; justify-content: start; }
}
.hero-stats__item { padding-right: 1rem; }
.hero-stats__item + .hero-stats__item { padding-left: 1rem; border-left: 1px solid rgba(255, 255, 255, .55); }
@media (min-width: 1000px) {
    .hero-stats__item { padding-right: 2.5rem; }
    .hero-stats__item + .hero-stats__item { padding-left: 2.5rem; }
}
.hero-stats dt, .hero-stats dd { white-space: nowrap; }
.hero-stats dt { font-size: 1rem; font-weight: 700; line-height: 1.4; margin-bottom: 0.125rem; }
.hero-stats dd { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1; }
.hero-stats strong { font-size: 3rem; font-weight: 900; letter-spacing: 0; margin-inline: 0.0625rem; }
@media (max-width: 389px) { .hero-stats strong { font-size: 2.625rem; } }
@media (min-width: 1000px) {
    .hero-stats dt { font-size: 1.25rem; margin-bottom: 0.25rem; }
    .hero-stats dd { font-size: 1.5rem; }
    .hero-stats strong { font-size: 4.5rem; }
}
.hero-note {
    max-width: 80rem;
    margin: 0.625rem auto 0;
    font-size: 1rem;
    color: #DCEBF8;
}

/* ---- 選ばれる3つの理由：空と街並みを敷く ---- */
.reasons {
    position: relative;
    padding: 4rem 0;
    background:
        linear-gradient(180deg, rgba(243,247,251,.985) 0%, rgba(235,242,249,.94) 50%, rgba(232,240,248,.99) 100%),
        url('/bg-building-cityscape.jpg') center bottom / cover no-repeat;
}
@media (min-width: 768px) {
    .reasons { padding: 6rem 0; }
}
.reason__no {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 2.25rem;
    font-weight: 700;
    color: #2E699F;
    line-height: 1;
    margin-bottom: 0.75rem;
}
.reason__title {
    font-size: 1.375rem;      /* 本文18pxと差をつける（2026-10-03） */
    font-weight: 700;
    color: #1c1917;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}
.reason__body {
    font-size: 1.0625rem;
    color: #44403c;
    line-height: 1.9;
}

/* ---- サービス：押せるカード（リンクなのでホバー可） ---- */
.bg-sky { background-color: #EEF3F8; }
/* ---- 選ばれる理由：一般的な不動産会社との比較（Wix版の内容。2026-10-03） ----
   背景の街並み写真の上で読みやすいよう、左右とも白い枠に入れ、上に見出しの帯を付けて対比させる
   （オーナー指示「枠がないのが見づらい」） */
.compare {
    display: grid;
    gap: 1.5rem;
}
/* 2列にすると1項目が1行に収まらないため、900px以上で横に並べる */
@media (min-width: 900px) {
    .compare { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
.compare__col {
    background: #ffffff;
    border: 1px solid #d6d3d1;
    padding: 0 1rem 1.5rem;
}
.compare__col--ours { border: 2px solid #2E699F; }
@media (min-width: 640px) { .compare__col { padding: 0 1.75rem 1.75rem; } }
/* 見出しの帯。枠の左右いっぱいに敷く */
.compare__head {
    font-size: 1.125rem;
    color: #ffffff;
    background: #78716c;
    text-align: center;
    padding: 0.75rem 1rem;
    margin: 0 -1rem 1.25rem;
}
@media (min-width: 640px) { .compare__head { margin-inline: -1.75rem; } }
.compare__col--ours .compare__head { background: #2E699F; }
.compare__lead {
    font-size: 1.375rem;
    font-weight: 700;
    color: #1c1917;
    line-height: 1.5;
    margin-bottom: 1.25rem;
}
.compare__list li {
    position: relative;
    padding-left: 1.75rem;
    line-height: 1.7;
    margin-bottom: 0.75rem;
    color: #292524;
}
.compare__list li:last-child { margin-bottom: 0; }
@media (max-width: 389px) {
    .compare__list li { font-size: 1rem; letter-spacing: 0; }
    .compare__lead { font-size: 1.25rem; }
}
.compare__list li::before {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
}
.compare__list--ng li::before { content: '×'; color: #78716c; }
.compare__list--ok li::before { content: '○'; color: #2E699F; }
.compare__closing {
    text-align: center;
    font-weight: 700;
    color: #1c1917;
    line-height: 1.9;
    margin-top: 2.5rem;
}

.service-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.875rem;
}
@media (min-width: 640px) {
    .service-grid { grid-template-columns: 1fr 1fr; }
}
.service-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 4.25rem;
    padding: 1rem 1.25rem;
    background: #ffffff;
    border: 1px solid #d6d3d1;
    border-radius: 0.5rem;
    font-weight: 700;
    color: #292524;
    transition: border-color .25s, color .25s, transform .25s;
}
.service-item svg {
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    color: #2E699F;
}
.service-item span { flex: 1; }
.service-item::after {
    content: '';
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-top: 2px solid #2E699F;
    border-right: 2px solid #2E699F;
    transform: rotate(45deg);
    transition: transform .25s;
}
@media (hover: hover) {
    .service-item:hover {
        border-color: #2E699F;
        color: #2E699F;
    }
    .service-item:hover::after { transform: rotate(45deg) translate(2px, -2px); }
}

/* ---- コンサルティング事例：写真つきの押せるカード ---- */
.case-card {
    display: flex;
    flex-direction: column;
    color: #292524;
    transition: color .25s;
}
.case-card__shot {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;   /* 人物写真なので正方形で顔が切れないようにする */
    overflow: hidden;
    border-radius: 0.5rem;
    background: #f5f5f4;
    margin-bottom: 1rem;
}
.case-card__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    display: block;
    transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.case-card__label {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: #2E699F;
    margin-bottom: 0.5rem;
}
.case-card__body {
    display: block;
    font-size: 1.0625rem;
    color: #44403c;
    line-height: 1.9;
}
@media (hover: hover) {
    .case-card:hover .case-card__shot img { transform: scale(1.04); }
    .case-card:hover .case-card__label { text-decoration: underline; text-underline-offset: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .case-card__shot img { transition: none; }
    .case-card:hover .case-card__shot img { transform: none; }
}

/* スマホでは写真を左・文章を右に並べ、3件が縦に長くなりすぎないようにする（2026-10-03 オーナー指示「モバイルで見づらい」） */
@media (max-width: 767px) {
    .case-card {
        display: grid;
        grid-template-columns: 6.5rem 1fr;
        grid-template-rows: auto 1fr;
        column-gap: 1rem;
        align-items: start;
    }
    .case-card .case-card__shot {
        grid-row: 1 / 3;
        max-width: none;
        margin: 0;
        aspect-ratio: 3 / 4;
    }
    .case-card__label { margin-bottom: 0.375rem; }
    .case-card__body { font-size: 1rem; line-height: 1.8; }
}

/* スマホでは3行以上になる中央揃えの文を左揃えにする（中央揃えの長文は行頭が毎行ずれて読みにくいため） */
@media (max-width: 767px) {
    .sp-left { text-align: left; }
}

/* ---- 最終CTA：濃紺の上に街並みを薄く敷く ---- */
.final-cta {
    position: relative;
    padding: 4rem 0;
    background:
        linear-gradient(180deg, rgba(46,105,159,.94) 0%, rgba(40,91,137,.97) 100%),
        url('/bg-building-cityscape.jpg') center bottom / cover no-repeat;
}
@media (min-width: 768px) {
    .final-cta { padding: 6rem 0; }
}

.faq-filter-btn {
    min-height: 2.75rem; /* 44px */
    padding: 0.5rem 1.25rem;
    border-radius: 999px;
    font-size: 1rem;       /* 16px */
    font-weight: 700;
    border: 1px solid #78716c; /* 従来 #bfdbfe は1.42:1で境界が見えない */
    background: #fff;
    color: #44403c;
    transition: background .2s, color .2s, border-color .2s;
    cursor: pointer;
}
.faq-filter-btn:hover { background: #eff6ff; color: #2E699F; }
.faq-filter-btn[aria-pressed="true"] {
    background: #2E699F; /* 白文字で5.77:1。従来 #3E85C5 は3.91:1 */
    color: #fff;
    border-color: #2E699F;
}

/* ==========================================================================
   社長メッセージページ
   ========================================================================== */

/* ---- ヒーロー：左にコピー、右に代表の写真 ---- */
.msg-hero {
    background: linear-gradient(180deg, #F3F7FB 0%, #E8F0F8 100%);
    overflow: hidden;
}
.msg-hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
}
.msg-hero__copy { padding: 2rem 1.5rem; }
/* 強みページの見出し2行目「ーそう思ってもらいたい。」 */
.msg-hero__title-sub {
    display: block;
    font-size: 0.6em;
    color: #44403c;
    margin-top: 0.5rem;
}
.msg-hero__title {
    font-size: 1.875rem;
    line-height: 1.4;
    color: #1c1917;
    margin-bottom: 1rem;
}
.msg-hero__lead {
    color: #44403c;
    line-height: 1.9;
}
.msg-hero__visual { position: relative; }
.msg-hero__visual video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 16 / 10;
}
.msg-hero__visual picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
    aspect-ratio: 16 / 10;
}
/* 氏名・肩書きは写真の上に重ねず、読みやすい帯として写真の下辺に置く */
.msg-hero__name {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.625rem 0.875rem;
    background: rgba(255, 255, 255, .92);
    border-radius: 0.375rem;
    text-align: right;
}
.msg-hero__role { font-size: 1rem; color: #44403c; }
.msg-hero__person {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: #1c1917;
}
.msg-hero__license { font-size: 1rem; color: #57534e; line-height: 1.6; }
/* スマホでは帯が顔に重なるため、写真の下に置く（2026-10-03 文字を大きくした際に発生） */
@media (max-width: 999px) {
    .msg-hero__name {
        position: static;
        background: #ffffff;
        border-radius: 0;
        text-align: left;
        padding: 1rem 1.5rem;
    }
}
@media (min-width: 1000px) {
    .msg-hero__inner { grid-template-columns: 1fr 1fr; min-height: 28rem; }
    /* 文字の左端をパンくず（max-w-5xl＋px-4）の左端にそろえる（2026-10-03 オーナー指示）。
       写真側に寄せると列の左が大きく空き、左右の端もそろわないため */
    .msg-hero__copy {
        justify-self: stretch;
        padding: 3.5rem 3rem 3.5rem max(1rem, calc(50vw - 32rem + 1rem));
    }
    .msg-hero__title { font-size: 3rem; margin-bottom: 1.5rem; }
    .msg-hero__visual { align-self: stretch; }
    .msg-hero__visual picture img,
    .msg-hero__visual video { height: 100%; aspect-ratio: auto; }
    .msg-hero__name { right: 2rem; bottom: 2rem; }
}
@media (min-width: 1000px) and (max-width: 1299px) {
    .msg-hero__title { font-size: 2.5rem; }
}

/* ---- 章立て（01 ORIGIN / 02 PHILOSOPHY / 03 PROMISE）---- */
.chapter {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .chapter { grid-template-columns: 8rem 1fr; gap: 3rem; }
}
.chapter__mark {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}
@media (min-width: 768px) {
    .chapter__mark { flex-direction: column; gap: 0.25rem; }
}
.chapter__no {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    color: #2E699F;
}
.chapter__label {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #57534e;
}
.chapter__title {
    font-size: 1.375rem;  /* 360px幅でも「父の経験が、私の原点です。」が1行に収まる */
    line-height: 1.5;
    color: #1c1917;
    margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
    .chapter__title { font-size: 2rem; margin-bottom: 2rem; }
}

.prose > p { color: #44403c; line-height: 2; margin-bottom: 1.5rem; }
.prose > p:last-child { margin-bottom: 0; }
.prose__emphasis {
    color: #2E699F !important;
    font-weight: 700;
}
.prose__closing {
    margin-top: 2.5rem;
    color: #44403c;
    line-height: 2;
}

/* ---- 理念 ---- */
.philosophy {
    background: #E8F0F8;
    padding: 4rem 0;
}
@media (min-width: 768px) { .philosophy { padding: 5.5rem 0; } }
.philosophy__quote {
    position: relative;
    margin: 0;
    padding-left: 3rem;
}
.philosophy__mark {
    position: absolute;
    left: 0;
    top: -0.75rem;
    font-family: Georgia, serif;
    font-size: 5rem;
    line-height: 1;
    color: #2E699F;
    opacity: .22;
}
.philosophy__quote p {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1.7;
    color: #1c1917;
}
@media (min-width: 768px) {
    .philosophy__quote p { font-size: 2rem; }
    .philosophy__mark { font-size: 7rem; }
}
.philosophy__caption {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 1.75rem;
    font-size: 1.0625rem;
    color: #44403c;
}
.philosophy__caption::before,
.philosophy__caption::after {
    content: '';
    width: 1.25rem;
    height: 1px;
    background: #8fa6bd;
}
@media (min-width: 640px) {
    .philosophy__caption::before,
    .philosophy__caption::after { width: 2.5rem; }
}
.philosophy__note {
    margin-top: 1.75rem;
    color: #44403c;
    line-height: 2;
}

/* ---- お約束 ---- */
.promise-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}
@media (min-width: 900px) {
    .promise-layout { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
.promise-photo { margin: 0; }
.promise-photo img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.5rem;
}
.promise-photo figcaption {
    margin-top: 0.75rem;
    font-size: 1rem;
    color: #57534e;
}
.promise-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.promise {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid #d6d3d1;
}
.promise:first-child { padding-top: 0; }
.promise:last-child { border-bottom: 0; }
.promise__no {
    flex: none;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
    color: #2E699F;
}
.promise__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1c1917;
    margin-bottom: 0.5rem;
}
.promise__body {
    font-size: 1.0625rem;
    color: #44403c;
    line-height: 1.9;
}

/* ==========================================================================
   下層ページ共通（事例 / 強み / 会社概要 / 採用）
   ========================================================================== */

/* ヒーローの小見出し（ページ名） */
.msg-hero__kicker {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    color: #1c1917;
    margin-bottom: 0.75rem;
}
@media (min-width: 1000px) {
    .msg-hero__kicker { font-size: 1.375rem; margin-bottom: 1rem; }
}

/* ---- コンサルティング事例 ---- */
.case-block { padding: 3rem 0; }
.case-block--alt { background: #EEF3F8; }
@media (min-width: 768px) { .case-block { padding: 4.5rem 0; } }

.case-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1.5rem;
}
.case-head__mark {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding-right: 1.5rem;
    border-right: 1px solid #b7c7d8;
}
.case-head__label {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #57534e;
}
.case-head__no {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: #2E699F;
}
.case-head__meta { display: flex; flex-direction: column; gap: 0.25rem; }
.case-head__category { font-size: 1rem; font-weight: 700; color: #2E699F; }
.case-head__person { font-size: 1.0625rem; font-weight: 700; color: #292524; }

.case-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 2rem;
}
@media (min-width: 900px) {
    .case-main { grid-template-columns: 1fr 22rem; gap: 3rem; }
}
.case-title {
    font-size: 1.25rem;       /* 20px。360px幅で各行が折り返さない大きさ */
    line-height: 1.6;
    color: #1c1917;
}
@media (min-width: 768px) { .case-title { font-size: 2rem; } }
.case-photo { margin: 0; }
.case-photo img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.5rem;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center 25%;
}

/* お客様の声（Wix版の文面をそのまま。2026-10-03） */
.case-voice {
    max-width: 48rem;
    border-left: 3px solid #3E85C5;
    padding-left: 1.5rem;
}
.case-voice__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #2E699F;
    margin-bottom: 0.625rem;
}
.case-voice__body {
    color: #292524;
    line-height: 2;
}
.case-note {
    max-width: 64rem;
    margin: 0 auto;
    padding: 0 1.5rem 3rem;
    font-size: 1rem;
    color: #57534e;
    line-height: 1.8;
    text-align: center;
}

/* ---- ミライスマイの強み ---- */
/* 「ミライスマイが選ばれる3つの理由」の見出し（Wix版の見出し。2026-10-03） */
/* 強みページ「ミライスマイの3つの強み」。直前の「不幸をなくすために」の続きとして白地に置き、
   縦の罫線で区切る。次の「選ばれる3つの理由」（写真つきの章立て）と見え方を変えるため（2026-10-03） */
.strong-points__title {
    font-size: 1.375rem;
    color: #2E699F;
    padding-top: 2.5rem;
    border-top: 1px solid #d6d3d1;
    margin-bottom: 1.5rem;
}
@media (min-width: 768px) { .strong-points__title { font-size: 1.625rem; } }
.strong-points { display: grid; gap: 1.75rem; }
@media (min-width: 768px) {
    .strong-points { grid-template-columns: repeat(3, 1fr); gap: 0; }
    .strong-points > .reason { padding: 0 2rem; border-left: 1px solid #d6d3d1; }
    .strong-points > .reason:first-child { padding-left: 0; border-left: 0; }
}
.strength-heading {
    background: #ffffff;
    text-align: center;
    font-size: 1.5rem;
    color: #292524;
    padding: 4rem 1.5rem 2rem;
    margin: 0;
}
@media (min-width: 768px) {
    .strength-heading { font-size: 2.25rem; padding-top: 6rem; }
}
.strength-index {
    background: #ffffff;
    border-bottom: 1px solid #d6d3d1;
}
.strength-index ol {
    list-style: none;
    margin: 0;
    padding-block: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 2.5rem;
}
.strength-index a {
    display: inline-flex;
    align-items: baseline;
    gap: 0.625rem;
    padding-block: 0.375rem;
    font-weight: 700;
    color: #44403c;
    transition: color .25s;
}
.strength-index a span {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    color: #2E699F;
}
@media (hover: hover) { .strength-index a:hover { color: #2E699F; } }

.strength { padding: 3rem 0; }
@media (min-width: 768px) { .strength { padding: 4.5rem 0; } }
.strength--alt { background: #EEF3F8; }
.strength__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}
@media (min-width: 900px) {
    .strength__inner { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
    .strength--reverse .strength__photo { order: 2; }
}
.strength__photo { margin: 0; }
.strength__photo img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.5rem;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.strength__photo figcaption {
    margin-top: 0.75rem;
    font-size: 1rem;
    color: #57534e;
}
.strength__no {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: #a3b7cc;
    margin-bottom: 0.75rem;
}
.strength__title {
    font-size: 1.375rem;
    line-height: 1.6;
    color: #1c1917;
    margin-bottom: 1.25rem;
}
@media (min-width: 768px) { .strength__title { font-size: 1.875rem; } }
.strength__text { color: #44403c; line-height: 2; }
.strength__tags {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}
.strength__tags li {
    padding: 0.375rem 1rem;
    border: 1px solid #8fa6bd;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    color: #2E699F;
    background: #ffffff;
}
.strength__flow {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    color: #44403c;
}
.strength__flow li + li::before {
    content: '';
    display: inline-block;
    width: 1.5rem;
    height: 1px;
    background: #8fa6bd;
    margin-right: 0.75rem;
    vertical-align: middle;
}

/* 事業領域のカード（リンクではないのでホバーは付けない） */
.service-card {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: #ffffff;
    border: 1px solid #d6d3d1;
    border-radius: 0.5rem;
}
.service-card svg { flex: none; width: 1.75rem; height: 1.75rem; color: #2E699F; }
.service-card h3 { font-size: 1.1875rem; font-weight: 700; color: #1c1917; margin-bottom: 0.5rem; }
.service-card p { font-size: 1.0625rem; color: #44403c; line-height: 1.9; }

/* ---- 会社案内：ビジョン（Wix版の4項目。2026-10-03） ---- */
.vision-list { display: grid; gap: 2.5rem; }
@media (min-width: 768px) {
    .vision-list { grid-template-columns: 1fr 1fr; gap: 3rem 3.5rem; }
}
.vision { display: flex; flex-direction: column; gap: 0.5rem; }
@media (min-width: 640px) { .vision { flex-direction: row; gap: 1.25rem; } }
.vision__no {
    flex: none;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: #2E699F;
    padding-top: 0.25rem;
}
.vision__tag { font-size: 1rem; font-weight: 700; color: #57534e; margin-bottom: 0.25rem; }
.vision__title { font-size: 1.25rem; color: #1c1917; line-height: 1.5; margin-bottom: 0.75rem; }
.vision__body { color: #44403c; line-height: 1.9; }

/* ---- 会社案内：事業内容。枠で囲まず罫線で区切る ---- */
.business-list { border-top: 1px solid #c9d6e3; }
.business-list > div {
    display: grid;
    gap: 0.25rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid #c9d6e3;
}
@media (min-width: 768px) {
    .business-list > div { grid-template-columns: 15rem 1fr; gap: 2rem; }
}
.business-list dt { font-weight: 700; color: #1c1917; }
.business-list dd { margin: 0; color: #44403c; line-height: 1.9; }

/* ---- 会社概要 ---- */
.philosophy__statement {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1.8;
    color: #1c1917;
}
@media (min-width: 768px) { .philosophy__statement { font-size: 2rem; } }

.profile {
    margin: 0;
    border-top: 1px solid #d6d3d1;
}
.profile__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.25rem;
    padding: 1rem 0;
    border-bottom: 1px solid #d6d3d1;
}
@media (min-width: 640px) {
    .profile__row { grid-template-columns: 11rem 1fr; gap: 1.5rem; align-items: start; }
}
.profile__row dt {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #292524;
}
.profile__row dd {
    margin: 0;
    font-size: 1.0625rem;
    color: #44403c;
    line-height: 1.9;
}

/* ---- 採用 ---- */
.job-points {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) { .job-points { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
.job-point { display: flex; gap: 1rem; }
.job-point svg { flex: none; width: 2rem; height: 2rem; color: #2E699F; }
.job-point h3 { font-size: 1.0625rem; font-weight: 700; color: #2E699F; margin-bottom: 0.5rem; }
.job-point p { font-size: 1.0625rem; color: #44403c; line-height: 1.9; }

.culture-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 768px) {
    .culture-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    .culture-card--wide { grid-column: 1 / -1; }
}
.culture-card { margin: 0; }
.culture-card img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.5rem;
}

/* 元素材の解像度が低い写真は、表示幅を実解像度に合わせて滲みを防ぐ。
   （事例のお客さま写真 338〜502px / 働き方の写真 514〜518px）*/
.case-card__shot { max-width: 17rem; margin-inline: auto; }
@media (min-width: 900px) {
    .case-main { grid-template-columns: 1fr 17rem; }
}
.culture-grid { max-width: 56rem; margin-inline: auto; }

/* ==========================================================================
   ボタン（ホバーで塗りが左からスライドインし、色が反転する）
   - 反転後も本文コントラスト 4.5:1 以上を保つ配色だけを使う
   - 動きはホバー可能な環境に限定し、prefers-reduced-motion では止める
   ========================================================================== */
.btn {
    position: relative;
    isolation: isolate;   /* ::before を背景の上・文字の下に置くための重ね合わせ文脈 */
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* gap は使わない。ラベルが複数の要素に分かれている場合に
       文字の間にまで隙間が入ってしまうため、間隔は矢印側で取る。 */
    min-height: 2.75rem;  /* 44px。ターゲットサイズに余裕を持たせる */
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 700;
    text-align: center;
    transition: color .35s cubic-bezier(.4,0,.2,1),
                border-color .35s cubic-bezier(.4,0,.2,1),
                background-color .35s cubic-bezier(.4,0,.2,1);
}
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .35s cubic-bezier(.4,0,.2,1);
}

/* .btn は position:relative を敷くが、固定配置のボタン（追従お問い合わせ）は
   Tailwind の .fixed を優先させる。 */
.btn.fixed { position: fixed; }

/* アイコン＋ラベルの間隔。ラベルが sr-only のときは絶対配置でフレックス項目に
   ならないため、gap は自動的に効かなくなる（狭い画面でアイコンが中央に収まる）。 */
#floating-contact-btn { gap: 0.5rem; }

/* 塗りボタン: primary-dark → 白へ反転（文字は primary-dark で 5.77:1） */
.btn-primary {
    background-color: #2E699F;
    border-color: #2E699F;
    color: #ffffff;
}
.btn-primary::before { background-color: #ffffff; }

/* 白ボタン: 色面の上に置く。白 → primary-dark へ反転（枠は白のまま残して輪郭を保つ） */
.btn-invert {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #2E699F;
}
.btn-invert::before { background-color: #2E699F; }

/* 追従お問い合わせボタンは、ヒーローを読み終えてから現れる。
   ヒーロー内のCTAと重なって押し間違いを誘発しないようにするため。 */
#floating-contact-btn {
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.5rem);
    transition: opacity .25s, visibility .25s, transform .25s;
}
#floating-contact-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    #floating-contact-btn { transition: none; transform: none; }
    #floating-contact-btn.is-visible { transform: none; }
}

/* 角丸を抑えたい箇所（フッターの小さいボタンなど）用 */
.btn--square { border-radius: 0.5rem; }

/* 丸い矢印。ボタンの反転に合わせて中と外の色が入れ替わる */
.btn-arrow {
    flex: none;
    margin-left: 0.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 999px;
    transition: background-color .35s cubic-bezier(.4,0,.2,1),
                color .35s cubic-bezier(.4,0,.2,1),
                transform .35s cubic-bezier(.4,0,.2,1);
}
.btn-arrow svg { width: 0.875rem; height: 0.875rem; display: block; }
.btn-primary .btn-arrow { background-color: #ffffff; color: #2E699F; }
.btn-invert  .btn-arrow { background-color: #2E699F; color: #ffffff; }

/* ホバーできる環境だけで塗りを走らせる（タップ端末でホバーが residual に残るのを防ぐ） */
@media (hover: hover) {
    .btn:hover::before { transform: scaleX(1); }
    .btn-primary:hover { color: #2E699F; }
    .btn-primary:hover .btn-arrow { background-color: #2E699F; color: #ffffff; transform: translateX(3px); }
    .btn-invert:hover { color: #ffffff; border-color: #ffffff; }
    .btn-invert:hover .btn-arrow { background-color: #ffffff; color: #2E699F; transform: translateX(3px); }
}
/* キーボード操作でも同じ状態が見えるようにする */
.btn:focus-visible::before { transform: scaleX(1); }
.btn-primary:focus-visible { color: #2E699F; }
.btn-primary:focus-visible .btn-arrow { background-color: #2E699F; color: #ffffff; }
.btn-invert:focus-visible { color: #ffffff; border-color: #ffffff; }
.btn-invert:focus-visible .btn-arrow { background-color: #ffffff; color: #2E699F; }

/* 矢印付きのテキストリンク */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: #57534e;
    border-bottom: 1px solid #d6d3d1;
    padding-bottom: 0.25rem;
    transition: color .3s, border-color .3s;
}
.link-arrow svg {
    width: 0.875rem;
    height: 0.875rem;
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}
@media (hover: hover) {
    .link-arrow:hover { color: #2E699F; border-color: #2E699F; }
    .link-arrow:hover svg { transform: translateX(4px); }
}
.link-arrow:focus-visible { color: #2E699F; border-color: #2E699F; }

/* 暗い面（最終CTAなど）に置くテキストリンク。
   .link-arrow より後ろ、かつ詳細度を上げて確実に上書きする。 */
.link-arrow.link-arrow--light {
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, .75); /* 非テキスト3:1を満たす濃さ */
}
.link-arrow.link-arrow--light svg { color: #ffffff; }
@media (hover: hover) {
    .link-arrow.link-arrow--light:hover {
        color: #DCEBF8;
        border-bottom-color: #DCEBF8;
    }
}
.link-arrow.link-arrow--light:focus-visible {
    color: #DCEBF8;
    border-bottom-color: #DCEBF8;
}

/* 動きを減らす設定のユーザーには、マーキー・フェードインを止める */
/* ---- 規約・ポリシーなどの本文ページ ---- */
.legal > p {
    color: #44403c;
    line-height: 2;
    margin-bottom: 1.5rem;
}
.legal h2 {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #292524;
    line-height: 1.6;
    margin-top: 3.5rem;
    margin-bottom: 1rem;
}
@media (max-width: 389px) { .legal h2 { font-size: 1.125rem; } }
@media (min-width: 768px) { .legal h2 { font-size: 1.375rem; } }
.legal > ul {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}
.legal > ul > li {
    position: relative;
    padding-left: 1.25rem;
    color: #44403c;
    line-height: 1.9;
    margin-bottom: .5rem;
}
.legal > ul > li::before {
    content: "";
    position: absolute;
    left: .25rem;
    top: .8em;
    width: .3125rem;
    height: .3125rem;
    border-radius: 50%;
    background: #2E699F;
}
.legal a {
    color: #2E699F;
    text-decoration: underline;
    text-underline-offset: .25em;
}
.legal a:hover { color: #285B89; }
.legal .profile { margin-bottom: 1.5rem; }
.legal__date {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e7e5e4;
    font-size: 1rem;
    color: #57534e;
}

@media (prefers-reduced-motion: reduce) {
    .fade-in {
        animation: none;
    }
    .skip-link { transition: none; }
    /* 塗りのスライドは使わず、色だけ即座に切り替える（ホバーの手応えは残す） */
    .btn::before { transition: none; }
    .btn, .btn-arrow, .link-arrow, .link-arrow svg { transition: none; }
    .btn-primary:hover .btn-arrow,
    .btn-invert:hover .btn-arrow,
    .link-arrow:hover svg { transform: none; }
}