@charset "UTF-8";
/* --------------------------------
 * base
 * -------------------------------- */
html {
  font-size: 62.5%;
}

body {
  color: #000;
  text-align: center;
  font-size: 1.8rem;
  font-family: A1 Mincho, serif;
  /*  padding: 110px 0 0;*/
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

ul {
  padding: 0;
}

/* --------------------------------
 * common
 * -------------------------------- */
section {
  max-width: 900px;
  margin: 60px auto 0;
  display: block;
}

.heading {
  font-size: 6rem;
  margin: 0 0 110px;
}

.menu-icon {
  display: block;
}
.menu-icon li {
  display: inline-block;
  margin: 0 60px;
}
.menu-icon li img {
  width: 70%;
}
.menu-icon li a {
  color: #000;
}
.menu-icon li a:hover {
  opacity: 0.8;
}
.menu-icon li p {
  font-size: 1.3rem;
}

.mt-0 {
  margin-top: 0 !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.br-sp {
  display: none;
}

/* --------------------------------
 * top
 * -------------------------------- */
/* ----- top動画ファイル ----- */
.top-video {
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 2;
}

video {
  width: 100%;
  height: auto;
}

video.view-pc {
  display: block;
}

video.view-sp {
  display: none;
}

#top .top-eyecatchArea {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
#top .menu-icon {
  margin: 70px auto 100px;
}

/* アニメーション設定 */
.top-arrowWrap {
  margin-bottom: 30px;
  z-index: 2;
  width: 100%;
}

.top-arrow {
  margin: 0 auto;
  -webkit-animation: arrow 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0s infinite
    alternate;
  animation: arrow 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0s infinite
    alternate;
}

.top-arrow span {
  position: relative;
  display: block;
  left: 50%;
}

@keyframes arrow {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
  100% {
    opacity: 0.5;
    -webkit-transform: translate3d(-50%, -8px, 0);
    transform: translate3d(-50%, -8px, 0);
  }
}
/* --------------------------------
 * fadein
 * -------------------------------- */
.fadein {
  opacity: 0;
  transition: all 3s;
}

.fadein.scrollin {
  opacity: 1;
}

/* --------------------------------
 * poster fadein
 * -------------------------------- */

.poster-fadein {
  animation-name: fadein;
  animation-duration: 7s;
}

@keyframes fadein {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* --------------------------------
 * shizen
 * -------------------------------- */
body#shizen {
  padding-top: 110px;
}

/* --------------------------------
 * sumu
 * -------------------------------- */
body#sumu {
  padding-top: 110px;
}

/* --------------------------------
 * fureai
 * -------------------------------- */
body#fureai {
  padding-top: 110px;
}

/* --------------------------------
 * header
 * -------------------------------- */
.header {
  display: none;
}

.bg {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  z-index: 0;
}

/* --------------------------------
 * intro
 * -------------------------------- */
.intro {
  padding: 84px 1.5rem 124px;
  max-width: 900px;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.95);
  position: relative;
  z-index: 2;
}

.intro-title {
  margin: 0;
}

.intro-description {
  margin: 84px 0 0;
  line-height: 2.125;
}

/* --------------------------------
 * content
 * -------------------------------- */
.content {
  padding: 120px 46px;
  background-color: rgba(255, 255, 255, 0.95);
  position: relative;
  z-index: 2;
}
.content img {
  display: block;
  width: 100%;
  margin: 115px auto 0;
}

.content-text {
  margin: 0 auto;
  line-height: 2.125;
}

.content-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
  width: 60%;  margin: 120px auto 0;
}
.content-menu-item {
  padding: 2rem;
  list-style: none;
  width: 30%;
}
.content-menu-item img {
  width: 50%;
}
.content-menu-item a {
  color: #000;
}
.content-menu-item a:hover {
  opacity: 0.8;
}
.content-menu-item p {
  font-size: 1.4rem;
}

.content-bodyWrap {
  margin-top: 220px;
}
.content-title {
  font-size: 3rem;
}
.content-subtitle {
}
.content-flex--pc {
  display: flex;
  flex-wrap: wrap;
  margin: 40px 0;
}
.content-flex-item {
  list-style: none;
  padding: 2rem;
  width: 50%;
}
.content-flex--sp {
  display: none;
}
/* --------------------------------
 * footer
 * -------------------------------- */
#footer {
  margin-top: 100px;
  padding: 100px 0 30px 0;
  background-color: #fff;
  position: relative;
  z-index: 2;
}
#footer .menu-icon {
  margin: 0 auto;
}

.footer {
  width: 100%;
  background-color: #fff;
  min-height: 142px;
}
.footer-link {
  font-size: 1.4rem;
  margin: 50px auto 0;
}
.footer-link li {
  display: inline-block;
  margin: 0 100px;
}
.footer-link a {
  color: #000;
}
.footer-link a:hover {
  opacity: 0.8;
}
.footer-copyright {
  font-size: 1.2rem;
  display: block;
  margin: 0 auto;
  line-height: 3.2rem;
}
.footer-copyright img {
  margin-left: 1rem;
  vertical-align: bottom;
}
.footer-copyright a:hover {
  opacity: 0.8;
}

.footer-shizen,
.footer-sumu,
.footer-fureai {
  background: #fff url("../../img/haraisogumi/line_footer.png") no-repeat center
    center;
  width: 100%;
  min-height: 142px;
}

/* --------------------------------
 * smart phone
 * -------------------------------- */
@media (max-width: 768px) {
  body {
    font-size: 1.6rem;
  }

  .heading {
    margin-top: 20px;
    font-size: 2.5rem;
  }
}

@media (max-width: 460px) {
  .mt-sp-0 {
    margin-top: 0 !important;
  }

  .pt-sp-0 {
    padding-top: 0 !important;
  }

  .br-pc {
    display: none;
  }

  .br-sp {
    display: block;
  }

  /* --- #shizen --- */
  body#shizen {
    padding-top: 0;
  }

  /* --- #sumu --- */
  body#sumu {
    padding-top: 0;
  }

  /* --- #fureai --- */
  body#fureai {
    padding-top: 0;
  }

  /* --- header --- */
  .header {
    position: relative;
    display: block;
    height: 100vh;
    z-index: 2;
  }

  .bg {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center center;
    z-index: 0;
  }
.bg-index {
  width: 100vw;
  height: 100vh;
  left: 50%;
  top: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  transition: all 1s ease-out;
}
  .bg-index.active {
    width: calc(100vh * 1.4996591684);
    height: 100vh;
  }
#sumu .bg-index {
  width: 100vw;
  height: 100vh;
  left: 72%;
  top: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  transition: all 1s ease-out;
}
#sumu .bg-index.active {
    width: calc(100vh * 1.4996591684);
    height: 100vh;
  }
  .site-title {
    display: block;
    position: absolute;
    left: 50%;
    top: 40%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  .site-title img {
    max-height: 30px;
    max-width: 310px;
  }

  /* --- content --- */
  .content {
    padding: 120px 1.5rem;
  }
.content img + img {
  margin-top: 60px;
}
.content-menu {
  width: 100%;  margin: 120px auto 0;
}
.content-menu-item {
  padding: 1rem 2rem;
  list-style: none;
  width: 33%;
}
.content-menu-item img {
  width: 80%;
}
.content-flex--pc {
  display: none;
}
.content-flex--sp {
  display: flex;
  flex-wrap: wrap;
  margin: 40px auto;
}
.content-flex--sp .content-flex-item {
  list-style: none;
  padding: 0;
  width: 48%;
}
.content-flex--sp .content-flex-item:nth-child(odd){
  margin-bottom: 1rem;
}
.content-flex--sp .content-flex-item:nth-child(even){
  margin-left: 1rem;
}
  /* --- footer --- */
  #footer {
    padding-top: 40px;
  }
  #footer .footer-link li {
    margin: 0 10px;
  }
  #footer .menu-icon {
    display: block;
    margin: 0 auto;
    width: 100%;
  }
  #footer .menu-icon li {
    margin: 0;
    width: 30%;
  }
  #footer .menu-icon li img {
    width: 60%;
  }

  /* ----- top動画ファイル ----- */
  .top-video {
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 2;
  }

  video {
    width: 100%;
    height: auto;
  }

  video.view-sp {
    display: block;
  }

  video.view-pc {
    display: none;
  }

  .top-eyecatchArea {
    height: 100vh;
    position: relative;
  }

  /* top-arrow　アニメーション設定 */
  .top-arrowWrap {
    display: block;
  }

  .top-arrow {
    margin: 0 auto;
    -webkit-animation: arrow 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0s
      infinite alternate;
    animation: arrow 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0s infinite
      alternate;
    display: block;
    left: 50%;
    bottom: 20px;
    position: absolute;
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
  }

  @keyframes arrow {
    0% {
      opacity: 1;
      -webkit-transform: translate3d(-50%, 0, 0);
      transform: translate3d(-50%, 0, 0);
    }
    100% {
      opacity: 0.5;
      -webkit-transform: translate3d(-50%, -8px, 0);
      transform: translate3d(-50%, -8px, 0);
    }
  }
  /* content-arrow　アニメーション設定 */
  .content-arrowWrap {
    display: block;
  }

  .content-arrow {
    margin: 0 auto;
    -webkit-animation: arrow 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0s
      infinite alternate;
    animation: arrow 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0s infinite
      alternate;
    display: block;
    left: 50%;
    bottom: 80px;
    position: absolute;
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
  }

  @keyframes arrow {
    0% {
      opacity: 1;
      -webkit-transform: translate3d(-50%, 0, 0);
      transform: translate3d(-50%, 0, 0);
    }
    100% {
      opacity: 0.5;
      -webkit-transform: translate3d(-50%, -8px, 0);
      transform: translate3d(-50%, -8px, 0);
    }
  }
} /* smart phone end */