@charset "utf-8";

/*
common_sp.css
@ Hokkaido-Chizu Co.,Ltd. All rights reserved.
version 1.0.7
date 2023.05.25
*/

@media screen and (max-width: 767px) {

	/* Header
	-----------------------------------------------*/
 #header{
  min-width: auto;
	 background-color: rgba(255,255,255,1.0);
 }
 #header .head_inner{
  width: 95%;
 }
 #header .head_inner h1{
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
 }
 .head_tel{
 	width:135px;
  margin:14px 0 0 0;
 }

	/* for top sp
	--------------------------------------*/
	.home_main_visual, .main_visual {padding-top: 30px;}
	.page_head img {width: 150%;}
	.info_container {margin-top: 0px; padding: 20px;}
	.home_head_info{width: 100%; position: inherit; -webkit-transform: none; transform: none;}
	.slide_container{display:none;}
	.home_project_item {-webkit-box-flex: inherit;-ms-flex: inherit;flex: inherit; width:100%;}

	#home_info_faq .section_inner {display: block;}
	#home_info_faq .section_inner .home_information{padding-right: 0px; width: 100%;}
	#home_info_faq .section_inner > div {-webkit-box-flex: inherit;-ms-flex: inherit;flex: inherit;}

	#home_info_faq .section_inner .home_information ul time,
	#home_info_faq .section_inner .home_information ul p.cate.info{
		display: inline-block;
		vertical-align: middle;
	}
	#home_info_faq .section_inner .home_information ul p.cate{
		padding: 0.5em 1em;
		margin-left: 1em;
	}

	#home_info_faq .section_inner .home_information ul a{
		display: block;
		width: 100%;
	}

	#home_info_faq .section_inner .home_information ul p.ttl{
		margin: 0.5em 0;
	}
	#home_info_faq .section_inner .home_faq {
		padding: 40px 0;
		margin: 40px auto 0;
		border-top: 1px solid #b2b2b2;
		border-left: none;
	}
	#home_recommend ul,
	#home_hcc_lab ul{
		display: block;
		width: 100%;
	}
	#home_recommend ul > li,
	#home_hcc_lab ul > li{
		-webkit-box-flex: 0;
		-ms-flex: none;
		flex: none;
		display: block;
		width: 100%;
		max-width: none;
		margin: 0 auto 20px;
	}

	/* Main
	-----------------------------------------------*/
 #main{
  min-width: auto;
 }
	.page_head{
		overflow: hidden;
	}
 .page_head .page_title{
  width: 95%;
 }
 .page_head .page_title .head_icon{
  width: 30px;
  height: 30px;
 }
 .page_head .page_title h2{
  font-size: 1.8rem;
 }
 .local_nav ul{
  width: 95%;
		overflow: auto;
		white-space: nowrap;
 }
 .local_nav li{
  margin-left: 15px;
 }
 .local_nav li a::after{
  width: 6px;
  height: 6px;
 }
 .local_nav li span.pc{
  display: none;
 }
 .section_head .section_title {
  width: 95%;
  padding: 15px 15px 14px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
 }
 .section_head .section_title p{
  font-size: 1.7rem;
 }

 .section_inner{
  padding: 25px 0 0;
		min-height: auto;
 }
 .section_inner h4{
  font-size: 2.4rem;
  margin-bottom: 20px;
 }
 ul.function_list{
  width: 95%;
  margin: 0 auto;
 }
 ul.function_list li{
  margin-bottom: 40px;
 }
 ul.function_list li p.function {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  padding: 14px 8px;
  margin: 0 auto 30px;
  font-size: 1.6rem;
  border: 2px solid #3a9a97;
 }
 ul.function_list li p.function::after{
  width: 10px;
  height: 10px;
  border: 2px solid #3a9a97;
  border-width: 2px 2px 0 0;
  right: auto;
  left: 50%;
  top: auto;
  bottom: -20px;
  -webkit-transform: translate(-50%, 0) rotate(135deg);
  transform: translate(-50%, 0) rotate(135deg);
 }
 ul.function_list li p.function:hover,
 ul.function_list li p.function.active{
  color: #3a9a97;
  background-color: #fff;
 }
 .outline .alpha_box {
  display: block;
  vertical-align: top;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding: 0;
  position: relative;
  right: inherit;
  top: inherit;
 }
 .outline .alpha_box div.function_note{
  width: 100%;
  font-size: 1.6rem;
 }
 .outline .alpha_box div.function_note p{
  line-height: 1.5;
 }
 .product_info{
  padding-bottom: 20px;
 }
 .product_info .product_img {
  display: block;
  vertical-align: middle;
  width: 48%;
  margin: 0 auto 20px;
 }
 .product_info ul.info_list{
  display: block;
  width: 95%;
  margin: 0 auto;
 }
 .product_info ul.info_list li{
  list-style-position: inside;
  font-size: 1.4rem;
  line-height: 1.4;
  margin: 0 0 0.3em 0.5em;
 }
 .sample_img{
  width: 95%;
 }
 .sample_img > p{
  font-size: 1.3rem;
 }
 .youtube_container{
  margin: 25px auto 0;
 }
 .youtube_container .section_inner{
  padding-bottom: 20px;
 }
 .youtube_container h4{
  line-height: 1.2;
  margin-bottom: 10px;
 }
 .youtube_container .mov_box{
  width: 65%;
 }
 .youtube_container .mov_box > p{
  font-size: 1.0rem;
 }
 .youtube_container .mov_box.portrait{
  width: 100%;
 }
 .youtube_container .mov_box.portrait .youtube{
   padding-top: 160%;
 }


 .scene ul.scene_list{
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 90%;
  margin: 0 auto;
 }
 .column_double{
   display: block;
 }
 .scene ul.scene_list li{
  -webkit-box-flex: 0;
  -ms-flex: 0 0 48%;
  flex: 0 0 48%;
  margin: 0 0 20px;
 }
 .scene ul.scene_list li,
 .scene ul.scene_list li h5{
  font-size: 1.2rem;
 }

	div#sys03.scene ul.scene_list{
		width: 100%;
		margin: 0 auto 20px;
	}


 .section_inner.flow ol, .section_inner.flow ol.flow05{
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 80%;
  margin: 0 auto;
 }
 .section_inner.flow ol > li, .section_inner.flow ol.flow05 > li{
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  margin-bottom: 40px;
  position: relative;
 }
 .section_inner.flow ol > li::after, .section_inner.flow ol.flow05 > li::after{
  content: "";
  width: 10px;
  height: 10px;
  margin: 0 auto;
  border: 2px solid #0387e7;

  border-width: 2px 2px 0 0;
  position: absolute;
  top: inherit;
  bottom: -15px;
  left: 50%;
  -webkit-transform: translate(-50%, 0) rotate(135deg);
  transform: translate(-50%, 0) rotate(135deg);
 }
 .section_inner.flow ol > li:last-child::after, .section_inner.flow ol.flow05 > li:last-child::after{
  content: none;
 }

 .section_inner.flow ol h5, .section_inner.flow ol.flow05 h5{
  font-size: 1.5rem;
 }
 .section_inner.flow ol h5 span, .section_inner.flow ol.flow05 h5 span{
  font-size: 1.0rem;
 }
 .section_inner.flow ol p, .section_inner.flow ol p{
  font-size: 1.3rem;
  width: 100%;
 }
 .section_inner.flow ol p.icon, .section_inner.flow ol.flow05 p.icon{
  width: 80px;
  height: 80px;
 }
 .section_inner.flow ol p.icon img, .section_inner.flow ol.flow05 p.icon img{
  width: 30px;
 }
 .section_inner.flow ol p.icon::after, .section_inner.flow ol.flow05 p.icon::after{
  content: none;
 }
 .section_inner.flow ol li:nth-child(2) p.icon::after{
  right: -30%;
 }

 .section_inner.inquiry h4{
  margin-bottom: 15px;
 }
 .section_inner.inquiry p{
  font-size: 1.2rem;
		text-align: left;
 }
 .section_inner.inquiry .inquiry_btn{
  display: block;
 }
 .section_inner.inquiry .inquiry_btn a{
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  display: block;
  width: 90%;
  margin: 0 auto 20px;
  padding: 12px 0;
  font-size: 1.4rem;
 }
 .section_inner.inquiry .inquiry_btn a::after{
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-width: 2px 2px 0 0;
 }
 .section_inner.inquiry .inquiry_btn a span.icon{
  height: 14px;
 }
 .section_inner.inquiry address{
  font-size: 1.0rem;
  margin: 0 auto 40px;
 }


	/* Sample Download
	----------------------------*/
	.sample_dl{
		display: none;
	}


/* Customize Option
	---------------------------------*/
.flex_box{
	display: block;
	font-size: 1.4rem;
}
.flex_box > div:nth-child(n+2){
	margin: 30px 0 0 0;
}
.flex_box_item_50 {
	width: 100%;
}
.flex_box_item_30 {
	width: 100%;
}
	#db_gis01 .option_inner,
	#db_gis02 .option_inner,
	#db_gis03 .option_inner{
		text-align: left;
		padding: 20px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.option_inner h2{
		color: #fff;
		font-size: 2.4rem;
	}

 .section_inner.option_inner{
  padding: 25px 0;
 }
 .option_inner > p{
  width: 90%;
  font-size: 1.4rem;
  margin: 0 auto 1.5em;
 }
 #option .option_list{
  width: 90%;
 }
 #option .option_list{
  display: block;
 }
 #option .op_contents{
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  display: block;
  margin: 0 auto 20px;
 }
 #option .op_contents h5,
 #option .op_contents ul{
  font-size: 1.4rem;
 }
 #option .op_contents figure img{
  margin: 0.5em auto;
 }

.scene_list .column_double li{
  display: block;
  width: 100%;
  height: auto;
  padding: 20px 0;
}
 .column_double li{
  display: block;
  width: 100%;
  height: auto;
 	padding: 20px 0;
 }

	.hcc_merit,
	.section_head .section_title02{
		width: 95%;
		margin: 0 auto;
	}
	.section_head .section_title02 h3{
		font-size: 2.6rem;
	}
	.section_head .section_title02 p{
		font-size: 1.8rem;
	}
 #map_ai .section_head .section_title h3{
  width: 53%;
 }
 #texture .section_head .section_title h3{
  width: 35%;
 }

	.hcc_merit > p{
		font-size: 2.8rem;
	}
	.product_info ul.info_list{
		margin-bottom: 5%;
	}
	.product_info ul.info_list02{
		width: 90%;
		margin: 0 auto 5%;
		float: none;
	}

	#map_ai .section_contents,
	#texture .section_contents{
		background: none !important;
	}
	#system_system .section_contents,
	#system_foss .section_contents,
	#geo_spatial .section_contents,
	#map_print .section_contents,
	#birds_eye .section_contents,
	#model_reliefmap .section_contents,
	#db_movie .section_contents,
	#system_zao .section_contents,
	#product_geotime .section_contents {background: none;}

	section[id*="cross_"] div.section_contents,
	section[id*="db_gis"] div.section_contents{background: none !important;}



	/* Post
	------------------------------------------------*/
	#post_container .post_title {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		padding: 0 0.5em;
	}
	#post_container .post_title h3,
	#post_container h3.archive_ttl {
		padding: 0;
		font-size: 2.0rem;
	}
	#post_container h3.archive_ttl{
		padding: 0 0.2em;
	}
	.post_inner{
		display: block;
	}
	.post{
		display: block;
		width: 95%;
		margin: 0 auto 40px;
	}
	ul.post_archive li{
		padding: 0 0 20px;
		margin: 20px auto 0;
		border-bottom: 1px dotted #ccc;
	}
	ul.post_archive li:last-child{
		border: none;
	}
	ul.post_archive li > a{
		display: block;
		width: 100%;
		margin: 0 auto;
	}
	ul.post_archive li time,
	ul.post_archive li p.cate{
		display: inline-block;
		vertical-align: middle;
	}
	ul.post_archive li time{
		width: auto;
		margin: 0;
		padding: 0;
	}
	#post_container .post_title p.cate,
	ul.post_archive li p.cate{
		width: auto;
		text-align: right;
		margin: 0 0 0 1em;
		padding: 0.2em 0.5em;
	}
	ul.post_archive li p.text{
		display: block;
		width: 100%;
		margin: 0.5em auto 0;
	}


	/* Side Bar
	------------------------------------------------*/
	#side_bar{
		display: block;
		width: 95%;
		font-size: 1.4rem;
		margin: 0 auto;
		border-top: 1px solid #ccc;
	}
	#side_bar .year-list li{
		display: block;
		width: 100%;
		border-bottom: 1px solid #ccc;
	}
	#side_bar .year-list li a {
		display: block;
		padding: 1em 0 1em 1.4em;
	}
	#side_bar .year-list li a::before{
		margin: 0 0.5em 0 -1em;
	}
	#side_bar div.nav_post{
		border-bottom: 1px solid #000;
	}

	#side_bar div.nav_post:last-of-type{
		border-bottom: 1px solid #ccc;
	}
	#side_bar .nav_post a{
		display: block;
		padding: 10px 0;
	}
	#side_bar .nav_post p.nav_text{
		font-weight: bold;
		text-align: center;
		color: #156bb2;
	}


	/* for /company
	------------------------------------------------*/
	.section_company{
		width: 95%;
		margin: 0 auto 50px;
	}
	.section_company .company_l,
	.section_company .company_r{
		float: none;
		margin: 0 auto;
		width: 100%;
	}
	.section_company .company_l{
		width: 100%;
	}
	.section_company .company_r{
		text-align: center;
	}
	.section_company .company_r img{
		display: block;
		max-width: 100%;
		margin: 0 auto;
	}

	.section_company h3{
		font-size: 2.4rem;
	}
	.section_company p.com_lead{
		font-size: 1.8rem;
	}
	.section_company img{
		max-width: 100%;
	}
	.section_company strong{
		font-weight: bold;
	}
	.section_company table.table01,
	table.table01{
		width: 100%;
		max-width: 1100px;
		margin: 30px auto;
	}

	.section_company table.table01 th,
	.section_company table.table01 td,
	table.table01 th,
	table.table01 td {
		display: block;
		padding: 0.5em 1em;
		border: none;
	}
	.sample_img table.table01 th,
	.sample_img table.table01 td{
		border: none;
	}

	.section_company table.table01 th,
	table.table01 th{
		background: #f0f0f0;
		border-left: 6px solid #aaa;
	}
	.section_company table.table01 td,
	table.table01 td{
		background: transparent;
		margin-bottom: 30px;
	}
	.section_company table.table01 td a,
	table.table01 td a{
		text-decoration: underline;
	}
	.section_company .com_access:last-of-type{
		border: none;
	}

	.section_company .com_access h4{
		font-size: 1.8rem;
		color: #f47a31;
		padding: 0;
	}
	.section_company .com_access h5{
		font-size: 1.8rem;
		padding: 30px 0 10px 0;
		color: #0387e7;
	}
	.section_company .com_access p{
		font-size: 1.6rem;
		padding: 0 0 10px 0;
	}
	.section_company img.access_img{
		width: 100%;
		height: auto;
		margin: 0 auto 10px;
	}





 br.sp{
  display: inherit;
 }

/* business
------------------------------------------------*/
/************** subTitle **************/
.section_inner_business{
	width: 94%;
}

/************** flow **************/
.flow_chart ul {
	flex-flow: column;
}

.flow_chart ul li {
	width: 100%;
	padding: 50px 0;
}

.flow_chart ul li h3 {
	margin-bottom: 30px;
}

.flow_chart ul li:after {
	top: 99.5%;
	position: absolute;
	right: 50%;
	left: 50%;
	margin: 0 auto;
	border-top: 30px solid #ECF1FF;
	border-right: 30px solid transparent;
	border-bottom: 30px solid transparent;
	border-left: 30px solid transparent;
	transform: translate(-50%, 0);
}
	
.flow_chart ul li:nth-child(2n):after {
	border-top: 30px solid #FFF;
	border-left: 30px solid transparent;
}

/************** inquiry **************/
.inquiry_business address {
	max-width:94%;
}
	/* Footer
	-----------------------------------------------*/

 .page_top{
  width: 38px;
  height: 38px;
  border-width: 2px;
  right: 5%;
 }
 .page_top::after{
  width: 12px;
  height: 12px;
  margin: -2px auto 0;
  border-width: 3px 3px 0 0;
  -webkit-transform: rotate(-45deg) translate(40%,-45%);
  transform: rotate(-45deg) translate(40%,-45%);
 }
	#footer #foot_nav{
		width: 95%;
		margin: 0 auto;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	#footer #foot_nav ul{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 48%;
		flex: 0 0 48%;
		margin: 0 0 20px 0;
	}
	#footer #foot_nav > ul > li{
		font-weight: bold;
	}
	#footer #foot_nav ul li ul.sub-menu{
		margin: 0 0 0 10px;
	}
	#footer #foot_nav ul li ul.sub-menu li{
		font-weight: normal;
	}
/* menu
	---------------------------------------- */
	#mega-menu-wrap-main-menu .mega-menu-toggle + #mega-menu-main-menu{
		background: rgba(255, 255, 255, 1.0);
	}
	#mega-menu-wrap-main-menu #mega-menu-main-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item{
		height: 100px;
		overflow: hidden;
	}
	#mega-menu-wrap-main-menu #mega-menu-main-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.widget_nav_menu{
		/*height: 150px;*/
		height: auto;
	}
	#mega-menu-wrap-main-menu #mega-menu-main-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item-nav_menu-3,
	#mega-menu-wrap-main-menu #mega-menu-main-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item-nav_menu-5,
	#mega-menu-wrap-main-menu #mega-menu-main-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item-nav_menu-6,
	#mega-menu-wrap-main-menu #mega-menu-main-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item-nav_menu-7{
		/*height: 100px;*/
		height: auto;
	}
	#mega-menu-wrap-main-menu #mega-menu-main-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item-media_image-10{
		height: auto;
	}

}