@charset "UTF-8";

html {font-size: 62.5%;}
h1, h2, h3, h4, h5, h6, p, a,li, ol, span, small, th, td, dd, dt, b, input, label {
	font-family: "Noto Sans JP", sans-serif;
  font-weight: 100;
	color: #4a4c4e;
	line-height: 1.4em;
	letter-spacing: 0.05em;
}
ul, li{ padding: 0; margin: 0;}
a{ text-decoration: none;}
span{ color: inherit;}
img{ height: auto;}
.showSP{display: none;}
.showSP480{ display: none;}
.show1000{ display: none;}
.footer{ position: relative;}
#page-top { position: fixed; right: 30px; bottom: 30px; z-index: 10; opacity: 0; transform: translateY(100px);}
#page-top a { position: relative; display: block;width: 65px; height: 65px; transition: all 0.3s;}
#page-top a:hover { opacity: .7;}
#page-top.UpMove { animation: UpAnime 0.5s forwards;}
#page-top.DownMove { animation: DownAnime 0.5s forwards;}
@keyframes UpAnime {
  from { opacity: 0; transform: translateY(100px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes DownAnime {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(100px); }
}
.flexBox{ display: flex;}

/*-- header --*/
header{
  display: flex;
  justify-content: space-between;
  max-width: 1300px;
  height: 90px;
  background-color: #fff;
  position: fixed;
  top: 40px;
  left: 0;
  right: 0;
  z-index: 10;
  margin: 0 auto;
  border-radius: 5px;
  padding: 0 3%;  
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.25);
  transition: top .3s ease-in-out;
}
header.fixMenu{ top: 0;}
header h1{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 261px;
  padding-right: 10px;
}
header nav.h_nav{
  width: calc( 100% - 270px);
  max-width: 820px;
}
header nav.h_nav > ul{
  list-style: none;
  height: 100%;
  display: flex;
  justify-content: flex-end;
}
header nav.h_nav > ul > li{
  padding: 0 5px;
  margin: 0 8px;
  position: relative;
}
header nav.h_nav > ul > li > a{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 1.6rem;
  letter-spacing: 0;
  position: relative;
  padding: 0 8px;
}
header nav.h_nav > ul > li::before{
  content: '';
  background-color: #2a5aa0;
  width: 100%;
  height: 5px;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: scaleX(0);
  transition: transform .3s ease-in-out;
}
header nav.h_nav > ul > li:hover::before{ transform: scaleX(1);}
header nav.h_nav > ul li.droplist > a::after{
  content: '';
  display: inline-block;
  background: url(../images/icon_nav.png) no-repeat center;
  background-size: contain;
  width: 13px;
  height: 7px;
  margin-left: 8px;
  transition: transform .3s ease-in-out;
}
header nav.h_nav > ul li.droplist > ul{
  list-style: none;
  display: flex;
  justify-content: space-between;
  flex-flow: wrap;
  align-items: center;
  width: 780px;
  background-color: #fff;
  visibility: hidden;
  opacity: 0;
  transition: all .3s ease-in-out;
  position: absolute;
  top: 105%;
  left: -18vw;
  padding: 20px;
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.35);
  border-radius: 5px;
}
header nav.h_nav > ul li.droplist > ul > li:not(:first-child){
  width: 32%;
  padding: 4px 0;
  border-radius: 10px;
  overflow: hidden;
}
header nav.h_nav > ul li.droplist > ul > li:not(:first-child) a{
  display: block;
  background-color: #2a5ab3;
  color: #fff;
  font-size: 1.8rem;
  padding: 16px;
}
header nav.h_nav > ul li.droplist > ul > li:not(:first-child) a > small{
  display: block;
  color: inherit;
  font-size: 0.6em;
  font-weight: inherit;
  margin-bottom: 8px;
}
header nav.h_nav > ul li.droplist > ul > li.big_cat{
  width: 100%;
  margin-bottom: 8px;
}
header nav.h_nav > ul li.droplist > ul > li.big_cat a{
  color: #2a5aa0;
  font-size: 1.8rem;
  font-weight: bold;
}
header nav.h_nav > ul li.droplist > ul > li.big_cat a::after{
  content: '';
  background: url(../images/icon_arrow.png) no-repeat center;
  background-size: contain;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 8px;
  vertical-align: middle;
  transform: rotateZ(0);
  transition: transform .3s ease-in-out;
}
header nav.h_nav > ul li.droplist > ul > li.big_cat a:hover::after{ transform: translateX(10px);}
.drop_service li:nth-child(2) a{
  background: url(../images/d_service01.jpg) no-repeat;
  background-size: cover;
}
.drop_service li:nth-child(3) a{
  background: url(../images/d_service02.jpg) no-repeat;
  background-size: cover;
}
.drop_service li:nth-child(4) a{
  background: url(../images/d_service03.jpg) no-repeat;
  background-size: cover;
}
.drop_service li > a{ transition: all .3s ease-in-out;}
.drop_service li > a:hover{ opacity: 0.8;}
.drop_service li > a:hover::before{ transform: scale(1.1);}

header nav.h_nav > ul li.droplist:hover a::after{ transform: rotateZ(180deg);}
header nav.h_nav > ul li.droplist:hover > ul{ visibility: visible; opacity: 1; }
header nav.h_nav > ul li.droplist a{ font-size: 1.6rem;}
header nav.h_nav > ul > li.h_btn{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0;
  padding: 0;
}
header nav.h_nav > ul > li.h_btn::before{ display: none;}
header nav.h_nav > ul > li.h_btn > a{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 137px;
  height: 45px;
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  border-radius: 50px;
  padding: 0;
  transition: all .3s ease-in-out;
}
.rec_btn > a{ background-color: #18b097; border: solid 1px #18b097;}
.cv_btn > a{ background-color: #2a5aa0; border: solid 1px #2a5aa0;}

header nav.h_nav > ul > li.rec_btn > a:hover{ background-color: #fff; color: #18b097;}
header nav.h_nav > ul > li.cv_btn > a:hover{ background-color: #fff; color: #2a5aa0;}

.sp_nav_icon{ display: none;}

/*-- footer --*/
footer{
  background-color: #2a5ab3;
  padding: 60px 0;
}
.copyright{
  max-width: 1340px;
  color: #fff;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  text-align: right;
  margin: 0 auto;
  padding: 0 20px;
}
footer .f_inbox{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1340px;
  padding: 0 20px;
  margin: 0 auto;
}
.f_inbox .r_box{ width: 41%; max-width: 400px;}
.f_inbox .l_box{ width: 49%;}
.f_address{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.f_address p{
  color: #fff;
  font-size: 1.6rem;
  letter-spacing: 0;
  padding: 24px 2em 24px 0;
}
.gmap{
  color: #fff;
  font-size: 1.3rem;
  letter-spacing: 0;
  padding: 32px 0 0;
}
.gmap::before{
  content: '';
  background: url(../images/icon_gmap.png) no-repeat center;
  background-size: contain;
  display: inline-block;
  width: 11px;
  height: 16px;
  vertical-align: -3px;
  margin-right: 0.4em;
}
.gmap.c01{ color: #2a5aa0;}
.gmap.c01::before{
  background: url(../images/icon_gmap_blue.png) no-repeat center;
  background-size: contain;
}
.f_nav > ul{
  list-style: none;
  column-count: 2;
}
.f_nav > ul > li{ margin: 8px 0; padding: 0 8px 0 0;}
.f_nav > ul > li:first-child{ margin-top: 0;}
.f_nav > ul > li::before{
  content: '';
  display: inline-block;
  background: url(../images/icon_arrow_hover.png) no-repeat center;
  background-size: 100%;
  width: 20px;
  height: 20px;
  vertical-align: -3px;
  margin-right: 8px;
}
.f_nav li > ul{
  list-style: none;
  border-left: solid 1px #fff;
  margin-left: 10px;
  padding-left: 1em;
}
.f_nav li > ul > li{ margin: 8px 0;}
.f_nav li > ul > li a::before{
  content: '';
  background-color: #fff;
  display: inline-block;
  width: 10px;
  height: 1px;
  margin-right: 8px;
  vertical-align: 5px;
}
.f_nav a{
  color: #fff;
  font-size: 1.6rem;
  letter-spacing: 0;
  line-height: 2em;
}

/*-- fv --*/
.fv{
  width: 100%;
  position: relative;
  overflow: hidden;
}
.fv > h2{ 
  max-width: 1300px;
  position: absolute;
  top: 40vh;
  left: 0;
  right: 0;
  z-index: 2;
  margin: 0 auto;
  color: #fff;
  font-size: 1.9rem;
  letter-spacing: 0;
  padding: 0 16px;
}
.fv .main_txt{
  display: block;
  color: #fff;
  font-size: 8.4rem;
  font-family: "Roboto", sans-serif; 
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings: "wdth" 87.5;
  line-height: 1em;
  margin-bottom: 12px;
}
.fv .fv_infoBox{
  max-width: 1300px;
  position: absolute;
  bottom: 34px;
  left: 0;
  right: 0;
  z-index: 2;
  margin: 0 auto;
}
.fv .fv_infoBox > .inbox{
  background-color: rgba(43, 86, 165, 0.8);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 750px;
  border-radius: 5px;
  margin-left: auto;
  margin-right: 20px;
  padding: 15px 25px 25px;
  position: relative;
}
.fv .fv_infoBox h3{
  color: #fff;
  font-size: 1.8rem;
  font-family: "Roboto", sans-serif; 
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings: "wdth" 87.5;
  margin-bottom: 0.4em;
}
.fv .fv_infoBox a{ color: #fff; margin-top: 13px; transition: opacity .3s ease;}
.fv .fv_infoBox a:hover{ opacity: 0.6;}
.article .date{
  font-size: 1.8rem;
  font-family: "Roboto", sans-serif; 
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings: "wdth" 87.5;
  letter-spacing: 0;
  margin-bottom: 0.4em;
}
.article .cat{
  font-size: 1.4rem;
  font-family: "Urbanist", sans-serif;
  font-weight: bold;
  border: solid 1px #fff;
  padding: 3px 8px;
  margin:  0 2em;
}
.article .title{ font-size: 1.6rem;}
.fv_info_btn{ font-size: 1.4rem;}
.fv_info_btn::after{
  content: '';
  background: url(../images/icon_arrow02.png) no-repeat center;
  background-size: contain;
  display: inline-block;
  width: 23px;
  height: 23px;
  margin-left: 8px;
  vertical-align: middle;
}
.fv .swiper-pagination{
  background-color: rgba(0, 37, 139, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 130px;
  width: auto!important;
  height: 47px;
  border-radius: 30px;
  left: 20px!important;
  bottom: 34px!important;
}
.fv .swiper-pagination-bullet{ background-color: #fff!important; opacity: 1;}
.fv .swiper-pagination-bullet-active{ background-color: #fff!important; border: solid 4px #2a5aa0; width: 12px; height: 12px;}
/*-- top ---*/
p{
  font-size: 1.6rem; 
  letter-spacing: 0;
  line-height: 2.2em;
}
.btn > a{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #2a5ab3;
  width: 200px;
  height: 70px;
  color: #fff;
  font-size: 1.5rem;
  letter-spacing: 0;
  line-height: 2em;
  border: solid 1px #2a5ab3;
  border-radius: 50px;
  padding: 8px 8px 8px 44px;
  transition: all .3s ease-in-out;
  position: relative;
  overflow: hidden;
}
.btn > a > span{
  position: relative;
  z-index: 2;
}
.btn > a.action01::before{
  content: '';
  background-color: #fff;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: -100%;
  border-radius: 50px;
  transition: left .3s ease-in-out;
}
.btn > a.icon_arrow{ position: relative;}
.btn > a.icon_arrow::after{
  content: '';
  background: url(../images/icon_arrow_hover.png) no-repeat center;
  background-size: contain;
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  left: 20px;
  transition: all .3s ease-in-out;
}
.btn > a:hover{
  color: #2a5ab3;
  padding-left: 8px;
  padding-right: 25px;
}
.btn > a.action01:hover::before{ left: 0;}
.btn > a.icon_arrow:hover::after{
  background: url(../images/icon_arrow.png) no-repeat center;
  background-size: contain;
  left: calc(100% - 30px - 16px)
}
.btn.btn_c01 a{
  background-color: #fff;
  color: #2a5ab3;
}
.btn.btn_c01 a.icon_arrow::after{
  background: url(../images/icon_arrow.png) no-repeat center;
  background-size: contain;
}
.btn.btn_c01 a:hover{
  background-color: transparent;
  color: #fff;
  border-color: #fff;
}
.btn.btn_c01 a:hover.icon_arrow::after{
  background: url(../images/icon_arrow_hover.png) no-repeat center;
  background-size: contain;
}
.btn a.icon_mail::before{
  content: '';
  background: url(../images/icon_mail.png) no-repeat center;
  background-size: contain;
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  left: 40px;
  transition: all .3s ease-in-out;
}
.btn a.icon_mail:hover::before{
  background: url(../images/icon_mail_hover.png) no-repeat center;
  background-size: contain;
}

.section_title{
  color: #2a5ab3;
  font-size: 8rem;
  font-family: "Roboto", sans-serif; 
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings: "wdth" 87.5;
  letter-spacing: 0.02em;
  line-height: 1em;
  margin-bottom: 25px;
  padding: 0 20px;
}
.section_title > small{
  display: block;
  color: #2e373d;
  font-size: 1.4rem;
  letter-spacing: 0;
  margin-left: 0.5em;
  margin-bottom: 0.5em;
}
.section_title > small::before{
  content: '';  
  background-color: #2a5ab3;
  display: inline-block;
  width: 30px;
  height: 1px;
  margin-right: 1em;
  vertical-align: middle;
}
.section_title.ja > small{ margin-bottom: 16px;}
.section_title.c01{ color: #fff;}
.section_title.c01 > small{ color: #fff;}
.section_title.c01 > small::before{ background-color: #fff;}
.section_chatch{
  color: #fff;
  font-size: 3rem;
  letter-spacing: 0;
  line-height: 2em;
  margin-bottom: 1em;
}

#t_aboutus{
  max-width: 1340px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 20px;
  margin: 90px auto 90px;
}
#t_aboutus .section_title{ padding: 0;}
#t_aboutus > div{ order: 2; width: 48%;}
#t_aboutus > .about_img_box{ order: 1; width: 48%;}
#t_aboutus .btn{ margin-top: 80px;}
#t_aboutus .btn > a{ margin: 0 auto; width: 230px;}
#t_aboutus .btn > a:hover{ padding-right: 44px; padding-left: 25px;}

#t_service .section_title{ padding: 0;}
#t_service > .intro{
  background: url(../images/top_service_bg.jpg) no-repeat center top;
  background-size: cover;
}
#t_service .inbox{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1340px;
  padding: 50px 20px;
  margin: 0 auto;
}
#t_service .inbox .btn{ margin-top: 48px;}
#t_service .inbox div:first-child{ width: 46%;}
#t_service .inbox .service_img_box{ width: 54%;}

.hover_nav{
  list-style: none;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}
.hover_nav > li{
  width: 33%;
  position: relative;
}
.hover_nav > li > img{ width: 100%;}
.hover_nav .content_title{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  padding: 15px 25px;
  position: absolute;
  bottom: 25px;
  z-index: 1;
  transition: bottom 0.3s ease-in-out;
}
.hover_nav > li:hover .content_title{bottom: 84%;}
.hover_nav .content_title > a > span{
  color: #fff;
  font-size: 4.3rem;
  letter-spacing: 0;
  line-height: 1em;
}
.hover_nav .content_title .num{
  color: #fff;
  font-size: 5.6rem;
  font-family: "Roboto", sans-serif; 
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings: "wdth" 87.5;
  letter-spacing: 0;
  margin-right: 8px;
  line-height: 1em;
  vertical-align: -3px;
}
.hover_nav .content_title small{
  color: #fff;
  font-size: 1.6rem;
  font-family: "Roboto", sans-serif; 
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings: "wdth" 87.5;
  letter-spacing: 0;
  margin-left: 8px;
}
.hover_nav .txt{
  color: #fff;
  font-size: 1.4rem;
  letter-spacing: 0;
  line-height: 2em;
  text-align: center;
}
.hover_nav .hover_content{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  border-radius: 5px;
  padding: 15px 25px;
  overflow: hidden;
  transition: all .3s ease-in-out;
}
.hover_nav .btn a{
  background-color: transparent;
  border-color: #fff;
  width: 215px; height: 60px; margin: 32px auto;
}
.hover_nav .btn a:hover{ color: #fff;}
.hover_nav .btn a::after {width: 28px; height: 28px;}
.hover_nav .btn a:hover::after{
  background: url(../images/icon_arrow_hover.png) no-repeat center;
  background-size: contain;
}
.hover_nav > li:hover .hover_content{
  background: linear-gradient(90deg, rgba(28, 93, 171, 0.5), rgba(29, 82, 163, 0.5));
  top: 0;
}
#t_news{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1340px;
  padding: 120px 20px 130px;
  margin: 0 auto;
}
#t_news .btn{ margin-top: 50px;}
#t_news > div{ width: 350px;}
ul.article_list{ width: calc(100% - 350px);}
.article_list{
  list-style: none;
  border-top: solid 1px #1d2d69;
}
.article_list > li{
  border-bottom: solid 1px #1d2d69;
  padding: 36px;
}
.article_list > li > a{
  display: block;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  padding-right: 56px;
}
.article_list > li > a::after{
  content: '';
  background: url(../images/icon_arrow.png) no-repeat center;
  background-size: contain;
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  transition: all .3s ease-in-out;
}
.article_list .thum{
  background-color: #efefef;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 206px;
  height: 151px;
  overflow: hidden;
  margin-right: 32px;
}
.article_list .thum > img{
  width: 100%;
  transition: all .3s ease-in-out;
}
.article_list .date{
  color: #231815;
  font-family: "Roboto", sans-serif; 
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 2em;
  margin-right: 24px;
}
.article_list .cat{
  min-width: 65px;
  background-color: #4a4c4e;
  color: #fff;
  font-family: "Urbanist", sans-serif;
  font-size: 1.4rem;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 0;
  text-align: center;
  padding: 3px 8px;
}
.article_list a{ transition: opacity .3s ease-in-out;}
.article_list a:hover{ opacity: 0.8;}
.article_list a:hover .thum > img{ transform: scale(1.1);}
.article_list a:hover::after{ right: -10px;}
.cat.info{ background-color: #d62e50!important;}

.pagenate{ text-align: center;}
.pagenate a,
.pagenate span.current{ font-size: 1.4rem; margin: 0 4px;}
.pagenate span.current{ color: #2a5aa0; font-weight: bold; font-size: 1.8rem; text-decoration: underline;}

#t_recruit{
  width: 100%;
  height: 570px;
  overflow: hidden;
  position: relative;
}
#t_recruit > .inbox{
  max-width: 1340px;
  width: 100%;
  padding: 0 20px;
  position: relative;
  margin: 0 auto;
}
#t_recruit .recBox{
  width: 500px;
  background-color: #edf5fc;
  position: absolute;
  z-index: 1;
  right: 0;
  top: 5vw;
  border-radius: 5px;
  padding: 25px 5% 38px
}
#t_recruit .recBox .btn{ margin-top: 35px;}
.scroll-infinity__list--left { animation: infinity-scroll-left 80s infinite linear 0.5s both;}
@keyframes infinity-scroll-left {
  from { transform: translateX(0);}
  to { transform: translateX(-100%); }
}
.scroll-infinity{ height: 100%;}
.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
  height: 100%;
}
.scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}
.scroll-infinity__list--left { animation: infinity-scroll-left 80s infinite linear 0.5s both;}
.scroll-infinity__item { width: 1786px;}
.scroll-infinity__item > img { aspect-ratio: 1786 / 567; height: 100%; max-width: none;}

.commonBox{
  background-image: url(../images/bg.jpg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center bottom;
  animation: parallax linear both;
  animation-timeline: view();
  padding: 110px 0 22vw;
}
@keyframes parallax {
  from { background-position: center 120%; }
  to { background-position: center calc(120% - 20%); }
}
.commonBox .inbox{
  max-width: 1340px;
  display: flex;
  justify-content: space-between;
  flex-flow: wrap;
  padding: 0 20px;
  margin: 0 auto;
}
.commonBox #t_company{
  background: url(../images/company_bg.jpg) no-repeat center;
  background-size: cover;
}
.commonBox #t_works{
  background: url(../images/works_bg.jpg) no-repeat center;
  background-size: cover;
}
.commonBox #t_company,
.commonBox #t_works{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 49%;
  height: 260px;
  padding: 8px 3%;
  border-radius: 5px;
  transition: all .3s ease-in-out;
  position: relative;
}
.commonBox #t_company .section_title,
.commonBox #t_works .section_title{ font-size: 5.6rem;}
.commonBox #t_company::after,
.commonBox #t_works::after{
  content: '';
  background: url(../images/icon_arrow_hover.png) no-repeat center;
  background-size: 100%;
  display: block;
  width: 40px;
  height: 49px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 5%;
  margin: auto 0;
  transition: all .3s ease-in;
}
.commonBox a#t_company:hover,
.commonBox a#t_works:hover{ opacity: 0.6;}
.commonBox #t_company:hover::after,
.commonBox #t_works:hover::after{ transform: translateX(10px);}

.commonBox #t_contact{
  background: url(../images/contact_bg.jpg) no-repeat center;
  background-size: cover;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 320px;  
  border-radius: 5px;
  padding: 8px 8%;
  margin-top: 2%;
  margin-bottom: 150px;
}
.commonBox #t_contact .section_title{ padding: 0;}
.commonBox #t_contact p{
  color: #fff;
  font-size: 1.4rem;
}
#t_contact .btn a{
  width: 420px;
  font-size: 1.5rem;
  text-align: center;
  padding: 8px 15px 8px 40px;
}
#t_contact .tel{ margin: 16px 0 0;}
#t_contact .tel a{
  color: #fff;
  font-family: "Roboto", sans-serif; 
  font-size: 5.9rem;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings: "wdth" 87.5;
  letter-spacing: 0;
  text-align: justify;
  transition: opacity .3s ease-in-out;
}
#t_contact .tel a::before{
  content: '';
  background: url(../images/icon_tel.png) no-repeat center;
  background-size: 100%;
  display: inline-block;
  width: 36px;
  height: 46px;
  vertical-align: -2px;
  margin-right: 8px;
}
#t_contact .tel a:hover{ opacity: 0.6;}
#t_contact .tel > span{
  display: block;
  font-size: 2rem;
  text-align: right;
}
.catchphrase{ text-align: center;}
.catchphrase > b{
  color: #231815;
  font-size: 3.3rem;
  letter-spacing: 0;
  text-align: center;
}
.catchphrase span{
  font-family: "Josefin Sans", sans-serif;
  display: block;
  color: #2a5ab3;
  font-size: 2.4rem;
  font-weight: 400;
  text-align: center;
  margin-top: 28px;
}

/*-- low --*/
.low .section_title{ font-size: 6.3rem; /*line-height: 1.4em;*/}
.low #t_news{ flex-flow: wrap;}
.low #t_news .pagenate{ width: 100%; margin-top: 40px;}
.low #t_news .btn{ margin-top: 0; margin-bottom: 24px;}
.low_fv{
  width: 100%;
  height: 600px;
  position: relative;
  overflow: hidden;  
}
.low_fv .section_title{
  max-width: 1300px;
  color: #fff;
  font-size: 9rem;
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  z-index: 2;
  margin: 0 auto;
}
.low_fv .section_title > small{ color: #fff; font-size: 2rem;}
.low_fv .section_title > small::before{ background-color: #fff;}
.low_fv .pankuzu{
  max-width: 1300px;
  position: absolute;
  bottom: 28px;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 0 20px;
}
.low_fv .pankuzu > ul{
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  min-width: 166px;
  width: fit-content;
  height: 38px;
  border-radius: 50px;
  padding: 8px 16px;
}
.low_fv .pankuzu > ul > li{
  color: #2a5aa0;
  font-size: 1.2rem;
  letter-spacing: 0;
  border-right: solid 1px #000;
  padding-right: 1em;
  margin-right: 1em;
}
.low_fv .pankuzu > ul > li:last-child{
  border: none;
  padding-right: 0;
  margin-right: 0;
}
.low_fv .pankuzu > ul > li a{ color: #000;}
.page_width{ max-width: 1340px; padding: 0 20px; margin: 0 auto;}
.main_txt{
  color: #2a5aa0;
  font-size: 3.2rem;
  letter-spacing: 0;
  line-height: 1.8em;
}

.bg_c01{ background-color: #edf5fc;}

/*-- service --*/
.service .low_fv{
  background: url(../images/service_bg.jpg) no-repeat center;
  background-size: cover;
}
.service .main_txt{ margin-bottom: 1em;}
.service .page_width{ padding: 60px 20px;}
.service .bg_c01{ padding-bottom: 100px;}

.survey_design :not(.low_fv) .section_title,
.phtography_by_air :not(.low_fv) .section_title,
.research :not(.low_fv) .section_title{ padding: 0;}

.survey_design .low_fv{
  background: url(../images/suvery_bg.jpg) no-repeat center;
  background-size: cover;
}
.phtography_by_air .low_fv{
  background: url(../images/phtography_by_air_bg.jpg) no-repeat center;
  background-size: cover;
}
.research .low_fv{
  background: url(../images/research_bg.jpg) no-repeat center;
  background-size: cover;
}
.works .low_fv{
  background: url(../images/workspage_bg.jpg) no-repeat center;
  background-size: cover;
}
.news .low_fv{
  background: url(../images/news_bg.jpg) no-repeat center;
  background-size: cover;
}
.company .low_fv{
  background: url(../images/campany_bg.jpg) no-repeat center;
  background-size: cover;
}
.contact .low_fv{
  background: url(../images/contactpage_bg.jpg) no-repeat center;
  background-size: cover;
}
.common_parts .introBox{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 140px;
  padding-bottom: 120px;
}
.common_parts .introBox > .r_box{ width: 49%; }
.common_parts .introBox > .l_box{ width: 47%; }
.common_parts .introBox .btn{ margin-top: 40px;}
.common_parts .introBox .btn a{ width: 230px; margin: 0 auto;}
.common_parts .introBox .intro_txt{
  color: #000;
  font-size: 2.6rem;
  letter-spacing: 0;
  line-height: 1.8em;
  text-align: justify;
  margin-bottom: 0.8em;
}
.common_parts .bg_c01{ padding: 60px 0;}
.common_parts .mg01{ margin-top: 65px;}
.common_parts .bussinessList{
  list-style: none;
  display: flex;
  justify-content: space-between;
  flex-flow: wrap;
}
.bussinessList > li{ width: 49%; margin-bottom: 40px;}
.bussinessList p{ margin-top: 1.2em;}
.bussinessList .list_title{
  color: #000;
  font-size: 2.6rem;
  letter-spacing: 0;
  margin-bottom: 8px;
}
.bussinessList .list_title > small{
  color: #2a5ab3;
  font-size: 1.6rem;
  font-family: "Roboto", sans-serif; 
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings: "wdth" 87.5;
  letter-spacing: 0.025em;
  padding-right: 1em;
}
.bussinessList div.waku{
  background-color: #fff;
  padding: 8px 16px;
  margin-bottom: 16px;
}
.bussinessList .noImg{ padding-top: 44px;}
.bussinessList div.waku > p{ margin-top: 8px;}

.works .bg_c01{ padding: 120px 0 180px;}
.select_cat{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  max-width: 1340px;
  padding: 24px 5%;
  margin: 0 auto 40px;
  border-radius: 50px;
}
.select_cat p{
  color: #2a5aa0;
  font-size: 2.1rem;
  line-height: 2em;
}
.select_cat ul{
  list-style: none;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 80%;
}
.select_cat ul > li{ margin: 4px;}
.select_cat ul > li a.current,
.select_cat ul > li a:hover{
  background-color: #2a5aa0;
  color: #fff;
}
.select_cat ul > li a{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #edf5fc;
  min-height: 50px;
  min-width: 107px;
  color: #2a5aa0;
  font-size: 1.8rem;
  border: solid 1px #2a5aa0;
  border-radius: 50px;
  transition: all .3s ease-in-out;
}
.table_title{
  color: #2a5aa0;
  font-size: 2.8rem;
  text-align: center;
  letter-spacing: 0;
}
.scroll-area{
  margin: 16px 20px 0;
}
table.works_table{
  width: 100%;
  max-width: 1340px;
  text-align: left;
  margin: 0 auto;
}
.works_table thead{ background-color: #2a5aa0;}
.works_table thead th{
  color: #fff;
  font-size: 1.6rem;
  padding: 8px 2em;
}
.works_table thead th:first-child{ width: 150px;}
.works_table thead th:last-child{ width: 25%;}
.works_table tbody td{
  background-color: #fff;
  font-size: 1.6rem;
  padding: 8px 2em;
}

.drop_nav{ margin-bottom: 16px;}
.drop_nav > span{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  background-color: #2a5ab3;
  width: 200px;
  color: #fff;
  font-size: 1.5rem;
  letter-spacing: 0;
  line-height: 2em;
  border: solid 1px #2a5ab3;
  border-radius: 50px;
  transition: all .3s ease-in-out;
  position: relative;
  padding: 8px 4px;
}
.drop_nav .drop_show_links{
  list-style-position: inside;
  width: 200px;
  background-color: #fff;
  padding: 16px 8px 8px 2em;
}
.drop_nav .drop_show_links > li{
  margin-bottom: 4px;
}
.drop_nav .drop_show_links > li:last-child{ border: none;}
.drop_nav .drop_show_links > li a{
  display: inline-block;
  color: #1d2d69;
  font-weight: 500;
  font-size: 1.4rem;
  padding-bottom: 4px;
}

/*-- company --*/
.company .mg01{ padding: 60px 0 200px;}
.company .mg02{ padding: 56px 0 70px;}
.company .mg03{ padding: 70px 0 48px;}
.company .gmap{ margin-left: 1em;}
.mes_photo{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.mes_photo > div{ max-width: 520px; width: 48%;}
.mes_photo .name{ margin-top: 75px;}
.mes_photo .name > img{ margin-left: auto;}
.mesBox{ max-width: 1140px; padding: 0 20px; margin: 0 auto;}
.mes{
  color: #2a5ab3;
  font-size: 2.8rem;
  line-height: 2em;
  letter-spacing: 0;
  margin: 48px 0 1em;
}
.bg_c02{ background: linear-gradient( 180deg, #edf5fc 70%, transparent 70%);}
.bg_c03{ background-color: #2a5ab3;}
.min-section{
  max-width: 1140px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 20px;
  margin: 0 auto 48px;
}
.min-section .section_title{ font-size: 3rem; padding: 0;}
.min-section .policy{ width: 48%;}
.min-section .motto{ width: 51%;}
.policy p{
  font-family: "Zen Old Mincho", serif;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.8em;
}
.motto p{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 1.2rem;
  letter-spacing: 0em;
  line-height: 1.8em;
}
.motto p b{
  font-family: "Zen Old Mincho", serif;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.8em;
  word-break: keep-all;
  margin-right: 0.6em;
}
.motto p b > span{ color: #2a5ab3; font-family: inherit;}
.companyOverview{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.companyOverview > .l-box{ width: 350px;}
.companyOverview > .r-box{ width: calc(100% - 350px);}
dl.list_t01{
  display: flex;
  justify-content: flex-start;
  flex-flow: wrap;
}
dl.list_t01 > dt{
  width: 19%;
  color: #2a5ab3;
  font-size: 1.6rem;
  border-bottom: solid 1px #2a5ab3;
  margin-right: 4px;
  padding-bottom: 1.6em;
  margin-bottom: 1.6em;
}
dl.list_t01 > dd{
  width: 80%;
  color: #000;
  font-size: 1.6rem;
  line-height: 1.8em;
  border-bottom: solid 1px #9fa9ae;  
  padding-left: 3%;
  padding-bottom: 1.6em;
  margin-bottom: 1.6em;
}
.campany_list p span{
  display: block;
  color: #2a5aa0;
}
.campany_list p{ margin-bottom: 16px;}
ul.licenseList{
  list-style: none;
  column-count: 2;
}
ul.licenseList li{ 
  display: flex;
  justify-content: space-between;
  background-color: #edf5fc;
  color: #000;
  font-size: 1.6rem;
  letter-spacing: 0;
  margin-bottom: 2px;
}
ul.licenseList li > span{
  display: flex;
  align-items: center;
}
ul.licenseList li .num{
  justify-content: center;
  background-color: #2a5ab3;
  width: 66px;
  color: #fff;
  text-align: center;
  padding: 8px;
}
ul.licenseList li .name{  
  width: calc( 100% - 66px);
  padding: 1em;
  justify-content: flex-start;
}
ul.licenseList li .pos{
  padding: 8px;
  justify-content: flex-start;
}
ul.licenseList li .name:has(+.pos){ width: 30%;}
ul.licenseList li .name + .pos{ width: calc( 100% - 30% - 66px);}


/*-- single --*/
.single .page_width{ padding-top: 120px;}
.single div.titleBox{
  padding: 8px 8px 16px;
  margin-bottom: 32px;
  border-bottom: solid 2px #2a5aa0;
}
.single .date{
  color: #231815;
  font-family: "Roboto", sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 2em;
  margin-right: 24px;
}
.single .cat{
  min-width: 65px;
  background-color: #4a4c4e;
  color: #fff;
  font-family: "Urbanist", sans-serif;
  font-size: 1.4rem;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 0;
  text-align: center;
  padding: 3px 8px;
}
.single .title{
  font-size: 2.2rem;
  font-weight: bold;
  margin-top: 8px;
}
.edit-area figure{ margin: 32px 0; text-align: center; }
.edit-area figure > img{ margin: 0 auto;}
.edit-area ul, .edit-area ol{
  font-size: 1.6rem;
  list-style-position: inside;
  margin: 1rem 0;
}
.edit-area a{ text-decoration: underline; color: blue;}
.edit-area h2{
  font-size: 2rem;
  padding: 0.5em;
  font-weight: bold;
  border-bottom: dotted 3px #2a5aa0;
  margin: 64px 0 32px;
}
.edit-area h3{
  font-size: 1.6rem;
  padding: 0 0 0 0.5em;
  font-weight: bold;
  border-left: solid 4px #2a5aa0;
  margin: 64px 0 32px;
}
.edit-area h4,
.edit-area h5{
  font-size: 1.6rem;
  padding: 0.5em;
  font-weight: bold;
  margin: 64px 0 32px;
}
.edit-area blockquote{
  background-color: #ddebff;
  padding: 16px;
  margin: 32px ;
}
.article_links{
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 48px;
  margin-bottom: 32px;
}
.article_links > li{
  margin: 0 8px;
  font-size: 1.6rem;
  color: #1d2d69;
  font-weight: bold;
}
.article_links > li a{
  font-weight: inherit;
  transition: all .3s ease;
}
.article_links > li a:hover{ opacity: 0.6;}

/*-- recruit --*/
.recruit :not(.low_fv) .page_width .section_title,
.recruit .requirements .section_title{ padding: 0;}
.recruit .low_fv{
  background: url(../images/recruit_bg.jpg) no-repeat center;
  background-size: cover;
  height: 1000px;
}
.recruit .low_fv > p.catch{
  max-width: 1340px;
  padding: 0 20px;
  position: absolute;
  top: 60%;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.recruit .low_fv > p.catch > span{
  display: inline-block;
  background-color: #2a5ab3;
  color: #fff;
  font-size: 3.5rem;
  letter-spacing: 0;
  padding: 5px 10px 5px 20px;
  margin-top: 8px;
}
.rec_mesBox{
  background: url(../images/rec_mes_bg.jpg) no-repeat bottom right;
  background-size: contain;
  padding: 88px 0;
}
.rec_mesBox .section_title{ text-align: center; margin-bottom: 56px;}
.rec_mesBox .mes_main_txt{
  color: #000;
  font-family: "Zen Old Mincho", serif;
  font-size: 6rem;
  font-weight: 500;
  letter-spacing: 0;
  text-align: center;
  line-height: 1.8em;
  margin-bottom: 64px;
}
.rec_mesBox .mes_main_txt > small{
  display: block;
  color: #2a5ab3;
  font-family: "Outfit", sans-serif;
  font-weight: 400;
  font-size: 2.8rem;
  letter-spacing: 0;
  line-height: 1em;
}
.rec_mesBox .rec_mes{ width: 50%; }
.rec_mesBox .rec_mes p{
  color: #000;
  text-align: justify;
  line-height: 2.2em;
}
.rec_mesBox .rec_mes p.name{
  font-size: 2.2rem;
  letter-spacing: 0;
  text-align: right;
  margin-top: 1em;
}
.rec_mesBox .rec_mes p.name > img{ margin-left: auto;}
.bg_c03 .section_title{ color: #fff;} 
.bg_c03 .section_title > small{ color: #fff;} 
.bg_c03 .section_title > small::before{ background-color: #fff;}
.what_we_do{ padding: 90px 0 90px; }
.what_we_do .flex{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.what_we_do .flex > .l-box{
  order: 1;
  width: 50%;
}
.what_we_do .flex > .r-box{
  order: 2;
  width: 50%;
}
.what_we_do .flex > .r-box > .inbox{
  width: 80%;
  padding: 0 10%;
}
.what_we_do .flex > .r-box .section_title{ margin-bottom: 54px;}
.what_we_do .flex > .r-box p{ color: #fff; line-height: 2.2em;}
.what_we_do .btn{ margin-top: 64px;}
.what_we_do .btn > a{ margin: 0 auto;}
.work_place{ padding: 138px 0 80px;}
.work_place .section_title{ margin-bottom: 56px;}
.work_place ul.list{
  list-style: none;
  display: flex;
  justify-content: space-between;
  flex-flow: wrap;
  padding: 0 20px;
}
.work_place ul.list > li{
  width: 48%;
  border-top: solid 1px #2a5ab3;
  padding: 20px 16px;
}
.work_place ul.list > li:last-child,
.work_place ul.list > li:nth-last-child(2){ border-bottom: solid 1px #2a5ab3;}
.work_place ul.list p{ font-size: 1.4rem;}
.work_place ul.list p:first-child{ margin-bottom: 8px;}
.work_place ul.list p > b{
  color: #2a5ab3;
  font-size: 1.8rem;
  letter-spacing: 0;
}
.interview{ padding: 68px 0 170px;}
.interview article{ margin-bottom: 100px;}
.interview article:last-child{ margin-bottom: 0;}
.interview .title{
  background-color: #2a5ab3;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 65px;
  color: #fff;
  font-size: 3.8rem;
  font-family: "Roboto", sans-serif; 
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings: "wdth" 87.5;
  text-align: right;
  margin-left: auto;
}
.interview .article_inbox{
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  border: solid 1px #2a5ab3;
}
.interview .article_inbox > .l-box{
  width: 46%;
  position: relative;
}
.interview .article_inbox > .l-box::after{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient( 180deg , transparent 50%,rgba(0, 0, 0, 0.3));
  position: absolute;
  top: 0;
  left: 0;
}
.interview .article_inbox > .r-box{
  width: 53%;
  padding: 18px 24px 0; 
}
.article_inbox .txt{
  position: absolute;
  bottom: 25px;
  left: 25px;
  z-index: 1;
}
.article_inbox .txt > p.fs01{
  color: #fff;
  font-size: 2.6rem;
  letter-spacing: 0;
  line-height: 1.6em;
  margin-bottom: 8px;
}
.article_inbox .txt > p.data{
  color: #fff;
  letter-spacing: 0;
}
.intervew-post h5{
  font-size: 1.7rem;
  letter-spacing: 0;
  margin: 0 0 12px 16px;
}
.intervew-post h5 > span{
  color: #2a5ab3;
  font-size: 2.7rem;
  letter-spacing: 0;
  padding-right: 0.8em;
  vertical-align: middle;
}
.intervew-post p{
  background-color: #ebeff2;
  border-radius: 5px;
  position: relative;
  padding: 1em;
  margin-bottom: 24px;
}
.intervew-post p::after{
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent #ebeff2 transparent transparent;
  border-width: 17.5px 31px 17.5px 0px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -25px;
  margin: auto 0;
}
.commonBox .recruit #t_contact{
  background: url(../images/rec_cvt_bg.jpg) no-repeat center;
  background-size: cover;
}
.recruit #t_contact .btn a{ width: 210px;}
.recruit #t_contact .btn a:hover{ padding-right: 44px; padding-left: 8px;}
.requirements{ padding-top: 56px;}

.contact section{
  background-color: #edf5fc;
  padding: 100px 20px 160px;
}
.contact section > .page_width{
  background-color: #fff;
  border-radius: 5px;
  padding: 70px 68px;
}
.contact_tel_box > div{
  max-width: 915px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto 64px;
}
.contact_tel_box figure{ width: 54%;}
.contact_tel_box figure img{ width: 100%;}
.contact_tel_box p{
  width: 43%;
  font-size: 3rem;
  letter-spacing: 0;
  list-style: 1.2em
}
.contact_tel_box small{
  display: block;
  font-size: 1.6rem;
}
.contact_tel_box a{ transition: all .3s ease-in-out;}
.contact_tel_box a:hover{ opacity: 0.8;}

form{ margin-top: 32px;}
.contact .smf-progress-tracker{
  max-width: 400px;
  margin: 0 auto;
}
.contact .smf-progress-tracker__item{ position: relative;}
.contact .smf-progress-tracker__item__number{  
  background-color: #fff;
  width: 80px;
  height: 80px;
  color: #bbbcbc;
  font-size: 1.5rem;
  font-weight: bold;
  border: solid 4px #bbbcbc;
  padding-bottom: 18px;
}
.contact .smf-progress-tracker__item__number::before{ content: 'STEP';}
.contact .smf-progress-tracker__item__text{
  color: #bbbcbc;
  font-size: 1.3rem;
  position: absolute;
  top: 45%;
  z-index: 1;
}
.contact [data-screen=back] .smf-progress-tracker__item--input .smf-progress-tracker__item__number,
.contact [data-screen=complete] .smf-progress-tracker__item--complete .smf-progress-tracker__item__number,
.contact [data-screen=confirm] .smf-progress-tracker__item--confirm .smf-progress-tracker__item__number,
.contact [data-screen=input] .smf-progress-tracker__item--input .smf-progress-tracker__item__number,
.contact [data-screen=invalid] .smf-progress-tracker__item--input .smf-progress-tracker__item__number{
  background-color: #2a5aa0;
  border-color: #2a5aa0;
  color: #fff;
}
.contact [data-screen=back] .smf-progress-tracker__item--input .smf-progress-tracker__item__text,
.contact [data-screen=complete] .smf-progress-tracker__item--complete .smf-progress-tracker__item__text,
.contact [data-screen=confirm] .smf-progress-tracker__item--confirm .smf-progress-tracker__item__text,
.contact [data-screen=input] .smf-progress-tracker__item--input .smf-progress-tracker__item__text,
.contact [data-screen=invalid] .smf-progress-tracker__item--input .smf-progress-tracker__item__text{
  color: #fff;
  font-weight: normal;
}
.contact .smf-progress-tracker__item:after,
.contact .smf-progress-tracker__item:before{ top: calc( 50% - 1px); }
.contact .smf-form{ margin-top: 48px;}
.contact input[type='text'],
.contact input[type='tel'],
.contact input[type='email'],
.contact .smf-form .smf-textarea-control__control{
  width: 100%;
  font-size: 1.6rem;
  background-color: #f1f1f1;
  border: none;
  padding: 8px;
}
.contact .smf-form .smf-radio-button-control__control{ background-color: #f1f1f1;}
.contact .smf-form .smf-radio-button-control__control:checked{
  background-color: #2a5aa0;
  border-color: #2a5aa0;
}
.contact .smf-item__label__text,
.contact .smf-radio-button-control__label{ font-size: 1.6rem;}
.smf-form--simple-table .smf-item__col--label{ flex: 0 0 25em; max-width: 25em;}
.contact .smf-form--simple-table .smf-item__col--controls{ width: 80%;}
.smf-item label{ margin-right: 1em;}
.smf-form--simple-table .smf-item{ padding: 2em 0;}
.smf-item__label__text::before{
  content: '任意';
  display: inline-block;
  background-color: #b2b8bb;
  width: 60px;
  height: 30px;
  color: #fff;
  font-size: 1.2rem;
  letter-spacing: 0;
  text-align: center;
  padding: 4px;
  border-radius: 25px;
  margin-right: 1em;
}
.req .smf-item__label__text::before{
  content: '必須';
  background-color: #2a5ab3;
}
.smf-action .smf-button-control__control{
  background: #2a5ab3;
  width: 245px;
  height: 68px;
  color: #fff;
  font-size: 1.6rem;
  border: solid 1px #2a5ab3;
  border-radius: 100px;
  position: relative;
  transition: all .3s ease-in-out;
  padding-left: 30px;
}
.smf-action .smf-button-control__control:hover{
  background-color: #fff;
  color: #2a5ab3;
}
.smf-action .smf-button-control__control::after {
  content: '';
  background: url(../images/icon_arrow_hover.png) no-repeat center;
  background-size: contain;
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  margin: auto;
  transition: all .3s ease-in-out;
}
.smf-action .smf-button-control__control:hover::after{
  background: url(../images/icon_arrow.png) no-repeat center;
  background-size: contain;
}
.smf-form--simple-table+.smf-action{ margin-top: 60px;}
.smf-placeholder{ font-size: 1.6rem;}
.smf-complete-content{ text-align: center;}


/*-- tab ---*/
.tab ul.tab01{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 55px;
}
.tab ul.tab01 > li{
	width: 49.5%;
	background-color: #b9d0ec;	
	position: relative;
	padding: 12px 10px;
	transition: all .3s ease-in-out;
}
.tab ul.tab01 > li:hover{ cursor: pointer;}
.tab ul.tab01 > li::after{
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 13px 10px 0 10px;
	border-color: #b9d0ec transparent transparent transparent;
	position: absolute;
	bottom: -13px;
	left: 0;
	right: 0;
	margin: auto;
	transition: all .3s ease-in-out;
}
.tab ul.tab01 > li.active{ background-color: #2a5ab3;}
.tab ul.tab01 > li:hover{ background-color: #2a5ab3;}
.tab ul.tab01 > li.active::after{ border-color: #2a5ab3 transparent transparent transparent;}
.tab ul.tab01 > li:hover::after{ border-color: #2a5ab3 transparent transparent transparent;}
.tab ul.tab01 > li{
	display: block;
	color: #fff;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 3.9rem;
	font-weight: bold;
	letter-spacing: 0.05em;
	line-height: 1.2em;
	text-align: center;
}
.tab .tabbox{ 
	position: relative;
}
.tabbox > div{ display: none;}
.tabbox > div.active{ display: block;}
.tab .tabbox .intab{
	display: flex;
	justify-content: space-around;
	border-bottom: solid 1px #2a5ab3;
	margin-bottom: 35px;
	padding: 0 20px;
	opacity: 0;
	animation: show01 .6s ease-in-out;
}
.tab .tabbox .active .intab{ opacity: 1;}
.tab .tabbox .new_graduate .intab > li{ width: calc(100% / 5 - 0.5%);}
.tab .tabbox .intab > li{
	width: calc(100% / 4 - 0.5%);
	display: flex;
	justify-content: center;
	align-items: center;
	color: #2a5ab3;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.4;
	letter-spacing: 0.05em;
	text-align: center;
	border: solid 1px 2a5ab3;
	border-bottom: none;
	padding: 13px 0;
	transition: all .3s ease-in-out;
}
.tab .tabbox .intab > li:hover{
	cursor: pointer;
	background-color: #2a5ab3;
	color: #fff;
}
.tab .tabbox .intab > li.active{
	color: #fff;
	border: solid 1px #2a5ab3;
	background-color: #2a5ab3;
}
.tab-content{
	opacity: 0;
	display: none;
	animation: show01 .6s ease-in-out forwards;
}
.tab-content.active{	
	opacity: 1;
	display: block;
}
@keyframes show01{
	0%{ opacity: 0;}
	100%{ opacity: 1;}
}
.tab-content > dl{
	display: flex;
	justify-content: flex-start;
	flex-flow: wrap;
}
.tab-content > dl > dt{
	width: 23%;
	background-color: #2a5ab3;
	color: #fff;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.8rem;
	border-bottom: solid 1px #fff;
	border-right: solid 8px #fff;
	padding: 2.6%;
}
.tab-content > dl > dd{
	width: 77%;
	background-color: #ebf1f5;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.8rem;
	border-bottom: solid 1px #fff;
	padding: 2.6%;
}

/*-- animation --*/
main.low { opacity: 0; animation: fadein .3s ease-in-out forwards;}
@keyframes fadein {
  0%{ opacity: 0;}
  100%{ opacity: 1;}
}
.fade {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s ease-in-out;
}
.fade-in {
  opacity: 1;
  transform: translateY(0);
}
.fade .section_title,
ul.fade .content_title{ transform: scale(1);}
.fade-in .section_title,
ul.fade-in .content_title{ animation: blur 1s forwards alternate;}
@keyframes blur{
  from { filter: blur(50px); }
  to { filter: blur(0); }
}

.fade .catchphrase{
  opacity: 0;
  transform: translateY(100px);
  transition: all 0.6s .6s ease-in-out;
}
.fade-in .catchphrase{
  opacity: 1;
  transform: translateY(0);
}
.fade#t_aboutus > .about_img_box{ position: relative;}
.fade#t_aboutus > .about_img_box::after{
  content: '';
  display: block;
  background-color: #2a5ab3;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  position: absolute;
  top: 0;
  left: 0;
  transform: scaleX(1);
  transform-origin: top right;
  transition: all .6s  0.3s ease-in-out;
}
.fade-in#t_aboutus > .about_img_box::after{transform: scaleX(0);}
.fade-main-title .section_title{
  opacity: 0;
  left: 100px;
  transition: all .3s ease-in-out;
}
.fade-main-title.fade-in-s01 .section_title{ opacity: 1; left: 0;}

/*-- op --*/
.op{
  background-color: #2a5ab3;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 99;
}
.op::after{
  content: '';
  background-color: #2a5aa0;
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleY(0);
  position: absolute;
  top: 0;
  left: 0;
}
.op > img{ opacity: 0;}
.op.start > img{
  opacity: 1;
  transition: all 0.3s ease-in-out;
}
.op.start::after{
  transform: scaleY(1);
  transition: all 0.3s 1s ease-in-out;
}
.op.start{ animation: fade .6s 1.6s ease-in-out forwards;}
@keyframes fade {
  0%{ opacity: 1;}
  100%{ opacity: 0;}
}

@media screen and (max-width: 1340px){
  .hover_nav .content_title .num{ font-size: 3vw;}
  .hover_nav .content_title > a > span{ font-size: 2vw;}
  .hover_nav .content_title small{ font-size: 1.2rem;}
  .hover_nav .content_title{ bottom: 0;}

  header{ width: 97%;}
  header nav.h_nav{ width: calc( 100% - 220px);}
  header h1{ width: 220px;}
  header nav.h_nav > ul > li{ padding: 0;}
  header nav.h_nav > ul > li > a{ font-size: 1.4rem;}
  header nav.h_nav > ul li.droplist a{ font-size: 1.4rem;}
  header nav.h_nav > ul > li.h_btn > a{ font-size: 1.4rem; width: 110px;}
}
@media screen and (max-width: 1000px){
  .show1000{ display: block;}
  header nav.h_nav{ width: calc( 100% - 200px);}
  header h1{ width: 200px;}
  header nav.h_nav > ul > li{ padding: 0;}
  header nav.h_nav > ul > li > a{ font-size: 1.2rem;}
  header nav.h_nav > ul li.droplist a{ font-size: 1.2rem;}
  header nav.h_nav > ul > li.h_btn > a{ font-size: 1.2rem; width: 100px;}
}

@media screen and (max-width: 800px){
  .fv .swiper-pagination{ bottom: 16px!important;}
  .noneSP{ display: none;}
  .showSP{ display: block;}
  .show1000{ display: none;}
  .op > img{ width: 80%;}
  p{ font-size: 1.4rem;}
  .section_title{ font-size: 4rem;}
  .section_title > small{ font-size: 1.2rem;}
  .main_txt{ font-size: 2.4rem; word-break: auto-phrase;}
  .low .section_title{ font-size: 3.6rem;}
  .single .cat{ font-size: 1.2rem;}
  .single .title{ font-size: 1.8rem;}
  .edit-area h2{ font-size: 1.8rem;}
  .edit-area ul,
  .edit-area ol{ font-size: 1.4rem;}
  .btn > a{ height: 50px; font-size: 1.4rem; padding-left: 22px;}
  .btn a.icon_mail::before{
    width: 20px;
    height: 20px;
    left: 20px;
    transform: translateY(1px);
  }
  .low_fv{ height: 300px;}
  .low_fv .section_title{ font-size: 5rem; top: 28%}
  .low_fv .section_title > small{ font-size: 1.6rem;}
  .edit-area h3,
  .edit-area h4,
  .edit-area h5{ margin: 48px 0 16px;}
  .low_fv .pankuzu{ bottom: 32px;}

  .hover_nav{
    background-color: #ebf3f9;
    flex-flow: column;
    padding: 16px 20px 8px;
    margin: 0 auto 0;
  }
  .hover_nav > li{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 250px;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 8px;
  }
  .hover_nav .content_title > a >  span{ font-size: 4rem;}
  .hover_nav .content_title small{ font-size: 1.4rem; display: block; text-align: center; margin-top: 10px; margin-left: 0;}
  .hover_nav .content_title .num{ font-size: 5rem; margin-right: 0; margin-bottom: 8px;}
  .hover_nav .content_title{ padding: 0 16px;}
  .hover_nav > li .content_title,
  .hover_nav > li:hover .content_title{
    height: 100%;
    bottom: 0;
    justify-content: center;
    align-items: center;
    flex-flow: column;
  }
  .hover_nav .content_title > a > span{ display: block; text-align: center;}
  .hover_nav .content_title > a > span > span{
    display: block;
    text-align: center;
  }
  .hover_nav .hover_content{
    display: none;
    top: 0;
    background: linear-gradient(90deg, rgba(28, 93, 171, 0.5), rgba(29, 82, 163, 0.5));
    align-items: flex-end;
    padding-bottom: 25px;
  }
  .hover_nav .btn a{ margin: 16px auto; height: 48px;}
  .hover_nav .txt{ margin-bottom: 16px;}


  .news .low_fv{
    background: url(../images/news_bg_sp.jpg) no-repeat center;
    background-size: cover;
  }
  .service .low_fv {
    background: url(../images/service_bg_sp.jpg) no-repeat center;
    background-size: cover;
  }
  .company .low_fv {
    background: url(../images/campany_bg_sp.jpg) no-repeat center;
    background-size: cover;
  }
  .works .low_fv {
    background: url(../images/workspage_bg_sp.jpg) no-repeat center;
    background-size: cover;
  }
  .survey_design .low_fv{
    background: url(../images/suvery_bg_sp.jpg) no-repeat center;
    background-size: cover;
  }
  .phtography_by_air .low_fv{
    background: url(../images/phtography_by_air_bg_sp.jpg) no-repeat center;
    background-size: cover;
  }
  .research .low_fv{
    background: url(../images/research_bg_sp.jpg) no-repeat center;
    background-size: cover;
  }

  .low #t_news{ flex-flow: column; padding: 56px 20px 56px;}
  #t_news > div:first-child{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  #t_news > div .drop_nav{ width: 49%;}
  .drop_nav > span{ width: 100%; font-size: 1.4rem; position: relative;}
  .drop_nav > span::after{
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-bottom: solid 2px #fff;
    border-left: solid 2px #fff;
    transform: rotateZ(-45deg);
    transition: transform .3s ease-in-out;
  }
  .drop_nav.active > span::after{ transform: rotateZ(-225deg);}
  .drop_nav .drop_show_links{ display: none;}
  ul.article_list{ width: 100%; margin-top: 5vw;}
  .article_list > li{ padding: 24px 0;}
  .article_list .thum{ max-width: 206px; width: 40%; height: auto; max-height: 150px; margin-right: 16px;}
  .article_list .cat{ font-size: 1.2rem;}
  .article_list > li > a{ padding-right: 16px; justify-content: space-between;}
  .article_list > li > a::after{ width: 20px; height: 20px; right: 5px;}
  .article_list .date{ font-size: 1.4rem; margin-right: 8px;}
  .article_list .thum + div{ width: 60%;}
  

  .commonBox{ animation: none; padding-top: 5vw;}
  .commonBox .inbox{ flex-flow: column;}
  .commonBox #t_company, .commonBox #t_works{ width: 100%;}
  .commonBox #t_company .section_title,
  .commonBox #t_works .section_title{ font-size: 4rem;}
  .commonBox #t_works{ margin-top: 2%;}
  .commonBox #t_contact{
    height: auto;
    flex-flow: column;
    padding-top: 32px;
    padding-bottom: 32px;
    margin-bottom: 15vw;
  }
  #t_contact .btn{ margin-top: 2rem;}
  #t_contact .btn a{ width: 100%; font-size: 1.4rem;}
  #t_contact .tel a{ font-size: 3rem;} 
  #t_contact .tel a::before{ width: 23px; height: 34px; vertical-align: -6px; }
  #t_contact .tel > span{ font-size: 1.4rem;}

  .catchphrase > b{ font-size: 5vw;}
  .catchphrase span{ font-size: 3vw; margin-top: 3vw;}

  .company .mg03{ padding: 32px 0 32px;}
  .company .mg02{ padding-bottom: 16px;}
  .mes_photo .name{ padding: 0 8px; margin-top: 16px;}
  .mes_photo .name > img{ margin: 0 auto;}
  .mes_photo{ flex-flow: column; padding-bottom: 32px;}
  .mes_photo > div{ width: 100%; max-width: none;}
  .mes_photo .sp_photo{ margin-top: 2rem;}
  .mes_photo .sp_photo > img{ margin: 0 auto;}
  .mes{ margin-top: 0;}
  .company .mg01{ padding: 32px 0;}
  .min-section{ flex-flow: column;}
  .min-section .policy{ width: 100%;}
  .min-section .motto{ width: 100%; margin-top: 32px;}
  .min-section .section_title{ padding: 0;}
  .policy p{ font-size: 1.8rem;}
  .motto p{ flex-flow: column; align-items: flex-start; margin-bottom: 1.4rem;}
  .motto_img{ padding: 0;}
  .companyOverview{ flex-flow: column;}
  .companyOverview > .l-box{ width: 100%;}
  .companyOverview > .r-box{ width: 100%;}
  .license{ margin-bottom: 24px;}
  .license .section_title{ padding: 0;}
  ul.licenseList{ column-count: 1;}
  ul.licenseList li .name{ font-size: 1.4rem; padding: 8px 14px;}
  ul.licenseList li .num{ font-size: 1.4rem;}
  ul.licenseList li .pos{ font-size: 1.2rem;}
  .company dl.list_t01{
    padding-left: 20px;
    padding-right: 20px;
    flex-flow: column;
  }
  dl.list_t01 > dt{ width: 100%; border-bottom: none; padding: 0; margin-bottom: 8px; font-size: 1.4rem;}
  dl.list_t01 > dd{ width: 100%; padding-bottom: 16px; margin-bottom: 16px; font-size: 1.4rem;}

  .works .bg_c01{ padding-top: 32px; padding-bottom: 32px;}
  .select_cat{
    width: 90%;
    flex-flow: column;
    padding: 16px;
    border-radius: 5px;
  }
  .select_cat p{ font-size: 1.6rem;}
  .select_cat ul{ width: 100%; flex-flow: wrap; justify-content: center;}
  .select_cat ul > li a{ font-size: 1.4rem; min-height: 32px; min-width: 90px;}
  .table_title{ font-size: 1.8rem;}
  .scroll-area{ overflow: scroll;}
  table.works_table{ width: 124%;}
  .works_table thead th,
  .works_table tbody td{ font-size: 1.4rem; padding: 8px;}
  .works_table tbody tr td:first-child{ word-break: auto-phrase;}
  .works_table thead th:first-child{ width: 120px;}

  .common_parts .bussinessList{ flex-flow: column;}
  .common_parts .bg_c01{ padding: 32px 0;}
  .common_parts .introBox{flex-flow: column; padding-top: 32px; padding-bottom: 40px; position: relative;}
  .common_parts .introBox .intro_txt{ font-size: 2.4rem;}
  .common_parts .introBox > .l_box{ width: 100%; order: 2;}
  .common_parts .introBox > .r_box{ display: none;}
  .bussinessList > li{ width: 100%;}
  .bussinessList > li:last-child{ margin-bottom: 0;}
  .bussinessList > li img{ margin: 0 auto;}
  .bussinessList .list_title{ font-size: 2rem;}
  .bussinessList .noImg{ padding-top: 0;}
  .suvery_img{ margin-bottom: 32px;}

  .contact section{ padding-top: 32px; padding-bottom: 32px;}
  .contact section > .page_width{ padding: 32px 16px;}
  .contact_tel_box > div{ flex-flow: column;}
  .contact_tel_box p{ width: 100%; text-align: center; font-size: 2rem;}
  .contact_tel_box small{ font-size: 1.4rem;}
  .contact_tel_box figure{ width: 100%; margin-top: 16px;}
  .contact_tel_box > div{ margin-bottom: 32px;}
  .smf-item__label__text::before{ width: 50px;}
  .contact .smf-item__label__text, .contact .smf-radio-button-control__label{ font-size: 1.4rem;}
  .contact .smf-form--simple-table .smf-item__col--controls{ width: 100%;}
  .smf-form--simple-table + .smf-action{ margin-top: 32px;}
  .smf-form--simple-table + .smf-action > span{ display: inline-block; margin-left: 0!important; margin-bottom: 20px;}
  .contact .smf-progress-tracker__item__number{ font-size: 1.2rem; width: 60px; height: 60px; border-width: 2px;}
  .contact .smf-progress-tracker__item__text{ font-size: 1rem;}

  
  /*-- recruit --*/
  .tab ul.tab01{ margin-bottom: 24px;}
  .tab ul.tab01 > li{ font-size: 2rem;}
  .tab .tabbox .intab{ margin-bottom: 16px;}
  .tab .tabbox .intab > li{ padding: 8px 0; font-size: 1.4rem;}
  .tab-content > dl > dt,
  .tab-content > dl > dd{ font-size: 1.4rem;}
  .interview{ padding-bottom: 48px;}
  .interview .title{ width: 180px; height: 37px;font-size: 1.8rem;}
  .interview .article_inbox{ flex-flow: column;}
  .interview .article_inbox > .l-box{ width: 100%;}
  .article_inbox .txt > p.fs01{ font-size: 1.8rem;}  
  .interview .article_inbox > .r-box{ width: 100%;}
  .intervew-post h5{ font-size: 1.8rem!important;}
  .intervew-post h5 > span{ font-size: 1.8rem; vertical-align: baseline;}
  .intervew-post p::after{ display: none;}
  .work_place{ padding: 48px 0;}
  .work_place ul.list{ flex-flow: column;}
  .work_place ul.list > li{ width: 100%;}
  .rec_mesBox{
    padding: 32px 0 72vw;
    background: url(../images/rec_mes_bg_sp.jpg) no-repeat bottom right;
    background-size: contain;
  }
  .recruit .low_fv{ height: 90vh;}
  .recruit .low_fv > p.catch > span{ font-size: 2rem;}
  .rec_mesBox .section_title{ margin-bottom: 32px;}
  .rec_mesBox .mes_main_txt{ font-size: 2.6rem; margin-bottom: 32px;}
  .rec_mesBox .mes_main_txt > small{ font-size: 2rem;}
  .rec_mesBox .rec_mes{ width: 100%;}
  .what_we_do{ padding: 32px 0 0;}
  .what_we_do .flex{ flex-flow: column;}
  .what_we_do .flex > .r-box{ width: 100%; order: 1;}
  .what_we_do .flex > .l-box{ width: 100%; order: 2; margin-top: 32px;}
  .what_we_do .flex > .r-box > .inbox{ width: 100%;}
  .what_we_do .flex > .r-box .section_title{ margin-bottom: 24px;}
  .what_we_do .btn{ margin-top: 32px;}

  /*-- top --*/  
  .section_chatch{ font-size: 4vw;}
  #t_aboutus{
    flex-flow: column;
    padding: 0;
    margin-top: 32px;
    margin-bottom: 48px;
  }
  #t_aboutus > .about_img_box{ width: 100%; order: 2;}
  #t_aboutus > div:first-child{ width: 100%; order: 1; padding: 0 20px; margin-bottom: 32px;}
  #t_aboutus .btn{ margin-top: 32px;}

  #t_service .inbox{ flex-flow: column;}
  #t_service .inbox div:first-child{ width: 100%;}
  #t_service .inbox .service_img_box{ display: none;}
  #t_service .btn a{ margin: 0 auto;}
  #t_service .service_img{ margin: 32px auto 0; max-width: 700px; width: 100%; }

  #t_news{
    flex-flow: column;
    padding-top: 80px;
    padding-bottom: 80px;
  }
  #t_news .btn{ width: 100%; margin-top: 12px}
  #t_news .btn > a{ width: 100%; max-width: 200px; margin-left: auto;}
  #t_news .btn > a.icon_arrow::after{ left: 10px;}
  #t_news .btn > a.icon_arrow:hover::after{ right: 10px; left: auto;}
  
  #t_recruit{ height: 400px;}
  #t_recruit > .inbox{
    width: 90%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  #t_recruit .recBox{
    width: 100%;
    background-color: rgba(237, 245, 252, 0.6);
    top: 10%;
  }
  .scroll-infinity__item{ width: 1260px;}

  /*--fv --*/
  .fv{ height: auto;}
  .fv > h2{
    font-size: 3.8vw;
    top: 30%;
    padding: 0 16px;
  }
  .fv .main_txt{ font-size: 10vw; margin-bottom: 8px;}
  .fv .fv_infoBox{ bottom: 0; position: static;}
  .fv .fv_infoBox > .inbox{
    background-color: rgba(43, 86, 165, 1);
    display: block;
    width: 100%;
    padding: 16px;
    border-radius: 0;
    margin: 0;
  }
  .fv .fv_infoBox > .inbox > div{ padding-right: 50px;}
  .fv .fv_infoBox h3{ font-size: 1.6rem; margin-bottom: 16px;}
  .fv .fv_infoBox a.fv_info_btn{
    width: fit-content;
    text-align: right;
    width: 100%;
    position: absolute;
    top: 27%;
    right: 20px;
  }
  .fv .fv_infoBox a.fv_info_btn > span{ display: none; }
  .fv_info_btn::after{
    background: url(../images/icon_news.png) no-repeat center;
    background-size: contain;
    width: 30px;
    height: 30px;
  }
  .article .date{ font-size: 1.4rem;}
  .article .cat{ font-size: 1rem; margin: 0 1em; padding: 1px 3px;}
  .article .title{
    font-size: 1.4rem;
    display: block;
    text-align: left;
    margin-top: 8px;
  }
  .article_links > li{ font-size: 1.2rem;}
  
  

  /*-- header --*/
  main{ padding-top: 80px;}
  header{ 
    align-items: center;
    top: 0;
    border-radius: 0;
    height: 80px;
    width: 100%;
  }
  header nav.h_nav{ 
    background-color: #edf5fc;
    width: 100%;
    max-width: 480px;
    height: 100vh;
    position: fixed;
    top: 0;
    right: -100%;
    z-index: -1;
    transition: all .3s ease-in-out;
  }
  header nav.h_nav > ul{
    flex-flow: column;
    justify-content: flex-start;
    border-top: solid 1px #c9dfff;
  }
  header nav.h_nav > ul > li{ margin: 0; border-bottom: solid 1px #c9dfff; padding: 2rem 3rem}
  header nav.h_nav > ul > li > a{ display: block; height: auto; font-size: 1.6rem; padding: 0;}
  header nav.h_nav > ul > li::before{ display: none;}
  header nav.h_nav > ul li.droplist a{ font-size: 1.6rem;;}
  header nav.h_nav > ul li.droplist > a::after{ display: none;}
  header nav.h_nav > ul li.droplist > ul{
    background-color: transparent;
    position: static;
    visibility: visible;
    opacity: 1;
    box-shadow: none;
    padding: 8px 0 0 2em;
  }
  header nav.h_nav > ul > li.h_btn > a{ width: 240px; font-size: 1.6rem;}
  header.show nav.h_nav{ right: 0;}

  header .drop_service > li:first-child{ display: none;}
  header nav.h_nav > ul li.droplist > ul{ display: block; width: 100%;}
  header nav.h_nav > ul li.droplist > ul > li:not(:first-child){ width: auto;}
  header nav.h_nav > ul li.droplist > ul > li:not(:first-child) a > small{ display: none;}
  header nav.h_nav > ul li.droplist > ul > li:not(:first-child) > a{
    color: inherit;
    background-color: transparent;
    padding: 0;
    font-size: 1.6rem;
  }
  header nav.h_nav > ul li.droplist > ul > li:not(:first-child) > a::before{
    content: '';
    display: inline-block;
    width: 24px;
    height: 1px;
    background-color: #2a5ab3;
    vertical-align: middle;
    margin-right: 0.8em;
  }

  .sp_nav_icon{
    display: block;
  }
  .sp_nav_icon span{
    display: block;
    font-family: "Roboto", sans-serif; 
    font-weight: bold;
    font-size: 1.2rem;
    text-align: center;
    padding: 4px 4px;
    transition: all .3s ease-in-out;
  }
  .sp_nav_icon::before,
  .sp_nav_icon::after{
    content: '';
    background-color: #000;
    display: block;
    width: 100%;
    height: 2px;
    transition: all .3s ease-in-out;
  }
  header.show .sp_nav_icon span{ opacity: 0; transform: translateX(30px);}
  header.show .sp_nav_icon::before{ transform: rotateZ(22deg) translateY(6px); transform-origin: left;}
  header.show .sp_nav_icon::after{ transform: rotateZ(-22deg) translateY(-6px); transform-origin: left;}
  header nav.h_nav > ul > li.h_btn.rec_btn{ margin-top: 32px; border: none;}
  header nav.h_nav > ul > li.h_btn.cv_btn{ margin-top: 16px; border: none;}
  header nav.h_nav > ul > li.tel_btn{ margin-top: 16px; border: none; padding: 0;}
  header nav.h_nav > ul > li.tel_btn > a{
    border: none;
    color: #285796;
    font-family: "Roboto", sans-serif;
    font-size: 3.2rem;
    font-weight: bold;
    letter-spacing: 0;
    text-align: center;
  }
  header nav.h_nav > ul > li.tel_btn > a::before{
    content: '';
    background: url(../images/header_tel.jpg) no-repeat center;
    background-size: contain;
    display: inline-block;
    width: 20px;
    height: 26px;
    vertical-align: -1px;
    margin-right: 5px;
  }
  header nav.h_nav > ul > li.tel_btn > small{
    display: block;
    text-align: right;
    font-size: 1.2rem;
    color: #285796;
    width: 228px;
    margin: 0 auto;
  }
  .drop_service li:nth-child(2) a,
  .drop_service li:nth-child(3) a,
  .drop_service li:nth-child(4) a{ background: none;}

  /*-- footer --*/
  footer{ padding: 54px 0 16px;}
  footer .f_inbox{ flex-flow: column;}
  .f_inbox .r_box{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin: 0 auto;
  }
  .f_inbox .r_box > .sdgs_img{ width: 60px; margin-right: 0;}
  .f_inbox .l_box{ width: 100%; max-width: 460px; margin-bottom: 32px;}
  .sdgs_img{ margin: 0 auto;}
  .copyright{ margin-top: 32px; text-align: center;}
  .f-logo{ margin: 0 auto; width: 240px;}
  .f_address{ flex-flow: column; align-items: center; margin-bottom: 32px;}
  .gmap{ padding: 0;}
  .f_address p{ padding-right: 0; padding-bottom: 16px; font-size: 1.4rem;}
  .f_nav a{ font-size: 1.2rem;}
  .f_nav > ul > li::before{ width: 15px; height: 15px;}

}

@media screen and (max-width: 480px){
  main{ padding-top: 60px;}
  header{ height: 60px;}
  header h1{ width: 220px;}
  header nav.h_nav{ padding-top: 70px;}
  .showSP480{ display: block;}
  .none480{ display: none;}
  .hover_nav .content_title > a > span{ font-size: 2.6rem;}
  .hover_nav .content_title .num{ font-size: 3rem;}
  .main_txt{ font-size: 2rem;}
  .mes{ font-size: 2rem;}

  .service .page_width{ padding-top: 32px; padding-bottom: 32px;}
  .survey_design .low_fv .section_title{ top: 22%; }
  .phtography_by_air .low_fv .section_title{ top: 22%; }

  .article_inbox .txt > p.fs01 > br{ display: none;}
  .rec_mesBox .mes_main_txt{ font-size: 6vw;}
  .rec_mesBox .mes_main_txt > small{ font-size: 4vw;}

  .f_nav a{ font-size: 1.3rem;}
  .common_parts .introBox .intro_txt{ font-size: 4vw;}

  .mes_photo .txt .mes{ font-size: 1.8rem;}
}