@charset "utf-8";





.main{
	padding-bottom: 180px;
}



/*-------------------------------
	?X???C?_?[
-------------------------------*/

.mainvisual{
	width: 100%;
	/* padding-right: 30px; */
	padding-bottom: 140px;
	position: relative;
}
.mainvisual .slick-track{
	/* -webkit-animation: slide 400s -300s linear infinite;
	animation: slide 400s -300s linear infinite; */
}

/* 動画 */
.mainvisual .bg{
	height: 70vh;

	@media screen and (max-width: 768px) {
		height: 30vh;
	}

	video {
		height: 100%;
		width: 100%;
		object-fit: cover;
	}
}

.thumbnail {
	width: 100%;
	max-width: 100px;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 1/1;
	display: flex;
	align-items: center;
	justify-content: center;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

}


.mainvisual .slide{
	padding-left: 80px;
}
.mainvisual .slide .bg{
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	border-radius: 20px;
}
.mainvisual .slide .bg{
	-webkit-backface-visibility: hidden;
}
.mainvisual .slick-list{
	padding: 0 0 0 40% !important;
	/* padding: 0 0 0 22% !important; */
}
.mainvisual .slide img{
	opacity: 0;
}
.mainvisual .maincatchcopy{
	position: absolute;
	left: 75px;
	bottom: 0;
}
.mainvisual .catchcopy{
	font-size: 8.0rem;
	font-family: 'Boston Black';
	line-height: 1.2;
	letter-spacing: 2px;
	margin-bottom: 20px;
}
.mainvisual .catchcopy span{
	line-height: 1.2;
	display: block;
}
.mainvisual .catchcopy > span{
	display: flex;
}
.mainvisual .catchcopy .span1{
	position: relative;
}
.mainvisual .catchcopy .span1:before{
	content: "";
	display: block;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: 20px;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	z-index: 1;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00a475+0,00bdff+100 */
	background: #00a475; /* Old browsers */
	background: -moz-linear-gradient(left,  #00a475 0%, #00bdff 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #00a475 0%,#00bdff 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #00a475 0%,#00bdff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a475', endColorstr='#00bdff',GradientType=1 ); /* IE6-9 */
}
.mainvisual .catchcopy .span2{
	position: relative;
	z-index: 2;
}
.mainvisual .subcopy{
	font-size: 1.9rem;
	line-height: 2;
	font-weight: bold;
}
.mainvisual .scroll{
	font-size: 1.0rem;
	padding-bottom: 60px;
	letter-spacing: 1px;
	position: absolute;
	left: 20px;
	bottom: 0;
	font-weight: bold;
	font-family: 'Boston Bold';
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	overflow: hidden;
	cursor: pointer;
}
.mainvisual .scroll:before,
.mainvisual .scroll:after{
	content: "";
	width: 1px;
	height: 50px;
	position: absolute;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	display: block;
	bottom: 0;
}
.mainvisual .scroll:before{
	background: #fff;
	z-index: 2;
	animation: scroll-animation 1.5s ease-out infinite;
}
.mainvisual .scroll:after{
	background: #000;
	z-index: 1;
}
@keyframes scroll-animation {
	0% {
		bottom: 0;
	}
	100% {
		bottom: -60px;
	}
}
@-webkit-keyframes slide {
  0% {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@keyframes slide {
  0% {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}



/*-------------------------------
	MESSAGE
-------------------------------*/

.sec1{
	margin: 100px 0;
	padding-bottom: 80px;
	position: relative;
}
.sec1:after{
	content: "";
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	/* width: 75%; */
	width: calc(50% + 320px);
	height: calc(100% - 80px);
	z-index: -1;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00a475+0,00bdff+100 */
	background: #00a475; /* Old browsers */
	background: -moz-linear-gradient(left,  #00a475 0%, #00bdff 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #00a475 0%,#00bdff 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #00a475 0%,#00bdff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a475', endColorstr='#00bdff',GradientType=1 ); /* IE6-9 */
}
.sec1 .detail{
	padding-top: 50px;
}
.sec1 .detail .cont .subtitle span{
	padding: 2px 0 5px 5px;
	line-height: 1;
	background: #fff;
	font-weight: bold;
	display: inline-block;
}
.sec1 .detail .cont .subtitle span:not(:last-child){
	margin-bottom: 15px;
}
.sec1 .detail .cont .txt{
	margin-bottom: 40px;
}



/*-------------------------------
	SERVICE
-------------------------------*/

.sec2 .sectitle{
	margin-bottom: 10px;
	text-align: center;
}
.sec2 .first_message{
	margin-bottom: 60px;
	text-align: center;
}
.sec2 .service:not(:last-child){
	margin-bottom: 120px;
}
.sec2 .detail .no{
	font-size: 7.0rem;
	margin-bottom: 30px;
	line-height: 1;
	font-family: 'Boston Black';
	background: linear-gradient( to right, #00a475 0%,#00bdff 100% );
	-webkit-background-clip: text;
	color: transparent;
	display: inline-block;
}
.sec2 .detail .cont .txt{
	margin-bottom: 45px;
}
@media all and (-ms-high-contrast: none){
	.sec2 .detail .no{
		background: #fff;
		color: #00a475;
	}
}





/*-------------------------------
	1400px
-------------------------------*/
@media screen and (max-width:1400px) , print{

	.mainvisual .slick-list{
		padding: 0 0 0 15% !important;
		/* padding: 0 0 0 22% !important; */
	}

}



/*-------------------------------
	SP??p
-------------------------------*/
@media screen and (max-width:768px) , print{

	.main{
		padding-bottom: 15vw;
	}



	/*-------------------------------
		?X???C?_?[
	-------------------------------*/

	.mainvisual{
		width: 100%;
		/* height: 100vh; */
		/* height: calc(100vh - 25vw); */
		padding-right: 0;
		padding-bottom: 0;
	}
	.mainvisual .slide_wrap{
		/* padding-left: 3.5%;
		padding-right: 3.5%; */
		padding-left: 0;
		padding-right: 0;
	}
	.mainvisual .slide{
		padding-left: 1.75vw;
		padding-right: 1.75vw;
	}
	.mainvisual .slick-list{
		padding: 0 !important;
	}
	.mainvisual .maincatchcopy{
		left: 3.5%;
		/* top: 52.5vw; */
		top: 40vh;
		bottom: unset;
	}
	.mainvisual .catchcopy{
		font-size: 4.5rem;
		line-height: 1;
		margin-bottom: 5vw;
	}
	.mainvisual .catchcopy span{
		line-height: 1;
	}
	.mainvisual .catchcopy .span1:before{
		width: 6vw;
		height: 6vw;
		top: 3.5vw;
	}
	.mainvisual .subcopy{
		font-size: 1.65rem;
		margin-bottom: 13.5vw;
		line-height: 1.8;
	}
	.mainvisual .scroll{
		padding-bottom: 15vw;
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
		-ms-writing-mode: horizontal-tb;
		writing-mode: horizontal-tb;
		text-align: center;
	}
	.mainvisual .scroll:before,
	.mainvisual .scroll:after{
		height: 12.5vw;
	}
	.mainvisual .scroll:before{
		animation: scroll-animation-sp 1.5s ease-out infinite;
	}
	@keyframes scroll-animation-sp {
		0% {
			bottom: 0;
		}
		100% {
			bottom: -12.5vw;
		}
	}



	/*-------------------------------
		MESSAGE
	-------------------------------*/

	.sec1{
		margin: 15vw 0 0;
		padding-bottom: 15vw;
	}
	.sec1:after{
		width: 100%;
		height: calc(100% - 27.5vw);
	}
	.sec1 .detail{
		padding-top: 10vw;
	}
	.sec1 .detail .cont .subtitle span{
		padding: 1.5vw;
	}
	.sec1 .detail .cont .subtitle span:not(:last-child){
		margin-bottom: 3.5vw;
	}
	.sec1 .detail .cont .txt{
		margin-bottom: 10vw;
		font-size: 1.3rem;
	}



	/*-------------------------------
		SERVICE
	-------------------------------*/

	.sec2 .sectitle{
		margin-bottom: 2.5vw;
	}
	.sec2 .first_message{
		margin-bottom: 12.5vw;
	}
	.sec2 .service:not(:last-child){
		margin-bottom: 20vw;
	}
	.sec2 .detail{
		margin-top: -8.5vw;
	}
	.sec2 .detail .no{
		font-size: 6.0rem;
		margin-bottom: 3.5vw;
	}
	.sec2 .detail .cont .txt{
		margin-bottom: 8vw;
		font-size: 1.2rem;
	}