/* 配色比率：メイン(navy)70% / サブ(cream/white)25% / アクセント(gold)5% */
:root{
  --navy:#1d3557;
  --navy-tint:#e3e9f1;
  --gold:#b08d2c;
  --bg:#fdfaf3;
  --text:#222;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:"Hiragino Mincho ProN","游明朝",serif;
  background:var(--navy-tint);
  color:var(--text);
  font-size:18px;
  line-height:1.9;
}
header{
  background:var(--navy);
  color:#fff;
  padding:28px 20px;
  text-align:center;
  border-bottom:6px solid var(--gold);
}
header h1{ margin:0; font-size:32px; letter-spacing:.1em; }
header p{ margin:6px 0 0; font-size:16px; color:#dbe2ef; }
nav{
  background:#fff;
  border-bottom:2px solid var(--navy);
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
}
nav a{
  padding:16px 22px;
  color:var(--navy);
  text-decoration:none;
  font-weight:bold;
  font-size:18px;
  border-right:1px solid #ddd;
}
nav a.current{ background:var(--navy-tint); }
nav a:hover{ background:#eef1f6; }
.hero{
  background:url('https://placehold.co/1200x420/e9e3d3/1d3557?text=日野走友会+朝練の様子') center/cover;
  height:280px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.6);
}
.hero-gallery{ position:relative; }
.hero-gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(2,140px);
  gap:4px;
}
.hero-gallery-grid img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-gallery-caption{
  text-align:center;
  font-size:18px;
  font-weight:normal;
  letter-spacing:.05em;
  background:var(--navy);
  color:#fff;
  padding:14px 24px;
  margin:0;
}
@media (min-width:600px){
  .hero-gallery-grid{ grid-template-rows:repeat(2,200px); }
}
section{ max-width:880px; margin:0 auto; padding:50px 24px; background:var(--bg); }
h3{
  color:var(--navy);
  font-size:24px;
  border-left:8px solid var(--gold);
  padding-left:14px;
  margin-bottom:20px;
}
.notice{ background:#fff; border:1px solid #ddd; padding:20px; border-radius:6px; }
.notice li{ margin-bottom:12px; }
.cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.card{ background:#fff; border:1px solid #ddd; padding:20px; border-radius:6px; transition:box-shadow .3s, transform .3s, border-color .3s; }
.card:hover{ box-shadow:0 10px 18px rgba(0,0,0,.18); border-color:transparent; transform:translateY(-4px); }
.card img{ width:100%; border-radius:4px; margin-bottom:10px; }
.img-placeholder{
  width:100%; aspect-ratio:400/260; border-radius:4px; margin-bottom:10px;
  background:var(--navy-tint); color:var(--navy);
  display:flex; align-items:center; justify-content:center;
  text-align:center; font-size:14px; font-weight:bold; padding:10px; box-sizing:border-box;
}
.photo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.photo-grid img{ width:100%; border-radius:4px; border:1px solid #ddd; }
table.list{ width:100%; border-collapse:collapse; background:#fff; }
table.list th, table.list td{ border:1px solid #ddd; padding:12px; text-align:left; font-size:16px; }
table.list th{ background:var(--navy); color:#fff; }
.cta{
  text-align:center;
  background:var(--navy);
  color:#fff;
  padding:60px 20px;
}
.cta a{
  display:inline-block;
  margin-top:20px;
  background:var(--gold);
  color:#1d1d1d;
  padding:18px 40px;
  font-size:20px;
  text-decoration:none;
  border-radius:6px;
  font-weight:bold;
  transition:border-radius .3s ease-out, background .3s ease-out;
}
.cta a:hover{ border-radius:26px; background:#c89f3a; }
form.contact-form{ background:#fff; padding:24px; border-radius:6px; border:1px solid #ddd; }
form.contact-form label{ display:block; margin-bottom:6px; font-weight:bold; }
form.contact-form input, form.contact-form textarea{
  width:100%; padding:10px; margin-bottom:16px; border:1px solid #ccc; border-radius:4px; font-size:16px;
}
form.contact-form button{
  background:var(--gold); color:#1d1d1d; border:none; padding:14px 30px; font-size:18px; border-radius:6px; font-weight:bold; cursor:pointer;
  transition:border-radius .3s ease-out, background .3s ease-out;
}
form.contact-form button:hover{ border-radius:24px; background:#c89f3a; }
form.contact-form button:disabled{ opacity:0.6; cursor:not-allowed; }
.required{ color:#c0392b; font-size:0.75em; font-weight:normal; margin-left:6px; }
fieldset.radio-group{ border:1px solid #ccc; border-radius:6px; padding:12px 16px; margin:0 0 16px; }
fieldset.radio-group legend{ font-weight:bold; padding:0 6px; }
fieldset.radio-group label{ display:inline-flex; align-items:center; gap:6px; margin-right:20px; font-weight:normal; cursor:pointer; }
fieldset.radio-group input[type="radio"]{ width:18px; height:18px; }
footer{ text-align:center; padding:30px; font-size:14px; color:#fff; background:var(--navy); }
.site-logo{ display:block; margin:0 auto 12px; max-height:70px; }
.footer-logo{ display:block; margin:0 auto 10px; max-height:50px; }


/* ドロップダウンメニュー（クリック／マウスオーバーで展開） */
.has-dropdown{ position:relative; display:inline-block; }
.has-dropdown > .dropdown-toggle{
  padding:16px 22px;
  display:inline-block;
  text-decoration:none;
  font-weight:bold;
  cursor:pointer;
}
.dropdown-menu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:220px;
  background:#fff;
  border:1px solid #ddd;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
  z-index:100;
  flex-direction:column;
}
.dropdown-menu a{
  display:block;
  padding:14px 18px;
  white-space:nowrap;
  text-decoration:none;
  border-bottom:1px solid #eee;
  font-size:16px;
}
.dropdown-menu a:last-child{ border-bottom:none; }
.has-dropdown:hover > .dropdown-menu,
.has-dropdown.open > .dropdown-menu{ display:flex; }
@media (max-width:760px){
  .dropdown-menu{ position:static; box-shadow:none; border:none; }
}


/* ページトップへ戻るボタン */
#page-top{
  position:fixed;
  right:20px;
  bottom:20px;
  width:54px;
  height:54px;
  border-radius:50%;
  background:var(--navy);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  text-decoration:none;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .3s, transform .3s, visibility .3s;
  z-index:200;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
#page-top span{ display:none; }
#page-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
#page-top:hover{ background:var(--gold); color:#1d1d1d; }

/* トップ画面：フェードスライドショー（6-1-2） */
.hero-slider-wrap{ position:relative !important; height:280px !important; overflow:hidden; }
.hero-slider-wrap, .hero-slider-wrap .slick-list, .hero-slider-wrap .slick-track{ height:280px !important; }
.hero-slider{ margin:0; padding:0; list-style:none; height:280px !important; }
.hero-slider li, .hero-slider .slick-slide{ height:280px !important; }
.hero-slider img{ width:100%; height:280px !important; object-fit:cover; display:block; }
.hero-slider-wrap .slick-dots{ position:absolute !important; bottom:14px !important; top:auto !important; left:0; right:0; text-align:center; margin:0; padding:0; list-style:none; z-index:50; }
.hero-slider-wrap .slick-dots li{ display:inline-block; margin:0 4px; height:auto !important; }
.hero-slider-wrap .slick-dots button{ width:9px; height:9px; border-radius:50%; background:#fff; opacity:.6; color:transparent; border:none; padding:0; }
.hero-slider-wrap .slick-dots .slick-active button{ opacity:1; background:var(--gold); }
@media (min-width:600px){
  .hero-slider-wrap, .hero-slider-wrap .slick-list, .hero-slider-wrap .slick-track, .hero-slider, .hero-slider li, .hero-slider .slick-slide, .hero-slider img{ height:380px !important; }
}

/* ローディング画面（4-1-4＋4-1-7） */
#splash{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:9999;
  background:var(--navy);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .6s ease;
}
#splash.hide{ opacity:0; pointer-events:none; }
#splash_logo{ text-align:center; }
#splash_logo img{
  width:190px;
  opacity:0;
  animation:splashFadeUp .6s forwards;
}
#splash_logo p{
  color:#fff;
  font-size:21px;
  margin-top:16px;
  opacity:0;
  animation:splashFadeUp .6s forwards;
  animation-delay:.3s;
}
@keyframes splashFadeUp{
  from{ opacity:0; transform:translateY(24px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ハンバーガーメニュー（モバイル専用・新規） */
.hamburger{
  display:none;
  position:fixed;
  top:14px;
  right:14px;
  width:44px;
  height:40px;
  background:transparent;
  border:none;
  cursor:pointer;
  z-index:300;
  padding:0;
}
.hamburger span{
  display:block;
  position:absolute;
  left:6px;
  right:6px;
  height:3px;
  border-radius:2px;
  background:var(--navy);
  transition:transform .3s ease, opacity .3s ease, top .3s ease;
}
.hamburger span:nth-child(1){ top:9px; }
.hamburger span:nth-child(2){ top:19px; }
.hamburger span:nth-child(3){ top:29px; }
.hamburger.open span:nth-child(1){ top:19px; transform:rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ top:19px; transform:rotate(-45deg); }

@media (max-width:760px){
  header{ position:relative; }
  .hamburger{ display:block; }
  nav{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    position:fixed;
    top:0;
    right:0;
    width:78%;
    max-width:320px;
    height:100%;
    overflow-y:auto;
    z-index:250;
    box-shadow:-4px 0 16px rgba(0,0,0,.2);
    transform:translateX(100%);
    visibility:hidden;
    transition:transform .35s ease, visibility .35s ease;
  }
  nav.mobile-open{ transform:translateX(0); visibility:visible; }
  nav .has-dropdown{ display:block; width:100%; }
  nav .has-dropdown > .dropdown-toggle{ display:block; width:100%; box-sizing:border-box; }
  nav .dropdown-menu{ position:static; width:100%; }
  body::after{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.4);
    z-index:240;
    opacity:0;
    visibility:hidden;
    transition:opacity .35s ease, visibility .35s ease;
  }
  body.nav-open::after{ opacity:1; visibility:visible; }
}

/* 追従ナビ＋現在地ハイライト（5-1-26・PC版） */
@media (min-width:761px){
  nav{ position:sticky; top:0; z-index:60; }
  nav a.scroll-current,
  nav .dropdown-toggle.scroll-current{ background:var(--navy-tint); }
}

/* A スクロール進捗バー */
#scroll-progress{
  position:fixed; top:0; left:0; height:3px;
  background:var(--gold); width:0%; z-index:9998;
  transition:width .1s linear;
}

/* B ヒーロー↓バウンス矢印 */
#scroll-arrow{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  font-size:32px; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.5);
  animation:arrowBounce 1.4s ease-in-out infinite;
  transition:opacity .4s; pointer-events:none; z-index:10;
}
@keyframes arrowBounce{
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%{ transform:translateX(-50%) translateY(8px); }
}

/* E フォームバリデーション */
.form-error{ color:#c0392b; font-size:14px; margin:-10px 0 10px; }
.input-error{ border-color:#c0392b !important; background:#fff8f8 !important; }

/* F 印刷スタイル */
@media print{
  nav, .hamburger, #page-top, #scroll-progress, #scroll-arrow,
  #splash, .cta, footer a{ display:none !important; }
  body{ background:#fff; color:#000; font-size:12pt; }
  header{ background:#fff; color:#000; border-bottom:2pt solid #000; }
  section{ max-width:100%; padding:12pt; }
  a{ color:#000; text-decoration:none; }
  img{ max-width:100%; }
}

/* ⑤ ナビhover下線アニメーション（PC版） */
@media (min-width:761px){
  nav > a, nav .dropdown-toggle{ position:relative; }
  nav > a::after, nav .dropdown-toggle::after{
    content:""; position:absolute; bottom:0; left:0; right:0;
    height:3px; background:var(--gold);
    transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
  }
  nav > a:hover::after, nav .dropdown-toggle:hover::after{ transform:scaleX(1); }
}

/* ⑥ CTAセクション：背景グラデーションアニメーション */
.cta{
  background:linear-gradient(135deg, var(--navy) 0%, #26487a 50%, var(--navy) 100%);
  background-size:200% 200%;
  animation:ctaShimmer 8s ease infinite;
}
@keyframes ctaShimmer{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

/* ⑦ カードoverlay hover */
.card{ position:relative; overflow:hidden; }
.card::after{
  content:""; position:absolute; inset:0;
  background:rgba(29,53,87,.1); opacity:0;
  transition:opacity .3s; pointer-events:none; border-radius:6px;
}
.card:hover::after{ opacity:1; }

/* ① スクロールfadeUp出現 */
.will-animate{ opacity:0; transform:translateY(30px); transition:opacity .65s ease, transform .65s ease; }
.will-animate.is-visible{ opacity:1; transform:translateY(0); }

/* ② h3 下線アニメーション（左から右に金色ラインが伸びる） */
h3::after{ content:""; display:block; height:3px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .5s ease .15s; margin-top:8px; }
h3.h3-line::after{ transform:scaleX(1); }

/* ③ 写真ホバーズーム */
.photo-grid{ overflow:hidden; }
.photo-grid img{ transition:transform .4s ease; }
.photo-grid img:hover{ transform:scale(1.06); }
.card img{ transition:transform .4s ease; }
.card:hover img{ transform:scale(1.04); }

/* 投稿写真ページ（PCでは3列） */
.posts-grid{ grid-template-columns:repeat(3,1fr); }

/* モバイル版：活動内容・投稿写真の縦表示、画像の軽量化 */
@media (max-width:760px){
  .cards, .photo-grid{
    display:block;
  }
  .cards .card, .photo-grid img{
    display:block;
    width:100%;
    margin-bottom:16px;
  }
  .card img, .photo-grid img{
    max-height:240px;
    width:100%;
    object-fit:cover;
  }
}