/* ===== front-page.php 専用：subpage-heavy.css を読み込んだ後に上書き/追加するルール ===== */
/* .head::before（ダンベル背景装飾）：TOPページのみ ===== */
.head{ position:relative; text-align:center; padding:54px 24px 8px; }
.head::before{
  content:"";
  position:absolute; top:2px; left:50%; transform:translateX(-50%);
  width:190px; height:76px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80'%3E%3Cg fill='%23544538'%3E%3Crect x='0' y='20' width='34' height='40' rx='8'/%3E%3Crect x='24' y='32' width='18' height='16' rx='3'/%3E%3Crect x='42' y='36' width='116' height='8' rx='4'/%3E%3Crect x='158' y='32' width='18' height='16' rx='3'/%3E%3Crect x='166' y='20' width='34' height='40' rx='8'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:contain;
  opacity:.07; z-index:0; pointer-events:none;
}
.head > *{ position:relative; z-index:1; }
/* 背景が濃い色のセクションは、濃茶色の装飾が同化して見えなくなるため白版に切り替え */
.feature .head::before,
.plan .head::before,
.access .head::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80'%3E%3Cg fill='%23ffffff'%3E%3Crect x='0' y='20' width='34' height='40' rx='8'/%3E%3Crect x='24' y='32' width='18' height='16' rx='3'/%3E%3Crect x='42' y='36' width='116' height='8' rx='4'/%3E%3Crect x='158' y='32' width='18' height='16' rx='3'/%3E%3Crect x='166' y='20' width='34' height='40' rx='8'/%3E%3C/g%3E%3C/svg%3E");
  opacity:.1;
}

/* .hero レイアウト：TOPページ専用ヒーロー（サブページの.subheroとは別物） */
.hero{ flex-direction:column; align-items:center; justify-content:flex-end; }

/* 料金の税込み注記（TOPページのみ） */
.price-tax-note{ color:rgba(255,255,255,.85); text-align:center; font-size:12px; margin:14px 0 0; }

/* スライダー矢印：TOPページのみ2px上に静止位置を調整 */
.slider-arrow{ transform:translateY(calc(-50% - 2px)); }
.slider-arrow:hover{ transform:translateY(calc(-50% - 2px)) scale(1.08); }
.slider-arrow{ transform: translateY(calc(-50% - 2px)) !important; }

/* 料金の税込み注記（フォント確定レイヤー） */
.price-tax-note{ color: rgba(255,255,255,.85) !important; text-align: center !important; font-size: 12px !important; margin: 14px 0 0 !important; }

/* NEWSティッカー：TOPページのみ下マージンをマイナスに調整 */
.news-ticker{ margin:30px auto -18px; }

/* ===== TOPページ：BLOGセクション（REVIEWとQ&Aの間） ===== */
.blog-section{ background:linear-gradient(180deg, #f7f0e5, #f1e7d6); padding:54px 0 56px; }
.blog-section .head{ padding-bottom:8px; }
.blog-slide-card{ display:block; background:#fff; border-radius:18px; overflow:hidden; box-shadow:var(--shadow); }
.blog-slide-card__thumb{ aspect-ratio:16/10; overflow:hidden; background:#e7e0d6; }
.blog-slide-card__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.blog-slide-card__body{ padding:18px 20px 22px; }
.blog-slide-card__cat{
  display:inline-block; font-family:"Oswald",sans-serif !important; font-size:11px !important;
  font-weight:700 !important; letter-spacing:.08em !important; color:#fff !important;
  background:var(--accent); padding:4px 12px; border-radius:999px; margin-bottom:10px;
}
.blog-slide-card__body h3{ font-size:16px !important; font-weight:700 !important; color:var(--secondary) !important; line-height:1.5 !important; margin:0 !important; }
.blog-section .btn-wrap{ text-align:center; margin-top:8px; }

/* ===== ローディングアニメーション ===== */
#loading{
  position:fixed; inset:0; z-index:9999;
  background:#3f3832;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s ease, visibility .6s ease;
}
#loading.done{ opacity:0; visibility:hidden; pointer-events:none; }
.loading-inner{ text-align:center; }
.loading-logo{
  width:140px; margin:0 auto 22px; display:block;
  opacity:0; transform:scale(.8);
  filter:drop-shadow(0 8px 24px rgba(255,156,0,.35));
  animation:loadingLogoIn 1s cubic-bezier(.22,.61,.36,1) .1s forwards;
}
@keyframes loadingLogoIn{
  0%{ opacity:0; transform:scale(.8); }
  60%{ opacity:1; transform:scale(1.05); }
  100%{ opacity:1; transform:scale(1); }
}
.loading-bar{
  width:180px; height:3px; margin:0 auto; position:relative;
  background:rgba(255,255,255,.15); border-radius:3px; overflow:hidden;
}
.loading-bar span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--accent), var(--accent-deep));
  box-shadow:0 0 14px rgba(255,156,0,.8);
  animation:loadingBarFill 1.3s cubic-bezier(.65,0,.35,1) .3s forwards;
}
@keyframes loadingBarFill{ to{ width:100%; } }
.loading-label{
  margin-top:14px; font-family:"Oswald",sans-serif; font-size:11px;
  letter-spacing:.3em; color:rgba(255,255,255,.55);
  opacity:0; animation:loadingLabelIn .6s ease .5s forwards;
}
@keyframes loadingLabelIn{ to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  #loading{ transition:none; }
  .loading-logo{ animation:none; opacity:1; transform:none; }
  .loading-bar span{ animation:none; width:100%; }
  .loading-label{ animation:none; opacity:1; }
}

/* ===== 背景装飾：各セクション末尾に埋め込む、筋トレする棒人間（そのセクションの背景色の中に表示） ===== */
/* 3ポーズをパラパラ漫画のように切り替えて動作を再現（1→2→3→2→1…の往復） */
.deco-strip{ position:relative; height:78px; margin-top:20px; overflow:visible; pointer-events:none; }
.deco-figure{
  position:absolute; top:4px; width:62px; height:66px; color:var(--secondary); opacity:.8;
}
.deco-figure svg{
  position:absolute; inset:0; width:100%; height:100%; display:block;
}
.deco-strip--left .deco-figure{ left:8%; }
.deco-strip--center .deco-figure{ left:50%; margin-left:-31px; }
.deco-strip--right .deco-figure{ right:8%; }

/* 3ポーズを重ねて配置し、opacityで順番に切り替える */
.deco-figure .pose{ opacity:0; }
.deco-figure .p1{ animation:enegymPose1 1.5s infinite; }
.deco-figure .p2{ animation:enegymPose2 1.5s infinite; }
.deco-figure .p3{ animation:enegymPose3 1.5s infinite; }
@keyframes enegymPose1{
  0%, 22%{ opacity:1; } 26%, 96%{ opacity:0; } 100%{ opacity:1; }
}
@keyframes enegymPose2{
  0%, 22%{ opacity:0; } 26%, 47%{ opacity:1; } 51%, 72%{ opacity:0; } 76%, 97%{ opacity:1; } 100%{ opacity:0; }
}
@keyframes enegymPose3{
  0%, 47%{ opacity:0; } 51%, 72%{ opacity:1; } 76%, 100%{ opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .deco-figure .pose{ animation:none; opacity:0; }
  .deco-figure .p1{ opacity:1; }
}

/* セクションの背景色に応じて棒人間の色を切り替える */
.feature .deco-figure,
.plan .deco-figure,
.access .deco-figure,
.contact .deco-figure{ color:#fff; opacity:.85; }
.about .deco-figure,
.review .deco-figure,
.blog-section .deco-figure,
.qa .deco-figure{ color:var(--secondary); opacity:.8; }