@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Barlow&display=swap');

#slick-main .slideCover{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 10;
}

.fitWidthFull{
	width:100%;
}

@media screen and (max-width: 970px){
	#slick-main{
		min-height: 300px;
		position: relative;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		background-color: #023f73;
	}


	#slick-main .slick-slide {
		width: 100%;
		height: 300px;
		background-size: cover;
	}
	#slick-main .slick-slide li{
		height: 300px;
		background-size: cover;
	}
	#slick-main .slideobject0 {
		background-image: url(/library/img/top/img_swiperslide01_sp.jpg);
		position: relative;
	}

	#slick-main .slideobject1 {
		background-image: url(/library/img/top/img_swiperslide02_sp.jpg);
		position: relative;
	}

/* 	#slick-main .slideobject2 {
		background-image: url(/library/img/top/img_spmainslide02.jpg);
		position: relative;
	} */

	#slick-main .slideobject2 {
		background-image: url(/library/img/top/img_swiperslide03_sp.jpg);
		position: relative;
	}
	#slick-main .slideobject3 {
		background-image: url(/library/img/top/img_swiperslide04_sp.jpg);
		position: relative;
	}
	.slickWrap{
		position: relative;
	}
	/* 効果をかけるためのスタイル設定 */
	#slick-main .slick-slide{
			/* slickによってelement.styleで付けられるopacityを無効化 */
			opacity: 1 !important;
		}
		#slick-main .slideobject{
			/* フェード要素の初期設定 */

			transition: 0s;
		}


		.menufixed{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 50;
			background: #023f73;
		}

		.slideWrap2{
			padding: 70px 0 60px;
			background: #ecf0fa;
		}
		.fixedSlide1 {
			width: 100%;
			margin: 0 auto 0px;
		}
		.mypatter .slick-slide img {
			width: 100%;
			/* height: 310px; */
			padding: 0 5px;
		}
		.mypatter{
			width: 100%;
		}
		.mypatter .slick-slide{
			margin: 5px;
		}
		.content {
			display: none;
		}
		.content.show {
			margin-top: 50px;
			display: block;
		}
		.slick-arrow {
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		width: 30px;
	}
	.prev-arrow {
		left: 10px;
		z-index: 1;

	}
	.next-arrow {
		right: 10px;
	}


	#slick-main p.text{
		/* テキスト 初期設定 */
		opacity: 0;
		transition: 0s;
	}
	#slick-main .slick-active p.text{
		/* テキスト　slick-active(効果開始) この辺は自由にduration */
		opacity: 1;
		transition: ease 1.0s; 
		transition-delay: 1.0s;
	}
	#slick-main .slick-continue p.text{
		/* テキスト　slick-continue この辺は自由にduration */
		opacity: 0;
		transition: ease 1.0s; 
	}


	/*スライドテキスト場所固定*/
	.text1 img,
	.text2 img,
	.text3 img,
	.text4 img{
		width: 100%;
	}
	.text1{
		position: absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		width: 70%;
		height: 0;
		z-index: 100;
		margin: auto;
	}
	.text2{
		position: absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		width: 70%;
		height: 0;
		z-index: 100;
		margin: auto;
	}
	.text3{
		position: absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		width: 70%;
		height: 0;
		z-index: 100;
		margin: auto;
	}
	.text4{
		position: absolute;
		top: 0%;
		left: auto;
		right: 250px;
		bottom: 0;
		width: 30%;
		height: 0;
		z-index: 100;
		margin: auto;
	}


	/*youtubeをスライドにはめる*/

	.sample-demo {
		margin: 0 auto;
		position: relative;
		width: 100%;
		padding-top: 56.25%;

	}
	.sample-demo iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100% !important;
		height: 100% !important;
	}
	.content {
		width: 100%;
		height: auto;
		position: absolute;
		z-index: 1;
		color: #fff;
		font-size: 200%;
		top: 50%;
		transform: translateY(-50%);
		overflow: hidden;
	}

	/*下部スライドボタン調整*/
	.mypatter.fixedSlide1 .slick-dots{
		position: absolute;
		bottom: -53px;
		display: block;
		width: 280px;
		padding: 0;
		margin: 0;
		list-style: none;
		text-align: center;
		left: 50%;
		transform: translate(-50%, 0%);
		-webkit-transform: translate(-50%, 0%);
		-ms-transform: translate(-50%, 0%);
		justify-content: space-between;
	}
	.slideButtonWrap{
		position:relative;
		bottom:-41px;
	}
	.slideButton{
			position: absolute;
			height: 45px;
			width: 350px;
			display: flex;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			-webkit-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);		
			justify-content: space-between;
	}
	.bottomSlideArrow-l,.bottomSlideArrow-r{
		cursor: pointer;
	}
	.bottomSlideArrow-r img,
	.bottomSlideArrow-l img {
		width:35px;
	}

	/*TOP下部slide調節*/
	.mypatter.fixedSlide1 .slick-dots{
		bottom:-46px;
		z-index: 10;
	}
	.mypatter.fixedSlide1 .slick-dots li{
		margin: 0 0px;
	}
	.mypatter.fixedSlide1 .slick-dots li button::before {
		font-size:10px;
	}
	.mypatter.fixedSlide1 .slick-dots li button::before{
		color:#fff;
		opacity: 1;
	}
	.mypatter.fixedSlide1 .slick-dots li.slick-active button::before{
		color:#003e6a;
	}

}

@media screen and (min-width: 971px){
	#slick-main{
		min-height: 520px;
		position: relative;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		background-color: #023f73;
	}

	.slideobject{
		max-height: 560px;
	}

	#slick-main .slick-slide {
		width: 100%;
		height: 480px;
	}
	#slick-main .slick-slide li{
		height: 480px;
		background-size: cover;
	}
	#slick-main .slideobject0 {
		background-image: url(/library/img/top/img_mainslide00.jpg);
		position: relative;
	}

	#slick-main .slideobject1 {
		background-image: url(/library/img/top/img_mainslide01.jpg);
		position: relative;
	}

/* 	#slick-main .slideobject2 {
		background-image: url(/library/img/top/img_mainslide02.jpg);
		position: relative;
		
	} */

	#slick-main .slideobject2 {
		background-image: url(/library/img/top/img_mainslide03.jpg);
		position: relative;
	}
	#slick-main .slideobject3 {
		background-image: url(/library/img/top/img_mainslide04.jpg);
		position: relative;
	}
	.slickWrap{
		position: relative;
	}
	/* 効果をかけるためのスタイル設定 */
	#slick-main .slick-slide{
			/* slickによってelement.styleで付けられるopacityを無効化 */
			opacity: 1 !important;
		}
		#slick-main .slideobject{
			/* フェード要素の初期設定 */

			transition: 0s;
		}


		.menufixed{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 50;
			background: #023f73;
		}

		.slideWrap2{
			padding: 70px 0 60px;
			background: #ecf0fa;
		}
		.fixedSlide1 {
			width: 100%;
			margin: 0 auto 0px;
		}
		.mypatter .slick-slide img {
			width: 100%;
			/* height: 310px; */
			padding: 0 5px;
		}
		.mypatter{
			width: 100%;
		}
		.mypatter .slick-slide{
			margin: 5px;
		}
		.content {
			display: none;
		}
		.content.show {
			margin-top: 50px;
			display: block;
		}
		.slick-arrow {
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
	}
	.prev-arrow {
		left: 40px;
		z-index: 10;
	}
	.next-arrow {
		right: 40px;
	}


	#slick-main p.text{
		/* テキスト 初期設定 */
		opacity: 0;
		transition: 0s;
	}
	#slick-main .slick-active p.text{
		/* テキスト　slick-active(効果開始) この辺は自由にduration */
		opacity: 1;
		transition: ease 1.0s; 
		transition-delay: 1.0s;
	}
	#slick-main .slick-continue p.text{
		/* テキスト　slick-continue この辺は自由にduration */
		opacity: 0;
		transition: ease 1.0s; 
	}


	/*スライドテキスト場所固定*/
	.text1 img,
	.text2 img,
	.text3 img,
	.text4 img{
		width: 100%;
	}
	.text1{
		position: absolute;
		top:40%;
		left:18%;
		width: 23%;
		z-index: 100;
	}
	.text2{
		position: absolute;
		top: 45%;
		right: 5%;
		z-index: 100;
	}
	.text3{
		position: absolute;
		top: 45%;
		left: 12%;
		z-index: 100;
	}
	.text4{
		position: absolute;
		top: 40%;
		left: 10%;
		z-index: 100;
	}


	/*youtubeをスライドにはめる*/

	.sample-demo {
		margin: 0 auto;
		position: relative;
		width: 100%;
		padding-top: 56.25%;
		margin-top: calc(-28% + 280px);
	}
	.sample-demo iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100% !important;
		height: 100% !important;
	}
	.content {
		width: 100%;
		height: auto;
		position: absolute;
		z-index: 1;
		color: #fff;
		font-size: 200%;
		top: 50%;
		transform: translateY(-50%);
		overflow: hidden;
	}

/*下部スライド、ボタン調整*/
	.mypatter.fixedSlide1 .slick-dots{
		position: absolute;
		bottom: -53px;
		display: block;
		width: 480px;
		padding: 0;
		margin: 0;
		list-style: none;
		text-align: center;
		left: 50%;
		transform: translate(-50%, 0%);
		-webkit-transform: translate(-50%, 0%);
		-ms-transform: translate(-50%, 0%);
		justify-content: space-between;
	}
	
	.slideButtonWrap{
		position:relative;
		bottom:-11px;
	}
	.slideButton{
			position: absolute;
			height: 10px;
			width: 400px;
			display: flex;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			-webkit-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);		
			justify-content: space-between;
	}
	.bottomSlideArrow-l,.bottomSlideArrow-r{
		cursor: pointer;
	}

	/*TOP下部slide調節*/
	.mypatter.fixedSlide1 .slick-dots{
		bottom:-36px;
		z-index: 10;
	}
	.mypatter.fixedSlide1 .slick-dots li button::before {
		font-size:15px;
	}
	.mypatter.fixedSlide1 .slick-dots li button::before{
		color:#fff;
		opacity: 1;
	}
	.mypatter.fixedSlide1 .slick-dots li.slick-active button::before{
		color:#003e6a;
	}
	.bannerWrap {
    display: flex;
    justify-content: center;
	}
	.bannerWrap > div {
		margin:0 10px;
	}

}


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

	#slick-main .slick-slide {
		width: 100%;
		height: 560px;
	}
	#slick-main .slick-slide li{
		height:560px;
		background-size: cover;
	}
	#slick-main .slideobject0 {
		background-image: url(/library/img/top/img_mainslide00.jpg);
		position: relative;
		
	}

	#slick-main .slideobject1 {
		background-image: url(/library/img/top/img_mainslide01.jpg);
		position: relative;
	}

	#slick-main .slideobject2 {
		background-image: url(/library/img/top/img_mainslide02.jpg);
		position: relative;
	}

	#slick-main .slideobject3 {
		background-image: url(/library/img/top/img_mainslide03.jpg);
		position: relative;
	}
	#slick-main .slideobject4 {
		background-image: url(/library/img/top/img_mainslide04.jpg);
		position: relative;
	}


	/*下部スライド、ボタン調整*/
	.mypatter.fixedSlide1 .slick-dots{
		position: absolute;
		bottom: -53px;
		display: block;
		width: 400px;
		padding: 0;
		margin: 0;
		list-style: none;
		text-align: center;
		left: 50%;
		transform: translate(-50%, 0%);
		-webkit-transform: translate(-50%, 0%);
		-ms-transform: translate(-50%, 0%);
		justify-content: space-between;
	}

	.slideButtonWrap{
		position:relative;
		bottom:-30px;
	}
	.slideButton{
			position: absolute;
			height: 45px;
			width: 500px;
			display: flex;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			-webkit-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);		
			justify-content: space-between;
	}
	.bottomSlideArrow-l,.bottomSlideArrow-r{
		cursor: pointer;
	}

	/*TOP下部slide調節*/
	.mypatter.fixedSlide1 .slick-dots{
		bottom:-41px;
		z-index: 10;
	}
	.mypatter.fixedSlide1 .slick-dots li button::before {
		font-size:15px;
	}
	.mypatter.fixedSlide1 .slick-dots li button::before{
		color:#fff;
		opacity: 1;
	}
	.mypatter.fixedSlide1 .slick-dots li.slick-active button::before{
		color:#003e6a;
	}

}




.slideWrap2{
	padding: 70px 0 70px;
	background: #ecf0fa;
}
.fixedSlide1 {
	width: 100%;
	margin: 0 auto 0px;
}
.mypatter .slick-slide img {
	width: 100%;
	/* height: 310px; */
	padding: 0 5px;
}
.mypatter{
	width: 100%;
}
.mypatter .slick-slide{
	margin: 5px;
}
.content {
	display: none;
}
.content.show {
	margin-top: 50px;
	display: block;
}
@media screen and (max-width:970px){
	.slick-arrow {
		position: absolute;
		top: 0px;
		bottom: 0;
		margin: auto;
	}
}
@media screen and (min-width:971px){
	.slick-arrow {
		position: absolute;
		top: -50px;
		bottom: 0;
		margin: auto;
	}
}
.mypatter .prev-arrow {
	left: 40px;
	z-index: 10;
}
.mypatter .next-arrow {
	right: 40px;
}





/* --------------------------------------------------------- */
/* mv */
.mv {
	overflow: hidden;
}
.mvSlider {
	cursor: pointer;
	margin-bottom: 0;
	background-color: #fff;
}
.mvItem {
	position: relative;
	display: block;
}
.mvItem img {
	width: 100%;
	transform: scale(1);
}
.mvSlider .slick-slide.scale-zoom .mvItem img {
	animation: scale-zoom 16s 0s linear infinite;
}
.mvSlider .slick-slide.scale-zoom .mvItem.is-01 img.is-bg {
	animation: anime01 1s 0s linear forwards 1;
}
.mvSlider .slick-slide.scale-zoom .mvItem.is-01 img.is-txt {
	animation: anime01 1s .8s linear forwards 1;
}
.mvSlider .slick-slide.scale-zoom .mvItem.is-01 .mvBtn {
	animation: anime01 1s 1.6s linear forwards 1;
}
.mvItem img:hover {
	opacity: 1;
}
.mvBox {
	position: absolute;
	top: 30%;
	left: 0;
	padding: 20px 40px 20px 70px;
	background: rgba(255,255,255,.7);
	opacity: 0;
	transform: translateX(-100%);
}
.mvText01 {
	margin-bottom: 5px;
	font-size: 2.8rem;
	line-height: 1.6;
	letter-spacing: .1em;
	opacity: 0;
	transform: translateX(-100%);
}
.mvText02 {
	margin-bottom: 26px;
	color: #003e75;
	font-family: 'Barlow', sans-serif;
	font-size: 1.5rem;
	line-height: 1.28;
	letter-spacing: 0;
	opacity: 0;
	transform: translateX(-100%);
}
.mvProgress {
	height: 2px;
	background: #d9d9d9;
	margin-left: -70px;
	margin-right: -40px;
}
.mvBar {
	display: block;
  width: 0%;
  height: 2px;
  background: #003e75;
}
.mvBtn {
	width: 260px;
	margin-top: 20px;
	padding: 12px 24px;
	background: #003e75 url(/library/img/top/icon_arrow.svg) no-repeat top 50% right 10px / 8px 16px;
	color: #fff;
	font-size: 1.6rem;
	letter-spacing: 0;
	text-align: center;
	opacity: 0;
	transform: translateX(-100%);
}
.mvItem.is-01 .mvBtn {
	position: absolute;
	left: 110px;
	bottom: 150px;
	transform: translateX(0);
}
.mvItem.is-01 .is-bg {
	opacity: 0;
}
.mvItem.is-01 .is-txt {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
.mvSlider .slick-slide .mvItem img {
	display: inline;
}
.mvSlider .slick-slide.slick-current .mvItem.is-01 .mvBtn {
	opacity: 1;
	transform: translateX(0);
	transition: transform .8s .3s, opacity .8s .3s;
}
.mvSlider .slick-slide.slick-current .mvBox {
	opacity: 1;
	transform: translateX(0);
	transition: transform .8s .5s, opacity .8s .5s;
}
.mvSlider .slick-slide.slick-current .mvText01 {
	opacity: 1;
	transform: translateX(0);
	transition: transform .8s .7s, opacity .8s .7s;
}
.mvSlider .slick-slide.slick-current .mvText02 {
	opacity: 1;
	transform: translateX(0);
	transition: transform .8s .9s, opacity .8s .9s;
}
.mvSlider .slick-slide.slick-current .mvBtn {
	opacity: 1;
	transform: translateX(0);
	transition: transform .8s 1s, opacity .8s 1s;
}
.mvSlider .slick-slide.slick-current .mvItem.is-01 .mvBtn {
	opacity: 0;
}
@media screen and (max-width:970px){
	.mvBox {
		top: 45vw;
		padding: 10px 20px 15px 20px;
	}
	.mvText01 {
		font-size: 1.8rem;
	}
	.mvText02 {
		margin-bottom: 10px;
		font-size: 1rem;
	}
	.mvProgress {
		margin-left: -20px;
		margin-right: -20px;
	}
	.mvBtn {
		width: 140px;
		margin-top: 10px;
		padding: 7px;
		background-position: top 50% right 5px;
		background-size: 6px 11px;
		font-size: 1rem;
	}
	.mvItem.is-01 .mvBtn {
		left: 20px;
		bottom: 60px;
	}
}

/* mv slick */
.mvSlider .slick-track {
	overflow: hidden;
}
.mvSlider .slick-dots {
	position: absolute;
	bottom: 16px;
	width: 100%;
}
.mvSlider .slick-dots li {
	width: 60px;
	height: 7px;
	background: #d9d9d9;
}
.mvSlider .slick-dots li button {
	width: 100%;
	height: 100%;
	padding: 0;
}
.mvSlider .slick-dots li button:before {
	display: none;
}
.mvSlider .slick-dots li.slick-active {
	background-color: #003e75;
}
@media screen and (max-width:970px){
	.mvSlider .slick-dots {
		bottom: 20px;
	}
	.mvSlider .slick-dots li {
		width: 45px;
		height: 9px;
		margin: 0 3px;
	}
}
@keyframes scale-zoom {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.1);
	}
}
@keyframes anime01 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}