@charset "utf-8";
/* -------------------------------------
     Site CSS
 (c) Copyright 2006 Sketches of Design
     version 2006-09-01
------------------------------------- */

/*  1000
--------------------------------------*/
@media screen and (max-width: 1000px) {

img{
  max-width: 100%;
  height: auto;
  width /***/:auto;
}
/*body#recruit-idx div#content .info p.lead,*/
body#company-idx div#content div#history div.inner dl dt,
body#company-idx div#content div#philosophy div.lead h3,
body#company-idx div#content div#philosophy div.CFX h3{
  font-size: 1.8rem;
}
/*body#recruit-interview #content #interview-area div p span,*/
div#content ul.navigation li{
  font-size: 1.4rem;
}
#header.no-shadow,
#header{
  min-height: 107px;
}
#header p#b-logo{
  padding: 12px 0;
  width: 60px;
}
#header p#b-logo img{
  width: 63px;
}
#header p#g-logo{
  right: 16px;
  padding: 13px 0 0 0 !important;
  width: 133px !important;
  height: 16px;
}/*
body#recruit-office #content div.section div.inner,*/
body#home #content div#concept ul,
body#home #content ul.slider,
body#home #main #news-area,
#header .inner,
#footer ul.copyarea,
#footer div.inner,
#wrapper{
  width: auto !important;
  height: 100%;
}
/*body#recruit-office #content #gallery-area h2,
body#recruit-office #content #gallery-area .sp-horizontal .sp-arrows,
body.recruit div#content #content-inner,
body.recruit div#content #info-area,
body.recruit #interview-area h2,
body.recruit #interview-area .sp-horizontal .sp-arrows,*/
body#home #content #content-inner,
body#home #pickup-area h2,
body#home .sp-horizontal .sp-arrows{
  width: auto !important;
}
#header .inner{
  padding: 0 12px;
}
#main.fixed,
#main{
  margin-top: 107px;
}
#footer .copyarea{
  padding: 20px 20px 0 20px;
  height: auto;
  line-height: normal;
}
#footer .copyarea ul{
  text-align: center;
}
#footer .copyarea ul li:not(.b-siteid){
  margin: 0;
  width: 25%;
  text-align: center;
  box-sizing: border-box;
}
#footer .copyarea ul li a{
  display: block;
  padding: 4px 0 !important;
}
#footer .copyarea ul li.b-siteid{
  float: none;
  display: block;
  margin-right: 0;
  margin-bottom: 12px;
  width: auto;
  height: auto;
  text-align: left;
}
#footer .copyarea ul li.copy{
  margin-top: 2em;
  border-top: 1px solid #e0e0e0;
  padding: 1.5em 0;
  width: 100%;
  text-align: center;
}
#footer .menu-area{
  clear: both;
}
ol.bc{
  padding: 10px 16px;
}
body#home #content #content-inner{
  padding: 64px 16px 96px 16px;
}
body#home #main{
  background: #fff;
}
body#home #main #news-area{
  padding: 0 16px;
}
/*body.recruit #interview-area h2,*/
body#home #pickup-area h2{
  padding: 48px 16px 0 16px;
}
body.interview #interview-area h2{
  padding: 48px 16px 0 16px;
}
body#home #content{
  margin-top: 280px;
}
body#home #content #content-inner #company,
body#home #content #content-inner #service{
  width: 48%;
}
body#home #content #content-inner h2{
  top: 12%;
}
body#home #content #content-inner p.more{
  bottom: 16%;
}
body#home #content #content-inner #recruit .imgwrap{
  width: 100%;
  height: 172px;
}
body#home #content .imgwrap{
  width: 100%;
  height: auto;
}
body#home #content .imgwrap img{
  width: 100%;
}
body#home #content #content-inner #recruit .imgwrap img{
  margin: 0;
}
body#home .sp-horizontal .sp-next-arrow{
  right: 16px;
}
body#home .sp-horizontal .sp-arrow{
  top: -6px;
}
body.interview #content div#main-pic ul li.catch,
body.interview #content div#main-pic ul li.name{
  width: 100%;
}
#footer ul.copyarea li.copy{
  float: none;
  display: block;
}

/* menu */
body.company.fixed #header .menu > ul > li.company > ul.normal-sub,
body.service.fixed #header .menu > ul > li.service > ul.normal-sub{
  top: -12px !important;
  right: 100%;
  width: 100%;
  font-size: 1.2rem;
}
body.company.fixed #header .menu > ul.show-on-mobile li.company > ul.normal-sub,
body.service.fixed #header .menu > ul.show-on-mobile li.service > ul.normal-sub{
  right: 0;
}
#header .menu-dropdown-icon:before{
  display: none;
}
#header .menu-container ul{
  left: auto;
  width: 100%;
}
#header .menu-container ul li{
  margin-left: 10% !important;
  background-color: #fff;
  background-color:rgba(255,255,255,0.85);
  width: 90%;
}
#header .menu-container ul li a{
  padding: 12px 12px 12px 16px !important;
}
#header.no-shadow .menu ul{
  font-size: 100%;
}
/*body.recruit #header .menu ul li.recruit a,*/
body#home #header .menu ul li.home a,
body.company #header .menu ul li.company a,
body.service #header .menu ul li.service a,
body.contact #header .menu ul li.contact a,
#header .menu ul li a:hover{
  border-left: 4px solid #00b8ee;
  padding-left: 12px;
}
.menu > ul::after{
  margin-left: 10%;
  background-color:rgba(255,255,255,0.85);
  width: 90%;
  height: 2000px;
}
#header .menu-container ul li ul.normal-sub{
  display: none !important;
}
#header .menu-container ul li ul.normal-sub li{
  margin: 0 !important;
  text-align: center;
  width: auto;
}
#header .menu-container ul li ul.normal-sub li a{
  padding: 16px 8px !important;
  width: auto;
}
body.company.fixed #header .menu > ul > li.company > ul.normal-sub{
  padding-bottom: 16px;

}
body.company #header .menu-container ul li ul.normal-sub li a{
  padding: 16px 8px 0 8px !important;

}
div#content ul.navigation.fixed{
  top: 95px;
}
.ui-mask{
  background-color:rgba(0,0,0,.5);
  bottom:0;
  left:0;
  opacity:0;
  position:fixed;
  right:0;
  top:0;
  transform:translateZ(0);
  transition:opacity .2s linear;
  visibility:hidden;
  z-index:0
}
.nav-open .ui-mask {
  opacity: 1;
  visibility: visible;
  z-index: 4;
}


/**/
#footer .menu-area div.inner{
  padding: 24px;
}
#footer div.inner ul.ft-menu{
  padding: 0;
  border: none;
  width: 25%;
}
body#home #content div#news-area{
  margin: 0 10px 20px 10px;
  padding: 10px;
}
body#home #main div.slider{
  margin: 0 auto;
    position: relative !important;
    width: 100% !important;
    height: 380px !important;
}
body#home #main div.slider:before {
    content: "";
    display: block;
    padding-top: 40%;
}
body#home #main div.slider #top-slider{
    position: absolute;
    top: 0; left: 0;
    width: 99% !important;
    height: 99% !important;
}
body#home #main div.slider div.east{
    width: 100% !important;
    height: 100% !important;
}
body#home #main div.slider #top-slider img{
  margin-top: 0;
  max-width: 100%;
  height: auto;
  width /***/:100%;
}
body#service-idx #content ul.navigation,
body#company-idx #content ul.navigation{
  margin: 226px 24px 0 24px;
}
body.news #main #content div#entry-area{
  margin: 16px 24px 0 24px;
}
body#recruit-office #main #content div#entry-area{
  margin: 16px 24px 16px 24px;
}
/*body#recruit-special-talk #content #content-inner div#lv02-01 .inner,
body#recruit-special-talk #content #content-inner div#lv02-02 .inner,
body#recruit-special-talk #content #content-inner div#lv02-03 .inner,
body#recruit-training div#content div#lv02-02 .inner,
body#recruit-training div#content div#lv02-03 .inner,
body.interview #main #main-pic .inner,
body.interview #content div#content-inner,
body.interview div#content div#private .inner,*/
body#cookie #content div#content-inner,
body#site #content div#content-inner,
body.movie #content div#content-inner,
body#disclosure #content div#content-inner,
body#privacy #content div#content-inner,
body #main #content div#lead-area,
body#redirect-idx #content div#lv02-01 div.inner,
body#company-idx div#content div#purpose .inner,
body#contact-idx #content div#lv02-01 div.inner,
body#company-idx div#content div#access div.CFX,
body#company-idx #content div#message div.inner,
body#company-idx div#content div#philosophy div.lead,
body#company-idx div#content div#philosophy div.CFX,
body#service-idx #content div#business-areas div.inner,
#content div#content-inner div div.inner{
  width: auto;
}
/*body#recruit-special-talk #content #content-inner div#lv02-01,
body#recruit-special-talk #content #content-inner div#lv02-02,
body#recruit-special-talk #content #content-inner div#lv02-03{
  margin: 48px 0;
  padding: 48px 24px 24px 24px;
}*/
/*body#recruit-work #main div#content .inner,
body#recruit-training div#content div#lv02-02 .inner,
body#recruit-training div#content div#lv02-03 .inner,
body#recruit-guide div#content div#lv02-02 .inner,*/
body#company-idx div#content div#philosophy,
body#cookie #content div#content-inner,
body#site #content div#content-inner,
body.movie #content div#content-inner,
body#disclosure #content div#content-inner,
body#privacy #content div#content-inner,
body #main #content div#lead-area,
body#service-idx #content div#business-areas div.inner,
body#redirect-idx #content div#lv02-01 div.inner,
body#contact-idx #content div#lv02-01 div.inner,
body#company-idx div#content div#access div.CFX,
body#company-idx #content div#message div.inner,
body#company-idx div#content div#history div.inner dl,
body#company-idx #content div.even{
  padding: 24px;
}
/*body#recruit-guide #content div#question,
body#recruit-guide #content div#answer{
  padding: 0 24px;
}*/
div#content ul.navigation li a{
  padding: 16px;
}
#content div#content-inner .map iframe{
  max-width: 100%;
}
body#service-idx #content div#business-areas div.inner p.images,
body#company-idx #content div#message p.image{
  width: 320px;
}
body#company-idx div#content div#history div.inner dl{
  background-position: 80px center;
}
body#company-idx div#content div#history div.inner dl dt{
  width: 62px;
}
body#company-idx div#content div#history div.inner dl dd{
  margin: 0px 0 30px 4.5em;
}
body#cookie #content div#content-inner,
body#site #content div#content-inner,
body.movie #content div#content-inner,
body#disclosure #content div#content-inner,
body#privacy #content div#content-inner,
body#redirect-idx #content div#lv02-01 div.inner,
body#contact-idx #content div#lv02-01 div.inner,
body#company-idx div#content div#access div.CFX,
body#company-idx div#content div#history div.inner{
  margin: 24px;
}
body#company-idx div#content div#purpose .youtube,
body#company-idx div#conduct .inner{
  padding: 0 24px;
}

body#company-idx div#content div#purpose .inner{
  margin: 24px;
  padding: 40px;
}
body#company-idx div#purpose .inner p.title::after{
  right: auto;
}

body.news #content #entry-area div.navi h3{
  position: static;
  padding-top: 24px;
  text-align: center;
}
body.news #content #entry-area ul{
  padding: 0 24px 12px 24px !important;
}
body.news #content #entry-area ul li{
  width: 40% !important;
}


}


/*  768
--------------------------------------*/
@media screen and (max-width: 768px) {

  body#company-idx div#purpose .inner p.title,
  #content h2{
    font-size: 1.8rem;
  }
  #main h1{
    font-size: 2.4rem;
  }
body br.pc{
  display: none;
}
body br.sp{
  display: block;
}
body #main #content ul.navigation{
  margin: 160px 16px 0 16px;
}
body#company-idx div#content ul.navigation{
  padding: 0 0 16px 0;
}
body.news #main #content div#entry-area,
body #main #content div#lead-area{
  margin: 16px 16px 0 16px;
}
body#company-idx div#content div#philosophy,
body#cookie #content div#content-inner,
body#site #content div#content-inner,
body.movie #content div#content-inner,
body#disclosure #content div#content-inner,
body#privacy #content div#content-inner,
body #main #content div#lead-area,
body#service-idx #content div#business-areas div.inner,
body#redirect-idx #content div#lv02-01 div.inner,
body#contact-idx #content div#lv02-01 div.inner,
body#company-idx div#content div#access div.CFX,
body#company-idx #content div#message div.inner,
body#company-idx div#content div#history div.inner dl,
body#company-idx div#conduct .inner,
body#company-idx div#conduct .tab-content,
body#company-idx #content div.even{
  padding: 16px;
}
body#service-idx #main #content div#lead-area,
body#cookie #content div#content-inner,
body#site #content div#content-inner,
body.movie #content div#content-inner,
body#disclosure #content div#content-inner,
body#privacy #content div#content-inner,
body#contact-idx #content div#lv02-01 div.inner,
body#redirect-idx #content div#lv02-01 div.inner,
body#company-idx div#content div#purpose .inner,
body#company-idx div#content div#access div.CFX,
body#company-idx div#content div#history div.inner{
  margin: 16px;
}

/* font */
body#home #pickup-area h2,
body#home #content #content-inner h2,
body#company-idx div#conduct h3,
body#company-idx div#content div#history div.inner dl dt,
body#company-idx #content div#message div.CFX,
body#company-idx #content div#message div.CFX p.posted{
  font-size: 1.6rem;
}
body,
body#home #content #content-inner #recruit .text ul li a{
  font-size: 1.4rem;
}
body.interview #content{
  padding-top: 24px !important;
}
table,
body#service-idx #content div#business-areas div.block ul li,
body#company-idx div#content div#philosophy div.CFX div p,
body#home #content #content-inner .text,
body#home #pickup-area .sp-slide p em{
  font-size: 1.2rem;
}
div#content ul.navigation li,
div#content ul.navigation.fixed li,
body#company-idx div#conduct ol ul li,
body#home #pickup-area .sp-slide p.text,
body#home #pickup-area .sp-slide,
body#home #pickup-area .sp-slide p em,
body#home #main #news-area dl{
  font-size: 1.0rem !important;
}

/* diagram */
div.diagram a.sp{
  display: block !important;
}
div.diagram p.image{
  display: none;
}
div.diagram{
  position: relative;
}
div.diagram span{
  display: block;
  position: absolute;
  width: 30px !important;
  height: 30px !important;
  right: 10px;
  margin: -40px 0 0 0;
}
div.diagram img{
  max-width: 100%;
  height: auto;
  width /***/:100%;
}

/**/
#header{
  box-shadow: none;
	transition-duration: 0.3s;
}
.fixed #header{
  box-shadow: 0 0 4px 2px rgba(158,158,158,0.3) !important;
}
.company.fixed #header,
.service.fixed #header{
  box-shadow: none !important;
}
#main h1{
  padding: 32px 0;
}
#content h2{
  padding: 40px 0 20px 0;
  margin: 0;
}
body#home #content{
  margin-top: 90px;
  padding-bottom: 0;
}
body#home #content #content-inner{
  padding-top: 32px;
}
body#home #main div.slider{
  padding-bottom: 40%;
  height: 100% !important;
}
div#content ul.navigation{
  padding: 4px 0;
}
div#content ul.navigation li a{
  padding: 8px 12px;
}
div#content ul.navigation.fixed li a{
  padding: 8px 12px !important;
}
body#home #pickup-area{
  padding-top: 8px;
}
#footer div.menu-area{
  display: none;
}
#footer{
  background: #fff;
}
#footer .copyarea ul li:not(.b-siteid){
  width: 50%;
}
body#service-idx #content div#base,
body#service-idx #content div#business-areas,
body#company-idx #content div#outline,
body#company-idx #content div#message,
body#company-idx #content div#philosophy,
body#company-idx #content div#history,
body#company-idx #content div#organization,
body#company-idx #content div#access{
    margin-top: -40px;
    padding-top: 40px;
}
body#company-idx #content div#message{
    margin-top: 64px;
}
body#company-idx #content div#philosophy,
body#company-idx #content div#organization{
    margin-top: 0;
}
body.news #main #content div#entry-area{
  padding: 0 32px 24px 32px;
}
body.news #content #entry-area p.ban a{
  line-height: 64px;
}
body.news #content #entry-area ul li{
  height: 64px;
}
body#home #main p.scroll-sp{
  position: absolute;
  display: block;
  left: 50%;
  margin: -32px 0 0 -22px;
  width: 44px;
  height: 44px;
  z-index: 100;
}
body#home #main #news-area{
  margin-top: 56px;
}
body#home #main #news-area dl{
  margin: -28px 0 0 0;
  padding: 42px 12px 12px 12px;
}
body#home #pickup-area .sp-slide{
  padding: 8px;
  box-sizing: border-box;
  width: 171px !important;
  background-color: #fff;
  box-shadow: 0 0 4px 2px rgba(158,158,158,0.3);
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}
body#home #main #pickup-area p.image{
  max-height: 84px;
}
body#home #main #pickup-area p.tag{
  top: 12px;
  left: 12px;
}
body#home #main #news-area h2{
  position: static;
  float: none;
  border-top: 3px solid #00b8ee;
  background: none;
  padding: 8px 0 0 0;
  width: 100%;
  color: #424242;
  font-size: 1.4rem;
}
body#home #main #pickup-area p.year{
  margin-top: 0.85em;
}
body#home #pickup-area .sp-slide p span{
  display: block;
  padding-left: 0;
}
body#home #pickup-area .sp-slide p em{
  display: block;
}
body#home #pickup-area .sp-slide p em{
  height: 2em;
}
body#home #pickup-area .sp-slide p.text{
  height: 4.5em;
}
body#home #main #pickup-area .sp-slide p.more,
body#home #pickup-area .sp-slide p.nav{
  bottom: 10px;
}
body#home .sp-horizontal .sp-arrow{
  top: 104px;
}
body#home #content #content-inner #company,
body#home #content #content-inner #service{
  float: none !important;
  display: block;
  margin-bottom: 24px;
  box-shadow: 0 0 4px 2px rgba(158,158,158,0.3);
  background-color: #fff;
  width: 100%;
}
body#home #content #content-inner #recruit{
  box-shadow: 0 0 4px 2px rgba(158,158,158,0.3);
}
body#home #content .imgwrap{
  background-color: transparent;
  height: 78px !important;
}
body#home #content .imgwrap img{
  margin-top: -30px;
  filter: alpha(opacity=100);
  -moz-opacity:1;
  opacity:1;
}
body#home #content #content-inner h2{
  top: 56px;
	-webkit-background-size: 44px 44px !important;
	-moz-background-size: 44px 44px !important;
	-ms-background-size: 44px 44px !important;
	-o-background-size: 44px 44px !important;
	background-size: 44px 44px !important;
	padding-top: 48px;
  color: #212121;
}
body#home #content #content-inner #company h2{
  background: url("../img/p-icon-company_sp.png") top center no-repeat;
}
body#home #content #content-inner #service h2{
  background: url("../img/p-icon-service_sp.png") top center no-repeat;
}
body#home #content #content-inner #recruit h2{
  top: 60px;
  left: auto;
  background: url("../img/p-icon-recruit_sp.png") top center no-repeat;
  padding: 0;
  width: 100%;
  text-align: center;
}
body#home #content #content-inner h2 a{
  display: block;
  padding: 48px 0 0 0;
  color: #212121;
}
body#home #content #content-inner .text{
  padding-top: 64px;
}
body#home #content #content-inner #recruit .text{
  position: static;
  box-shadow: none;
  padding: 64px 0 0 0;
  width: auto;
}
body#home #content #content-inner #recruit .text p a{
  padding: 0 16px;
}
body#home #content #content-inner p.more{
  display: none;
}

/* news */

body.news #main h1 span{
  padding: 40px 0 32px 0;
}


#footer ul.copyarea li.b-siteid{
  margin: 0 0 10px 0;
}
body#company-idx div#content div#philosophy div.lead{
  margin-bottom: 24px;
  padding: 24px 16px;
}
body#company-idx div#content div#philosophy div.CFX div{
  float: none;
  display: block;
  margin: 0 !important;
  width: auto;
}
body#company-idx div#content div#philosophy div.CFX div h3{
  margin: 10px 10px 15px 10px;
}
div#content div#philosophy div.CFX div p{
  margin: 0 10px 20px 10px;
}
body#company-idx #content div#message p.image{
  margin-bottom: 0;
  width: 160px;
}
body#company-idx #content div#message div.CFX p.lead{
  padding-top: 0;
  line-height: 1.5;
}
body#company-idx #content div#message div.CFX p.posted{
  clear: both;
  margin-top: 1em !important;
}
body#company-idx div#content div#access iframe{
  height: 240px !important;
}
body#company-idx div#content div#access .lv03-02 iframe{
  float: none !important;
  width: 100% !important;
}
body#company-idx div#content div#access .lv03-02 iframe.map-02{
  margin-top: 16px;
}
body#service-idx #content div#business-areas div.inner p.images{
  float: none;
  display: block;
  margin: 0 auto 1em auto;
  width: 80%;
  text-align: center;
}
body#service-idx #content div#business-areas div.block{
  float: none;
  display: block;
  width: 100%;
}
body#cookie div.kv, body#site div.kv,
body#disclosure div.kv, body#contact-idx div.kv,
body#privacy div.kv, body#contact-idx div.kv{
  height: 186px;
}
body#company-idx div#content div#history div.inner dl{
  background-position: 66px center;
}
body#company-idx div#content div#history div.inner dl dt{
  width: 56px;
}
body#company-idx div#content table th{
  padding: 0 10px 0 0;
  width: 50px;
}
body#company-idx div#content table td{
  padding: 15px 0 15px 15px;
}
body#company-idx div#content table tr dl dt,
body#company-idx div#content table tr dl dd{
  text-align: left;
}
body#company-idx div#content table tr dl dd{
  margin-bottom: 20px;
}
body#company-idx div#content table tr.office dl dd{
  margin-top: 0;
  padding: 0;
}
body#site div#content table th, body#site div#content table td{
  border: none;
  display: block;
  padding: 8px 16px;
  width: auto;
}

body#privacy div#content p.images{
  float: none;
  display: block;
  text-align: center;
}

body#site div#content table th{
  padding: 1em 0 0 0;
}
body#site div#content table td{
  display: inline;
}
body#redirect-idx h1{
  padding: 32px 0 10px 0;
}
body#redirect-idx h1 span{
  padding: 0;
}
body#redirect-idx #main{
  padding: 0;
}


body.news #content #entry-area ul{
  padding: 16px;
}
body.news #content #entry-area ul li a{
  padding: 16px 0;
}
body.news #content #entry-area ul li img{
  max-width: 100%;
  height: auto;
}
}



/*  480
--------------------------------------*/
@media screen and (max-width: 480px) {
#btt{
  right: 16px;
  bottom: 24px;
}
body#company-idx div#content div#purpose .inner{
  padding: 24px;
}
body#company-idx div#purpose .inner p{
  font-size: 1.4rem;
  line-height: 1.8;
}
body#company-idx div#purpose p.lead{
  padding: 0 16px;
  text-align: left;
}
body#company-idx div#purpose p.lead br{
  display: none;
}
body#company-idx div#purpose .inner p.title{
  margin: 0 0 20px 0;
  padding-bottom: 20px;
}
body#company-idx div#content div#philosophy div.lead h3,
body#company-idx div#content div#philosophy div.CFX h3{
  font-size: 1.6rem;
}
div#content ul.navigation li a,
div#content ul.navigation.fixed li a{
  padding: 8px 6px !important;
  font-size: 0.95em;
}
body#company-idx div#content ul.navigation{
  padding: 0;
}
body#home #content ul.slider{
  margin: 0 10px;
}
body#company-idx #content div#message p.image{
  float: none;
  display: block;
}
body#company-idx #content div#message p.image{
  margin: 0 0 10px 0;
  width: auto;
}
body.news #content #entry-area{
  padding: 0 24px 24px 24px !important;
}
body.news #content #entry-area p.ban{
  margin-bottom: 16px;
}
body.news #content #entry-area ul li{
  float: none !important;
  display: block;
  width: auto !important;
  height: auto;
}
body.news #content #entry-area ul li img{
  max-height: 32px;
}
body.news #content #entry-area ul li a{
  padding: 10px 0;
}
ol.bc{
  padding: 4px 16px;
  font-size: 0.9rem;
}
#footer .copyarea{
  padding: 12px 12px 20px 12px;
}
#footer p.copy{
  line-height: 40px;
}
#footer .copyarea ul li a{
  padding: 2px 0 !important;
}
/**/



}