@charset "UTF-8";

.studyContent07{
}

/*header*/

.studyHead07{
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
	background:#fa0014;
	display: flex;
	justify-content: center;
	align-items: center;
}

.studyHead07 h1{
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	border-radius: 50%;
	width: 0;
	height: 0px;
	background: #fff;
	animation: op 3s forwards 0.4s;
	margin: 0 -100%;
}

.studyHead07 h1 figure.on{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vw;
	position: absolute;
	left: calc(50% - 50vw);
	top: calc(50% - 50vw);
	opacity: 0;
	animation: blink 0.01s forwards 0.9s;
}
.studyHead07 h1 figure.off{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vw;
	left: calc(50% - 50vw);
	top: calc(50% - 50vw);
	animation: blink2 0.01s forwards 0.9s;
}

.studyHead07 h1 img{
	min-width: 777px;
	width: 777px;
	height: 537px;
}

.headicon{
	position: absolute;
	bottom:30px;
	animation:blink 1s ease-in-out infinite alternate;
	opacity: 0;
	text-align: center;
	left: 0;
	right: 0;
}


@media only screen and (max-width: 688px) {
	
.studyHead07 h1 img{
	min-width: 254px;
	width: 254px;
	height: 361px;
}
.headicon img{
		width: 15px;
		height: 23px;
	}
	
}

@keyframes op{
    0%{
        width: 0;
		height: 0;
    }
    100%{
        width: 3000px;
		height:3000px;
    }
}

@keyframes blink{
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}

@keyframes blink2{
    0%{
        opacity:1;
    }
    100%{
        opacity:0;
    }
}

/*-------------------------------*/


.studyMid07{
	width: 100%;
	height: 100vh;
	display:-webkit-box;
  	display:-ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	position: relative;
	overflow: hidden;
	text-align: center;
}

.studyMid07 ul.midmenu{
	display:-webkit-box;
  	display:-ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	max-width: 1000px;
}
.studyMid07 ul.midmenu li{
	position: relative;
	width: 250px;
	display:-webkit-box;
  	display:-ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 25px;
	flex-direction: column;
}
.studyMid07 ul.midmenu li figure{
	border-radius: 50%;
	display: inline-block;
	position: relative;
	z-index: 1;
	cursor: pointer;
}
.studyMid07 ul.midmenu li p{
	text-align: center;
	padding: 20px 0 0 0;
}

@media only screen and (max-width: 688px) {
	.studyMid07 ul.midmenu li{
		width: 50%;
		padding: 0;
		margin: 0 0 12px 0;
	}
	.studyMid07 ul.midmenu li figure{
		width: 60%;
	}
	.studyMid07 ul.midmenu li p{
	text-align: center;
	padding: 0 0 0 0;
}
}



.studyMid07 ul.midmenu li:hover figure{

}

.studyMid07 ul.midmenu li figure:after{
	pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  content: '';
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
	
	-webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    opacity: 0;
	
	top: -2px;
    left: -2px;
    padding: 2px;
	-webkit-transition: -webkit-transform 0.2s, opacity 0.3s;
  -moz-transition: -moz-transform 0.2s, opacity 0.3s;
  transition: transform 0.2s, opacity 0.3s;
	
	z-index: -1;

}
.studyMid07 ul.midmenu li figure:hover:after{
	-webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
.studyMid07m01 figure{background: #00d2eb;}
.studyMid07m01 figure:after{background: #00d2eb;}
.studyMid07m02 figure{background: #ff5a9b;}
.studyMid07m02 figure:after{background: #ff5a9b;}
.studyMid07m03 figure{background:#7de150;}
.studyMid07m03 figure:after{background: #7de150;}
.studyMid07m04 figure{background:#ff8c00;}
.studyMid07m04 figure:after{background: #ff8c00;}
.studyMid07m05 figure{background:#be32b9;}
.studyMid07m05 figure:after{background: #be32b9;}
.studyMid07m06 figure{background:#19c887;}
.studyMid07m06 figure:after{background: #19c887;}
.studyMid07m07 figure{background:#dcc800;}
.studyMid07m07 figure:after{background: #dcc800;}
.studyMid07m08 figure{background:#0a5abe;}
.studyMid07m08 figure:after{background: #0a5abe;}

.studyMid07m01mov,
.studyMid07m02mov,
.studyMid07m03mov,
.studyMid07m04mov,
.studyMid07m05mov,
.studyMid07m06mov,
.studyMid07m07mov,
.studyMid07m08mov{
	border-radius: 50%;
	width: 0;
	height: 0;
	position: absolute;
	z-index: 2;
}
.studyMid07m01mov{background: #00d2eb;}
.studyMid07m02mov{background: #ff5a9b;}
.studyMid07m03mov{background: #7de150;}
.studyMid07m04mov{background: #ff8c00;}
.studyMid07m05mov{background: #be32b9;}
.studyMid07m06mov{background: #19c887;}
.studyMid07m07mov{background: #dcc800;}
.studyMid07m08mov{background: #0a5abe;}

.studyMid07m01mov.active,
.studyMid07m02mov.active,
.studyMid07m03mov.active,
.studyMid07m04mov.active,
.studyMid07m05mov.active,
.studyMid07m06mov.active,
.studyMid07m07mov.active,
.studyMid07m08mov.active{
	animation: op 2s forwards 0s;
}


.studyMid07 .slide{
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 3;
	left: 0;
	top:0;
	opacity: 0;
	display: none;
}

.studyMid07 .slide.slideactive{
	animation:blink 1.8s forwards 0.8s;
}

.studyMid07 .slide li.slide01,
.studyMid07 .slide li.slide02,
.studyMid07 .slide li.slide03,
.studyMid07 .slide li.slide04,
.studyMid07 .slide li.slide05,
.studyMid07 .slide li.slide06,
.studyMid07 .slide li.slide07,
.studyMid07 .slide li.slide08{
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-size: cover;
	background-position: center;
}

.studyMid07 .slide li.slide01{background-image: url("../shared/img/study07/slide_01_bg.jpg");}
.studyMid07 .slide li.slide02{background-image: url("../shared/img/study07/slide_02_bg.jpg");}
.studyMid07 .slide li.slide03{background-image: url("../shared/img/study07/slide_03_bg.jpg");}
.studyMid07 .slide li.slide04{background-image: url("../shared/img/study07/slide_04_bg.jpg");}
.studyMid07 .slide li.slide05{background-image: url("../shared/img/study07/slide_05_bg.jpg");}
.studyMid07 .slide li.slide06{background-image: url("../shared/img/study07/slide_06_bg.jpg");}
.studyMid07 .slide li.slide07{background-image: url("../shared/img/study07/slide_07_bg.jpg");}
.studyMid07 .slide li.slide08{background-image: url("../shared/img/study07/slide_08_bg.jpg");}

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

.studyMid07 .slide li.slide01,
.studyMid07 .slide li.slide02,
.studyMid07 .slide li.slide03,
.studyMid07 .slide li.slide04,
.studyMid07 .slide li.slide05,
.studyMid07 .slide li.slide06,
.studyMid07 .slide li.slide07,
.studyMid07 .slide li.slide08{
	align-items:flex-start;
	}
.studyMid07 .slide li.slide01{background-image: url("../shared/img/study07/slide_01_bg_sp.jpg");}
.studyMid07 .slide li.slide02{background-image: url("../shared/img/study07/slide_02_bg_sp.jpg");}
.studyMid07 .slide li.slide03{background-image: url("../shared/img/study07/slide_03_bg_sp.jpg");}
.studyMid07 .slide li.slide04{background-image: url("../shared/img/study07/slide_04_bg_sp.jpg");}
.studyMid07 .slide li.slide05{background-image: url("../shared/img/study07/slide_05_bg_sp.jpg");}
.studyMid07 .slide li.slide06{background-image: url("../shared/img/study07/slide_06_bg_sp.jpg");}
.studyMid07 .slide li.slide07{background-image: url("../shared/img/study07/slide_07_bg_sp.jpg");}
.studyMid07 .slide li.slide08{background-image: url("../shared/img/study07/slide_08_bg_sp.jpg");}
	
	.studyMid07 .slide li figure{
		padding: 70px 0 0 0;
	}
}

.slide-dots {
    overflow: hidden;
    width: 100%; /*ポイント*/
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;/*ポイント*/
	position: absolute;
	bottom: 10%;
	left: 0;
	z-index: 100;
	display: flex;
	justify-content: center;
	background-image: url("../shared/img/study07/menu_line.png");
	background-repeat: no-repeat;
	background-position: center;
}
.slide-dots li {
  position: relative;
  display: inline-block;/*ポイント*/
  margin: 20px 30px;
  padding: 0;
  width: 20px;
  height: 0;
  padding-top: 20px;
  border-radius: 50%;
  cursor: pointer;
  background: #fff;
  overflow: hidden;
}

.slide-dots li button{
  border: 0;
  background:transparent; 
  display: block; 
  height: 20px; 
  width: 20px; 
  outline: none;
  line-height: 0px; 
  font-size: 0px; 
  color: transparent;
  padding: 5px;
  cursor: pointer; 
}
.slide-dots li button:hover,
.slide-dots li button:focus {
  outline: none;
}
.slide-dots li button:hover:before,
.slide-dots li button:focus:before {
  opacity: 1;
}

.slide-dots li button:before{
	width: 100%;
	height: 100%;
	background: #fff;
}

.slide-dots li.slick-active{
	border: solid 20px #fff;
	margin: 0 10px;
	width: 60px;
}

.slide-dots li:first-child.slick-active{background: #00d2eb;}
.slide-dots li:nth-child(2).slick-active{background: #ff5a9b;}
.slide-dots li:nth-child(3).slick-active{background: #7de150;}
.slide-dots li:nth-child(4).slick-active{background: #ff8c00;}
.slide-dots li:nth-child(5).slick-active{background: #be32b9;}
.slide-dots li:nth-child(6).slick-active{background: #19c887;}
.slide-dots li:nth-child(7).slick-active{background: #dcc800;}
.slide-dots li:nth-child(8).slick-active{background: #0a5abe;}

@media only screen and (max-width: 688px) {
	.slide-dots { bottom:80px; background-size: 220px 1px }
	.slide-dots li {width: 10px; padding-top: 10px; margin: 10px 10px;}
	.slide-dots li button{height: 10px;  width: 10px; }
	.slide-dots li.slick-active{border: solid 5px #fff; width: 20px; margin: 5px 5px;}
}


.headiconw{
	position: absolute;
	bottom:30px;
	animation:blink 1s ease-in-out infinite alternate;
	opacity: 0;
	z-index: 5;
	display: none;
	text-align: center;
	left: 0;
	right: 0;
}
.bottomiconw{
	position: absolute;
	top:30px;
	animation:blink 1s ease-in-out infinite alternate;
	opacity: 0;
	z-index: 5;
	display: none;
	text-align: center;
	left: 0;
	right: 0;
}

@media only screen and (max-width: 688px) {
	
.headiconw img,
.bottomiconw img{
		width: 15px;
		height: 23px;
	}
}


/*--------------------------------*/



.studyBottom07{
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items:flex-start;
	position: relative;
}

.bottomicon{
	position: absolute;
	top:30px;
	animation:blink 1s ease-in-out infinite alternate;
	opacity: 0;
	text-align: center;
	left: 0;
	right: 0;
}
.studyBottom07 figure{
	padding: 300px 0 0 0;
}

@media only screen and (max-width: 688px) {
	
.bottomicon img{
		width: 15px;
		height: 23px;
	}
	
.studyBottom07 figure{
	padding: 70px 0 0 0;
}
}


.studyFooter{
	position: absolute;
	width: 100%;
	bottom: 0;
}

.scnext{
	cursor: pointer;
}
.scback{
	cursor: pointer;
}


.fadein {
  opacity : 0;
  transform: translateY(20px) translateZ(0);
  transition: all 1s;
  z-index: 1;
}