@charset "utf-8";

body{
	overflow-x:hidden;
}

.pc{
	display:block;
}
.sp{
	display:none;
}

.pa-top-mv{display:none;}

@media(max-width:767px){
	.pc{
		display:none;
	}
	.sp{
		display:block;
	}
}

.top-mv{
	background:url(https://fullstar.cloudcircus.jp/dcms_media/image/top-mv/bg_top_mv.webp) no-repeat center top -270px;
	background-size:100% auto;
	padding:30px 0;
}

.mv-row{
	display:flex;
	gap:10px;
}

.mv-left{
	width:60%;
	display:flex;
	flex-flow: column;
	gap:15px;
}

.mv-right{
	width:40%;
	position:relative;
}

.mv-movie{
	position:absolute;
	top:0;
	left:-20px;
}

.mv-movie video{
	width:600px;
}

.top-mv .inner{
	max-width:1200px;
	width:94%;
}
.top-mv .inner .mv-left img{
	max-width:442px;
	width:100%;
	margin:0;
}
.top-mv h1{
	font-size:44px;
	font-weight:900;
	line-height:1.2;
	margin:0;
}
.top-mv h2{
	font-size:16px;
	font-weight:bold;
	margin:0;
}
.txt-orange{
	color:#FF6B00;
}
.mv-cta{
	display:flex;
	align-items: flex-end;
	gap:60px;
	margin:5px 0;
}
.mv-cta a.btn-cta-dl{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size:25px;
	font-weight:bold;
	color:#fff;
	background:#FF6B00;
	padding:12px 50px 12px 30px;
	position:relative;
	border-radius:6px;
	box-shadow:0 1px 14px rgba(0,78,0,0.24);
	transition: all 0.2s ease;
}

.top-mv .inner .mv-left .mv-cta a.btn-cta-dl img{
	width:78px;
	height:auto;
	position:absolute;
	top:0;
	right:-40px;
}

.mv-cta a.btn-cta-demo{
	display: flex;
	justify-content: center;
	align-items: center;
	padding:10px 40px 10px 15px;
	font-size:14px;
	font-weight:bold;
	color:#FF6B00;
	background:url(https://fullstar.cloudcircus.jp/dcms_media/image/top-mv/demo-icon.svg) no-repeat center right 10px,#fff;
	border:2px solid #FF6B00;
	border-radius:6px;
	margin-bottom:10px;
	box-shadow:0 1px 14px rgba(0,78,0,0.24);
	transition: all 0.2s ease;
}

.mv-cta a.btn-cta-dl:hover,
.mv-cta a.btn-cta-demo:hover{
	transform:translateY(-4px);
}

.mv-kpi{
	display:flex;
	gap:12px;
	margin:5px 0;
}

.top-mv .inner .mv-left .mv-kpi img{
	margin:0;
	width:195px;
	height:auto;
}
.case{
	margin:35px 0;
}

.case h3{
	font-size:17px;
	font-weight:900;
	text-align:center;
}
.case h3 .txt-green{
	color:#00A500;
	position:relative;
}

.case h3 .txt-green.fullstar:before{
	content:"フルスタ";
	position:absolute;
	top:-10px;
	left:0;
	font-size:10px;
	color:#000;
	letter-spacing:0.8rem;
	text-align:center;
	display:block;
	width:100%;
	padding-left:4px;
}

.case h3 .h3-inner{
	position:relative;
}

.case h3 .h3-inner:before,
.case h3 .h3-inner:after{
	content:"";
	position:absolute;
	top:-2px;
	width:3px;
	height:27px;
	background:#003C00;
}
.case h3 .h3-inner:before{
	left:-15px;
	transform: rotate(-20deg);
}
.case h3 .h3-inner:after{
	right:-15px;
	transform: rotate(20deg);
}

.case .txt-caution{
	font-size:10px;
	font-weight:bold;
	color:#878787;
	text-align:center;
}
.case img.mv-1900{
	width:90px;
	display:inline-block;
	vertical-align:-8px;
	margin:0 5px;
}

.logo-marquee {
    width: 100%;
    overflow: hidden;
    background-color: #fff;
    padding: 10px 0;
    position: relative;
}

.logo-marquee__inner {
    display: flex;
    width: max-content;
    animation: marquee 30s linear infinite;
}

/* 画像を2つ複製して継ぎ目なくループさせる */
.logo-marquee__inner img {
    width: auto;
    height:125px;
    display: block;
    margin-right: 0;
}

/* アニメーション定義 */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@media(min-width:978px) {
    body {
        padding-top: 113px;
    }
}

@media(min-width:1980px) {
	.top-mv{padding-bottom:0;}
}
@media(min-width:1201px) and (max-width:1500px){
	.mv-row{
		gap:20px;
	}
	.top-mv{
		background: url(https://fullstar.cloudcircus.jp/dcms_media/image/top-mv/bg_top_mv.webp) no-repeat center top -120px;
		background-size:100% auto;
	}
	.top-mv h1{
		font-size:3.0vw;
	}
	.top-mv h2{
		font-size:1.3vw;
	}
	.top-mv .inner .mv-left .mv-kpi img{
		width:13vw;
	}
	.mv-movie{
		left:-6vw;
	}
	.mv-movie video{
		width:46vw;
	}
}
@media(min-width:992px) and (max-width:1200px){
	.top-mv{
		background: url(https://fullstar.cloudcircus.jp/dcms_media/image/top-mv/bg_top_mv.webp) no-repeat center top -120px;
		background-size:100% auto;
	}
	.top-mv h1{
		font-size:3.4vw;
	}
	.top-mv h2{
		font-size:1.4vw;
	}
	.top-mv .inner .mv-left .mv-kpi img{
		width:15vw;
	}
	.mv-cta a.btn-cta-dl{font-size:16px;padding: 15px 50px 15px 20px;}
	.top-mv .inner .mv-left .mv-cta a.btn-cta-dl img{top:-6px;}
	.mv-movie{
		left:-3vw;
	}
	.mv-movie video{
		width:46vw;
	}
}
@media(min-width:768px){
	.top-mv,
	.top-mv .inner{
		position:relative;
		z-index:1;
	}
	.case{
		position:relative;
		z-index:0;
	}
	.case:after{
		content:"";
		background: linear-gradient(to top, #fff 85%, transparent);
		/*background:red;*/
		position:absolute;
		top:-50px;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		width:200%;
		height:300px;
		z-index:-1;
	}
	.sp-case{display:none;}
}

@media(min-width:768px) and (max-width:991px){
	.top-mv{
		background: url(https://fullstar.cloudcircus.jp/dcms_media/image/top-mv/bg_top_mv.webp) no-repeat center top -120px;
		background-size:140% auto;
	}
	.top-mv h1{font-size:3.5vw;}
	.top-mv h2{font-size:1.5vw;}
	.top-mv .inner .mv-left img{max-width:400px;}
	.top-mv .inner .mv-left .mv-kpi img{
		width:15vw;
	}
	.mv-cta a.btn-cta-dl{font-size:13px;padding: 15px 50px 15px 20px;}
	.mv-cta a.btn-cta-demo{font-size:13px;margin-bottom:5px;}
	.top-mv .inner .mv-left .mv-cta a.btn-cta-dl img{top:-7px;}
	.mv-movie{left:-20px;}
	.mv-movie video{
		width:400px;
	}
}


@media(max-width:767px){
	.top-mv{
		background:url(https://fullstar.cloudcircus.jp/dcms_media/image/top-mv/bg_top_mv_sp.webp) no-repeat center top -100px;
		background-size:100% auto;
		padding:25px 0 0 0;
		margin-bottom:30px;
	}
	.top-mv .inner .mv-left img.mv-share{
		margin:0 auto;
	}
	.mv-row{
		flex-flow: column;
		gap:12px;
	}
	.mv-share{order:1;}
	.top-mv h1{order:2;}
	.top-mv h2{order:3;}
	.mv-kpi{order:4;}
	.sp-case{order:5;margin-left:-15px;margin-right:-15px;}
	.mv-cta{order:6;}
	.mv-movie{order:7;position:static;}
	.mv-left,
	.mv-right{
		width:100%;
		display:contents;
	}
	.mv-movie video{width:100%;}
	.top-mv h1{font-size:34px;text-align:center;}
	.top-mv h2{text-align:center;}
	.mv-kpi{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		margin-top:5px;
	}
	.top-mv .inner .mv-left .mv-kpi img{
		width:100%;
	}
	.mv-cta{
		flex-flow: column;
		align-items: center;
		gap:20px;
		margin-bottom:15px;
		position:relative;
		z-index:0;
	}
	.mv-cta:after{
		display:none;
		/*content:"";
		background: linear-gradient(to top, #fff 80%, transparent);
		position:absolute;
		top:0;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		width:200%;
		height:400px;
		z-index:-1;*/
	}
	.mv-cta a.btn-cta-dl{
		width:100%;
		font-size:20px;
		padding:15px 50px ;
	}
	.top-mv .inner .mv-left .mv-cta a.btn-cta-dl img{
		right:-17px;
	}
	.mv-cta a.btn-cta-demo{
		font-size:14px;
		width:170px;
		margin:0 auto;
	}
	.logo-marquee__inner {
	    animation: marquee 20s linear infinite;
	}
	.case{
		margin:25px 0;
		background:#fff;
	}
	.case h3{
		display:none;
	}
	.logo-marquee{
		padding:10px 0 ;
	}
	.logo-marquee__inner img{
		height:62px;
	}
	.mv-kpi{margin-bottom:0px;}
	
	.sp-case{
		margin-left:-15px;
		margin-right:-15px;
		position:relative;
		z-index:0;
	}
	.sp-case:before{
		content:"";
		width:100%;
		height:150px;
		background: linear-gradient(0deg,rgba(255, 255, 255, 1) 90%, rgba(255, 255, 255, 0) 100%);
		position:absolute;
		top:-10px;
		left:0;
		z-index:-1;
	}
	.sp-case p{
		font-size:8px;
		color:#878787;
		padding:7px 15px;
	}
	
	.txt-green.fullstar{
		font-size:20px;
	}
	.sp-txt-campany-num{
		font-size:18px;
	}
	.case h3 .txt-green.fullstar:before{
		top:-15px;
	}
	
	.case h3 .h3-inner:before,
	.case h3 .h3-inner:after{
		top:initial;
		bottom:-5px;
		height:70px;
	}
	
	.case h3 .h3-inner:before{
		left:-25px;
		transform: rotate(-25deg);
	}
	.case h3 .h3-inner:after{
		right:-30px;
		transform: rotate(25deg);
	}

	.top_h2_fs40{
		font-size:35px;
	}

}