@charset "UTF-8";


.service-yt{
	position: relative;
}

.service-yt_fv{
	overflow: hidden;
}

.service-yt_fv img{
	max-width: 100%;
	height: 100vh;
	object-fit: cover;
	vertical-align: bottom;
}

.service-yt_fv h1{
	position: absolute;
	font-size: 3.8rem;
	color: #fff;
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	text-align: center;
	font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans CJK JP",
	"メイリオ",Meiryo,"游ゴシック Medium","Yu Gothic Medium","游ゴシック","Yu Gothic",
	"游ゴシック体",YuGothic, sans-serif;
}



/* animation */

.service-energy_fv{
	overflow: hidden;
}

.scaleUP{
    background: #fff;
}
.scaleUP img{
    opacity: 0;
    transform: scale(.9);
    transition: 3s ease-out;
}
.scaleUP.show img{
    opacity: 1;
    transform: scale(1.2);
}

.scaleUP h1{
	opacity: 0;
}

.scaleUP.show h1{
	opacity: 1;
}

.bgextend{
	overflow: auto;
  }
  
  .bgappear{
	display: block;
  }
  
  .bgLRextend::before{
	left: -60%;
	width: 120%;
	animation-duration: 3s;
  }


/* 下から */

.fadeUp{
	animation-name:fadeUpAnime;
	animation-duration:1.1s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	
	@keyframes fadeUpAnime{
	  from {
		opacity: 0;
	  transform: translateY(100px);
	  }
	
	  to {
		opacity: 1;
	  transform: translateY(0);
	  }
	}

.fadeUpTrigger{
	opacity: 0;
}

/* 順番にフェイドアップ */

.fadeUpBox{
	opacity: 0;
}

/* section */

.service-yt-section{
	margin: 0 auto;
	padding-bottom: 80px;
}

.service-yt-section:last-child{
	padding-bottom: 20px;
}

.sec1, .sec3{
	background-color: #fdfefe;
}

.sec1-h1, .sec2-h1, .sec3-h1{
	background-color: #FE7676;
	padding: 30px;
	color: #fff;
	margin-top: 0;
	text-align: center;
	font-size: 2rem;
	position: relative;
}

.sec1-h1::before, .sec2-h1::before, .sec3-h1::before{
	content: '';
	position: absolute;
	bottom: 1px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 80px 80px 0 80px;
	border-color: #FE7676  transparent transparent transparent;
	left: 50%;
	transform: translateX(-50%) translateY(100%);
  }

.section-container{
	margin: 80px auto 0;
	max-width: 1024px;
	padding: 0px 20px 50px;
}

.section-container h3{
	font-size: 1.5rem;
	color: #FE7676;
	text-align: center;
}

.section-container p{
	margin-bottom: 50px;
}

.img-wrapper{
	text-align: center;
}

.img-wrapper img{
	width: 70%;
}

.sec1-yt{
	display: flex;
	align-items: center;
}

.sec1-yt_left{
	width: 50%;
	font-size: 1.1rem;
}

.sec1-yt_right{
	width: 50%;
}

.tx-center{
	text-align: center;
}

.sec1-yt_merit ul{
	display: flex;
	padding-left: 0;
	justify-content: space-around;
	align-items: center;
}

.sec1-yt_merit ul li{
	text-align: center;
	border-radius: 50%;
	background: #FFfefe;
	box-shadow:  10px 10px 40px #d9d3d3,
             -10px -10px 40px #ffffff;
	width: 300px;
	height: 300px;
	display: inline-block;
	position: relative;
}

.sec1-yt_merit ul li p{
	margin-top: 2.5rem;
	margin-bottom: 1rem;
}

.sec2{
	background-color: #fff;
}

.sec2-container{
	margin-top: 120px;
}

.basicPlan{
	display: flex;
	justify-content: space-around;
}

.basicPlan article{
	text-align: center;
	border-radius: 50px;
	background: #ffffff;
	box-shadow: inset 20px 20px 40px #fafafa,
            inset -20px -20px 40px #ffffff;
    padding: 20px 45px;
	max-width: 240px;
}

.basicPlan ul li{
	text-align: left;
	line-height: 2rem;
}

.basicPlan_ttl{
	font-size: 1.5rem;
	position: relative;
	margin-top: 10px;
}

.basicPlan_ttl::before {
    position: absolute;
    bottom: -10px;
    left: calc(50% - 30px);
    width: 60px;
    height: 5px;
    content: '';
    border-radius: 5px;
    background: #FE7676;
}

.arrow-dropright{
	padding-top: 22%;
}

.basicPlan_item2{
	position: relative;
}

.basicPlan_note{
	font-size: 0.8rem;
	padding: 0 0.8rem;
	position: absolute;
	left: 0;
	bottom: -14%;
	text-align: left;
}


.sec3-container{
	margin-top: 100px;
}


.service-yt_link{
	margin-top: 60px;
	display: flex;
	justify-content: space-around;
}

/* リンクボタン */
.link-btn_yt{
	max-width: 320px;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  padding: 1rem 3.5rem;
  cursor: pointer;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  letter-spacing: 0.1em;
  border-radius: 0.5rem;
  overflow: hidden;
	color: #fff;
	border-radius: 0;
	background: #FF7676;
}

.fa-position-right{
	padding-left: 2rem;
}
  
.link-btn_yt span {
	position: relative;
  }
  
.link-btn_yt::before {
	position: absolute;
	top: 0;
	left: 30px;
	width: 150%;
	height: 500%;
	content: '';
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	-webkit-transform: translateX(-98%) translateY(-70%) rotate(135deg);
	transform: translateX(-98%) translateY(-70%) rotate(135deg);
	background: #000;
  }
  
.link-btn_yt:hover::before {
	-webkit-transform: translateX(-9%) translateY(-25%) rotate(135deg);
	transform: translateX(-9%) translateY(-25%) rotate(135deg);
  }

/* リンクボタンここまで */

/* lol slider */

.slider-wrapper{
	overflow: hidden;
}

.lol-slider{
	background-image: url(../images/lol-slider.png);
	background-size: 50%;
	background-repeat: repeat-x;
	animation: loop-slide 25s infinite linear 0s none running;
	height: 32.6vw;
	width: 200vw;
	margin-bottom: 80px;
}

@keyframes loop-slide {

	100% {
		background-position: -100% 0;
	}
}

.row{
	margin: 0;
}

@media(max-width: 820px){

	.service-yt_fv img{
		max-width: 100%;
	}
	.service-yt_fv h1{
		font-size: 2.4rem;
	}

	.sec1-h1::before, .sec2-h1::before, .sec3-h1::before{
		border-width: 60px 60px 0 60px;
	}

	.sec1-yt_merit ul li:not(:last-child){
		margin-bottom: 20px;
	}

	.basicPlan{
		flex-wrap: wrap;
	}
	
	.basicPlan article{
		margin-bottom: 20px;
	}

	.service-yt_link{
		flex-direction: column;
		align-items: center;
	}

	.link-btn_yt:first-child{
		margin-bottom: 15px;
	}


}

@media(max-width: 480px){

	.flexbox{
		display: flex;
		flex-direction: column;
	}

	.bgLRextend::before{
		left: -90%;
		width: 180%;
	  }

	.service-yt_fv h1{
		font-size: 1.8rem;
	}

	.sec1-h1, .sec2-h1, .sec3-h1{
		padding: 30px 20px;
		font-size: 1.5rem;
	}
	
	.sec1-h1::before, .sec2-h1::before, .sec3-h1::before{
		border-width: 40px 40px 0 40px;
	  }

	  .img-wrapper img{
		width: 100%;
	}	

	.sec1-yt_left{
		width: 100%;
		margin-bottom: 0px;
	}

	.sec1-yt_right{
		width: 100%;
	}

	.sec2 p{
		padding-top: 15px;
	}

	.basicPlan article{
		margin: 20px;
	}


	.link-btn_yt{
		padding: 1rem 1.5rem;
		font-size: 1rem;
	}


	.service-yt-section:last-child {
		padding-bottom: 0px;
	}

	.lol-slider{
		background-image: url(../images/lol-slider2.png);
    	height: 78vw;
    	width: 250vw;
	}
	
}