@charset "utf-8";

/* #page_nav
--------------------------------------------------------- */
#page_nav ul li {
  width: auto;
  margin-left: 3%;
}
#page_nav ul li span {
    font-size: 1.1rem;
    letter-spacing: 0;
}
#page_nav ul li span strong {
    font-size: 1.5rem;}

/* =========================================================
 #page_title
========================================================= */

#page_title:after {
  background-image: url(../img/service/page_title.jpg);
}
body.page #main h2 {
  line-height: 1em;
}
body.page #main h2 small {
  font-size: 3.5rem;
  vertical-align: bottom;
  letter-spacing:0.2em;
}

/* =========================================================
 #scanning
========================================================= */

#scanning .flexwrap {
  display: flex;
}
#scanning .photo {
  width: 50vw;
}
#scanning .photo img {
  width: 100%;
  height: auto;
}
#scanning .desc {
  width: 50vw;
  padding: 0 60px 0 0;
  box-sizing: border-box;
}
#scanning .desc > * {
  width: 540px;
  margin-left: calc(50vw - 600px);
}
#scanning .desc .photobox {
  margin-top: 80px;
}
/* animation */
#scanning.fadein {
  transform : translate(200px, 0);
}
#scanning.fadein.scrollin {
  transform : translate(0, 0);
}

/* =========================================================
 #merit
========================================================= */

#merit {
  background-color: #f5f9fd;
  padding: 100px 0;
}
#merit .wrap {
  width: 1200px;
  margin: 0 auto;
}

#merit .flexwrap .box {
  width: 22%;
  margin-left: 4%;
}
#merit .flexwrap .box:first-child {
  margin-left: 0;
}
#merit .flexwrap .box h3 {
  margin: 0 0 20px 0;
  text-align: center;
  color: #00539c;
}
#merit .flexwrap .box h3:after {
  counter-increment: number;
  content: counter(number, decimal-leading-zero);
  display: block;
  font-size: 4.2rem;
  font-weight: 500;
  font-family: 'Barlow Condensed', sans-serif;
  color: #00539c;
  letter-spacing: 0.1em;
}
#merit .flexwrap .box figure {
  display: flex;
  align-items: center;
  justify-content: center;
}
#merit .flexwrap .box h4 {
  font-size: 2.2rem;
  margin: 30px 0 40px 0;
  font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
  font-weight: 600;
  font-style: normal;
  text-align: center;
  line-height: 1.5;
}

/* animation */

#merit.fadein {
  transform : translate(-200px, 0);
}
#merit.fadein.scrollin {
  transform : translate(0, 0);
}

/* らくそうここから */
/* =========================================================
 #rakuso
========================================================= */

#rakuso .wrap {
  width: 1200px;
  margin: 0 auto;
}
#rakuso .wrap .h2_img{
  margin: 0 auto 80px;
  text-align: center;
}
#rakuso .flexwrap{
  display: flex;
  flex-wrap: wrap;
    justify-content: space-between;
    width: 1000px;
    margin: 0 auto;
}
#rakuso .left{
    width: 40%;
}
#rakuso .left p{
  font-weight: 700;
}
#rakuso .left figure{
  margin-top: 35px
}

/* =========================================================
 #intro
========================================================= */

#intro {
  background-color: #f5f9fd;
  padding: 100px 0;
  position: relative;
}
#intro::before{
  position: absolute;
  display: inline-block;
  content: url("../img/service/rakuso/rakuso_arrow.png");
  width: 230px;
  left: 0;
  right: 0;
  top: 0;
  margin: auto;
}
#intro .wrap {
  width: 1200px;
  margin: 0 auto;
}
#intro .h3_img{
  line-height: 0 !important;
  text-align: center;
}
#intro .h3_img img{
    width: 60%;
}
#intro .wrap900{
  margin: 80px auto 0;
  max-width: 900px
}
#intro .wrap900 small{
  display: inline-block;
  margin-top: 25px;
  font-size: 80%;
  line-height: 20px;
  text-indent: -1em;
  margin-left: 1em
}

/* =========================================================
 #inclosure
========================================================= */

#inclosure .wrap {
  width: 1200px;
  margin: 0 auto;
}
#inclosure .wrap900{
  margin: 80px auto 0;
  max-width: 900px
}
#inclosure figure {
    text-align: center;
}
#inclosure .example{
    margin-top: 70px;
}
#inclosure .flow{
    margin: 70px auto;
}

/* =========================================================
 #efficient
========================================================= */

#efficient {
  background-color: #f5f9fd;
  padding: 100px 0;
}
#efficient .wrap {
  width: 1200px;
  margin: 0 auto;
}
#efficient .wrap900{
  margin: 80px auto 0;
  max-width: 900px
}
#efficient .flexwrap{
  width: 900px;
margin: 65px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
#efficient .flexwrap figure{
  line-height: 0;
    width: 400px;
}
#efficient .flexwrap figure.arrow {
    width: 36px;
}

/* =========================================================
 #email
========================================================= */

#email .wrap {
  width: 1200px;
  margin: 0 auto;
}
#email .h3_img{
  line-height: 0 !important;
  text-align: center;
}
#email .flexwrap{
  display: flex;
  width: 1000px;
  margin: 80px auto;
  flex-wrap: wrap;
  justify-content: space-between;
}
#email .txt{
  width: 400px;
}
#email .txt ul {
    margin-bottom: 30px;
}
#email figure{
    width: 480px;
  margin-top: -20px;
}

/* =========================================================
 #sdeliver
========================================================= */

#sdeliver {
  background-color: #f5f9fd;
  padding: 100px 0;
}
#sdeliver .wrap {
  width: 1200px;
  margin: 0 auto;
}
#sdeliver figure{
  position: relative;
    width: 800px;
    margin: 0 auto;
    text-align: center;
}
#sdeliver figure cap{
  display: block;
  position: absolute;
  bottom: 0; left: 0;
    font-size: 1.4rem;
}

/* らくそうこここまで */

/* =========================================================
 #subcontractor
========================================================= */

/* results
--------------------------------------------------------- */
#subcontractor .results {
  background-image: url(../img/common/bg_01_btm.jpg),  url(../img/common/bg_01_head.jpg);
  background-repeat: no-repeat,  no-repeat;
  background-size: 100% auto,  100% auto;
  background-position: center bottom,  center top;
  background-color: #ebf5ff;
  padding: 6.770833333333334vw 0 110px 0;
}
#subcontractor .results h3 em {
  font-size: 3.6rem !important;
}

/* button */
#subcontractor .results .button {
  padding: 90px 0 0 0;
}
#subcontractor .results .button a {
  width: 400px;
  margin: 0 auto;
  text-align: center;
  box-sizing: border-box;
}
/* animation */
#subcontractor .wrap.fadein {
  transform : translate(0, 200px);
}
#subcontractor .wrap.fadein.scrollin {
  transform : translate(0, 0);
}

/* =========================================================
 #application
========================================================= */

#application {

#application .flexwrap {
  display: flex;
}
#application .photo {
  width: 50vw;
}
#application .photo img {
  max-width: 100%;
  height: auto;
}
#application .desc {
  width: 50vw;
  padding-left: 60px;
  box-sizing: border-box;
}
#application .desc > * {
  width: 540px;
  margin-right: calc(50vw - 600px);
}
#application .desc ul.list{
	margin-bottom:1em;
}
#application .desc p {
  margin-top: 1em;
}
#application .desc p:first-of-type {
  margin-top: 0;
}
/* animation */
#application.fadein {
  transform : translate(200px, 0);
}
#application.fadein.scrollin {
  transform : translate(0, 0);
}

}

/* =========================================================
 #other_develop
========================================================= */

#other_develop {
  background-color: #f5f9fd;
  padding: 100px 0;
}
#other_develop .wrap {
  width: 1200px;
  margin: 0 auto;
}
/* animation */
#other_develop.fadein {
  transform : translate(-200px, 0);
}
#other_develop.fadein.scrollin {
  transform : translate(0, 0);
}

/* =========================================================
 #printing
========================================================= */

#printing {
  min-width: 1300px;
}
#printing .flexwrap {
  display: flex;
}
#printing .photo {
  width: 50vw;
}
#printing .photo img {
  width: 100%;
  height: auto;
}
#printing .desc {
  width: 50vw;
  padding: 0 60px 0 0;
  box-sizing: border-box;
}
#printing .desc > * {
  width: 540px;
  margin-left: calc(50vw - 600px);
}
#printing .desc .photobox {
  margin-top: 100px;
}
/* animation */
#printing.fadein {
  transform : translate(200px, 0);
}
#printing.fadein.scrollin {
  transform : translate(0, 0);
}
#printing.fadein2 {
  transform : translate(0, 300px);
}
#printing.fadein2.scrollin {
  transform : translate(0, 0);
}

/* =========================================================
 #feature
========================================================= */

#feature {
  background-color: #f5f9fd;
  padding: 100px 0;
}
#feature .wrap {
  width: 1200px;
  margin: 0 auto;
}
#feature .flexwrap {
  display: flex;
  flex-wrap: wrap;
  counter-reset: number;
}
#feature .flexwrap .box {
  width: 30%;
  margin-left: 5%;
}
#feature .flexwrap .box:first-child {
  margin-left: 0;
}
#feature .flexwrap .box h3 {
  margin: 0 0 20px 0;
  text-align: center;
  color: #00539c;
}
#feature .flexwrap .box h3:after {
  counter-increment: number;
  content: counter(number, decimal-leading-zero);
  display: block;
  font-size: 4.2rem;
  font-weight: 500;
  font-family: 'Barlow Condensed', sans-serif;
  color: #00539c;
  letter-spacing: 0.1em;
}
#feature .flexwrap .box figure {
  display: flex;
  align-items: center;
  justify-content: center;
}
#feature .flexwrap .box h4 {
  font-size: 2.2rem;
  margin: 30px 0 40px 0;
  font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
  font-weight: 600;
  font-style: normal;
  text-align: center;
  line-height: 1.5;
}
/* animation */
#feature.fadein {
  transform : translate(-200px, 0);
}
#feature.fadein.scrollin {
  transform : translate(0, 0);
}

/* 260314追加　特徴2行目の位置調整 */

.box4{
  margin-left: -16%;
  margin-top: 20%;
  width: 350px;
}
.box6{
  margin-left: 220%;
  margin-top: -156%;
  width: 350px;
}