@charset "UTF-8";
/* ▼2026-07-12 R17・R18 変更まとめ
   R17 リスト（li）の行頭マークを「#」に統一（標準8・サイト全
       ページ共通）。本文（.text-wrap）と注意書き（.note）内の
       ul/li に適用。フッターのメニュー（.f-nav）はリンクの
       ため対象外。
   R18 配色を置換マップ2026-07-11の採用色に更新
       ・フッター緑 #007A45→#00884A（白文字4.54:1）
       ・タブ選択色・送信ボタン・チェックの緑も#00884Aに統一
       ・コピーライト帯 #FF6411→#FF610D
         （帯の上の文字は#2C2C2Cのまま維持＝置換マップの例外）
       ・タブ文字 #2C2C2C→#444444
       ・.note内の緑文字 #007A45→#008147（文字用の採用緑）
       これで物件一覧（Slist）とフッターの色が完全に一致します */
/* ▼2026-07-11 R16 監査対応まとめ(スキルmeiwa-seo-audit-login)
   ・R15の「PC本文拡大」2行がメディアクエリの外に漏れて
     全画面幅に効いていた不具合を修正(min-width:768px内へ移動)
   ・.text-wrapの900px拡大を取りやめ、720px基準へ復帰
     (共通実装標準1:本文コンテナ720px以下。
      PC本文22px×約32字/行=基準30〜40字の範囲内)
   ・タブ間・お問い合わせ画像間のgapを6px→8px(基準:8px以上)
     ※一覧(Slist)側も8pxへの統一を推奨
   ・.note内の緑文字#319A63(16pxでは3.2:1不合格)を
     #007A45太字(4.9:1合格)に変更
   ・幅375px以下のセーフティネットCSSを新設(共通実装標準3)
   ・未使用の.lead一式を削除(HTML側に該当要素なし) */
/* ▼2026-07-10 R11 変更まとめ
   ・文字コードをUTF-8化(Shift_JIS化していたものを復元)
   ・カード2枚の左上も丸角に(border-top-left-radius:0 を廃止)
   ・.br-sp をスマホで有効化(Copyright等の改行が効かなかった不具合修正)
   ・フッターの訪問済みリンクを白 #FFFFFF に
   ・スマホのフッター住所を14px→16px、15px箇所(.note等)も16pxへ
   ・「初めての方はこちら」の太字を明示
   ・TOPへ戻るリンク #008CE3/訪問済 #FF0099/アクティブ #FF0901
   ・スマホの上下余白を圧縮(ファーストビュー対策) */
/* ================================================================
   かんたんログインページ 専用CSS(login-new.css)
   ▼2026-07-10 全面改訂
   ▼今回の変更点(R番号)
   R1 「必須」バッジを枠線タイプに変更
      (白地に赤文字#B71C1C・角丸。赤ベタ白抜きを廃止)
   R2 PCはヘッダーを全幅表示のまま、下のログイン欄は
      タブ切替をやめて2枚のカードを横並びに常時表示
      (ファーストビュー対策)
   R3 フォーム2枚をタブ切替に(ファーストビュー対策・JS連動)
   R4 全体の上下余白を圧縮(ファーストビュー対策)
   R5 フッターを物件一覧ページと同じ構成に差し替え
   R6 コピーライト帯 #FF610D+濃文字#2C2C2C(一覧と統一)
   R7 「お名前の記憶について」の注意書き(.note)
   R8 ご案内チャットボット追加(本体は login-chat.js・紫)
   ▼守ってほしい数値基準(微調整のときの下限・上限)
   ・本文の文字サイズ【16px以上】(Googleモバイル推奨)
   ・入力欄の文字サイズ【16px以上】
     ...16px未満にするとiPhoneで入力時に画面が勝手に
       ズームされます(現在18px)
   ・ボタン・リンク等のタップ領域【48×48px以上】
     (Google推奨。WCAG2.2の絶対最低は24px)
   ・隣り合うボタン同士の間隔【8px以上】
   ・文字色のコントラスト【4.5:1以上】
     ボタンの枠線など部品は【3:1以上】(WCAG AA)
     ※このページの実背景はクリーム#FFF3DBなので、
       白背景ではなくクリーム背景で計算すること
   ・行間 line-height【1.5以上】(本文は1.7)
   ・本文1行の文字数:スマホは全角25文字まで(理想20文字前後)、
     PCは全角30〜40文字(長くても45文字まで)。
     本文コンテナ最大幅は【720px以下】とセットで守る
   ・画像にはwidth/heightを書く...CLS(表示のガタつき)を
     【0.1以下】に保つため
   ・スライド1枚目はloading="lazy"を付けない
     ...LCP(最大表示要素の表示時間)【2.5秒以内】のため
   ・320pxの画面幅でも横スクロールを出さない
   ================================================================ */
/* ---- 基本 ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* 「視差効果を減らす」設定の人にはアニメを止める(WCAG配慮) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0 auto;
  padding: 0;
  background: #FFE6B3;              /* 外側の背景 */
  color: #252525;                   /* 本文色 コントラスト13.9:1 */
  font-family: "Helvetica Neue", Arial,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: 18px;                  /* 【16px未満にしない】 */
  line-height: 1.7;                 /* 【1.5未満にしない】 */
  -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; height: auto; vertical-align: middle; }
#container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 4px;
  background: #FFF3DB;              /* 実背景(計算の基準色) */
}
/* リンク色 #0066CC=クリーム背景で5.06:1(4.5:1以上を維持) */
a { color: #0066CC; font-weight: bold; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
/* キーボード操作時のフォーカス枠。
   outline:none で消すのは禁止(WCAG 2.4.7) */
:focus-visible { outline: 3px solid #0B57A5; outline-offset: 2px; }
/* キーボード用のスキップリンク(通常は画面外) */
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus {
  position: fixed; left: 8px; top: 8px; z-index: 1000;
  background: #003399; color: #fff;
  padding: 12px 18px; border-radius: 8px;
}
/* ---- ヘッダー(スライドショー+見出し) ------------------------ */
/* ▼2026-07-10 R2改訂 PCではヘッダーを全幅のまま、
   下のログイン欄を2枚横並びにする(下のPC用参照) */
.slides { display: grid; }
/* ★headerlogin.jpgの実寸が分かったら下の1行の数字を直して
   有効化するとCLS(ガタつき)が完全にゼロになります。
   例:幅1000px・高さ280pxの画像なら aspect-ratio: 1000 / 280;
.slides { aspect-ratio: 1000 / 280; }
*/
.slides img {
  grid-area: 1 / 1;                 /* 4枚を同じ場所に重ねる */
  width: 100%;
  height: auto;
  border-radius: 10px;
  opacity: 0;
  transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
  .slides img { transition: none; }
}
.slides img.active { opacity: 1; }
#header h1 {
  margin: 4px 0 0;                  /* R4 余白圧縮 */
  color: #444444;                   /* コントラスト8.0:1 */
  font-size: 26px;
  line-height: 1.3;
  text-align: center;
}
/* ▼2026-07-11 R16 未使用の.leadを削除
   (HTML側に class="lead" の要素なし。復活させる場合は
    色#319A63のため【22px以上の太字専用】を厳守すること) */
/* ---- タブ(初めての方/2回目以降) ----------------------------- */
/* ▼2026-07-10 R3
   JSが動いたときだけ表示(HTML側は hidden 属性つき)。
   タブの文字も【16px以上】、高さ【48px以上】を守る */
.login-tabs {
  display: flex;
  gap: 8px;                         /* ▼2026-07-11 R16 6px→8px
                                       【8px未満にしない】 */
  max-width: 480px;
  margin: 0 auto;
  padding: 0 2px;
}
.tab {
  flex: 1 1 50%;
  min-height: 48px;                 /* 【48px未満にしない】 */
  padding: 8px 4px;
  background: #F2E3C2;              /* 非選択タブ(文字8.4:1) */
  color: #444444;                   /* ▼2026-07-12 R18 #2C2C2C→ */
  border: 1px solid #767676;        /* 部品の枠線 4.1:1(3:1以上) */
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  font-family: inherit;
  font-size: 16px;                  /* 【16px未満にしない】 */
  font-weight: bold;
  cursor: pointer;
}
.tab.tab-on {
  background: #00884A;              /* ▼2026-07-12 R18 選択タブ
                                       #007A45→#00884A(白文字4.54:1) */
  color: #fff;
  border-color: #00884A;
}
/* タブ表示中はカード内の見出しを隠す(タブと二重になるため)
   JSが無いときは .js-tabs が付かないので見出しが出る */
.js-tabs .card-head { display: none; }
/* ▼2026-07-10 R11 左上も丸角に統一
   (旧: .js-tabs .login-card { border-top-left-radius: 0; }) */
/* ---- ログインカード・フォーム ---------------------------------- */
.login-card {
  max-width: 480px;                 /* フォーム幅の上限(読みやすさ) */
  margin: 0 auto 10px;              /* R4 余白圧縮 */
  padding: 12px 14px 10px;          /* R4 余白圧縮 */
  background: #fff4ea;
  border: 1px solid #FEC25E;
  border-radius: 10px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.29);
  text-align: left;
}
.card-head {
  margin: 0 0 2px;
  color: #319A63;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
/* ▼2026-07-10 R11 「初めての方はこちら」を太字に(タブ・見出し両方) */
#tabFirst, #panelFirst .card-head { font-weight: bold; }
.again-hello {
  margin: 0 0 2px;
  font-size: 16px;  /* ▼R11 16px基準 */
  text-align: center;
}
.field { margin: 0 0 2px; }
.field label {
  display: block;
  margin: 6px 0 3px;                /* R4 余白圧縮 */
  font-size: 16px;                  /* 【16px未満にしない】 */
  font-weight: bold;
}
/* ▼2026-07-10 R1 「必須」バッジ:枠線タイプに変更
   白地に赤文字#B71C1C=6.5:1(4.5:1以上)
   枠線もカード地に対して6.0:1(3:1以上) */
.req {
  display: inline-block;
  margin-left: 6px;
  padding: 0 7px;
  background: #FFFFFF;
  color: #B71C1C;
  border: 1px solid #B71C1C;
  border-radius: 6px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.6;
  vertical-align: 2px;
}
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"] {
  width: 100%;
  min-height: 48px;                 /* 【48px未満にしない】 */
  padding: 8px 12px;
  border: 1px solid #767676;        /* 枠線4.1:1(3:1以上) */
  border-radius: 8px;
  background: #FFFFFF;
  color: #252525;
  font-size: 18px;                  /* 【16px未満にしない】
                                       iPhoneの自動ズーム防止 */
  font-family: inherit;
}
.field input[aria-invalid="true"] { border: 2px solid #B71C1C; }
/* エラー文字 #B71C1C=クリーム背景で6.0:1(4.5:1以上) */
.f-err {
  margin: 4px 0 0;
  color: #B71C1C;
  font-size: 16px;  /* ▼R11 16px基準 */
  font-weight: bold;
  line-height: 1.5;
}
[hidden] { display: none !important; }
.chk-field { margin-top: 6px; }
label.chk {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 48px;                 /* 【48px未満にしない】 */
  margin: 0;
  padding: 6px 2px;
  font-size: 16px;                  /* 【16px未満にしない】 */
  font-weight: normal;
  cursor: pointer;
}
label.chk input[type="checkbox"] {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 2px 0 0;
  accent-color: #00884A;            /* ▼2026-07-12 R18 統一緑 */
}
/* 送信ボタン:緑#00884A=白文字4.54:1(4.5:1以上)
   ▼2026-07-12 R18 #007A45→#00884A(置換マップ・一覧と統一) */
.btn {
  display: block;
  width: 100%;
  min-height: 50px;                 /* 【48px未満にしない】 */
  margin: 10px 0 2px;               /* R4 余白圧縮 */
  padding: 8px;
  background: #00884A;
  color: #fff;
  border: none;
  border-radius: 10px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.29);
  font-size: 20px;
  font-weight: bold;
  font-family: inherit;
  cursor: pointer;
}
.btn:hover, .btn:focus-visible { background: #00693B; }
.btn:disabled { opacity: 0.75; cursor: default; }
/* ▼2026-07-10 R15 個人情報保護方針リンク
   (TOPへ戻るリンクと同色セット。リンク色が3.26:1のため
     スマホ含め20px太字=3:1基準を厳守)
   ▼2026-08-12 R20 R19と同じ登録色へそろえた(標準8「全リンク統一」)
   ・訪問済 #FF0099 → #8A2BE2 (クリーム#FFF3DB上5.42:1)
   ・ホバー 文字#003399 → #D6008F ／ 背景#B5D7FF → #EDF8FF
     (承認済みホバーセットは必ず対で。#EDF8FF上4.58:1) */
.policy-link {
  font-size: 20px;
  font-weight: bold;
  text-decoration: underline;
}
.policy-link:link { color: #008CE3; }
.policy-link:visited { color: #8A2BE2; }
.policy-link:hover, .policy-link:focus-visible {
  background: #EDF8FF;              /* 承認済みホバーセット(必ず対で) */
  color: #D6008F;
}
.policy-link:active { color: #FF0901; }
/* ▼2026-07-10 R7 お名前の記憶についての注意書き
   (2回目以降のカード内。文字16px・コントラスト13.9:1) */
.note {
  margin: 8px 0 0;
  padding: 8px 10px;
  background: #FFF3DB;
  border: 1px dashed #767676;
  border-radius: 8px;
  font-size: 16px;                  /* 【16px未満にしない】 */
  line-height: 1.6;
}
/* ▼2026-07-11 R16 .note内(16px)の緑は通常文字なので4.5:1が必要。
   ▼2026-07-12 R18 #007A45→#008147(文字用の採用緑。
   クリーム地4.51:1・太字のまま)
   ※.h-greenは本来【22px以上の太字見出し専用】の色 */
.note .h-green {
  color: #008147;
  font-weight: bold;
}
/* スパム対策の隠し入力欄(人間には見せない) */
.hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  height: 1px;
  overflow: hidden;
}
/* ---- 本文 ------------------------------------------------------ */
.reassure {
  margin: 10px 8px;                 /* R4 余白圧縮 */
  color: #003399;                   /* 9.9:1 */
  font-size: 22px;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
}
.band {
  clear: both;
  margin: 16px 0 10px;
  padding: 5px 8px;
  background: #008CE3;              /* 白文字3.6:1→22px太字扱い。
                                       【この帯の文字を20px未満・
                                        細字にしない】 */
  color: #FFFFFF;
  border: 3px double #FFFFFF;
  font-size: 22px;
  font-weight: bold;
  text-align: left;
}
.text-wrap {
  max-width: 900px;                 /* 【本文の幅は720px以下】
                                       1行が長すぎると読みにくい
                                       ▼2026-07-11 R16 R15の900px
                                       拡大を取りやめ720pxへ復帰 */
  margin: 0 auto;
  padding: 0 10px;
  text-align: left;
}
.txt { margin: 0 0 10px; color: #993300; font-size: 18px; } /* 6.8:1 */
.h-sub { margin: 16px 0 6px; font-size: 22px; font-weight: bold; }
.h-blue { color: #008CE3; }         /* 3.6:1→22px太字専用 */
.h-red { color: #FF0000; }          /* 3.6:1→22px太字専用 */
.h-green { color: #319A63; }        /* 3.2:1→22px太字専用 */
/* ▼2026-07-12 R17改 リスト(li)の行頭マークを「#」に統一
   (標準8・サイト全ページ共通)。
   このページは別の共通CSSが「・」を付け直したり、リストの
   余白を消したりしているため、次の作りにしています。
   ・「・」は !important と ::marker の両方で確実に消す
   ・「#」は枠の外ではなくリストの内側(liのpadding内)に
     置くため、スマホでも画面の左にはみ出さない
   フッターのメニュー(.f-nav)はリンクのため対象外。
   ※これでもまだ「・」が残る場合は、HTML本文に「・」の文字が
     直接書かれています。その部分のHTMLをお知らせください */
.text-wrap ul,
.note ul {
  list-style: none !important;
  margin-left: 0;
  padding-left: 0;
}
.text-wrap li,
.note li {
  list-style: none !important;
  position: relative;
  padding-left: 1.3em;     /* 「#」の置き場所(リストの内側) */
}
.text-wrap li::marker,
.note li::marker { content: ""; }
.text-wrap li::before,
.note li::before {
  content: "#";
  position: absolute;
  left: 0.2em;
}
.backline { text-align: right; margin: 12px 6px 4px; }
.backlink {
  display: inline-block;
  min-height: 48px;                 /* 【48px未満にしない】 */
  padding: 10px 6px;
  font-size: 20px;
  text-decoration: underline;
}
/* ▼2026-07-10 R11 TOPへ戻るリンクの指定色
   #008CE3はクリーム背景で3.26:1のため
   「20px太字(大きい文字=3:1基準)」を厳守すること
   ▼2026-08-12 R19 社長指示で訪問済みとホバーの文字色を改訂
   (meiwa-web-consult 標準8「2026-08-05 社長決定」の登録色へ)
   ・訪問済 #FF0099 → #8A2BE2 (クリーム#FFF3DB上5.42:1)
   ・ホバー 文字#003399 → #D6008F ／ 背景#B5D7FF → #EDF8FF
     (承認済みホバーセットは必ず対で。#EDF8FF上4.58:1) */
.backlink:link { color: #008CE3; }
.backlink:visited { color: #8A2BE2; }
.backlink:hover, .backlink:focus-visible {
  background: #EDF8FF;              /* 承認済みホバーセット(必ず対で) */
  color: #D6008F;
}
.backlink:active { color: #FF0901; }
/* ---- お問い合わせ(電話・フォーム画像) ------------------------ */
/* ▼2026-07-10 R9 お問い合わせ~ページトップまでを、
   実際の一覧ページ(Slist)の本番CSSにそのまま合わせました。
   このページ独自だった数値(余白・角丸・文字サイズ等)は、
   Slistの値を優先しています */
.inquiry {
  display: flex;
  gap: 8px;                          /* ▼2026-07-11 R16 6px→8px
                                        【8px未満にしない】
                                        ※Slist側も8pxへ統一を推奨 */
  margin: 1px 0 0;                  /* 一覧ページと同じ詰めた余白 */
}
.inquiry-item { flex: 1; min-width: 0; }
.inquiry-item a { display: block; min-height: 48px; } /* 【48px未満にしない】 */
.inquiry-item img {
  display: block;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
}
/* ▼2026-07-10 R11 スマホだけ改行するbr。従来は誤ってdisplay:noneに
   なっており、Copyright等の改行が効いていなかった。
   PC(768px以上)は下のメディアクエリ内で従来どおり非表示 */
.br-sp { display: inline; }
/* ▼2026-07-10 R9 PC/スマホの出し分け(一覧ページと同じ768px基準)
   !important は、キャッシュされた古いCSSが残っていても
   確実に切り替わるようにするための保険(一覧ページと同じ書き方) */
.pc-only { display: none !important; }
.sp-only { display: block !important; }
@media (min-width: 768px) {
  .pc-only { display: block !important; }
  .sp-only { display: none !important; }
  /* PCでは電話リンクを無効化(クリックしても発信できないため) */
  a[href^="tel:"] { pointer-events: none; }
  .br-sp { display: none; }
  .f-nav a { border-bottom: 0; }
  /* 一覧ページと同じ、フッター右下の装飾画像
     (不要であればこの3行は削除して構いません) */
  footer {
    background-image: url(/img/footer.png);
    background-repeat: no-repeat;
    background-position: 2% 15%;
  }
  /* ▼2026-07-11 R16 R15の「PC本文拡大」をこの位置(768px以上)へ
     移動。従来はメディアクエリの閉じ括弧の外にあり、全画面幅に
     効いてしまう不具合だった。
     本文コンテナは720px(内側700px)÷22px≒1行32字
     =PC基準【30〜40字】の範囲内 */
  .txt { font-size: 22px; }
}
/* ---- フッター --------------------------------------------------- */
/* ▼2026-07-12 R18 緑#00884A=白文字4.54:1(4.5:1以上)。
   置換マップ2026-07-11により#007A45→#00884A(一覧と完全一致) */
footer {
  margin: 8px 0 0;
  background-color: #00884A;
  color: #fff;
  border: 3px double #fff;          /* 一覧ページと同じ二重線 */
}
footer a { color: #fff; }
footer a:visited { color: #FFFFFF; } /* ▼R11 白(社長指定) */
.f-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.f-nav li { flex: 1 1 auto; display: flex; }
.f-nav a {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;                 /* 【48px未満にしない】 */
  padding: 4px 6px;
  color: #fff;
  text-decoration: underline;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  text-align: center;
}
.f-nav a:hover, .f-nav a:focus {
  background: #005A33;
  color: #fff;
}
.f-nav2 { border-top: 1px solid rgba(255, 255, 255, 0.4); }
footer address {
  font-style: normal;
  padding: 6px 8px;
  text-align: center;
  line-height: 1.5;
}
footer address p { margin: 2px 0; }
footer address span { display: inline-block; } /* 折返し位置を整える */
.f-name { font-weight: bold; }
/* ▼2026-07-10 R11 電話リンクの訪問済み・アクティブも白に統一 */
footer a[href^="tel:"]:visited,
footer a[href^="tel:"]:active { color: #FFFFFF; }
.f-map { margin: 6px auto; padding: 0 8px 6px; }
.f-map iframe {
  display: block;
  width: 100%;
  height: 200px;
  border: 0;
  border-radius: 5px;
}
/* ▼2026-07-10 R6→▼2026-07-12 R18 コピーライト帯:置換マップの
   #FF610D+濃文字#2C2C2C=4.63:1(一覧と統一)。
   ※この帯の上だけは文字を#444444にしない(3.23:1で不足)
   【この帯を白文字に戻す場合は背景を#C64A00にする(4.8:1)】 */
.copyright { margin: 0; background: #FF610D; }
.copyright p { margin: 0; padding: 4px 0; color: #2C2C2C; text-align: center; }
.copyright small { font-size: 18px; }
/* ---- ページトップへ戻る(一覧ページと同じ・常時表示) ---------- */
#pageTop {
  position: fixed;
  right: 12px;
  bottom: 10px;
  z-index: 99;
  margin: 0;
}
#pageTop a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;                  /* 【48px未満にしない】 */
  min-height: 48px;
  opacity: 0.75;
}
#pageTop a:hover, #pageTop a:focus { opacity: 1; }
#pageTop img { border-radius: 10px; display: block; }
/* ---- PC(970px以上) ------------------------------------------- */
@media (min-width: 970px) {
  /* ▼2026-07-10 R2改訂 ファーストビュー対策
     ヘッダー(スライド~見出し)は全幅表示に戻し、
     その下のログイン欄はタブ切替をやめて2枚のカードを横並びで
     常に両方表示する。縦の高さを半分近くに抑えることで、
     PCの1画面に「ご安心下さい。」まで収まる */
  .login-tabs { display: none; }            /* PCではタブを使わない */
  .js-tabs .card-head { display: block; }   /* 見出しは両カードとも表示 */
  .hero-r {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;                              /* 【8px以上】 */
    align-items: start;
    margin: 0 auto 4px;
  }
  .hero-r .login-card { max-width: none; margin: 0; }
  /* JSが「前回の記憶あり」で片方をhiddenにしても、
     PCでは2枚とも常に表示する([hidden]の!importantに勝つよう
     詳細度を上げた上でこちらも!importantにしている) */
  .hero-r .login-card[hidden] { display: block !important; }
}
/* ---- タブレット(568~969px) ---------------------------------- */
/* ▼2026-07-10 R9 f-navはflexで自動折返しするため、
   ここでの上書きは不要になり削除しました */
/* ---- スマホ(567px以下) --------------------------------------- */
@media (max-width: 567px) {
  body { font-size: 16px; }         /* 【16px未満にしない】 */
  #container { padding: 2px; }
  /* ▼2026-07-10 R12 ファーストビュー第2弾:
     チャットボタンと「しつこい電話営業〜」が重ならない高さまで圧縮。
     バナーは高さ50pxの枠に固定(height指定なのでCLSもゼロ)。
     ※現行画像は上下が少し切れて表示されます。作り直しは
       横1200×縦150px(8:1)で書き出せばほぼ切れずに収まります */
  .slides img { height: 50px; object-fit: cover;
    object-position: center; }
  #header h1 { font-size: 20px; margin: 6px 0 4px;
    line-height: 1.15; }             /* ▼R13 前後を約4pxずつ拡大 */
  .reassure { font-size: 20px; margin: 0 6px 8px;
    line-height: 1.35; }                     /* ▼R13 */
  .field { margin: 0 0 2px; }              /* ▼R13 +1px */
  .field label { margin: 4px 0 2px;          /* ▼R13 +3px */
    line-height: 1.35; }
  .chk-field { margin-top: 1px; }          /* ▼R13 回収 */
  label.chk { padding: 2px; line-height: 1.4; }
  .btn { margin: 4px 0 1px; }                /* ▼R13 回収 */
  .band { font-size: 20px; }
  .h-sub { font-size: 20px; }
  .card-head { font-size: 20px; }
  .txt { font-size: 16px; }
  /* ▼R11 .backlinkは18pxだと「大きい文字」基準(太字18.66px)を
     割り3.3:1不合格になるため、スマホも20pxのまま */
  .login-tabs { margin: 0 4px; max-width: none; }
  .login-card { margin: 0 4px 2px; padding: 6px 8px 3px; } /* ▼R13 */
  .note { font-size: 16px; }       /* ▼R11 16px基準 */
  footer address { font-size: 16px; } /* ▼R11 16px基準 */
  /* ▼2026-08-17 R23 「賃貸住宅管理業登録番号:国土交通大臣(1)
     第10007号」をスマホでも1行に収める（社長指示・404ページで発覚）。
     一覧G82・詳細D150と同じ値：左右余白を0にして使える幅を広げ、
     字詰め palt（iPhoneのヒラギノで有効）＋字間-0.035emで
     幅375pxでも1行に。文字16pxの床は守ったまま。
     幅360px以下のAndroid・320px級では従来どおり2行になります
     （言及しないことリスト12＝社長確定の仕様） */
  footer address {
    padding: 6px 0;
    font-feature-settings: "palt";
    letter-spacing: -0.035em;
  }
}
/* ---- 小画面セーフティネット(幅375px以下) --------------------- */
/* ▼2026-07-11 R16 新設(meiwa-web-consult 共通実装標準3)
   対象:iPhone SE系・Android 360など。
   方針:【文字とタップ領域は縮めない。余白と列数で吸収する】 */
@media screen and (max-width: 375px) {
  /* 1) はみ出しの保険(離脱防止の要) */
  html, body { overflow-x: hidden; }
  img { max-width: 100%; height: auto; }
  /* 2) 文字の床を固定【G】
     (入力欄はiPhoneの自動ズーム防止のため16px未満禁止) */
  body { font-size: 16px; line-height: 1.6; }
  input, select, textarea { font-size: 16px; }
  /* 3) お問い合わせ画像2枚は縦に畳む
     (横並びのままだと1枚155px前後になり画像内の
      電話番号が読めないため、1枚を全幅で表示) */
  .inquiry { flex-direction: column; gap: 8px; }
  /* 4) 長い住所・URL・お名前の折返し */
  h1, h2, h3, p, li, address { overflow-wrap: break-word; }
}