/* ========================================================
   enhance2026_titlefix_v2.css
   既存CSSを壊さず、下層ページのタイトル被りと
   スマホヘッダー／ハンバーガー崩れを強制修正
   ======================================================== */

:root {
  --jsc-primary: #003670;
  --jsc-accent:  #e53935;
  --jsc-gray:    #f5f5f5;
  --jsc-text:    #333;
  --jsc-radius:  8px;
  --jsc-shadow:  0 2px 8px rgba(0,0,0,.10);
}

/* PCだけ sticky。スマホでは絶対に sticky/fixed にしない */
@media (min-width:1044px){
  #headerBG{
    position:sticky;
    top:0;
    z-index:1000;
  }
}

/* PCヘッダー微調整 */
#hnav li a{position:relative;text-decoration:none;}
#hnav li a::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--jsc-accent);transition:width .25s ease;}
#hnav li a:hover::after,#hnav li a:focus-visible::after{width:100%;}
#header h1{position:static!important;width:auto!important;top:auto!important;left:auto!important;}
#header h1 img{display:block;width:auto;height:auto;max-height:60px;}
#header{display:flex!important;align-items:center!important;}
#header h1{display:flex!important;align-items:center!important;}

/* ========================================================
   スマホ：ヘッダーとハンバーガーを完全リセット
   ======================================================== */
@media (max-width:1043px){
  body{
    padding-top:0!important;
    overflow-x:hidden!important;
  }

  header,
  #headerBG,
  #header{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    transform:none!important;
    z-index:9000!important;
  }

  #headerBG{
    width:100%!important;
    min-width:0!important;
    height:58px!important;
    min-height:58px!important;
    margin:0!important;
    padding:0!important;
    background:rgba(255,255,255,.96)!important;
    border-bottom:1px solid rgba(0,54,112,.08)!important;
    box-shadow:0 6px 18px rgba(0,54,112,.08)!important;
  }

  #header{
    width:100%!important;
    max-width:430px!important;
    height:58px!important;
    min-height:58px!important;
    margin:0 auto!important;
    padding:0 12px!important;
    box-sizing:border-box!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    background:transparent!important;
    overflow:visible!important;
  }

  #header h1{
    position:static!important;
    float:none!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    line-height:1!important;
    display:flex!important;
    align-items:center!important;
    flex:0 1 auto!important;
  }

  #header h1 a{
    display:flex!important;
    align-items:center!important;
    line-height:1!important;
  }

  #header h1 img{
    width:min(190px,55vw)!important;
    max-width:min(190px,55vw)!important;
    height:auto!important;
    max-height:38px!important;
    margin:0!important;
    padding:0!important;
    object-fit:contain!important;
  }

  #header #hsub,
  #header #hnav{
    display:none!important;
  }

  #header .button,
  #header .js-toggle-left-slidebar,
  span.button.js-toggle-left-slidebar{
    position:static!important;
    float:none!important;
    top:auto!important;
    right:auto!important;
    left:auto!important;
    bottom:auto!important;
    transform:none!important;
    flex:0 0 42px!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    margin:0!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    background:#003670!important;
    color:#fff!important;
    border-radius:10px!important;
    line-height:1!important;
    text-align:center!important;
    box-shadow:0 8px 20px rgba(0,54,112,.24)!important;
    cursor:pointer!important;
  }

  #header .button i,
  #header .js-toggle-left-slidebar i,
  span.button.js-toggle-left-slidebar i{
    color:#fff!important;
    font-size:22px!important;
    line-height:1!important;
    margin:0!important;
    padding:0!important;
  }
}

/* ========================================================
   下層ページタイトル：被り修正
   class は #class-titleBG / #class-title を使用
   news などは #sub-titleBG / #sub-title を使用
   ======================================================== */
@media (max-width:1043px){
  #sub-titleBG,
  #class-titleBG,
  #guide-titleBG,
  #lesson-titleBG,
  #project-titleBG,
  #contact-titleBG,
  #company-titleBG,
  #faq-titleBG,
  #coach-titleBG{
    margin-top:0!important;
    padding-top:0!important;
    min-width:0!important;
    width:100%!important;
    clear:both!important;
  }

  #sub-title,
  #class-title,
  #guide-title,
  #lesson-title,
  #project-title,
  #contact-title,
  #company-title,
  #faq-title,
  #coach-title{
    width:100%!important;
    max-width:430px!important;
    margin:0 auto!important;
    box-sizing:border-box!important;
    padding:34px 16px 38px!important;
    text-align:center!important;
  }

  #sub-title > h2,
  #class-title > h2,
  #guide-title > h2,
  #lesson-title > h2,
  #project-title > h2,
  #contact-title > h2,
  #company-title > h2,
  #faq-title > h2,
  #coach-title > h2{
    margin:0!important;
    padding:0!important;
    font-size:24px!important;
    line-height:1.25!important;
    text-align:center!important;
    font-weight:900!important;
  }

  #sub-title > p,
  #class-title > p,
  #guide-title > p,
  #lesson-title > p,
  #project-title > p,
  #contact-title > p,
  #company-title > p,
  #faq-title > p,
  #coach-title > p{
    margin:10px 0 0!important;
    padding:0!important;
    font-size:11px!important;
    line-height:1!important;
    letter-spacing:.08em!important;
    text-align:center!important;
  }
}

/* ========================================================
   ニュース詳細：スマホ読みやすさ改善
   ======================================================== */
@media (max-width:1043px){
  #newsBG{
    min-width:0!important;
    width:100%!important;
  }

  #news{
    width:94%!important;
    max-width:430px!important;
    padding:20px 0 104px!important;
    margin:0 auto!important;
    box-sizing:border-box!important;
  }

  #news > div.entry-content,


  #news > div.entry-content h3.title,
  #news > li.entry-content h3.title{
    margin:8px 0 22px!important;
    padding:0 0 18px!important;
    font-size:24px!important;
    line-height:1.4!important;
    font-weight:900!important;
    color:#222!important;
    border-bottom:1px solid #e5e7eb!important;
  }

  #news > div.entry-content p,
  #news > li.entry-content p{
    line-height:1.95!important;
    margin:0 0 18px!important;
    font-size:15px!important;
  }

  #news > div.entry-content p.day,
  #news > li.entry-content p.day{
    font-size:12px!important;
    line-height:1.4!important;
    color:#6b7280!important;
    margin:0 0 8px!important;
  }

  #news img,
  #news iframe,
  #news video{
    max-width:100%!important;
    height:auto!important;
  }

  #news iframe{
    aspect-ratio:16/9!important;
    width:100%!important;
  }

  #news .pc{
    display:none!important;
  }
  #news .sp{
    display:block!important;
  }

  #news input[type="submit"],
  #news button,
  #news .remodal-acro,
  #news .remodal-gym{
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  #news .remodal-acro span,
  #news .remodal-gym span{
    background:transparent!important;
    box-shadow:none!important;
  }
}

/* ========================================================
   floating bottom nav 維持
   ======================================================== */
@media (max-width:1043px){
  body{padding-bottom:88px!important;}

  .bottom-menu.jsc-bottom-nav{
    position:fixed!important;
    left:50%!important;
    right:auto!important;
    bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;
    transform:translateX(-50%)!important;
    z-index:9999!important;
    width:min(94vw,430px)!important;
    height:66px!important;
    margin:0!important;
    padding:8px!important;
    display:grid!important;
    grid-template-columns:repeat(4,1fr)!important;
    gap:6px!important;
    background:rgba(255,255,255,.96)!important;
    border:1px solid rgba(0,54,112,.12)!important;
    border-radius:24px!important;
    box-shadow:0 12px 34px rgba(0,54,112,.22)!important;
    backdrop-filter:blur(16px)!important;
    -webkit-backdrop-filter:blur(16px)!important;
    list-style:none!important;
  }

  .bottom-menu.jsc-bottom-nav > li{
    position:relative!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    float:none!important;
    list-style:none!important;
    border:0!important;
    background:transparent!important;
  }

  .bottom-menu.jsc-bottom-nav > li > a{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    width:100%!important;
    height:50px!important;
    padding:0!important;
    border-radius:18px!important;
    background:transparent!important;
    color:#003670!important;
    text-decoration:none!important;
    font-size:11px!important;
    font-weight:900!important;
    line-height:1.1!important;
  }

  .bottom-menu.jsc-bottom-nav > li.jsc-bottom-nav__primary > a{
    background:#e53935!important;
    color:#fff!important;
    box-shadow:0 8px 18px rgba(229,57,53,.30)!important;
  }

  .jsc-bottom-nav__icon img{
    width:21px!important;
    height:21px!important;
    display:block!important;
    object-fit:contain!important;
  }

  .jsc-bottom-nav__primary .jsc-bottom-nav__icon img{
    filter:brightness(0) invert(1)!important;
  }
}

@media (min-width:1044px){
  .bottom-menu.jsc-bottom-nav{display:none!important;}
  body{padding-bottom:0!important;}
}


/* ========================================================
   2026 TITLE FIX v3
   PCのヘッダーナビが下層ページタイトルに重なる問題の修正
   ======================================================== */

/* PC：既存ヘッダーのナビ分だけ、下層タイトルを下げる */
@media (min-width:1044px){
  #sub-titleBG,
  #class-titleBG,
  #guide-titleBG,
  #lesson-titleBG,
  #project-titleBG,
  #contact-titleBG,
  #company-titleBG,
  #faq-titleBG,
  #coach-titleBG,
  #privacy-titleBG,
  #sitemap-titleBG{
    margin-top:80px !important;
    position:relative !important;
    z-index:1 !important;
  }

  #sub-title,
  #class-title,
  #guide-title,
  #lesson-title,
  #project-title,
  #contact-title,
  #company-title,
  #faq-title,
  #coach-title,
  #privacy-title,
  #sitemap-title{
    padding-top:50px !important;
    padding-bottom:50px !important;
    box-sizing:border-box !important;
  }
}

/* スマホ：タイトル帯はヘッダー直下に自然表示。重なりだけ防止 */
@media (max-width:1043px){
  #sub-titleBG,
  #class-titleBG,
  #guide-titleBG,
  #lesson-titleBG,
  #project-titleBG,
  #contact-titleBG,
  #company-titleBG,
  #faq-titleBG,
  #coach-titleBG,
  #privacy-titleBG,
  #sitemap-titleBG{
    margin-top:0 !important;
    position:relative !important;
    z-index:1 !important;
  }

  #sub-title,
  #class-title,
  #guide-title,
  #lesson-title,
  #project-title,
  #contact-title,
  #company-title,
  #faq-title,
  #coach-title,
  #privacy-title,
  #sitemap-title{
    width:100% !important;
    padding:38px 16px 40px !important;
    box-sizing:border-box !important;
  }
}

/* トップ：ジュンスポーツクラブとは 見出し修正 */
#top-about .about-catch-text{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:16px !important;
  text-align:center !important;

  font-size:clamp(26px, 3.2vw, 35px) !important;
  line-height:1.45 !important;
  font-weight:900 !important;
  color:#003670 !important;
  letter-spacing:.04em !important;

  margin:0 0 36px !important;
}

@media(max-width:1043px){
  #top-about .about-catch-text{
    font-size:20px !important;
    line-height:1.5 !important;
    padding:0 18px !important;
    margin-bottom:28px !important;
  }
}


.news-main-visual {
  width: 100%;
  margin: 0 auto 32px;
  overflow: hidden;
}

.news-main-visual img {
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 769px) {
  .news-main-visual {
    aspect-ratio: 16 / 9;
  }

  .news-main-visual img {
    height: 100%;
    object-fit: cover;
  }
}

@media (max-width: 768px) {
  .news-main-visual {
    aspect-ratio: 4 / 5;
    border-radius: 0 0 24px 24px;
  }

  .news-main-visual img {
    height: 100%;
    object-fit: cover;
  }
}

@media (min-width:769px){

.news-main-visual{
    aspect-ratio:auto;
}

.news-main-visual img{
    width:100%;
    height:auto;
    object-fit:contain;
}

}

header{
    position:sticky;
    top:0;
    z-index:9999;
    background:#fff;
}