@charset "UTF-8";
/* CSS Document */
body {
	background-color:#000;
	color: #FFF;
}
#header{
	background-color: rgba(0,0,0,0.7);
}
@media screen and (min-width: 768px) {
.menu > ul > li a {
	color:#FFF;
}
.menu > ul > li {
  border-left:1px solid #FFF;
}
.menu > ul > li:last-child {
  border-right:1px solid #FFF;
}
.menu > ul > li > ul {
	background-color: rgba(255,255,255,0.6);
}
}

#wrap h2{
	border-left:6px solid #0F42B5;
	padding:4px 8px;
	font-size:18px;
	font-weight:bold;
	margin-bottom:16px;
}
#wrap h3{
font-size:20px;
margin-bottom:32px;
color:#FFF;
font-weight:bold;
	position: relative;
}
#wrap h3:after{
content: '';
    display: block;
    width: 8%;
    height: 8px;
    position: absolute;
    left: 0;
    bottom: -24px;
    background: #0F42B5;
}


#wrap h4{
font-size:20px;
margin-bottom:16px;
color:#000;
	padding-left: 1.5em;
font-weight:bold;
	position: relative;
}
#wrap h4::before {
	font-size: .8em;
	position: absolute;
	top: .25em;
	left: .5em;
	margin-right: 8px;
	content: '●';
	color: #0F42B5;
}

#wrap h5{
font-size:18px;
margin-bottom:10px;
font-weight:bold;
}
#wrap h6{
font-size:16px;
margin-bottom:10px;
}
#wrap p{
line-height:2.0em;
}
a {
  color: #FFF;
}

#wrap .fontL{
font-size:20px;
}
#wrap .fontS{
font-size:12px;
}
.note{
font-size:12px;
color:#333;
}
strong{
font-weight:bold;
}
.left{
text-align:left;
}
.right{
text-align:right;
}
.center{
text-align:center;
}
.red{
color:#CC0000;
}
#wrap ul{
margin:0 0 16px 20px;
}
#wrap ul li{
	line-height:1.6em;
	margin-bottom:16px;
	list-style-type: disc;
}
#wrap ol{
margin:0 0 16px 40px;
}
#wrap ol li{
list-style-type: decimal;
line-height:2.0em;
margin-bottom:16px;
}
#wrap dt{
margin-bottom:8px;
}
#wrap dd{
margin-bottom:20px;
padding-left:8px;
}
#wrap table{
width:100%;
}
#wrap table th{
vertical-align:top;
width:20%;
font-weight:bold;
}
#wrap iframe{
	max-width:100%;
}
@media only screen and (min-width: 768px) {
#wrap h2{
	border-left:10px solid #0F42B5;
	padding:2px 12px;
	font-size:20px;
	margin-bottom:32px;
}
#wrap h3{
font-size:32px;
margin-bottom:56px;
}
#wrap h4 {
margin-bottom:20px;
}

#wrap dd{
margin-bottom:30px;
padding-left:14px;
}
#wrap table th{
border-top: 1px solid #595757;
border-bottom: 1px solid #707070;
	font-size: 16px;
padding: 20px 8px;
}
#wrap table td{
border-top: 1px solid #595757;
border-bottom: 1px solid #707070;
	font-size: 16px;
padding: 20px 12px;
}
}
.block{
clear:both;
padding-bottom:20px;
}
.main-inner{
	display: flex;
	flex-flow: column;/* flex-flow:column;はアイテムを縦に並べる */
}

.hidden{
display:none;
}


.Lbox{
float:left;
width:50%;
padding:0 1%;
margin-bottom:20px;
}
.Rbox{
float:right;
width:50%;
padding:0 1%;
margin-bottom:20px;
}
@media only screen and (min-width: 768px) {
.block{
padding-bottom:80px;
}
.main-inner{
	flex-flow: row;/* flex-flow:row;はアイテムを横に並べる */
}
.Lbox{
float:none;
width:100%;
padding:0 1%;
margin-bottom:20px;
}
.Rbox{
float:none;
width:100%;
padding:0 1%;
margin-bottom:20px;
}

}


.floatL,.alignleft,img.alignleft{
	margin:0 auto 30px;
	display: block;
	text-align:center;
}
.floatR,.alignright,img.alignright{
	margin:0 auto 30px;
	display: block;
	text-align:center;
}
.aligncenter{clear: both;display: block;margin:auto;}

.center{
	text-align:center;
}

@media only screen and (min-width: 768px) {
.floatL,.alignleft,img.alignleft{
	float:left;
	margin:0 30px 30px 0;
}
.floatR,.alignright,img.alignright{
	float:right;
	margin:0 30px 0 30px;
}
}



/* drone */
#wrap {
	background:none;
}
.v_drone{
	background-image: linear-gradient(to top, rgba(0, 0, 0, 1.0) 0%, rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0.2) 80%, rgba(0, 0, 0, 1.0) 100%),
	url(../images/drone/bg_main.png),
	url(../images/drone/bg_circle.png);
	background-repeat: no-repeat,
	no-repeat,
    no-repeat;
  background-position: center,
      center center,
	  right center;
}
#visual {
	background-size:cover;
}
#visual .bga{
 height: 100%;
 max-width:1180px;
    display: flex;
    justify-content: left;
    align-items: center;
	padding:140px 20px 80px;
	padding-bottom:;
	margin:0 auto;
}
#visual .bga p{
	font-weight:bold;
	font-size:18px;
}
#visual .bga p.tit{
	margin-bottom:20px;
}

@media only screen and (min-width: 768px) {
#wrap {
  margin: 0 auto;
    padding: 60px 0 60px;
}
#visual { text-align:left; margin:0 auto;padding:0;}
#visual .bga{
	padding-top:240px;
	padding-bottom:320px;
}
#visual .bga p{
	font-size:24px;
}
#visual .bga p.tit{
	margin-bottom:40px;
}
}

p.bt a{
	color:#000;
	font-size:14px;
	font-weight:bold;
	text-align:center;
	border:1px solid #000;
	border-radius:40px;
	padding:10px;
	width:60%;
	margin:10px auto 10px;
	display:block;
position: relative;
}
p.bt a::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
  position: absolute;
    top:42%;
    right: 18px;
    /*矢印の形状*/
    width: 5px;
    height: 5px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    transform: rotate(45deg);
}

@media only screen and (min-width: 768px) {
p.bt a{
	font-size:16px;
	padding:12px;
	width:200px;
	margin:24px 0 16px;
	display:block;
}
p.bt.centerbt a{
	margin:24px auto 16px;
}
}

/*drone*/
#drone .intro{
	padding-bottom:30px;
	background-image: linear-gradient(to top, rgba(0, 0, 0, 1.0) 0%, rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0.2) 80%, rgba(0, 0, 0, 1.0) 100%),
	url(../images/drone/bg_intro.png);
	background-repeat: no-repeat,
    no-repeat;
  background-position: center,
	  center center;
}
#drone .introBox{
	display: flex;
	flex-flow: column;/* flex-flow:column;はアイテムを縦に並べる */
	margin-bottom:30px;
	padding-top:30px;
}
#drone .introBox div.introLBox {
	text-align:center;
	margin-bottom:20px;
	background: radial-gradient(ellipse at center, rgba(15,66,181,0.7) 0%,rgba(15,66,181,0.7) 18%,rgb(0, 0, 0,0) 70%);
	mix-blend-mode: screen;
}
#drone .introBox div.introRBox {
	padding:10px;
	margin-bottom:20px;
	background-color:rgba(255,255,255,0.7);
	color:#000;
}
#wrap .introBox h2{
	color:#000;
}
#wrap #drone .introBox p.copy{
	font-size:18px;
	font-weight:bold;
	margin-bottom:20px;
}

@media only screen and (min-width: 768px) {
#drone .intro{
	padding-bottom:60px;
}
#drone .introBox{
	flex-flow: row;/* flex-flow:row;はアイテムを横に並べる */
	margin-bottom:60px;
	padding-top:50px;
}
#drone .introBox div.introLBox {
	flex: 0 0 500px;/* ウィンドウ幅に連動させず、幅340pxで固定 */
	order: 1;/* 回り込みを右へ */
	padding:0;
}
#drone .introBox div.introRBox {
	flex: 1 1 auto;/* ウィンドウ幅に連動して伸縮 */
	order: 2;/* 回り込みを右へ */
	margin-left:80px;
	padding:40px;
}
#wrap #drone .introBox p.copy{
	font-size:28px;
	margin-bottom:32px;
}
}

#drone .contract{
	padding-bottom:30px;
	background-image: linear-gradient(to top, rgba(0, 0, 0, 1.0) 0%, rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0.2) 80%, rgba(0, 0, 0, 1.0) 100%),
	url(../images/drone/bg_contract.png);
	background-repeat: no-repeat,
    no-repeat;
  background-position: center,
	  center center;
}
#drone .contractBox{
	display: flex;
	flex-flow: column;/* flex-flow:column;はアイテムを縦に並べる */
	margin-bottom:30px;
	padding-top:30px;
}
#drone .contractBox div.contractLBox {
	text-align:center;
	margin-bottom:20px;
	background: radial-gradient(ellipse at center, rgba(15,66,181,0.7) 0%,rgba(15,66,181,0.7) 18%,rgb(0, 0, 0,0) 70%);
	mix-blend-mode: screen;
}
#drone .contractBox div.contractRBox {
	padding:10px;
	margin-bottom:20px;
	background-color:rgba(255,255,255,0.7);
	color:#000;
}
#wrap .contractBox h2{
	color:#000;
}
#wrap #drone .contractBox p.copy{
	font-size:18px;
	font-weight:bold;
	margin-bottom:20px;
}

@media only screen and (min-width: 768px) {
#drone .contract{
	padding-bottom:60px;
}
#drone .contractBox{
	flex-flow: row;/* flex-flow:row;はアイテムを横に並べる */
	margin-bottom:60px;
	padding-top:50px;
}
#drone .contractBox div.contractLBox {
	flex: 0 0 500px;/* ウィンドウ幅に連動させず、幅340pxで固定 */
	order: 2;/* 回り込みを右へ */
	padding:0;
}
#drone .contractBox div.contractRBox {
	flex: 1 1 auto;/* ウィンドウ幅に連動して伸縮 */
	order: 1;/* 回り込みを右へ */
	margin-right:80px;
	padding:40px;
}
#wrap #drone .contractBox p.copy{
	font-size:28px;
	margin-bottom:32px;
}
}

#drone .products{
	padding-bottom:30px;
	background-image: linear-gradient(to top, rgba(0, 0, 0, 1.0) 0%, rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0.2) 80%, rgba(0, 0, 0, 1.0) 100%),
	url(../images/drone/bg_products.png);
	background-repeat: no-repeat,
    no-repeat;
  background-position: center,
	  center center;
}
#drone .productsBox{
	display: flex;
	flex-flow: column;/* flex-flow:column;はアイテムを縦に並べる */
	margin-bottom:30px;
	padding-top:30px;
}
#drone .productsBox div.productsLBox {
	text-align:center;
	margin-bottom:20px;
	background: radial-gradient(ellipse at center, rgba(15,66,181,0.7) 0%,rgba(15,66,181,0.7) 18%,rgb(0, 0, 0,0) 70%);
	mix-blend-mode: screen;
}
#drone .productsBox div.productsRBox {
	padding:10px;
	margin-bottom:20px;
	background-color:rgba(255,255,255,0.7);
	color:#000;
}
#wrap .productsBox h2{
	color:#000;
}
#wrap #drone .productsBox p.copy{
	font-size:18px;
	font-weight:bold;
	margin-bottom:20px;
}

@media only screen and (min-width: 768px) {
#drone .products{
	padding-bottom:60px;
}
#drone .productsBox{
	flex-flow: row;/* flex-flow:row;はアイテムを横に並べる */
	margin-bottom:60px;
	padding-top:50px;
}
#drone .productsBox div.productsLBox {
	flex: 0 0 500px;/* ウィンドウ幅に連動させず、幅340pxで固定 */
	order: 1;/* 回り込みを右へ */
	padding:0;
}
#drone .productsBox div.productsRBox {
	flex: 1 1 auto;/* ウィンドウ幅に連動して伸縮 */
	order: 2;/* 回り込みを右へ */
	margin-left:80px;
	padding:40px;
}
#wrap #drone .productsBox p.copy{
	font-size:28px;
	margin-bottom:32px;
}
}

#drone .achievement{
	padding-bottom:30px;
	background-image: linear-gradient(to top, rgba(0, 0, 0, 1.0) 0%, rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0.2) 80%, rgba(0, 0, 0, 1.0) 100%),
	url(../images/drone/bg_achiev.png);
	background-repeat: no-repeat,
    no-repeat;
  background-position: center,
	  center center;
}
#drone .achievBox{
	display: flex;
	flex-flow: column;/* flex-flow:column;はアイテムを縦に並べる */
	margin-bottom:30px;
	padding-top:30px;
}
#drone .achievBox div.achievLBox {
	text-align:center;
	margin-bottom:20px;
	background: radial-gradient(ellipse at center, rgba(15,66,181,0.7) 0%,rgba(15,66,181,0.7) 18%,rgb(0, 0, 0,0) 70%);
	mix-blend-mode: screen;
}
#drone .achievBox div.achievRBox {
	padding:10px;
	margin-bottom:20px;
	background-color:rgba(255,255,255,0.7);
	color:#000;
}
#wrap .achievBox h2{
	color:#000;
}
#wrap #drone .achievBox p.copy{
	font-size:18px;
	font-weight:bold;
	margin-bottom:20px;
}

@media only screen and (min-width: 768px) {
#drone .achievement{
	padding-bottom:60px;
}
#drone .achievBox{
	flex-flow: row;/* flex-flow:row;はアイテムを横に並べる */
	margin-bottom:60px;
	padding-top:50px;
}
#drone .achievBox div.achievLBox {
	flex: 0 0 500px;/* ウィンドウ幅に連動させず、幅340pxで固定 */
	order: 2;/* 回り込みを右へ */
	padding:0;
}
#drone .achievBox div.achievRBox {
	flex: 1 1 auto;/* ウィンドウ幅に連動して伸縮 */
	order: 1;/* 回り込みを右へ */
	margin-right:80px;
	padding:40px;
}
#wrap #drone .achievBox p.copy{
	font-size:28px;
	margin-bottom:32px;
}
}

#drone .movie{
	padding-bottom:30px;
	background-image: linear-gradient(to top, rgba(0, 0, 0, 1.0) 0%, rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0.2) 80%, rgba(0, 0, 0, 1.0) 100%),
	url(../images/drone/bg_movie.png);
	background-repeat: no-repeat,
    no-repeat;
  background-position: center,
	  center center;
}
#drone .movieBox{
	display: flex;
	flex-flow: column;/* flex-flow:column;はアイテムを縦に並べる */
	margin-bottom:30px;
	padding-top:30px;
}
#drone .movieBox div.movieLBox {
	text-align:center;
	margin-bottom:20px;
	background: radial-gradient(ellipse at center, rgba(15,66,181,0.7) 0%,rgba(15,66,181,0.7) 18%,rgb(0, 0, 0,0) 70%);
	mix-blend-mode: screen;
}
#drone .movieBox div.movieRBox {
	padding:10px;
	margin-bottom:20px;
	background-color:rgba(255,255,255,0.7);
	color:#000;
}
#wrap .movieBox h2{
	color:#000;
}
#wrap #drone .movieBox p.copy{
	font-size:18px;
	font-weight:bold;
	margin-bottom:20px;
}

@media only screen and (min-width: 768px) {
#drone .movie{
	padding-bottom:60px;
}
#drone .movieBox{
	flex-flow: row;/* flex-flow:row;はアイテムを横に並べる */
	margin-bottom:60px;
	padding-top:50px;
}
#drone .movieBox div.movieLBox {
	flex: 0 0 500px;/* ウィンドウ幅に連動させず、幅340pxで固定 */
	order: 1;/* 回り込みを右へ */
	padding:0;
}
#drone .movieBox div.movieRBox {
	flex: 1 1 auto;/* ウィンドウ幅に連動して伸縮 */
	order: 2;/* 回り込みを右へ */
	margin-left:80px;
	padding:40px;
}
#wrap #drone .movieBox p.copy{
	font-size:28px;
	margin-bottom:32px;
}
}

#drone .news{
	padding-bottom:30px;
}
#wrap .news h2{
	font-size:20px;
}
.news p.bt a{
	color:#FFF;
	border:1px solid #FFF;
}
.news p.bt a::after{
    border-top: 2px solid #FFF;
    border-right: 2px solid #FFF;
}
.newsBox{
	margin:0 auto 20px;
}
#wrap .newsBox p{
	border-bottom:1px solid #FFF;
	padding:4px;
	margin-bottom:0px;
}
#wrap .newsBox p .date{
	margin-right:8px;
}
#wrap .newsBox p .ic{
	margin-right:8px;
	color:#FFFF46;
}
@media only screen and (min-width: 768px) {
#drone .news{
	padding-bottom:60px;
}
#wrap .news h2{
	font-size:28px;
}
.newsBox{
	margin:0 auto 40px;
	width:800px;
}
#wrap .newsBox p{
	padding:8px;
}
}
@media only screen and (max-width: 767px) {
#wrap .newsBox p a{
	display:block;
}
}

#drone .btList{
	padding-top:30px;
	padding-bottom:30px;
}
#drone .btList ul{
	display: flex;
	flex-wrap: wrap; /* flex-flow:column;はアイテムを縦に並べる */
    justify-content: center;
    align-items: center;
	margin:0 0 40px;
}
#drone .btList ul li{
	width:48%;
	padding:8px;
	margin:0 1%;
	overflow: hidden;
	text-align:center;
	font-size:14px;
	font-weight:bold;
	border:1px solid #FFF;
	border-radius:40px;
	display:block;
position: relative;
}


@media only screen and (min-width: 768px) {
#drone .btlist{
	padding-top:60px;
	padding-bottom:60px;
}
#drone .btList ul li{
	font-size:18px;
}
}