/* 縦方向は JS が4組だけ切り替える。連絡欄以降に吸着を掛けない。 */
html.snap-root{scroll-snap-type:none}
.snap{overflow-x:clip}
.screen:not(.screen-end){position:relative;height:100vh;height:100svh;min-height:0;overflow:hidden;touch-action:pan-x pinch-zoom}
#s5.screen-end{min-height:100svh}

/* 各事業の主役は右側に固定し、言葉の長さに合わせて吹き出しだけを縮める。 */
.panel-scene{min-width:0}
.panel-speech{width:max-content;max-width:100%;justify-self:end;line-break:strict;word-break:auto-phrase;text-wrap:pretty}
.speech-unit{display:inline-block;white-space:normal}
.panel-character{justify-self:end}

/* 装飾の猫はギャラリーの完成済みポーズを縮小したコピー。操作や読み上げを妨げない。 */
.hero-cast,.panel-cast{pointer-events:none}
.hero-cast img,.panel-cast img,.cat-gather img{display:block;object-fit:contain}
.panel-cast{display:none}
.hero-cast{position:absolute;right:10px;bottom:4px;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:0;width:126px}
.hero-cast img{display:none;width:100%;height:49px}
.hero-cast img:nth-child(-n+3){display:block}

/* 指でもマウスでも押しやすい、肉球付きの次へボタン。 */
.slide-next{
  position:absolute;z-index:6;top:auto;right:12px;bottom:10px;
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  width:auto;min-width:86px;min-height:44px;height:auto;padding:5px 10px;
  transform:none;border:2.5px solid var(--ink);border-radius:999px;
  background:linear-gradient(135deg,#fff8c8,#ffd8ed 55%,#d9d0ff);
  color:var(--ink);box-shadow:3px 4px 0 var(--ink);
  font-size:12px;line-height:1.1;font-weight:900;text-decoration:none;white-space:nowrap;
  transition:transform .15s ease,box-shadow .15s ease;
}
#s1 .slide-next{top:auto}
.slide-next span:first-child{font-size:16px;transform:rotate(-16deg)}
.slide-next span:last-child{font-size:20px;line-height:.8;margin-top:-4px}
.slide-next:hover{transform:translateY(-2px)}
.slide-next:active{transform:translate(2px,3px);box-shadow:1px 1px 0 var(--ink)}
.slide-next:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* 連絡先とじっけん室は、猫の集まりを文章・ボタンから離して置く。 */
.cat-gather{display:flex;align-items:end;justify-content:center;gap:3px;width:100%;pointer-events:none}
.cat-gather img{width:min(10%,48px);height:58px;flex:0 1 auto}
.contact-gather{margin-bottom:12px}
.detour-gather{margin:0 0 18px}

@media (min-width:768px){
  /* 画面1も「自己紹介＋①」で1枚。残りは2事業ずつ1枚。 */
  #s1 .hero{flex:0 0 48%;min-height:0;padding:15px clamp(22px,4vw,62px);overflow:hidden}
  #s1 .panel,#s2 .panel,#s3 .panel,#s4 .panel{flex:1 1 0;min-height:0}
  .panel-btn{align-items:center;justify-content:center;padding:8px 10px}
  .card{width:fit-content;min-width:clamp(380px,38vw,500px);max-width:min(52vw,670px);padding:9px 16px 6px;gap:2px}
  .panel-head{gap:7px}
  .panel-icon{width:35px;height:35px;flex-basis:35px;font-size:18px}
  .panel-num{font-size:23px}
  .panel-title{font-size:clamp(17px,1.8vw,21px);line-height:1.3}
  .panel-scene{grid-template-columns:minmax(0,1fr) 90px;gap:6px}
  .panel-speech{padding:7px 10px;font-size:14px;line-height:1.45}
  .panel-character{width:90px;height:90px}
  .panel-more{min-height:21px;font-size:12px}
  .ribbon{top:7px;font-size:10px;padding:4px 10px}

  /* 中央のカードの左右で、各テーマにつき2匹ずつ遊ぶ。 */
  .panel-cast{position:absolute;top:50%;z-index:2;display:flex;align-items:end;justify-content:center;gap:clamp(2px,.7vw,10px);width:24%;transform:translateY(-50%)}
  .panel-cast-left{left:0}
  .panel-cast-right{right:0}
  .playmate{position:relative;display:flex;flex-direction:column;align-items:center;width:44%;min-width:0;animation:scene-bob 3.5s ease-in-out infinite}
  .playmate:nth-child(2){animation-delay:-1.7s}
  .playmate img{width:100%;height:clamp(60px,14vh,115px)}
  .play-prop{position:absolute;z-index:1;top:43%;right:-8%;display:block;font-size:clamp(17px,2vw,25px);line-height:1;transform:rotate(-10deg);filter:drop-shadow(1px 2px 0 #fff)}
  .playmate:nth-child(2) .play-prop{top:58%;right:auto;left:-7%}
  .panel-cast-right .play-prop{transform:rotate(9deg)}
  @keyframes scene-bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}

  /* 冒頭には①に出演しない11種類。①側の5種類と合わせて16種類。 */
  #s1 .hero-inner{position:relative;width:52%;max-width:none;margin:0;z-index:3}
  #s1 .hero-role{margin-bottom:5px}
  #s1 .hero-catch{font-size:clamp(34px,3.6vw,49px);line-height:1.2;margin-bottom:5px}
  #s1 .hero-catch .br-unit{display:inline-block}
  #s1 .chain{margin-bottom:5px}
  #s1 .hero-lead{font-size:14px;line-height:1.55;margin-bottom:8px}
  #s1 .hero-more{min-height:43px;padding:0 16px;font-size:13px}
  .hero-cast{right:3%;bottom:14px;z-index:2;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));width:42%;gap:1px 3px}
  .hero-cast img,.hero-cast img:nth-child(n){display:block;width:100%;height:clamp(48px,9vh,82px)}
  .hero-cast img:nth-child(even){transform:translateY(-6px) rotate(2deg)}
  .hero-cast img:nth-child(3n){transform:rotate(-3deg)}

  .slide-next{right:20px;bottom:14px;min-width:100px;font-size:13px}
  .slide-next span:first-child{font-size:18px}
  .cat-gather{gap:5px}
  .cat-gather img{width:min(11%,56px);height:70px}
  .contact-gather{margin-bottom:17px}
  .detour-gather{margin-bottom:24px}
}

@media (min-width:768px) and (max-height:700px){
  #s1 .hero{flex-basis:46%}
  #s1 .hero-catch{font-size:clamp(31px,3.2vw,42px)}
  .card{padding-top:8px;padding-bottom:6px}
  .panel-character{height:88px}
  .playmate img{height:clamp(55px,12vh,88px)}
}

@media (max-width:767px){
  /* PCの構図を縮めるのではなく、主役と文章を残して脇役を整理する。 */
  .panel-cast{display:none}
  .panel-speech{padding:6px 8px;line-height:1.4}
  .screen:not(.screen-end) .panel:last-of-type .panel-btn{padding-bottom:70px}
  .slide-next{right:8px;bottom:6px}
  .cat-gather img:nth-child(n+5){display:none}
  .cat-gather img{width:43px;height:53px}
  .contact-gather{margin-bottom:10px}
  .detour-gather{margin-bottom:12px}
}

@media (max-width:767px) and (max-height:500px){
  #s1 .hero{flex-basis:44%}
}

@media (max-width:320px) and (max-height:460px){
  .panel-character{height:62px}
  .panel-more{min-height:18px}
}

@media (max-width:360px) and (max-height:600px){
  /* 初代SEでは猫の集合より「自己紹介＋①」を1画面で読めることを優先。 */
  .hero-cast{display:none}
  .panel-speech{font-size:11.5px;padding:5px 6px}
  .slide-next{min-width:78px;padding-left:7px;padding-right:7px;font-size:11px}
}

@media (prefers-reduced-motion:reduce){
  .playmate{animation:none}
  .slide-next{transition:none}
}

/* ================================================================
   2026-10-01 白枠と背景イラスト
   ・冒頭（自己紹介）も①〜⑦の .card と同じ白枠で囲み、中央に置く。
   ・冒頭・①〜⑦・問い合わせ・じっけん室の背景は静止画ギャラリーの絵
     （assets/bg/ は縮小コピー）。元の色は画像が読めないときの下地として残す。
   ・白枠はすべて不透明度70%にして、背景の絵が少し透けて見えるようにする。
   ・装飾の猫（冒頭11匹・①〜⑦の左右・問い合わせ/じっけん室の行列）と
     実験係・のぞき見係は表示しない。「気軽にどうぞ！」の案内係だけ残す。
   ================================================================ */
.hero{background:#eafcff url(./assets/bg/hero.webp) center/cover no-repeat}
.p1{background:#a8ecff url(./assets/bg/p1.webp) center/cover no-repeat}
.p2{background:#cbb2ff url(./assets/bg/p2.webp) center/cover no-repeat}
.p3{background:#3730c9 url(./assets/bg/p3.webp) center/cover no-repeat}
.p4{background:#ffb8d6 url(./assets/bg/p4.webp) center/cover no-repeat}
.p5{background:#8ef2d6 url(./assets/bg/p5.webp) center/cover no-repeat}
.p6{background:#a9c0ff url(./assets/bg/p6.webp) center/cover no-repeat}
.p7{background:#ff9e6b url(./assets/bg/p7.webp) center/cover no-repeat}
.contact{background:#fffdfb url(./assets/bg/contact.webp) center/cover no-repeat}
.detour{background:#eef6fb url(./assets/bg/detour.webp) center/cover no-repeat}
/* 元の模様は消し、絵の上に薄い白（12%）をかける。 */
.deco-hero,.panel .deco,.deco-contact,.deco-detour{background:rgba(255,255,255,.12) none}

.hero-cast,.panel-cast,.cat-gather,.mascot-lab,.mascot-peek{display:none !important}

/* 白枠（不透明度70%） */
.card{background:rgba(255,253,247,.7)}
.form-note{background:rgba(255,253,240,.7)}
.detour-inner{background:linear-gradient(160deg,rgba(255,253,240,.7) 0%,rgba(242,246,255,.7) 100%)}
#s1 .hero-inner,#s5 .contact-inner{
  background:rgba(255,253,247,.7);
  border:3px solid var(--ink);
  border-radius:var(--r);
  box-shadow:5px 6px 0 var(--ink);
}
#s1 .hero-inner{
  align-self:center;
  width:fit-content;max-width:100%;
  margin:0 auto;
  padding:12px 16px;
}
#s5 .contact-inner{padding:18px 16px 20px}
/* スマホは外側の余白を詰め、白枠の中の文字幅を枠を付ける前とほぼ同じにする。 */
@media (max-width:767px){
  #s5 .contact{padding-left:10px;padding-right:10px}
  #s5 .contact-inner{padding:16px 10px 18px}
}
@media (min-width:768px){
  #s1 .hero-inner{width:fit-content;max-width:min(52vw,700px);margin:0 auto;padding:12px 22px 14px}
  #s5 .contact-inner{padding:24px 24px 26px}
}
/* 実験係を消したぶん、じっけん室の白枠は列の中央に置く。 */
@media (min-width:1140px){
  .detour-card{margin:0 auto}
}