@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

#header > div{
	display:none;
}

/* テキスト表示 */
.play-text {
    width: 600px;
    color: #fff;
    font-size: 16px;
    margin-bottom: 16px;
    text-align: center;
    font-weight: bold;
}

/* 再生中スクロール制御の削除 */
html.no-scroll, body.no-scroll {
  overflow: visible; /* スクロール制限解除 */
  height: auto; /* 高さ制限解除 */
}

.play-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  background-color: #000;
  opacity: 0.8;
  z-index: 9998;
}

/* 再生ボタンのスタイル - 動画の上に中央配置 */
.play-button {
  width: 220px;
  height: 220px;
  position: absolute; /* 動画の上に配置 */
  top: 45vh; /* 中央に配置 */
  left: 50%; /* 中央に配置 */
  transform: translate(-50%, -50%); /* 完全に中央揃え */
  z-index: 10000; /* 動画の上に表示 */
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.play-icon img {
  width: 100px; /* お好みでサイズ調整可能 */
  height: auto;
  margin-top: 75px;
}

/* SWELLのメインビジュアル動画に全画面スタイル適用 */
.p-mainVisual__video {
  display: block; /* 動画は通常通り表示 */
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* 画面全体に合わせる */
  top: 0;
  left: 0;
  z-index: 1; /* 動画の下にボタンが表示される */
}

/* 終了後の画像 */
.p-mainVisual__endImage {
  display: none;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: fixed;
  top: 0;
  left: 0;
}

/* タブレットおよびモバイル向けレスポンシブ */
@media (max-width: 768px) {
  /* メインビジュアルの動画のスタイル */
  .p-mainVisual__video {
    width: 100%;
    height: auto;
  }

  /* 再生ボタンをスマホで中央に配置 */
  .play-icon img {
    margin-top: 60px;
  }

  /* テキストのフォントサイズをさらに小さく */
  .play-text {
    font-size: 12px;
    width: 400px;
  }
}