@charset "UTF-8";
/* =========================================
   style.css（整理版 / 機能温存）
   - 重複/競合/無効指定の是正
   - セクション化 & コメント整備
   ========================================= */
/* ========== 0) Charset / Design Tokens ========== */
/*長押しでテキストのコピー等禁止*/
html, body {
  user-select: none;
  -webkit-user-select: none;
  /* iOS Safari */
  -moz-user-select: none;
  /* Firefox 旧 */
  -ms-user-select: none;
  /* IE/旧Edge */
  -webkit-touch-callout: none;
  /* iOSの長押しメニューを無効化 */
  -webkit-text-size-adjust: none;
}

img, a {
  -webkit-touch-callout: none;
  pointer-events: none;
  /* 必要に応じてクリックも無効化 */
}

/*長押しでテキストのコピー等禁止*/
:root {
  --slice-count: 10;
  --anim-duration: 600ms;
  --anim-stagger: 100ms;
  --fade-ms: 350ms;
  --swipe-threshold: 80;
  /* px */
  --brand: #00d1d2;
  --bg: rgb(57, 62, 68);
  --fg: #fff;
  --panel: rgba(255, 255, 255, 0.06);
  --ink: #333;
  /* 濃色テキスト（#333 のトークン化） */
}

/* ========== 1) Reset / Base ========== */
html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  background-color: #333333;
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  overflow: hidden;
  font-size: 16px;
  /* 画面はJS制御のため固定 */
  touch-action: pan-x;
  /* 横スワイプのみ許可 */
}

p {
  margin: 0;
  padding: 0;
}

/* ========== 2) App Layout ========== */
.contents-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
}

/* 画面セクション（フェード切替） */
section {
  position: relative;
  /*background-color: var(--bg);*/
  /* デモ背景（必要に応じて変更） */
}
section.screen {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fade-ms) ease;
  touch-action: pan-x;
  /* JS要件と整合 */
}
section.screen.active {
  opacity: 1;
  pointer-events: auto;
}
section.screen.no-fade {
  transition: none !important;
}
section.screen > .inner {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  text-align: center;
}
section.screen img, section.screen video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  border-radius: 0;
}

section.screen video {
  object-fit: contain;
}
section:nth-child(3) {
  background-color: rgb(57, 62, 68);
}
section .img-dti {
  position: absolute;
  bottom: 0;
  background-color: var(--bg);
  width: 100%;
  border-top: solid 2px #fefefe;
}
section .img-dti img {
  width: 100%;
  object-fit: contain;
  height: 100%;
}

/* ========== 4) Grid Utilities ========== */
.row {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  width: 100%;
}

.cell {
  flex: 1;
  min-width: 0;
  padding: 16px;
  background: var(--panel);
  border-radius: 8px;
}

/* ========== 5) Buttons / Hints ========== */

.button-box{
  height: 100%;
}
button {
  position: absolute;
  margin: auto 0;
  height: 100%;
  max-height: 180px;
  z-index: 999;
  background-color: var(--brand);
  border: 0;
  color: #fefefe;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 4px;
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  width: 100%;
  max-width: 40px;
  cursor: pointer;
  opacity: 0.9;
  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  /* これが無いと、横向き字形のままになることがある */
  text-orientation: upright;
  /* inline のままだと iOS12 で崩れやすい */
  display: block;
}
button.btn-next-prev {
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px 0 0 10px;
}
button.btn-back-prev {
  top: 0;
  left: 0;
  bottom: 0;
  border-radius: 0 10px 10px 0;
}
button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.button-animation {
  display: block;
  animation: button-animation 3s ease-out infinite;
  opacity: 1;
}
@keyframes button-animation {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}

button.top{
  border-radius: 50%;
  bottom: 0;

  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  background-color: var(--brand);
  box-shadow: 0 0 20px var(--brand);
  cursor: pointer;
  max-width: unset;
  top: auto;
  bottom: 10%;
  right: 2%;
  -webkit-writing-mode: horizontal-tb;
  writing-mode: horizontal-tb;

  letter-spacing: normal;
  width: 120px;
  height: 120px;
}

/* ボタンの波紋 */
.top::before, .top::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 85%;
  height: 85%;
  border: 1px solid var(--brand);
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
  animation: pulsate 4s linear infinite;
}

.top::after {
  animation-delay: 2s;
}

/* ボタンの波紋が広がっていくアニメーション */
@keyframes pulsate {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.hint {
  margin-top: 8px;
  font-size: 13px;
  opacity: 0.8;
}

/* ========== 6) Stage（画像→動画→テキスト→追加） ========== */
.stage {
  position: relative;
  height: 100%;
}
.stage > * {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fade-ms) ease;
}
.stage > *.show {
  position: relative;
  z-index: 1;
  opacity: 1;
  pointer-events: auto;
}

/* テキストレイヤ（高さ調整） */
/* ========== 7) Slice Transition（縦帯で現在画面を落とす） ========== */
.slice-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

.slice {
  position: absolute;
  inset: 0;
  transform: translateY(0);
  will-change: transform;
}
.slice.play {
  animation: drop var(--anim-duration) ease-in-out forwards;
}

@keyframes drop {
  to {
    transform: translateY(100%);
  }
}
.slice--dom {
  overflow: hidden;
}
.slice--dom > .slice-dom-inner {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  will-change: transform;
}

/* ========== 8) Intro Stack（画像リビール&フェード） ========== */
.img-wrap {
  position: absolute;
  inset: 0;
}
.img-wrap img {
  display: block;
  max-width: 100%;
  pointer-events: none;
  will-change: clip-path, opacity;
  object-fit: contain !important;
  height: 100% !important;
}

/* 左→右マスク（初期は全隠し＆透明） */
.reveal-lr img {
  clip-path: inset(0 100% 0 0);
  opacity: 0;
}
.reveal-lr.soft.start img {
  animation: reveal-lr var(--dur, 2.5s) ease-out forwards, fadeInSoft var(--dur, 2.5s) ease-out forwards;
}
.reveal-lr.soft.slow.start img {
  animation-duration: var(--dur, 4s), var(--dur, 4s);
}
.reveal-lr.start img {
  animation: reveal-lr var(--dur, 2.5s) ease-out forwards;
}

/* ふんわり同時適用（soft） */
/* slow（名前.png） */
/* softなし */
/* フェードイン要素（iqos/logo02） */
.fade-in img {
  opacity: 0;
}
.fade-in.start img {
  animation: fadeIn var(--dur, 1.2s) ease-out forwards;
}

/* 親まとめフェードアウト */
.stack {
  position: absolute;
  inset: 0;
  height: 90vh;
}

.stack.fade-out {
  animation: fadeOutAll var(--fade-all, 1000ms) ease-in forwards;
}

/* Keyframes */
@keyframes reveal-lr {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes fadeInSoft {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOutAll {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/* ========== 9) Text Effects（typewriter / text-fade） ========== */
.text-fade {
  opacity: 0;
  transform: translateY(10px);
  animation: textFadeIn 3s ease-out forwards;
}

@keyframes textFadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* typewriter */
.typewrite {
  opacity: 0;
  white-space: pre-wrap;
  color: #fff;
  will-change: contents;
}
.typewrite.typing {
  opacity: 1;
}
.typewrite .caret {
  display: inline-block;
  width: 0.6ch;
  border-right: 0.12em solid currentColor;
  transform: translateY(0.06em) translateZ(0);
  animation: caretBlink 1s steps(1, end) infinite;
}

@keyframes caretBlink {
  50% {
    border-color: transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .typewrite .caret {
    animation: none;
    border-color: currentColor;
  }
}
/* ========== 10) Article Blocks（左右配置の共通化） ========== */
.article, .article-r {
  padding: 25px;
}

.article img, .article-r img {
  max-width: 50%;
  height: auto;
  vertical-align: bottom;
}

.article h2, .article-r h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
}

.article p, .article-r p {
  margin: 20px 0 0 0;
  text-align: justify;
}

.article::after, .article-r::after {
  content: "";
  display: block;
  clear: both;
}

/* 左右差分 */
.article img {
  float: left;
  margin: 0 20px 10px 0;
}

.article-r img {
  float: right;
  margin: 0 0 10px 20px;
}

/* ========== 11) Stage Switch（Legacy remains） ========== */
/* 旧 display 切替（JSは .show 切替を使用） */
#stage > .slide {
  display: none;
}
#stage > .slide.active {
  display: block;
}
#stage .next-btn {
  margin: 24px auto 0;
  display: inline-block;
  padding: 10px 18px;
  font-size: 14px;
  border: 1px solid #333;
  border-radius: 9999px;
  background: #fff;
  cursor: pointer;
}
#stage .next-btn:focus {
  outline: 2px solid #999;
}
#stage > .stage-img, #stage > .stage-video, #stage > .stage-text, #stage > .stage-extra {
  display: none;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
}
#stage > .show {
  display: block;
}
#stage video {
  width: 100%;
  object-fit: contain;
}

/* “次へ/表紙に戻る”ボタン */
/* ========== 12) #scr3 Stage Animation（重ね&フェード） ========== */
/* #scr3 限定アニメ（他の stage に干渉しない） */
#scr3 .stage {
  position: relative;
  overflow: hidden;
}
#scr3 .stage > .show {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* ========== 13) Responsive tweaks ========== */
@media (max-width: 1024px) {
  /* 変更があるものだけを上書き（重複を削除） */
  button {
    font-size: 14px;
  }
  .stage .interview-text {
    position: relative;
  }
  .stage .interview-text .box-top, .stage .interview-text .bos-bottom {
    width: 80%;
  }
  .stage .interview-text .box-top p, .stage .interview-text .bos-bottom p {
    font-size: 12px;
  }
}
/* ========== 14) Carousel ========== */
.carousel-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
  /* フォールバック→新ブラウザの順に上書き（dvhを有効化） */
  height: 100vh;
  /* fallback */
  height: 100dvh;
  /* 正確に全高 */
}

/* 重ねて表示、opacityでクロスフェード */
.carousel-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
  will-change: opacity;
  background: var(--bg);
}
.carousel-item.active {
  opacity: 1;
  z-index: 2;
}
.carousel-item p {
  display: flex;
  align-items: center;
  width: 50%;
  height: 100%;
  margin: 0 auto;
  font-size: 2.5em;
  text-align: left;
  font-weight: 900;
  line-height: 1.6;
  text-align: justify;
}
.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 2s ease;
  /* ズーム速度 */
  will-change: transform;
}

/* 低速回線や環境配慮 */
@media (prefers-reduced-motion: reduce) {
  .carousel-item {
    transition: none;
  }
  .carousel-item img {
    transition: none;
  }
}
/* ===== オーバーレイ（左→右にスライド） ===== */
.overlay {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateX(-100%);
  /* 左の外側に隠す */
  transition: transform 1.5s ease;
  /* 左→右に動く */
}

.carousel-item.active .overlay img {
  transform: translateX(0);
}

.interview-text {
  height: 100%;
}
.interview-text .text-box {
  /*height: 90%;*/
  height: 100svh;
  height: 100dvh;
  height: 100vh;
  width: 100%;
  position: relative;
  /* 画像を常に天地左右の中央に配置 */
  background-position: center center;
  /* 画像をタイル状に繰り返し表示しない */
  background-repeat: no-repeat;
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-attachment: fixed;
  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
  background-size: cover;
}
.interview-text .text-box .comment {
  box-sizing: border-box;
  width: 45%;
  background: rgba(58,58,58,0.7);
  /*background: #000;*/
  color: #fefefe;
  padding: 1.5em;
  border-radius: 10px;
  text-align: justify;
  line-height: 1.4;
  position: absolute;

}

.interview-text .text-box .comment p .emphasis{
  font-size: 18px;
  font-weight: 900
}

.interview-text .text-box .comment.box-01{
  top: 5%;
  left: 5%;
}
.interview-text .text-box .comment.box-02{
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);

}
.interview-text .text-box .comment.box-03{
  top: 5%;
  left: 5%;
}

.interview-text .text-box .comment.box-04{
  /*bottom: 8%;*/
  /*right: 5%;*/

  top: 50%;
  right: 5%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

@media screen and (max-width:768px){}
@media screen and (max-width:480px){
  .interview-text .text-box .comment {
    width: 80%;
    padding: 1em;
    font-size: 14px;
  }

  .interview-text .text-box .comment p .emphasis{
    font-size: 16px;
  }

  .interview-text .text-box .comment.box-01, .interview-text .text-box .comment.box-03{

    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  }
  .interview-text .text-box .comment.box-02, .interview-text .text-box .comment.box-04{
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);

  }

}
@media screen and (max-width:320px){

  .interview-text .text-box .comment {
    width: 80%;
    padding: 1em;
    font-size: 14px;
  }

  .interview-text .text-box .comment p .emphasis{
    font-size: 16px;
  }

    .interview-text .text-box .comment.box-01{
      text-align: justify;

      left: 50%;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
  }
  .interview-text .text-box .comment.box-02{

    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);

  }

}



.interview-text .text-box .comment h2 {
  margin: 0;
  margin-bottom: 0.5em;
}
.interview-text .profile {
  box-sizing: border-box;


  width: 45%;
  position: absolute;
  bottom: 5%;
  left: 5%;
  /*text-align: left;*/
  background-color: rgb(57,62,68);
  color: #fefefe;
  padding:1.5em;
  color: #fefefe;
  border-radius: 10px;

}

.interview-text .profile p{
text-align: justify;

}

.interview-text .profile .m-bottom-10 {
  margin-bottom: 10px;
}

/* 可能ならCSS側へ移動 */
.hero-90vh {
  height: 90vh;
} /* 既存 */
@supports (height: 90dvh) {
  .hero-90vh {
    height: 90dvh;
  } /* iOS16+等で安定 */
}
/* さらに安全にするなら小さいビュー用 */
@supports (height: 90svh) {
  .hero-90vh {
    height: 90svh;
  }
}
img {
  max-width: 100%;
  height: auto;
}

/*# sourceMappingURL=style.css.map */


.comment {
  opacity: 0;
  transition: opacity 3s ease;
}

.comment.show {
  opacity: 1;
}




.video-wrap {
  position: relative;
}

#videotop {
  width: 100%;
  display: block;
}

.video-cover {
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: auto; /* ここが重要：動画のタップ全吸収 */
}


/* 初期状態：透明 + クリック不可 + transition 無効（即消える） */
#delayed-btn {
  opacity: 0;
  z-index: 10;
  pointer-events: none;
  transition: none;
}

/* 表示状態：フェードインだけ有効（ここで初めて transition が有効になる） */
#delayed-btn.show {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 3s ease; /* フェードイン時だけ有効 */
}