@charset "utf-8";

/* ===============================================================
   1. ベースリセット & 変数定義
================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }
button { border: 0; background: none; }

/* ⚙ カラーテーマ・寸法 */
:root {
  --brand:#d91414;     /* メイン赤 */
  --ink:#333;          /* 本文色 */
  --ink-2:#666;        /* サブテキスト色 */
  --line:#eee;         /* 罫線グレー */
  --bg:#fff;           /* 背景白 */
  --rail-left:50px;    /* タイムライン軸位置 */
  --circle:84px;       /* タイムライン円サイズ */
}

#main-area {
  position: relative;z-index:-2;

}

p{text-align: justify;}

/* 背景用SVGラッパー */
#bg-svg-container {
  position: relative; /* 親セクション基準 */
  width: 100%;
  height: 150px; /* 浮かぶ範囲 */
  pointer-events: none;
  overflow: visible;
  z-index: -1;
}
.red{color: #d91414;}
.bg-svg-item {
  position: absolute;
  bottom: 0;
  opacity: 0; /* 最初は透明 */
  animation-name: floatUpSwing;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes floatUpSwing {
  0% { transform: translateY(0) translateX(0) rotate(0deg) scale(0.5); opacity: 0; }
  20% { opacity: 1; }
  50% { transform: translateY(-50%) translateX(20px) rotate(15deg) scale(0.8); }
  80% { transform: translateY(-90%) translateX(-20px) rotate(-15deg) scale(1); }
  100% { transform: translateY(-120%) translateX(0) rotate(0deg) scale(1); opacity: 0; }
}

/* ===============================================================
   2. タイポグラフィ & ヘッダー
================================================================ */
body {
  font-family: "IBM Plex Sans JP", 'Helvetica Neue', sans-serif; 
  color: var(--ink);
  background: var(--bg);
    line-height: 1.8;letter-spacing: 0.03em;
}

/* --- 共通書体（Lato）: 見出し/ナビ/ボタン/フッター/トップリード/ロゴ --- */
.top-lead,
h1, h2, h3 span,
header,
#g-nav, #pc-nav,
.openbtn,
#footer,
#splash-logo {
  font-family: "Lato", sans-serif;
}

#splash-logo span{font-family: "IBM Plex Sans JP", 'Helvetica Neue', sans-serif;}

.no-scroll { overflow: hidden; }
/* --- 見出し --- */
h1 {font-size: 1.6rem;font-weight:900;
  margin:0;
  color: var(--brand);
}
h2 {
  color:#d91414;
  text-transform: uppercase; /* サイズは section h2 に委譲 */
}

/* --- ヘッダー --- */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: rgba(255,255,255,0.8);
}
#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /*gap: 1rem;*/
  padding: .75rem 1rem;
}

/* --- PCナビ --- */#pc-nav{ padding:0 3rem 0 0 }
#pc-nav ul { display:flex; gap:1rem; font-weight:900;}
#pc-nav a {
  padding:.5rem .75rem;
  border-radius:.5rem;
}
#pc-nav a:hover { background:#f6f6f6; }

/* ===============================================================
   3. モバイルナビ
================================================================ */
.openbtn {position: fixed; /* 画面上に固定 */
  z-index: 11000;   /* メニューより上 */
  display:none;
  align-items:center;
  gap:.5rem;
  font-weight:700;
    top:20px;
      width: 48px;   /* 横幅確保 */
  height: 48px;  /* 高さ確保 */
  justify-content: center;
  cursor: pointer;
  padding: 0;
    
}
.openbtn span {
  display:block;
  width:44px; height:2px;
  background:var(--ink);
  position:relative;
}
.openbtn span::before, .openbtn span::after {
  content:"";
  position:absolute;
  left:0;
  width:44px; height:2px;
  background:var(--ink);
}
.openbtn span::before { top:-6px; }
.openbtn span::after  { top:6px; }
.openbtn.active span { background:transparent; }
.openbtn.active span::before { transform:translateY(6px) rotate(45deg); }
.openbtn.active span::after  { transform:translateY(-6px) rotate(-45deg); }

/* --- ナビ本体 --- */
#g-nav {background: #000;
  position:fixed;
  inset:auto 0 0 0;background:#fff;
  border-top:1px solid var(--line);
  transform:translateY(100%);
  transition:transform .35s ease;
  z-index:1000;
}
#g-nav.panelactive { transform:translateY(0); }
#g-nav-list { padding:1rem; }
#g-nav-list li+li { border-top:1px solid var(--line); }
#g-nav-list a {font-weight: 700;
  display:block;
  padding:1rem 0;
  text-align:center;
}

/* モバイル時の表示制御 */
@media (max-width: 991px) {
    
    h1 {display: none;
}
    
    header {
        background: transparent;  /* 背景を消したい場合 */
      
    }

  #pc-nav { display:none; }
  .openbtn { display:flex; }
  #g-nav { display:block; }
}


/* サブピクセル見切れ対策 ＋ 下からスライド */
#g-nav {
  position: fixed;
  inset: auto 0 0 0;
  background: #fff;
  border-top: 0; /* 隠れている時はボーダー出さない */
  transform: translateY(calc(100% + 2px)) translateZ(0);
  transition: transform .35s ease;
  will-change: transform;
  backface-visibility: hidden;
  z-index: 15;
}
#g-nav.panelactive {
  transform: translateY(0);
  border-top: 1px solid var(--line);
}


/* ===== モバイルナビ：全画面オーバーレイ化 ===== */
#g-nav {
  position: fixed;
  inset: 0;                        /* 画面ぜんぶ被せる（ヘッダーも覆う） */
  height: 100vh;                  /* モバイルの実表示高にフィット */
  background: #fff;
  z-index: 15;
  /* 下からスライドイン */
  transform: translateY(100%);
  transition: transform .35s ease;
  will-change: transform;
  backface-visibility: hidden;
  border-top: 0;                   /* 非表示時の1pxチラ見え防止 */
  padding-bottom: env(safe-area-inset-bottom);
}
#g-nav.panelactive {
  transform: translateY(0);
}

/* ===== リストを上下左右まんなかに配置 ===== */
#g-nav-list {
  /* 余白と安全域 */
  padding: clamp(16px, 2.5vh, 32px) 24px max(16px, env(safe-area-inset-bottom));
  margin: 0 auto;
  max-width: min(560px, 92vw);

  /* 中央寄せ */
  display: flex;
  flex-direction: column;
  align-items: center;     /* 左右中央 */
  justify-content: center; /* 上下中央 */
  gap: 12px;
  height: 100%;            /* 親(#g-nav)の高さいっぱいにして中央寄せを効かせる */
}

/* 見栄え＆タップ領域 */
#g-nav-list li { width: 100%; list-style: none; border: 0; } /* 既存の区切り線は外す */
#g-nav-list a {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px 8px;
  font-size: clamp(16px, 4.5vw, 20px);
  font-weight: 700;
  letter-spacing: .06em;
  border-radius: 10px;
}
#g-nav-list a:active { opacity:.75; }

/* （任意）ヘッダーは常に見せたい場合はこちら：
   #g-nav { top: var(--header-h, 56px); height: calc(100dvh - var(--header-h, 56px)); }
*/

/* ===============================================================
   4. ヒーローセクション
================================================================ */
#top-main { position:relative; }

.top-visual { aspect-ratio:16/9; background:#f9f9f9; }
.top-visual img {
  width:100%; height:100%;
  object-fit:cover;
object-position: center bottom;
}

/* --- タイトルテキスト --- */
.top-lead {
  position:absolute;letter-spacing: 0.08em;
  left:1%; right:0; bottom:-17%;
  width:100%;
  font-size:9vw;
  line-height:1.1;
  color:var(--brand);
  font-weight:900;text-align: left;
}

/* --- モバイル時 --- */
@media (max-width:992px){
  .top-visual { aspect-ratio:auto; height:80vh; overflow:hidden; }
  .top-lead { bottom:3.5%; top:auto; font-size:16.4vw;/* 画面幅の16%を文字サイズに */ letter-spacing: 0.1em;}
}
/* --- モバイル時 --- */
@media (max-width:768px){
.top-lead { bottom:9%; top:auto;font-size:16.4vw; /* 画面幅の16%を文字サイズに */ letter-spacing: 0.1em;}
}

/* --- モバイル時 --- */
@media (max-width:480px){
.top-lead { bottom:12.5%; top:auto;font-size:16.4vw; /* 画面幅の16%を文字サイズに */ letter-spacing: 0.1em;}
}

/* ===============================================================
   5. 名言（Daily Quote）
================================================================ */
#daily-quote { 
  position:absolute;
  top:12%; left:3%;
  max-width:min(360px,90%);
background-color: rgba(217,20,20,0.8);
    color: #f9f9f9;
  padding:0.5rem 0.9rem 0.5rem 1rem;
}
#daily-quote .today {
  font-size:.9rem;
  text-transform:uppercase;
color: #f9f9f9;
  margin:0 0 .25rem;

}

    
.today {opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;}

.today.show {
  opacity: 1;
  transform: translateY(0);
}


#quote-text {
  font-size:clamp(1rem,1vw + .8rem,1.5rem);
  font-weight:800;
  opacity:0;
  transform:translateY(-8px);
  transition:all .8s ease;
}
#quote-text.show {
  opacity:1;
  transform:translateY(0);
}

/* ===============================================================
   6. 共通セクションスタイル
================================================================ */
main section {
  padding:1rem;
  text-align:center;
}
section h2 {font-weight:900;
  font-size:clamp(2rem,4vw + 1rem,5rem); /* 見出しサイズの主導線 */
  margin:0 0 1rem;
}
section h3 {
  font-size:clamp(1rem,.8vw + .85rem,1.25rem);
  font-weight:600;
  color:#111;
  margin:.5rem 0 1rem;
}
/* ===============================================================
   INTRO
================================================================ */
#intro{padding:90px 0; }


#intro .intro-txt{width: 100%;max-width: 600px;margin: auto;text-align: center;}
img.intro-txt-img{width: 100%;}

@media (max-width:768px){
#intro .intro-txt{width: 100%;max-width: 80%;}

}



/* ===============================================================
   7. タイムライン（左レール）
================================================================ */
.timeline {
  --progress:0;
  position:relative;
  max-width:980px;
  margin:0 auto;
  padding:2rem 0 3rem;
}
.timeline::before {
  content:"";
  position:absolute;
  top:0;
  left:var(--rail-left);
  width:4px;
  height:100%;
  background:var(--line);
}
.timeline::after {
  content:"";
  position:absolute;
  top:0;
  left:var(--rail-left);
  width:4px;
  height:100%;
  /* 単色はグラデで上書きされるため削除済み */
  transform:scaleY(var(--progress));
  transform-origin:top;
  transition:transform .28s ease-out;
  background:
    linear-gradient(var(--brand), var(--brand)),
    repeating-linear-gradient(180deg, rgba(255,255,255,.18) 0 10px, rgba(255,255,255,0) 10px 20px);
  background-clip:padding-box;
  animation:flow 3s linear infinite;
}

.event {
  position:relative;
  padding-left:calc(var(--rail-left) + var(--circle) * .5 + 18px);
  margin:0 auto 2.2rem;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .45s ease, transform .45s ease;
  max-width:980px;
}
.event.is-in { opacity:1; transform:none; }

/* --- レベル円 --- */
.circle {
  position:absolute;
  left:var(--rail-left);
  top:.5rem;
  transform:translateX(-50%);
  width:var(--circle);
  height:var(--circle);
  border-radius:50%;
  background:var(--brand);
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  box-shadow:0 0 0 4px #fff;
  border:3px solid #fff;
  z-index:2;
}
.circle .lv {
  font-size:.72rem;
  line-height:1;
  font-weight:800;
  opacity:.85;
  animation:shimmer 2.2s ease-in-out infinite;
}
.circle .num {
  font-size:1.25rem;
  font-weight:900;
  line-height:1;
}

/* --- 出現マーカー --- */
.event.is-in::before {
  content:"";
  position:absolute;
  left:calc(var(--rail-left) - 7px);
  top:.95rem;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 0 3px #fff;
}

/* ===============================================================
   8. Messages（ファンメッセージ）
================================================================ */
.messages {
  display:grid;
  gap:1.5rem;
  max-width:100%;
  margin:2rem auto;
  padding:0 1rem;
}
.message {
  border:1px solid var(--line);
  border-radius:1rem;
  padding:1.25rem 1.5rem;
  background:#fafafa;
  text-align:left;
  line-height:1.6;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
  transition:transform .3s ease;
}
.message:hover { transform:translateY(-4px); }
.message .name {
  font-weight:700;
  font-size:1.1rem;
  color:var(--brand);
  margin-bottom:.5rem;
}
.message p.comment { font-size:0.9rem; color:var(--ink); }

/* PCで2列 */
@media (min-width:992px){
  .messages { grid-template-columns:1fr 1fr; max-width:80%; }

}/**/

/* スマホ */
@media (max-width:768px){
    
    #topics h3 { font-size:0.9rem; }

}/**/
/* ===============================================================
   9. おみくじセクション
================================================================ */
#omikuji{padding:24px 12px;background-image: url("../img/torii2.svg");background-repeat: no-repeat;background-position: center 40%;background-size: 40% 40%; }

.omi-grid{max-width:900px;margin:0 auto;display:grid;grid-template-columns:1fr minmax(260px,420px);gap:10px;align-items:center;padding-top: 200px;}

@media (max-width:992px){ #omikuji{background-position:center 10%;background-size:40% 40%;}
    .omi-grid{grid-template-columns:1fr;padding-top:10px;} }

.omi-avatar{position:relative;display:grid;place-items:center;aspect-ratio:1/1;overflow:hidden;}
.omi-img{width: min(70%, 50%);height:auto;display:block;opacity:0;transform:translateY(-18%)}
.omi-shadow{position:absolute;bottom:10%;left:50%;transform:translateX(-50%);width:50%;height:14px;border-radius:50%;background:rgba(0,0,0,.12);filter:blur(6px);animation:shadow-idle 6.2s ease-in-out infinite}

/* 口（オーバーレイ楕円／位置は必要なら調整） */
.omi-mouth {
  position: absolute;
  left: 50%;
  top: 47%;
  width: 12%;
  height: 6.2%;
  background: #8c1e1e;
  border-radius: 999px;
  transform: translate(-50%, -50%) scaleY(.16);
  transform-origin: 50% 50%;
  box-shadow: 0 .6px 0 rgba(0,0,0,.25);
  filter: blur(.1px);
}
/* 吹き出し（発話時のみ出す） */
.omi-bubble {
  position: absolute;
  top: 8%;
  right: 6%;
  background: #fff;
  border: 2px solid var(--brand);
  color: var(--brand);
  padding: .5rem .7rem;
  border-radius: .75rem;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 3px 10px rgba(0,0,0,.06);
  opacity: 0;
  transform: translateY(4px) scale(.98);
  transition: opacity .25s ease, transform .25s ease;
}
.omi-bubble::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 20px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-left: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
}

.omi-ui{text-align:center;margin: auto;}

.omi-ui p.copy-omi{padding: 0;width:360px;}
@media (max-width:768px){
.omi-ui p.copy-omi{padding: 0;width:100%;max-width:360px; }   
}/**/
    
#draw-btn{font-weight:800;font-size:16px;padding:.7rem 1.1rem;border:2px solid var(--brand, #d91414);color:var(--brand, #d91414);background:#fff;border-radius:.8rem;cursor:pointer;transition:.25s}
#draw-btn:hover{background:var(--brand, #d91414);color:#fff}
#draw-btn:active{transform:translateY(1px) scale(.995)}

.omi-popup{margin-top:12px;display:none}
.omi-popup[aria-hidden="false"]{display:block}
.omi-popup__card{background:#fff;border:1px solid var(--line, #ddd);border-radius:12px;padding:14px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.08);animation:card-pop .34s cubic-bezier(.2,.9,.2,1.1)}
.omi-popup__fortune{margin: auto;text-align: center;font-weight: 600;}
.omi-popup__fortune strong{font-size:1.8rem;color:var(--brand, #d91414);}
.omi-popup__message{color:var(--ink-2, #666);margin:.35rem 0}
.omi-close{display:inline-block;margin-top:.2rem;padding:.5rem .9rem;border-radius:.6rem;background:#000;color:#fff;font-weight:700}

/* 降臨→一度だけ発話→呼吸 */
.omi-avatar.is-enter .omi-img{
  animation:
    omi-descend .9s cubic-bezier(.22,.61,.36,1) both,
    omi-breath 3.8s cubic-bezier(.22,.61,.36,1) .9s infinite,
    omi-float 4.8s cubic-bezier(.22,.61,.36,1) .9s infinite;
}
.omi-avatar.saying .omi-mouth{animation:mouth-once 620ms cubic-bezier(.22,.61,.36,1) 1}
.omi-avatar.saying .omi-bubble{opacity:1;transform:translateY(0) scale(1);animation:bubble-pop 420ms cubic-bezier(.2,.9,.2,1.1) 1}

/* Keyframes */
@keyframes omi-breath {
  0%, 100% { transform:translateY(0) rotate(-.6deg) scale(1); filter:none; }
  50%      { transform:translateY(-2px) rotate(.4deg) scale(1.015); filter:drop-shadow(0 2px 2px rgba(0,0,0,.06)); }
}
@keyframes omi-float {
  0%   { transform:translateY(0) rotate(-.6deg) }
  50%  { transform:translateY(-6px) rotate(.6deg) }
  100% { transform:translateY(0) rotate(-.6deg) }
}
@keyframes shadow-idle {
  0%, 100% { transform:translateX(-50%) scale(1); opacity:.32; }
  50%      { transform:translateX(-50%) scale(.92); opacity:.44; }
}
@keyframes omi-descend {
  0%   { transform:translateY(-18%); opacity:0; filter:blur(.4px); }
  60%  { transform:translateY(4%);   opacity:1; filter:none; }
  100% { transform:translateY(0);    opacity:1; }
}
@keyframes mouth-once {
  0%   { transform:translate(-50%, -50%) scaleY(.16); }
  28%  { transform:translate(-50%, -50%) scaleY(.95); }
  62%  { transform:translate(-50%, -50%) scaleY(.32); }
  100% { transform:translate(-50%, -50%) scaleY(.16); }
}
@keyframes bubble-pop {
  0%   { transform:translateY(4px) scale(.98); opacity:0; }
  60%  { transform:translateY(-1px) scale(1.03); opacity:1; }
  100% { transform:translateY(0) scale(1); opacity:1; }
}
@keyframes card-pop {
  0%   { transform: translateY(8px) scale(.985); opacity:0; filter: blur(.5px); }
  100% { transform: translateY(0) scale(1); opacity:1; filter: none; }
}

/* ===============================================================
   10. フッター
================================================================ */
footer {
  padding:2rem 1rem;
  text-align:center;
  color:var(--ink-2);
}

.footer-logo{margin: auto;text-align: center;max-width: 200px;}
.footer-logo img{width:100%;max-width: 200px;}
.footer-copy{margin: auto;text-align: center;}

#page-top {
  position:fixed;
  right:1rem;
  bottom:1rem;
  z-index:10;
}
#page-top a {
  display:inline-block;
  padding:.6rem .8rem;
  background:#000;
  color:#fff;
  border-radius:.75rem;
  font-weight:700;
  opacity:.9;
}
.RightMove { transform:translateX(120%); transition:transform .35s ease; }
.LeftMove  { transform:translateX(0);    transition:transform .35s ease; }

/* ===============================================================
   11. アニメーション（ユーティリティ）
================================================================ */
@keyframes pulse-ring {
  0%{ box-shadow:0 0 0 0 rgba(176,0,0,.35); }
  80%{ box-shadow:0 0 0 16px rgba(176,0,0,0); }
  100%{ box-shadow:0 0 0 0 rgba(176,0,0,0); }
}
@keyframes pop { 0%{transform:scale(.9);}60%{transform:scale(1.08);}100%{transform:scale(1);} }
@keyframes flow { to{ background-position:0 120%; } }
@keyframes shimmer { 0%{opacity:.6;}50%{opacity:1;}100%{opacity:.6;} }

/* 表示演出ユーティリティ */
.fadeUp, .slideInRight, .zoomIn, .rotateIn {
  opacity:0;
  transition:all .6s ease;
}
.fadeUp.is-in { opacity:1; transform:none; }
.slideInRight { transform:translateX(12px); }
.slideInRight.is-in { opacity:1; transform:none; }
.zoomIn { transform:scale(.96); }
.zoomIn.is-in { opacity:1; transform:scale(1); }
.rotateIn { transform:rotate(-2deg) scale(.98); }
.rotateIn.is-in { opacity:1; transform:rotate(0) scale(1); }

/* 見出しhop */
.split span { display:inline-block; opacity:0; transform:translateY(.6em); }
.split.is-in span { animation: hop .55s ease both; }
@keyframes hop { from{opacity:0;transform:translateY(.6em)} to{opacity:1;transform:translateY(0)} }

/* 到達演出 */
.event.is-in .circle { animation:pulse-ring 1.2s ease-out 1; }

/* ホバー */
@media (hover:hover){
  .card figure { overflow:hidden; }
  .card img { transition:transform .6s ease; }
  .card:hover img { transform:scale(1.06) translateY(-2%); }
}

/* ===============================================================
   12. レスポンシブ補正（併合済み）
================================================================ */
@media (max-width:992px){

  #daily-quote{ position:static; padding:1rem; min-width: 100%;}
  :root{ --rail-left:42px; --circle:76px; }
  .card{ grid-template-columns:minmax(200px,40%) 1fr; }
}
@media (max-width:768px){
  :root{ --rail-left:22px; --circle:64px; }
  .event{ padding-left:calc(var(--rail-left) + var(--circle) * .5 + 14px); }
  .card{ grid-template-columns:1fr; }
  .card img{ aspect-ratio:16/9; }
}
@media (max-width:480px){
  :root{ --rail-left:18px; --circle:56px; }
  .circle .lv{ font-size:.68rem; }
  .circle .num{ font-size:1.05rem; }
  .card .desc{ font-size:.97rem; }
}

/* ===============================================================
   13. ローディング
================================================================ */
#loading {
  position:fixed;
  inset:0;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  font-family:"Lato", sans-serif;
  font-weight:900;
  font-size:2.4rem;
  color:var(--brand);
  z-index:9999;
  transition:opacity .6s ease, visibility .6s ease;
}
.loading-logo{margin: auto;text-align: center;line-height: 1.5;}
.loading-logo span { font-size:1rem; font-weight:400;display:block;}
#loading.hide { opacity:0; visibility:hidden; }

/* ============================================================
   14. celebratio
============================================================ */
#celebratio {  max-width: 1000px;
  margin: auto;
  border-top: 2px solid #bfa14b;border-bottom: 2px solid #bfa14b;padding: 2rem 0;
}
#celebratio h3 strong,
#celebratio p span {
  color: var(--brand);
}

#celebratio .celebratio-area {
margin: auto;
}

#celebratio .celebratio-area .content {
  padding: 2rem;

}

/* ▼スマホ対応 */
/* ===== スマホでレイアウト解除 ===== */
@media (max-width: 992px) {
#celebratio {padding: 0;
  max-width: 100%;
  margin: auto;
}
  /* flex解除・余白リセット */
  #celebratio .celebratio-area {

  }




  /* contentのflexも解除したい場合 */
  #celebratio .celebratio-area .content {width: 100%;
 
  }



}/**/









/* ================================
   ◆ Campaign Section
================================ */
.campaign-section {  max-width: 1000px;text-align: left;
  margin: auto;
  border-top: 2px solid #bfa14b;border-bottom: 2px solid #bfa14b;padding: 2rem
}
.campaign-section h3 {margin: auto; text-align: center;width:360px;}
.campaign-section h3 img{width:100%;}


.campaign-section h4 {text-align: center;
  font-weight: bold;padding:0 0.8rem;width: 100%;border-radius: 0.3rem;
  margin-bottom: .5em;border:1px solid #eee;background: #eee;
}
.campaign-section a { text-decoration: underline; }

.campaign-section .tweet-btn{font-weight:800;font-size:16px;padding:.7rem 3rem;border:2px solid var(--brand, #d91414);color:var(--brand, #d91414);background:#fff;border-radius:.8rem;cursor:pointer;transition:.25s;min-width:300px;}
.campaign-section .tweet-btn:hover{background:var(--brand, #d91414);color:#fff}
.campaign-section .tweet-btn:active{transform:translateY(1px) scale(.995)}

.toko-area{
width: 100px;margin: auto;
    text-align: center;
}

.campaign-section .note {
  margin-top: 1em;
  font-size: .95em;
  color: #555;
}
ul.attention-list{padding: 1rem ;}
.attention-list li {padding: 0;
  font-size: 0.8rem;
  list-style: disc;
  margin-bottom: .4em;line-height: 1.4;
}

/* モバイル時の表示制御 */
@media (max-width: 992px) {
.campaign-section {  max-width: 100%;}
    
.campaign-section h3 {margin: auto; text-align: center;width:80%;}
    
    .toko-area{
width:120px;margin: auto;
    text-align: center;
}
    
    
}/**/







/* ===============================================================
   15. 画面遷移（スプラッシュ）
================================================================ */
#splash {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 9999999;
  text-align:center;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: opacity .4s ease;
}
#splash.fade-out { opacity: 0; pointer-events: none; }
#splash.hide { display:none; }

#splash-logo {min-width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.6rem;
  font-weight: bold;
  color: #d91414;letter-spacing: 0.1em;
}
#splash-logo span{display: block;font-size: 1rem; font-weight: normal;}

/* モバイル時の表示制御 */
@media (max-width: 768px) {

}


#splash-logo.fade-out { opacity: 0; transition: opacity .4s ease; }
.splashbg{ display: none; }
body.appear .splashbg{
  display: block;
  position:fixed;
  z-index: 999;
  inset: 0;
  width: 100%;
  height: 100vh;
  transform: scaleY(0);
  background-color: #d91414;
  animation-name: PageAnime;
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
@keyframes PageAnime{
  0% { 
    transform-origin: left; 
    transform: scaleX(0); 
  }
  50% { 
    transform-origin: left; 
    transform: scaleX(1); 
  }
  50.001% { 
    transform-origin: right; 
  }
  100% { 
    transform-origin: right; 
    transform: scaleX(0); 
  }
}

/* 画面遷移後に現れるコンテンツ */
#wrapper{ opacity: 0; transition: opacity .6s ease;overflow: hidden; }
body.appear #wrapper {
  animation-name: PageAnimeAppear;
  animation-duration: 1s;
  animation-delay: .8s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes PageAnimeAppear{ 0% { opacity: 0; } 100% { opacity: 1; } }


/* ===============================================================
   16. 小物
================================================================ */
.furu-chan-img{ width:80px; }
.furu-base-img{ width:80px; }

  /* ▼ furu-base（ジャンプ） ------------------------ */
  .furu-base {
    position: relative;
    width:80px;
    margin: 60px auto;
    cursor: pointer;
  }
  .furu-base img {
    display: block;
    width: 100%;
    height: auto;
    animation: step .48s ease-in-out infinite;
    transform-origin: 50% 100%;
  }
  .furu-base::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 60%;
    height: 6px;
    background: radial-gradient(closest-side, rgba(0, 0, 0, .35), transparent);
    transform: translateX(-50%);
    filter: blur(1px);
    animation: shadow .48s ease-in-out infinite;
    pointer-events: none;
  }
  .jumper.jumping {
    animation: jump .6s cubic-bezier(.25, .72, .42, 1.4);
  }
  @keyframes step {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-4px) rotate(2deg); }
  }
  @keyframes shadow {
    0%, 100% { transform: translateX(-50%) scaleX(1); opacity: .9; }
    50%      { transform: translateX(-50%) scaleX(1.15); opacity: .6; }
  }
  @keyframes jump {
    0%   { transform: translateY(0); }
    25%  { transform: translateY(-30px); }
    50%  { transform: translateY(-45px); }
    75%  { transform: translateY(-15px); }
    100% { transform: translateY(0); }
  }

  /* ▼ furu-chan（おじぎ） ------------------------ */
  .furu-chan{
    position:relative;
    width:60px;
    margin:30px auto;
    cursor:pointer;
  }
  .furu-chan img{
    display:block;
    width:100%;
    height:auto;
    transform-origin:50% 100%;
  }

  /* クリック時のジャンプ動作 */
  .bow.thanks{
    animation:jump .8s cubic-bezier(.25,.72,.42,1.4) forwards;
  }
  @keyframes jump{
    0%   { transform:translateY(0); }
    20%  { transform:translateY(-25px); }
    40%  { transform:translateY(-55px); }
    55%  { transform:translateY(-60px); }
    75%  { transform:translateY(-25px); }
    90%  { transform:translateY(-8px); }
    100% { transform:translateY(0); }
  }

  /* 「ありがとう！」吹き出し */
  .furu-chan.say-thanks::after{
    content:"ありがとう！";
    position:absolute;
    left:50%;
    top:-16px;
    transform:translate(-50%,-6px) scale(.7);
    padding:.3rem .5rem;
    border-radius:12px;
    background:#fff;
    color:#222;
    font:600 13px/1.2 system-ui,-apple-system,Meiryo,sans-serif;
    box-shadow:0 4px 12px rgba(0,0,0,.25);
    white-space:nowrap;
    pointer-events:none;
    animation:pop .9s ease-out forwards;
  }
  @keyframes pop{
    0%{opacity:0;transform:translate(-50%,-2px) scale(.7)}
    35%{opacity:1;transform:translate(-50%,-14px) scale(1.05)}
    60%{opacity:1;transform:translate(-50%,-16px) scale(.98)}
    100%{opacity:0;transform:translate(-50%,-24px) scale(.94)}
  }

/* --- compact: card photo count対応 (one / two / desc-below) --- */

/* --- カード構造 --- */
.card-his {
  display:grid;
  grid-template-columns:minmax(280px,36%) 1fr;
  gap:1rem;
  overflow:hidden;
}





/* --- 写真1枚 --- */
.card-his.one-photo {
  grid-template-columns: 1fr;
  align-items: start;
}
.card-his.one-photo figure {
  order: -1; /* 画像を上に */
  width: 100%;
}

/* --- 写真2枚 --- */
.card-his.two-photos {
  grid-template-columns: minmax(220px,40%) minmax(220px,40%);
  grid-auto-rows: auto;
  align-items: start;
}
.card-his.two-photos figure {
  margin: 0;
}

/* --- 写真2枚 + 説明下 --- */
.card-his.two-photos.desc-below {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto; /* デスクトップ：画像横並び、説明下 */
}
.card-his.two-photos.desc-below figure:nth-of-type(1) { grid-column:1; grid-row:1; }
.card-his.two-photos.desc-below figure:nth-of-type(2) { grid-column:2; grid-row:1; }
.card-his.two-photos.desc-below .desc { grid-column:1 / -1; grid-row:2; padding-top:.6rem; }

/* --- 写真2枚オーバーラップ --- */
.card-his.overlap {
  position: relative;
}
.card-his.overlap .img1 { position: relative; z-index: 2; }
.card-his.overlap .img2 {  position: relative;
  margin:100px 0 0 -40px;
  z-index: 1;
}

/* --- 画像共通 --- */


.card-his .desc {
  padding:1rem 1.1rem;
  text-align:left;
}
.card-his .desc .catch {font-size: 1.4rem;
  margin-top:.4rem;
  font-weight:700;
  color:var(--brand);
}


.card-his figure {
  overflow: hidden;
  display: block;
  width: 100%;
  margin: 0;
}
.card-his figure img {
  width: 100%;
  height: 100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display: block;
}
.card-his figcaption {
  font-size: 0.68rem;
  color: #666;
}

/* --- レスポンシブ：スマホは縦積み & オーバーラップ解除 --- */
@media (max-width: 768px) {
  .card-his,
  .card-his.one-photo,
  .card-his.two-photos,
  .card-his.two-photos.desc-below,
  .card-his.overlap {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 0.8rem;
  }

  /* desc-below 縦積み */
  .card-his.two-photos.desc-below {
    grid-template-rows: auto auto auto;
  }
  .card-his.two-photos.desc-below figure:nth-of-type(1),
  .card-his.two-photos.desc-below figure:nth-of-type(2) {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    margin: 0;      /* スマホでは重なり解除 */
    z-index: auto;  /* 重なりを解除 */
  }
  .card-his.two-photos.desc-below .desc {
    grid-column: 1;/*グリッドレイアウトの1列目・3行目に配置*/
    grid-row: 3;
    padding-top: 0.6rem;
    font-size: 0.88rem;
    line-height: 1.6;
  }


  .card-his.two-photos.desc-below .desc .catch {font-size: 1.1rem;
}




  /* overlap解除 */
  .card-his.overlap .img1,
  .card-his.overlap .img2 {
    margin: 0 !important;
    z-index: auto !important;
    position: relative; /* 安全のためリセット */
  }
}
/* ------------------------------------------------------------------- 
 * e.t.c
/*-------------------------------------------------------------------*/
.pc {
    display: block !important;
}
.sp {
    display: none !important;
}
/* ------------------------------------------------------------------- 
 * responsive:
 *  e.t.c
 * ------------------------------------------------------------------- */
@media screen and (max-width: 992px) {
    .pc {
        display: none !important;
    }
    .sp {
        display: block !important;
    }
} /*end*/



/* ------------------------------------------------------------------- 
 * 祭りだh2
/*-------------------------------------------------------------------*/

h2 {
  display: inline-block;
}

h2 .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0) translateX(0) scale(1);
  transition: all 0.3s ease-out;
}

h2 .char.jump {
  opacity: 1;
  animation: jumpFly 0.8s ease forwards;
}

@keyframes jumpFly {
  0%   { transform: translateY(0) translateX(0) scale(0.5); opacity: 0; }
  30%  { transform: translateY(-40px) translateX(calc(-10px + 20px * var(--rand))) scale(1.2); opacity: 1; }
  50%  { transform: translateY(-20px) translateX(calc(-5px + 10px * var(--rand))) scale(1.1); }
  70%  { transform: translateY(-10px) translateX(calc(-2px + 4px * var(--rand))) scale(1.05); }
  100% { transform: translateY(0) translateX(0) scale(1); }
}

/* 一文字ずつの登場用 */
.char-hero {
  display: inline-block;
  opacity: 0;
  transform: translateY(0) scale(1);
  transition: all 0.3s ease-out;
}

.jump-hero {
  opacity: 1;
  animation: jumpFly 0.8s ease forwards;
}