/* CSS Document */
html{
    overflow-x: hidden;
}

body{
	color:#222;
	letter-spacing:0.05em;
  width: 100%;
  overflow-x: hidden;
  font-family: "Helvetica Neue",
  Arial,
  "Hiragino Kaku Gothic ProN",
  "Hiragino Sans",
  Meiryo,
  sans-serif;
}

img{
	max-width:100%;
}

h2 img, .bg img{
	margin: 0 auto;
}

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
.pc {
	display: none !important;
}

.sp {
	display: block !important;
}

*{
	letter-spacing:0.05em;
}

.drawer-nav{
	padding: 3%;
}

.drawer-nav li{
	margin: 0 0 3%;
}

h3{
	font-size: 4.0vw;
	/*padding: 0 0 0 10%;*/
}

/*   header   */
header{
	min-width:320px;
	padding:0;
	z-index: 1;
}

  header h1 {
	padding: 0 0 15px;
}

header h1 small{
	display:block;
	margin-bottom:0.3em;
	line-height:1.3;
	font-weight:400;
	padding-bottom:0;
}

header h1 img{
	display:block;
	height:auto;
	float:none;
	width:135px;
}
.header_text{
	font-size:3.5vw;
  padding: 10px 0 5px;
}

.header-box {
  padding:10px 0 10px 3%;
  margin: 0 auto;
  overflow: hidden;
}
/*   list   */
.list{
  display: none;
	/*width: 95%;
	margin: 2% auto 0;
	font-size:1.5vw;*/
}

/*   footer   */
footer .logo{
	width: 35%;
	margin: 0 auto;
	margin-left:29%;
}

footer .box p{
	font-size: 12px;
}

footer .copy{
	font-size: 1.5vw;
}

.company_content {
    display: flex;
    font-size: 1.5vw;
}
.notopfooter {
    text-align: center;
    margin: 5% 0 0 26%;
    color: #fff;
}

.footer_content {
  display: none;
}

/* ---------------
    main
--------------- */
#main {
  width: 100vw;
  display: block;
  margin: 3% auto 0 auto;
}

.flexbox {
  display: flex;
  position: relative;
  /*max-width: 1200px;*/
  width: 100%;
  margin: 0 auto;
}
/*----------------
    side
----------------*/
.sticky {
  display: none;
}

/*----------------
    flexbox
----------------*/

.flexbox {
  display: block;
}
/* ---------------
		top
--------------- */
/*   mv   */
#mv p{
	font-size: 1.8em;
}

#mv .ttl{
	margin: 2% 0 0;
}

/*   area01   */
#area01{
	margin: 3% auto 0;
}

#area01 .icon{
	min-height: auto;
}

#area01 .ttl {
    padding: 1.5% 0 1.5% 18%;
    font-weight: bold;
    font-size: 15px;
}

/*#area01 ul.service_list {
    display: block;
    flex-wrap: wrap;
    margin: 0;
}

#area01 .service_list li {
  width: 100vw;
  margin: 0 0 2% 0;
}

#area01 .service_first {
    margin-bottom: 5%;
    padding: 15px 0;
    background: url(../img/top/area01_01.png)#ccffff;
    background-repeat: no-repeat;
    background-position: 5% 5%;
}

#area01 .service-title {
    text-align: left;
    font-size: 16px;
    padding: 0 0 0 10px;
}

#area01 .item_icon {
    clear:both;
    padding: 30px 0;
    text-align: center;
    height: 195px;
}*/

/*   area02   */
#area02{
  width: 100vw;
	margin: 3% 0 0;
  padding: 2% 0 0;
  background: url(../img/top/area02_bg.jpg) no-repeat;
  background-size: cover;
  /*background-position-x: -77px;
  background-position-y: -48px;*/
  text-align: center;
}

#area02 h2{
  margin: 0;
	font-size: 4.5vw;
}

#area02 p{
	padding: 0 2.5%;
}

/*   area04   */
#area04{
	width: 100vw;
	margin: 3% 0 0;
  float: none;
}

#area04 .box{
	font-size: 1em;
}

#area04 dt{
	width: 30%;
}

#area04 dd{
	width: 70%;
  padding: 0 0 0 1rem;
}

.area04-block{
  display: block;
}

.area04-news {
  width: 95%;
  margin: 0 2.5%;
}

.area04-facebook{
  width: 95%;
  margin: 0 2.5%;
  height: auto;
  padding: 0;
}

.facebook {
    border: 0.1vw solid #56b8d7;
    width: 100%;
    height: 215px;
    overflow-x: hidden;
}

/*   area05   */
#area05{
  width: 100vw;
  /*margin: 3% 0 0;*/
}

#area05 .map{
	height: auto;
}

#area05 .btn{
	width:60%;
}
.notice_box {
    border: 0.1vw solid #56b8d7;
    width: 165px;
    height: 100px;
    /*margin: 3% 0% 0 6%;*/
    font-size: 2.0vw;
    overflow:auto;
}
.notice_text_1{
	font-size:2.0vw;
}
.notice_title {
    /*margin-left: 0%;*/
    font-size: 2.0vw;
}
.fb_title {
    /*margin-left: 36%;*/
    font-size: 2.0vw;
}


.f_box{
    padding:0;
}

.under_box {
    display: block;
    height: 10px;
}

.notice_table {
    table-layout:fixed;
    margin:0 auto;
    width:0;
    height:0;
}

.noti_info{
    vertical-align: middle;
    width:164px;
}

.no_box{
    padding:0;
}


/* ---------------
	side
--------------- */
.side_r {
    display: none !important;
}

.side {
    display: none !important;
}
.side_i{
    display: none !important;
}
.side_s {
    display: none !important;
}
.side_w {
    display: none !important;
}
/* ---------------
	profile
--------------- */
#mv_profile {

	font-size:7.5vw;
}
.profile {
    /*margin-left: 3%;*/
}

.company_gaiyo {
  border-left: 10px solid rgba(175,238,238,1);
  border-bottom: 1px dashed rgba(175,238,238,1);
  margin: 0 auto;
  text-align: left;
  font-size: 20px;
  padding: 5px 0 5px 10px;
}

.company_overview {
    font-size: 14px;
    line-height: 2.5;
    margin-top: 3%;
}

.overview_title {
    border-bottom: 0.1vw solid #00ffff;
    vertical-align: middle;
    width: 30%;
}

.overview_data {
    text-align: left;
    padding-left: 7%;
    border-bottom: 0.1vw solid #00ffff;
    width: 70%;
}



/* ---------------
	service
--------------- */
#mv_service {
  clear: both;
	font-size:7.5vw;
}

/*   service01   */
#service01{
	width: 95%;
	margin: 5% auto 0;
}

#service01 h3{
	padding: 0;
    text-align: center;
    margin-left:0%;
	font-size:4vw;
}
.work_list{
margin-bottom:5%;
}

.border-title{
width:80.5%;
}

.work_item2{
/*width:73%;*/
padding:4% 0;
}

.text-z{
margin-top: 0;
}

.about_service {
    width:72%;
    margin-left:15%;
}

.service_list {
    display: block;
    margin: 0 auto;
    max-width: 893px;
    text-align: center;
}
.service_background_pic1 {
    background: url(../img/top/area01_01.png) no-repeat center left;
    background-size: contain;
    font-size: 2.8vw;
    font-weight: bold;
}
.service_background_pic2 {
    background: url(../img/top/area01_03.png) no-repeat center left;
    background-size: contain;
    font-size: 2.8vw;
    font-weight: bold;
}
.service_background_pic3 {
    background: url(../img/top/area01_05.png) no-repeat center left;
    background-size: contain;
    font-size: 2.8vw;
    font-weight: bold;
}
.service_text{
	font-size:2.9vw;

}
.service_first {
    margin-bottom: 0;
    padding: 15px 0;
    background: url(../img/top/area01_01.png)#ccffff;
    background-repeat: no-repeat;
    background-position: 3% 5%;
}
.service_second {
    margin-bottom: 0;
    padding: 15px 0;
    background: url(../img/top/area01_03.png)#ccff99;
    background-repeat: no-repeat;
    background-position: 3% 5%;
}
.service_third {
    margin-bottom: 0;
    padding: 15px 0;
    background: url(../img/top/area01_05.png)#ccffcc;
    background-repeat: no-repeat;
    background-position: 3% 5%;
}

.item_icon1 {
    width: 115px;
    margin: 0 auto;
}
.item_icon2 {
    width: 115px;
    margin: 0 auto;
}
.item_icon3 {
    width: 115px;
    margin: 0 auto;
}

.service-title {
    font-size: 20px;
    width: 80%;
    float: right;
    text-align: left;
    padding: 0 0 10px 9px;
}

/* ---------------
	work
--------------- */
#mv_work {
  clear:both;
	font-size:7.5vw;
}
.accbox label{
	width:260px;
	height:40px;
	margin:0;
}
.btn-square{
	height: 20px;
    font-size: 2.5vw;
}
.title_a{
	font-size:10px;

}
.work_item {
     /*margin: 0px;
     width:145px;*/
}

.work_side_picture {
    margin: 0 auto;
    line-height: 0.7;
}

.work_side_picture li{
    margin-bottom:2px;
}

.work_list {
    display: flex;
    /*max-width: 893px;
    margin-left: 3%;
    margin-top:5%;
    margin-bottom:5%;*/
}
.border_title {
    background: #48d1cc;
    margin: 2% 0;
    text-align: center;
    height: 20px;
    font-size: 14px;
}

#work01 {
    text-align: center;
    margin-left:4%;
}
.worktitle {
    font-size: 4.0vw;
    color: #0050a5;
}

.interest {
    display: block;
    border-left: 12px solid #00ffff;
    width: 920px;
    height: 100px;
    padding-top: 10%;
    margin-left: 0.9%;
    text-align: left;
    margin-top:0%;
}

.aih3{
    font-size:7.0vw;
}

.aih4 {
    font-size: 5.0vw;
}

.test {
    width: 190px;
    height: 218px;
    display: block;
    margin-top: 15%;
    margin-left: 5%;
    margin-bottom:5%;
}
.contentslist {
    display: inline-block;
    width: 70%;
    margin-left:0%;
    margin-top: -40%;
   }
.comment{
	font-size:3.5vw;
}
.contentscomment {
    display: block;
    height: 30%;
}
.qrcodeimg {
    width: 130px;
    height: 120px;
    margin-top:-16%;
    margin-left:65%;
}

.cssacc:checked + .accshow {
	margin-left: 17%;
    margin-right: 15%;
    width:65%;
}
.category_title {
    font-size: 2.5vw;;
}
.maincontents {
    display: block;
    border-left: 12px solid #00ffff;
    width: 450px;
    height: 1630px;
    padding-top: 3%;
}
.title_b {
    text-align: left;
    font-size: 9px;
    margin-left: 24%;
    width: 100px;
}
.work_pic_second {
    text-align: left;
}
.text-z {
    text-align: left;
    margin-top: 3%;
    margin-left: 11%;
    font-size: 2vw;
}

.flexbox {
    display: block;
    position: relative;
    width: 95%;
    margin: 0 2.5%;
    clear: both;
}

.sticky {
  display: none;
}

.right-contents {
    width: 100%;
    margin: 3% auto 0 auto;
    text-align: center;
}

.wbimg{
  width: 100%;
    height: 16px;
    margin-top: 0px;
  }

/*詳細ページ*/

/*#work01{
  text-align:center;
  margin-left:20%;
  }

.workbox{
  display:table-cell;
  border-left:35px double #00ffff;
  width:35%;
  height:100px;
  }

.aih3{
  text-align: left;
  vertical-align: middle;
  padding-left: 0;
  padding-top: 4%;
  font-size: 2vw;
  }*/

.maincontents{
  display:block;
  border-left:12px solid #00ffff;
  width: 1200px;
  height: 1500px;
  margin: 0 0 0 20%;
  padding-top: 3%;
  }

.contentsname{
  display:block;
  position: relative;
  padding: 2% 0 0 22px;
  text-align: left;
  font-size: larger;
  }

.aih4{
  font-size:2.0vw;
  }

.contentsname:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  height: 100%;
  background: linear-gradient(rgb(219,225,246),rgb(171,204,242),rgb(33,181,240));
  margin-left: 10px;
}



.contentscomment{
  margin: 4% auto 0 auto;
  text-align: left;
  padding: 0 0 0 22px;
  }

  .contentscomment p{
    padding: 0 0 2px 0;
    }

.comment {
  text-align: left;
  line-height: 1.5;
  padding: 20px 0;
  }

.worktitle{
  font-size: medium;
  color:#0050a5;
  padding: 0 0 20px 0;
  }

.images {
  display: flex;
  margin: 4% 0 0 22px;
  text-align: left;
}

.images img {
  height: 150px;
}

.images img:nth-child(n + 1):not(:nth-child(n + 4)){
  margin-right: 5px;
}
.test{
  width: 200px;
    height: 250px;
  }

.contentslist{
  display: inline-block;
  width:70%;
  margin-top: 3%;
  margin-left: -24%;
  }

.interest{
  display:block;
  border-left:12px solid #00ffff;
  width: 920px;
  height: 100px;
  padding-top:2%;
  margin-top: 10%;
  margin-left:0.9%;
  text-align:left;
  }

.qrcode{
  width: 30%;
  margin-top: 4%;
  }

.qrcodeimg{
  width: 200px;
  height: 250px;
  }

.aih4sub{
  font-size: 1.5vw;
  color: #00ced1;
  }
/* ---------------
	access
--------------- */
#mv_access {
  clear:both;
	font-size:7.5vw;
}
.access_table {
    margin: 0 auto;
    line-height: 2;
}
.access_info {
    font-size: 3.5vw;
    text-align: left;
    width: 190px;
    border-bottom: 1px solid #00ffff;
}

.access_title {
    font-size: 3.5vw;
    width: 85px;
    vertical-align:middle;
    border-bottom: 1px solid #00ffff;
}
.map {
    margin-top: 3%;
}


/*--------------
  inquiry
------------------*/
#mv_inquiry{
  clear:both;
  color: #fff;
  background: url(../img/service/inquiry.jpg) no-repeat center center;
  background-size: cover;
  font-size: 5.5vw;
  text-align:center;
  padding: 8% 0;
  text-shadow: 2px 2px #000;
}
.inquiry_form{
  width: 100%;
  line-height:3;
  border: solid 1px rgba(175,238,238,1);
  border-spacing: 0;
  border-collapse: collapse;
}

  .inquiry_form th{
    width: 35%;
    text-align: left;
    padding: 0;
    line-height: 2.3;
}

.inquiry_form td{
  width: 65%;
}

.inquiry_form_title{
  vertical-align: middle;
  width:350px;
  background-color: rgba(175,238,238,0.2);
  border: solid 1px rgba(175,238,238,1);
}
.inquiry_form_title2{
  background-color: rgba(175,238,238,0.2);
  border-right: solid 1px rgba(175,238,238,1);
  width:350px;
}
.inquiry_form_title3{
  width:350px;
  background-color: rgba(175,238,238,0.2);
  border-bottom: solid 1px rgba(175,238,238,1);
  border-right: solid 1px rgba(175,238,238,1);
}
.inquiry_form_checkbox{
  font-size:1vw;
  text-align:center;
}

.inquiry_form_checkbox > ul > li {
  text-align: left;
  padding: 0 0 0 5%;
  font-size: 14px;
}



.inquiry_form_info{
  width:500px;
  border: solid 1px rgba(175,238,238,1);
}
.inquiry_box{
  width: 90%;
  height:30px;
}

.inquiry_form_text{
  width: 90%;
  height: 250px;
  margin-top:3%;
}

.blue {
  color: #fff;
  background: #56b8d7;
  margin: 0;
  padding: 5px;
  border-radius: 5px;
  font-size: 12x;
}

.button1 {
    /*background: url(../img/common/btnC.png) left top no-repeat;*/
  margin-top: 2%;
  font-size: 20px;
  padding: 15px;
  background: #56b8d7;
  color: #fff;
  display: inline-block;
  transition-duration: 0.3s;
  transition-property: transform;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-appearance: none;
}

/*送信前の確認画面*/
.inquiry_check,
.inquiry-complete {
    width: 90%;
    margin: 0 auto 3%;
}

.inquiry_check_title,
.inquiry-complete-title {
    vertical-align: middle;
    background-color: rgba(175,238,238,0.2);
    border: solid 1px rgba(175,238,238,1);
    text-align: left;
    padding: 0 0 0 3%;
    width: 35%;
    text-align: left;
}

.button2,
.button3 {
    /* background: url(../img/common/btnS.png) left top no-repeat; */
    width: 25%;
    font-size: 20px;
    padding: 15px;
    background: #56b8d7;
    color: #fff;
    display: inline-block;
    -webkit-appearance: none;
}

/*送信後画面*/
.button4 {
    width: 60%;
    font-size: 20px;
    padding: 15px;
    background: #56b8d7;
    color: #fff;
    display: inline-block;
    text-align: center;
}
/*--------------
  recruit
------------------*/
#mv_recruit{
  clear: both;
  color: #fff;
  background: url(../img/service/recruit.jpg) no-repeat center center;
  background-size: cover;
  font-size: 5.5vw;
  text-align:center;
  padding: 8% 0;
  text-shadow: 2px 2px #000;
}

.recruit_header{
  text-align:center;
  font-size:3.5vw;
  margin:3% 0 2% 0;
}
.recruit1{
  font-size: 14px;
  line-height:3;
}
.recruit2{
  font-size:1.0vw;
  line-height:3;
  margin-left:27%;
}
.recruit_title{
  background-color: #99ffcc;
  border: 1px solid #00ffff;
  text-align:;
  width: 30%;
  vertical-align: middle;
  background-color: rgba(175,238,238,0.2);
  border: solid 1px rgba(175,238,238,1);

}

.recruit_infomation{
  padding: 2% 0 2% 5%;
  text-align: left;
  line-height: 1.8;
  border: 1px solid #00ffff;
  width: 70%;
  height: auto;
  vertical-align:middle;
  border: solid 1px rgba(175,238,238,1);
  }

.recruit_first{
  width: 100%;
}

.recruit_second{
  margin:0 auto;

}

.recruitimg{
  vertical-align:middle;
  max-width:100%;
}


/* ---------------
	privacy policy
--------------- */
.privacy_header2 {
    font-size: 5vw;
    text-align:center;
    margin: 5% 0 5% 10%;
}
.privacy_policy {
    font-size: 2.5vw;
    line-height: 2.5;
    margin-left: 4%;
}
.main_title {
    font-weight: bold;
    font-size: 15px;
    line-height: 1.4;
}
.date {
  text-align: right;
  font-size: 2.5vw;
}
.accbox {
    margin-left: -16%;
}

.privacy_gaiyo {
  border-left: 10px solid rgba(175,238,238,1);
  border-bottom: 1px dashed rgba(175,238,238,1);
  margin: 0 auto;
  text-align: left;
  font-size: 20px;
  padding: 5px 0 5px 10px;
}
/* ---------------
	sp横バージョン
--------------- */
@media screen and (orientation: landscape) {
	.access_table{
		margin-left:20%;
		width:400px;
	}
	.service_list{
		margin-left:37%;
	}
	#area05 .btn {
    	height: 33px;
    }
   .company_gaiyo{
   		margin-left:20%;
   		width:400px;
   	}
   	.company_overview{
   		margin-left:20%;
   		width:400px;
   	}
   	.map{
   		margin-left:0%;
   		width:650px;
   	}
   	.btn-square {
   		height:40px;
   		font-size:2.5vw;
   	}
	.accbox label {
		margin-bottom:10%;
	}
	.accbox {
    margin-left: 0%;
	}
	.work_list {
		/*margin-left:18%;*/
	}
	.text-z {
    margin-left: 23%;
}
	.service_first {
		width:250px;
	}
	.service_second {
		width:250px;
	}
	.service_third {
		width:250px;
	}
	.service_list {
		margin-left:32%;
	}
	.recruit_first {
		width:400px;
	}
	.recruit_second {
		width:400px;
	}
	.inquiry_form_title {
		width:150px;
	}
	.inquiry_form_info {
		width:330px;
	}
}