@charset "UTF-8";
/*
** import core file
*/
/*
** -- two point
*/
/*---------------
  subnav
----------------*/
/*
** -- three point
@mixin break-pc {//pcのみ
	@media screen and (min-width:961px) {
		@content;
	}
}
@mixin break-pc-tab {//pcとtab共通
	@media screen and (min-width:768px) {
		@content;
	}
}
@mixin break-tab-sp {//tabとsp共通
	@media screen and (max-width:960px) {
		@content;
	}
}
@mixin break-tab {//tabのみ
	@media screen and (max-width:960px) and (min-width:768px) {
		@content;
	}
}
@mixin break-sp {//spのみ
	@media screen and (max-width:767px) {
		@content;
	}
}
@mixin break-sps {//iphone5/SE
	@media screen and (max-width:374px) { @content; }
}
*/
/*
** -- two point
*/
/*---------------
  subnav
----------------*/
/*
** -- three point
@mixin break-pc {//pcのみ
	@media screen and (min-width:961px) {
		@content;
	}
}
@mixin break-pc-tab {//pcとtab共通
	@media screen and (min-width:768px) {
		@content;
	}
}
@mixin break-tab-sp {//tabとsp共通
	@media screen and (max-width:960px) {
		@content;
	}
}
@mixin break-tab {//tabのみ
	@media screen and (max-width:960px) and (min-width:768px) {
		@content;
	}
}
@mixin break-sp {//spのみ
	@media screen and (max-width:767px) {
		@content;
	}
}
@mixin break-sps {//iphone5/SE
	@media screen and (max-width:374px) { @content; }
}
*/
/*
@include animation(scrollpoint,2.5,ease,0,infinite,normal,forwards);
<div class="scroll">
	<a href="#indexSolving">scroll</a>
	<span class="bar"></span>
</div>
*/
/*
&:before {
	content:'';
	@include sizes(1px,50px);
	display: block;
	background: #333;
	position: absolute;
	top:0;left:0;right:0;
	margin:auto;
	@include animation ( down-border, 2, ease, 0, infinite,normal,forwards);
	@include transform( translate3d(0,0,0) );
}
*/
/*==================================================

** index
==================================================*/
#topVisual {
  overflow: hidden;
  position: relative;
  height: 682px;
  background: url("../img/index/index_visual_bg.jpg") repeat-x center center;
  animation: slide 60s linear infinite; }
@keyframes slide {
  0% {
    background-position: 0px center; }
  100% {
    background-position: -2403px center; } }
  #topVisual .txtbox {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    margin: 0 auto; }
  #topVisual .logo {
    margin: 0 auto;
    width: 69px; }
  #topVisual h2 {
    margin-top: 15px;
    font-size: 6rem;
    line-height: 1; }
  #topVisual p {
    margin-top: 10px;
    font-size: 2.4rem;
    line-height: 1.5; }

#topAboutus {
  margin-top: 120px; }
  #topAboutus .txtbox {
    width: 44.3%; }
  #topAboutus .phtbox {
    width: 55.7%;
    height: 550px; }
    #topAboutus .phtbox img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;
      font-family: 'object-fit: cover;'; }
  #topAboutus .box {
    margin: 0 0 0 auto;
    padding: 0 50px 0 0;
    width: 522px; }
    #topAboutus .box h2 {
      margin: 60px 0 0;
      line-height: 1.7;
      text-align: left; }
      #topAboutus .box h2 .en {
        position: relative;
        margin-bottom: 15px;
        padding: 0 0 0 25px;
        color: #444; }
        #topAboutus .box h2 .en:before {
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          display: block;
          content: '';
          width: 17px;
          height: 1px;
          background: #444; }
      #topAboutus .box h2 + p {
        margin-top: 40px; }
  #topAboutus .linkbtn {
    margin-top: 35px; }
    #topAboutus .linkbtn a {
      max-width: 350px; }

#topServices {
  margin-top: 110px; }
  #topServices > :first-child {
    margin-top: 0; }
  #topServices .morebtn {
    margin-top: 70px; }
    #topServices .morebtn a {
      max-width: 400px;
      margin: auto;
      padding: 18px; }

@media screen and (max-width: 600px) {
  #topVisual {
    height: 640px; }
  @keyframes slide {
    0% {
      background-position: 0px center; }
    100% {
      background-position: -2256px center; } }
    #topVisual h2 {
      font-size: 3.4rem; }
    #topVisual p {
      margin-top: 15px;
      font-size: 2rem; }

  #topAboutus {
    margin-top: 80px; }
    #topAboutus .txtbox {
      width: 100%; }
    #topAboutus .phtbox {
      width: 100%;
      height: auto; }
    #topAboutus .box {
      margin: 0 auto;
      padding: 0;
      width: 90%; }
      #topAboutus .box h2 {
        margin-top: 45px;
        font-size: 2.8rem; }
        #topAboutus .box h2 + p {
          margin-top: 30px; }
    #topAboutus .linkbtn {
      margin-top: 45px; }
      #topAboutus .linkbtn a {
        max-width: 100%; }

  #topServices {
    margin-top: 70px; }
    #topServices h2 {
      font-size: 2.8rem; }
    #topServices .morebtn a {
      max-width: 100%; } }
@media screen and (max-width: 374px) {
  #topVisual {
    background-size: 1410px 400px;
    height: 400px; }
  @keyframes slide {
    0% {
      background-position: 0px center; }
    100% {
      background-position: -1410px center; } }
    #topVisual h2 {
      font-size: 2.8rem; } }