/* =========================================================
   Horse Central — Responsive overrides (tablet / smartphone)
   ---------------------------------------------------------
   - PC view (>=1024px) is intentionally left untouched.
   - Tablet : 768px - 1023px
   - Smartphone : <=767px
   - This file is loaded AFTER each page's inline <style>
     so its rules override the older inline media queries.
   ========================================================= */

/* =========================================================
   数字フォントの統一（サイト全体）
   ---------------------------------------------------------
   numfont.js が数字（0-9・小数点・桁区切り）を <span class="hc-num">
   で包む。その数字だけ Noto Sans JP で表示し、書体の不一致を解消する。
   ========================================================= */
.hc-num{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif !important;
  font-feature-settings:normal;
  font-variant-numeric:normal;
}

/* No-horizontal-scroll safety net (all viewports <= 1023px) */
@media (max-width:1023px){
  html, body { overflow-x:hidden; }
  img, video { max-width:100%; height:auto; }
}

/* =========================================================
   TABLET  (768px - 1023px)
   ========================================================= */
@media (min-width:768px) and (max-width:1023px){

  /* ---- NAV ---- */
  .nav-inner{ padding:0 24px; height:76px; }
  .nav-links{ display:none; }
  .nav-logo img.real-logo{ height:48px; }
  .nav-logo-text{ font-size:18px; letter-spacing:.26em; }
  .nav-logo-sub{ font-size:9px; letter-spacing:.46em; }
  .nav-cta{ padding:11px 18px; font-size:11px; letter-spacing:.28em; }

  /* ---- SUB-HERO ---- */
  .subhero{ height:380px; }
  .subhero-img{ background-position:center 40%; }
  .subhero-title .jp{ font-size:48px; letter-spacing:.26em; }
  .subhero-title .en{ font-size:12px; letter-spacing:.42em; margin-top:18px; }

  /* ---- HERO (top page) ---- */
  .hero-img{ height:480px; }
  .hero-overlay{ padding:60px 28px 50px; }
  .hero-shield, .hero-shield-fallback{ width:170px; }
  .hero-wordmark .wm-main{ font-size:22px; letter-spacing:.30em; }
  .hero-wordmark .wm-sub{ font-size:12px; }
  .hero-roster{
    grid-template-columns:repeat(2, 1fr);
    gap:14px 32px;
    max-width:520px;
  }
  .hero-roster .name{ font-size:16px; }
  .hero-roster .name.en{ font-size:14px; }

  /* ---- TOP : about / farm ---- */
  .about-grid, .farm-grid{ grid-template-columns:1fr; }
  .about-img, .farm-img{ height:380px; order:-1; }
  .about-text, .farm-text{ padding:50px 32px 70px; max-width:none; margin:0; }
  .farm-text{ padding:50px 32px 70px; }

  /* ---- PAGE TITLE / SECTION HEAD ---- */
  .pagetitle{ padding:90px 28px 80px; }
  .pagetitle h1{ font-size:38px; letter-spacing:.20em; }
  .pagetitle .lede{ font-size:16px; letter-spacing:.10em; }
  .secthead{ padding:80px 28px 44px; }
  .secthead h2{ font-size:28px; letter-spacing:.20em; }
  .secthead .desc{ font-size:14px; }

  /* ---- HORSE / SALES / NEWS GRID : 2 columns ---- */
  .horses-grid{ grid-template-columns:repeat(2, 1fr); gap:40px 24px; }
  .news-grid{ grid-template-columns:repeat(2, 1fr); gap:40px 24px; }
  .news-archive-grid{ grid-template-columns:repeat(2, 1fr); gap:40px 24px; }
  .horses-inner, .news-inner{ padding:0 24px; }

  /* ---- ABOUT : info table ---- */
  .info{ padding:0 24px 90px; }
  .info-inner{ padding:8px 28px; }
  .info-row{ grid-template-columns:160px 1fr; gap:22px; padding:18px 4px; }

  /* ---- CONTACT ---- */
  .formsection{ padding:0 24px 90px; }
  .formcard{ padding:48px 40px 50px; }
  .formcard-head h2{ font-size:20px; }
  .input, .textarea{ font-size:16px; padding:13px 14px; }
  .input{ height:auto; min-height:48px; }

  /* ---- END CTA ---- */
  .endcta{ padding:80px 28px 100px; }
  .endcta h2{ font-size:22px; }
  .endcta .btn{ padding:17px 44px; font-size:12px; letter-spacing:.36em; }

  /* ---- PAGER ---- */
  .pager{ padding:24px 24px 90px; }
  .pager-list a, .pager-list span{ min-width:44px; height:44px; }

  /* ---- FOOTER ---- */
  .foot-grid{ grid-template-columns:1fr; gap:48px; text-align:center; padding-bottom:48px; padding-left:28px; padding-right:28px; }
  .foot-rule{ margin-left:auto; margin-right:auto; }
  .foot-sitemap{ display:inline-block; text-align:left; }
  .foot-contact-mail{ justify-content:center; }
  .foot-copy{ padding:22px 24px; }
}


/* =========================================================
   SMARTPHONE  (<= 767px)
   ========================================================= */
@media (max-width:767px){

  /* Min font for body to avoid iOS zoom-on-focus quirks */
  body{ font-size:15px; }

  /* ---- NAV ---- */
  .nav-inner{ padding:0 16px; height:64px; }
  .nav-links{ display:none; }
  .nav-burger{ width:44px; height:44px; margin-left:-10px; }
  .nav-logo{ gap:10px; }
  .nav-logo img.real-logo{ height:36px; }
  .nav-logo .fallback-shield{ width:34px; height:38px; }
  .nav-logo-text{ font-size:13px; letter-spacing:.22em; }
  .nav-logo-sub{ font-size:8px; letter-spacing:.42em; margin-top:4px; }
  /* Hide header CTA on smartphone — お問い合わせ moved into the drawer menu */
  .nav-right .nav-cta,
  .nav-cta{ display:none; }
  .nav-right{ gap:0; }

  /* ---- DRAWER (full-width is already handled above 768px) ---- */
  .drawer-head{ padding:22px 20px 18px; }
  .drawer-nav{ padding:24px 20px; }
  .drawer-nav a{ padding:20px 4px; font-size:15px; letter-spacing:.16em; min-height:44px; }
  .drawer-foot{ padding:18px 20px 22px; }

  /* お問い合わせ entry — visually elevated CTA inside the drawer */
  .drawer-cta-item{
    margin-top:18px;
    border:none !important;
    border-top:1px solid var(--rule) !important;
  }
  .drawer-cta-item > a{
    background:var(--green);
    color:#fff !important;
    text-align:center;
    margin:8px 0 0;
    padding:18px 4px !important;
    font-family:var(--display), var(--serif-jp);
    letter-spacing:.28em !important;
    font-weight:600;
    transition:background .2s ease;
  }
  .drawer-cta-item > a:hover{
    background:var(--green-deep);
    color:#fff !important;
    padding-left:4px !important;
  }
  .drawer-cta-item > a::after{ display:none !important; }

  /* ---- SUB-HERO  (PC ~520px → ~360px ≈ 70%) ---- */
  .subhero{ height:300px; }
  .subhero-img{ background-position:center 35%; }
  .subhero-overlay{ padding:0 16px; }
  .subhero-title .jp{ font-size:30px; letter-spacing:.22em; line-height:1.1; }
  .subhero-title .en{ font-size:10px; letter-spacing:.36em; margin-top:14px; }

  /* ---- HERO (top page) ---- */
  .hero-img{ height:520px; background-position:center; }
  .hero-overlay{ padding:48px 16px 40px; }
  .hero-shield, .hero-shield-fallback{ width:130px; margin-bottom:0; }
  .hero-wordmark{ margin-bottom:26px; }
  .hero-wordmark .wm-main{ font-size:17px; letter-spacing:.26em; }
  .hero-wordmark .wm-rule{ width:42px; margin:10px auto 8px; }
  .hero-wordmark .wm-sub{ font-size:10px; letter-spacing:.42em; }
  .hero-roster{
    grid-template-columns:1fr 1fr;
    gap:12px 18px;
    max-width:340px;
  }
  .hero-roster .name{ font-size:13px; letter-spacing:.06em; }
  .hero-roster .name.en{ font-size:12px; letter-spacing:.12em; }

  /* ---- TOP : about / farm ---- */
  .about{ padding:60px 0 0; }
  .about-grid, .farm-grid{ grid-template-columns:1fr; }
  .about-img, .farm-img{ height:260px; order:-1; }
  .about-text, .farm-text{ padding:36px 16px 56px; max-width:none; margin:0; }
  .about h2, .farm h2{ font-size:28px; line-height:1.15; margin:0 0 22px; }
  .about p, .farm p{ font-size:14px; line-height:1.9; }
  .about-cta, .farm-cta{ padding:12px 20px; font-size:11px; letter-spacing:.28em; }

  /* ---- TOP : news / horses preview ---- */
  .news-head, .photo-head{ padding:60px 16px 28px; }
  .news-grid, .horses-grid{ grid-template-columns:1fr; gap:24px; }
  .news-inner, .horses-inner{ padding:0 16px; }

  /* ---- BREADCRUMB ---- */
  .crumb-inner{ padding:14px 16px; font-size:11px; letter-spacing:.08em; }
  .crumb-inner .sep{ margin:0 8px; }

  /* ---- PAGE TITLE ---- */
  .pagetitle{ padding:60px 16px 50px; }
  .pagetitle .eyebrow{ font-size:11px; letter-spacing:.36em; }
  .pagetitle h1{ font-size:26px; letter-spacing:.18em; line-height:1.3; margin:14px 0 18px; }
  .pagetitle .rule{ margin-bottom:22px; }
  .pagetitle .lede{ font-size:15px; line-height:2; letter-spacing:.06em; }

  /* ---- SECTION HEAD ---- */
  .secthead{ padding:54px 16px 32px; }
  .secthead .eyebrow{ font-size:11px; letter-spacing:.36em; }
  .secthead h2{ font-size:22px; letter-spacing:.18em; margin:12px 0 16px; }
  .secthead .desc{ font-size:13px; line-height:1.85; }

  /* ---- HORSE / SALES / NEWS GRID : 1 column ---- */
  .horses{ padding:0 0 60px; }
  .horses-inner{ padding:0 16px; }
  .horses-grid{ grid-template-columns:1fr; gap:32px; }

  .news{ padding:0 0 60px; }
  .news-inner{ padding:0 16px; }
  .news-grid{ grid-template-columns:1fr; gap:32px; }
  .news-archive-grid{ grid-template-columns:1fr; gap:24px; }

  /* Card data rows: keep label + value side-by-side, tighter */
  .hcard-catch{ font-size:11px; letter-spacing:.20em; }
  .hcard-name{ min-height:50px; padding:8px 14px; }
  .hcard-name .en{ font-size:13px; }
  .hcard-name .kana{ font-size:10px; }
  .hcard-data{ padding:12px 14px 4px; }
  .hcard-row{
    grid-template-columns:5.5em 1fr;
    gap:10px;
    padding:8px 0;
    min-height:36px;
  }
  .hcard-row dt{ font-size:11px; letter-spacing:.12em; }
  .hcard-row dd{ font-size:13px; }
  .hcard-row dd .sub{ font-size:11px; }
  .hcard-comment{ padding:14px 14px 18px; font-size:12px; line-height:1.85; }

  /* SOLD / Coming Soon overlays — keep working */
  .hcard.sold .hcard-photo::after,
  .hcard .coming-soon{ /* no-op : preserve existing styles */ }

  /* ---- ABOUT : info table  →  stacked rows ---- */
  .info{ padding:0 16px 70px; }
  .info-inner{ padding:6px 18px; border-radius:3px; }
  .info-row{
    grid-template-columns:1fr;
    gap:4px;
    padding:14px 4px;
    align-items:flex-start;
  }
  .info-row dt{
    font-size:12px; letter-spacing:.14em;
    display:flex; align-items:baseline; gap:10px;
  }
  .info-row dt .en{
    display:inline-block;
    margin-top:0;
    font-size:10px;
    letter-spacing:.26em;
  }
  .info-row dd{ font-size:14px; line-height:1.75; }
  .info-row dd .zip{ display:block; margin:0 0 2px; font-size:12px; }
  .biz-inline li{
    font-size:13px;
    padding-left:30px;
    line-height:1.8;
  }
  .biz-inline li::before{ font-size:12px; }

  /* ---- CONTACT : form ---- */
  .formsection{ padding:0 16px 70px; }
  .formcard{
    padding:30px 18px 32px;
    border-radius:3px;
  }
  .formcard-head{ padding-bottom:22px; margin-bottom:26px; }
  .formcard-head .eyebrow{ font-size:10px; letter-spacing:.36em; }
  .formcard-head h2{ font-size:17px; letter-spacing:.16em; }
  .field{ gap:8px; }
  .field-label{ font-size:13px; letter-spacing:.08em; }
  .input, .textarea{
    font-size:16px;          /* ≥16px : iOS no-zoom on focus */
    padding:12px 14px;
    min-height:48px;
    border-radius:3px;
  }
  .textarea{ min-height:140px; line-height:1.75; padding:12px 14px; }
  .phone-row{
    grid-template-columns:1fr auto 1fr auto 1fr;
    gap:6px;
  }
  .phone-row .input{
    padding:12px 6px;
    text-align:center;
    min-width:0;
  }
  .phone-row .dash{ font-size:12px; }
  .form-submit-wrap{ margin-top:14px; }
  .submit-btn{
    display:block;
    width:100%;
    padding:16px 0;
    font-size:13px;
    letter-spacing:.30em;
    min-height:52px;
  }
  .submit-btn .jp{ font-size:14px; letter-spacing:.30em; }
  .submit-note{ font-size:11px; line-height:1.85; padding:0 4px; }

  /* ---- END CTA  (full-width-ish button) ---- */
  .endcta{ padding:60px 16px 80px; }
  .endcta .eyebrow{ font-size:10px; letter-spacing:.36em; }
  .endcta h2{ font-size:19px; letter-spacing:.12em; line-height:1.55; }
  .endcta p{ font-size:13px; }
  .endcta .btn{
    display:block;
    width:100%;
    max-width:none;
    padding:18px 0;
    font-size:12px;
    letter-spacing:.36em;
    min-height:52px;
  }

  /* ---- PAGER (news) ---- */
  .pager{ padding:20px 16px 70px; }
  .pager-list{ flex-wrap:wrap; justify-content:center; gap:6px; }
  .pager-list a, .pager-list span{
    min-width:44px;
    height:44px;
    padding:0 10px;
    font-size:13px;
  }
  .pager-list .pager-arrow{
    padding:0 14px;
    font-size:11px;
  }

  /* ---- FOOTER : stacked & centered ---- */
  footer{ padding:54px 0 0; }
  .foot-grid{
    grid-template-columns:1fr;
    gap:42px;
    text-align:center;
    padding:0 20px 40px;
  }
  .foot-col h4{ font-size:16px; letter-spacing:.16em; }
  .foot-rule{ margin-left:auto; margin-right:auto; }
  .foot-eyebrow{ font-size:10px; letter-spacing:.32em; }
  .foot-contact-line{ font-size:13px; }
  .foot-contact-mail{ justify-content:center; }
  .foot-sitemap{ display:inline-block; text-align:left; }
  .foot-sitemap li{ margin-bottom:12px; }
  .foot-sitemap a{ font-size:14px; min-height:32px; }
  .foot-center img.foot-logo-img{ height:74px; }
  .foot-center .foot-shield-fb{ width:64px; }
  .foot-wordmark .wm-main{ font-size:15px; letter-spacing:.28em; }
  .foot-wordmark .wm-sub{ font-size:9px; letter-spacing:.42em; }
  .socials, .foot-center .socials{ margin-top:18px; gap:22px; }
  .socials svg, .foot-center .socials svg{ width:26px; height:26px; }
  .foot-copy{
    padding:18px 16px;
    font-size:10px;
    letter-spacing:.10em;
    line-height:1.6;
  }
}

/* =========================================================
   Tap-target floor : every link / button at least 44px tall
   when actually tappable. Apply only on touch viewports so
   PC hover regions stay tight.
   ========================================================= */
@media (max-width:1023px){
  .nav-cta,
  .drawer-nav a,
  .submit-btn,
  .endcta .btn,
  .pager-list a,
  .pager-list .pager-arrow{
    min-height:44px;
  }
}