@charset "UTF-8";
/* 
  css設定 @charsetが消されるsass仕様へのハック用コメントです。削除しないでください。新規作成時も必須！
 */
#top .site-header {
  position: absolute;
}

@media screen and (max-width: 768px) {
  #top .site-header {
    position: fixed;
  }
}

#top .mainVisual {
  position: relative;
}

#top .mainVisual .movie {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: 20;
  background-color: #000;
}

#top .mainVisual .movie video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  transform: translate(-50%, -50%);
}

#top .mainVisual .bg {
  opacity: 1;
}

#top .mainVisual .thumbs {
  position: absolute;
  bottom: 20rem;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 10;
}

#top .mainVisual .thumbs li {
  display: inline-block;
  width: 10rem;
  height: 10rem;
  border: 1px solid #5C5E62;
  background-color: #5C5E62;
  transition: background-color .5s;
  margin-right: 15rem;
  z-index: 10;
  cursor: pointer;
}

#top .mainVisual .thumbs li:last-child {
  margin-right: 0;
}

#top .mainVisual .thumbs li.on {
  pointer-events: none;
  background-color: #fff;
}

#top .mainVisual .scenes {
  position: relative;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

#top .mainVisual .scenes .images {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 2.5s;
}

#top .mainVisual .scenes .images.on {
  opacity: 1;
}

#top .mainVisual .scenes .text01 {
  position: absolute;
  bottom: 12%;
  right: 4%;
  text-align: right;
  font-size: 40rem;
  line-height: 1.8;
  letter-spacing: 8rem;
  color: #fff;
  z-index: 19;
}

#top .apeal {
  display: none;
  background-color: #3D6042;
  padding: 26rem 0 29rem;
}

#top .apeal .wrap {
  max-width: 940rem;
}

#top .intro {
  display: none;
  padding-bottom: 70rem;
  background: url(../images/top/bg-intro.jpg) no-repeat top center;
  background-size: cover;
}

#top .intro .point {
  padding: 50rem 0 122rem;
}

#top .intro .point .wrap {
  max-width: 1200rem;
}

#top .intro .information {
  text-align: center;
}

#top .intro .information .title {
  font-size: 20rem;
  line-height: 1.6;
  font-weight: normal;
  padding-bottom: 40rem;
}

#top .intro .information .info-lead {
  font-size: 27rem;
  line-height: 1.8;
  padding-bottom: 60rem;
}

#top .intro .information .entryButton {
  max-width: 360rem;
  width: 40%;
  padding-bottom: 55rem;
  margin: 40px auto 0;
  display: inline-block;
}

#top .intro .information .entryButton.last {
  margin-left: 2%;
}

#top .intro .information .text01 {
  font-size: 13rem;
  line-height: 2;
}

#top .intro .information .text01 + .text01 {
  padding-top: 30rem;
  padding-bottom: 40rem;
}

#top .intro .information .text02 {
  font-size: 13rem;
  line-height: 2;
  border: 1px solid;
  display: inline-block;
  padding: 14px 30px;
  margin-bottom: 50rem;
}

#top .intro .information .box {
  padding: 40rem;
  margin: 0 auto;
  box-sizing: border-box;
  max-width: 800rem;
  box-shadow: 0px 0px 20px #ccc;
}

#top .intro .information .box .entryButton {
  width: 100%;
}

#top .intro .information .box a {
  font-size: 16rem;
}

#top .intro .information .box a span {
  letter-spacing: .05em;
}

#top .intro .information .box .in {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#top .intro .information .box .img {
  width: 45%;
}

#top .intro .information .box .texts {
  width: 50%;
  text-align: left;
}

#top .intro .information .box .texts .text01 {
  text-align: center;
  font-size: 16rem;
  line-height: 2;
  padding-bottom: 20rem;
}

#top .intro .information .box .entryButton {
  padding-bottom: 0;
}

#top .intro .flow .title {
  font-size: 13rem;
  position: relative;
  text-align: center;
  overflow: hidden;
  margin-bottom: 50rem;
}

#top .intro .flow .title span {
  display: inline-block;
  position: relative;
  padding: 0 8rem;
}

#top .intro .flow .title span::before, #top .intro .flow .title span::after {
  content: "";
  position: absolute;
  display: block;
  width: 1000rem;
  height: 1px;
  background-color: #3D6042;
  top: 50%;
}

#top .intro .flow .title span::before {
  left: 100%;
}

#top .intro .flow .title span::after {
  right: 100%;
}

#top .intro .flow .steps {
  display: flex;
  justify-content: space-between;
}

#top .intro .flow .steps .text01 {
  font-size: 18rem;
  line-height: 1.5;
  padding-bottom: 20rem;
}

#top .intro .flow .steps .text02 {
  font-size: 13rem;
  line-height: 2;
}

#top .intro .flow .steps li {
  width: 30%;
  position: relative;
}

#top .intro .flow .steps li:last-child .image::after {
  display: none;
}

#top .intro .flow .steps .image {
  position: relative;
  border: 5px solid #3D6042;
  margin-bottom: 25rem;
}

#top .intro .flow .steps .image::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 28rem;
  display: block;
  border-top: 15rem solid transparent;
  border-left: 15rem solid #26402A;
  border-bottom: 15rem solid transparent;
}

#top .intro .flow .steps .image .caption {
  background-color: #3D6042;
}

#top .intro .flow .steps .image .mark {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  width: 55rem;
}

#top .bnr {
  display: none;
  position: relative;
  max-width: 800rem;
  margin: 0 auto 170rem;
  padding: 10px;
}

#top .bnr.my2ldk, #top .bnr.voice02 {
  margin: 0 auto 50rem;
}

#top .bnr .new {
  position: absolute;
  max-width: 100px;
  top: -20px;
  left: 0;
}

#top .concept {
  display: none;
  position: relative;
}

#top .concept .title {
  font-size: 20rem;
  line-height: 1.3;
  text-align: center;
}

#top .concept .image {
  position: relative;
}

#top .concept .image .bg {
  opacity: 0;
}

#top .concept .image .parth {
  position: absolute;
  bottom: 0;
  right: -1.5%;
  width: 62%;
  z-index: 4;
}

#top .concept .image .message {
  position: absolute;
  bottom: 7.5%;
  left: 18.8%;
  width: 31.2%;
  z-index: 2;
  opacity: 0;
  filter: blur(4px);
  transition: opacity 1.0s,filter 1.3s;
}

#top .concept .image .message.on {
  opacity: 1;
  filter: blur(0px);
}

#top .concept .image .back {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 34.2%;
  z-index: 1;
  opacity: 0;
  filter: blur(4px);
  transition: opacity 1.0s,filter 1.3s;
}

#top .concept .image .back.on {
  opacity: 1;
  filter: blur(0px);
}

#top .concept .image .front {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

#top .concept .image .front li {
  position: absolute;
  bottom: 0;
  opacity: 0;
  filter: blur(4px);
  transition: opacity 1.0s,filter 1.3s;
}

#top .concept .image .front li.on {
  opacity: 1;
  filter: blur(0px);
}

#top .concept .image .front .left-side {
  left: 0;
  width: 100%;
}

#top .concept .image .front .center {
  left: 0.4%;
  width: 86.5%;
}

#top .concept .image .front .right-side {
  right: 0;
  width: 100%;
}

#top .content {
  display: none;
  padding: 240rem 0 230rem;
  background: url(../images/top/bg-content.jpg) no-repeat top center;
  background-size: cover;
}

#top .sections {
  margin: 0 auto;
  width: 90%;
  max-width: 940rem;
  position: relative;
  height: 566rem;
  margin-bottom: 170rem;
}

#top .sections .title {
  position: absolute;
  font-size: 30rem;
  line-height: 1.5;
  font-weight: normal;
  top: 0;
}

#top .sections .texts {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  position: absolute;
  z-index: 2;
}

#top .sections .texts .text01 {
  font-size: 24rem;
  line-height: 1.8;
  padding-left: 12rem;
}

#top .sections .texts .text01 span {
  text-combine-upright: all;
  padding-bottom: 7px;
  margin-top: -2px;
}

#top .sections .texts .text01 sup {
  text-combine-upright: all;
}

#top .sections .texts .text02 {
  font-size: 13rem;
  line-height: 2.2;
}

#top .sections .images {
  margin: 0 auto;
  position: relative;
  height: 522rem;
}

#top .sections .images::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  background-color: #3D6042;
  border-radius: 8rem;
  width: 80%;
}

#top .sections .images .image {
  position: absolute;
  z-index: 2;
}

#top .sections .button {
  position: absolute;
  padding: 22rem;
  width: 90%;
  max-width: 355rem;
  text-align: center;
  font-size: 14rem;
  z-index: 2;
  background-color: #26402A;
  color: #fff;
  box-sizing: border-box;
  border: 4rem solid #fff;
  border-radius: 10rem;
  overflow: hidden;
  transition: background-color .5s;
}

#top .sections .button::after {
  content: "";
  display: block;
  position: absolute;
  background: url(../images/top/arrow.svg) no-repeat center;
  background-size: 16rem 16rem;
  width: 16rem;
  height: 16rem;
  right: 22rem;
  top: 50%;
  transform: translateY(-50%);
}

#top .sections .button .txts {
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 1em;
}

#top .sections .button .txts .in {
  display: block;
  position: relative;
  transition: transform .5s;
  transform: translateY(0%);
}

#top .sections .button .txt02 {
  position: absolute;
  left: 0;
  top: 100%;
}

#top .sections a {
  color: #3D6042;
  display: block;
}

#top .sections a:hover {
  opacity: 1 !important;
}

#top .sections a:hover .button {
  background-color: #3D6042;
}

#top .sections a:hover .button .txts .in {
  transform: translateY(-101%);
}

#top .section-position .texts {
  right: 0;
  bottom: 0;
}

#top .section-position .button {
  top: 80rem;
}

#top .section-position .images {
  width: 676rem;
}

#top .section-position .images::after {
  bottom: 0;
  left: 14%;
  width: 75%;
  height: 98%;
}

#top .section-position .images .image02 {
  width: 415rem;
  bottom: 18rem;
  left: 0;
}

#top .section-position .images .image01 {
  width: 304rem;
  top: 0rem;
  right: 0;
  z-index: 3;
}

#top .section-access .title {
  right: 0;
}

#top .section-access .texts {
  left: 0;
  top: 0;
}

#top .section-access .button {
  bottom: -35rem;
  right: 40rem;
}

#top .section-access a {
  padding-top: 60rem;
}

#top .section-access .images {
  width: 787rem;
}

#top .section-access .images::after {
  bottom: 0;
  left: 29%;
  width: 45%;
  height: 98%;
}

#top .section-access .images .image02 {
  width: 308rem;
  bottom: -58rem;
  left: 40rem;
  z-index: 3;
}

#top .section-access .images .image01 {
  width: 483rem;
  top: 100rem;
  right: 10rem;
}

#top .section-location .texts {
  right: 0;
  top: 0;
}

#top .section-location a {
  padding-top: 100rem;
}

#top .section-location .button {
  bottom: 50rem;
}

#top .section-location .images {
  width: 800rem;
}

#top .section-location .images::after {
  bottom: 0;
  left: 29%;
  width: 45%;
  height: 62%;
}

#top .section-location .images .image01 {
  width: 415rem;
  top: 48rem;
  left: 0;
}

#top .section-location .images .image02 {
  width: 304rem;
  bottom: 0rem;
  right: -30rem;
  z-index: 3;
}

#top .section-design .texts {
  right: 0;
  top: 0;
}

#top .section-design a {
  padding-top: 70rem;
}

#top .section-design .button {
  bottom: 50rem;
  left: auto;
  right: 40rem;
}

#top .section-design .images {
  margin-left: 0;
  width: 710rem;
}

#top .section-design .images::after {
  bottom: 0;
  left: 19%;
  width: 55%;
  height: 62%;
}

#top .section-design .images .image01 {
  width: 415rem;
  top: 48rem;
  right: 40rem;
}

#top .section-design .images .image02 {
  width: 344rem;
  bottom: 0rem;
  left: 0rem;
  z-index: 3;
}

#top .section-plan {
  height: 714rem;
}

#top .section-plan .title {
  right: 0;
}

#top .section-plan .texts {
  left: 0;
  top: 100rem;
}

#top .section-plan .button {
  bottom: 75rem;
  right: 0rem;
}

#top .section-plan .images {
  width: 753rem;
  height: 714rem;
}

#top .section-plan .images::after {
  bottom: 0;
  left: 29%;
  width: 45%;
  height: 98%;
}

#top .section-plan .images .image02 {
  width: 308rem;
  bottom: 38rem;
  left: 48rem;
  z-index: 3;
}

#top .section-plan .images .image01 {
  width: 415rem;
  top: 100rem;
  right: 50rem;
}

#top .section-lgente .texts {
  right: 0;
  top: 0;
}

#top .section-lgente a {
  padding-top: 100rem;
}

#top .section-lgente .button {
  bottom: 50rem;
  left: 0;
}

#top .section-lgente .images {
  margin-left: 30rem;
  width: 850rem;
}

#top .section-lgente .images::after {
  bottom: 0;
  left: 30%;
  width: 65%;
  height: 32%;
}

#top .section-lgente .images .image01 {
  width: 315rem;
  top: 0rem;
  left: 145rem;
}

#top .section-lgente .images .image02 {
  width: 334rem;
  bottom: 20rem;
  left: 390rem;
  z-index: 3;
}

#top #fixed {
  display: none;
  position: fixed;
  max-width: 260px;
  width: 50%;
  bottom: 200px;
  right: 0;
  z-index: 10000;
}

#top #fixed .close {
  display: block;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  width: 25px;
}

@media (max-width: 768px) {
  #top .mainVisual .scenes .text01 {
    font-size: 28rem;
    line-height: 2;
    letter-spacing: 10rem;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
  }
  #top .apeal {
    padding: 30rem 0;
    background-color: #3D6042;
  }
  #top .intro {
    padding-bottom: 40rem;
    background-image: url(../images/top/bg-intro-sp.jpg);
  }
  #top .intro .point {
    padding: 37rem 0;
    background-color: rgba(0, 0, 0, 0.2);
    margin-bottom: 60rem;
  }
  #top .intro .information .title {
    font-size: 20rem;
    padding-bottom: 20rem;
  }
  #top .intro .information .info-lead {
    font-size: 25rem;
  }
  #top .intro .information .text01 {
    text-align: left;
  }
  #top .intro .information .text01 + .text01 {
    padding-bottom: 45rem;
  }
  #top .intro .information .box {
    padding: 25rem 5% 30rem;
  }
  #top .intro .information .box .in {
    display: block;
  }
  #top .intro .information .box .img {
    width: auto;
  }
  #top .intro .information .box .texts {
    padding-top: 38rem;
    width: auto;
  }
  #top .intro .information .box .texts .text01 {
    font-size: 15rem;
    padding-bottom: 20rem;
  }
  #top .intro .information .entryButton {
    max-width: 360rem;
    width: 100%;
    padding-bottom: 0;
    margin: 20px auto 0;
    display: block;
  }
  #top .intro .information .entryButton.last {
    margin-left: auto;
    padding-bottom: 40rem;
  }
  #top .intro .flow .title {
    font-size: 13rem;
    margin-bottom: 50rem;
  }
  #top .intro .flow .title span {
    padding: 0 8rem;
  }
  #top .intro .flow .steps {
    display: block;
    width: 94%;
    margin: 0 auto;
  }
  #top .intro .flow .steps li {
    width: auto;
    margin-bottom: 100rem;
  }
  #top .intro .flow .steps li::after {
    content: "";
    display: block;
    position: absolute;
    top: 100%;
    margin-top: 40rem;
    transform: translateX(-50%);
    left: 50%;
    margin-left: auto;
    border-top: 15rem solid #26402A;
    border-left: 15rem solid transparent;
    border-right: 15rem solid transparent;
  }
  #top .intro .flow .steps li:last-child::after {
    display: none;
  }
  #top .intro .flow .steps .image::after {
    display: none;
  }
  #top .intro .flow .steps .image .caption {
    background-color: #3D6042;
  }
  #top .intro .flow .steps .image .mark {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    width: 55rem;
  }
  #top .bnr {
    margin: 0 auto 80rem;
  }
  #top .bnr.my2ldk, #top .bnr.voice02 {
    margin: 0 auto 25rem;
  }
  #top .concept {
    position: relative;
  }
  #top .concept .title {
    font-size: 30rem;
    padding-bottom: 38rem;
  }
  #top .concept .image::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 10%;
    right: 10%;
    background: url(../images/top/concept-bg-sp.jpg) center;
    background-size: cover;
  }
  #top .concept .image .parth {
    position: absolute;
    bottom: 0;
    right: -18.5%;
    width: 131%;
    z-index: 4;
  }
  #top .concept .image .flowers {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }
  #top .concept .image .flowers li {
    position: absolute;
    bottom: 0;
    width: 30%;
    opacity: 0;
    filter: blur(4px);
    transition: opacity 1.4s,filter 1.3s;
  }
  #top .concept .image .flowers li.on {
    opacity: 1;
    filter: blur(0px);
  }
  #top .concept .image .flowers .left-side {
    left: -0.9%;
    width: 24.75%;
  }
  #top .concept .image .flowers .right-side {
    right: -1%;
    width: 53%;
  }
  #top .concept .image .sp-message {
    position: absolute;
    left: 15.2%;
    width: 69.3%;
    top: 2.2%;
  }
  #top .concept .image .bg {
    position: relative;
  }
  #top .content {
    padding: 100rem 0 100rem;
    background-image: url(../images/common/bg-content-sp.jpg);
  }
  #top .sections {
    height: auto;
    margin-bottom: 60rem;
  }
  #top .sections .title {
    position: static;
    font-size: 30rem;
    text-align: center;
    padding-bottom: 25rem;
  }
  #top .sections .texts {
    position: static;
    margin: 0 auto;
    padding-bottom: 34rem;
    z-index: 2;
  }
  #top .sections .texts .text01, #top .sections .texts .text02 {
    white-space: nowrap;
  }
  #top .sections .images {
    margin: 0 auto;
    width: 100% !important;
    position: relative;
    height: 300rem;
    margin-bottom: 100rem;
  }
  #top .sections .images::after {
    background: linear-gradient(225deg, #3D6042, #0C130D);
  }
  #top .sections .images .image {
    position: absolute;
    z-index: 2;
  }
  #top .sections .button {
    position: static;
    font-size: 14rem;
    border: 4rem solid #fff;
    border-radius: 10rem;
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto !important;
  }
  #top .sections .button::after {
    background-size: 16rem 16rem;
    width: 16rem;
    height: 16rem;
    right: 22rem;
  }
  #top .section-position .texts {
    right: 0;
    bottom: 0;
  }
  #top .section-position .button {
    top: 80rem;
  }
  #top .section-position .images {
    width: auto;
    margin-bottom: 20rem;
  }
  #top .section-position .images::after {
    bottom: 70rem;
    left: 14%;
    width: 75%;
    height: 222rem;
    width: 222rem;
  }
  #top .section-position .images .image02 {
    width: 255rem;
    bottom: 114rem;
    left: 0;
  }
  #top .section-position .images .image01 {
    width: 188rem;
    top: auto;
    bottom: 0;
    right: -20rem;
    z-index: 3;
  }
  #top .section-access a {
    padding-top: 0rem;
  }
  #top .section-access .images {
    width: auto;
    margin-bottom: 20rem;
    height: 278rem;
  }
  #top .section-access .images::after {
    bottom: 70rem;
    left: 54rem;
    width: 190rem;
    height: 167rem;
  }
  #top .section-access .images .image02 {
    width: 221rem;
    bottom: 0rem;
    left: 0rem;
    z-index: 3;
  }
  #top .section-access .images .image01 {
    width: 237rem;
    top: -10rem;
    right: 0rem;
  }
  #top .section-location a {
    padding-top: 0rem;
  }
  #top .section-location .images {
    width: auto;
    margin-bottom: 20rem;
  }
  #top .section-location .images::after {
    bottom: 76rem;
    left: 63rem;
    width: 219rem;
    height: 157rem;
  }
  #top .section-location .images .image01 {
    width: 258rem;
    top: 0rem;
    left: auto;
    right: 0;
  }
  #top .section-location .images .image02 {
    width: 202rem;
    bottom: 0rem;
    right: auto;
    left: -8rem;
    z-index: 3;
  }
  #top .section-design a {
    padding-top: 0rem;
  }
  #top .section-design .images {
    margin-left: auto;
    width: auto;
    margin-bottom: 20rem;
  }
  #top .section-design .images::after {
    bottom: 42rem;
    left: 53rem;
    width: 212rem;
    height: 156rem;
  }
  #top .section-design .images .image01 {
    width: 254rem;
    top: 0rem;
    right: -10rem;
  }
  #top .section-design .images .image02 {
    width: 208rem;
    bottom: -20rem;
    left: -8rem;
    z-index: 3;
  }
  #top .section-plan {
    height: auto;
  }
  #top .section-plan .images {
    width: auto;
    height: 289rem;
    margin-bottom: 20rem;
  }
  #top .section-plan .images::after {
    bottom: 12rem;
    left: 60rem;
    width: 200rem;
    height: 192rem;
  }
  #top .section-plan .images .image02 {
    width: 168rem;
    bottom: 0rem;
    left: auto;
    right: 0;
    z-index: 3;
  }
  #top .section-plan .images .image01 {
    width: 243rem;
    top: 0rem;
    right: auto;
    left: 0;
  }
  #top .section-lgente a {
    padding-top: 0rem;
  }
  #top .section-lgente .images {
    margin-left: auto;
    width: auto;
    margin-bottom: 20rem;
  }
  #top .section-lgente .images::after {
    bottom: 0;
    left: 83rem;
    width: 175rem;
    height: 228rem;
  }
  #top .section-lgente .images .image01 {
    width: 185rem;
    top: 0rem;
    left: auto;
    right: 0;
  }
  #top .section-lgente .images .image02 {
    width: 212rem;
    bottom: -10rem;
    left: 0rem;
    z-index: 3;
  }
}

/*# sourceMappingURL=top.css.map */