@charset "UTF-8";

:root {
	--clr-main: #232323;	
	--clr-sub:#004ea2;
	--clr-blue:#004ea2;
	--clr-lightBlue:#dfe2f2;
	--clr-red: #e83928;
	--clr-wh: #fff;
	--clr-gry: #eeefef;
}


/*---------------------------
/*top-Works
---------------------------*/
.move .bg-animation .bg-content {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: calc(100% / 6);
  z-index: 99999;
}
.move .bg-animation .bg-content:nth-child(2) {
  left: 16.666666666666%;
  animation-delay: 0.2s;
}
.move .bg-animation .bg-content:nth-child(3) {
  left: 33.333333333333%;
  animation-delay: 0.3s;
}
.move .bg-animation .bg-content:nth-child(4) {
  left: 49.9999999999999%;
  animation-delay: 0.4s;
}
.move .bg-animation .bg-content:nth-child(5) {
  left: 66.6666666666666%;
  animation-delay: 0.5s;
}
.move .bg-animation .bg-content:nth-child(6) {
  left: 83.33333333333333%;
  animation-delay: 0.6s;
}
.move .bg-animation .bg-content:nth-child(7) {
  left: 60%;
  animation-delay: 0.7s;
}
.move .bg-animation .bg-content:nth-child(8) {
  left: 70%;
  animation-delay: 0.8s;
}
.move .bg-animation .bg-content:nth-child(9) {
  left: 80%;
  animation-delay: 0.9s;
}
.move .bg-animation .bg-content:nth-child(10) {
  left: 90%;
  animation-delay: 1s;
}
.move .bg-animation .bg-content:before {
  background: var(--clr-blue);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*アニメーション*/
.move .bg-animation .bg-content {
  animation-name: bg-anime;
  animation-duration: 0.5s;
  animation-delay: 0.1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes bg-anime {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}





/*---------------------------
/*top-Works
---------------------------*/
.top-Works { position: relative; padding-top: 16px;}

/**/
.top-Works__Body{ 
    padding: 3.2rem;
	background-color: #fff;
	border-radius: 20px;

	.-List { 

		li{
			width: 32%;
			overflow: hidden;

			a{
				display: block;
				transition: 0.2s cubic-bezier(.77,.01,1,.8);

			figure{
				width: 100%;
				aspect-ratio: 16/9;
				overflow: hidden;
			
				img {
				transition: 0.2s cubic-bezier(.77,.01,1,.8);
				width: 100%;
				height: 100%;
				object-fit:cover;}}
		
			h3 { 
				padding: 1.6rem;
				color: #fff;
				text-align: center;
				line-height: 1;
				background-color: #004CA0;} }}} }

.top-Works__Body .-List a:hover { box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.35);}
.top-Works__Body .-List a:hover img { transform:scale(1.05)}



/**/
@media (max-width: 768px) { 
.top-Works__Body{ padding: 1.6rem;border-radius: 14px;
.-List { 
li{width: 100%; margin-bottom: 16px; &:last-child{margin-bottom: 0;}
figure{aspect-ratio: 16/9;
img {}}
h3 { padding: 1.6rem;} }} }
}





/*---------------------------
/*top-Menu
---------------------------*/
.top-Menu { position: relative; }

/**/
.top-Menu__Body{ }


/**/
.top-Menu__List { 

		.-Item{
			width: 49%;
			margin-bottom: 24px;

			.-Ttl{
				padding: 1.6rem 2.4rem 1.6rem 1.6rem;
				border-left: 4px solid var(--clr-red); 
				background-color: #fff;
				position: relative;

				h3 { }

				.-Tag{
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					right:16px;
					width: 90px;

					li{display: inline-block; width: 40px;}} }} 
				
				}


/**/
.top-Menu__Accordion{ 


	.-accordion {background-color: #fff;}

	.-accordion:not([open]) {margin-bottom: 7px;}

	.-accordion summary {
		display: flex;
		justify-content: space-between;
		align-items: center;

		position: relative;
		text-align: center;
		padding: 1rem 2rem;
		background-color: #7289c4;
		color: #fff;
		font-weight: 600;
		cursor: pointer; }

	.-accordion summary::-webkit-details-marker {display: none;}

	.-accordion summary::after {
		transform: translateY(-25%) rotate(45deg);
		width: 7px;
		height: 7px;
		margin-left: 10px;
		border-bottom: 3px solid #fff;
		border-right: 3px solid #fff;
		content: '';
		transition: transform .3s;}

	.-accordion[open] summary::after {transform: rotate(225deg);}

	.-accordion .-Tx  {
		transform: translateY(-10px);
		opacity: 0;
		margin: 0;
		padding: 1.6rem;
		transition: transform .5s, opacity .5s;

			.-TxWrap{
				border: 3px solid #7289c4; 
				padding: 1.6rem;

				figure{
					width: 48%;
						text-align: center;
		
					img{ 
						text-align: center;
						width: 180px;}}

				div{
					width: 48%;

					h4{margin-bottom: 10px;}

					.-TxTag{li{display: inline-block; width: 80px;}}}

					p{
						margin-top: 3px; 
						line-height: 1.2; 
						span{display: inline-block; color:#7289c4;}}
				
				
				}}

	.-accordion[open] .-Tx {transform: none;opacity: 1;}}



/**/
@media (max-width: 768px) { 
.top-Menu__List { 
.-Item{margin-bottom: 16px; width: 100%;
.-Ttl{padding: 1.4rem 2.4rem 1.4rem 1.6rem;
.-Tag{right:8px;width: 70px;
li{display: inline-block; width: 32px;}} }} }

.top-Menu__Accordion{ 
.-accordion .-Tx  {padding: 1rem;
.-TxWrap{border: 2px solid #7289c4; padding: 1rem;
figure{width: 100%;}
div{width: 100%; 
h4{margin-bottom: 10px;}
.-TxTag{li{display: inline-block; width: 64px;}}}
p{margin-top: 10px; line-height: 1.5;}}}
}
}










/*---------------------------
/*top-faq
---------------------------*/
.top-faq { }


/**/
.top-faq__Body{ 
    padding: 3.2rem;
	background-color: #fff;
	border-radius: 20px;}

/**/
.top-faq__List { 

	li {
		margin-bottom: 24px;
		&:last-child{margin-bottom: 0;}


		h3 {

			margin-bottom: 12px;
			span{
				display: inline-block;
				margin-right: 10px;
				background-color:#004CA0; ;
				color: #fff;
				width: 48px;
				height: 48px;
				border-radius: 32px;
				padding: 14px 0 0 0;
				text-align: center; 
			
				line-height: 1; 
				font-weight: 700; 
				letter-spacing: 0.01em; 
				font-feature-settings: "palt"; }

			p{
			display: inline-block;
			color: #004CA0;
			font-weight: 600;

			line-height: 1.5; 
			font-weight: 700; 
			letter-spacing: 0.05em; 
			font-feature-settings: "palt"; }
			}


		.-Tx {
			border-radius: 3px;
			font-weight: 500; 
			padding: 0.8rem 1.4rem;
			line-height: 1.6;
			background-color: #d6d6d6;
		
			b{color: #e83928;}}} }



/**/
@media screen and (max-width: 768px) {
.top-faq__Body{ 
    padding: 1.6rem;
	background-color: #fff;
	border-radius: 10px;}

/**/
.top-faq__List { 
li {
h3 {span{display: block;margin-right: 0px;margin: 0 auto 5px;}}} }
}





/*---------------------------
/*top-Company
---------------------------*/
.top-Company { 


	.top-Company__Body{
		max-width:960px ;
		margin: 0 auto;

	.-companyImg{
		margin-bottom: 16px;
		aspect-ratio: 16/9;
		
		img{ 
			width: 100%;
			height: 100%;
			object-fit: cover; } }
		p{margin-bottom: 16px;}}
}




/**/
@media screen and (max-width: 768px) {

}




/*---------------------------
/*Company
---------------------------*/

.company { }

.company__Body { 
	max-width:600px ;
	margin: 0 auto;

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

		h3{margin-bottom: 16px;color: var(--clr-blue);}	
		p{color: var(--clr-blue);}


	.company__List{
		margin-top: 56px;

		.company__List-Card {
				width: 100%;
				border-bottom: 1px dotted #ddd8c7;
				margin-bottom: 20px;
				padding: 0 0 20px;

				dt {
					color: var(--clr-sub);
					width: 20%;
					line-height: 1.5;}

				dd {
					width: 75%;
					line-height: 1.5;}
			}	} }




/**/
@media screen and (max-width: 768px) {

	.company__List-Card {
		margin-bottom: 10px;
		padding: 0 10px 10px;

		dt {
			width: 100%;
			line-height: 1.5;
		}

		dd {
			width: 100%;
			line-height: 1.5;
		}
	}
}






/*---------------------------
/*price
---------------------------*/

.price__Nav{
	max-width: 960px;
	margin: 0 auto;
	background-color: var(--clr-blue);

		li{
			width: 33.3333333333334%;
			border-right: 1px solid #fff; 
			&:last-child{border-right: 0px solid #fff; }

			a{
			display: block;
			padding: 1.6rem 1rem;
			transition: 0.25s;

			color: #fff;
			text-align: center;
			line-height: 1;}
			}}

.price__Nav a:hover{background-color: #7289c4;}	


/**/


.price { }

.price__Body {
	margin: 0 auto;
	max-width:960px ;}

.price__Card {
	/*margin-top: min(40px,8vw);*/
	margin-bottom: min(32px,8vw);
	
	.-h2ttl{

		h2{
			width: 180px;
			padding: 1rem;
			text-align: center;
			color:#fff;}

		p{
			width: calc(100% - 180px);
			padding: 1rem 2.4rem;
			background-color: #fff;
			}}


	.-Main{

		padding: 2.4rem;
		background-color: #fff;

		.-List{ margin-bottom: 24px;

			li{
				width: 49%;
			
				h3 { 
					padding: 1.6rem;
					color: #fff;
					text-align: center;
					line-height: 1; }

				figure{
					width: 100%;
					aspect-ratio: 16/9;
					overflow: hidden;
				
					img {
					transition: 0.2s cubic-bezier(.77,.01,1,.8);
					width: 100%;
					height: 100%;
					object-fit:cover;}}}}} }



	.price__Body-Tx{
		padding: 1.6rem;

		dl{
			margin-bottom: 8px;
			padding-bottom: 8px;
			border-bottom: 1px solid #fff; 

			dt{
				width: calc(100% - 100px);
			
				div { 
					color: #fff;
					line-height: 1.2;
					margin-bottom: 8px;
					&:last-child{margin-bottom: 0px;}
				
					span{display: inline-block;}}}
				
			dd{
				width: 100px;
			
				span{
					background-color: #fff;
					line-height: 1;
					padding: 0.2rem 0.4rem;
					color: #004CA0;}

				div{color: #fff100; line-height: 1; b{margin-left: 4px;}}}}

				p{color: #fff;}
		}



/**/
@media screen and (max-width: 959px) {
.price__Body {margin: 0 auto;}

.price__Card {
.-h2ttl{
h2{width: 120px;}
p{width: calc(100% - 120px);}}

.-Main{padding: 1.6rem;
.-List{ margin-bottom: 16px;
li{width: 100%;
h3 { padding: 1rem; }
figure{}}}} }

.price__Body-Tx{
dl{
dt{width: 100%;
div { margin-bottom: 8px;
span{display: inline-block;}}}
dd{margin-top: 10px; width: 100%;
span{display: inline-block;}
div{display: inline-block; margin-left: 4px;}}}
p{color: #fff;}}
}




/*---------------------------
/*works
---------------------------*/

.works { }

.works__Body {
	margin: 0 auto;
	max-width:960px ;}

.works__Card {
	margin-top: min(40px,8vw);
	margin-bottom: min(32px,8vw);
	
	.-h2ttl{

		h2{
			width: 60px;
			padding: 1rem;
			text-align: center;
			color:#fff;}

		p{
			width: calc(100% - 60px);
			padding: 1rem 2.4rem;
			background-color: #fff;
			}}


	.-Main{

		padding: 2.4rem;
		background-color: #fff;

		.-List{ margin-bottom: 24px;

			li{
				width: 49%;
			
				h3 { 
					padding: 1.6rem;
					color: #fff;
					text-align: center;
					line-height: 1; }

				figure{
					width: 100%;
					aspect-ratio: 16/9;
					overflow: hidden;
				
					img {
					transition: 0.2s cubic-bezier(.77,.01,1,.8);
					width: 100%;
					height: 100%;
					object-fit:cover;}}}}} }





/**/
@media screen and (max-width: 959px) {
.works__Body {margin: 0 auto;}

.works__Card {
.-h2ttl{
h2{width: 60px;}
p{width: calc(100% - 60px);}}

.-Main{padding: 1.6rem;
.-List{ margin-bottom: 16px;
li{width: 100%;
h3 { padding: 1rem; }
figure{}}}} }

.works__Body-Tx{
dl{
dt{width: 100%;
div { margin-bottom: 8px;
span{display: inline-block;}}}
dd{margin-top: 10px; width: 100%;
span{display: inline-block;}
div{display: inline-block; margin-left: 4px;}}}
p{color: #fff;}}
}

/*top-Drone（ドローン事業バナー）
---------------------------*/
.top-Drone {
	position: relative;
	display: flex;
	align-items: stretch;
	background-color: #fff;
	border-radius: 20px;
	margin-bottom: 3.2rem;

	.-Img {
		width: 50%;
		flex-shrink: 0;
		border-radius: 20px 0 0 20px;
		overflow: hidden;

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

	.-Tx {
		flex: 1;
		padding: 3.2rem 4rem;
		display: flex;
		flex-direction: column;
		justify-content: center;

		h2 { margin-bottom: 1.6rem; }
		p { line-height: 1.9; }
	}

	.-Btn { margin-top: 2.4rem; text-align: center; }

	.-Badge {
		position: absolute;
		top: -1.2rem;
		left: -1.2rem;
		z-index: 3;
		width: 9rem;
		height: 9rem;
		border-radius: 50%;
		background: #fff100;
		color: var(--clr-blue);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		line-height: 1.1;

		.-en { font-family: ftH; font-size: 2.4rem; }
		.-jp { font-size: 1.2rem; font-weight: 700; }
	}
}

/* 詳細ページ公開までボタンは押せない状態にしておく */
.button-Drone {
	display: inline-block;
	min-width: 26rem;
	padding: 1.2rem 2.4rem;
	border-radius: 50px;
	background: var(--clr-blue);
	color: #fff;
	text-align: center;
	font-weight: 700;

	&.is-disabled { cursor: default; pointer-events: none; user-select: none; }
}

@media (max-width: 768px) {

	.top-Drone {
		flex-direction: column;

		.-Img { width: 100%; border-radius: 20px 20px 0 0; }
		.-Tx { padding: 2.4rem; }
	}

	.button-Drone { display: block; min-width: 0; width: 100%; }

}