@charset "UTF-8";
/* common */
.swiper-pagination{display:inline-block; position:relative; text-align:center;}
.swiper-pagination-bullet{display:inline-block; position:relative; width:8px; height:8px; margin:0 6px; background:#fff; border-radius:50%; opacity:1; vertical-align:middle; transition:0.3s;}
.swiper-pagination-bullet:focus, .swiper-pagination-bullet:hover{opacity:.8;}
.swiper-pagination-bullet-active{width:12px; height:12px; opacity:1;}
.swiper-pagination-bullet-active:focus, .swiper-pagination-bullet-active:hover{}

.swiper-button-next, .swiper-button-prev{display:inline-block; position:absolute; width:11px; height:10px; top:0; left:auto; right:auto; margin:0; padding:0; transition:0.2s;}
.swiper-button-prev{background:url('../images/ico_arrow_left.png') no-repeat center;}
.swiper-button-next{background:url('../images/ico_arrow_right.png') no-repeat center;}
.swiper-button-prev:after, .swiper-button-next:after{font-family:inherit; font-size:0;}
.swiper-button-prev:focus, .swiper-button-prev:hover{opacity:.6;}
.swiper-button-next:focus, .swiper-button-next:hover{opacity:.6;}
.swiper-button-prev.blue{background:url('../images/ico_arrow_left_blue.png') no-repeat center;}
.swiper-button-next.blue{background:url('../images/ico_arrow_right_blue.png') no-repeat center;}
.swiper-button-prev.blue:focus, .swiper-button-prev.blue:hover{background:url('../images/ico_arrow_left_dark.png') no-repeat center; opacity:1;}
.swiper-button-next.blue:focus, .swiper-button-next.blue:hover{background:url('../images/ico_arrow_right_dark.png') no-repeat center; opacity:1;}

.swiper-button-play, .swiper-button-pause{display:none; width:6px; height:10px; margin-left:5px; font-size:0; vertical-align:middle; opacity:1; cursor:pointer; transition:0.2s;}
.swiper-button-play:focus, .swiper-button-pause:focus,
.swiper-button-play:hover, .swiper-button-pause:hover{opacity:.6;}
.swiper-button-play{background:url('../images/ico_play.png') no-repeat center;}
.swiper-button-pause{background:url('../images/ico_pause.png') no-repeat center;}
.swiper-button-play.active, .swiper-button-pause.active{display:inline-block;}

/* visual */
#mainVisual{position:relative; width:100%; min-width:1200px; height:50vh; min-height:560px; max-height:960px; margin:0 auto; background:#000; overflow:hidden;}
#mainVisual:after{content:''; clear:both; display:block;}
#mainVisual .inner{height:100%; padding:0;}
#mainVisual .swiper-container{width:100%; height:100%; overflow:hidden;}
#mainVisual .swiper-container .bg01{background:#f7f7f7 url('../images/main/main_visual_240531_01.jpg') no-repeat center / cover;}
#mainVisual .swiper-container .bg02{background:#f7f7f7 url('../images/main/main_visual_240531_02.jpg') no-repeat center / cover;}
#mainVisual .swiper-container .bg03{background:#f7f7f7 url('../images/main/main_visual_240531_03.jpg') no-repeat center / cover;}
#mainVisual .swiper-container .bg04{background:#f7f7f7 url('../images/main/main_visual_240531_04.jpg') no-repeat center / cover;}
#mainVisual .swiper-container .txtBox{display:inline-block; position:absolute; width:100%; top:50%; left:0; margin-top:-2.5em; transform:translateY(-50%); z-index:2;/* cursor:default;*/}
#mainVisual .swiper-container .txtBox p{color:#fff; font-size:1.063em; font-weight:200; text-align:left; letter-spacing:.3em;}
#mainVisual .swiper-container .txtBox p.ti{margin:0 auto .313em -.035em; font-size:3.5em; letter-spacing:-.035em;}

#mainVisual .bgBox{position:absolute; width:100%; padding:0 40px; right:0; bottom:50%; margin-bottom:-3em; text-align:right;}
#mainVisual .bgBox .inner{width:100%; height:100%;}
#mainVisual .bgBox .pager{display:inline-block; line-height:0; writing-mode:vertical-lr;}
#mainVisual .bgBox .pager .swiper-pagination-bullet{margin:6px 0;}

#mainVisual .quick{display:inline-block; position:absolute; width:100%; top:50%; left:0; margin-top:4.5em; transform:translateY(-50%); z-index:2;}
#mainVisual .quick ul.link{display:inline-block; display:flex; flex-wrap:wrap;}
#mainVisual .quick ul.link li{position:relative;}
#mainVisual .quick ul.link li.link01{background:#13162a;}
#mainVisual .quick ul.link li.link02{background:#333a70;}
#mainVisual .quick ul.link li.link03{background:#5761b2;}
#mainVisual .quick ul.link li a{display:block; min-width:260px; padding:1.25em 1.4em; color:#fff; font-size:1.125em;}
#mainVisual .quick ul.link li a span{}
#mainVisual .quick ul.link li a span:after{content:''; display:inline-block; position:absolute ; width:11px; height:10px; top:50%; right:28px; margin-top:-5.5px; background:url('../images/ico_arrow_right.png') no-repeat center / 100%; vertical-align:middle; transition:.2s;}
#mainVisual .quick ul.link li a:focus span:after,
#mainVisual .quick ul.link li a:hover span:after{right:24px;}

/* contents */
#mainContents{clear:both; position:relative; width:100%; min-width:1224px; margin:0 auto; padding:0; background:transparent; z-index:1;}
#mainContents .tabCon{clear:both; display:block; position:relative; margin:0 auto;}
#mainContents .tabCon .tabItem{clear:both; display:none; position:relative; margin:0 auto;}
#mainContents .tabCon .tabItem.active{display:block;}

#mainContents .area01,
#mainContents .area02,
#mainContents .area03{clear:both; position:relative; width:100%; overflow:hidden;}

#mainContents .area01{width:100%; height:100px; line-height:100px; margin-top:-100px;}
#mainContents .area01 .board.notice{display:inline-block; width:100%; height:100%; padding:0 80px; background:rgba(19,22,42,.5); border-radius:50px 50px 0 0;}
#mainContents .area01 .board.notice p{display:inline-block; color:#fff;}
#mainContents .area01 .board.notice p.boardTitle{float:left; width:124px; padding:0 28px 0 0; font-size:1.25em; font-weight:500; vertical-align:top;}
#mainContents .area01 .board.notice .bgBox{display:inline-block; width:60px; margin:0 80px 0 0; vertical-align:top;}
#mainContents .area01 .board.notice .bgBox .control{display:inline-block; width:100%; line-height:1;}
#mainContents .area01 .board.notice .bgBox .control > div{position:relative; float:left; margin:0 8px; vertical-align:middle;}
#mainContents .area01 .board.notice .bgBox .control > div:first-child{margin-left:0;}
#mainContents .area01 .board.notice .bgBox .control > div:last-child{margin-right:0;}
#mainContents .area01 .board.notice .swiper-container{display:inline-block; float:right; width:calc(100% - 264px); height:inherit; vertical-align:middle; overflow:hidden;}
#mainContents .area01 .board.notice .swiper-container ul.board{width:100%;}
#mainContents .area01 .board.notice .swiper-container ul.board li{display:block; width:100%;}
#mainContents .area01 .board.notice .swiper-container ul.board li.empty_li{color:#fff; font-size:1.125em; }
#mainContents .area01 .board.notice .swiper-container ul.board li a{display:inline-block; width:100%; line-height:1; color:#fff;}
#mainContents .area01 .board.notice .swiper-container ul.board li a p{color:inherit; vertical-align:middle;}
#mainContents .area01 .board.notice .swiper-container ul.board li a p.listTitle{width:84%; padding:0 60px 0 0; font-size:1.125em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#mainContents .area01 .board.notice .swiper-container ul.board li a p.listDate{color:#e3e5f2; text-align:right; opacity:.8;}
#mainContents .area01 .board.notice .swiper-container ul.board li a:focus,
#mainContents .area01 .board.notice .swiper-container ul.board li a:hover{color:#ffe554;}

#mainContents .area02{padding:4.375em 0;}
#mainContents .area02 .lecture{position:relative; padding:4.375em 0;}
#mainContents .area02 .lecture h2{margin:0 auto 1em; font-size:2.5em; font-weight:200;}
#mainContents .area02 .lecture .swiper-container{width:100%; height:100%; overflow:hidden;}
#mainContents .area02 .lecture .swiper-container ul{}
#mainContents .area02 .lecture .swiper-container ul li{}
#mainContents .area02 .lecture .swiper-container ul li a{display:block; background:#e3e5f2; transition:.3s ease;}
#mainContents .area02 .lecture .swiper-container ul li a .imgW{position:relative; padding:56.25% 0 0; background:#ddd; overflow:hidden;}
#mainContents .area02 .lecture .swiper-container ul li a .imgW img{position:absolute; width:100%; max-width:fit-content; top:50%; left:50%; transform:translate(-50%,-50%) scale(1); transition:.6s ease-in-out;}
#mainContents .area02 .lecture .swiper-container ul li a .txtW{padding:1.625em 1.75em;}
#mainContents .area02 .lecture .swiper-container ul li a .txtW p{transition:.3s ease;}
#mainContents .area02 .lecture .swiper-container ul li a .txtW p.tag{line-height:1; margin:0 auto .75em; color:#5761b2;}
#mainContents .area02 .lecture .swiper-container ul li a .txtW p.ti{display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:2; line-clamp:2; height:3.2em; line-height:1.6; font-size:1.125em;}
#mainContents .area02 .lecture .swiper-container ul li a:focus,
#mainContents .area02 .lecture .swiper-container ul li a:hover{background:#333a70; box-shadow:0 4px 12px rgba(0,0,0,.1);}
#mainContents .area02 .lecture .swiper-container ul li a:focus .imgW img,
#mainContents .area02 .lecture .swiper-container ul li a:hover .imgW img{transform:translate(-50%,-50%) scale(1.1);}
#mainContents .area02 .lecture .swiper-container ul li a:focus .txtW p,
#mainContents .area02 .lecture .swiper-container ul li a:hover .txtW p{color:#fff;}
#mainContents .area02 .lecture .swiper-container ul li a:focus .txtW p.tag,
#mainContents .area02 .lecture .swiper-container ul li a:hover .txtW p.tag{color:#9da3d2;}
#mainContents .area02 .lecture .swiper-container .bgBox{display:inline-block; position:absolute; line-height:2.5; top:4.375em; right:0; vertical-align:top;}
#mainContents .area02 .lecture .swiper-container .bgBox .control{display:inline-block; width:100%; line-height:1;}
#mainContents .area02 .lecture .swiper-container .bgBox .control > div{position:relative; float:left; margin:0 8px; vertical-align:middle;}
#mainContents .area02 .lecture .swiper-container .bgBox .control > div:first-child{margin-left:0;}
#mainContents .area02 .lecture .swiper-container .bgBox .control > div:last-child{margin-right:0;}

#mainContents .area02 .lecture.best{}
#mainContents .area02 .lecture.new{}

@media all and (max-width:1440px){
	#mainVisual .swiper-container .txtBox{margin-top:-60px;}
	#mainVisual .swiper-container .txtBox p{font-size:1.2vw;}
	#mainVisual .swiper-container .txtBox p.ti{margin:0 auto .5em -.035em; font-size:3.5vw;}
	#mainVisual .quick ul.link li a{min-width:20vw;}

	#mainContents .area01 .board.notice .swiper-container ul.board li a p.listTitle{width:80%;}
	
}

@media all and (max-width:1279px){
	#mainVisual{min-width:960px; min-height:480px;}
	#mainVisual .swiper-container .txtBox{padding-left:28px;}
	#mainVisual .swiper-container .txtBox p{font-size:1.4vw;}
	#mainVisual .quick{left:28px; margin-top:2em;}
	#mainVisual .quick ul.link li a{min-width:24vw; padding:20px 28px;}

	#mainContents{min-width:960px;}

	#mainContents .area01 .board.notice{padding:0 60px;}
	#mainContents .area01 .board.notice p.boardTitle{width:100px; padding:0 20px 0 0;}
	#mainContents .area01 .board.notice .bgBox{margin:0 60px 0 0;}
	#mainContents .area01 .board.notice .swiper-container{width:calc(100% - 220px);}

	#mainContents .area02{padding:3.125em 0;}
	#mainContents .area02 .lecture{padding:3.125em 0;}
	#mainContents .area02 .lecture .swiper-container .bgBox{top:3.125em; padding:0 20px;}
}

@media all and (max-width:1023px){
	#mainVisual{min-width:100%; height:calc(50vh - 72px); min-height:360px;}
	#mainVisual .swiper-container .txtBox{margin-top:-6em;}
	#mainVisual .swiper-container .txtBox p{font-size:1.6vw;}
	#mainVisual .swiper-container .txtBox p.ti{margin:0 auto .5em; font-size:2.25em;}
	#mainVisual .quick{margin-top:0;}
	#mainVisual .quick ul.link li a{min-width:28vw; padding:1em 1.5em; font-size:1em;}
	#mainVisual .quick ul.link li a span:after{right:1.5em;}
	#mainVisual .quick ul.link li a:focus span:after, #mainVisual .quick ul.link li a:hover span:after{right:1.25em;}

	#mainContents{min-width:100%;}

	#mainContents .area01 .board.notice{padding:0 40px;}
	#mainContents .area01 .board.notice .swiper-container ul.board li.empty_li{font-size:1.063em;}
	#mainContents .area01 .board.notice .swiper-container ul.board li a p.listTitle{width:78%; font-size:1.063em;}

	#mainContents .area02{padding:2.5em 0;}
	#mainContents .area02 .lecture{padding:2.5em 0;}
	#mainContents .area02 .lecture h2{font-size:2em;}
	#mainContents .area02 .lecture .swiper-container ul li a .txtW p{font-size:.938em;}
	#mainContents .area02 .lecture .swiper-container .bgBox{line-height:2; top:2.5em; padding:0 12px;}
}

@media all and (max-width:768px){
	#mainVisual{height:calc(50vh - 54px); min-height:400px;}
	#mainVisual .swiper-container .txtBox{top:4em; margin-top:0;}
	#mainVisual .bgBox{bottom:auto; top:1em; padding:0 .75em;}
	#mainVisual .bgBox .pager .swiper-pagination-bullet{margin:4px 0;}
	#mainVisual .quick{left:0; margin-top:0; padding:0 20px;}
	#mainVisual .quick .inner{min-width:100%;}
	#mainVisual .quick ul.link li{width:100%;}
	#mainVisual .quick ul.link li a{width:100%;}

	#mainContents .area01{height:112px; line-height:1; margin-top:-112px;}
	#mainContents .area01 .inner{height:100%;}
	#mainContents .area01 .board.notice{padding:1.5em 1.75em; border-radius:32px 32px 0 0;}
	#mainContents .area01 .board.notice .bgBox{float:right; margin:0;}
	#mainContents .area01 .board.notice .swiper-container{clear:both; width:100%; margin-top:12px;}
	#mainContents .area01 .board.notice .swiper-container ul.board li.empty_li{font-size:.938em;}
	#mainContents .area01 .board.notice .swiper-container ul.board li a p{line-height:1.2;}
	#mainContents .area01 .board.notice .swiper-container ul.board li a p.listTitle{width:100%; padding:0; font-size:.938em;}
	#mainContents .area01 .board.notice .swiper-container ul.board li a p.listDate{width:100%; padding:0; font-size:.813em;}

	#mainContents .area02{padding:1.25em 0;}
	#mainContents .area02 .lecture{padding:1.25em 0;}
	#mainContents .area02 .lecture h2{margin:0 auto .75em;}
	#mainContents .area02 .lecture .swiper-container ul li a .txtW{padding:1.313em 1.5em;}
	#mainContents .area02 .lecture .swiper-container ul li a .txtW p{font-size:.875em;}
	#mainContents .area02 .lecture .swiper-container .bgBox{top:1.25em;}
}

@media all and (max-width:580px){
	#mainContents .area02 .lecture h2{font-size:1.875em;}
	#mainContents .area02 .lecture .swiper-container ul li a .txtW{padding:1.125em 1.25em;}
	#mainContents .area02 .lecture .swiper-container ul li a .txtW p{font-size:.813em;}
	#mainContents .area02 .lecture .swiper-container ul li a .txtW p.ti{font-size:1.063em;}
	#mainContents .area02 .lecture .swiper-container .bgBox{line-height:1.875;}
}

@media all and (max-width:480px){
	#mainVisual{}
	#mainVisual .swiper-container .txtBox p.ti{font-size:1.875em;}
}

@media all and (max-width:374px){
}

/* ie hack */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width:768px){
}