/* ==========================================================
	PAGE：France About Shumei
	Shumei PhilosophyビデオのUI（サムネイル版・ボタン版）
   ========================================================== */

/* =========================
VIDEO TRIGGER
========================= */

.pro-video-trigger{
position:relative;
cursor:pointer;
max-width:900px;
margin:0 auto; /* SWELL中央配置 */
}

/* =========================
THUMBNAIL
========================= */

.pro-video-thumb{
width:100%;
aspect-ratio:16/9;
overflow:hidden;
border-radius:10px;
}

/* 画像サムネイル対応 */

.pro-video-thumb img{
width:100%;
height:100%;
object-fit:cover;
display:block;
border-radius:10px;
}

/* =========================
PLAY ICON
========================= */

.pro-play{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:90px;
height:90px;
background:rgba(0,0,0,.6);
border-radius:50%;
transition:.3s;
}

.pro-video-trigger:hover .pro-play{
transform:translate(-50%,-50%) scale(1.1);
}

.pro-play:after{
content:"";
position:absolute;
left:36px;
top:27px;
border-left:30px solid white;
border-top:18px solid transparent;
border-bottom:18px solid transparent;
}

/* =========================
MODAL
========================= */

.pro-video-modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.85);
backdrop-filter:blur(10px);
display:flex;
align-items:center;
justify-content:center;
opacity:0;
visibility:hidden;
transition:.35s;
z-index:9999;
}

.pro-video-modal.active{
opacity:1;
visibility:visible;
}

/* =========================
SCROLL LOCK
========================= */

html.pro-lock,
body.pro-lock{
overflow:hidden !important;
height:100%;
}

/* =========================
VIDEO CONTENT
========================= */
.pro-video-content{
  position:relative;

  /* 横幅制限 */
  width:min(90vw, 1450px);

  /* 高さ優先 */
  max-height:85vh;

  display:flex;
  align-items:center;
  justify-content:center;
}

.pro-video-modal.active .pro-video-content{
transform:scale(1);
}

/* =========================
RESPONSIVE IFRAME
========================= */

.pro-video-content iframe{
  height:85vh; /* 高さ基準にする */
  width:auto;  /* 横は自動計算 */
  aspect-ratio:16/9;  /* 比率維持 */
  max-width:100%;  /* 上限 */
  min-height:250px;  /* 最小サイズ */
  border:none;
}

/* =========================
CLOSE BUTTON
========================= */

.pro-video-close{
position:absolute;
/* デフォルト（PC）*/
top:-48px;
right:0;
	
/* サイズ */
width:45px;
height:45px;

/* 見た目（Vimeo風） */
background:transparent;
border-radius:10px;
border:2px solid rgba(255,255,255,0.6);

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

cursor:pointer;
z-index:10000;

/* アニメーション */
transition:all .2s ease;
}


/* max-height 500px */


/* =========================
スマホ横（低い高さ専用制御）
========================= */
@media (max-height:450px) and (max-width:885px){
  .pro-video-close{
    /* ▼ iframe内右上に固定 */
    top: 8px;
    right: 8px;
    /* ▼ 念のためリセット */
    transform: none;
  }
}

/* ▼ 高さ規格外の小さい画面 */
@media (max-height: 500px){
  .pro-video-close{
    top: 8px;      /* 内側に戻す */
    right: 8px;
  }
}


/* ▼ スマホ縦 */
@media (max-width:590px){
  .pro-video-close{
	  top: 40%;
    right:10px;
    width:45px;
    height:45px;
	transform: translateY(-200%) translateY(-40px);
  }
}


/* × のデザイン */
.pro-video-close::before,
.pro-video-close::after{
content:"";
position:absolute;
width:18px;
height:2px;
background:white;
}

.pro-video-close::before{
transform:rotate(45deg);
}

.pro-video-close::after{
transform:rotate(-45deg);
}

/* ホバー */
.pro-video-close:hover{
background:rgba(255,255,255,0.6);
transform:scale(1.05);
}

/* =========================
LOADER
========================= */

.pro-loader{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:60px;
height:60px;
border:4px solid rgba(255,255,255,.3);
border-top:4px solid white;
border-radius:50%;
animation:spin 1s linear infinite;
}

@keyframes spin{
to{transform:translate(-50%,-50%) rotate(360deg);}
}

/* =========================
MOBILE
========================= */

/* max-width 768設定 */



/* Shumei Philosophyビデオボタン中央寄せ */
/* =========================
VIDEO BUTTON（専用スコープ）
========================= */

.pro-video-trigger .wp-block-button__link{

  /* 高さ調整 */
  line-height:1.1;

  /* 横幅をテキストに合わせる */
  display:inline-block;
  width:auto;

  /* paddingでサイズ調整 */
  padding:0.6em 1.2em;

  /* 角丸削除 */
  border-radius:0 !important;

  /* 念のため余計な指定を解除 */
  min-width:unset;
}



.video-center{
display:flex;
justify-content:center;
border-radius:0;
line-height: 1.1;
}



/*動画ボタンクリックした時先頭へ移動させない */
.pro-video-trigger *{
outline:none;
}

/* France About Shumei VideoUI end */