@charset "UTF-8";

@media screen and (min-width: 769px) {
article{margin-top: 0;}
header{opacity: 0;pointer-events: none;transition: 0.3s all;background: rgba(255,255,255,0.8);}
header h1 a{pointer-events: none;display: inline-block;}
header .hb_menu{pointer-events: none;}
header.on{opacity: 1;pointer-events: all;}
header.on h1 a::before{content: "";width: 100%;height: 100%;display: block;position: absolute;left: 0;top: 0;background: url("../common/img/logo.svg") no-repeat center center/contain;}
header.on h1 a img{opacity: 0;}
header.on h1 a{pointer-events: all;}
header.on .hb_menu{pointer-events: all;}
}

/* メイン */
main{overflow: hidden;}
main img{width: 100%;}
main .main_base_plot,main .main_base02,main .main_base03,main .main_base04{width: 100%;height: 100%;position: absolute;left: 0;top: 0;opacity: 0;}
main .main_lead{font-size: 4.6875vw;color: #fff;font-weight: 600;position: absolute;right: 2%;top: 5%;opacity: 0;line-height: 1.3;text-shadow: 0.1em 0.1em 0.1em #000;}
main .main_nakamozukazoku{width: 100%;height: 100%;position: absolute;left: 0;top: 0;opacity: 0;background: #fff;display: flex;justify-content: center;align-items: center;}
main .main_tit{width: 40%;}
main .main_nakamozukazoku_img{width: 100%;height: 100%;position: absolute;left: 0;top: 0;opacity: 0;}


@media screen and (max-width: 768px) {
main .main_lead{font-size: 7vw;right: 2%;top: 3%;}
main .main_tit{width: 70%;}
}

/* 行動提起 */
#koudou{background: var(--main_color);}
.koudou_item{display: flex;padding: 0.5em 0;color: #fff;}
.koudou_item > li{border-right: 1px solid #fff;flex-grow: 1;display: flex;justify-content: center;align-items: center;}
.koudou_item > li span{font-size: 2.3em;font-weight: 600;line-height: 1.2;animation-name: fadeInUp;}
.koudou_item > li:last-of-type{border-right: none;}
.koudou_item > li strong{color: #fff34b;font-weight: 600;}
.koudou_item > li small{font-size: 0.4em;;font-weight: 600;}
.koudou_item > li big{font-size: 1.3em;;font-weight: 600;line-height: 1;}
.koudou_item > li:nth-of-type(1) small,
.koudou_item > li:nth-of-type(1) span{display: block;}
.koudou_request{padding: 2em 0 2.5em;text-align: center;background: #fff;animation-name: fadeInUp;}
.koudou_request p{font-size: 3em;font-weight: 600;line-height: 1.2;letter-spacing: 0.1em;}
.koudou_request p big{font-size: 1.167em;font-weight: 600;}
.koudou_request p big small{font-size: 0.57em;font-weight: 600;}
.koudou_request p big span{font-size: 0.7em;font-weight: 600;}
.koudou_request p > small{font-size: 0.8em;font-weight: 600;display: block;letter-spacing: 0.05em;margin-top: 0.5em;}
.koudou_request_btn{width: 23em;background: var(--main_color);display: block;margin: 0.5em auto 0;border: 1px solid var(--main_color);transition: 0.3s all;}
.koudou_request_btn span{font-size: 1.5em;color: #fff34b;font-weight: 600;transition: 0.3s all;}
.koudou_request_btn span::after{content: "";width: 1.36em;height: 1.1em;background: url("../common/img/arrow_y.svg") no-repeat center center/contain;display: inline-block;margin-left: 0.2em;transition: 0.3s all;}
.koudou_request_btn span big{font-size: 1.67em;font-weight: 600;}

@media screen and (min-width: 769px) {
.koudou_item > li:nth-of-type(2) span{animation-delay: 0.3s;}
.koudou_item > li:nth-of-type(3) span{animation-delay: 0.6s;}
.koudou_request_btn:hover{background: #fff;}
.koudou_request_btn:hover span{color: var(--main_color);}
.koudou_request_btn:hover span::after{transform: translateX(0.2em);background: url("../common/img/arrow_r.svg") no-repeat center center/contain;}
}

@media screen and (max-width: 768px) {
.koudou_item{flex-wrap: wrap;padding: 0;color: #fff;}
.koudou_item > li{border-right: none;border-bottom: 1px solid #fff;width: 100%;font-size: 3.5vw;padding: 2vw 0;}
.koudou_item > li:last-of-type{border-bottom: none;}
.koudou_request{padding: 2em 0 2.5em;}
.koudou_request p{font-size: 8.3vw;letter-spacing: 0.05em;}
.koudou_request_btn{width: 80vw;margin: 3vw auto 0;}
.koudou_request_btn span{font-size: 4.5vw;}
}

/* リード */
#intro{background: var(--main_color);padding: 5em 0 20em;color: #fff;text-align: center;overflow: hidden;height: 100vh;}
#intro h3{font-size: 4.5em;font-weight: 600;animation-name: bokashi;}
#intro h3 + p{font-size: 1.5em;font-weight: 600;margin-top: 0.5em;line-height: 2; animation-name: bokashi;}
#intro > i{position: absolute;bottom: 0;left: 0;right: 0;margin-inline: auto;width: 95%;animation-name: fadeInUp;}

@media screen and (max-width: 768px) {
#intro{padding: 10vw 0 20vw;height: auto;}
#intro h3{font-size: 8vw;}
#intro h3 + p{font-size: 4vw;}
}

/* リンクパネル共通 */
.contents_links{padding: 3em 0 2.5em;}
.contents_links > i{display: block;background: var(--main_color);height: 2.5em;position: absolute;left: 0;bottom: 0;animation-name: scale_x_c;width: 100%;}
.contents_links > .cap_b{bottom: 4.5em;}
.contents_links_tit{text-align: center;}
.contents_links_tit > i{display: block;position: absolute;width: 100%;height: 5.8em;background: url("../common/img/nakamozu_kazoku.svg") no-repeat center center/contain;animation-name: fadeInDown;}
.contents_links_tit span{z-index: 1;display: inline-block;padding-top: 2.7em;}
.contents_links_tit span i{line-height: 1;font-weight: 600;font-family: "Oswald", sans-serif;color: var(--main_color);font-size: 5em;display: inline-block;opacity: 0;}
.contents_links_tit + p{font-size: 1.6em;margin-top: 0.8em;line-height: 1.4;text-align: center;animation-name: fadeInUp;}
.read_more_btn{font-size: 1em;display: block;background: var(--main_color);border: 1px solid var(--main_color);width: 10em;font-family: "Oswald", sans-serif;font-weight: 500;color: #fff;text-align: center;padding: 0.2em 0.5em 0.2em 0;position: absolute;right: 0;bottom: 2.5em;transition: 0.3s all;animation-name: fadeInLeft;z-index: 2;}
.read_more_btn::before{content: "";display: block;width: calc(100% + 2px);height: calc(100% + 2px);position: absolute;left: -2px;top: -2px;border: 1px solid #fff;}
.read_more_btn::after{content: "";width: 1.15em;height: 1em;background: url("../common/img/arrow_w.svg") no-repeat center center/contain;position: absolute;right: 0.5em;top: 0;bottom: 0;margin: auto 0;transition: 0.3s all;}
.comingsoon_btn{font-size: 2vh;display: block;background: #aaa;border: 1px solid #aaa;width: 10em;font-family: "Oswald", sans-serif;font-weight: 500;color: #fff;text-align: center;padding: 0.2em 0.5em 0.2em 0;position: absolute;right: 0;bottom: 0;transition: 0.3s all;z-index: 2;pointer-events: none;}

@media screen and (min-width: 769px) {
.read_more_btn:hover{background: #fff;color: var(--main_color);}
.read_more_btn:hover::after{transform: translateX(0.2em);background: url("../common/img/arrow_r.svg") no-repeat center center/contain;}
}

@media screen and (max-width: 768px) {
.contents_links{padding: 7vw 0 4vw;}
.contents_links > i{height: 4vw;}
.contents_links > .cap_b{bottom: 6vw;}
.contents_links_tit > i{height: 10vw;}
.contents_links_tit span{padding-top: 5vw;}
.contents_links_tit span i{font-size: 9vw;}
.contents_links_tit + p{font-size: 4.5vw;}
.read_more_btn{font-size: 3.5vw;bottom: 7vw;right: 4vw;}
.comingsoon_btn{font-size: 3.5vw;bottom: 5vw;right: 4vw;}
}

/* TOWN PLANNING */
.town_planning_img{padding-bottom: 7.5em;animation-name: fadeInUp;margin-top: 1em;}
.town_planning_img .cap_b{bottom: 27em;right: 9.5em;}
.town_planning_copy{width: 24.5em;animation-name: fadeInRight;position: absolute;bottom: 6em;right: 0;}
.town_planning_copy h4{font-weight: 600;font-size: 1.2em;line-height: 1.4;}
.town_planning_copy h4 + p{font-size: 0.8em;margin-top: 0.3em;}

@media screen and (max-width: 768px) {
.town_planning_img{padding-bottom: 0;margin-top: 3vw;}
.town_planning_img .cap_b{bottom: 5vw;right: 2vw;}
.town_planning_copy{width: 100%;animation-name: fadeInUp;position: static;padding-bottom: 17vw;margin-top: 3vw;}
.town_planning_copy h4{font-size: 4.5vw;}
.town_planning_copy h4 + p{font-size: 0.85em;margin-top: 0.3em;}
}

/* MODEL HOUSE */
.model_house_img{margin-top: 1em;animation-name: fadeInUp;}

/* ACCESS / LOCATION */
#access_location{background: url("../img/access_bk.webp") no-repeat center center/cover;}
.access_location_item{display: flex;justify-content: flex-end;gap: 0 3em; margin-top: 1em;}
.access_location_item > dt{width: 36em;margin: 2em 0 6.5em;}
.access_location_img{margin-top: 2em;animation-name: fadeInUp;width: 35em;}
.access_location_item > dd{width: 22.5em;animation-name: fadeInUp;}

@media screen and (min-width: 769px) {
.access_location_item > dd{animation-delay: 0.3s;}
}

@media screen and (max-width: 768px) {
.access_location_item{justify-content: center;flex-wrap: wrap;gap: 0 3em; margin-top: 1em;}
.access_location_item > dt{width: 100%;margin: 3vw 0 0;}
.access_location_img{margin-top: 5vw;width: 100%;}
.access_location_item > dd{width: 70%;margin: 5vw 0 17vw}
}

/* PLAN */
#plan{background: url("../img/plan_bk.webp") no-repeat center center/cover;}
.plan_item{display: flex;justify-content: center; padding-bottom: 11em;margin-top: 3em;}
.plan_item > figure{animation-name: fadeInUp;}
.plan_item > figure img{height: 30em;}
.plan34_tit{width: 11.8em;position: absolute;right: 0;bottom: 8em;animation-name: fadeInUp;}
.plan34_tit img{height: auto!important;}

@media screen and (min-width: 769px) {
.plan_item > figure:nth-of-type(2){animation-delay: 0.3s;}
}

@media screen and (max-width: 768px) {
.plan_item{flex-wrap: wrap; padding-bottom: 20vw;margin-top: 5vw;}
.plan_item > figure img{height: 80vw;}
.plan34_tit{width: 30vw;bottom: 20vw;}
}

/* QUALITY */
#quality{background: url("../img/quality_bk.webp") no-repeat center center/cover;}
.quality_img01{width: 39em;margin: 3.5em 0 0 auto;animation-name: fadeInUp;}
.quality_img_item{display: flex;align-items: flex-start;gap: 0 2.5em;margin-top: 2.5em;}
.quality_img_item > figure{width: 15.5em;animation-name: fadeInUp;}
.quality_img_item > figure:nth-of-type(1){margin-top: 1.75em;}
.quality_img_item > figure:nth-of-type(2){animation-delay: 0.3s;}
#quality .read_more_btn{bottom: 0;}
#quality > .cap_b{bottom: 1em;}

@media screen and (min-width: 769px) {
}

@media screen and (max-width: 768px) {
.quality_img01{width: 100%;margin: 5vw 0 0 0;}
.quality_img_item{gap: 0 2%;margin-top: 5vw;padding-bottom: 10vw;}
.quality_img_item > figure{width: 49%;}
.quality_img_item > figure:nth-of-type(1){margin-top: 1.75em;}
#quality .read_more_btn{bottom: 5vw;}
#quality > .cap_b{bottom: 1em;}
}





.scrollbar_wrap{position: fixed;left: 5em;bottom: 0;z-index: 1000;}

.scrollbar-text {
  display: inline-block;
  position: absolute;
  bottom: 0;
  padding: 10px 10px 110px;
  color: #fff;text-shadow: 0 0 2px rgba(0,0,0,1), 0 0 2px rgba(0,0,0,1);
  font-size: 14px;
  font-family: serif;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  writing-mode: vertical-lr;
  left: 50%;
  transform: translateX(-50%);
}

.scrollbar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1px;
}

.scrollbar::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 100px;
  background: #fff;box-shadow: 0 0 2px rgba(0,0,0,1), 0 0 2px rgba(0,0,0,1);
  animation: liner 2.5s cubic-bezier(1, 0, 0, 1) infinite;
}

@keyframes liner {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  30% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  70% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

@media screen and (max-width: 768px) {
.scrollbar_wrap{left: 1em;bottom: 57px;}
.scrollbar-text{font-size: 11px;padding-bottom: 60px;}
.scrollbar::after {height: 50px;}
}