@charset "UTF-8";
.pre-inc section {
  overflow: hidden;
}
.pre-inc {
  /* メイン */
}
.pre-inc main {
  height: calc(56.25vw - 10px);
  overflow: hidden;
}
.pre-inc main video {
  width: 100%;
}
.pre-inc .main_last {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.pre-inc main figure {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.pre-inc main figure img {
  width: 100%;
}
.pre-inc .skip_btn {
  font-size: 0.8vw;
  display: block;
  width: 6em;
  padding: 0.2em 0 0;
  text-align: center;
  position: absolute;
  right: 2%;
  top: 2%;
  cursor: pointer;
  transition: 0.5s all;
  border: 3px double rgba(255, 255, 255, 0.8);
  color: #fff;
}
.pre-inc .loaded {
  opacity: 0;
  visibility: hidden;
}
.pre-inc .loading_wrap {
  display: none;
}
@media screen and (max-width: 768px) {
  .pre-inc main {
    height: 100vw;
  }
  .pre-inc .loading {
    width: 8vw;
    height: 8vw;
    border: 1vw rgba(0, 0, 0, 0.25) solid;
    border-top: 1vw rgb(0, 0, 0) solid;
  }
  .pre-inc .skip_btn {
    font-size: 3vw;
  }
}
.pre-inc {
  /* 行動提起 */
}
.pre-inc #koudou {
  background: var(--main_color);
}
.pre-inc .koudou_item {
  padding: 2.5em 0 1.5em;
  display: flex;
  flex-wrap: wrap;
  width: 60em;
  margin-inline: auto;
}
.pre-inc .koudou_item dt {
  width: 100%;
  text-align: center;
  animation-name: fadeInUp;
}
.pre-inc .koudou_item dt img {
  height: 4em;
}
.pre-inc .koudou_item dd {
  text-align: center;
  flex-grow: 1;
  padding: 0.5em 0;
  border-right: 1px solid #fff;
  margin-top: 1.25em;
}
.pre-inc .koudou_item dd:last-child {
  margin-top: 0;
}
.pre-inc .koudou_item dd:last-of-type {
  border-right: none;
}
.pre-inc .koudou_item dd img {
  height: 4em;
  animation-name: fadeInUp;
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
  .pre-inc .koudou_item {
    font-size: 1.6vw;
  }
}
@media screen and (min-width: 769px) {
  .pre-inc .koudou_item dd:nth-of-type(2) img {
    animation-delay: 0.3s;
  }
  .pre-inc .koudou_item dd:nth-of-type(3) img {
    animation-delay: 0.6s;
  }
}
@media screen and (max-width: 768px) {
  .pre-inc .koudou_item {
    padding: 6vw 4vw 4vw;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-inline: auto;
  }
  .pre-inc .koudou_item dt {
    width: 100%;
    text-align: center;
    margin-bottom: 4vw;
  }
  .pre-inc .koudou_item dt img {
    height: 10vw;
  }
  .pre-inc .koudou_item dd {
    padding: 3vw 0;
    border-right: none;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    margin-top: 0;
    width: 100%;
  }
  .pre-inc .koudou_item dd img {
    height: 14vw;
  }
  .pre-inc .koudou_item dd:last-child {
    margin-top: 1.25em;
  }
  .pre-inc .koudou_item dd:last-child img {
    height: 28vw;
  }
}
.pre-inc {
  /* 大阪緑の住都心まちづくり構想 */
}
.pre-inc #town_development {
  width: 100%;
  aspect-ratio: 16/11;
  background: linear-gradient(to right, #b6d4cb, #cfdbe1);
}
.pre-inc #town_development img {
  height: 100%;
}
.pre-inc #town_development .town_development_item img {
  height: auto;
}
.pre-inc .town_development_item {
  width: 100%;
  aspect-ratio: 16/11;
}
.pre-inc .town_development_item figure {
  position: absolute;
}
.pre-inc .town_development_item figure figcaption {
  font-size: 0.5em;
}
.pre-inc .town_development_item figure:nth-of-type(1) {
  right: 8.3333333333%;
  top: 42.4242424242%;
  width: 21.875%;
}
.pre-inc { /*カップル */ }
.pre-inc .town_development_item figure:nth-of-type(2) {
  left: 37.5%;
  top: 6.8181818182%;
  width: 25%;
}
.pre-inc { /* 友達 */ }
.pre-inc .town_development_item figure:nth-of-type(3) {
  left: 26.0416666667%;
  bottom: 11.3636363636%;
  width: 21.875%;
}
.pre-inc { /* グリーングラン */ }
.pre-inc .town_development_item figure:nth-of-type(4) {
  left: 6.7708333333%;
  top: 18.9393939394%;
  width: 21.875%;
}
.pre-inc { /* 花火 */ }
.pre-inc .town_development_item figure:nth-of-type(5) {
  right: 24.4791666667%;
  bottom: 9.0909090909%;
  width: 16.6666666667%;
}
.pre-inc { /* 家族 */ }
.pre-inc .town_development_item figure:nth-of-type(6) {
  left: 4.1666666667%;
  bottom: 22.7272727273%;
  width: 16.6666666667%;
}
.pre-inc { /* 桜 */ }
.pre-inc .town_development_item figure:nth-of-type(7) {
  right: 13.0208333333%;
  top: 18.1818181818%;
  width: 16.6666666667%;
}
.pre-inc { /* 大阪城 */ }
.pre-inc .town_development_tit {
  position: absolute;
  top: 44.5%;
  left: 0;
  height: 11.3%;
  width: 100%;
  text-align: center;
  z-index: 1;
}
@media screen and (min-width: 769px) and (max-width: 1310px) {
  .pre-inc #town_development img {
    height: auto;
  }
  .pre-inc .town_development_item figure {
    height: auto;
    width: 17%;
  }
  .pre-inc .town_development_tit img {
    width: 30%;
  }
}
@media screen and (max-width: 768px) {
  .pre-inc #town_development {
    width: 100%;
    height: auto;
    aspect-ratio: 16/25;
  }
  .pre-inc .town_development_item {
    width: 100%;
    height: auto;
    aspect-ratio: 16/25;
  }
  .pre-inc .town_development_item figure:nth-of-type(1) {
    right: 5.2083333333%;
    top: 60%;
    width: 34.8958333333%;
  }
  .pre-inc { /*カップル */ }
  .pre-inc .town_development_item figure:nth-of-type(2) {
    left: 50.78125%;
    top: 2.0833333333%;
    width: 43.359375%;
  }
  .pre-inc { /* 友達 */ }
  .pre-inc .town_development_item figure:nth-of-type(3) {
    left: 9.1145833333%;
    bottom: 3.75%;
    width: 46.09375%;
  }
  .pre-inc { /* グリーングラン */ }
  .pre-inc .town_development_item figure:nth-of-type(4) {
    left: 4.9479166667%;
    top: 15.25%;
    width: 40.3645833333%;
  }
  .pre-inc { /* 花火 */ }
  .pre-inc .town_development_item figure:nth-of-type(5) {
    right: 11.71875%;
    bottom: 7.5%;
    width: 22.1354166667%;
  }
  .pre-inc { /* 家族 */ }
  .pre-inc .town_development_item figure:nth-of-type(6) {
    left: 2.1666666667%;
    bottom: 28.3333333333%;
    width: 26.5625%;
  }
  .pre-inc { /* 桜 */ }
  .pre-inc .town_development_item figure:nth-of-type(7) {
    right: 15.234375%;
    top: 26.3333333333%;
    width: 26.0416666667%;
  }
  .pre-inc { /* 大阪城 */ }
  .pre-inc .town_development_tit {
    top: 43.8333333333%;
    height: auto;
    width: 60%;
    right: 0;
    margin-inline: auto;
  }
}
.pre-inc {
  /* ミドリいっぱい */
}
.pre-inc #green {
  background: url("../img/top/green_bk_pc.webp") no-repeat center center/cover;
  height: calc(100vh - 85px);
  display: flex;
  justify-content: center;
  align-items: center;
}
.pre-inc #green img {
  height: 100%;
}
.pre-inc .green_item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
}
.pre-inc .green_item h3 img {
  transform: scale(0.9);
}
.pre-inc .green_item h3:nth-of-type(1) {
  margin-inline: auto;
  order: 1;
  height: 20%;
  text-align: center;
}
.pre-inc .green_item h3:nth-of-type(1) img {
  max-width: 83%;
}
.pre-inc .green_item h3:nth-of-type(2) {
  margin-inline: auto;
  order: 5;
  height: 20%;
  text-align: center;
}
.pre-inc .green_item h3:nth-of-type(2) img {
  max-width: 80%;
}
.pre-inc .green_item p img {
  transform: scale(0.9);
}
.pre-inc .green_item p:nth-of-type(1) {
  margin-inline: auto;
  margin-top: 2%;
  order: 2;
  height: 8%;
  text-align: center;
}
.pre-inc .green_item p:nth-of-type(1) img {
  max-width: 83%;
}
.pre-inc .green_item p:nth-of-type(2) {
  margin-inline: auto;
  margin-top: 3%;
  order: 3;
  height: 5.5%;
  text-align: center;
}
.pre-inc .green_item p:nth-of-type(2) img {
  max-width: 45%;
}
.pre-inc .green_item .p_img {
  opacity: 0;
}
.pre-inc .green_item figure {
  margin: -3% 0 -12%;
  order: 4;
  margin-inline: auto;
  height: 57%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pre-inc .green_item figure img {
  width: 100%;
  height: 100% !important;
  object-fit: contain;
}
@media screen and (max-width: 768px) {
  .pre-inc #green {
    height: 100vw;
  }
  .pre-inc .green_item {
    height: 80%;
  }
}
.pre-inc {
  /* コンテンツ共通 */
}
.pre-inc .top_tit {
  text-align: center;
  padding: 0 1em;
}
.pre-inc .top_tit small {
  font-size: 1.2em;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 1em;
  display: block;
  animation-name: fadeInUp;
}
.pre-inc .top_tit img {
  width: 80em;
  animation-name: fadeInUp;
}
.pre-inc .top_tit_s {
  animation-name: fadeInUp;
}
.pre-inc .top_tit_s small {
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.pre-inc .top_tit_s small::before {
  content: "";
  width: 1.8em;
  height: 1.7em;
  background: url("../img/top/top_tit_i.svg") no-repeat center bottom/contain;
  display: inline-block;
  margin-right: 0.3em;
  vertical-align: -0.1em;
}
.pre-inc .top_tit_s span {
  font-size: 1.6em;
  margin-top: 0.7em;
  display: block;
}
.pre-inc .top_tit_s_lead {
  font-size: 0.9em;
  line-height: 2.5;
  text-align: justify;
  animation-name: fadeInUp;
  z-index: 3;
  margin-top: 0.5em;
}
.pre-inc .view_more {
  display: block;
  margin: 1em 0 0 auto;
  animation-name: fadeInLeft;
  animation-delay: 0.3s;
  width: 6em;
}
.pre-inc .view_more a {
  color: #000;
  transition: 0.3s all;
  white-space: nowrap;
  font-weight: 600;
}
@media screen and (min-width: 769px) {
  .pre-inc .view_more a:hover {
    opacity: 0.5;
  }
}
@media screen and (max-width: 768px) {
  .pre-inc .top_tit {
    padding: 0 1em;
  }
  .pre-inc .top_tit small {
    font-size: 3vw;
  }
  .pre-inc .top_tit_s span {
    font-size: 1.1em;
    margin-top: 0.5em;
  }
  .pre-inc .top_tit_s_lead {
    font-size: 0.8em;
    width: 100%;
    line-height: 1.8;
  }
}
.pre-inc {
  /* 模様 */
}
.pre-inc .pattern_wrap {
  background: #ebebeb;
  z-index: 3;
}
.pre-inc .pattern_wrap > i {
  font-size: 1.01vw;
}
.pre-inc .pattern01 {
  width: 18.3em;
  position: absolute;
  top: 6em;
  right: -8em;
}
.pre-inc .pattern02 {
  width: 25em;
  position: absolute;
  top: -12.7em;
  left: -5em;
}
.pre-inc .pattern03 {
  width: 12.5em;
  position: absolute;
  top: -10em;
  right: 6em;
}
.pre-inc .pattern04 {
  width: 18em;
  position: absolute;
  top: 36em;
  right: -2em;
}
.pre-inc .pattern05 {
  width: 13.5em;
  position: absolute;
  top: 51em;
  left: -2.5em;
}
.pre-inc .pattern06 {
  width: 15em;
  position: absolute;
  bottom: 3em;
  left: -5em;
}
.pre-inc .pattern07 {
  width: 12em;
  position: absolute;
  bottom: -4em;
  left: 2em;
}
.pre-inc .pattern08 {
  width: 43.5em;
  position: absolute;
  bottom: -2.5em;
  right: -6em;
}
@media screen and (min-width: 1921px) {
  .pre-inc .pattern_wrap > i {
    font-size: 20px;
  }
}
@media screen and (max-width: 768px) {
  .pre-inc .pattern01 {
    width: 20vw;
    position: absolute;
    top: 10vw;
    right: -8vw;
  }
  .pre-inc .pattern_wrap > i {
    font-size: 1.4vw;
  }
  .pre-inc .pattern03 {
    top: -1em;
    right: -2em;
  }
  .pre-inc .pattern04 {
    top: 115em;
  }
  .pre-inc .pattern05 {
    width: 15em;
    top: 120em;
  }
  .pre-inc .i02 {
    top: -8em;
  }
}
.pre-inc {
  /* 7つの街区×14,000㎡のマチ */
}
.pre-inc #mirai_green_yard {
  background: url("../img/top/mirai_green_yard_bk_pc.webp") #11a23b no-repeat center top/cover;
  padding: 3.5em 0 7.5em;
  height: 80.5em;
  color: #fff;
  z-index: 1;
}
.pre-inc #mirai_green_yard .top_tit {
  z-index: 3;
}
.pre-inc #mirai_green_yard .top_tit small {
  color: #fffc00;
}
.pre-inc .mirai_green_yard_item {
  width: 30em;
  margin: 3em 0 0 auto;
  z-index: 3;
  animation-name: fadeInRight;
}
.pre-inc #mirai_green_yard .top_tit_s_lead {
  position: absolute;
  top: 58em;
  left: 0;
  right: 0;
  margin-inline: auto;
  animation-name: fadeInUp;
  margin-top: 0;
}
.pre-inc #mirai_green_yard .view_more a {
  color: #fff;
}
@media screen and (max-width: 768px) {
  .pre-inc #mirai_green_yard {
    background: url("../img/top/mirai_green_yard_bk_sp.webp") no-repeat center top/cover;
    padding: 10vw 0 12vw;
    height: auto;
  }
  .pre-inc .mirai_green_yard_item {
    width: 100%;
    margin: 5vw 0 0 0;
  }
  .pre-inc #mirai_green_yard .top_tit_s_lead {
    position: static;
    margin-top: 70vw;
  }
}
.pre-inc {
  /* 進化する“ヒガシ”の拠点、京橋。／　“梅田”も“中之島”も“京都”も一直線。*/
}
.pre-inc .t_contents {
  padding: 3.5em 0;
  z-index: 2;
}
.pre-inc .t_contents .top_tit {
  z-index: 3;
}
.pre-inc .t_contents .top_tit small {
  color: #84c01c;
}
.pre-inc .t_contents .top_tit_s small {
  color: #4bc7a3;
}
.pre-inc .t_contents_item {
  display: flex;
  max-width: 1920px;
  margin: 3.5em auto 0;
  gap: 0 3%;
}
.pre-inc .t_contents_item > dt {
  width: 62.5%;
  animation-name: fadeInLeft;
}
.pre-inc .t_contents_item > dd {
  width: 23%;
  animation-name: fadeInRight;
  margin-top: 1.5em;
}
@media screen and (min-width: 769px) and (max-width: 1500px) {
  .pre-inc .t_contents_item > dd {
    margin-top: 0;
    width: 32%;
  }
  .pre-inc .t_contents .top_tit_s_lead {
    line-height: 1.8;
  }
}
@media screen and (max-width: 768px) {
  .pre-inc .t_contents {
    padding: 10vw 0;
  }
  .pre-inc .t_contents_item {
    flex-wrap: wrap;
    margin: 10vw auto 0;
  }
  .pre-inc .t_contents_item > dt {
    width: 100%;
    animation-name: fadeInUp;
    order: 1;
  }
  .pre-inc .t_contents_item > dd {
    width: 100%;
    animation-name: fadeInUp;
    margin-top: 5vw;
    order: 2;
    padding: 0 6vw;
  }
}
.pre-inc #direct_access .rosen {
  margin-top: 15px;
  line-height: 1.1;
}
.pre-inc #direct_access .rosen span {
  font-size: 0.8em;
}
.pre-inc #direct_access .rosen big {
  font-size: 1.7em;
}
.pre-inc #direct_access .rosen small {
  font-size: 1.5em;
}
.pre-inc #direct_access .rosen i {
  font-size: 2.3em;
  color: #39992d;
}
.pre-inc #direct_access .line {
  border-top: 1px solid #000;
  margin: 1em auto;
}
.pre-inc #direct_access .txt-r {
  position: absolute;
  font-size: 0.6em !important;
}
.pre-inc #direct_access .txt-r.osaka {
  right: 9em;
}
.pre-inc #direct_access .txt-r.nakanoshima {
  right: 7em;
}
.pre-inc #direct_access .txt-r.gionshijyo {
  right: 2em;
}
@media screen and (min-width: 769px) {
  .pre-inc #direct_access {
    padding-bottom: 8em;
  }
  .pre-inc #direct_access .t_contents_item {
    justify-content: flex-end;
  }
  .pre-inc #direct_access .t_contents_item > dt {
    animation-name: fadeInRight;
  }
  .pre-inc #direct_access .t_contents_item > dd {
    animation-name: fadeInLeft;
  }
}
@media screen and (max-width: 768px) {
  .pre-inc #direct_access .rosen {
    margin-top: 10px;
  }
  .pre-inc #direct_access .rosen span {
    font-size: 0.8em;
  }
  .pre-inc #direct_access .rosen big {
    font-size: 1.8em;
  }
  .pre-inc #direct_access .rosen i {
    font-size: 2em;
  }
}
.pre-inc {
  /* INFORMATION */
}
.pre-inc #information {
  padding: 3.5em 0;
  background: #f7f7f7;
}
.pre-inc #information i {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(255, 255, 255, 0.85);
  animation: 3s fadeIn 0s forwards;
}
.pre-inc #information .wrap1024 {
  animation-name: fadeInUp;
  animation-delay: 1.5s;
  z-index: 1;
}
.pre-inc .info_wrap {
  max-width: 35em;
  margin: 0 auto;
}
.pre-inc .info_item {
  font-size: 0.7em;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow-y: auto;
  margin-top: 2em;
  max-height: 10em;
}
.pre-inc .info_item > dt {
  width: 7em;
}
.pre-inc .info_item > dd {
  width: calc(100% - 8em);
}
.pre-inc .info_item a {
  color: #2f5597;
  text-decoration: underline;
}
@media screen and (min-width: 769px) {
  .pre-inc .info_item a:hover {
    text-decoration: none;
  }
  .pre-inc .info_item > *:nth-of-type(n+2) {
    margin-top: 0.7em;
  }
}
@media screen and (max-width: 768px) {
  .pre-inc .info_wrap {
    flex-wrap: wrap;
  }
  .pre-inc .info_item {
    width: 100%;
    font-size: 0.85em;
  }
  .pre-inc .info_item > dt {
    margin-top: 0.7em;
  }
  .pre-inc .info_item > dd {
    width: 100%;
  }
}

.pre-inc .red{
  color: #ff0000;
}

/* トピックスアニメ */
.pre-inc .ticker_wrap{display: flex;justify-content: center;align-items: center; margin-top: 3em;}
.pre-inc .ticker_wrap > p{color: #5DC6A3;font-weight: 700;font-size: 1.5em;line-height: 1;margin-right: 0.5em;display: flex;}
.pre-inc .ticker_wrap > p::before{content: "";background: url("../img/top/top_tit_i.svg") no-repeat center center/contain;width: 1em;height: 0.95em;margin-right: 0.3em;}
.pre-inc .ticker{width: 40em; overflow: hidden;border: 1px solid #047d41;background: #deffba;}
.pre-inc .ticker-track{white-space: nowrap;height: 2.2em;line-height: 2.2em;display: flex;align-items: center;}
.pre-inc .ticker-items{display: inline-flex;white-space: nowrap;;will-change: transform;}
.pre-inc .ticker-items span{display: inline-block;font-size: 0.65em;margin-right: 2em;line-height: 1;}
.pre-inc .ticker-items time{margin-right: 0.7em;}
.pre-inc .ticker-items span a{text-decoration: underline;color:#0000EE;}
.pre-inc .ticker-track.animate{animation-name: tickerMove;animation-timing-function: linear;animation-iteration-count: infinite;animation-play-state: running;}
@keyframes tickerMove {
from { transform: translateX(0); }
to   { transform: translateX(var(--ticker-move)); }
}
.pre-inc .ticker:hover .ticker-track.animate {animation-play-state: paused;}

@media (prefers-reduced-motion: reduce) {
.pre-inc .ticker-track.animate {animation: none !important; }
}
@media screen and (min-width: 769px) {
.pre-inc .ticker-items span a:hover{text-decoration: none;}
}

@media screen and (max-width: 768px) {
.pre-inc .ticker_wrap{padding: 0 4vw;}
.pre-inc .ticker_wrap > p{font-size: 1.2em;}
.pre-inc .ticker-items span{font-size: 0.7em;}
}

/* 敷地を貫き街を結ぶ、新たなるランドマーク構想。 */
.pre-inc .mirai_view_more{text-align: center;position: absolute;top: 62em;left: 0;width: 100%;animation-name: fadeInUp;}
.pre-inc .mirai_view_more p{font-size: 1em;color: #fff;}
.pre-inc .mirai_view_more_btn{display: flex;justify-content: center;align-items: center;border-radius: 2em;padding: 0 0.5em 0.1em 0;box-shadow: 0.15em 0.15em 0.3em rgba(0, 0, 0, 0.6);width: 17em;height: 4em;background: linear-gradient(45deg, #6dd088, #b8e55c);margin: 0.3em auto 0;cursor: pointer;}
.pre-inc .mirai_view_more_btn span{color: #fff;font-size: 2em;font-family: "Oswald", sans-serif;/* font-weight: 400;letter-spacing: 0.05em; */}
.pre-inc .mirai_view_more_btn span::before{content: "＋";margin-right: 0.5em;font-weight: 400;}
.pre-inc .mirai_view_more_btn::before{content: "";display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;transition: 0.3s all;border-radius: 2em;background: linear-gradient(45deg, #b8e55c, #6dd088);}
.pre-inc .mirai_view_more_btn.active span::before{content: "ー";}

.pre-inc #landmark{padding: 4em 0;max-width: 1920px;margin-inline: auto;}
.pre-inc .landmark_img{position: absolute;right: 0;top: 0;}
.pre-inc .landmark_tit{width: 47.5em;margin-inline: auto;animation-name: fadeInUp;}
.pre-inc .landmark_tit + p{font-size: 0.9em;margin-top: 2em;line-height: 2.5;text-align: justify;text-shadow: 0 0 0.1em #fff,0 0 0.1em #fff,0 0 0.1em #fff,0 0 0.1em #fff;}
.pre-inc .landmark_map_wrap{width: 100%;margin-top: 1em;}
.pre-inc .landmark_map_wrap + *{margin-top: 2em;}
.pre-inc .landmark_map_copy{position: absolute;bottom: 0;left: 29em;width: 38.15em;height: 14.55em; z-index: 1;font-size: 1.04166vw;}
.pre-inc .landmark_map_copy h4{font-size: 0.95em;font-weight: 400;}
.pre-inc .landmark_map_copy h4 + p{font-size: 0.73em;font-weight: 400;line-height: 1.4;}
.pre-inc .landmark_map_copy .cap{font-size: 0.58em;font-weight: 400;line-height: 1.4;position: absolute;color: #fff;
  text-shadow: 0px 0px 0.15em rgba(0, 0, 0, 0.7), 0px 0px 0.15em rgba(0, 0, 0, 0.7), 0px 0px 0.15em rgba(0, 0, 0, 0.7), 0px 0px 0.15em rgba(0, 0, 0, 0.7), 0px 0px 0.15em rgba(0, 0, 0, 0.7), 0px 0px 0.15em rgba(0, 0, 0, 0.7), 0px 0px 0.15em rgba(0, 0, 0, 0.7);}
.pre-inc .landmark_map_copy .copy01{position: absolute;top: 2.7em;left: 0;width: 18.1em;}
.pre-inc .landmark_map_copy .copy02{position: absolute;top: 0;right: 0;width: 16.15em;}
.pre-inc .landmark_map_copy .copy02 h4 + p{margin-top: 12.8em;}
.pre-inc .landmark_map_copy .cap:nth-of-type(1){left: 1em;bottom: 1.5em;}
.pre-inc .landmark_map_copy .cap:nth-of-type(2){left: 17em;bottom: 1.5em;}
.pre-inc .landmark_map_copy .cap:nth-of-type(3){left: 49.5em;bottom: 8em;}
.pre-inc .landmark_item{display: flex;justify-content: space-between;}
.pre-inc .landmark_item > *{width: 25em;}
.pre-inc .landmark_item h4{color: #fff;text-align: center;padding: 0.2em;font-size: 1em;font-weight: 400;}
.pre-inc .landmark_item h4 + p{font-size: 0.9em;margin-top: 0.9em;font-weight: 400;}
.pre-inc .landmark_item h4 + p + p{font-size: 0.75em;margin-top: 0.9em;font-weight: 400;}
.pre-inc .landmark_item > dt h4{background: #009366;}
.pre-inc .landmark_item > dd h4{background: #083190;}
.pre-inc .proposal{width: 26.3em;padding: 0.7em 0;text-align: center;border: 0.35em solid #fff; background: #d9d9da;margin: 2em auto 0 auto;}
.pre-inc .proposal::before{content: "";display: block;width: calc(100% - 0.1em);height: calc(100% - 0.1em);border: 0.05em solid #000;position: absolute;left: 0.05em;top: 0.05em;pointer-events: none;}
.pre-inc .proposal::after{content: "";display: block;width: calc(100% + 0.7em);height: calc(100% + 0.7em);border: 0.05em solid #000;position: absolute;left: -0.35em;top: -0.35em;pointer-events: none;}
.pre-inc .proposal span{font-size: 0.9em;font-weight: 400;}
.pre-inc .proposal .note{font-size: 0.6em;font-weight: 400;}

@media screen and (min-width: 1921px) {
.pre-inc .landmark_map_copy{font-size: 20px;}
}

@media screen and (min-width: 769px) {
.pre-inc .mirai_view_more_btn:hover::before{opacity: 0;}
}

@media screen and (max-width: 768px) {
.pre-inc .mirai_view_more{position: static;margin-top: 2em;}
.pre-inc .mirai_view_more p{font-size: 0.8em;}
.pre-inc .mirai_view_more_btn{font-size: 3vw;height: 3.5em;}
.pre-inc .mirai_view_more_btn span{font-size: 1.8em;}

.pre-inc #landmark{padding: 3em 0;}
.pre-inc .landmark_img{width: 55vw;}
.pre-inc .landmark_tit{width: 90vw;margin-inline: auto;animation-name: fadeInUp;}
.pre-inc .landmark_tit + p{font-size: 0.8em;margin-top: 2em;line-height: 1.8;}
.pre-inc .landmark_map_wrap .landmark_map{overflow: auto; -webkit-overflow-scrolling: touch;/* touch-action: pan-y; */}
.pre-inc .landmark_map_wrap .landmark_map figure{width: 1200px;max-width: none;}
.pre-inc .landmark_map_wrap .swipe_display{background-color: rgba(230, 230, 230, 0.9);padding: 0;text-align: center;position: absolute;z-index: 1;left: 0;right: 0;top: 50%;transform: translateY(-50%);margin: 0 auto;width: 70vw;transition: 0.2s all;}
.pre-inc .landmark_map_copy{font-size: 12.6px;}
.pre-inc .swipe_display span{background: url("../common/img/swipe_icon.svg") no-repeat left center/34px 30px;padding: 10px 10px 10px 45px;display: inline-block;}
.pre-inc .landmark_item{flex-wrap: wrap;gap: 1.5em;}
.pre-inc .landmark_item > *{width: 100%;}
.pre-inc .proposal{width: 100%;}
.pre-inc .proposal::after{width: calc(100% + 0.5em);height: calc(100% + 0.5em);left: -0.25em;top: -0.25em;}
.pre-inc .proposal .note{font-size: 0.55em;}
}

.pre-inc #plan{background: url("../img/top/plan_bk.webp") no-repeat center center/cover;}
.pre-inc #plan .top_tit_s{text-align: center;}
.pre-inc #plan .top_tit_s small{font-size: 1.5em;}
.pre-inc #plan .top_tit_s small::before{vertical-align: -0.8em;}
.pre-inc #plan .top_tit_s small span{font-size: 0.53em;display: block;margin: -1.2em 0 0 3em;font-weight: 500;}
.pre-inc #plan .t_contents_item{justify-content: flex-end;}
.pre-inc #plan .t_contents_item > dd .lead{font-size: 1.5em;font-weight: 500;color: #4a4a4a;}
.pre-inc .viewmore_btn{display: flex;justify-content: center;align-items: center;border-radius: 2em;padding: 0 0.5em 0.1em 0;box-shadow: 0.15em 0.15em 0.3em rgba(0, 0, 0, 0.6);width: 17em;height: 4em;background: var(--entry_color_hover);margin: 2em 0 0;font-size: 0.7em;}
.pre-inc .viewmore_btn span{color: #fff;letter-spacing: 0;font-size: 1.8em;font-family: "Oswald", sans-serif;font-weight: 500;}
.pre-inc .viewmore_btn::before{content: "";display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;transition: 0.3s all;border-radius: 2em;background: var(--entry_color);}
.pre-inc .viewmore_btn::after{content: "";display: block;width: 1.75em;height: 1.4em;position: absolute;right: 1.4em;top: 0;bottom: 0;margin: auto 0;transition: 0.3s all;background: url("../common/img/arrow_w.svg") no-repeat center center / contain;}

@media screen and (min-width: 769px) {
.pre-inc #plan .t_contents_item > dd{animation-name: fadeInLeft;}
.pre-inc #plan .t_contents_item > dt{animation-name: fadeInRight;}
.pre-inc .viewmore_btn:hover::before{opacity: 0;}
.pre-inc .viewmore_btn:hover::after{transform: translateX(0.3em);}
}

@media screen and (min-width: 1921px) {
.pre-inc #plan .t_contents_item{justify-content: flex-end;max-width: none;}
.pre-inc #plan .t_contents_item > dd{width: 445px;}
.pre-inc #plan .t_contents_item > dt{width: calc(50vw + 515px);}
}

@media screen and (max-width: 768px) {
.pre-inc #plan .t_contents_item > dd{order: 1;margin-top: 0;}
.pre-inc #plan .t_contents_item > dd .lead{font-size: 1.3em;text-align: center;}
.pre-inc #plan .t_contents_item > dt{margin-top: 1.5em;}
.pre-inc .viewmore_btn{font-size: 0.6em;margin: 3em auto 0;animation-name: fadeInUp;}
}
.pre-inc #area_guide h3 img{
	margin-top: 50px;
	animation-name: fadeInUp;
}
.pre-inc #area_guide .area_guide_mainimg{
	margin-top: 50px;
	animation-name: fadeInUp;
}
.pre-inc #area_guide .area_guide_mainimg img{
	width: 100%;
}
.pre-inc #area_guide .viewmore{
	animation-name: fadeInUp;
}
.pre-inc #area_guide .viewmore_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2em;
  padding: 0 0.5em 0.1em 0;
  box-shadow: 0.15em 0.15em 0.3em rgba(0, 0, 0, 0.6);
  width: 17em;
  height: 4em;
  background: linear-gradient(45deg, #6dd088, #b8e55c);
  margin: 2em auto 0;
}
.pre-inc #area_guide .viewmore_btn::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transition: 0.3s all;
  border-radius: 2em;
  background: linear-gradient(45deg, #b8e55c, #6dd088);
}
.pre-inc #area_guide .viewmore_btn:hover::before {
    opacity: 0;
  }
.pre-inc #area_guide .viewmore_btn::after {
  content: "";
  display: block;
  width: 1.75em;
  height: 1.4em;
  position: absolute;
  right: 1.4em;
  top: 0;
  bottom: 0;
  margin: auto 0;
  transition: 0.3s all;
  background: url(../common/img/arrow_w.svg) no-repeat center center / contain;
}
.pre-inc #area_guide .viewmore_btn:hover::after {
	transform: translateX(0.3em);
}
.pre-inc #area_guide .viewmore_btn span {
  color: #fff;
  font-size: 1.8em;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  letter-spacing: 0.07em;
}
@media screen and (max-width: 768px) {
  .pre-inc #area_guide .viewmore_btn {
    font-size: 3vw;
    height: 3.5em;
  }
	.pre-inc #area_guide h3 img,.pre-inc #area_guide .area_guide_mainimg {
		margin-top: 20px;
	}
}

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