@charset "utf-8";

/* ------------------------------------------------------------ #mover ------------------------------------------------------------ */
#mover{padding: 145px 0 0;}
#mover .mover_box{position: relative; }
#mover .mover_box .youtube_box{width: calc(100% - 274px); height: auto; position: relative; padding: 43.34% 0 0;}
#mover .mover_box .youtube_box iframe{position: absolute; top: 0px; width: 100%; height: 100%;}
/* メイン動画：サムネ＋再生アイコン（クリックで詳細へ） */
#mover .mover_box .youtube_box .movie_main{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; overflow: hidden; background: #000;}
#mover .mover_box .youtube_box .movie_main img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease;}
#mover .mover_box .youtube_box .movie_main:hover img{transform: scale(1.04);}
#mover .mover_box .youtube_box .movie_main .play_ico{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 50%; background: rgba(0,0,0,.55); transition: background .2s ease;}
#mover .mover_box .youtube_box .movie_main:hover .play_ico{background: rgba(200,30,30,.85);}
#mover .mover_box .youtube_box .movie_main .play_ico:before{content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent #fff;}
#mover .mover_box .text_box{position: absolute; top: 50%; transform: translateY(-50%); right: 0px; width: 508px; background: #fff; box-shadow: 0 0 20px 10px rgba(0,0,0,0.1); padding: 43px 57px 35px 52px;text-align: right;}
#mover .mover_box .text_box span.data{font-size: 15px; color: #9A9A9A; display: block; text-align: left;}
#mover .mover_box .text_box p.text{padding: 44px 0 0; font-size: 24px; line-height: 158.3%; text-align: left;}
#mover .mover_box .text_box span.mini{padding: 0 0 0 68px; text-align: right; display: inline-block; margin: 62px 0 0; position: relative;line-height: 133.3%;}
#mover .mover_box .text_box span.mini:before{content: ""; display: block; width: 53px; height: 1px; background: #707070; position: absolute; left: 0px; top: 50%; transform: translateY(-50%);}

#mover .list_box{border-top: 1px solid #EDEDED; margin: 68px 0 0;}
#mover .list_box li{border-bottom: 1px solid #EDEDED; }
#mover .list_box li a{padding: 39px 0 48px; display: flex; justify-content: space-between;}
#mover .list_box li a .img_box{width: 378px; height: auto;}
#mover .list_box li a .img_box img{width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block;}
#mover .list_box li a .text_box{width: 715px; height: auto; position: relative;}
#mover .list_box li a .text_box p{font-size: 24px; line-height: 158.3%;}
#mover .list_box li a .text_box .data{display: inline-block; position: absolute; bottom: 0px; left: 0px; font-size: 15px; color: #9A9A9A;}
#mover .list_box li a .text_box .mini{position: absolute; right: 0px; bottom: 14px; padding: 0 0 0 68px; line-height: 133.3%;}
#mover .list_box li a .text_box .mini:before{content: ""; display: block; width: 53px; height: 1px; background: #707070; position: absolute; left: 0px; top: 50%; transform: translateY(-50%);}
#mover #page{padding: 48px 0 0;}

/* コンテンツ未登録時：空状態の枠調整 */
#mover .list_box:has(.list_box__empty){border-top: none; margin: 40px 0 0;}
#mover .list_box li.list_box__empty{border-bottom: none; background: #efefef;}

/* ------------------------------------------------------------ #mover_detail ------------------------------------------------------------ */
#mover_detail{padding: 62px 0 0;}
.detail_box .text_box:not(:first-child) {padding: 86px 0 0;}
/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */

@media only screen and (max-width: 768px) {

/* mover */
	#mover { padding: 30px 0 0; }
	#mover .mover_box { position: relative; }
	#mover .mover_box .youtube_box { width: 100%; padding: 56.25% 0 0; }
	#mover .mover_box .youtube_box iframe { left: 0; }
	#mover .mover_box .text_box { position: relative; top: auto; right: auto; transform: none; width: 100%; margin: 25px 0 0; padding: 30px 20px 28px; text-align: right; box-shadow: none; background: none; }
	#mover .mover_box .text_box span.data { font-size: 12px; }
	#mover .mover_box .text_box p.text { padding: 25px 0 0; font-size: 18px; line-height: 160%; }
	#mover .mover_box .text_box span.mini { margin: 30px 0 0 auto; padding: 0 0 0 40px; font-size: 13px; width: 110px; display: block; }
	#mover .mover_box .text_box span.mini:before { width: 32px; }
	#mover .list_box { margin: 30px 0 0; }
	#mover .list_box li a { display: block; padding: 5% 0; }
	#mover .list_box li a .img_box { width: 100%; }
	#mover .list_box li a .text_box { width: 100%; padding: 18px 0 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
	#mover .list_box li a .text_box p { font-size: 18px; line-height: 160%; padding: 0 0 30px; }
	#mover .list_box li a .text_box .data { position: static; display: block; padding: 0; font-size: 12px; }
	#mover .list_box li a .text_box .mini { position: relative; right: auto; bottom: auto; display: inline-block; margin: 0; padding: 0 0 0 48px; font-size: 13px; line-height: 150%; }
	#mover .list_box li a .text_box .mini:before { width: 38px; }
	#mover #page { padding: 35px 0 0; }

/* mover_detail */
	#mover_detail { padding: 50px 0 0; }
  .detail_box .text_box:not(:first-child) {padding: 55px 0 0;}
}