@charset "UTF-8";
/*
本WEBサイトで使用しているHTML・CSS・JavaScriptは合同会社ベストブリッジが記述し、その著作権は医療法人済衆館に帰属します。
他者の著作権を侵害しないよう細心の注意を払って掲載した画像や文章についても、その著作権は医療法人済衆館に帰属します。
下記の記載内容はタイムスタンプを付与した電子書類として保管を行っております。
また、公開に至るまでの制作過程全データの保管を行っています。
*/

/*============================================================
#saiyou_recruit_pro_kangoshi_douga
============================================================*/
#saiyou_recruit_pro_kangoshi_douga{
z-index:20;
/*--*/
position:relative;
/*--*/
display:block;
width:100%;
height:auto;
margin:0;
border:0;
padding:0;
}

/*==h2==*/
#saiyou_recruit_pro_kangoshi_douga>h2{
position:relative;
/*--*/
display:block;
width:100%;
height:auto;
margin:0;
border:0;
padding:0;
}

#saiyou_recruit_pro_kangoshi_douga>h2>img{
position:relative;
/*--*/
display:block;
width:100%;
height:auto;
margin-bottom:30px;
border:solid 7px #EFEFEF;
padding:0;
}

/*============================================================
1.ピンクの枠（土台）
============================================================*/
#saiyou_recruit_pro_kangoshi_douga div.douga{
position:relative;
display:block;
width:100%;
height:auto;
margin-bottom:30px;
border-radius:30px 7px;
padding:30px 10px;
background-color:#F5C7D2;
}

@media screen and (max-width: 340px) {
#saiyou_recruit_pro_kangoshi_douga div.douga{
padding:30px 4px;
}	
}

/*============================================================
2.動画の箱
============================================================*/
#saiyou_recruit_pro_kangoshi_douga div.douga-inner{
position:relative;
width:100%;
max-width:800px;
aspect-ratio: 16 / 9; /* 最初から16:9のスペースを確保 */
margin:0 auto;
border-radius:10px;
overflow:hidden;
}

/*============================================================
3.サムネイル画像（ポスター）
============================================================*/
#saiyou_recruit_pro_kangoshi_douga div.poster-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
z-index:10;
cursor:pointer !important; /* ★最優先で指マーク（人差し指）にする */
transition:opacity 2.0s ease;
}

/* JavaScriptで「fade-out」が付いた時、透明になってクリックもすり抜ける */
#saiyou_recruit_pro_kangoshi_douga div.poster-overlay.fade-out{
opacity:0;
pointer-events:none;
}

/*============================================================
4.動画本体
============================================================*/
#saiyou_recruit_pro_kangoshi_douga video{
position:relative;
display:block;
width:100%;
height:100%;
object-fit:contain; /* ★変更：絶対に切れない安全な「contain」に！ */
background:#000;    /* ★追加：隙間ができた時に自然な黒背景にする */
box-sizing:border-box;
border-radius:5px;
z-index:1;
cursor:pointer !important;
}

/*============================================================
★追加：動画ストップ用の透明カバー（画面タップで一時停止させる用）
============================================================*/
#saiyou_recruit_pro_kangoshi_douga .video-tap-zone {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 75%; /* 下の25%は標準コントロールバーのために空けておく */
  z-index: 5; /* 動画(1)より上、サムネ(10)より下に配置 */
  cursor: pointer;
}