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

#top .pageAnnotationArea {
  position: relative;
  z-index: 1;
}

@media (min-width: 1025px) {
  #top .global-navi {
    position: fixed;
  }
}

@media (max-width: 1024px) {
  #top .global-navi {
    transform: translateY(0) !important;
  }
}

#top .main-visual {
  position: relative;
  overflow: hidden;
}

#top .main-visual .bg {
  opacity: 0;
}

#top .main-visual .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

#top .main-visual .text {
  position: absolute;
  top: 42%;
  right: 5%;
  font-size: 39px;
  line-height: 1.9;
  letter-spacing: .42em;
  color: #fff;
  opacity: 0;
  transform: scale(0.97);
  filter: blur(3px);
  transition: opacity 2s,transform 2s,filter 2s;
}

#top .main-visual .text.on {
  opacity: 1;
  transform: scale(1);
  filter: blur(0px);
}

#top .main-visual .text.text02 {
  width: 45%;
  top: auto;
  bottom: 5%;
  right: 0;
}

#top .image {
  position: relative;
}

#top .bg-area {
  padding: 95px 0 145px;
  background-color: #2A1000;
  color: #fff;
}

#top .apeal .upper {
  padding-bottom: 20px;
  border-bottom: 1px solid #FFFFFF;
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
}

#top .apeal .upper .text {
  font-size: 30px;
  position: relative;
}

#top .apeal .upper .text .mini {
  position: absolute;
  bottom: 100%;
  left: 0;
  font-size: 11px;
}

#top .apeal .upper .text .big {
  font-size: 135%;
}

#top .apeal .upper .text .num {
  font-size: 200%;
  color: #9E8D6B;
  margin: 0 3px;
}

#top .apeal .upper .text + .text {
  margin-left: 20px;
}

#top .apeal .lists {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  text-align: center;
  padding-bottom: 25px;
}

#top .apeal .lists li {
  width: 23%;
  padding: 17px 5px;
  background-color: #9E8D6B;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#top .apeal .lists li div {
  line-height: 1.5;
}

#top .apeal .lists li div span {
  font-size: 20px;
}

#top .information {
  text-align: center;
  margin-bottom: 40px;
  background-color: #E0DACE;
  box-sizing: border-box;
  padding: 54px 100px;
  color: #4D4D4D;
}

#top .information .title {
  font-weight: normal;
  font-size: 16px;
  padding-bottom: 15px;
}

#top .information .txt00 {
  text-align: left;
  font-size: 20px;
  line-height: 1.6;
  margin: 0 auto 10px;
}

#top .information .txt00 .big {
  font-size: 22px;
}

#top .information .txt00 .spec {
  padding-top: 20px;
  padding-bottom: 20px;
}

#top .information .txt00 .mini {
  font-size: 13px;
}

#top .information .txt03 {
  text-align: left;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 30px;
}

#top .information .txt04 {
  display: block;
  max-width: 630px;
  padding: 10px 20px;
  margin: 50px 0 0;
  border: 1px solid;
  text-align: left;
  font-size: 14px;
  line-height: 2;
}

#top .information .txt04 span {
  font-weight: bold;
}

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

#top .information .box .text {
  width: calc(100% - 200px);
  text-align: left;
}

#top .information .box .button a {
  display: block;
  width: 160px;
  height: 160px;
  color: #fff;
  box-sizing: border-box;
  background-color: #9E8D6B;
  position: relative;
  padding: 30px 10px 35px;
}

#top .information .box .button a .txt01 {
  font-size: 16px;
  position: relative;
  padding-bottom: 18px;
  margin-bottom: 13px;
}

#top .information .box .button a .txt01::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  background-color: #fff;
  height: 1px;
  transform: translateX(-50%);
  width: 30px;
  transition: width .5s;
}

#top .information .box .button a .txt02 {
  font-size: 14px;
  line-height: 1.9;
}

#top .information .box .button a:hover .txt01::after {
  width: 85px;
}

#top .information .box .button a.reserve {
  background-color: #5E120C;
  margin-top: 20px;
}

#top .information .box .text01 {
  font-size: 22px;
  color: #675A00;
  padding-bottom: 20px;
  line-height: 1.8;
  border-bottom: 1px solid;
  margin-bottom: 20px;
}

#top .information .box .text01.bottom {
  margin-bottom: 30px;
}

#top .information .box .text02 {
  font-size: 14px;
  line-height: 2.2;
  padding-bottom: 40px;
}

#top .panel {
  height: 100vh;
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
}

#top .panel > a {
  display: block;
  color: #4D4D4D;
  width: 100%;
  height: 100%;
}

#top .panel.on {
  position: fixed;
}

#top .panel .title {
  font-weight: normal;
  font-size: 50px;
  text-align: center;
  padding-bottom: 17px;
}

#top .panel .text {
  font-size: 20px;
  text-align: center;
}

#top .panel .button {
  position: absolute;
  bottom: 9%;
  width: 120px;
  left: 50%;
  transform: translateX(-50%);
}

#top .panel .button .page-button {
  display: block;
  border-radius: 40px;
  padding: 8px 5px;
  text-align: center;
  letter-spacing: .15em;
  box-sizing: border-box;
  border: 1px solid #4D4D4D;
  color: #4D4D4D;
  font-size: 12px;
  /*&:hover {
          span{
            margin-left:-15px;
            &:after {
              width: 13px;
            }
          }
        }*/
}

#top .panel .button .page-button span {
  display: inline-block;
  position: relative;
  transition: margin-left .5s;
  margin-left: 0px;
}

#top .panel .button .page-button span::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 4px;
  width: 0px;
  height: 6px;
  background: url(../images/top/arrow01.svg);
  background-size: 13px 6px;
  transform: translateY(-50%);
  transition: width .5s;
}

#top .panel.white {
  color: #fff;
}

#top .panel.white > a {
  display: block;
  color: #fff;
}

#top .panel.white .button .page-button {
  border: 1px solid #fff;
  color: #fff;
}

#top .panel.white .button .page-button span::after {
  background-image: url(../images/top/arrow02.svg);
}

#top .panel .text-row {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 2.5vh;
  letter-spacing: .28em;
  text-align: center;
  margin: 0 auto;
  padding-top: 1.2vh;
}

#top .panel .in {
  text-align: center;
}

#top .section-concept {
  background: url(../images/top/bg01.jpg) no-repeat center;
  background-size: cover;
  color: #fff;
}

#top .section-concept .in {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 94%;
}

#top .section-position {
  background: url(../images/top/bg02.jpg) no-repeat center;
  background-size: cover;
}

#top .section-position .in {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 94%;
}

#top .section-position .caption {
  background: none;
  color: #4d4d4d;
  bottom: 14%;
  right: 14%;
}

#top .section-kichijoji {
  background: url(../images/top/bg03.jpg) no-repeat center;
  background-size: cover;
}

#top .section-kichijoji .in {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 94%;
}

#top .section-kichijoji .caption {
  bottom: auto;
  top: 0;
}

#top .section-park {
  background: url(../images/top/bg04.jpg) no-repeat center;
  background-size: cover;
}

#top .section-park .in {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 94%;
}

#top .section-park .caption {
  bottom: auto;
  top: 0;
}

#top .section-silent {
  background: url(../images/top/bg05.jpg) no-repeat center;
  background-size: cover;
}

#top .section-silent .in {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 94%;
}

#top .section-silent .caption {
  bottom: auto;
  top: 0;
}

#top .section-residence {
  background: url(../images/top/bg06.jpg) no-repeat center;
  background-size: cover;
}

#top .section-residence .in {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 94%;
}

#top .section-residence .caption {
  bottom: auto;
  top: 0;
}

#top .section-access,
#top .section-brand,
#top .section-plan {
  height: auto;
}

#top .section-access > a,
#top .section-brand > a,
#top .section-plan > a {
  padding-bottom: 93px;
}

#top .section-access .title,
#top .section-brand .title,
#top .section-plan .title {
  padding: 112px 0 47px;
}

#top .section-access .image,
#top .section-brand .image,
#top .section-plan .image {
  width: 90%;
  margin: 0 auto 35px;
  max-width: 1000px;
}

#top .section-access .button,
#top .section-brand .button,
#top .section-plan .button {
  position: static;
  margin: 40px auto 0;
  transform: translateX(0);
}

#top .section-plan {
  background-color: #E0DACE;
}

#top .section-access {
  background-color: #ECE8DD;
}

#top .section-brand {
  background-color: #E0DACE;
}

@media screen and (min-width: 769px) {
  .common-scroll-effect {
    filter: blur(0px);
    opacity: 1;
  }
}

/*==================================================================================
 top-sp
==================================================================================*/
@media (max-width: 768px) {
  #top {
    position: static;
    transform: none !important;
  }
  #top .main-visual .text {
    width: 82%;
    max-width: 295px;
    top: 20%;
  }
  #top .main-visual .image, #top .main-visual .bg {
    padding-top: 55px;
  }
  #top .image {
    position: relative;
  }
  #top .bg-area {
    padding: 20px 0 60px;
    background-color: #2A1000;
    color: #fff;
  }
  #top .apeal .last {
    width: 75%;
    margin: 0 auto 30px;
  }
  #top .apeal .upper {
    padding-bottom: 20px;
    border-bottom: 1px solid #FFFFFF;
    margin-bottom: 30px;
    display: block;
  }
  #top .apeal .upper .text {
    font-size: 22px;
    text-align: center;
  }
  #top .apeal .upper .text .mini {
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    white-space: nowrap;
  }
  #top .apeal .upper .text + .text {
    margin-left: auto;
  }
  #top .apeal .lists {
    display: flex;
    flex-wrap: wrap;
  }
  #top .apeal .lists li {
    width: 49%;
    padding: 17px 5px;
    box-sizing: border-box;
    font-size: 12px;
    margin-bottom: 10px;
  }
  #top .information {
    margin-bottom: 40px;
    padding: 54px 30px;
  }
  #top .information .title {
    font-size: 16px;
    padding-bottom: 15px;
  }
  #top .information .txt00 {
    text-align: center;
    font-size: 20px;
  }
  #top .information .txt03 {
    text-align: center;
  }
  #top .information .box {
    display: block;
    justify-content: space-between;
    align-items: center;
  }
  #top .information .box .text {
    width: auto;
    text-align: left;
  }
  #top .information .box .button a {
    display: block;
    width: auto;
    height: auto;
    padding: 15px 10px 10px;
  }
  #top .information .box .button a .txt01 {
    font-size: 16px;
    padding-bottom: 18px;
    margin-bottom: 13px;
  }
  #top .information .box .button a .txt02 {
    font-size: 14px;
    line-height: 1.9;
  }
  #top .information .box .button a.reserve {
    margin-bottom: 30px;
  }
  #top .information .box .text01 {
    font-size: 19px;
    text-align: center;
  }
  #top .information .box .text01.bottom {
    margin-bottom: 10px;
  }
  #top .information .box .text02 {
    font-size: 14px;
    line-height: 2.2;
    padding-bottom: 25px;
  }
  #top .js-panels {
    transform: translateY(0) !important;
    filter: blur(0) !important;
  }
  #top .panel {
    transform: translateY(0) !important;
    height: 100vh;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
  }
  #top .panel .title {
    font-size: 30px;
    padding-bottom: 17px;
  }
  #top .panel .text {
    font-size: 16px;
    line-height: 1.7;
  }
  #top .section-concept {
    background-image: url(../images/top/bg01-sp.jpg);
  }
  #top .section-position {
    background-image: url(../images/top/bg02-sp.jpg);
  }
  #top .section-position .caption {
    bottom: 18%;
    right: 0%;
  }
  #top .section-kichijoji {
    background-image: url(../images/top/bg03-sp.jpg);
  }
  #top .section-park {
    background-image: url(../images/top/bg04-sp.jpg);
  }
  #top .section-silent {
    background-image: url(../images/top/bg05-sp.jpg);
  }
  #top .section-residence {
    background-image: url(../images/top/bg06-sp.jpg);
  }
  #top .section-access,
  #top .section-brand,
  #top .section-plan {
    height: auto;
  }
  #top .section-access > a,
  #top .section-brand > a,
  #top .section-plan > a {
    padding-bottom: 93px;
  }
  #top .section-access .title,
  #top .section-brand .title,
  #top .section-plan .title {
    padding: 112px 0 47px;
  }
  #top .section-access .image,
  #top .section-brand .image,
  #top .section-plan .image {
    width: 90%;
    margin: 0 auto 35px;
    max-width: 1000px;
  }
  #top .section-access .button,
  #top .section-brand .button,
  #top .section-plan .button {
    position: static;
    margin: 40px auto 0;
    transform: translateX(0);
  }
  #top .section-plan {
    background-color: #E0DACE;
  }
  #top .section-access {
    background-color: #ECE8DD;
  }
  #top .section-brand {
    background-color: #E0DACE;
  }
}

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