@charset "utf-8";

@media only screen and (max-width: 46.875em) {
 html {
  box-sizing: border-box;
  font-size: 2.66666667vw;
 }
 
 img{
  width: 100%;
  height: auto;
 }

/* -----------------------------------------------
 layout
-------------------------------------------------- */
div#wrapper {
	width:100%;
	background:url("../images/sp/home_bg2.png") no-repeat center top #8ac0e6;
 background-size: 100%;
}
div#container {
	width:100%;
}
div#header {
	position:relative;
	width:100%;
	height:calc(519rem / 20);
}
div#globalnav {
	width:100%;
 position: fixed;
 top: 130vh;
	margin-top:0;
	margin-bottom:0;
 z-index: 99;
 background: #626161;
}
#globalnav ul{
  display: none;
}
#globalnav ul.sp-nav{
  display: block;
}
div#globalnav.menu-expanded{
 top: calc(130rem / 20);
}
 div#globalnav .sp-nav li a{
  display: block;
  padding-left: calc(100rem / 20);
  padding-top: calc(30rem / 20);
  padding-bottom: calc(30rem / 20);
  border-bottom: 1px solid #fff;
  position: relative;
 }
 div#globalnav .sp-nav li a::before{
  content: "";
  background: url("../images/sp/nav_ico.png") no-repeat;
  background-size: calc(22rem / 20);
  width: calc(22rem / 20);
  height: calc(40rem / 20);
  top: 50%; 
transform: translateY(-50%);
  right: calc(100rem / 20);
  position: absolute;
 }
 div#globalnav .sp-nav li:last-child{
  border-bottom: none;
 }
div#globalnav .sp-nav li:nth-child(1) img{
 width: calc(180rem / 20);
}
div#globalnav .sp-nav li:nth-child(2) img{
 width: calc(158rem / 20);
}
div#globalnav .sp-nav li:nth-child(3) img{
 width: calc(296rem / 20);
}
div#globalnav .sp-nav li:nth-child(4) img{
 width: calc(196rem / 20);
}
div#globalnav .sp-nav li:nth-child(5) img{
 width: calc(228rem / 20);
}
 body#underlayer{
  overflow-x: hidden;
 }
body#underlayer div#content {
 position: relative;
	width: calc(670rem / 20);
 margin-top: calc(-140rem / 20);
 margin-left: auto;
 margin-right: auto;
 box-sizing: border-box;
 padding-right: 2rem;
 padding-left: 2rem;
 padding-top: 2.5rem;
 padding-bottom: 2.5rem;
	margin-bottom:0;
 background: #fcfbe6;
 border-radius: .5rem;
}

div#footer {
	width:100%;
	padding-top:calc(130rem / 20);
background: none;
}


/* -----------------------------------------------
 header
-------------------------------------------------- */
/* logo */
h1#logo,
p#logo {
 width: calc(225rem / 20);
 left: calc(30rem / 20);
}
/* catch */
p#catch {
	top:calc(45rem / 20);
 left: 50%;
 transform: translateX(-50%);
 width: calc(90rem / 20);
}
/* contact */
p#contact img#phone {
	position:absolute;
	top:calc(212rem / 20);
	left:calc(22rem / 20);
 width: calc(272rem / 20);
}
p#contact img#mail {
	position:absolute;
	top:calc(350rem / 20);
	right:135px;
}


/* -----------------------------------------------
 globalnav
-------------------------------------------------- */
div#globalnav ul li {
	float:none;
}
.menu-trigger {
    display: block;
    width: calc(123rem / 20);
    height: calc(123rem / 20);
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999; }
    .menu-trigger span {
      display: inline-block;
      transition: all .4s;
      box-sizing: border-box;
      position: absolute;
      left: calc(26rem / 20);
      height: 2px;
      background-color: #626161;
      width: calc(60rem / 20);
      left: calc(40rem / 20); }
      .menu-trigger span:nth-of-type(1) {
        top: calc(40rem / 20); }
      .menu-trigger span:nth-of-type(2) {
        top: calc(60rem / 20); }
      .menu-trigger span:nth-of-type(3) {
        top: calc(80rem / 20); }
    .menu-trigger.active span:nth-of-type(1) {
      -webkit-transform: translateY(0.65em) rotate(-45deg);
      transform: translateY(0.65em) rotate(-45deg); }
    .menu-trigger.active span:nth-of-type(2) {
      opacity: 0; }
    .menu-trigger.active span:nth-of-type(3) {
      -webkit-transform: translateY(-1.25rem) rotate(45deg);
      transform: translateY(-1.25rem) rotate(45deg); }

/* -----------------------------------------------
 footer
-------------------------------------------------- */
div#footer_inner {
	position:relative;
	width:100%;
	margin-right:auto;
	margin-left:auto;
	padding-bottom:calc(40rem / 20);
 background: #8ac0e6;
}

/* foot_logo */
p#foot_logo {
 display: none;
}

/* foot nav */
div#footer ul {
 display: none;
}

/* credit */
p#credit {
 clear: both;
	position:relative;
 text-align: center;
	top:0;
	right:0;
	color:#FFF;
	font-size:calc(14rem / 20);
}

/* go to top */
p#back_top {
 position: fixed;
 bottom: calc(40rem / 20);
 right: calc(40rem / 20);
 top: auto;
}
 
body#home div#wrapper {
	width:100%;
	background:url("../images/sp/home_bg1.png") no-repeat center top #8AC0E5;
 background-size: 100%;
}
body#home div#globalnav {
	width:100%;
 position: fixed;
	margin-top:0;
	margin-bottom:0;
 background: #626161;
}
body#home div#globalnav ul{
  display: none;
}
body#home div#globalnav ul.sp-nav{
  display: block;
}
body#home div#content {
	width:100%;
 box-sizing: border-box;
 padding-right: 2rem;
 padding-left: 2rem;
	margin-bottom:0;
}
/* -----------------------------------------------
 content
-------------------------------------------------- */
/* main */
div#main {
	float:left;
	width:100%;
}
div.recruit_banner{
	margin-top:-3rem;
	margin-bottom:1.5rem;
 position: relative;
}
div.recruit_banner a:hover{
 opacity: .7;
}
div.service {
	margin-bottom:35px;
}
div.service h2 {
	margin-bottom:10px;
}
div.service ul li {
	float:left;
	width:145px;
}
div.service ul li + li {
	margin-left:11px;
}
div#banners {
	clear:both;
}
div#banners h2 {
	margin-bottom:15px;
}
div#banners ul {
	margin-left:40px;
}
div#banners ul li {
	float:left;
	margin-left:31px;
}
div#banners ul li:first-child {
	margin-left:0;
}

/* info */
div#info {
	position:relative;
 box-sizing: border-box;
	float:right;
	width:100%;
/*	margin-top:40px;*/
	margin-top:calc(65rem / 20);
	padding:10px;
	background-color:#FCFBE5;
	border-radius:7px;
	behavior: url(../js/PIE.htc);
}
div#info iframe{
 width: 100%;
 }
div#info h2 {
	margin-bottom:15px;
	padding:7px 10px;
	background-color:#8AC0E5;
}
 div#info h2 img{
  width: calc(125rem / 20);
 }
div#info div#info_body {
	width:280px;
	height:355px;
	margin-right:auto;
	margin-left:auto;
}


/* -----------------------------------------------
 feed
-------------------------------------------------- */
/* 本文 */
div.feed_text {
	width:255px;
	margin-bottom:1em;
}
p.post_data {
	margin-bottom:5px;
	padding:3px 8px;
	background-color:#E3DFB9;
}
p.post_title a:link {
	color:#000;
	text-decoration:none;
}
p.post_title a:visited {
	color:#000;
	text-decoration:none;
}
p.post_title a:hover {
	color:#666;
	text-decoration:underline;
}
p.post_title a:active {
	color:#666;
	text-decoration:underline;
}

    #ico-area{
     clear: both;
     padding-top: calc(70rem / 20);
     margin-bottom: calc(70rem / 20);
    }
    #ico-area .list{
-webkit-box-lines:multiple;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
     width: 100%;
    }
    .ico-area_ttl{
     margin-bottom:calc(30rem / 20);
    }
    .ico-unit{
     width: calc(320rem / 20);
     margin-bottom: calc(30rem / 20);
    }
    .ico-unit a{
     width: calc(320rem / 20);
     height: calc(320rem / 20);
    }
    .ico-unit_ico{
     height: calc(97rem / 20);
     margin-top:calc(30rem / 20);
    }
    .ico-unit img{
     width: 100%;
    }
    .ico-unit.num1{
     margin-right: 0;
    }
    .ico-unit.num2{
     margin-left: 0;
     margin-right: 0;
    }
    .ico-unit.num3{
     margin-left:0;
     margin-right:0;
    }
    .ico-unit.num4{
     margin-left: 0;
    }
    .ico-unit.num1 .ico-unit_ico img{
     width: calc(97rem / 20);
    }
    .ico-unit.num2 .ico-unit_ico img{
     width: calc(100rem / 20);
    }
    .ico-unit.num3 .ico-unit_ico img{
     width: calc(64rem / 20);
    }
    .ico-unit.num4 .ico-unit_ico img{
     width: calc(100rem / 20);
    }
    .ico-unit_ttl1{
     width: calc(262rem / 20);
    }
    .ico-unit.num2 .ico-unit_ttl1{
     width: calc(190rem / 20);
    }
    .ico-unit.num3 .ico-unit_ttl1{
     width: calc(272rem / 20);
    }
    .ico-unit.num4 .ico-unit_ttl1{
     width:calc(145rem / 20);
    }
    .ico-unit .txt-area{
     margin-top: auto;
     margin-bottom:calc(20rem / 20);
    }
    .ico-unit .txt-area .btn{
     width: calc(145rem / 20);
     margin-top: calc(10rem / 20);
    }
    .ico-unit .txt-area .txt{
     color: #fff;
     text-align: center;
     font-size: calc(18rem / 20);
     margin-top: calc(10rem / 20);
    }
.bnr-area_ttl{
 width: 100%;
 text-align: center;
 margin-bottom: calc(45rem / 20);
}
.bnr-area_ttl img{
 width:calc(596rem / 20);
}
#bnr-area .bnr1{
 width: calc(625rem / 20);
 margin-left: 0;
 margin-right: 0;
 margin-bottom: calc(40rem / 20);
}
#bnr-area .bnr1 img{
 width: 100%;
}
#bnr-area .bnr1 a:hover{
 opacity: .7;
}
.service-sec{
 border-radius: .5rem;
 padding: 1.5rem 0;
 margin-bottom: calc(20rem / 20);
}
.service-sec .ttl{
 margin-bottom: calc(20rem / 20);
 padding-left: 2rem;
}
.service-sec .ttl img{
 width: 100%;
}
.service-sec .ttl h2{
 width: calc(415rem / 20);
}
.service-sec .ttl p.btn{
 width: calc(185rem / 20);
 padding-right: calc(10rem / 20);
}
.service-sec .ttl p.btn a:hover{
 opacity: .7;
}
.service-sec .list{
-webkit-box-lines:multiple;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
 padding-left: 2rem;
 padding-right: 2rem;
}
.service-sec .list img{
 width: 100%;
}
.service-sec .list .unit{
 border-radius: .5rem;
 width: calc(285rem / 20);
 background: #fcfbe5;
 margin-bottom: calc(25rem / 20);
}
.service-sec .list .unit a{
display:-webkit-box;
display:-webkit-flex;
display:flex;
-webkit-box-pack:center;
-webkit-flex-pack:center;
-webkit-justify-content:center;
justify-content:center;
-webkit-box-align:center;
-webkit-align-items:center;
align-items:center;
 border-radius: .5rem;
height: calc(330rem / 20);
 width: calc(285rem / 20);
 padding: 0;
}
.service-sec .list .unit a:hover{
 background: #e5e3bf;
}
.service-sec .list .unit.num1 img{
 width: calc(200rem / 20);
}

.service-sec .list .unit.num2 img{
 width: calc(168rem / 20);
}
.service-sec .list .unit.num3 img{
 width: calc(195rem / 20);
}
.service-sec .list .unit.num4 img{
 width: calc(196rem / 20);
}
.service-sec .list .unit.num5 img{
 width: calc(196rem / 20);
}

.service-sec .list .unit.num6 img{
 width: calc(175rem / 20);
}
.service-sec .list .unit.num7 img{
 width: calc(200rem / 20);
}
.service-sec .list .unit.num8 img{
 width: calc(202rem / 20);
}
div#content.abouts h1#page_title{
margin-bottom: calc(40rem / 20);
margin-left: 0;
}
div#content.abouts h1#page_title img{
 width: calc(212rem / 20);
}
 
 div.section {
	width:100%;
}
 h1#page_title {
    margin-bottom: calc(40rem / 20);
    margin-left: 0;
}
div.section p,
div.section dl,
div.section ul,
div.section ol,
div.section table {
  font-size:calc(20rem / 20);
 }
 table.info tr th, table.info tr td{
 padding: 1em;
 }
div.section p.lead {
	margin-bottom:2em;
 line-height: 2;
 font-size: calc(22rem / 20);
}
 div#content.abouts div.pict_box{
  box-sizing: border-box;
  width: 100%;
  margin-right: 0;
  padding-left:calc(22rem / 20);
  padding-right:calc(22rem / 20);
  margin-bottom:calc(50rem / 20);
 }
div#content.abouts div.pict_box h3{
  width:calc(222rem / 20);
 margin-right:calc(30rem / 20);
}
div#content.abouts div.pict_box p {
    width:calc(272rem / 20);
    margin-bottom: 0;
}
 div#content.abouts div.text_box{
  width: 100%;
 }
 div#content.abouts div.text_box h4{
  width:calc(106rem / 20);
    margin-bottom:calc(22rem / 20);
 }
 div#content.abouts div.text_box dl{
  font-size:calc(20rem / 20);
  margin-bottom: 0;
 }
 div#content.serv h1#page_title{
margin-bottom: calc(40rem / 20);
margin-left: 0;
 }
div#content.serv h1#page_title img{
 width: calc(215rem / 20);
}
 div#content.serv div.section h2 img{
 width: calc(390rem / 20);
 }
 div#content.serv div.section p.lead img{
 width: calc(456rem / 20);
 }
 div#content.serv div.service{
  width: 48%;
  background-size: 100%;
  margin-bottom:calc(35rem / 20);
 }
 div#content.serv div.service p{
  font-size:calc(20rem / 20);
 }
 div#corporation_01 div.service_inner,div#corporation_02 div.service_inner,
 div#corporation_03 div.service_inner,div#corporation_04 div.service_inner{
  background-size: 100%;
 }
 div.service + div.service {
    margin-left: calc(20rem / 20);
 }
 div#corporation_03{
  margin-left: 0;
 }
 div#soho_01 div.service_inner,div#soho_02 div.service_inner,
 div#soho_03 div.service_inner,div#soho_04 div.service_inner{
  background-size: 100%;
 }
 div#soho_03{
  margin-left: 0;
 }
 .service_other .txt{
  width: calc(555rem / 20);
  margin-bottom:calc(60rem / 20);
 }
 ul.contact li {
  margin-top:calc(25rem / 20);
  width: 100%;
 }
 div#content.office h1#page_title{
 width: calc(227rem / 20);
 margin-bottom: calc(40rem / 20);
 margin-left: 0;
 }
 table.info {
    width: 100%;
    font-size: calc(22rem / 20);
 }
 div#map{
  width: 100%;
 }
 div#map iframe{
  width: 100%;
 }
 div#map p{
    font-size: calc(20rem / 20);
 }
 div#content.recruit h1#page_title {
 width: calc(180rem / 20);
 margin-bottom: calc(40rem / 20);
 margin-left: 0;
 }
 .recruit-ttl {
    width: calc(547rem / 20);
 }
 .recruit-ttl2{
    width: calc(280rem / 20);
 }
 .recruit_title{
  font-size: calc(30rem / 20)!important;
  line-height: 1.2!important;
 }
 .recruit_title .sp{
  display: block;
 }
 .recruit-txt_pc{
  display: none;
 }
 .recruit-txt_sp{
  display: block;
 }
 .recruit div.section p{
  font-size: calc(18rem / 20);
 }
 .tel_ttl{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
 }
 div#content.other h1#page_title {
 width: calc(357rem / 20);
 margin-bottom: calc(40rem / 20);
 margin-left: 0;
 }
 div.section h2.other-subttl{
  background: url("../images/sp/other/ttl_bg.gif") no-repeat;
    background-size: 100%;
    height: calc(55rem / 20);
    color: #fff;
    font-size: calc(25rem / 20);
    padding-top: calc(7rem / 20);
    padding-left: calc(50rem / 20);
    margin-bottom: calc(35rem / 20);
 }
 div#content.other .img-area .img1 {
    width: 100%;
    margin-bottom: 0;
  margin-top: calc(40rem / 20)
 }
 div#content.other .img-area .txt{
  font-size: calc(21rem / 20);
  margin-top: calc(10rem / 20);
 }
 div#content.other .img-area .img3 {
    width: calc(251rem / 20);
    padding-left: 0;
 }
 div#content.other .img-area .img4 {
    width: calc(307rem / 20);
    padding-right:0;
 }
 div#content.other .other-txt2 {
    margin-left: 0;
 }
 .other-bnr1 {
     width: 100%;
     margin-top: calc(40rem / 20);
 }
  .other-txt3 {
     font-size: calc(17rem / 20)!important;
     margin-left: 0;
     padding-bottom: calc(30rem / 20);
 }
 div.calendar_top {
    width: 100%;
    padding-top: calc(43rem / 20);
  background-size: 100%;
}
 div.calendar_bottom{
  background-size: 100%;
  padding-bottom: calc(60rem / 20);
 }
 div.calendar_body{
  background-size: 100%;
 }
 div.calendar_body ul {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}
 div.section table.mailform textarea{
  width: 100%!important;
 }
table.mailform tr th, table.mailform tr td{
 box-sizing: border-box;
  display: block;
  width: 100%;
 }
 div.service div.service_inner{
  padding-bottom:calc(200rem / 20);
 }
 div#confirmBody{
  width: 100%!important;
 }
 div.section table.mailform input[type="text"], textarea{
  width: 100%!important;
 }
}