@charset "UTF-8";
/* ============================================================
   共通パーツ：SP（1023px以下／基準幅390px）
   縦方向・文字：clamp()（rem＋vw）／横方向：%
   ============================================================ */

/* ===== ページ枠 ===== */
br.sp { display: inline; }
body { padding-bottom: 17.2vw; }   /* 固定ナビ（画像4枚、幅25%・比率160:110）の高さ分 */
.wrap { padding-top: 4.75rem; }   /* ヘッダー高 76px（参考サイトと同じ） */

/* ===== 背景ガイド：SPはセクション全体に表示 ===== */
.bg-guide { inset: 0 !important; width: auto !important; height: auto !important; }

/* ===== ヘッダー ===== */
.header { height: 4.75rem; }
.logo { left: 4.1026%; top: 50%; width: 46.1538%; transform: translateY(-50%); }
.hbtns { display: none; }
.hnav { display: none; }

/* ===== グローバルナビ：SPは全幅 ===== */
.g-nav { width: 100%; }
.g-nav ul { padding: 0 0 8rem; }
.g-nav li { font-size: 1rem; line-height: 1.5; padding: 5px 0 0; }
.g-nav li:first-child { padding-top: 96px; }
.g-nav li a { color: #000; }

/* ===== information ===== */
.info { padding: clamp(2.4615rem, 12.3077vw, 4.5rem) 5.1282% clamp(2.8718rem, 14.359vw, 5.25rem); }
.info__en { font-size: clamp(0.8205rem, 4.1026vw, 1.5rem); }
.info__ttl { margin-top: clamp(1.2308rem, 6.1538vw, 2.25rem); font-size: clamp(0.9231rem, 4.6154vw, 1.6875rem); }
.info__btns { gap: 2.6%; margin-top: clamp(1.641rem, 8.2051vw, 3rem); }
.info__btn { width: 48.7%; max-width: 240px; height: clamp(2.8718rem, 14.359vw, 5.25rem); font-size: clamp(0.8205rem, 4.1026vw, 1.5rem); }

/* ===== フッター ===== */
.fnav { border: 0; }
.fnav ul { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 10px; padding: 0; font-size: 3.2vw; line-height: 1.3; background: #aaa; }   /* 継ぎ目に白が出ないよう下地をグレーに */
.fnav li { display: flex; align-items: center; justify-content: center; min-height: 44px; background: #ccc; color: #fff; border-bottom: 1px solid #aaa; }
.fnav li:nth-child(odd) { border-right: 1px solid #aaa; }
.fnav li:nth-child(1), .fnav li:nth-child(2) { border-top: 1px solid #aaa; }
.fnav li + li::before { content: none; }
.fnav li a { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: .4em .3em; color: #000; background: #e6e6e6; }
.fnav li a:hover { opacity: 1; background: #ccc; }
.fnav li span { color: #fff; }
.finfo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2308rem, 6.1538vw, 2.25rem) 4%; padding: clamp(1.2308rem, 6.1538vw, 2.25rem) 5.1282% clamp(1.641rem, 8.2051vw, 3rem); }
.finfo__contact { grid-column: 1 / -1; text-align: center; }
.finfo__lead { font-size: clamp(0.5641rem, 2.8205vw, 1.0312rem); }
.finfo__tel { justify-content: center; margin-top: clamp(0.4103rem, 2.0513vw, 0.75rem); }
.finfo__fd { width: clamp(1.7436rem, 8.7179vw, 3.1875rem); max-width: 43px; margin-bottom: clamp(0.2564rem, 1.2821vw, 0.4688rem); }
.finfo__num { margin-left: clamp(0.4103rem, 2.0513vw, 0.75rem); font-size: clamp(1.7436rem, 8.7179vw, 3.1875rem); }
.finfo__hours { margin-top: clamp(0.4103rem, 2.0513vw, 0.75rem); font-size: clamp(0.5128rem, 2.5641vw, 0.9375rem); }
.finfo__co { display: flex; flex-direction: column; align-items: center; }
.finfo__co--seller { grid-column: 1 / -1; }
.finfo__role { margin-bottom: clamp(0.3077rem, 1.5385vw, 0.5625rem); font-size: clamp(0.5128rem, 2.5641vw, 0.9375rem); }
.finfo__co img { width: auto; height: clamp(2.0513rem, 10.2564vw, 3.75rem); max-width: 214px; }
.finfo__co--agent img, .finfo__co--sub img { height: auto; max-height: clamp(1.641rem, 8.2051vw, 3rem); max-width: 100%; }
.copyright { padding: clamp(0.2051rem, 1.0256vw, 0.375rem) 0 clamp(1.0256rem, 5.1282vw, 1.875rem); font-size: clamp(0.5128rem, 2.5641vw, 0.9375rem); }

/* ===== ページTOPへ戻る ===== */
.ptop { right: 3%; bottom: calc(17.2vw + .75rem); width: 2.5rem; height: 2.5rem; }
.ptop::before { width: .625rem; height: .625rem; margin-top: .3125rem; }

/* ===== スマホ下部固定ナビ ===== */
.sp-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 99; display: flex; background: #fff; border-top: 1px solid #fff; }
.sp-nav > * { display: block; width: 25%; }
.sp-nav img { width: 100%; }
.sp-nav .sp-nav__off img { opacity: .5; }   /* 来場予約：リンクなしのため半透明 */

/* ===== タブレット（768〜1023px）：崩れる箇所のみ ===== */
@media (min-width: 768px) {
  .finfo { grid-template-columns: 1fr 1fr 1fr; }
  .finfo__co--seller { grid-column: auto; }
}