/* 配色比率：メイン(深緑)70% / サブ(cream/white)25% / アクセント(テラコッタ)5%
   改訂版：旧オレンジ(#e8895c)は白文字とのコントラストがWCAG AA(4.5:1)未達だったため、
   濃いテラコッタに変更（白文字でコントラスト比約5.3:1）。緑も少し深くしてスポーツクラブらしい引き締まった印象に。 */
:root{
  --green:#2f5d44;
  --green-tint:#dfe8e2;
  --orange:#b54a2c;
  --cream:#fff8ef;
  --text:#3a3a3a;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:"Hiragino Kaku Gothic ProN","游ゴシック",sans-serif;
  background:var(--green-tint);
  color:var(--text);
  font-size:19px;
  line-height:1.9;
}
header{ background:var(--green-tint); padding:30px 20px 10px; text-align:center; }
header h1{ margin:0; font-size:34px; color:var(--green); }
header p{ color:#5d6d61; font-size:16px; }
nav{
  background:var(--green);
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  position:sticky;
  top:0;
  z-index:10;
}
nav a{ padding:18px 20px; color:#fff; text-decoration:none; font-weight:bold; font-size:17px; }
nav a.current{ background:#3c6548; }
nav a:hover{ background:#3c6548; }
.hero{ position:relative; text-align:center; }
.hero img{ width:100%; max-height:320px; object-fit:cover; }
.hero .overlay{ position:absolute; bottom:20px; left:0; right:0; color:#fff; font-size:24px; text-shadow:0 2px 8px rgba(0,0,0,.7); }
.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{
  position:absolute;
  bottom:0; left:0; right:0;
  text-align:center;
  color:#fff;
  font-size:22px;
  font-weight:bold;
  background:rgba(47,93,68,.75);
  padding:14px 20px;
  text-shadow:none;
}
@media (min-width:600px){
  .hero-gallery-grid{ grid-template-rows:repeat(2,200px); }
}
section{ max-width:920px; margin:0 auto; padding:55px 24px; background:var(--cream); }
h3{ color:var(--green); font-size:26px; text-align:center; margin-bottom:30px; }
h3::after{ content:""; display:block; width:60px; height:4px; background:var(--orange); margin:10px auto 0; border-radius:2px; transform:scaleX(0); transform-origin:center; transition:transform .5s ease .15s; }
h3.h3-line::after{ transform:scaleX(1); }
.notice{ background:#fff; border-radius:6px; padding:24px; border-left:6px solid var(--orange); }
.notice li{ margin-bottom:14px; list-style:none; padding-left:1.4em; position:relative;}
.notice li::before{ content:"🏃"; position:absolute; left:0; }
.photo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.photo-grid img{ width:100%; border-radius:6px; box-shadow:0 3px 10px rgba(0,0,0,.15); }
.cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.card{ background:#fff; border-radius:6px; padding:20px; box-shadow:0 2px 8px rgba(0,0,0,.1); transition:box-shadow .3s, transform .3s; }
.card:hover{ box-shadow:0 12px 20px rgba(0,0,0,.2); 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(--green-tint); color:var(--green);
  display:flex; align-items:center; justify-content:center;
  text-align:center; font-size:14px; font-weight:bold; padding:10px; box-sizing:border-box;
}
table.list{ width:100%; border-collapse:collapse; background:#fff; }
table.list th, table.list td{ border:1px solid #eee; padding:12px; text-align:left; font-size:16px; }
table.list th{ background:var(--green); color:#fff; }
.members{ display:flex; justify-content:center; gap:40px; text-align:center; flex-wrap:wrap; }
.members div{ background:#fff; border-radius:6px; padding:24px 30px; border-top:4px solid var(--orange); }
.members .num{ font-size:34px; color:var(--green); font-weight:bold; }
.cta{ text-align:center; background:var(--green); color:#fff; padding:60px 20px; }
.cta a{ display:inline-block; margin-top:18px; background:var(--orange); color:#fff; padding:18px 44px; font-size:21px; text-decoration:none; border-radius:6px; font-weight:bold; transition:border-radius .3s ease-out, background .3s ease-out; }
.cta a:hover{ border-radius:30px; background:#943c20; }
form.contact-form{ background:#fff; padding:24px; border-radius:6px; border-top:4px solid var(--green); }
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(--orange); color:#fff; 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:#943c20; }
form.contact-form button:disabled{ opacity:0.6; cursor:not-allowed; }
.required{ color:#b54a2c; 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; background:var(--green); color:#fff; padding:24px; font-size:14px; }


/* ドロップダウンメニュー（クリック／マウスオーバーで展開） */
.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;
  color:var(--text);
}
.dropdown-menu a:last-child{ border-bottom:none; }
.dropdown-menu a:hover{ background:var(--green-tint); color:var(--text); }
.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; }
}
.site-logo{ display:block; margin:0 auto 10px; max-height:70px; }
.footer-logo{ display:block; margin:0 auto 10px; max-height:50px; }


/* ページトップへ戻るボタン */
#page-top{
  position:fixed;
  right:20px;
  bottom:20px;
  width:54px;
  height:54px;
  border-radius:50%;
  background:var(--green);
  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(--orange); }

/* トップ画面：フェードスライドショー（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-dots-slot{
  display:block !important;
  width:100%;
  background:var(--green) !important;
  padding:24px 0 16px !important;
  text-align:center !important;
  line-height:0;
}
.hero-dots-slot .slick-dots{
  position:static !important;
  display:block !important;
  text-align:center !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
  width:100%;
}
.hero-dots-slot .slick-dots li{
  display:inline-block !important;
  margin:0 6px !important;
  height:auto !important;
  width:auto !important;
}
.hero-dots-slot .slick-dots button{
  display:block !important;
  width:14px !important;
  height:14px !important;
  border-radius:50% !important;
  background:#fff !important;
  opacity:1 !important;
  color:transparent !important;
  border:2px solid var(--green) !important;
  padding:0 !important;
}
.hero-dots-slot .slick-dots .slick-active button{
  background:var(--orange) !important;
  border-color:var(--orange) !important;
}
@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(--green);
  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(--green);
  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 a.scroll-current,
  nav .dropdown-toggle.scroll-current{ background:#3c6548; }
}

/* A スクロール進捗バー */
#scroll-progress{
  position:fixed; top:0; left:0; height:3px;
  background:var(--orange); 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(--orange);
    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(--green) 0%, #3d7055 50%, var(--green) 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(47,93,68,.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); }

/* ③ 写真ホバーズーム */
.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;
  }
}