#note-overlay {
  position: fixed;
  inset: 0;
  display: none;
  pointer-events: none;
  transition: opacity 0.15s ease-out;
  z-index: 2000;
}

body.note-open #note-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
}

.note-book {
    font-family: "Klee One", serif;
    font-size: 0.95rem;
    line-height: 2.0;
    letter-spacing: 0; /* 触らない */
  /*  width: 80vw;
    min-width: 1100px;*/
    width: clamp(1100px,90vw,2000px);
    padding: 2rem;
    position: relative;
    transform: scale(0.95);
    opacity: 0;
    transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}

body.note-open .note-book {
  transform: scale(1);
  opacity: 1;
}

.note-prev,
.note-next {
  position: absolute;
  top: 8%;
  bottom: 8%;
  width: 15%;
  background: transparent;
  border: none;
  cursor: pointer;
}

.note-prev { left: 8%; }
.note-next { right: 8%; }

.note-image {
  max-width: 100%;
  cursor: zoom-in;
}

.note-bg {
  width: 100%;
  display: block;
}

#note-content {
  position: absolute;
  inset: 8% 10% 10% 10%; /* ノートの余白に合わせて調整 */
  overflow-y: auto;
}

/* 普段は触らない（遷移を邪魔しない） */
#note-overlay { pointer-events: auto; }

/* ノートが開いてる時だけ、背景クリックを透過させる */
body.note-open #note-overlay { pointer-events: none; }

/* ただしノート本体は操作できる */
body.note-open #note-overlay .note-book { pointer-events: auto; }


#frame-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

body.frame-open #frame-overlay {
  opacity: 1;
  pointer-events: auto;
}
/*イラストから写真への効果*/
.frame-image-wrap {
  position: absolute;
  inset: 0;
}

.frame-image-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.8s ease;
}


#frame-illustration { opacity: 1; }
#frame-photo { opacity: 0; }

/* フェード開始用 */
.frame-fade #frame-illustration { opacity: 0; }
.frame-fade #frame-photo { opacity: 1; }

.frame-stage{
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2100;        /* ui-overlay より上 */
  pointer-events: none; /* 背景クリックを通す */

}
body.frame-open .frame-stage{
  display: flex;
}

#ui-overlay{
  cursor: pointer;
}

#ui-overlay .frame-modal,
#ui-overlay .frame-modal *{
  cursor: default;
}


.frame-view {
  margin: auto;
  transform: scale(0.98);
  transition: transform 0.15s ease;
  max-width: 80vw;
  max-height: 80vh;
}

body.frame-open .frame-view {
  transform: scale(1);
}

.frame-view { position: relative; }

#frame-modal{
  position: relative;
  width: min(92vw, 840px); /* フレームの大きさ */
  pointer-events: auto;    /* フレーム本体は触れる */
}


body.frame-open #frame-modal{
  display: flex;
  pointer-events: auto;
}

#frame-switch{
  position: absolute;
  left: 44%;
  top: 88.5%;
  width: 73px;
  height: 73px;
  border-radius: 999px;
  cursor: pointer;
  background:transparent; /* 仮。後で画像にする */
  border: 0px solid rgba(255,255,255,0.25);
}
#frame-switch:hover{
  transform: scale(1.03);
}

#frame-illustration,
#frame-photo {
  position: fixed;      /* ← absoluteじゃなくfixed推奨 */
  inset: 0;
  width: auto;
  height: 76vh;
  display: none;
  z-index: 2000;        /* 部屋シーンより上 */
  margin: auto;
  overflow: hidden;
}

#frame-photo        { z-index:2001; display:none; }
#frame-base         { 
  z-index:2002;
  height: 80vh;
  width: auto;
  position: relative;
  display: block;
  margin-inline: auto;
}

.frame-base-box{
  position: relative;
}
#frame-switch       { z-index:2003; }

#ui-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: none;
  z-index: 1800;
  pointer-events: auto; 
}
body.note-open #ui-overlay,
body.frame-open #ui-overlay{
  display: block;
}

body.frame-open #frame-illustration { display: block; }

body.frame-open #frame-illustration,
body.frame-open #frame-photo{
  pointer-events: none;          /* 背景は透過 */
  display: block;
}

/* ボタン押したら写真を出す（←今あなたのJSが付けてるクラス） */
body.frame-open.frame-photo #frame-photo {
  display: block;
}

/* 写真の時はイラストを消す（念のため） */
body.frame-open.frame-photo #frame-illustration {
  display: none;
}

#frame-modal { position: relative; }

#frame-base-wrap{margin-inline: auto;}
/* 🐞本体 */
#ladybug{
  position: absolute;
  top: -1.9%;              /* 上辺の縁の高さに合わせて微調整 */
  left: 12%;              /* “安全マージン”開始位置 */
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2001;

  /* ここが肝：移動量 */
  --walk-range: 76%;      /* 12% → 88%相当を往復（端まで行かせない） */
  animation: ladybug-move 60s linear infinite;
  transform: translateX(0) scaleX(1);
  will-change: left,transform;
}

#ladybug-img{
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none; /* クリックはボタンが受ける */
}



@keyframes ladybug-move{
  0% { left: 18%; transform: translateY(10px) scaleX(1) rotate(-30deg); }
  2% { left: 19%; transform: translateY(5px)  scaleX(1) rotate(-25deg); }
  4% { left: 20%; transform: translateY(0)   scaleX(1) rotate(-18deg); }


  5%   { left: 21%; transform: scaleX(1) rotate(0deg); }
  30%  { left: 68%; transform: scaleX(1) rotate(0deg); }

  /* 手前でお辞儀開始（少し前倒し） */
  38%  { left: 82%; transform: scaleX(1) rotate(0deg); }
  41%  { left: 83%; transform: scaleX(1) rotate(18deg); }

  /* 潜る */
  43% { left: 84%; transform: translateY(5px)  scaleX(1)  rotate(25deg); }
  45% { left: 85%; transform: translateY(10px) scaleX(1)  rotate(30deg); }
  47% { left: 86%; transform: translateY(18px) scaleX(1)  rotate(35deg); }

  /* 潜ったまま反転 */
  48.0% { left: 86%; transform: translateY(18px) scaleX(-1) ; }

  /* 出てくる（Xは88%のまま） */
  49.0% { left: 84%; transform: translateY(10px) scaleX(-1) rotate(-30deg); }
  50.0% { left: 83%; transform: translateY(5px)  scaleX(-1) rotate(-25deg); }
  52.0% { left: 82%; transform: translateY(0)   scaleX(-1) rotate(-18deg); }

  /* 姿勢戻し */
  54%  { left: 82%; transform: scaleX(-1) rotate(0deg); }
  55%  { left: 81.5%; transform: scaleX(-1) rotate(0deg); }
  85%  { left: 23%; transform: scaleX(-1) rotate(0deg); }
  88%  { left: 18%; transform: scaleX(-1) rotate(0deg); }

    /* 潜る */
  90.0% { left: 18%; transform: translateY(5px)  scaleX(-1)  rotate(25deg); }
  91.6% { left: 17%; transform: translateY(10px) scaleX(-1)  rotate(30deg); }
  92.2% { left: 16%; transform: translateY(18px) scaleX(-1)  rotate(35deg); }

  /* 潜ったまま反転 */
  96.0% { left: 18%; transform: translateY(18px) scaleX(1) ; }
  100%   { left: 18%; transform: translateY(18px)  scaleX(1) rotate(0deg); }
}
/*
#frame-modal{
  --walk-k: 1; /* 1=現状、0.8=短く、0.6=かなり短く
}
*/
#ladybug-img{
  animation: bug-wiggle 0.2s ease-in-out infinite;
  transform-origin: 70% 60%;
}
@keyframes bug-wiggle{
  0%,100% { transform:  rotate(0deg); }
  50%     { transform:  rotate(3deg); }
}


/* ===== NOTE overlay ===== */

.note-pages{
  position: absolute; /* note-bgの上に置く想定なら */
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  padding: 4% 7% 9%; /* ノート画像の余白に合わせて調整 */
}

.note-page{
  overflow: hidden;
}

.note-text p{
  margin: 0 0 8px;
}

.note-images{
  width: 100%;
  height: 40%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  align-items: start;
  overflow: hidden; 
}

.note-images img{
  height: 100%;
}
.note-image{
  width: auto;
  max-width: 100%;
  display: block;
  object-fit: cover;
  margin-inline: auto;
  box-shadow: 3px 1px 15px -5px #bfbfbf;
}

#note-content-left, #note-content-right{
  padding: 30px 30px;
}

.note-text{
  margin-top: calc(1.2vw);
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.7;
  margin-left: 2vw;

}

.note-images .tape-photo img{
  width: 100%;
  height: 100%;       /* ←これが必要 */
  object-fit: contain; /* 枠内に収める（切りたくないなら contain） */
  display: block;
}
 #note-content-right{
  margin-top: 70px;
 }

 .tape-photo{
  position: relative;
  display: inline-block;
  height: 100%;
  margin: 0;
  padding: 10px;               /* 写真の外側の余白（台紙感） */
  background: rgba(255,255,255,.06);
  border-radius: 10px;
}

.tape-photo::before{
  content: "";
  position: absolute;
  top: 0px;
  width: 80px;
  height: 28px;
  background: rgba(234, 215, 45, 1);  /* テープ色 */
  opacity: .85;
  /*border-radius: 4px;*/
  filter: blur(.2px) drop-shadow(0.5px 0.5px 1px rgba(156, 156, 143, 0.606));
  
}

.tape-photo::before{ 
  left: 50%;
  transform: translateX(-50%);
 }


.tape-photo .note-image{
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
}

/* 左右ページ共通 */
.note-page{
  opacity: 0;
  transform: translateY(10px);   /* ← 6pxは弱い */
  transition:
    opacity 420ms ease-out,
    transform 420ms cubic-bezier(.2,.8,.2,1);
}

.note-page{
  opacity: 0;
  transition: opacity 260ms ease;
}

.note-book.is-show .note-page{
  opacity: 1;
}

/*ゲームクリアメッセージ*/
.game-end[hidden]{ display:none; }
.game-end{ position:fixed; inset:0; z-index:9999; }
.game-end__bg{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.game-end__panel{
  position:absolute; left:50%; top:55%;
  transform:translate(-50%,-50%);
  background:#111; color:#fff;
  padding:18px 16px; border-radius:14px;
  width:min(360px, calc(100% - 28px));
  box-shadow:0 12px 40px rgba(0,0,0,.45);
}
.game-end__title{ margin:0 0 8px; font-size:18px; }
.game-end__text{ margin:0 0 14px; opacity:.9; }
.game-end__actions{ display:flex; gap:10px; flex-wrap:wrap; }
.game-end__actions button{ flex:1; padding:10px 12px; border-radius:10px; }
/*********************************************************************************************************************************/
@media (min-width:767px) and (max-width:1199px){
  /*
  .note-book{width: 95vw;}
  .note-pages{
    padding: 4% 7% 10%;
    gap:7% ;
  }

#note-content-left{
  padding:15px 30px ;
}
.note-title{margin: 0px 30px;}
.note-text {margin: 20px 10px;}
#note-content-right{
  margin-top: 30px;
}
.tape-photo .note-image{
  height:40% ;
}
*/

  #note-overlay{
    position: fixed;
    inset: 0;
    overflow: hidden;
    touch-action: none;
  }

  #note-overlay .note-book{
    width: 693px;
    height: 448px;        /* 画像に合わせると計算が安定 */
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: center;
  }

  .note-title{ font-size:1.0rem ;}
  .note-book{  padding:0; }
  .note-pages{padding: 0; gap: 50px;}
  #note-content-left{padding:10px 10px 50px 50px}
  .note-images{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0px;
    align-items: start;
  }
  .tape-photo .note-image {height: 140px;}
  .note-text{margin: 0; padding : 10px;}
  .note-text p{font-size: 10px; line-height: 1.2rem;}
  #note-content-right{margin-top: 0; padding: 30px 50px 50px 10px;}

.frame-switch{
  width: 6%;
  height: 6%;
  left:46% ;
  top: 88%;
}

#frame-modal{width: min(90vw, 900px);}
#ladybug{
  position: absolute;
  top: -2.5%;              /* 上辺の縁の高さに合わせて微調整 */
  left: 10%;              /* “安全マージン”開始位置 */
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2001;

  /* ここが肝：移動量 */
  --walk-range: 88%;      /* 12% → 88%相当を往復（端まで行かせない） */
  animation: ladybug-move 60s linear infinite;
  transform: translateX(0) scaleX(1);
  will-change: left,transform;
}


}


/*********************************************************************************************************************************/
/* スマホ */
@media (max-width:767px){
#frame-modal{
  width: min(90%, 700px); /* フレームの大きさ */
}

#frame-illustration,
#frame-photo {
  width: 85%;
  height: auto;
}

#frame-base { 
  height: auto;
  width: 100%;
}

#frame-switch{
  width: 8%;
  height: 8%;
}

#ladybug {
  top: -5%;
}


  #note-overlay{
    position: fixed;
    inset: 0;
    overflow: hidden;
    touch-action: none;
  }

  /* 693px基準で固定（これが効く） */
  #note-overlay .note-book{
    width: 693px;
    height: 448px;        /* 画像に合わせると計算が安定 */
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: center;
    transform: translate(-50%, -50%) translateX(25%);
  }

  .note-title{ font-size:1.0rem ;}
  .note-book{  padding:0; }
  .note-pages{padding: 0; gap: 50px;}
  #note-content-left{padding:10px 10px 50px 50px}
  .note-images{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0px;
    align-items: start;
  }
  .tape-photo .note-image {height: 140px;}
  .note-text{margin: 0;}
  .note-text p{font-size: 14px; line-height: 1.2rem;}
  #note-content-right{margin-top: 0; padding: 30px 50px 50px 10px;}
}


@media (max-width: 767px) and (orientation: landscape) {
  #note-overlay .note-book{
    width: 85vw;
    max-height: 95vh;
  }
  .note-images{
  width: 100%;
  height: 40%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(98px, 1fr));
  gap: 0px;
  align-items: start;
  overflow: hidden; 
}
.note-content-left{
  padding:10px  10px 30px 30px ;
}
.frame-stage{height: 95vh;}
#frame-modal{height: 100%; margin-top:30px}
#frame-illustration{height: 85%;}
#frame-base{height: 100%;}
#frame-photo{height: 90%;}
#ladybug{
  position: absolute;
  top: -6.9%;              /* 上辺の縁の高さに合わせて微調整 */
}

}
@media (max-width: 767px) and (orientation: landscape) {
  /* スマホ横向き専用 */

  #ladybug{
    top: -3.5;
  }
}