/* 共通：ヘッダー枠 */
#固定内容 {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

/* スマホ横向き */
@media screen and (max-width: 767px) and (orientation: landscape) {
  body {
    font-size: 10px;
  }
  #固定内容 {
    max-width: 767px;
  }
}
/* タブレット */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 14px;
  }
  #固定内容 {
    max-width: 1023px;
  }
}
/* PC */
@media screen and (min-width: 1024px) {
  body {
    font-size: 16px;
  }
  #固定内容 {
    max-width: 1280px;
  }
}

#行１ {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0.15em 0.4em;
  background-color: blue;
  height: 10vmin;
  color: white;
  border-radius: 10px;
  z-index: 1;
  overflow: hidden;
}
#senseiW {
  grid-column: 1;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 0.35em;
  z-index: 3;
}
.sensei,
.neko {
  display: block;
  height: 8.5vmin;
  width: 8.5vmin;
  min-width: 8.5vmin;
  min-height: 8.5vmin;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background-color: #fff;
  box-sizing: border-box;
}
#さくら {
  grid-column: 2;
  justify-self: center;
  align-self: center;
  height: 9.1vmin;
  max-height: 9.1vmin;
  width: auto;
  padding: 0;
  box-sizing: border-box;
  object-fit: contain;
}
#nekoW {
  grid-column: 3;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 0.35em;
  z-index: 3;
}
.行１１ {
  position: relative;
  height: 7vmin;
}
#全ローカル消去 {
  color: rgb(1, 153, 1);
}
#全ローカル消去2 {
  color: rgb(1, 153, 1);
  top: 10vh;
}

/* 青枠下端〜揺れる画像上端の中間配置＆サイズは JS で調整（ここはフォールバック） */
#サンプル版 {
  position: fixed;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  z-index: 3;
  width: fit-content;
  max-width: min(90vw, 18em);
  box-sizing: border-box;
  margin: 0;
  padding: 0.18em 0.85em;
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  /* vmin 基準：縦横どちらでも極端に大きく／小さくなりにくい */
  font-size: clamp(0.8rem, 2.6vmin, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.35;
  white-space: nowrap;
  color: #4a7c8c;
  background-color: #f4fafb;
  border: 2px solid #9bc4d0;
  border-radius: 999px;
  box-shadow: 0 0.12em 0.28em rgba(74, 124, 140, 0.14);
  pointer-events: none;
  visibility: hidden;
}

/* 中央の大きな画像：PC／タブレットは左右並び */
#hajimeW {
  position: fixed;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(1em, 3vw, 1.8em);
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  width: min(68vw, 36em);
  max-width: 90vw;
  z-index: 2;
  box-sizing: border-box;
}

/* 吹き出し＋絵をひとまとまりにしてゆらす */
.hajimeBtn {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

#はじめます,
#はじめます2 {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(58vh, 22em);
  object-fit: contain;
  opacity: 1;
  visibility: visible;
  /* 透過画像の形に沿う柔らかい影 */
  filter: drop-shadow(0 0.35em 0.45em rgba(80, 50, 60, 0.28))
          drop-shadow(0 0.08em 0.12em rgba(80, 50, 60, 0.18));
  /* fit-content だと読み込み前に高さが0になり、iPadで真っ白になることがある */
}

/* 左：速さと遅さがゆらぐ上下（ひらがな）※吹き出しも一緒に動く */
#hajimeBtnH {
  animation: fuwafuwaH 5.2s infinite linear;
  -webkit-animation: fuwafuwaH 5.2s infinite linear;
}

/* 右：別リズムで速さ遅さがゆらぐ＋少し左右（カタカナ）※位相もずらす */
#hajimeBtnK {
  animation: fuwafuwaK 6.4s infinite linear;
  -webkit-animation: fuwafuwaK 6.4s infinite linear;
  animation-delay: -2.1s;
  -webkit-animation-delay: -2.1s;
}

/* キーフレーム間隔を不均等にして、速い区間／遅い区間を作る */
@keyframes fuwafuwaH {
  0% {
    transform: translateY(-0.5em);
  }
  12% {
    transform: translateY(0.45em);
  }
  28% {
    transform: translateY(0.45em);
  }
  38% {
    transform: translateY(-0.55em);
  }
  55% {
    transform: translateY(-0.2em);
  }
  68% {
    transform: translateY(0.35em);
  }
  82% {
    transform: translateY(0.35em);
  }
  100% {
    transform: translateY(-0.5em);
  }
}
@-webkit-keyframes fuwafuwaH {
  0% {
    -webkit-transform: translateY(-0.5em);
    transform: translateY(-0.5em);
  }
  12% {
    -webkit-transform: translateY(0.45em);
    transform: translateY(0.45em);
  }
  28% {
    -webkit-transform: translateY(0.45em);
    transform: translateY(0.45em);
  }
  38% {
    -webkit-transform: translateY(-0.55em);
    transform: translateY(-0.55em);
  }
  55% {
    -webkit-transform: translateY(-0.2em);
    transform: translateY(-0.2em);
  }
  68% {
    -webkit-transform: translateY(0.35em);
    transform: translateY(0.35em);
  }
  82% {
    -webkit-transform: translateY(0.35em);
    transform: translateY(0.35em);
  }
  100% {
    -webkit-transform: translateY(-0.5em);
    transform: translateY(-0.5em);
  }
}

@keyframes fuwafuwaK {
  0% {
    transform: translate(0.1em, 0.4em);
  }
  8% {
    transform: translate(0.1em, 0.4em);
  }
  22% {
    transform: translate(-0.12em, -0.5em);
  }
  40% {
    transform: translate(0.08em, 0.25em);
  }
  48% {
    transform: translate(0.08em, 0.25em);
  }
  63% {
    transform: translate(-0.15em, -0.4em);
  }
  78% {
    transform: translate(0.12em, 0.15em);
  }
  90% {
    transform: translate(-0.05em, -0.35em);
  }
  100% {
    transform: translate(0.1em, 0.4em);
  }
}
@-webkit-keyframes fuwafuwaK {
  0% {
    -webkit-transform: translate(0.1em, 0.4em);
    transform: translate(0.1em, 0.4em);
  }
  8% {
    -webkit-transform: translate(0.1em, 0.4em);
    transform: translate(0.1em, 0.4em);
  }
  22% {
    -webkit-transform: translate(-0.12em, -0.5em);
    transform: translate(-0.12em, -0.5em);
  }
  40% {
    -webkit-transform: translate(0.08em, 0.25em);
    transform: translate(0.08em, 0.25em);
  }
  48% {
    -webkit-transform: translate(0.08em, 0.25em);
    transform: translate(0.08em, 0.25em);
  }
  63% {
    -webkit-transform: translate(-0.15em, -0.4em);
    transform: translate(-0.15em, -0.4em);
  }
  78% {
    -webkit-transform: translate(0.12em, 0.15em);
    transform: translate(0.12em, 0.15em);
  }
  90% {
    -webkit-transform: translate(-0.05em, -0.35em);
    transform: translate(-0.05em, -0.35em);
  }
  100% {
    -webkit-transform: translate(0.1em, 0.4em);
    transform: translate(0.1em, 0.4em);
  }
}

/* 「はじめます！」吹き出し：約4秒周期で約1秒表示 */
.hajimeFuki {
  position: relative;
  z-index: 3;
  margin: 0 0 0.45em;
  padding: 0.35em 0.7em 0.4em;
  max-width: 100%;
  box-sizing: border-box;
  background: #fff8fb;
  color: #d45a7a;
  border: 2px solid #f0a0b8;
  border-radius: 1.2em;
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-size: clamp(0.7rem, 2.6vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;
  box-shadow: 0 0.2em 0.35em rgba(120, 60, 80, 0.18);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.7);
  transform-origin: center bottom;
  animation: fukiPop 4s infinite ease-in-out;
  -webkit-animation: fukiPop 4s infinite ease-in-out;
}

.hajimeFuki::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.42em;
  width: 0.7em;
  height: 0.7em;
  background: #fff8fb;
  border-right: 2px solid #f0a0b8;
  border-bottom: 2px solid #f0a0b8;
  transform: translateX(-50%) rotate(45deg);
}

/* 右は表示タイミングをずらして、別ボタンだとわかりやすく */
.hajimeFuki--delay {
  animation-delay: 2s;
  -webkit-animation-delay: 2s;
}

@keyframes fukiPop {
  0%, 8% {
    opacity: 0;
    transform: scale(0.7);
  }
  14% {
    opacity: 1;
    transform: scale(1.08);
  }
  18%, 38% {
    opacity: 1;
    transform: scale(1);
  }
  45%, 100% {
    opacity: 0;
    transform: scale(0.7);
  }
}
@-webkit-keyframes fukiPop {
  0%, 8% {
    opacity: 0;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
  }
  14% {
    opacity: 1;
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
  }
  18%, 38% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  45%, 100% {
    opacity: 0;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
  }
}


/* じわっと出て、じわっと消える */
@keyframes jiwatto {
  0% {
    opacity: 0; /* 最初は透明 */
  }
  25% {
    opacity: 1; /* 1秒（25%）かけてじわっと出る */
  }
  75% {
    opacity: 1; /* そのまま2秒間（75%まで）表示を維持 */
  }
  100% {
    opacity: 0; /* 最後の1秒（100%まで）でじわっと消える */
  }
}

#tyuui1 {
  position: fixed;
  font-size: 0.7em;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

#tukai, #hajime, #全ローカル消去 {
  /* absolute で固定せず、押しやすい位置に配置 */
  position: fixed; 
  font-size: 0.7em;
  right: max(5vw, env(safe-area-inset-right, 0px));
  z-index: 5;
}
#tukai { bottom: 25vh; }
#hajime { bottom: 15vh; }
#全ローカル消去 {
  bottom: max(5vh, env(safe-area-inset-bottom, 0px));
  font-size: 1em;
}



#さんすう, #猫声, #ロゴ目次, .さくら社目次, #さくら社目次２,#はじめます, #tukai, #hajime, #はじめます2:hover {
  cursor: pointer;
}
#コピーライト目次 {
  position: fixed;
  bottom: max(0px, env(safe-area-inset-bottom, 0px));
  left: max(10px, env(safe-area-inset-left, 0px));
  z-index: -1;
}
#ロゴ目次 {
  width: min(100px, 22vw);
  height: auto;
  z-index: -1;
}

/* ---------- タブレット：少しコンパクトに ---------- */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  #hajimeW {
    width: min(72vw, 34em);
    top: 52%;
  }
  #はじめます,
  #はじめます2 {
    max-height: min(52vh, 20em);
  }
  #サンプル版 {
    font-size: clamp(0.9rem, 2.4vmin, 1.25rem);
    padding: 0.16em 0.8em;
  }
}

/* ---------- スマホ横向き：左右並びのまま小さく ---------- */
@media screen and (max-width: 767px) and (orientation: landscape) {
  #行１ {
    height: 12vmin;
    padding: 0.15em 0.4em;
  }
  #hajimeW {
    flex-direction: row;
    width: min(62vw, 26em);
    max-width: 70vw;
    top: 54%;
    gap: 1em;
  }
  #はじめます,
  #はじめます2 {
    max-height: min(62vh, 14em);
  }
  /* 横向きは上下余白が狭いので vh 基準で抑える */
  #サンプル版 {
    font-size: clamp(0.7rem, 3.2vh, 1rem);
    padding: 0.1em 0.65em;
    letter-spacing: 0.04em;
    border-width: 1.5px;
  }
  .hajimeFuki {
    font-size: clamp(0.55rem, 2vw, 0.8rem);
    padding: 0.2em 0.45em;
    margin-bottom: 0.25em;
  }
  #tukai, #hajime, #全ローカル消去 {
    font-size: 0.65em;
    right: max(2vw, env(safe-area-inset-right, 0px));
  }
  #tukai { bottom: 28vh; }
  #hajime { bottom: 16vh; }
  #全ローカル消去 { bottom: max(4vh, env(safe-area-inset-bottom, 0px)); }
  #ロゴ目次 {
    width: 56px;
  }
}

/* ---------- スマホ縦向き：2つの絵を上下に ---------- */
@media screen and (max-width: 767px) and (orientation: portrait) {
  #行１ {
    height: 11vmin;
    padding: 0.15em 0.4em;
  }
  #hajimeW {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: min(58vw, 15em);
    max-width: 70vw;
    top: 48%;
    gap: 0.55em;
    max-height: 72vh;
  }
  .hajimeBtn {
    flex: 0 1 auto;
    width: 100%;
  }
  #はじめます,
  #はじめます2 {
    max-height: min(26vh, 11em);
  }
  #サンプル版 {
    font-size: clamp(0.85rem, 3.8vw, 1.2rem);
    padding: 0.15em 0.75em;
  }
  .hajimeFuki {
    font-size: clamp(0.6rem, 3.2vw, 0.85rem);
    padding: 0.22em 0.5em;
    margin-bottom: 0.28em;
  }
  /* 右下リンクが絵と重なりにくい位置へ */
  #tukai, #hajime, #全ローカル消去 {
    font-size: 0.65em;
    right: max(3vw, env(safe-area-inset-right, 0px));
  }
  #tukai { bottom: 20vh; }
  #hajime { bottom: 13vh; }
  #全ローカル消去 {
    bottom: max(5vh, env(safe-area-inset-bottom, 0px));
    font-size: 0.95em;
  }
  #ロゴ目次 {
    width: 64px;
  }
  #コピーライト目次 {
    opacity: 0.85;
  }
}