/**************************************

dorone base

**************************************/
#contents-inner {
    padding-top: 0;
}

html {
	scroll-padding-top:100px;
}
#sell_dorone_wrap{

}
.sp_block{
	display: none;
}
.drone_header{
	width: 100%;
	height: 500px;
}
.bg_image{
	background-image: url(img/hero_bg_image.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.bg_blue{
	background: linear-gradient( to right, #0B57A7 0%, #0B57A7 50%, transparent 50%, transparent 100% );
}
.bg_drone{
	background-image: url(img/hero_bg_drone.png);
	background-repeat: no-repeat;
	background-position: center center;
}
.hero_title_wrap{
	display: flex;
	max-width: 1100px;
	padding: 0 20px;
	height: 500px;
	margin: 0 auto;
	align-items: center;
}
.hero_title{
	width: 60%;
	max-width: 600px;
}
.hero_title_font{
	font-size: 60px;
	line-height: 1.2;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 20px;
}
.hero_body{
	font-size: 14px;
	line-height: 1.6;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 20px;
}
.hero_button a{
	width: 175px;
	padding: 10px 10px 10px 10px;
	color: #0B57A7;
	background-color: #DFE9F4;
	display: flex;
	align-items: center;
	font-weight: bold;
	position: relative;
}
.hero_button a::after{
	content: "";
	position: absolute;
	top:50%;
	right: 10px;
	width: 6px;
	height: 6px;
	border-top: #0B57A7 3px solid;
	border-right: #0B57A7 3px solid;
	transform: rotate(45deg);
	margin-top: -4px;
	text-decoration: none;
}

.content_header{
	padding: 40px 0;
}
.section_inner{
	padding: 80px 40px;
	max-width: 1140px;
	margin: 0 auto;
}
.title_large_font{
	font-size: 50px;
	line-height: 1.2;
	font-weight: bold;
	color: #0B57A7;
	margin-bottom: 30px;
}
.title_font{
	font-size: 30px;
	line-height: 1.4;
	font-weight: bold;
	color: #0B57A7;
	margin-bottom: 30px;
	padding-left: 15px;
	border-left: 5px solid #0B57A7;
}
.grid_half {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: 30px;
}
.max_image img{
	max-width: 100%;
}
.full_image img{
	width: 100%;
}
#contents-inner p.em{
	font-size: 130%;
}

.content_news{
	background-color:#F6F8FB ;
}
.news_lists{
	width: 100%;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
}
.news_lists li{
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.news_lists .new .day{
	background: url(/common/img/new.jpg) center right no-repeat;
}
.news_lists .day{
	width: 150px;
	font-size: 115%;
}
.news_lists .news_title{
	width: calc(100% - 160px);
	font-size: 115%;
	line-height: 1.4;
}
.news_lists a,
.news_lists span.block{
	display: block;
	padding: 15px 0 15px;
	display: flex;
	align-items: center;
	text-decoration: none;
	justify-content: space-between;
}
.news_lists a:hover{
	background-color:#EDF5FF ;
	cursor: pointer;
}


.content_future{
	background-color:#EDF5FF ;
}
.grid_3col{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	width: 100%;
	margin-top: 40px;
}
.grid_3col .col{
	background-color: #ffffff;
}
.grid_3col .step_title{
	width: 100%;
	text-align: center;
	color: #ffffff;
	font-size: 20px;
	padding: 15px 0 ;
	background-color: #609EE1
}
.grid_3col .step_title.step2{
	background-color: #084E9A;
}
.grid_3col .step_title.step3{
	
}

.grid_3col p{
	padding: 15px;
}
.content_plan{
	background-color:#EDF5FF ;
}
.content_plan .section_inner{
	padding-top: 0;
}

.tab_wrap{
	background-color: #0B57A7;
	border-radius: 10px;
	padding: 10px;
}
.tab_bt_wrap{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	padding-bottom: 30px;
}
.tab_bt_wrap .bt_box{
	border-radius: 10px;
	border: 3px solid #ffffff;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #F6F8FB;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
}
.tab_bt_wrap .bt_box span{
	color: #6ED8FF;
	font-size: 16px;
	font-weight: bold;
	display: inline-block;
	margin-right: 5px;
}
.tab_bt_wrap .bt_box.active{
	background-color: #ffffff;
	color: #0B57A7;
	position: relative;
}
.tab_bt_wrap .bt_box.active::after{
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -20px;

	width: 0;
	height: 0;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 20px solid #ffffff;
}
.tab_contents_wrap{
	position: relative;
}

.tab_index{
	display: none;
	opacity: 0;
	justify-content: space-between;
	padding: min(10vw, 40px);	
}
.tab_index.active {
	display: flex;
	animation: tabFade 0.5s ease forwards;
}
@keyframes tabFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.tab_index .contents_detail{
	width: 55%;
}
.tab_index figure{
	width: 40%;
}
.number_title{
	display: flex;
	align-items: center;
}
.number_title .number{
	font-size: 50px;
	font-weight: bold;
	color: #6ED8FF;
	padding-right: 8px;
}
.eng_txt{
	width: 100%;
}
.eng_txt span{
	font-size: 18px;
	font-weight: bold;
	color: #6ED8FF;
	display: block;
	line-height: 1.4;
}
.eng_txt span.line{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
}
.eng_txt span.line::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #6ED8FF;
}
.tab_index .plan_title{
	font-size: 30px;
	font-weight: bold;
	color: #ffffff;
	padding: 30px 0;
}
#contents-inner .tab_index p{
	color: #ffffff;
	line-height: 1.6;
}
.plan_3point{
	display: grid;
	grid-template-columns:repeat(3, 1fr);
	gap:10px;
	align-items: stretch;
	margin-top: 30px;
}
.point{
	border: 1px solid #ffffff;
	padding:20px 10px;
}
.point_eng{
	font-size: 14px;
	font-weight: bold;
	color: #6ED8FF;
	margin-bottom: 12px;
}

.content_drone{
	background-color:#EDF5FF ;
}
.content_drone .section_inner{
	padding-top: 0;
}
.drone_frame{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
}
.drone_frame .col{
	background-color: #ffffff;
	border: 1px solid #D0DEED;
	padding: 20px 20px 10px;
}
.drone_frame .col .frame_name{
	font-size: 20px;
	font-weight: bold;
	color: #0B57A7;
	padding: 20px 0 8px;
}

.content_eng .section_inner{
	padding-top: 120px;
}
.eng_point{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}
.eng_point .col{
	background-color: #ffffff;
	border: 1px solid #D0DEED;
}
.eng_point .col .eng_title{
	font-size: 20px;
	font-weight: bold;
	color: #0B57A7;
	padding: 30px 15px 8px;
}
.eng_point .col p{
	padding: 0 15px 10px;
}

.project_lists{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
}
.project_lists .col{
	background-color: #ffffff;
}
.project_lists .col .project_title{
	font-size: 20px;
	font-weight: bold;
	color: #0B57A7;
	background-color: #EDF5FF;
	padding: 20px 10px;
	margin-bottom: 12px;
}
.project_photo_list{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	text-align: center;
}
.project_photo_list .cap{
	padding-top: 10px;
	display: block;
}

.content_project .section_inner{
	padding-top: 0;
	padding-bottom: 0;
}
.contact_box{
	background-color: #0B57A7;
	border-radius: 10px;
	padding: 60px 20px;
}
.contact_box .title_large_font{
	color: #ffffff;
	text-align: center;
	margin-bottom: 15px;
}
#contents-inner .contact_box p{
	color: #ffffff;
	text-align: center;
}
.contact_button a{
	width: 300px;
	height: 60px;
	margin: 0 auto;
	border-radius: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-weight: bold;
	color: #0B57A7;
	background-color: #ffffff;
}

@media (max-width: 980px) {

	.drone_header{
		width: 100%;
		height: 400px;
	}
	.bg_drone{
		background-size: contain;
	}
	.hero_title_wrap{
		height: 400px;
	}
	.hero_title{
		width: 60%;
		max-width: 600px;
	}
	.hero_title_font{
		font-size: 5vw;
		line-height: 1.2;
		font-weight: bold;
		color: #ffffff;
		margin-bottom: 20px;
	}
	.hero_body{
		font-size: 14px;
		line-height: 1.6;
		font-weight: bold;
		color: #ffffff;
		margin-bottom: 20px;
	}
	.title_large_font{
		font-size: clamp(
		22px,
		calc(22px + (50 - 22) * ((100vw - 375px) / (980 - 375))),
		50px
		);
	}
	#contents-inner p.em {
		font-size: 110%;
	}
	.tab_bt_wrap .bt_box {
		height: 40px;
		font-size: 12px;
	}
	.tab_bt_wrap .bt_box span {
		font-size: 12px;
	}
	.tab_index{
		flex-direction: column;
		padding:min(3vw, 40px);
	}
	.tab_index .contents_detail{
		width: 100%;
	}
	.tab_index figure{
		width: 100%;
		margin-top: 30px;
	}
}

@media (max-width: 760px) {
	.sp_block{
		display: block;
	}
	.drone_header {
        height: auto;
    }
	.hero_title_wrap {
		display: flex;
		max-width: 1100px;
		padding: 0px 0 40px;
		height: auto;
		flex-direction: column;
	}
	.hero_title {
        width: 100%;
        max-width: 760px;
		padding: 0;
    }
	.hero_title_font,.hero_body,.hero_button{
		padding:0 20px ;
	}
	.hero_title_font {
        font-size: 7vw;
    }
	.bg_blue{
		background: #0B57A7;
	}
	.bg_drone{
		background-image:none;
	}
	.grid_half {
		grid-template-columns: 1fr;
	}
	.grid_3col{
		grid-template-columns: 1fr;
	}
	.tab_bt_wrap{
		grid-template-columns: repeat(2, 1fr);
	}
	.tab_bt_wrap .bt_box.active::after {
		display: none;
	}
	.drone_frame{
		grid-template-columns: 1fr;
	}
	.eng_point{
		grid-template-columns: 1fr;
		max-width: 400px;
		margin: 0 auto;
	}
	.section_inner {
    	padding: 80px 15px;
	}
	.project_lists{
		grid-template-columns: 1fr;
	}
	.content_header {
		padding: 0;
	}
}

@media (max-width: 600px) {
	.number_title .number {
		font-size: 30px;
	}
	.eng_txt span {
		font-size: 12px;
	}

	.tab_index .plan_title {
		font-size: 22px;
		padding: 15px 0;
	}
	#contents-inner .tab_index p {
		font-size: 14px;
		margin-bottom: 10px;
	}
	.plan_3point {
		gap: 3px;
		margin-top: 15px;
	}
	.point {
		padding: 15px 8px;
	}
	.point_eng {
		font-size: 10px;
	}
	.tab_index{
		flex-direction: column;
		padding:0 min(3vw, 40px) min(3vw, 40px);
	}
    .tab_index figure {
        margin-top: 15px;
    }
	#contents-inner p {
        font-size: 100%;
        line-height: 1.8;
        margin-bottom: 20px;
    }
	.content_eng .section_inner {
		padding-top: 80px;
	}
	.news_lists .day{
		width: 100%;
		margin-bottom: 8px;
}
	.news_lists .news_title{
		width: 100%;
	}
	.news_lists a,
	.news_lists span.block{
		flex-direction: column;
	}
}