@charset "UTF-8";

/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  -webkit-text-size-adjust: none;
  max-height: 999999px;
}
body {line-height: 1;}

h1, h2, h3, h4, h5, h6 {
  clear: both;
  font-size: 100%;
  font-weight: normal;
  overflow: hidden;
  line-height: 140%;
}
ol, ul {list-style: none;}

blockquote {quotes: none;}

blockquote:before, blockquote:after {
  content: '';
  content: none;
}
del {text-decoration: line-through;}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

th{font-weight: normal;}

a img {border: none;}

a {
  text-decoration: none;
  outline: none;
}
/* キーボード操作時のみフォーカス枠を表示 */
a:focus-visible, button:focus-visible { outline: 2px solid #ffd84a; outline-offset: 2px; }

img {
  vertical-align: bottom;
  image-rendering: -webkit-optimize-contrast;
}

.clearfix {width:100%; margin: 0;}
.clearfix:after{
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
  }
     
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  }

/* =========================================================
   base
========================================================= */
:root {
  --blue: #006abf;
  --navy: #1d2b6e;
  --text: #22306b;
  --green: #52b339;
  --pink: #e65a62;
  --yellow: #f7b818;
  --sky: #18aae5;
  --dark: #07102e;
  --header-h: min(6vw, 90px);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  /* scroll-behavior: smooth はリロード時の位置復元までスクロールアニメーションしてしまうため、JSでアンカーのみ滑らかにする */
  scroll-padding-top: calc(var(--header-h) + 30px);
}

body {
  margin: 0;
  color: #333;
  font-family:'メイリオ',Meiryo,'Lucida Grande','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','MS ゴシック',Verdana,Helvetica,Arial,Sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.7;
  /* 全体背景：方眼 */
  background: #e8f1f7 url(../images/grid-pattern.png) repeat left top;
  -webkit-text-size-adjust: 100%;
  /* 横スクロール防止は画面端で切る（.paperで切ると紙からのはみ出しが消えるため） */
  overflow-x: clip;
}

img { max-width: 100%; height: auto; vertical-align: bottom; }
a { color: inherit; }
button { font: inherit; color: inherit; }




.pc { display: inline; }
.sp { display: none; }
@media (max-width: 768px) {
  .pc { display: none; }
  .sp { display: inline; }
}





/* 読み込み完了（リロード時のスクロール位置復元）までは動きを止める */
.is-preload *, .is-preload *::before, .is-preload *::after {
  transition: none !important;
  animation: none !important;
}

/* ---- ユーティリティ ---- */
.u-mt10 { margin-top: 10px !important; }

.u-indent { padding-left: 1em; text-indent: -1em; }

.u-attention { color: #e60012; font-weight: 700!important; }







/* =========================================================
   header（追従）
========================================================= */
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  background: var(--blue);
  transition: height .4s cubic-bezier(.2, .7, .3, 1), background-color .4s, box-shadow .4s;
}



.header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 15px;
}

/* ナビ左右の装飾：gnav__list（最大1360px・中央）の外側100pxの位置 */
.header__deco {
  position: absolute;
  top: 50%;
  width: min(5vw, 100px);
  height: min(6vw, 90px);
  transform: translateY(-50%);
  pointer-events: none;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1);
}


/* 1680px以上は中央から840pxの位置、それ未満は画面端から10px空けて止める（はみ出し防止） */
.header__deco--l { left: max(10px, calc(50% - 840px)); }
.header__deco--r { right: max(10px, calc(50% - 840px)); }
.header__deco img { position: absolute; }




/* 中の画像は .header__deco の幅（最大100px）に対する%指定で一緒に縮む */
.header__star {
  left: 0;
  top: 35%;
  width: 56%;
  transform: translateY(-50%) rotate(12deg);
  transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}

.header__deco--l .header__twinkle { left: 54%; bottom: 5%; }
.header__lightning { right: 20%; top: 35%; width: 33%; margin-top: -24%; }
.header__deco--r .header__twinkle { right: 0; bottom: 11%; }

.header__twinkle {
  width: 24%;
}




/* 星：deco-10が回るタイミング（ヘッダーの縮む／戻る）で1回だけキラッと。JSで付与 */
.header__twinkle.is-twinkle { animation: twinkle .8s ease-in-out; }
@keyframes twinkle {
  0%   { transform: scale(1) rotate(0); filter: none; }
  40%  { transform: scale(.6) rotate(-15deg); filter: brightness(1); }
  70%  { transform: scale(1.15) rotate(10deg); filter: brightness(1.25) drop-shadow(0 0 6px rgba(255, 240, 150, .95)); }
  100% { transform: scale(1) rotate(0); filter: none; }
}

/* 稲妻：deco-10と同じ速さ・イージングでY軸にくるっと1回転（縮む／戻るとき） */
.header__lightning {
  transform: perspective(300px) rotateY(0);
  transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.header.is-scrolled .header__lightning { transform: perspective(300px) rotateY(360deg); }





.gnav {
  width: 100%;
  max-width: min(90%, 1360px);
}
.gnav__list {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: var(--header-h);
  padding: 0 20px;/*/1500*/
  background: #fff;
  border-radius: 999px;
  transition: height .4s cubic-bezier(.2, .7, .3, 1);
}

.gnav__list a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: min(1.6vw, 24px);/*/1500*/
  line-height: 1;
  color: var(--navy);
  text-decoration: none;
  transition: color .2s;
  font-weight: 700;
}


.gnav__list img {
  height: min(3vw, 45px); transform-origin: center bottom;
}

.gnav__list span {
  padding-top: 4px;
}


.gnav__deco { display: none; }
.gnav__logo { display: none; } /* PCでは非表示（スマホメニュー内のみ） */




/* 少しスクロールしたら：高さを詰めて半透明＋影 */
.header.is-scrolled {
  height: 76px;
  background: rgba(0, 106, 191, .95);
  box-shadow: 0 6px 20px rgba(0, 40, 100, .18);
}

.header.is-scrolled .gnav__list {
  height: 56px;
  padding: 0 min(1.3vw, 20px);  
}

.header.is-scrolled .header__deco { transform: translateY(-50%) scale(.8); }
.header.is-scrolled .header__star { transform: translateY(-50%) rotate(348deg); }













/* PCナビ：表示時にアイコンが順番に1回ずつぴょん（JSで一定時間だけ付与） */
.is-nav-intro .gnav__list img { animation: pyon .5s ease-out both; }
.is-nav-intro .gnav__list li:nth-child(1) img { animation-delay: .3s; }
.is-nav-intro .gnav__list li:nth-child(2) img { animation-delay: .45s; }
.is-nav-intro .gnav__list li:nth-child(3) img { animation-delay: .6s; }
.is-nav-intro .gnav__list li:nth-child(4) img { animation-delay: .75s; }
.is-nav-intro .gnav__list li:nth-child(5) img { animation-delay: .9s; }

@media (hover: hover) {

  .gnav__list a:hover img { animation: pyon .5s ease-out; }
  .gnav__list a:hover { color: #008CFF; }
  
}

.hamburger { display: none; }









@media (max-width: 768px) { 
  .header__deco { display: none;}
}



/* ---- 768px以下：ハンバーガー ---- */
@media (max-width: 768px) {
  :root { --header-h: 60px; }
  html { scroll-padding-top: 20px; }

  /* 帯なし：KVの前面にハンバーガーだけ浮かせる */
  .header { background: none; pointer-events: none; }
  .header__inner { justify-content: flex-end; padding: 0 12px; }
  .hamburger, .gnav { pointer-events: auto; }
  .kv { padding-top: 0; }

  .hamburger {
    position: relative;
    z-index: 2;
    display: block;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 40, 100, .25);
    cursor: pointer;
    margin: 10px;
  }
  
  
  /* スクロール前と同じ高さ（auto）のままにして、ハンバーガーの位置ズレを防ぐ */
  .header.is-scrolled { height: auto; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  
  

  .is-menu-open .hamburger { background: #fff; transform: scale(1); }
  .is-menu-open .hamburger span { background: var(--blue); }
  .hamburger span {
    position: absolute;
    left: 50%;
    width: 22px;
    height: 3px;
    margin-left: -11px;
    border-radius: 3px;
    background: var(--blue);
    transition: transform .3s, opacity .3s, top .3s, background-color .4s;
  }
  .hamburger span:nth-child(1) { top: 13px; }
  .hamburger span:nth-child(2) { top: 20.5px; }
  .hamburger span:nth-child(3) { top: 28px; }
  .is-menu-open .hamburger span:nth-child(1) { top: 20.5px; transform: rotate(45deg); }
  .is-menu-open .hamburger span:nth-child(2) { opacity: 0; }
  .is-menu-open .hamburger span:nth-child(3) { top: 20.5px; transform: rotate(-45deg); }

  .gnav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    padding: calc(var(--header-h) + 30px) 24px 40px;
    overflow-y: auto;
    /* 縦並びにして、ロゴ（.gnav__logo）を画面の下のほうへ */
    display: flex;
    flex-direction: column;
    background: rgba(0, 106, 191, .97) url(../images/grid-pattern.png) repeat;
    background-blend-mode: multiply;
    /* ボタンの位置から円形に広がる */
    clip-path: circle(0 at calc(100% - 34px) 30px);
    visibility: hidden;
    transition: clip-path .6s cubic-bezier(.7, 0, .25, 1), visibility 0s .6s;
  }
  .is-menu-open .gnav {
    clip-path: circle(150vmax at calc(100% - 34px) 30px);
    visibility: visible;
    transition: clip-path .7s cubic-bezier(.7, 0, .25, 1), visibility 0s;
  }

  /* メニューカード・項目：少し遅れて下からふわっと */
  .gnav__list { opacity: 0; transform: translateY(30px) scale(.96); transition: opacity .3s, transform .3s; }
  .is-menu-open .gnav__list { opacity: 1; transform: none; transition: opacity .5s .25s, transform .6s .25s cubic-bezier(.2, .9, .3, 1.2); }

  /* メニュー下のロゴ：中央寄せ。項目が出そろった後にふわっと表示 */
  .gnav__logo {
    display: block;
    flex-shrink: 0;
    width: 200px;
    max-width: 70%;
    /* margin-top: auto で残りの高さを上に取り、画面の下へ（項目との最低間隔は padding-top） */
    margin: auto auto 0;
    padding-top: 28px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .2s, transform .2s;
  }
  .gnav__logo img { display: block; width: 100%; }
  .is-menu-open .gnav__logo { opacity: 1; transform: none; transition: opacity .5s .75s, transform .6s .75s cubic-bezier(.2, .8, .3, 1); }
  .gnav__list li { opacity: 0; transform: translateX(24px); transition: opacity .2s, transform .2s; }
  .is-menu-open .gnav__list li { opacity: 1; transform: none; transition: opacity .4s, transform .5s cubic-bezier(.2, .8, .3, 1); }
  .is-menu-open .gnav__list li:nth-child(1) { transition-delay: .35s; }
  .is-menu-open .gnav__list li:nth-child(2) { transition-delay: .42s; }
  .is-menu-open .gnav__list li:nth-child(3) { transition-delay: .49s; }
  .is-menu-open .gnav__list li:nth-child(4) { transition-delay: .56s; }
  .is-menu-open .gnav__list li:nth-child(5) { transition-delay: .63s; }

  /* 装飾：くるっと回転して登場 */
  .gnav__deco { opacity: 0; transform: scale(0) rotate(-180deg); transition: opacity .2s, transform .2s; }
  .is-menu-open .gnav__deco { opacity: 1; transform: none; transition: opacity .4s .7s, transform .6s .7s cubic-bezier(.3, 1.6, .5, 1); }

  .gnav__list {
    flex-shrink: 0; /* 画面が低くても項目がつぶれないように（はみ出す分はスクロール） */
    flex-direction: column;
    align-items: stretch;
    height: auto;
    padding: 10px 24px;
    border-radius: 20px;
  }
  .gnav__list li + li { border-top: 2px dashed #c9dcef; }
  .gnav__list a { padding: 14px 8px; font-size: 17px; gap: 16px; }

  /* アイコンは画像ごとに横幅が違うため、同じ大きさの枠（一番幅の広いアイコンに合わせた比率）に
     収めて中央に置く → 文字の開始位置がそろう */
  .gnav__list img {
    width: 40px;
    height: 35px;
    object-fit: contain;
    flex-shrink: 0;
    transform-origin: center bottom;
  }

  
  
  /* メニューを開いたらアイコンが順番に1回ずつぴょん */
  .is-menu-open .gnav__list img { animation: pyon .5s ease-out both; }
  .is-menu-open .gnav__list li:nth-child(1) img { animation-delay: .6s; }
  .is-menu-open .gnav__list li:nth-child(2) img { animation-delay: .75s; }
  .is-menu-open .gnav__list li:nth-child(3) img { animation-delay: .9s; }
  .is-menu-open .gnav__list li:nth-child(4) img { animation-delay: 1.05s; }
  .is-menu-open .gnav__list li:nth-child(5) img { animation-delay: 1.2s; }

  .gnav__deco { display: block; position: absolute; }
  
  .header.is-scrolled .gnav__list {
    height: auto;
    padding: 0 15px;  
  }
  
  
  
  .gnav__deco--star { width: 46px; left: 20px; top: calc(var(--header-h) + 4px); }
  .gnav__deco--lightning { width: 32px; right: 24px; bottom: 30px; }

  body.is-menu-open { overflow: hidden; }
}
@keyframes pyon {
  0%   { transform: translateY(0) scale(1, 1); }
  20%  { transform: translateY(0) scale(1.15, .85); }
  50%  { transform: translateY(-12px) scale(.92, 1.1); }
  80%  { transform: translateY(0) scale(1.1, .9); }
  100% { transform: translateY(0) scale(1, 1); }
}

/* =========================================================
   追従グリーティングリンク
========================================================= */
/* 追従ボタンの入れ物（TOP＋グリーティングを縦に並べて右下に固定） */
.float-links {
  position: fixed;
  right: 16px;
  bottom: 30px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none; /* 隙間は下の要素をクリックできるように */
}
.float-links a { pointer-events: auto; }




.top-link {
  display: block;
  width: min(5.3vw, 80px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(.5) rotate(-180deg);
  transition: opacity .4s, transform .6s cubic-bezier(.3, 1.5, .5, 1), visibility 0s .6s;
}


.top-link.is-show {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .4s, transform .6s cubic-bezier(.3, 1.5, .5, 1), visibility 0s;
}
.top-link img { display: block; width: 100%; transition: transform .3s; }
.top-link:hover img { transform: translateY(-4px) rotate(-12deg) scale(1.08); }

.greeting-link {
  display: block;
  width: min(10.3vw, 155px);
  transition: transform .3s;
}
.greeting-link:hover { transform: translateY(-6px); }
.greeting-link img { animation: fuwa 2.4s ease-in-out infinite; }
@keyframes fuwa {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (max-width: 768px) {
  .float-links { right: 10px; bottom: 12px; gap: 4px; }
  .greeting-link { width: clamp(50px, 15.6vw, 100px); }
  .top-link { width: clamp(36px, 8vw, 52px); }
}

/* =========================================================
   KV
========================================================= */
.kv {
  padding-top: calc(var(--header-h) + 30px);
  background: var(--blue);
}
.kv__img img { width: 100%; }

@media (max-width: 768px) {
  .kv {
    padding-top: 0;
  }
}


/* =========================================================
   paper（方眼の上に重ねる紙）
========================================================= */
.paper {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  isolation: isolate;
}
/* 紙の画像と影は疑似要素に分離。
   影はfilter: drop-shadowだと紙全体（ページの長さ分）を毎回描き直して重いため、box-shadowで付ける */
.paper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url(../images/paper-bgpng.png) repeat-y left top / 100% auto; /* .paper（最大1400px・中央寄せ）の幅に合わせて縮む */
  box-shadow: 0 0 12px rgba(40, 90, 150, .12);
  pointer-events: none;
}
.main {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;

}


@media (max-width: 768px) {
  /* 768pxで900px → 画面幅に比例して縮小、最小600px（900 ÷ 768 = 117.1875vw） */
  .paper::before { background-size: max(600px, 117.1875vw) auto; }
  /* スマホでは紙＝画面幅なので、紙の端で切って横スクロール（ページ幅の広がり）を防ぐ
     ※スマホのブラウザは body の overflow-x: clip だけでは画面幅が広がってしまうため */
  .paper { overflow-x: clip; }
}




/* 点線囲み */
.box-dotted {
  position: relative;
  /* border: dotted だとChromeで角のドットが欠けるため、
     丸ドットを並べたSVGを border-image で敷く（角は固定、辺はドット1個分を繰り返し） */
  border: 5px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' fill='%23006abf'%3E%3Ccircle cx='3.78' cy='13.42' r='2.5'/%3E%3Ccircle cx='13.42' cy='3.78' r='2.5'/%3E%3Ccircle cx='40.58' cy='3.78' r='2.5'/%3E%3Ccircle cx='50.22' cy='13.42' r='2.5'/%3E%3Ccircle cx='50.22' cy='40.58' r='2.5'/%3E%3Ccircle cx='40.58' cy='50.22' r='2.5'/%3E%3Ccircle cx='13.42' cy='50.22' r='2.5'/%3E%3Ccircle cx='3.78' cy='40.58' r='2.5'/%3E%3Ccircle cx='27.00' cy='2.50' r='2.5'/%3E%3Ccircle cx='51.50' cy='27.00' r='2.5'/%3E%3Ccircle cx='27.00' cy='51.50' r='2.5'/%3E%3Ccircle cx='2.50' cy='27.00' r='2.5'/%3E%3C/svg%3E") 20 / 20px round;
  border-radius: 20px;
  width: min(91.4vw, 1280px);/*/1400*/
  margin: 0 auto;
  padding: min(6.7vw, 100px) min(4.3vw, 65px) min(4.3vw, 65px);  
}



/* 装飾 */
.deco { position: absolute; pointer-events: none; z-index: 1; }

/* 共通見出し・テキスト */
.sec-title {
  position: relative;
  z-index: 2;
  width: clamp(280px, 73vw, 1096px);
  margin: 0 auto calc(min(4.7vw, 70px) * -1);
}

.sec-lead {
  text-align: center;
  font-size: clamp(16px, 2.4vw, 36px);
  font-weight: 800;
  color: var(--text);
  line-height: 1.5;
}

.sec-text {
  margin-top: 16px;
  text-align: center;
  font-size: clamp(12px, 1.2vw, 18px);
  font-weight: 500;
}


.notes {
  margin-top: min(4vw, 60px);
  font-size: clamp(12px, 1.1vw, 16px);
  font-weight: 500;
  line-height: 1.6;
  text-align: left;
}

.notes li { padding-left: 1em; text-indent: -1em; }
.notes li:not(:first-child){ margin-top: 5px;}




@media (max-width: 768px) {
.sec-title {
  width: clamp(280px, 88.5vw, 680px);
  margin: 0 auto calc(min(6vw, 46px) * -1);
}



  .sec-lead {
    font-size: clamp(15px, 2.7vw, 21px);
  }
  

  .sec-text {
    font-size: clamp(12px, 2vw, 16px);
    text-align: left;
    margin-top: 12px;  
  }
  
  .notes { font-size: 11px; }
  
  
}

/* =========================================================
   intro
========================================================= */
.intro {
  position: relative;
}



.intro__title {
  width: min(87.3vw, 1310px);/*/1500*/
  max-width: 100%;
  margin: 0 auto;
}

.intro__title img {
  margin-top: calc( min(2vw, 30px) * -1);
}



.intro__messages {
  position: relative;
}

.intro__msg { display: block; }



.intro__msg--keroro {
  width: 972px
  margin-top: -40px;
  margin-left: -10px;
}
  
.intro__msg--fuyuki { 
  width: 1085px;
  margin: -300px -80px 0 auto;
}


.deco--intro-01 {
  width: min(9.3vw, 139px);
  left: min(3.3vw, 50px);
  bottom: 10%;
}



.deco--intro-02 { width: 70px; left: 2%; top: 540px; }


@media (max-width: 1600px) {
  .intro__msg--keroro {
    width: min(61vw, 972px);/*/1600*/
    margin-top: calc( min(2.5vw, 40px) * -1);
    margin-left: 10px;
  }
  
  .intro__msg--fuyuki { 
    width: min(68vw, 1085px);
    margin: calc( min(18.8vw, 300px) * -1) 10px 0 auto;
  }
  
  
  
  
  
  
}



@media (max-width: 768px) {
  .intro__msg--keroro {
    width: min(76vw, 583px);
    margin-top: calc( min(2.5vw, 40px) * -1);
    margin-left: 10px;
  }
  
  .intro__msg--fuyuki { 
    width: min(84.8vw, 651px);/* *.6*/
    margin: calc( min(18.8vw, 300px) * -1) 10px 0 auto;
  }
  
}





/* スクロールで視界に入ったら、ケロロは左から・冬樹は右からフェードイン（JS有効時のみ）
   画像ごとに判定し、同時に入ったときはJSで順番に遅らせる */
.js .intro__msg.js-inview {
  opacity: 0;
  transition: opacity .9s ease-out, transform 1.2s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform; /* 別レイヤーで描画して滑らかに */
}
.js .intro__msg--keroro.js-inview { transform: translate3d(-80px, 0, 0); }
.js .intro__msg--fuyuki.js-inview { transform: translate3d(80px, 0, 0); }
.js .intro__msg.js-inview.is-inview { opacity: 1; transform: translate3d(0, 0, 0); }

/* =========================================================
   contents
========================================================= */
.contents {}
.contents__title {
  width: clamp(280px, 45.6vw, 684px);
  position: absolute;
  top: calc( clamp(45px, 6vw, 90px) * -1);
  left: 0;
  right: 0;
  margin: auto;
}

.contents__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: min(2vw, 30px);
  margin-top: min(4.7vw, 70px);
}



.contents-card {
  --c: var(--green);
  --bg: rgba(82,179,57,.15);
  --bd: #bce4c1; /* 枠線の色 */
  display: flex;
  flex-direction: column;
  padding: min(2vw, 30px) min(2.3vw, 35px) min(2.3vw, 35px);
  border: 3px solid var(--bd);
  border-radius: 16px;
}



.contents-card--pink   { --c: var(--pink);   --bg: rgba(230,90,98,.15); --bd: #f6c6cf; }
.contents-card--yellow { --c: var(--yellow); --bg: rgba(247,184,24,.15); --bd: #f8e8b8; }
.contents-card--blue   { --c: var(--sky);    --bg: rgba(24,170,229,.15); --bd: #bcdef4; }

.contents-card__label {
  padding: 10px 10px 6px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--c);
  text-align: center;
  font-size: clamp(16px, 1.7vw, 26px);
  font-weight: 700;
}


.contents-card__label span { margin-right: .6em; }

/* ルビ：data-ruby の文字を疑似要素で上に重ねる（絶対配置なのでラベルの高さは変わらない） */
.ruby {
  position: relative;
  display: inline-block;
  line-height: 1; /* ルビを文字のすぐ上に置くため、行の高さではなく文字の高さを基準にする */
}
.contents-card__label .ruby { margin-right: 0; }
.ruby::before {
  content: attr(data-ruby);
  position: absolute;
  bottom: calc(100% + 1px); /* 親文字との間隔 */
  left: 50%;
  transform: translateX(-50%);
  font-size: .45em;
  line-height: 1;
  letter-spacing: .05em;
  white-space: nowrap;
}

.contents-card__visual {
  width: 100%;
  margin-top: 20px;
  border-radius: 8px;
}

.contents-card__text {
  flex: 1;
  margin-top: 20px;
  font-size: clamp(12px, 1.6vw, 17px);/*/1080*/
  font-weight: 500;
}


.contents-card__btn {
  display: block;
  width: clamp(135px, 21vw, 225px);
  margin: min(2.8vw, 30px) auto 0;
  transition: transform .2s;
}


.contents-card__btn:hover { transform: translateX(4px); }

.deco--contents-01 {
  width: min(6.2vw, 93px);
  right: calc( min(3.3vw, 50px) * -1);
  top: min(3.3vw, 50px);
}

.deco--contents-02 {
  width: min(7.9vw, 118px);
  right: calc( min(5vw, 76px) * -1);
  bottom: 15%;
  z-index: -1;
}

.deco--contents-03 {
  width: min(11.5vw, 173px);
  left: calc( min(4.7vw, 70px) * -1);
  bottom: calc( min(4.7vw, 70px) * -1);
}




@media (max-width: 768px) {
  .contents { margin-top: min(5.2vw, 40px);}
  .contents__title {
    width: clamp(240px, 52vw, 400px);
    top: calc( clamp(45px, 6vw, 90px) * -1);
  }

}



@media (max-width: 600px) {

  .contents__list { grid-template-columns: 1fr; gap: 24px; }
  .contents-card { padding: 16px; }
  
  .contents-card__label { font-size: clamp(14px, 3.7vw, 22px); }


}






/* =========================================================
   01 voice
========================================================= */
.voice { margin-top: min(6.7vw, 100px); }


.voice__deco { 
  position: absolute; 
  width: min(17.2vw, 258px); 
  bottom: min(1.3vw, 20px); 
  pointer-events: none;
}

.voice__deco--l { left: 10px; }
.voice__deco--r { right: 10px; }


.deco--voice-01 {
  width: min(4vw, 60px);
  right: 0;
  top: calc( min(10vw, 150px) * -1);
}




.voice__list {
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16.25px;
  margin-top: min(3.33vw, 50px);
}
.voice__list--5 { margin-top: min(4vw, 60px); }

.voice__list li { width: min(14.3vw, 215px); }


@media (max-width: 768px) {


  .voice__deco { display: none;}
  .voice__list { gap: 10px; margin: min(6vw, 46px) auto min(4vw, 30px); }

  .voice__list li { width: calc((100% - 20px) / 3); }
}





/* =========================================================
   02 mission
========================================================= */
.mission { position: relative; margin-top: min(6.7vw, 100px); } 

.deco--mission-01 { width: min(9vw, 136px); left: min(3.3vw, 50px); top: min(3.3vw, 50px); z-index: -1; }
.deco--mission-02 { width: min(7.3vw, 109px); right: min(1.3vw, 20px); top: 23%; z-index: -1;}
.deco--mission-03 { width: min(4.1vw, 62px); left: min(4.7vw, 70px); bottom: 27%; z-index: -1;}



.mission__guide {
  width: min(70vw, 983px);/*/1400*/
  margin: min(2vw, 30px) auto 0;
}



.mission__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: min(2vw, 30px);
  margin-top: min(2.7vw, 40px);
}

.mission-card {
  --pad-x: min(2.3vw, 35px);   /* 左右の余白 */
  --pad-b: min(2.3vw, 35px);   /* 下の余白 */
  --over-x: min(1.3vw, 20px);  /* 画像を枠から左右にはみ出させる量 */
  --over-b: min(.7vw, 10px);   /* 画像を枠から下にはみ出させる量 */
  padding: 0 var(--pad-x) var(--pad-b);
  border: 2px solid #ffb6b3;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  position: relative;
  display: flex;
  flex-direction: column;
}

.mission-card--stamp { border-color: #93bbff; }

.mission-card__title {
  width: min(33.7vw, 505px);
  margin: calc( min(2.3vw, 35px) * -1) auto 0;
}

.mission-card__text {
  margin-top: 10px;
  font-size: clamp(13px, 1.3vw, 20px);
  font-weight: 600;
  color: var(--text);
  margin-bottom: min(1.3vw, 20px);
}



/* 画像を枠の左右・下から少しはみ出させる
   （余白分＋はみ出し量だけマイナスマージンで広げ、その分幅も足す） */
.mission-card__media {
  position: relative;
  width: calc(100% + (var(--pad-x) + var(--over-x)) * 2);
  margin: auto calc((var(--pad-x) + var(--over-x)) * -1) calc((var(--pad-b) + var(--over-b)) * -1);
}
.mission-card__visual {
  display: block;
  width: 100%;
  border-radius: 8px;
}

/* キャラクター：画像の左下（クイズ）・右下（スタンプ）に重ねる */
.mission-card__chara {
  position: absolute;
  bottom: -6%;
  width: 32%;
  min-width: 120px;
  z-index: 1;
}
.mission-card__chara--l { left: -8%; transform-origin: right bottom; }
.mission-card__chara--r { right: -8%; transform-origin: left bottom; }

/* 画像（.mission-card__media）が画面に入ったら、キャラが外側からポンと弾んで登場（JS有効時のみ）
   2枚のカードはJSで0.35秒ずらして順番に表示 */
.js .mission-card__media .mission-card__chara {
  opacity: 0;
  transition: opacity .4s ease-out .2s, transform .7s cubic-bezier(.3, 1.5, .5, 1) .2s;
}
.js .mission-card__media .mission-card__chara--l { transform: translate(-30%, 10%) rotate(-12deg) scale(.6); }
.js .mission-card__media .mission-card__chara--r { transform: translate(30%, 10%) rotate(12deg) scale(.6); }
.js .mission-card__media.is-inview .mission-card__chara { opacity: 1; transform: none; }




.novelty { margin-top: min(4.7vw, 70px); text-align: center; }

.novelty__title { width: min(63.2vw, 948px); margin: 0 auto; }

.novelty__lead {
  margin-top: min(1.9vw, 20px);/*/1080*/
  font-size: clamp(14px, 1.7vw, 26px);
  color: var(--text);
  line-height: 1.5;
}


.novelty__term {
  display: inline-block;
  margin-top: min(1.9vw, 20px);/*/1080*/
  padding: clamp(10px, 1.5vw, 16px) clamp(15px, 2.3vw, 25px) clamp(8px, 1.3vw, 14px);
  background: #024eb3;
  color: #fff;
  font-size: clamp(13px, 1.6vw, 22px);
  line-height: 1;
}


.novelty__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin: 30px auto 0;
}



.novelty__list li { width: calc((100% - 40px) / 3); }


/* 証明書：クリック／ホバーで裏返し */
.cert {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  perspective: 1000px;
}
.cert__inner {
  position: relative;
  display: block;
  transition: transform .45s;
  transform-style: preserve-3d;
}

.cert img { display: block; width: 100%; backface-visibility: hidden; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.cert__b { position: absolute; inset: 0; transform: rotateY(180deg); }
.cert.is-flipped .cert__inner { transform: rotateY(180deg); }
@media (hover: hover) {
  .cert:hover .cert__inner { transform: rotateY(180deg); }
}



 




@media (max-width: 768px) {
  .mission__guide {
    width: 100%;
    margin: min(2vw, 30px) auto 0;
  }

  .novelty__title { width: 100%; }


  
  
  

  .novelty__list {
    gap: min(2.6vw, 20px);
    
  }
  .novelty__list li { width: calc((100% - min(2.6vw, 20px)) / 2); }


}


@media (max-width: 600px) {
  .mission__cards { grid-template-columns: 1fr; gap: 24px; margin-top: 24px; }
  
  .mission-card { --pad-x: 16px; --pad-b: 20px; --over-x: 10px; --over-b: 6px; }
  
  .mission-card__title {
    width: 70%;
    min-width: 200px;
    margin: calc( min(3.3vw, 20px) * -1) auto 0;
  }

.mission-card__text {
  margin-top: 10px;
  font-size: clamp(12px, 2.5vw, 15px);
  margin-bottom: min(3.3vw, 20px);
}

  


}



/* =========================================================
   greeting
========================================================= */
.greeting { position: relative; margin-top: min(6.7vw, 100px); } 


.deco--greeting-01 { width: min(5.3vw, 79px); right: min(3.3vw, 50px); top: calc( min(3.3vw, 50px) * -1); }
.deco--greeting-02 { width: min(5.5vw, 83px); left: min(2.7vw, 40px); bottom: calc( min(1.3vw, 20px) * -1); }





.greeting__box {
  width: min(91.4vw, 1280px);
  max-width: 100%;
  margin: 0 auto;
  padding: min(3.7vw, 55px) min(4.3vw, 65px) min(2.7vw, 40px);
  background: #f3f9fe;
  border: 3px solid #a0d5fd;
  border-radius: min(2.7vw, 40px);
}


/* 上部：左にラベル・タイトル・説明、右に写真 */
.greeting__head { display: flex; align-items: flex-start;}
.greeting__body { flex: 1; min-width: 0; }

.greeting__label {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: min(1vw, 15px) min(2vw, 30px);
  background: #ffd84a;
  border-radius: 8px;
  font-size: clamp(18px, 2vw, 30px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}

.greeting__label img { width: min(3.7vw, 55px); }
.greeting__label span { transform: translateY(.1em); }



.greeting__title {
  position: relative;
  width: min(52.4vw, 706px);
  margin-top: min(1.6vw, 24px);
  margin-left: calc( min(1.3vw, 20px) * -1 );  
}

.greeting__text { 
  margin-top: 10px;
  padding-top: 24px;
  font-size: clamp(12px, 1.33vw, 20px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--navy);
  border-top: 3px dashed #a0d5fd;
}

.greeting__text strong { font-size: 1.5em; font-weight: 800; color: var(--green); }

.greeting__visual {
  width: min(38.3vw, 575px);
  flex-shrink: 0;
  margin-top: 10px;
  margin-right: calc( min(3.3vw, 50px) * -1 );
}





.greeting__schedule {
  display: flex;
  flex-wrap: wrap;
  gap: min(.7vw, 10px);
  margin-top: 20px;
}

.greeting__schedule-item {
  display: flex;
  align-items: center;
  gap: min(.7vw, 10px);
  padding: 5px min(1.4vw, 20px) 5px min(.7vw, 10px);
  background: #fff;
  border: 1px solid #d6e9f8;
  border-radius: 10px;
  font-size: clamp(12px, 1.3vw, 20px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
}

.greeting__schedule-item dt {
  padding: min(.4vw, 6px) min(.7vw, 10px);
  background: #e3f0fb;
  border-radius: 6px;
  font-size: clamp(11px, 1vw, 18px);
}

.greeting__schedule-item dd {
  padding-top: 2px;
}

.greeting__schedule-item strong { font-size: 1.3em; font-weight: 800; }




/* 注意事項：3カラム */
.greeting-notes {
  margin-top: min(2.7vw, 40px);
  padding: min(2vw, 30px);
  background: #fff;
  border: 2px solid #a0d5fd;
  border-radius: 14px;
}

.greeting-notes__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.greeting-notes__col { --c: #ffd84a; --bg: #fff3c4; padding: 0 min(1.9vw, 28px); }
.greeting-notes__col:first-child { padding-left: 0; }
.greeting-notes__col:last-child { padding-right: 0; }

.greeting-notes__col + .greeting-notes__col { border-left: 2px dashed #c9dcef; } /* 列の区切り */
.greeting-notes__col--green { --c: #6cc04a; --bg: #e2f4d8; }
.greeting-notes__col--blue  { --c: #4a90e2; --bg: #dcebfb; }

.greeting-notes__head {
  padding: 5px 5px 3px;
  background: var(--bg);
  border-radius: 999px;
  text-align: center;
  font-size: clamp(12px, 1.1vw, 16px);
  font-weight: 800;
  color: var(--navy);
}

.greeting-notes__list { margin-top: 18px; }

.greeting-notes__list li {
  position: relative;
  padding-left: .75em;
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 500;
  line-height: 1.6;
  color: var(--navy);
}

.greeting-notes__list li + li { margin-top: 6px; }

/* 列ごとの色の丸 */
.greeting-notes__list li::before {
  content: "";
  position: absolute;
  left: 0;
  /* 1行目の行の高さ(1lh)の中央に置く：行の高さを変えても自動で追従
     サイズ・位置を整数pxにして、小数pxのにじみで楕円に見えるのを防ぐ */
  --dot: 4px;
  top: round(calc((1lh - var(--dot)) / 2), 1px);
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--c);
}

/* 強調文字で行が高くならないように line-height: 1（丸の位置がずれないため） */
.greeting-notes__list strong { font-size: 1.2em; font-weight: 800; line-height: 1; }









@media (max-width: 768px) {

  /* ラベル・タイトルと写真は横並びのまま、説明文だけ横幅いっぱいに
     （.greeting__body の枠を外して、中身を .greeting__head のグリッドに直接並べる） */
  .greeting__head {
    display: grid;
    /* 右列＝写真の幅（38.3vw）から右へのはみ出し分（3.3vw）を引いた幅で固定
       （autoだとタイトルを2列にまたがせた時に写真の列が縮むため） */
    grid-template-columns: 1fr 40vw;
    align-items: start;
  }
  .greeting__body { display: contents; }
  /* 狭い幅でも改行しないよう、ラベルは右の列（写真）にかかってもよい＝2列にまたがせて前面に */
  .greeting__label { grid-column: 1 / -1; grid-row: 1; justify-self: start; z-index: 1; }
  /* タイトルは右の列（写真）までまたがせ、写真より前面に → PCと同じく写真にかかる */
  .greeting__title { grid-column: 1 / -1; grid-row: 2; z-index: 1; width: 55vw; }
  /* 列の右端にそろえてから、マイナスマージンで右へはみ出させる
     （グリッドでは左寄せが基本のため、justify-self: end がないと margin-right が効かない） */
  .greeting__visual { grid-column: 2; grid-row: 1 / 3; justify-self: end; margin-right: -3vw; }
  .greeting__text { grid-column: 1 / -1; grid-row: 3; }



  .greeting__label {
    gap: min(1.3vw, 10px);
    padding: 8px clamp(10px, 2.6vw, 20px) 8px clamp(8px, 2vw, 15px);
    font-size: clamp(12px, 2.3vw, 18px);
    white-space: nowrap; /* 「着ぐるみグリーティング」を1行に */
  }
  .greeting__label img { flex-shrink: 0; }
  
  
  .greeting__label img { width: clamp(16px, 3.6vw, 28px); }
  
  .greeting__title { margin-top: 10px; padding-bottom: 16px; }
  
  
  .greeting__text { 
    margin: min(1.3vw, 10px) 0 0;
    padding-top: min(2.6vw, 20px);
    font-size: clamp(12px,  2.6vw, 20px);
  }
  
  
  
  
  .greeting__schedule { flex-direction: column; gap: 5px; margin-top: 24px; }
  .greeting__schedule-item { gap: 12px; padding: 8px 14px 8px 8px; font-size: clamp(13px, 2vw, 15px); }
  .greeting__schedule-item dt { font-size: 13px; padding: 4px 10px; flex-shrink: 0; }
  
  
  
  
  .greeting-notes { margin-top: 24px; padding: min(2.6vw, 20px); }


  .greeting-notes__cols { grid-template-columns: 1fr; gap: 20px; }
  .greeting-notes__col,
  .greeting-notes__col:first-child,
  .greeting-notes__col:last-child { padding: 0; }
  .greeting-notes__col + .greeting-notes__col { border-left: 0; border-top: 2px dashed #c9dcef; padding-top: 20px; }


  .greeting-notes__head { font-size: clamp(13px, 2.2vw, 17px); }
  .greeting-notes__list li { font-size: clamp(12px, 2vw, 15px);}



}

/* =========================================================
   03 lightup
========================================================= */
.lightup {
  position: relative;
  width: min(91.4vw, 1280px);/*/1400*/
  margin: 40px auto 0;
  padding: min(2vw, 30px) min(4.3vw, 65px) min(4.3vw, 65px);

  color: #fff;
  background: var(--dark) url(../images/lightup-bg.png) no-repeat center top / 100% auto;
  border-radius: 20px;
  overflow: hidden;
}


.lightup__title { margin: 0 auto; }



.lightup__lead {
  text-align: center;
  font-size: clamp(12px, 1.2vw, 18px);
  font-weight: 500;
  line-height: 1.8;
}

/* 会場の住所：下の .lightup-info と同じトーンの枠で中央に */
.lightup__place {
  width: fit-content;
  max-width: 100%;
  margin: min(2vw, 30px) auto 0;
  padding: clamp(8px, 1.1vw, 16px) clamp(15px, 2vw, 30px);
  text-align: center;
  line-height: 1.6;
  background: rgba(5, 52, 113, .45);
  /*border: 1px solid #5a93c7;*/
  border-radius: 10px;
}
.lightup__place-name {
  display: block;
  font-size: clamp(12px, 1.1vw, 16px);
  font-weight: 700;
  letter-spacing: .05em;
}
.lightup__place-address {
  display: block;
  margin-top: .4em;
  padding-top: .5em;
  border-top: 1px dashed #5a93c7;
  font-size: clamp(11px, 1vw, 15px);
  font-weight: 500;
}



@media (max-width: 768px) {

.lightup__place { border-width: 1px; }

.lightup__lead {
    font-size: clamp(12px, 2vw, 16px);
    text-align: left;
    margin-top: 12px;  
  }
}







.tabs { margin-top: min(3.7vw, 40px); }

.tabs__list {
  display: flex;
  max-width: 950px;
  width: 100%;
  margin: 0 auto;
  padding: 1px; /* 白枠と選択中タブの間の隙間 */
  border: 1px solid #fff;
  border-radius: 999px;
  background: rgba(0, 65, 146, .55); /* 半透明で背景の夜景を透かす */
}

.tabs__btn {
  position: relative;
  flex: 1;
  padding: min(1.9vw, 20px) min(1vw, 10px) min(1.7vw, 18px);
  border: 0;
  border-radius: 0;
  background: none;
  color: #fff;
  font-size: min(1.6vw, 24px);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}


.tabs__btn br {
  display: none;
}


@media (max-width: 468px) {
  .tabs__btn br {
    display: block;
  }
}





/* 区切り線：未選択タブ同士の間だけ、上下を少し空けて表示 */
.tabs__btn + .tabs__btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15%;
  bottom: 15%;
  width: 1px;
  background: rgba(255, 255, 255, .6);
}
.tabs__btn.is-active::before,
.tabs__btn.is-active + .tabs__btn::before { display: none; }
/* 角丸は外側の端だけ（左端タブの左側・右端タブの右側） */
.tabs__btn:first-child { border-radius: 999px 0 0 999px; }
.tabs__btn:last-child { border-radius: 0 999px 999px 0; }
.tabs__btn:hover { background: rgba(255, 255, 255, .12); }
.tabs__btn.is-active { background: #fff; color: var(--navy); }
.tabs__panel { margin-top: 40px; }
.tabs__panel.is-active { animation: tabFade .4s ease; }

/* COMING SOON：パネルに is-coming-soon を付けると、中身を隠して COMING SOON だけ表示
   （class を外せば元の中身に戻る） */
.coming-soon { display: none; }
.is-coming-soon > :not(.coming-soon) { display: none; }
.is-coming-soon > .coming-soon {
  display: grid;
  place-items: center;
  min-height: min(20vw, 300px);
  border: 2px dashed rgba(255, 255, 255, .5);
  border-radius: 16px;
  background: rgba(10, 45, 120, .4);
  color: #ffd84a;
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 800;
  letter-spacing: .12em;
  text-shadow: 0 0 16px rgba(255, 216, 74, .6);
}
@keyframes tabFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}



/* tab1 */
.lightup-colors { display: flex; justify-content: center; gap: 3px; }
.lightup-colors li { width: calc((100% - 12px) / 5); }

/* 画面に入ったら左から順に「パッ」と点灯するように表示（JS有効時のみ）
   少し小さく暗い状態 → 一瞬明るく光って元の大きさに */
.js .lightup-colors.js-inview li { opacity: 0;}
.js .lightup-colors.js-inview.is-inview li { animation: lightOn .45s cubic-bezier(.3, 1.4, .5, 1) both; }
.js .lightup-colors.js-inview.is-inview li:nth-child(2) { animation-delay: .15s; }
.js .lightup-colors.js-inview.is-inview li:nth-child(3) { animation-delay: .3s; }
.js .lightup-colors.js-inview.is-inview li:nth-child(4) { animation-delay: .45s; }
.js .lightup-colors.js-inview.is-inview li:nth-child(5) { animation-delay: .6s; }
@keyframes lightOn {
  0%   { opacity: 0; filter: brightness(.4); }
  60%  { opacity: 1; filter: brightness(1.6); }
  100% { opacity: 1; filter: none; }
}



.lightup-info {
  display: flex;
  align-items: center;
  gap: min(2.7vw, 40px);
  margin-top: min(2.4vw, 36px);
  padding: clamp(10px, 1.9vw,  20px) clamp(15px, 2.7vw, 40px);
  background: rgba(5, 52, 113, .45);
  border: 2px solid #5a93c7;
  border-radius: 14px;
}

.lightup-info__icon { width: min(5.1vw, 77px); flex-shrink: 0; }
.lightup-info__tower { width: min(4.9vw, 73px); flex-shrink: 0; margin-left: auto; }


/* 文章＋ライトアップ時間をまとめた真ん中の列（アイコンとタワーの間いっぱい） */
.lightup-info__body {
  flex: 1;
  min-width: 0;
  text-align: center;
  }

.lightup-info__body .showtime { margin: 14px auto 0; }



.lightup-info__text { font-size: clamp(11px, 1.2vw, 18px); font-weight: 500; line-height: 1.7; }

.lightup-info__text em { font-style: normal; color: #f2de03; font-weight: 800; }



/* tab2 */
/* 文章（左）と写真（右）を同じマスに重ねる：高さは写真に合わせて自動 */
.event-movie {
  display: grid;
  grid-template-areas: "stack";
  align-items: center;
}
.event-movie__body,
.event-movie__visual { grid-area: stack; }

.event-movie__body { position: relative; z-index: 1; width: 62%; }



.event-movie__title {
  font-size: clamp(22px, 3.2vw, 44px);
  font-weight: 800;
  line-height: 1.45;

  text-shadow: 0 2px 8px rgba(0, 0, 0, .6); /* 写真に重なっても読めるように */
}
/* 2行目「ケロロ小隊が大画面に登場！」だけ大きく（PCで最大56px、画面幅に合わせて縮小） */
.event-movie__title-lg { font-size: clamp(26px, 3.9vw, 56px); }
.event-movie__title small { font-size: .7em; }
.event-movie__title em { font-style: normal; color: #f2de03; }


/* 見出し下の光るライン＋光る小見出し */
.event-movie__sub {
  position: relative;
  margin-top: min(1.6vw, 24px);
  padding-top: min(2vw, 30px);
  color: #fff;
  font-size: clamp(14px, 1.9vw, 28px);
  font-weight: 800;
  text-shadow: 0 0 6px #2f8bff, 0 0 14px #2f8bff, 0 0 24px rgba(47, 139, 255, .7);
}

/* 光るライン（イベントMOVIE・コラボ記念動画で共通） */
.event-movie__sub::before,
.collabo-movie__lead::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #cfeaff;
  border-radius: 1px;
  box-shadow: 0 0 4px #7cc4ff, 0 0 10px #2f8bff, 0 0 8px rgba(47, 139, 255, .8);
}
.event-movie__text {
  margin-top: min(1.6vw, 24px);
  font-size: clamp(12px, 1.3vw, 20px);
  font-weight: 700;
  line-height: 1.9;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
}

/* 上映時間：文章の幅いっぱいに伸ばして、日時を1行に */
/* コラボ記念動画の上映時間と同じ幅（640px）にそろえ、文章エリアの中で中央に */
/* 上映時間の幅：イベントMOVIE・コラボ記念動画で同じ幅にそろえ、画面幅に比例して縮める
   （パネル幅1150px のとき640px。パネル幅は画面の約82.8vw なので 640 ÷ 1150 × 82.8 ≒ 46.1vw） */
.event-movie .showtime,
.collabo-movie .showtime { max-width: min(46.1vw, 640px); margin-left: auto; margin-right: auto; }
.event-movie .showtime dd { white-space: nowrap; }

/* 写真（右寄せ）＋ケロロ小隊（写真の右下） */
.event-movie__visual {
  position: relative;
  justify-self: end;
  align-self: start;
  width: 67%;
  aspect-ratio: 774 / 648;
  /* 少し右へ寄せ、タワーの先端がタブのすぐ下に来るよう上へ（タブとの間はパネルの margin-top 40px 分） */
  margin: -32px -5% 0 0;
  background: url(../images/event-movie-bg.png) no-repeat center / contain;
}
.event-movie__keroro {
  position: absolute;
  right: 3%; /* 写真を右へ寄せた分、枠からはみ出さないように内側へ */
  bottom: 2%;
  width: 32%;
}
/* タブを開くたびに、少し下からふわっと定位置へ
   （非表示→表示に切り替わるとCSSアニメーションは毎回最初から再生される） */
.tabs__panel.is-active .event-movie__keroro,
.tabs__panel.is-active .event-movie__keroro-sp {
  animation: keroroUp 1.2s cubic-bezier(.16, 1, .3, 1) .15s both;
}
.tabs__panel.is-active .event-movie__keroro-sp--r { animation-delay: .35s; } /* 右は少し遅れて */

/* スマホ用のキャラ（PCでは非表示） */
.event-movie__keroro-sp { display: none; position: absolute; }
@keyframes keroroUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: none; }
}










/* tab3 */
.collabo-movie { text-align: center; }

/* 上部：左に横液晶の写真、右にフィルム画像3枚 */
/* 画像はすべて原寸（写真810px・フィルム463px）。パネル幅1150pxに収まるよう、
   フィルムを写真に約130px重ねる。画面が狭いときは同じ比率のまま縮小 */
.collabo-movie__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.collabo-movie__bg {
  display: block;
  flex-shrink: 0;
  width: 810px;
  max-width: 70.4%;   /* 810 ÷ 1150 */
}



.collabo-movie__imgs {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: min(1.5vw, 21px);  /* 221 + 21 + 221 = 463（01の幅にそろう） */
  width: 463px;
  max-width: 40.3%;   /* 463 ÷ 1150 */
  margin-left: -10.7%; /* 写真に重ねる量 */
}


.collabo-img { --r: 0deg; transform: rotate(var(--r)); }
/* 影＋ほんのり青白い光彩（目立ちすぎない程度） */
.collabo-img img {
  display: block;
  width: 100%;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)) drop-shadow(0 0 3px rgba(30, 106, 176, .75));
}
/* 傾きは1枚ずつではなく、3枚の並び全体（.collabo-movie__imgs）を-2°回転させる。
   1枚ずつ回すと各画像が自分の中心で回るだけで、右隣の03が傾いた並びの線より下がって見えるため */
.collabo-movie__imgs { transform: rotate(-2deg); }
.collabo-img--01 { grid-column: 1 / -1; }

/* タブを開くたびに、01→02→03の順に「ペタッ」と貼られる
   （大きく傾いた状態から縮みながら着地し、少しつぶれて止まる） */
.tabs__panel.is-active .collabo-img { animation: peta .4s cubic-bezier(.3, 1.3, .5, 1) both; }
.tabs__panel.is-active .collabo-img--01 { animation-delay: .15s; }
.tabs__panel.is-active .collabo-img--02 { animation-delay: .45s; }
.tabs__panel.is-active .collabo-img--03 { animation-delay: .55s; }
@keyframes peta {
  0%   { opacity: 0; transform: rotate(calc(var(--r) + 12deg)) scale(1.5); }
  60%  { opacity: 1; transform: rotate(var(--r)) scale(.95); }
  100% { opacity: 1; transform: rotate(var(--r)) scale(1); }
}





/* 見出し */
.collabo-movie__title {
  margin-top: min(2vw, 30px);
  font-size: clamp(18px, 3vw, 46px);
  font-weight: 800;
  line-height: 1.4;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}
.collabo-movie__title small { font-size: .7em; }
.collabo-movie__title em { font-style: normal; color: #f2de03; }


/* 区切り線＋説明文（左にカチンコ、右にキラッ） */
.collabo-movie__lead {
  position: relative;
  margin-top: min(1.3vw, 20px);
  padding: min(1.6vw, 24px) min(8vw, 120px) 0;
  /* 上の線は ::before の光るライン（イベントMOVIEと共通） */
}

.collabo-movie__text { font-size: clamp(12px, 1.5vw, 22px); font-weight: 700; }

.collabo-movie__deco { position: absolute; pointer-events: none; }


.collabo-movie__deco--01 { left: 0; top: min(1vw, 14px); width: min(6.5vw, 97px); }
.collabo-movie__deco--02 { right: 0; top: 10px; width: min(2.9vw, 43px); }


.collabo-movie .showtime dd { white-space: nowrap; } /* 日時を1行に */








/* 素材待ちプレースホルダ */
.placeholder {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(45deg, #13245a, #13245a 10px, #182b66 10px, #182b66 20px);
  border: 2px dashed #3d62b3;
  border-radius: 10px;
  color: #8fa6d8;
  font-size: 14px;
}



/* 上映時間 */
.showtime {
  display: flex;
  align-items: stretch; /* 見出しと時間を同じ高さに */
  max-width: min(33.3vw, 500px);
  min-width: 300px;
  margin-top: 24px;
  border: 2px solid #f2de03;
  border-radius: 999px;
  overflow: hidden;
  /* 全体の地を黄色に：角丸の縁にできる細い隙間も黄色で埋まる */
  background: #f2de03;
  font-size: clamp(12px, 1.2vw, 18px);
  font-weight: 700;
}
.showtime dt {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px min(2vw, 30px) 4px min(2vw, 30px);
  color: var(--dark);
  white-space: nowrap;
  line-height: 1;
}
/* 時計アイコン（time.png） */
.showtime dt::before {
  content: "";
  flex-shrink: 0;
  width: min(1.6vw, 24px);
  height: min(1.6vw, 24px);
  background: url(../images/time.png) no-repeat center / contain;
}
/* 時間：紺の地で、左側を丸く（見出しの黄色に食い込む形） */
.showtime dd {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px min(2vw, 30px);
  background: var(--dark);
  border-radius: 999px 0 0 999px;
  color: #fff;
}














@media (max-width: 768px) {




  .lightup__lead { font-size: clamp(12px, 1.8vw, 14px); text-align: left; }
  
  
  
  .lightup__lead br { display: none; }

  .tabs__btn {
    padding: 8px 8px 6px;
    font-size: clamp(12px, 2.1vw, 16px);
    line-height: 1.4;
  }

  .tabs__panel { margin-top: min(4vw, 30px); }
  
  /* 上段2枚・下段3枚（並び順はそのまま）
     6列のグリッドで1枚＝2列分。1枚目を2列目から始めると、上段は2枚で中央に、残り3枚が下段に並ぶ */
  .lightup-colors {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 3px;
  }
  .lightup-colors li { width: auto; grid-column: span 2; }
  .lightup-colors li:first-child { grid-column: 2 / span 2; }
  
  
  
  .lightup-info { border: 1px solid #5a93c7;}
  .lightup-info__icon { display: none; }
  .lightup-info__tower { display: none; }
  
  .lightup-info__text { font-size: 12px; text-align: left;}
  
  
  
  
  
  
  .event-movie__title { font-size: min(3.3vw, 25px); }
  .event-movie__title-lg { font-size: min(4vw, 30px); }
  .event-movie__title br { display: none; }



  .event-movie__sub {
    margin-top: 10px;
    padding-top: 15px;
    font-size: min(3.125vw, 24px);
    text-shadow: 0 0 4px #2f8bff, 0 0 10px #2f8bff, 0 0 20px rgba(47, 139, 255, .7);
  }


.event-movie__text {
  margin-top: min(1.6vw, 24px);
  font-size: clamp(12px, 1.8vw, 14px);
}





  
  
  
  
  
  
  
  
  
  
  
  

  .event-movie { grid-template-areas: "visual" "body" ; }
  .event-movie__body { grid-area: body; width: 100%; }
  .event-movie__visual { grid-area: visual; width: 100%; margin: -6% 0 0; }

  .event-movie__keroro { display: none; }
  
  .event-movie__keroro-sp {
    display: block;
    width: min(32.3vw, 248px);
  }
  
  .event-movie__keroro-sp--l { left: 2%; top: 20%;}
  .event-movie__keroro-sp--r { right: 0; top: 30%;}
  
  .event-movie .showtime dd { white-space: normal; }

  .collabo-movie .showtime dd { white-space: normal; } /* 狭い画面では日時の折り返しを許可 */

  /* コラボ記念動画：写真 → フィルム画像の縦並び */



  .collabo-movie__lead { 
    margin-top: 10px;
    padding-top: 15px;  
  }
  .collabo-movie__deco { display: none;}

  
  
/* 見出し */
.collabo-movie__title {
  font-size: min(3.3vw, 25px);
}



  .collabo-movie__text { font-size: clamp(12px, 2.1vw, 16px); }






/* 上映時間 */
.showtime {
  display: flex;
  align-items: stretch; /* 見出しと時間を同じ高さに */
  max-width: min(52vw, 400px);
  min-width: 270px;
  margin-top: 20px;
  border: 1px solid #f2de03;
  font-size: 12px;
  font-weight: 700;
}
.showtime dt {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px min(2.6vw, 20px) 4px min(2.6vw, 20px);
}
/* 時計アイコン（time.png） */
.showtime dt::before {
  width: 16px;
  height: 16px;
}
/* 時間：紺の地で、左側を丸く（見出しの黄色に食い込む形） */
.showtime dd {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px min(2.6vw, 20px);
  background: var(--dark);
  border-radius: 999px 0 0 999px;
  color: #fff;

}




  .event-movie .showtime ,
  .collabo-movie .showtime {
    max-width: min(65.1vw, 500px);
    margin-left: auto;
    margin-right: auto;
  }
  
.event-movie .showtime dd ,
.collabo-movie .showtime dd { white-space: nowrap; }

}

@media (max-width: 600px) {
  .showtime ,
  .event-movie .showtime,
  .collabo-movie .showtime {
    max-width: 100%;
  }
  
}

@media (max-width: 400px) {
  .tabs__btn {
    padding: 8px 5px 6px;
    font-size: 11px;
  }
  
  .showtime ,
  .event-movie .showtime,
  .collabo-movie .showtime {
    font-size: 11px;
  }  
}


/* =========================================================
   04 goods
========================================================= */
.goods { position: relative; margin-top: min(6.7vw, 100px); } 



.deco--goods-01 {
  width: min(7.2vw, 108px);
  right: calc( min(4vw, 60px) * -1);
  top: min(13.3vw, 200px);
}

.deco--goods-02 {
  width: min(17.5vw, 263px);
  right: min(.7vw, 10px);
  bottom: 30%;
  z-index: -1;
}




.goods__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: min(1.1vw, 16px);
  margin: min(5.3vw, 80px) auto 0;
}

.goods-item {
  padding: min(1.7vw, 25px) min(1.7vw, 25px) min(2vw, 30px); 
  background: #fff;
  border: 3px solid var(--navy);
  border-radius: 16px;
  box-shadow: 3px 3px 0 #b7c6e4;
  text-align: center;
  color: var(--text);
  /* 縦並びにして、価格をカードの一番下にそろえる */
  display: flex;
  flex-direction: column;
}

.goods-item img { width: 100%; object-fit: contain; }

.goods-item__name {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  margin-bottom: 15px;
  font-size: clamp(15px, 1.27vw, 19px);
  line-height: 1.4;
}
.goods-item__name span {
  display: block;
  font-size: clamp(12px, 1.2vw, 18px);
  margin-top: auto; /* 下に押し下げる */
  padding-top: 5px; 
}

.goods-item__price {
  padding-top: 15px;
  border-top: 1px solid var(--navy);
  font-size: clamp(16px, 1.8vw, 27px);
  font-weight: 700;
  line-height: 1;
}

.goods-item__price small {
  font-size: clamp(11px, 1.3vw, 20px);
  vertical-align: .1em;
}












.store-novelty {
  position: relative;
  margin-top: min(4.7vw, 70px);
  background: #13245a;
  border-radius: 16px;
  color: #fff;
  text-align: center;
  overflow: hidden;
}

.store-novelty-inner {
  margin: 10px;
  border: 2px solid #fff;
  border-radius: 14px;
  padding: 15px min(3.3vw, 50px) min(3.3vw, 50px);
  position: relative;  
}


.store-novelty__title { position: relative; width: min(44.1vw, 662px); margin: 0 auto; }


.store-novelty__lead {
  position: relative;
  font-size: clamp(14px, 1.5vw, 22px);
  font-weight: 700;
  margin-bottom: min(2.7vw, 40px);
}

.store-novelty__lead strong { font-size: 1.4em; }


.store-novelty__img { position: relative; max-width: 100%;}



.store-novelty__deco { position: absolute; pointer-events: none; }

.store-novelty__deco--01 { width: min(10.6vw, 156px); left: min(3.3vw, 50px); top: min(1.3vw, 20px); }
.store-novelty__deco--02 { width: min(11.3vw, 170px); right: min(4vw, 60px); top: min(3.3vw, 50px); }
.store-novelty__deco--03 { width: min(40.7vw, 611px); right: min(3.3vw, 50px); bottom: min(14.7vw, 220px); }














@media (max-width: 768px) {
.deco--goods-02 {
  width: min(17.5vw, 263px);
  right: min(.7vw, 10px);
  bottom: 25%;
}




  .goods__list { grid-template-columns: repeat(2, 1fr); gap: min(1.6vw, 12px); margin-top: 24px; }
  
  .goods-item {
    padding: min(2.6vw, 20px) min(2.6vw, 20px) min(3.3vw, 25px); 
    border: clamp(2px, .4vw, 3px) solid var(--navy);
    border-radius: 12px;
    box-shadow: clamp(2px, .4vw, 3px) clamp(2px, .4vw, 3px) 0 #b7c6e4;
  }
  
  .goods-item__name {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: clamp(14px, 2.3vw, 18px);
  }
  
  .goods-item__name span {
    font-size: clamp(12px, 2.2vw, 17px);
    padding-top: 4px; 
  }

  .goods-item__price {
    padding-top: 10px;
    font-size: clamp(15px, 3.3vw, 25px);
  }

  .goods-item__price small {
    font-size: clamp(11px, 2.3vw, 18px);
    vertical-align: .075em;
  }
  






  .store-novelty-inner {
    margin: 5px;
    border: 1px solid #fff;
    padding: 10px min(3.3vw, 50px) min(3.3vw, 50px);
  }

  .store-novelty__title { position: relative; width: 90%; margin: 0 auto; }


  .store-novelty__lead {
    font-size: clamp(12px, 2.6vw, 20px);
  }

  .store-novelty__lead strong { font-size: 1.3em; }

.store-novelty__deco--01 { width: min(10.6vw, 156px); left: min(3.3vw, 50px); top: min(9.1vw, 70px); }
.store-novelty__deco--02 { width: min(11.3vw, 170px); right: 5px; top: min(11vw, 85px); }
.store-novelty__deco--03 { width: min(40.7vw, 611px); right: min(6vw, 46px); bottom: min(20vw, 150px); }













}















/* =========================================================
   05 info
========================================================= */
.info { position: relative; margin-top: min(6.7vw, 100px); }


.deco--info-01 { width: min(4.7vw, 71px); right: min(.7vw, 10px); top: calc( min(2.7vw, 40px) * -1); }
.deco--info-02 { width: min(5.4vw, 81px); left: calc( min(2.7vw, 40px) * -1); top: 40%; }
.deco--info-03 { width: min(11vw, 165px); right: calc( min(6vw, 90px) * -1); bottom: min(5.3vw, 80px);}
@media (max-width: 1500px) {
.deco--info-03 { width: min(7.3vw, 110px); right: calc( min(3.3vw, 50px) * -1); bottom: min(6vw, 90px);}
}





.info__table { display: grid; gap: 10px;}

.info__row {
  display: flex;
  background: #fff;
  border: 2px solid var(--navy);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 3px 3px 0 #b7c6e4;
  z-index: 2;
}


.info__row dt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: clamp(230px, 21vw, 310px);
  flex-shrink: 0;
  padding: min(.7vw, 10px) min(.7vw, 10px) min(.7vw, 10px) min(1.7vw, 25px);
  border-right: 2px solid var(--navy);
}
.info__row--y dt { background: #ffe9a3; }
.info__row--b dt { background: #d7eafb; }


.info__row dt img { width: clamp(40px, 4vw, 61px); }




/* 項目名：20px・白フチ（フチを文字の外側だけに付けるため paint-order で線→塗りの順に描画） */
.info__row dt span {
  font-size: clamp(15px, 1.3vw, 20px);
  font-weight: 700;
  color: var(--navy);
  -webkit-text-stroke: 4px #fff;
  paint-order: stroke fill;
}


.info__row dd {
  flex: 1;
  /* 行の高さはそのまま（dtの背景は伸ばしたまま）、dd の中身だけ上下中央に */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: min(1.7vw, 25px);
  font-size: clamp(13px, 1.2vw, 18px);
  font-weight: 500;
}

.info__note { font-size: .85em; }

.info__note a { text-decoration: underline; color: var(--blue); }
.info__note a:hover { text-decoration: none; }



.access { margin-top: 12px; }

/* 見出し：色付きのバー＋右側にアイコン */
.access__label {
  display: flex;
  align-items: center;
  font-weight: 700;
  color: var(--navy);
}
.access__bar {
  width: clamp(180px, 17vw, 250px);
  padding: 4px 16px;
  background: #d7eafb;
  border-radius: 999px;
  text-align: center;
}
.access--train .access__bar { background: #ffe9a3; }
.access--car .access__bar { background: #d7eafb; }

.access__label img { width: clamp(40px, 4vw, 61px); flex-shrink: 0; }
.access__label + p { margin-top: 4px; }













@media (max-width: 768px) {


  
  .info__row {
    flex-direction: column;
    border-radius: 10px;
    box-shadow: 2px 2px 0 #b7c6e4;
  }

  

.info__row dt { width: 100%; padding: 6px 12px; border-right: 0; border-bottom: 2px solid var(--navy); }



.info__row dd {
  padding: 15px;
  font-size: clamp(13px, 2.2vw, 17px);  
}



.info__row dt span {
  font-size: clamp(15px, 2.3vw, 18px);
  font-weight: 700;
  -webkit-text-stroke: 3px #fff;
}



  
  
}






/* =========================================================
   links / footer
========================================================= */
.links {
  display: flex;
  justify-content: center;
  gap: min(1vw, 15px);
  margin-top: min(10vw, 150px);
  padding-bottom: min(13.3vw, 200px);
}


.links li { width: min(23vw, 346px); }
.links a { display: block; transition: opacity .2s; }
.links a:hover { opacity: .7;}



.deco--footer-01 { width: min(4.5vw, 68px); right: min(2vw, 30px); bottom: min(15.3vw, 230px); }
.deco--footer-02 { width: min(4.5vw, 68px); left: min(2.7vw, 40px); bottom: min(25.3vw, 380px); }




@media (max-width: 768px) {
  .links {
    gap: 5px;
  }

  .links li { width: min(29vw, 220px); }



.deco--footer-01 { width: min(4.5vw, 68px); right: min(2vw, 30px); bottom: min(2.6vw, 20px); }
.deco--footer-02 { width: min(4.5vw, 68px); left: min(2.7vw, 40px); bottom: min(25.3vw, 380px); }

}









.footer { text-align: center; }


.footer__info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: min(2vw, 1.6vw, 30px);
  background: #fff;
}

.footer__logo img { width: clamp(46px, 6.7vw, 72px); }/*/1080*/
.footer__sponsor { font-size: clamp(12px, 17px); font-weight: 700; color: #222; }
.footer__sns img { width: clamp(24px, 3.4vw, 37px); }
.footer__logo, .footer__sns { transition: opacity .2s; }
.footer__logo:hover, .footer__sns:hover { opacity: .7; }



.footer__copy {
  padding: 14px 20px;
  background: #004192;
  color: #fff;
  font-size: clamp(10px, 1.5vw, 16px);
  font-weight: 500;
}






/* =========================================================
   動きを減らす設定のユーザーにはアニメーションを控える
========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  html { scroll-behavior: auto; }
}