@import url(//fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&subset=japanese);
@import url(//fonts.googleapis.com/css?family=Roboto:400,700&display=swap);


/* #header
------------------------------------------------------------*/

#header{
	position:relative;
	background: url(../img/top/index_mv.jpg) no-repeat 100% 100%;
	background-size: cover;
	-webkit-background-size: cover;
	padding-bottom:5%;
}


#slogan{
  padding-top:18%;
	color: #fff;
	line-height: 1.2;
	text-align: center;
}

#slogan h1{
	font-size:500%;
	font-weight:bold;
	text-shadow:  3px 3px 10px rgba(0,0,0,.9);
}


@media screen and (max-width:767px) {
#header{
	background: url(../img/top/index_sp_mv.jpg) no-repeat 100% 100%;
	background-size: cover;
	-webkit-background-size: cover;
}
#slogan{padding-top:45%;}
#slogan h1{
	font-size:300%;
	font-weight:bold;
}
}


/* top-hero__bar
------------------------------------------------------------*/


.top-hero_txt {
  display:block;
  margin:8% 0 1% 0;
  text-align: center;
  color: #fff;
  z-index:2;
  font-weight:bold;
  font-size:1.2rem
 }

 .top-hero_txt span {
  position: absolute;
  top:48%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb 1.5s infinite;
  animation: sdb 1.5s infinite;
  box-sizing: border-box;
 }

 .top-hero_txt span:nth-of-type(1) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
 .top-hero_txt span:nth-of-type(2) {
  top:47%;
  -webkit-animation-delay: .15s;
  animation-delay: .15s;
}

@-webkit-keyframes sdb {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}


@media (min-width: 801px) and (max-width: 1400px) {
.top-hero_txt span {top:42%;}
.top-hero_txt span:nth-of-type(2) { top:41%;}
}

@media (min-width: 761px) and (max-width: 800px) {
.top-hero_txt span {top:32%;}
.top-hero_txt span:nth-of-type(2) { top:31%;}
}


@media (min-width:601px) and (max-width: 760px) {
	  .top-hero_txt {margin:45% 0 1% 0;}

.top-hero_txt span {top:57%;}
.top-hero_txt span:nth-of-type(2) { top:56%;}
}


@media screen and (max-width:600px) {
  .top-hero_txt {margin:45% 0 1% 0;}
   .top-hero_txt span {top:50%; }
     .top-hero_txt span:nth-of-type(2) {
  top:48%;
  -webkit-animation-delay: .15s;
  animation-delay: .15s;
}
 }
 
 
 
/* secTopPhilosophyInner
------------------------------------------------------------*/

.secTopPhilosophyInner {
 width:90%;
 max-width:1080px;
 margin:0 auto;
 background:rgba(255,255,255,0.8);
 text-align:center;
padding:4% 1% 
}


.secTopPhilosophyInner h2 {
 width:100%;
 font-size:220%;
 font-weight:bold;
 position:relative;
 margin-bottom:5%
}

.secTopPhilosophyInner .secTopPhilosophyTxt {
 font-size:120%;
}


@media screen and (max-width:800px) {
  
.secTopPhilosophyInner {padding:15% 1%}


.secTopPhilosophyInner h2 {font-size:120%; margin-bottom:2%}

.secTopPhilosophyInner .secTopPhilosophyTxt {font-size:100%;}
 }


/* secTopDo
------------------------------------------------------------*/


.secTopDo {
 background:#fafafa
}
.secTopDo .secTopDoTtl {
 text-align:left;
 padding:50px 20px 8% 20px;
  background:white

}
@media screen and (min-width: 769px) {

 .secTopDo .secTopDoTtl {
  text-align:center;
  padding:5% 0 3% 0;
   background:#fafafa

 }
}
.secTopDo .secTopDoTtl .secTopDoTtlLine {
 font-size:2.5rem;
 color:#c11e3a;
 line-height:1
}
@media screen and (min-width: 769px) {
 .secTopDo .secTopDoTtl .secTopDoTtlLine {
  font-size:5rem
 }
}

/* secTopDoTtl h2*/

.secTopDoTtl h2 {
 font-size:2rem;
 font-weight:bold;
}

.secTopDoTtl h2:after {
 content:"";
 position:absolute;
 bottom:0;
 left:0;
 right:0;
 height:2px;
 width:200px;
 text-align:left;
 margin: 0 0;
 background:#003366
} 
 
@media screen and (min-width: 769px) {
 .secTopDoTtl h2 {
  font-size:200%;
   position:relative;
 }
 

.secTopDoTtl h2:after {
 content:"";
 position:absolute;
 bottom:0;
 left:0;
 right:0;
 height:2px;
 width:250px;
 text-align:center;
 margin: 0 auto;
 background:#003366
}
  
  
}
.secTopDoTtl h3 {
 font-family:"Roboto",sans-serif;
 font-size:1.2rem;
 color:#003366;
 font-weight:bold;
 margin-top:1%
}
@media screen and (min-width: 769px) {
 .secTopDoTtl h3 {
  font-size:150%
 }
}


/* secTopDoTtl_02 h2*/

.secTopDoTtl_02 {
 text-align:left;
 padding:15% 20px 6% 20px 
}

@media screen and (min-width: 769px) {
 .secTopDoTtl_02 {
  text-align:center;
   padding:2% 0 0 0;

 }
}

.secTopDoTtl_02 h2 {
 font-size:2rem;
 font-weight:bold;
}

.secTopDoTtl_02 h2:after {
 content:"";
 position:absolute;
 bottom:0;
 left:0;
 right:0;
 height:2px;
 width:200px;
 text-align:left;
 margin: 0 0;
 background:#003366
} 
 
@media screen and (min-width: 769px) {
 .secTopDoTtl_02 h2 {
  font-size:200%;
   position:relative;
 }
 

.secTopDoTtl_02 h2:after {
 content:"";
 position:absolute;
 bottom:0;
 left:0;
 right:0;
 height:2px;
 width:250px;
 text-align:center;
 margin: 0 auto;
 background:#003366
}
  
  
}
.secTopDoTtl_02 h3 {
 font-family:"Roboto",sans-serif;
 font-size:1.2rem;
 color:#003366;
 font-weight:bold;
 margin:1% 0 3% 0
}
@media screen and (min-width: 769px) {
 .secTopDoTtl_02 h3 {
  font-size:150%;
   margin:1% 0 0 0
 }
}



/* secTopDoBox */

.secTopDo .secTopDoBox {
 padding:0 20px
}
@media screen and (min-width: 769px) {
 .secTopDo .secTopDoBox {
  padding:0;
  overflow:hidden
 }
}


/* .secTopDoBoxBg img, .secTopDoBoxInner
------------------------------------------------------------*/

.secTopDo .secTopDoBox .secTopDoBoxBg {
 transform:scale(1.2, 1.2);
 transition:all .5s .1s
}
.secTopDo .secTopDoBox .secTopDoBoxBg img {
 width:100%;
 vertical-align:bottom
}
.secTopDo .secTopDoBox .secTopDoBoxInner {
 display:flex;
 justify-content:flex-start;
 height:100%;
 width:100%
}
@media screen and (min-width: 769px) {
 .secTopDo .secTopDoBox .secTopDoBoxInner {
  position:absolute;
  top:0;
  left:0;
 }
.secTopDo .secTopDoBox .secTopDoBoxBg  {
 width:50%
} 
  
}
@media screen and (min-width: 1300px) {
 .secTopDo .secTopDoBox .secTopDoBoxInner {
  align-items:center;
  
 }
}

/*secTopDoBoxCont*/

.secTopDo .secTopDoBox .secTopDoBoxInner .secTopDoBoxCont {
 width:100%;
 display:flex;
 justify-content:left;
 padding:5% 0;
}

@media screen and (min-width: 769px) {
 .secTopDo .secTopDoBox .secTopDoBoxInner .secTopDoBoxCont {
  width:50%;
 }
}


.secTopDo .secTopDoBox .secTopDoBoxInner .secTopDoBoxCont div{
	margin:15% 0 6% 0;
}


@media screen and (min-width: 769px) {
.secTopDo .secTopDoBox .secTopDoBoxInner .secTopDoBoxCont div{
	margin:0 auto;
}
}

.secTopDo .secTopDoBox .secTopDoBoxInner .secTopDoBoxCont h3 {
 font-size:150%;
 position:relative;
 line-height:2.5;
 font-weight:bold;
 padding-bottom:2%;
 margin-bottom:5%;
}

@media screen and (min-width: 769px) {
 .secTopDo .secTopDoBox .secTopDoBoxInner .secTopDoBoxCont h3 {
  font-size:200%;
  

 }
}


.secTopDo .secTopDoBox .secTopDoBoxInner .secTopDoBoxCont h3:after {
 content:"";
 position:absolute;
 bottom:0;
 left:0;
 height:2px;
 width:60px;
 background:#003366
}
@media screen and (min-width: 769px) {
 .secTopDo .secTopDoBox .secTopDoBoxInner .secTopDoBoxCont h3:after {
  height:2px;
  width:120px
 }
}


/* .secTopDoBox.box01  */

@media screen and (min-width: 769px) {
 .secTopDo .secTopDoBox.box01 {
  position:relative
 }
}
.secTopDo .secTopDoBox.box01 .secTopDoBoxBg {
 float:right
}

@media screen and (min-width: 769px) {
 .secTopDo .secTopDoBox.box02 {
  position:relative
 }
}
.secTopDo .secTopDoBox.box02 .secTopDoBoxBg {
 float:left
}
.secTopDo .secTopDoBox.box02 .secTopDoBoxInner {
 justify-content:flex-end;
}
.secTopDo .secTopDoBox.active .secTopDoBoxBg {
 transform:scale(1, 1)
}


/* .secTopQuality
------------------------------------------------------------*/

.secTopQuality {
 text-align:left;
 padding:0 0 31%;
 clear:both
}
@media screen and (min-width: 769px) {
 .secTopQuality {
  padding:180px 0;
   text-align:center;
 }
}
.secTopQuality .secTopQualityInner {
 width:100%;
 max-width:1440px;
 margin:0 auto 40px
}
@media screen and (min-width: 769px) {
 .secTopQuality .secTopQualityInner {
  margin:0 auto 80px
 }
}
.secTopQuality .secTopQualityInner .secTopQualityImg {
 overflow:hidden;
 margin-bottom:40px
}
@media screen and (min-width: 769px) {
 .secTopQuality .secTopQualityInner .secTopQualityImg {
  margin-bottom:2%
 }
}
.secTopQuality .secTopQualityInner .secTopQualityImg img {
 width:100%;
 vertical-align:bottom;
 transform:scale(1.2, 1.2);
 transition:all .5s .1s
}
.secTopQuality .secTopQualityInner .secTopQualityImg.active img {
 transform:scale(1, 1)
}
.secTopQuality .secTopQualityInner .secTopQualityTxt {
 font-size:1.4rem;
 margin-bottom:40px;
 padding:0 15px;
 text-align:left
}
@media screen and (min-width: 769px) {
 .secTopQuality .secTopQualityInner .secTopQualityTxt {
  font-size:1.6rem;
  text-align:center
 }
}
.secTopQuality .secTopQualityInner .secTopQualityTxt br {
 display:none
}
@media screen and (min-width: 769px) {
 .secTopQuality .secTopQualityInner .secTopQualityTxt br {
  display:block
 }
}
.secTopQuality .secTopQualityInner .secTopQualityISO {
 width:100%;
 text-align:center;
 margin-bottom:40px
}
@media screen and (min-width: 769px) {
 .secTopQuality .secTopQualityInner .secTopQualityISO {
  margin-bottom:80px
 }
}
.secTopQuality .secTopQualityInner .secTopQualityISO img {
 width:50%;
 max-width:450px
}





/* .secTopService
------------------------------------------------------------*/
.secTopService {
 padding:0 0 40px
}
@media screen and (min-width: 481px) {
 .secTopService {
  padding:0 0 180px
 }
}
.secTopService .secTopServiceInner {
 width:100%;
 max-width:1440px;
 margin:0 auto
}
.secTopService .secTopServiceInner .secTopServiceImg {
 overflow:hidden;
 display:flex;
 justify-content:center;
 margin-bottom:40px;
 height:100%
}
@media screen and (min-width: 769px) {
 .secTopService .secTopServiceInner .secTopServiceImg {
  margin-bottom:0
 }
}
.secTopService .secTopServiceInner .secTopServiceImg img {
 width:calc(100% / 3);
 height:100%;
 transform:translateY(20px);
 opacity:0
}
.secTopService .secTopServiceInner .secTopServiceImg img:nth-of-type(1) {
 transition:all .5s .2s
}
.secTopService .secTopServiceInner .secTopServiceImg img:nth-of-type(2) {
 transition:all .5s .4s
}
.secTopService .secTopServiceInner .secTopServiceImg img:nth-of-type(3) {
 transition:all .5s .6s
}
.secTopService .secTopServiceInner .secTopServiceBox {
 display:flex;
 flex-wrap:wrap;
 padding:0 15px
}
@media screen and (min-width: 769px) {
 .secTopService .secTopServiceInner .secTopServiceBox {
  padding:0
 }
}
@media screen and (min-width: 1201px) {
 .secTopService .secTopServiceInner .secTopServiceBox {
  align-items:center
 }
}
.secTopService .secTopServiceInner .secTopServiceBox .secTopServiceBoxCont {
 width:100%
}
@media screen and (min-width: 769px) {
 .secTopService .secTopServiceInner .secTopServiceBox .secTopServiceBoxCont {
  padding-right:5%;
  padding-left:2%;
  width:calc( 100% * 2/3)
 }
}
@media screen and (min-width: 1441px) {
 .secTopService .secTopServiceInner .secTopServiceBox .secTopServiceBoxCont {
  padding-right:10%;
  padding-left:0
 }
}
.secTopService .secTopServiceInner .secTopServiceBox .secTopServiceBoxCont h2 {
 margin-bottom:30px
}
.secTopService .secTopServiceInner .secTopServiceBox .secTopServiceBoxCont p {
 font-size:1.4rem;
 margin-bottom:30px
}
@media screen and (min-width: 769px) {
 .secTopService .secTopServiceInner .secTopServiceBox .secTopServiceBoxCont p {
  font-size:1.6rem
 }
}
@media screen and (min-width: 769px) {
 .secTopService .secTopServiceInner .secTopServiceBox .secTopServiceBoxCont .btn01 a {
  margin:0
 }
}
.secTopService .secTopServiceInner .secTopServiceBox .secTopServiceBoxImg {
 display:none
}
@media screen and (min-width: 769px) {
 .secTopService .secTopServiceInner .secTopServiceBox .secTopServiceBoxImg {
  display:block;
  width:calc(100% / 3)
 }
}
.secTopService .secTopServiceInner .secTopServiceBox .secTopServiceBoxImg img {
 width:100%;
 opacity:0;
 transform:translateY(20px);
 transition:all .3s .8s
}
.secTopService .secTopServiceInner.active img {
 transform:translateY(0px);
 opacity:1
}
.secTopService .secTopServiceInner.active .secTopServiceBox .secTopServiceBoxImg img {
 transform:translateY(0px);
 opacity:1
}
.secCompany {
 background:#e6eef9;
 width:100%;
 max-width:100%;
 padding:40px 15px
}
@media screen and (min-width: 769px) {
 .secCompany {
  padding:180px 15px
 }
}
.secCompany .secCompanyInner {
 width:100%;
 max-width:1440px;
 margin:0 auto
}
.secCompany .secCompanyInner h2 {
 margin-bottom:25px
}
@media screen and (min-width: 769px) {
 .secCompany .secCompanyInner h2 {
  margin-bottom:4%
 }
}
.secCompany .secCompanyInner .secCompanyBox {
 display:block
}
@media screen and (min-width: 769px) {
 .secCompany .secCompanyInner .secCompanyBox {
  display:flex;
  justify-content:space-between
 }
}
.secCompany .secCompanyInner .secCompanyBox .accessR {
 width:100%;
 margin-bottom:40px
}
@media screen and (min-width: 769px) {
 .secCompany .secCompanyInner .secCompanyBox .accessR {
  width:48%;
  margin-bottom:0
 }
}
.secCompany .secCompanyInner .secCompanyBox .accessR .googlemapLink {
 display:flex;
 justify-content:center
}
.secCompany .secCompanyInner .secCompanyBox .accessR .googlemapLink a {
 background:#fff;
 transition:all .3s
}
.secCompany .secCompanyInner .secCompanyBox .accessR .googlemapLink a:hover {
 background:#c11e3a
}
.secCompany .secCompanyInner .secCompanyBox .accessL {
 width:100%
}
@media screen and (min-width: 769px) {
 .secCompany .secCompanyInner .secCompanyBox .accessL {
  width:48%
 }
}
.secCompany .secCompanyInner .secCompanyBox .accessL .googlemap iframe {
 width:100%;
 height:40vh;
 border:none
}
@media screen and (min-width: 481px) {
 .secCompany .secCompanyInner .secCompanyBox .accessL .googlemap iframe {
  height:48vh
 }
}