@charset "UTF-8";


.service-web{
	position: relative;
}

.service-web_fv{
	overflow: hidden;
}

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

.service-web_fv h1{
	position: absolute;
	font-size: 2.6rem;
	color: #fff;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	text-align: left;
}


/* animation */

.service-web_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{
	  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-web-section{
	margin: 0 auto;
}

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

.sec1-h1, .sec2-h1, .sec3-h1{
	background-color: #0DB9B9;
	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: #0DB9B9  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: #0DB9B9;
	text-align: center;
}

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

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

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

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

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

.sec1-web_right{
	width: 50%;
}

.sec1-web-plan{
	display: flex;
	justify-content: space-between;
	max-width: 900px;
	margin: 60px auto 0;
	align-items: center;
}

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

.sec1-web-plan p{
	text-align: center;
	margin-bottom: 2rem;
	font-size: 1.3rem;
}

.sec1-web-plan ul{
	background: #F8FFFD;
	box-shadow:  10px 10px 60px #d3d9d7,
    	         -10px -10px 60px #ffffff;
	border-radius: 5px;
	padding: 30px 30px 80px;
	text-align: center;
	position: relative;
}

.sec1-web-plan ul:last-child{
	margin-right: 0;
}

.sec1-web-plan ul li{
	text-align: left;
	margin-bottom: 1rem;
}

.sec1-web-plan ul li::before{
	content: '';
	padding-right: 1.8rem;
	padding-bottom: 1rem;
	background-image: url("../images/Icon-check-circle.png");
	background-repeat: no-repeat;
}

.plan-logo_top{
	position: absolute;
	top: -3rem;
	left: -1rem;
	display: inline-block;
}

.PLT1{
	content: url(../images/01.png);
}

.PLT2{
	content: url(../images/02.png);
}

.PLT3{
	content: url(../images/03.png);
}

.PLT4{
	content: url(../images/04.png);
}

.plan-logo_bottom{
	position: absolute;
	right: -6%;
	bottom: 0;
	z-index: 1;
}

.PLB1{
	content: url(../images/web-plan1.png);
}

.PLB2{
	content: url(../images/web-plan2.png);
}

.PLB3{
	content: url(../images/web-plan3.png);
}

.PLB4{
	content: url(../images/web-plan4.png);
}

.arrow-dropright{
	z-index: 1;
}

.sec2{
	background-color: #fff;
}


/*========= くるくる回るテキスト =========*/
.rollAnime{
	font-family: "ab-tombo-bold", sans-serif;
	font-weight: 400;
	font-style: normal;
	display: inline-block;
  }

.rollAnime.roll span {
    transition-property: opacity,transform;
    transform: rotateY(360deg);
    transition: all .8s cubic-bezier(.77,0,.175,1);
    transition-timing-function: cubic-bezier(.77,0,.175,1);
    display: inline-block;
}
  
/* ここまで */
  

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

.sec2-subsc_merit ul{
	display: flex;
	padding-left: 0;
	justify-content: space-around;
}

.sec2-subsc_merit ul li{
	text-align: center;
	border-radius: 50%;
	background: #F8FFFD;
	box-shadow:  20px 20px 60px #d3d9d7,
             -20px -20px 60px #ffffff;
	width: 300px;
	height: 300px;
	display: inline-block;
	position: relative;
}

.sec2-subsc_merit p{
	padding: 0;
	margin: 0;
	color: #0DB9B9;
	position: absolute;
	left: 0;
	transform: translateY(-50%);
	width: 300px;
}

.subsc-merit1_smallTxt, 
.subsc-merit2_smallTxt {
	font-size: 1.8rem;
	top: 35%;
}

.subsc-merit3_smallTxt{
	font-size: 1.8rem;
	top:30%
}

.subsc-merit1_largeTxt{
	font-size: 5rem;
	color: #ECDC6C !important;
	font-family: "futura-pt-condensed", sans-serif;
	font-weight: 800;
	font-style: normal;
	top: 55%;
}

.subsc-merit1_largeTxt > span{
	font-size: 1.2rem;
	color: #0DB9B9;
}

.subsc-merit2_largeTxt,
.subsc-merit3_largeTxt{
	font-size: 2.4rem;
	color: #ECDC6C !important;
	font-weight: 800;
	font-style: normal;
	top: 55%;
	line-height: 1.2em;
}

.sec2-subsc_price{
	background-color: #beefe2;
	max-width: 400px;
	padding: 20px 0;
	margin: 50px auto;
	box-shadow: 10px 10px 10px #819c95;
	position: relative;
}

.subsc-price_coin{
	position: absolute;
	content: url(../images/coin.png);
	display: inline-block;
	top: -40%;
	right: -10%;
	width: 40%;
	transform: rotate(30deg);
}

.sec2-subsc_price p{
	margin: 0;
	text-align: center;
}

.subsc-price_smallTxt{
	font-size: 1.5rem;
	color: #0DB9B9;
}

.subsc-price_largeTxt{
	font-size: 3.5rem;
	color: #ECDC6C !important;
	font-family: "futura-pt-condensed", sans-serif;
	font-weight: 800;
	font-style: normal;
}

.subsc-price_largeTxt > span{
	font-size: 1.2rem;
	color: #0DB9B9;
}

.sec2-basicPlan, .sec2-optionPlan{
	margin-top: 120px;
}

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

.basicPlan ul{
	text-align: center;
	background: #F8FFFD;
    box-shadow: 10px 10px 60px #d3d9d7, -10px -10px 60px #ffffff;
    border-radius: 15px;
    padding: 20px 45px 60px;
}


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

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

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

.basicPlan_item2{
	position: relative;
}

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

.sec2-optionPlan_price{
	background-color: #beefe2;
	max-width: 500px;
	padding: 20px 0;
	margin: 50px auto;
	box-shadow: 10px 10px 10px #819c95;
	position: relative;
}

.option5000{
	position: relative;
}

.option5000::before{
	position: absolute;
	bottom: -10px;
	left: calc(50% - 200px);
	width: 400px;
	height: 5px;
	content: '';
	border-radius: 5px;
	background: #0DB9B9;
}

.optionPlan_coin{
	position: absolute;
	content: url(../images/coin.png);
	display: inline-block;
	top: -17%;
	right: -12%;
	width: 35%;
	transform: rotate(30deg);
}

.sec2-optionPlan_price p{
	text-align: center;
	margin: 0;
}

.optionPlan-list{
	margin: 40px 80px;
	padding-left: 0;
}

.optionPlan-list li{
	line-height: 2rem;
}

.optionPlan-list p{
	text-align: right;
	margin-top: 0.5rem;
}

.optionPlan-list li::before{
	content: '';
	padding-right: 1.8rem;
	padding-bottom: 1rem;
	background-image: url("../images/icon-dot-circle.png");
	background-repeat: no-repeat;
}


.service-yt_link{
	margin-top: 100px;
	text-align: right;
}

/* リンクボタン */
.link-btn_yt{
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  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);
  }

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

.service-web-section:last-child{
	padding-bottom: 50px;
}

.row{
	margin: 0;
}

@media(max-width:933px) {
	.return_arrow{
		display: none;
	}	
}

@media(max-width: 820px){

	.service-web_fv img{
		max-width: 100%;
	}
	.service-web_fv h1{
		font-size: 1.5rem;
		max-width: 500px;
	}

	.sec1-h1, .sec2-h1, .sec3-h1{
		font-size: 1.5rem;
	}

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

	.section-container{
		margin: 70px auto 0;
	}

	.sec2-container{
		overflow: hidden;
	}

	.sec2-subsc_merit ul li{
		width: 240px;
		height: 240px;
	}

	.sec2-subsc_merit p{
		width: 240px;
	}

	.subsc-merit1_largeTxt,
	.subsc-merit2_largeTxt,
	.subsc-merit3_largeTxt{
		top: 60%;
	}

	.basicPlan ul{
		padding: 20px 40px 60px;
	}

}

@media(max-width: 480px){

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

	.service-web_fv h1{
		width: 70%;
		font-size: 1.5rem;
	}

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

	.img-wrapper img{
		margin-bottom: 20px;
	}

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

	.sec1-web_right{
		width: 100%;
	}

	.sec1-web-plan ul{
		padding: 30px 70px 80px;
		margin-bottom: 30px;
	}

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

	.sec2-subsc_merit ul{
		align-items: center;
	}

	.sec2-subsc_merit ul li{
		margin-bottom: 20px;
	}

	.basicPlan_item2{
		margin-bottom: 3rem;
	}

	.basicPlan_note{
		bottom: -10%;
	}

	.subsc-merit3_smallTxt{
		top: 25%;
	}

	.subsc-merit2_largeTxt,
	.subsc-merit3_largeTxt{
		top: 55%;
		line-height: 3.2rem;
	}

	.subsc-price_coin{
		top: -30%;
		right: 0%;
	}

	.sec2-optionPlan{
		margin-top: 80px;
	}

	.optionPlan_coin{
		top: -10%;
	}

	.option5000::before{
		left: calc(50% - 150px);
		width: 300px;
	}

	.fas{
		display: none;
	}
	
}