@charset "UTF-8";
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

body {
  font-size: 14px;
  line-height: 1.4;
  font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN","メイリオ", Meiryo, sans-serif;
  color: #333; }

.wd {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
  position: relative; }

a[href^="tel:"] { cursor: default; }

.tit {
  text-align: center; }

.cf:before,
.cf:after {
  content: " ";
  display: table; }

.cf:after {
  clear: both; }

.cf {
  *zoom: 1; }

.pc {
  display: block; }

img.pc {
  display: inline; }

.sp {
  display: none; }

img.sp {
  display: none; }


img { line-height: 0; vertical-align: bottom;}


header,section,footer { min-width: 960px; }
header {
  text-align: center;
  background: url(images/header_bg.jpg) center top no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}
header p { opacity: 0; transition-duration:1.5s; transition-delay:1s; }
header.anim p { opacity: 1; }

#mv {
  text-align: center;
  background: url(images/mv_bg.jpg) center bottom no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  margin-bottom: 1em;
}

#mv .mvSent { position: relative; top: -4vw; }
#mv .bg {
  position: absolute;
  z-index: -1;
  top: 0;
  width: 100%;
}
#mv .bg img { width: 100%; height: auto;}

#mv .mvSent p { padding-top: 22vw; }
/*mvアニメーションエリア*/
#mv h1,#mv h2, #mv .catch,#mv p {
  position: relative;
  opacity: 0;
  transition-delay: 2s;
  transition-duration:1s;
}
#mv h2 {
  top: -1.2vw;
  transition-delay: 2.8s;
  transition-duration:1.5s;
}
#mv.anim p {
  transition:opacity 1s ease 2.8s;
}
#mv.anim h1,#mv.anim h2,#mv.anim .catch,#mv.anim p {
  opacity: 1;
  top: 0;
}





#feature {
  background: url(images/feature_bg.jpg) center center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}
#feature .secIn {
  width: 960px;
  margin: auto;
  padding: 3.5em 0 3em;
  text-align: center;
  position: relative;
}

/*featureアニメーションエリア*/
#feature h2,#feature h3, #feature .left, #feature .right {
  opacity: 0;
  transition-duration:1s;
  transition-delay: 1s;
}
#feature h2 {
  top: -1.5vw;
  transition-delay: 2s;
}
#feature .left { left: -50px; }
#feature .right { right: -70px; }
#feature.anim h2,#feature.anim h3, #feature.anim .left, #feature.anim .right  {
  opacity: 1;
}
#feature .left,
#feature .right {
  position: absolute;
  top: 50px;
}
#feature.anim .left {
  left: -30px;
}
#feature.anim .right {
  right: -50px;
}


#lineup {
  width: 960px;
  margin: auto;
  padding: 4em 0 3em;
  text-align: center;
}
#lineup .txtArea {
  display: flex;
  justify-content:space-between;
  margin: -2.5em 0 1em;
}
#lineup .txtArea .left { padding-left: 15px; }
#lineup .lineupItems {
  display: flex;
  justify-content:space-between;
}
#lineup .lineupItems .lineupItem { width: 448px; }
#lineup .lineupItems .lineupItem.left { padding-left: 15px; }


/*lineupアニメーションエリア*/
#lineup .tit,#lineup h2,#lineup .lineupItem  {
  opacity: 0;
  transition-duration:1s;
  transition-delay: 2s;
}
#lineup .tit { transition-delay: 1s; }
#lineup .lineupItem {
  position: relative;
  top: -1.5vw;
  transition-delay: 0.5s;
}

#lineup.anim .tit,#lineup.anim h2,#lineup.anim h3,#lineup.anim p  {
  opacity: 1;
}
#lineup .lineupItem.anim {
  opacity: 1;
  top: 0;
}


#awards {
  background: #d2ecfa;
}
#awards .secIn {
  width: 960px;
  margin: auto;
  padding: 4em 0 3em;
  text-align: center;
}
#awards .awardsWrap {
  width: 960px;
  display: flex;
  justify-content:space-between;
  margin-top: 1.5em;
}
#awards .left { width: 511px; }
#awards .right { width: 449px; }

/*awardsアニメーションエリア*/
#awards .tit, #awards h2, #awards .left, #awards .right  {
  opacity: 0;
  transition-duration:1s;
  transition-delay: 2s;
}
#awards .tit {
  transition-delay: 1s;
}
#awards .left, #awards .right {
  position: relative;
  top: -1.5vw;
}
#awards.anim .tit, #awards.anim h2, #awards.anim .left, #awards.anim .right  {
  opacity: 1;
  top: 0;
}


footer {
  width: 960px;
  margin:4.5em auto 2.5em;
  text-align: center;
}

footer .btn {
  width: 250px;
  margin:0 auto 3.8em;
  transition-duration:0.5s;
}
footer .btn:hover { opacity: 0.7; }

footer .companyInfo, footer .freedial {
  display: flex;
  justify-content: center; /* 横方向中央揃え */
}

/*sp*/
@media screen and (max-width: 736px) {
  .pc { display: none; }
  img.pc { display: none; }
  .sp { display: block; }
  img.sp { display: inline; }

  body { font-size: 13px; }
  img { width: 100%; height: auto; }

  .wd { width: 100%; }

  header,section,footer { min-width: 100%; }


  #mv {
    margin-bottom: 1.5em;
  }
  #mv h1 { width: 96vw; }
  #mv .catch { width: 92vw; }
  #mv h2 {  top: -5vw;}

  #mv .mvSent p { padding-top: 26vw; }

  #feature {
    background: url(images/sp_feature_bg.jpg) center center no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
  }
  #feature .secIn {
    width: 100%;
    padding:3em 0 0.25em;
    overflow: hidden;
  }
  #feature h2 { margin-bottom: 1.5em;  transition-delay: 1s; }
  #feature .ico { position: relative; top: -1vw; }
  #feature .left,
  #feature .right {
    position: relative;
    width: 70%;
    margin:0 auto 1.5em;
    transition-delay: 2s;
    top: auto;
  }
  #feature .left { left: 3%; }
  #feature .right { right: 3%; transition-delay:3s;}
  #feature.anim .left { left: 0; }
  #feature.anim .right { right: 0; }

  #lineup {
    width: 100%;
    padding: 3em 0 1.5em;
  }
  #lineup .tit { margin-bottom: 1em; }
  #lineup h2 { margin-bottom: 1em; }
  #lineup .txtArea {
    flex-direction: column;
    width: 70%;
    margin: 0 auto 1.5em;
  }
  #lineup .txtArea .left ,
  #lineup .txtArea .right { margin-top: -1.5vw; }
  #lineup .txtArea .left { padding-left: 0; }
  #lineup .lineupItems {
    flex-direction: column;
  }
  #lineup .lineupItem { top: -4vw; }
  #lineup .lineupItems .lineupItem {
    width: 70%;
    margin: 0 auto 1.5em;
  }
  #lineup .lineupItems .lineupItem.left { padding-left: 0; }

  #awards .secIn {
    width: 100%;
    padding: 3em 0 3em;
  }
  #awards .tit { margin-bottom: 0.25em; }
  #awards .awardsWrap {
    flex-direction: column;
    margin-top: 1em;
    width: 100%;
  }
  #awards .left, #awards .right { top: -4vw; }
  #awards .awardsWrap .left { width: 100%; }
  #awards .awardsWrap .right {
    width: 84%;
    margin: 1em auto 0;
  }

  footer {
    overflow: hidden;
    width: 100%;
    margin:3.5em auto 2em;
    text-align: center;
  }
  footer .btn {
    width: 70%;
    margin:0 auto 3.3em;
    transition-duration:0.5s;
  }
  footer .btn:hover { opacity: 0.7; }

  footer .companyInfo {
    display: flex;
    justify-content: center; /* 横方向中央揃え */
  }
  footer .companyInfo .post { width: 50%; }
  footer .companyInfo .tel { width: 22.5%; }
  footer .companyInfo .fax { width: 27.5%; }

  footer .freedial .freedialInfo { width: 60%; }
  footer .freedial .webInfo { width: 40%; }
}



/*iPhone5*/
@media screen and (max-width: 320px) {
  body { font-size: 11px; }
}
