@charset "utf-8";

#fv{background: url(../images/contents/fv_bg.jpg) no-repeat center center; background-size: cover;}
.title_box h2{font-size: 36px; line-height: 119.5%; font-family: "Zen Old Mincho", serif; font-weight: 600; font-style: normal; }
.title_box p{font-size: 16px; line-height: 200%; font-family: "Noto Sans JP"; font-weight: 300; padding: 33px 0 0;}
	
/* --------------------------------------------------------------------------- mover */
#mover{padding: 199px 0 0;}
#mover .mover_inner{max-width: 1488px; margin: 0 auto;}
#mover .mover_inner .flex{display: flex; align-items: center; padding: 0 0 0 39px; gap: 0 109px;}
#mover .mover_inner .flex .title_box{width: 339px; text-align: left;}
#mover .mover_inner .flex .title_box .link_box{width: 276px; padding: 43px 0 0;}
#mover .mover_inner .flex .youtube_box{position: relative; padding: 38.98% 0 0; width: calc(100% - 448px);}
#mover .mover_inner .flex .youtube_box iframe{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
/* メイン動画：サムネ＋再生アイコン（クリックで詳細へ） */
#mover .mover_inner .flex .youtube_box .movie_main{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; overflow: hidden; background: #000;}
#mover .mover_inner .flex .youtube_box .movie_main img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease;}
#mover .mover_inner .flex .youtube_box .movie_main:hover img{transform: scale(1.04);}
#mover .mover_inner .flex .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_inner .flex .youtube_box .movie_main:hover .play_ico{background: rgba(200,30,30,.85);}
#mover .mover_inner .flex .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 .move_btn{display: flex; gap: 0 19px; padding: 87px 0 0;}
#mover .move_btn a{ width: calc(100% / 4 - 14px); height: auto;}
#mover .move_btn a img{width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block;}
#mover .move_btn a span{font-size: 18px; line-height: 145%; display: block; padding: 16px 0 0;}

/* --------------------------------------------------------------------------- #¥photograph */
#photograph{padding: 127px 0 0; text-align: center;}
#photograph .title_box p{font-size: 16px; line-height: 200%; font-family: "Noto Sans JP"; font-weight: 300; padding: 26px 0;}
#photograph .slider_box{padding: 35px 0 0;}
#photograph .link_box{padding: 58px 0 0;}
#photograph .slider_box { max-width: 100%; margin: 0 auto; overflow: hidden;}
#photograph .swiper-wrapper { align-items: center; }
#photograph .swiper-slide {height: auto;}
#photograph .swiper-slide img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;}
#photograph .swiper-pagination {position: static; margin-top: 33px;}
#photograph .swiper-pagination-bullet {width: 14px; height: 14px; margin: 0 7px; background: #ccc; opacity: 1;}
#photograph .swiper-pagination-bullet-active {background: #999;}
/* ------------------------------------------------------------ article ------------------------------------------------------------ */
#article{padding: 172px 0 0; text-align: center;}
#article .flex{display: flex; flex-wrap: wrap; gap: 74px 26px; padding: 58px 0 0;}
#article .flex a{display: block; width: calc(100% / 3 - 18px); height: auto;}
#article .flex a img{width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block;}
#article .flex a dl{padding: 23px 0 0; text-align: left;}
#article .flex a dl .ttl{font-size: 22px; line-height: 160%; font-family: "Noto Sans JP"; font-weight: 500;} 
#article .flex a dl .text{padding: 18px 0 0; line-height: 150%; font-family: "Noto Sans JP"; font-weight: 300; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 16px;}
#article .flex a dl .cat{padding: 21px 0 0; color: #9A9A9A; font-size: 15px;}
#article .link_box{padding: 58px 0 0;}

/* コンテンツ未登録時の近日公開表示（動画メイン枠に収める） */
#mover .mover_inner .flex .youtube_box .coming-soon{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 25px; background: #efefef;}
#mover .mover_inner .flex .youtube_box .coming-soon .coming-soon__text{padding: 16px 0 0;}
/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 768px) {
	#fv{background: url(../images/contents/fv_bg.jpg) no-repeat center right 25%; background-size: cover;}
	.title_box h2 { font-size: 28px; line-height: 150%; }
	.title_box p { font-size: 13px; line-height: 190%; padding: 11px 0 0; }

/* --------------------------------------------------------------------------- mover */
	#mover { padding: 28px 0 0; }
	#mover .mover_inner { max-width: 100%; }
	#mover .mover_inner .flex { display: block; padding: 0; }
	#mover .mover_inner .flex .title_box { width: 100%; text-align: center; }
	#mover .mover_inner .flex .title_box .link_box { width: 240px; padding: 30px 0 0; margin: 0 auto; }
	#mover .mover_inner .flex .youtube_box { width: 100%; padding: 56.25% 0 0; margin: 20px 0 0; }
	#mover .move_btn { display: block; padding: 35px 0 0; }
	#mover .move_btn a { width: 100%; }
	#mover .move_btn a:last-child { margin-bottom: 0; }
	#mover .move_btn a span { font-size: 15px; line-height: 160%; padding: 12px 0 0; }
	#mover .inner_2 {width: 100%; }
	#mover .link_box{padding: 30px 0 0;}

/* --------------------------------------------------------------------------- photograph */
	#photograph { padding: 60px 0 0; }
	#photograph .title_box { padding: 0 5%; }
	#photograph .title_box p { font-size: 13px; line-height: 190%; padding: 11px 0; }
	#photograph .slider_box { padding: 30px 0 0; }
	#photograph .swiper-pagination { margin-top: 24px; }
	#photograph .swiper-pagination-bullet { width: 10px; height: 10px; margin: 0 5px; }
	#photograph .link_box { padding: 35px 5% 0; }

/* ------------------------------------------------------------ article ------------------------------------------------------------ */
	#article { padding: 80px 0% 0; }
	#article .flex { display: block; padding: 29px 0 0; }
	#article .flex a { width: 100%; margin: 0 0 30px; }
	#article .flex a:last-child { margin-bottom: 0; }
	#article .flex a dl { padding: 18px 0 0; }
	#article .flex a dl .ttl { font-size: 18px; line-height: 160%; }
	#article .flex a dl .text { padding: 12px 0 0; font-size: 13px; line-height: 170%; }
	#article .flex a dl .cat { padding: 15px 0 0; font-size: 11px; }
	#article .link_box { padding: 35px 0 0; }

}