@charset "UTF-8";
/*!
variables
------------------------------
*/
:root {
  --color-white: #fff;
  --color-black: #000;
  --color-black2: #181b39;
  --color-black3: #5d5e6d;
  --color-black4: #111;
  --color-blue: #8cdfdf;
  --color-blue2: #ddf3f3;
  --color-skin: #fdf7f2;
  --color-brown: #e0dfda;
  --color-red: #ff1300;
  --color-red2: #f00;
  --font-family-base: "Noto Sans JP", sans-serif;
  --font-family-hiragino: "Hiragino Kaku Gothic Pro", sans-serif;
  --font-family-en: "SF Pro", sans-serif;
}

@font-face {
  font-family: "SF Pro";
  src: url(../font/SFPRODISPLAYBOLD.OTF) format("opentype");
  font-weight: 700;
  font-style: normal;
}
html {
  font-size: 100%;
}
@media (max-width: 375px) {
  html {
    font-size: 4.2666666667vw;
  }
}
@media screen and (min-width: 768px) {
  html {
    font-size: 1.2121212121vw;
  }
}
@media (min-width: 1320px) {
  html {
    font-size: 100%;
  }
}

/* pcの電話番号発信対応 */
@media screen and (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}

/* ホバー */
a {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s;
}

img {
  width: 100%;
}

@media (any-hover: hover) {
  a:hover {
    opacity: 0.8;
  }
}
body {
  margin: 0 auto;
  font-family: var(--font-family-base);
  word-break: break-all;
  color: #c898bd;
  letter-spacing: 0;
  background-color: #000;
}

* {
  box-sizing: border-box;
}

h1 {
  margin-bottom: 0.6em;
}

.row {
  display: flex;
  justify-content: center;
  gap: 1em;
  flex-wrap: wrap;
  margin-bottom: 1em;
}

button {
  font-size: 1.1em;
  padding: 0.6em 1em;
  border-radius: 0.6em;
  background: transparent;
  border: none;
}
button.active img {
  filter: brightness(0) invert(1);
}

/* プレイヤー：動画とカバーを重ねる */
#player {
  position: relative;
  width: 100%;
  margin: 0 auto;
  margin: 1.875rem 0;
  aspect-ratio: 16/9;
}

#target {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: #000;
  pointer-events: none;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
}

/* 初期は絶対にカバーを表示・フェード無効（チラつき防止） */
#cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 12px;
  opacity: 1;
  pointer-events: none;
}

#cover.fade {
  transition: opacity 0.2s ease;
}

#status {
  margin-top: 0.6em;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

#dbg {
  font-size: 0.9em;
  opacity: 0.8;
  margin-top: 0.4em;
  display: none;
}

/* 祝福フォールバック */
#blessOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

#blessOverlay .box {
  background: #222;
  padding: 1.2em 1.4em;
  border-radius: 12px;
  width: min(92vw, 520px);
}

#blessOverlay h2 {
  margin: 0 0 0.4em;
  font-size: 1.1rem;
}

#blessOverlay p {
  margin: 0.2em 0 0.8em 0;
  opacity: 0.85;
  font-size: 0.95rem;
}

/* 判定用インカメは画面に出さない */
#preview {
  display: none;
}

.main {
  background-image: url(../images/bg.jpg);
  background-size: cover;
  background-attachment: fixed;
  margin: 0 auto;
  padding: 5%;
  padding-top: 50px;
}

.wrap {
  width: 100%;
  max-width: 50rem;
  margin: 0 auto;
  position: relative;
}

.logo {
  text-align: center;
  width: 100%;
  max-width: 37.5rem;
  margin: 0 auto;
  margin-bottom: 6.25rem;
}
@media screen and (max-width: 767px) {
  .logo {
    max-width: 70%;
    margin-bottom: 3.125rem;
  }
}

.catch01 {
  text-align: center;
  margin: 1.875rem 0;
}

.catch02 {
  text-align: center;
  width: 100%;
  max-width: 18.75rem;
  margin: 6.25rem 0;
  margin: 0 auto;
  margin-bottom: 1.875rem;
}

.lyric_box {
  display: flex;
  margin-top: 40px;
  justify-content: space-between;
  font-size: 13px;
  line-height: 200%;
}

.lyric_text {
  width: 70%;
  margin: 0 auto;
  padding-bottom: 3.125rem;
}

.nortice_box {
  width: 100%;
  padding-top: 3.125rem;
  padding-bottom: 9.375rem;
  border-top: solid 2px #c898bd;
}

.nortice_catch {
  font-weight: bold;
  margin-bottom: 3.125rem;
}

.foot-logo {
  position: absolute;
  width: 38%;
  bottom: 0;
  right: 0;
}

/* PC用：デフォルトは非表示 */
#pc-block {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  /* 背景色 */
  z-index: 9999;
  color: #fff;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* PCと判定された場合、bodyに .is-pc クラスがつきます */
body.is-pc #pc-block {
  display: flex;
  /* メッセージを表示 */
}

body.is-pc .main {
  display: none;
  /* コンテンツを隠す */
}

#pc-block .logo {
  width: 150px;
  max-width: 150px;
}

#pc-block .logo img {
  width: 100%;
  height: auto;
}

#inapp-block {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 9999;
  color: #fff;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* アプリ内ブラウザと判定された場合、bodyに .is-inapp クラスがつきます */
body.is-inapp #inapp-block {
  display: flex;
}

body.is-inapp .main {
  display: none;
}

#inapp-block .logo {
  width: 150px;
  max-width: 150px;
}

#inapp-block .logo img {
  width: 100%;
  height: auto;
}

/* =========================
   擬似フルスクリーン
   ========================= */
/* フルスクリーン時はスクロールを止める */
body.player-fullscreen {
  overflow: hidden;
}

/* プレイヤーを画面いっぱいに固定表示 */
body.player-fullscreen #player {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  z-index: 9990;
  background: #000;
}

/* 動画とカバーを画面いっぱいにフィット */
body.player-fullscreen #target,
body.player-fullscreen #cover {
  width: 100%;
  height: 100%;
  border-radius: 0;
  -o-object-fit: contain;
     object-fit: contain;
}

/* 背景なども単純に黒くしておいて良い */
body.player-fullscreen .main {
  padding: 0;
  background: #000;
}

/* フルスクリーン時に下のテキストを隠したければ：任意 */
body.player-fullscreen .lyric_box,
body.player-fullscreen .nortice_box,
body.player-fullscreen .foot-logo,
body.player-fullscreen .catch01,
body.player-fullscreen .catch02 {
  display: none;
}
/*# sourceMappingURL=style.css.map */