@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&display=swap");
.sub-copy {
  color: #2b3a56;
  font-size: 2.4rem;
  letter-spacing: 0.5rem;
  font-feature-settings: "palt";
  line-height: 1.6; }

.local-nav {
  max-width: 940px;
  width: 90%;
  margin-inline: auto;
  padding-top: 8rem; }
  .local-nav ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px 1.5rem; }
    .local-nav ul li a {
      font-family: "adobe-garamond-pro", serif;
      font-weight: 400;
      font-style: normal;
      background: linear-gradient(0deg, #d6dae4 0%, #fbfcff 100%);
      color: #2b3a56;
      display: block;
      font-size: 1.8rem;
      box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.07);
      letter-spacing: 0.1em;
      text-align: center;
      padding: 1rem 10px;
      border-radius: 0.4rem;
      transition: filter 0.3s linear; }
      .local-nav ul li a:hover {
        filter: brightness(1.05); }
    .local-nav ul li.current a {
      background: linear-gradient(0deg, black 0%, #2b3a56 100%);
      color: #ffffff; }

.category-title {
  font-size: 2.6rem;
  letter-spacing: 0.2em;
  text-align: center; }

@media screen and (max-width: 768px) {
  .local-nav ul {
    grid-template-columns: 1fr; } }
/******************************************************

introduction

******************************************************/
.introduction .inner {
  max-width: 1000px; }
.introduction .loop-slide01 .splide__slide {
  box-sizing: border-box;
  padding: 0 1rem 4rem; }
  .introduction .loop-slide01 .splide__slide img {
    height: 25rem !important;
    width: auto; }
.introduction .living {
  display: grid;
  grid-template-columns: 0.63fr 1fr;
  column-gap: 2rem; }
  .introduction .living .sub-copy {
    align-self: flex-end; }
  .introduction .living .img {
    grid-row: span 2; }
  .introduction .living .lead {
    margin-top: 2.5rem; }

@media screen and (max-width: 768px) {
  .introduction .loop-slide01 .splide__slide img {
    height: 22rem !important;
    width: auto; }
  .introduction .living {
    grid-template-columns: 1fr; }
    .introduction .living .sub-copy {
      text-align: center; }
    .introduction .living .img {
      margin-top: 2rem; }
    .introduction .living .lead {
      margin-top: 3rem; } }
/******************************************************

position

******************************************************/
#position {
  background-color: #f2f1ed; }
  #position .note {
    font-size: 1rem;
    text-align: right; }
  #position .inner {
    max-width: 1000px; }
  #position .midashi {
    margin-top: 2rem; }
  #position .img01 {
    mix-blend-mode: multiply;
    margin-top: 4rem; }
    @media screen and (max-width: 500px) {
      #position .img01 {
        position: relative;
        overflow: hidden;
        margin-top: 2rem;
        margin-bottom: 1rem; }
        #position .img01 .scr-body {
          width: 100rem;
          display: block; }
        #position .img01 img {
          width: 100%;
          height: auto; } }
  #position .mid-high-rise {
    display: block;
    /**display: grid;
    grid-template-columns: 0.92fr 1fr;
    column-gap: 4rem;
    margin-top: 5rem;**/ }
    #position .mid-high-rise .sub-copy {
      align-self: flex-end;
      margin-top: 4.5rem;
      text-align: center; }
    #position .mid-high-rise .img {
      grid-row: span 2; }
    #position .mid-high-rise .lead {
      margin-top: 2.5rem;
      text-align: center; }

@media screen and (max-width: 768px) {
  #position .mid-high-rise {
    grid-template-columns: 1fr; }
    #position .mid-high-rise .sub-copy {
      text-align: center; }
    #position .mid-high-rise .img {
      margin-top: 2rem; }
    #position .mid-high-rise .lead {
      margin-top: 3rem; } }
/******************************************************

life-scene

******************************************************/
#life-scene {
  --block-padding: 13.33%; }
  #life-scene .category-title {
    margin-top: 6rem; }
  #life-scene .section {
    margin-top: 8rem; }
  #life-scene .block {
    position: relative; }
    #life-scene .block > * {
      position: absolute; }
    #life-scene .block > .img,
    #life-scene .block > .facility {
      opacity: 0;
      transition: opacity 0.5s linear; }
    #life-scene .block.aos-animate > .img,
    #life-scene .block.aos-animate > .facility {
      opacity: 1; }
  #life-scene .name {
    font-size: 2rem;
    line-height: 1.4;
    margin-top: 2rem;
    font-feature-settings: "palt"; }
  #life-scene .distance {
    font-size: 1.2rem;
    margin-top: 1rem; }
  #life-scene .lead {
    font-size: 1.6rem !important; }

.ordinary .block01 {
  aspect-ratio: 50 / 31; }
  .ordinary .block01 .copy01 {
    left: var(--block-padding);
    top: 0;
    width: 51.33%; }
    .ordinary .block01 .copy01 .lead {
      margin-top: 3rem; }
  .ordinary .block01 .img01 {
    right: 0;
    top: 0;
    width: 35.33%;
    transition-delay: 0.6s !important; }
  .ordinary .block01 .img02 {
    left: 0;
    bottom: 0;
    width: 56.66%;
    transition-delay: 1s !important; }
  .ordinary .block01 .copy02 {
    width: 35.33%;
    right: 0;
    bottom: 8%; }
  .ordinary .block01 .img03 {
    width: 90%;
    margin-top: 5rem;
    margin-bottom: 5rem;
    display: none; }
.ordinary .block02 {
  aspect-ratio: 5 / 2.5;
  margin-top: 12rem; }
  .ordinary .block02 .img01 {
    width: 30.66%;
    left: var(--block-padding);
    top: 0;
    transition-delay: 0.6s !important; }
  .ordinary .block02 .img02 {
    width: 50%;
    right: 0;
    top: 0;
    transition-delay: 1s !important; }
  .ordinary .block02 .copy {
    left: var(--block-padding);
    bottom: 3%;
    width: 36%; }

.nature {
  background-color: #f2f1ed;
  padding: 8rem 0; }
  .nature > .midashi,
  .nature > .lead {
    width: 90%;
    max-width: 1100px;
    margin-right: auto;
    margin-left: auto; }
  .nature > .img {
    margin-top: 8rem; }
  .nature .block01 {
    aspect-ratio: 50 / 26;
    margin-top: 12rem; }
    .nature .block01 .copy01 {
      left: var(--block-padding);
      bottom: 70%;
      width: 36.66%; }
    .nature .block01 .img01 {
      width: 50%;
      top: 0;
      right: 0;
      transition-delay: 0.6s !important; }
    .nature .block01 .img02 {
      width: 29.33%;
      left: var(--block-padding);
      bottom: 0;
      transition-delay: 1s !important; }
    .nature .block01 .copy02 {
      width: 50%;
      right: 0;
      bottom: 2%; }
  .nature .block02 {
    aspect-ratio: 15 / 4;
    margin-top: 5rem; }
    .nature .block02 .copy {
      left: var(--block-padding);
      top: 15%;
      width: 50%; }
    .nature .block02 .img {
      right: var(--block-padding);
      top: 0;
      width: 36.66%;
      transition-delay: var(--margin-value);
      transition-delay: 0.6s !important; }

.self-improvement > .midashi,
.self-improvement > .lead {
  width: 90%;
  max-width: 1100px;
  margin-right: auto;
  margin-left: auto; }
.self-improvement > .img-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 6rem; }
.self-improvement .loop-slide02 {
  --overlap: 9rem;
  margin-top: 9rem; }
  .self-improvement .loop-slide02 .splide__slide {
    box-sizing: border-box;
    padding: 0 1rem 4rem; }
    .self-improvement .loop-slide02 .splide__slide img {
      height: 25rem !important;
      width: auto; }
    .self-improvement .loop-slide02 .splide__slide.overlap {
      z-index: -1;
      width: 28rem;
      margin-top: 14rem;
      margin-left: calc(var(--overlap) * -1);
      margin-right: calc(var(--overlap) * -1); }

.convenience {
  background-color: #f2f1ed;
  padding: 8rem 0; }
  .convenience > .midashi,
  .convenience > .lead {
    width: 90%;
    max-width: 1100px;
    margin-right: auto;
    margin-left: auto; }
  .convenience .block01 {
    aspect-ratio: 75 / 50;
    margin-top: 8rem; }
    .convenience .block01 .facility01 {
      left: 0;
      top: 5%;
      width: 50%;
      transition-delay: 0.6s !important; }
      .convenience .block01 .facility01 .name,
      .convenience .block01 .facility01 .distance {
        padding-left: 26.66%; }
    .convenience .block01 .facility02,
    .convenience .block01 .facility03,
    .convenience .block01 .facility04,
    .convenience .block01 .facility05 {
      width: 18.66%; }
    .convenience .block01 .facility02 {
      right: 27.4%;
      top: 0;
      transition-delay: 1s !important; }
    .convenience .block01 .facility03 {
      right: 6.66%;
      top: 0;
      transition-delay: 1.4s !important; }
    .convenience .block01 .facility04 {
      right: 27.4%;
      top: 40%;
      transition-delay: 1s !important; }
    .convenience .block01 .facility05 {
      right: 6.66%;
      top: 40%;
      transition-delay: 1.4s !important; }
    .convenience .block01 .copy {
      left: var(--block-padding);
      bottom: 0;
      width: 55.45%; }
    .convenience .block01 .img01 {
      width: 46%;
      right: 0;
      bottom: 0;
      transition-delay: 1.8s !important; }
  .convenience .block02 {
    aspect-ratio: 25 / 8;
    margin-top: 10rem; }
    @media screen and (max-width: 900px) {
      .convenience .block02 {
        aspect-ratio: 25 / 8; } }
    @media screen and (max-width: 600px) {
      .convenience .block02 {
        aspect-ratio: 25 / 7; } }
    .convenience .block02 .facility01 {
      left: var(--block-padding);
      width: 36.66%;
      transition-delay: 0.6s !important; }
    .convenience .block02 .facility02,
    .convenience .block02 .facility03 {
      width: 18.66%;
      bottom: 0; }
    .convenience .block02 .facility02 {
      right: 27.4%;
      transition-delay: 1s !important; }
    .convenience .block02 .facility03 {
      right: 6.66%;
      transition-delay: 1.4s !important; }
    .convenience .block02 .facility04 {
      right: 6.66%;
      width: 36.66%;
      transition-delay: 1.4s !important; }
    .convenience .block02 .img01 {
      left: var(--block-padding);
      width: 36.66%;
      bottom: 0; }
    .convenience .block02 .copy {
      right: 6.66%;
      transition-delay: 1.4s !important;
      bottom: 0;
      width: 36.66%; }
  .convenience .block03 {
    aspect-ratio: 50 / 29;
    margin-top: 10rem; }
    .convenience .block03 .img01 {
      width: 50%;
      left: 0; }
    .convenience .block03 .facility01 {
      width: 39.33%;
      top: 0;
      right: 6.66%;
      transition-delay: 0.6s !important; }
    .convenience .block03 .facility02,
    .convenience .block03 .facility03 {
      width: 18.66%;
      top: 55%; }
    .convenience .block03 .facility02 {
      left: 10.66%;
      transition-delay: 1s !important; }
    .convenience .block03 .facility03 {
      left: 31.33%;
      transition-delay: 1.4s !important; }
    .convenience .block03 .copy {
      width: 46%;
      right: 0;
      bottom: 12%; }

@media screen and (max-width: 1121px) {
  #life-scene {
    --block-padding: 8%; }

  .ordinary .block01 {
    aspect-ratio: 10 / 8; }
    .ordinary .block01 .copy02 {
      padding-right: 2rem; }
  .ordinary .block02 {
    aspect-ratio: 5 / 3; }

  .nature .block01 .copy02 {
    padding-right: 2rem; }

  .convenience .block01 {
    aspect-ratio: 4 / 3; }
  .convenience .block02 {
    margin-top: 10rem; }
  .convenience .block03 {
    aspect-ratio: 5 / 4; }
    .convenience .block03 .copy {
      padding-right: 2rem; } }
@media screen and (max-width: 768px) {
  #life-scene .section:first-of-type {
    margin-top: 3rem; }

  .ordinary .block01 {
    aspect-ratio: 10 / 9; }
  .ordinary .block02 {
    aspect-ratio: 5 / 3; }
    .ordinary .block02 .copy {
      width: 80%; }

  .nature .block01 {
    aspect-ratio: 7 / 4; }
  .nature .block02 .copy {
    width: 45%; }

  .self-improvement .loop-slide02 {
    --overlap: 5rem; }
    .self-improvement .loop-slide02 .splide__slide {
      box-sizing: border-box;
      padding: 0 1rem 4rem; }
      .self-improvement .loop-slide02 .splide__slide img {
        height: 20rem !important;
        width: auto !important; }
      .self-improvement .loop-slide02 .splide__slide.overlap {
        width: 21rem;
        margin-top: 10rem; }

  .convenience .block01 {
    aspect-ratio: 7 / 6; }
    .convenience .block01 .copy {
      width: 40%; }
  .convenience .block03 {
    aspect-ratio: 4 / 3; } }
@media screen and (max-width: 500px) {
  .ordinary .block01 {
    aspect-ratio: 5 / 6; }
  .ordinary .block02 {
    aspect-ratio: 15 / 11; }

  .nature .block01 {
    aspect-ratio: 3 / 2; }

  .convenience .block01 {
    aspect-ratio: 15 / 16; }
  .convenience .block03 {
    aspect-ratio: 10 / 9; } }
@media screen and (max-width: 600px) {
  #life-scene {
    --block-padding: 5%; }
    #life-scene .block {
      aspect-ratio: inherit !important;
      position: static;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap; }
      #life-scene .block > *:not(:first-child) {
        margin-top: 4rem; }
      #life-scene .block > .copy {
        position: static; }
      #life-scene .block > .img {
        position: relative; }
      #life-scene .block > .facility {
        position: static; }

  .ordinary .block01 .copy01 {
    order: 1;
    width: 100%;
    box-sizing: border-box;
    padding-right: 5%; }
    .ordinary .block01 .copy01 .midashi,
    .ordinary .block01 .copy01 .lead {
      margin-left: 6%; }
  .ordinary .block01 .img01 {
    order: 2;
    width: 70%;
    margin-left: auto; }
  .ordinary .block01 .img03 {
    display: block; }
  .ordinary .block01 .img02 {
    order: 4;
    width: 90%;
    margin-right: auto;
    display: none; }
  .ordinary .block01 .copy02 {
    order: 3;
    width: 90%;
    margin-left: var(--block-padding); }
  .ordinary .block02 {
    margin-top: 8rem; }
    .ordinary .block02 .img01 {
      width: 40%;
      margin-left: var(--block-padding);
      left: 0; }
    .ordinary .block02 .img02 {
      width: 50%; }
    .ordinary .block02 .copy {
      width: 90%;
      margin-left: var(--block-padding); }

  .nature .block01 {
    margin-top: 8rem; }
    .nature .block01 .copy01 {
      width: 90%;
      margin-left: var(--block-padding); }
    .nature .block01 .img01 {
      width: 90%; }
    .nature .block01 .img02 {
      width: 40%;
      margin-left: var(--block-padding);
      left: 0; }
    .nature .block01 .copy02 {
      width: 45%;
      margin-right: var(--block-padding); }
  .nature .block02 .copy {
    width: 40%;
    margin-left: var(--block-padding); }
  .nature .block02 .img {
    width: 50%;
    margin-right: 0;
    right: 0; }

  .convenience .block01 .facility01 {
    width: 90%; }
    .convenience .block01 .facility01 .name,
    .convenience .block01 .facility01 .distance {
      padding-left: var(--block-padding); }
  .convenience .block01 .facility02,
  .convenience .block01 .facility03,
  .convenience .block01 .facility04,
  .convenience .block01 .facility05 {
    width: 43%; }
  .convenience .block01 .facility02 {
    margin-left: var(--block-padding); }
  .convenience .block01 .facility03 {
    margin-right: var(--block-padding); }
  .convenience .block01 .facility04 {
    margin-left: var(--block-padding); }
  .convenience .block01 .facility05 {
    margin-right: var(--block-padding); }
  .convenience .block01 .copy {
    margin-left: var(--block-padding);
    width: 90%; }
  .convenience .block01 .img01 {
    width: 80%;
    margin-left: auto; }
  .convenience .block02 .facility01 {
    width: 90%; }
    .convenience .block02 .facility01 .name,
    .convenience .block02 .facility01 .distance {
      padding-left: var(--block-padding); }
  .convenience .block02 .facility02,
  .convenience .block02 .facility03 {
    width: 43%; }
  .convenience .block02 .facility02 {
    margin-left: var(--block-padding); }
  .convenience .block02 .facility03 {
    margin-right: var(--block-padding); }
  .convenience .block02 .facility04 {
    margin-left: 25%;
    width: 75%; }
  .convenience .block02 .img {
    width: 60%; }
  .convenience .block02 .copy {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%; }
  .convenience .block03 {
    margin-top: 2rem; }
    .convenience .block03 .img01 {
      width: 80%;
      margin-left: auto;
      order: 5;
      margin-top: 3rem; }
    .convenience .block03 .facility01 {
      order: 1;
      width: 90%; }
      .convenience .block03 .facility01 .name,
      .convenience .block03 .facility01 .distance {
        padding-left: var(--block-padding); }
    .convenience .block03 .facility02,
    .convenience .block03 .facility03 {
      width: 43%; }
    .convenience .block03 .facility02 {
      margin-left: var(--block-padding);
      order: 2; }
    .convenience .block03 .facility03 {
      margin-right: var(--block-padding);
      order: 3; }
    .convenience .block03 .copy {
      order: 4;
      margin-left: var(--block-padding);
      width: 90%; } }
/******************************************************

life-information

******************************************************/
#life-information .map-image {
  margin-top: 3rem;
  margin-bottom: 2rem; }
#life-information .tab {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  column-gap: 6px;
  margin-top: 6rem; }
  #life-information .tab li {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    background-color: #cfdcde;
    color: #000000;
    text-align: center;
    font-size: 16px;
    line-height: 1.2;
    padding: 2rem 5px;
    cursor: pointer;
    font-feature-settings: "palt";
    white-space: nowrap;
    transition: background-color .3s linear, color .3s linear; }
    #life-information .tab li.current, #life-information .tab li:hover {
      color: #fff;
      background-color: #747b7c; }
#life-information .content {
  display: none;
  opacity: 0;
  margin-top: 2rem; }
  #life-information .content.show {
    display: block;
    opacity: 1; }
  #life-information .content.shopping table tbody {
    grid-template-rows: repeat(7, auto); }
  #life-information .content.public table tbody {
    grid-template-rows: repeat(7, auto); }
  #life-information .content.park table tbody {
    grid-template-rows: repeat(10, auto); }
  #life-information .content.leisure table tbody {
    grid-template-rows: repeat(5, auto); }
  #life-information .content.gourmet table tbody {
    grid-template-rows: repeat(12, auto); }
  #life-information .content.hospital table tbody {
    grid-template-rows: repeat(7, auto); }
  #life-information .content.education table tbody {
    grid-template-rows: repeat(5, auto); }
#life-information table {
  width: 100%; }
  #life-information table tbody {
    display: grid;
    grid-template-columns: repeat(2, auto);
    align-items: flex-start;
    grid-auto-flow: column;
    column-gap: 4rem;
    font-size: 14px;
    line-height: 1.3; }
    #life-information table tbody tr {
      display: flex;
      justify-content: space-between;
      width: 100%;
      border-bottom: 1px solid #cccccc;
      padding: 1rem 0; }
    #life-information table tbody th {
      display: grid;
      grid-template-columns: 22px 1fr;
      align-items: center;
      column-gap: 10px;
      font-weight: normal; }
      #life-information table tbody th .number {
        background-color: #bca856;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        display: grid;
        place-content: center;
        color: #fff; }
    #life-information table tbody td {
      text-align: right; }
#life-information .google-map {
  max-width: 410px;
  width: 100%;
  margin-inline: auto;
  margin-top: 6rem; }
  #life-information .google-map a {
    background: #8a909b;
    border-radius: 0.5rem;
    display: block;
    font-size: 1.9rem;
    color: #fff;
    width: 100%;
    padding: 1.5rem 1rem;
    position: relative;
    text-align: center;
    font-feature-settings: "palt";
    letter-spacing: 0.1em;
    transition: filter 0.3s linear; }
    #life-information .google-map a::before {
      position: absolute;
      right: 2rem;
      top: 50%;
      translate: 0 -50%;
      content: '';
      width: 20px;
      height: 4px;
      border-bottom: solid 1px currentColor;
      border-right: solid 1px currentColor;
      transform: skewX(35deg); }
    #life-information .google-map a:hover {
      filter: brightness(1.2); }

@media screen and (max-width: 1121px) {
  #life-information .tab {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px; }
    #life-information .tab li {
      font-size: 14px; } }
@media screen and (max-width: 768px) {
  #life-information .map-image {
    margin-top: 3rem; }
  #life-information .tab li {
    font-size: 2.5vw; }
  #life-information table tbody {
    font-size: 11px;
    grid-template-columns: 1fr;
    grid-auto-flow: inherit;
    grid-template-rows: auto !important; }
    #life-information table tbody td {
      padding-top: 0.5rem; } }
.slick-dotted .slick-dots li {
  background: #666;
  opacity: 0.4;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  margin: 1rem; }
  .slick-dotted .slick-dots li button {
    text-indent: -9999px; }
  .slick-dotted .slick-dots li.slick-active {
    opacity: 1; }

.scroll-img {
  text-align: center;
  margin-top: 1.5rem;
  display: none; }
  .scroll-img img {
    width: 100%;
    height: auto; }
  @media screen and (max-width: 500px) {
    .scroll-img {
      display: block; } }

/******************************************************

detail

******************************************************/
.infinite-slider {
  margin-top: 1rem;
  margin-bottom: 3rem; }
  .infinite-slider .swiper-wrapper {
    transition-timing-function: linear;
    align-items: flex-start; }
  .infinite-slider .swiper-slide {
    height: auto !important;
    /* 高さを指定 */
    width: 40rem !important;
    box-sizing: border-box;
    margin: 0 1rem; }
    .infinite-slider .swiper-slide img {
      width: 100%;
      height: auto; }
    .infinite-slider .swiper-slide .photo {
      position: relative;
      overflow: hidden;
      /**border-radius: 0.7rem;**/ }
    .infinite-slider .swiper-slide.half {
      width: 17.7rem !important; }
  @media screen and (max-width: 600px) {
    .infinite-slider {
      margin-top: 0rem;
      margin-bottom: 0rem; }
      .infinite-slider .swiper-slide {
        width: 28rem !important; }
        .infinite-slider .swiper-slide.half {
          width: 12.3rem !important; } }

.infinite-slider2 {
  margin-top: 8rem;
  margin-bottom: 1rem; }
  .infinite-slider2 .swiper-wrapper {
    transition-timing-function: linear;
    align-items: flex-start; }
  .infinite-slider2 .swiper-slide {
    height: auto !important;
    /* 高さを指定 */
    width: 40rem !important;
    box-sizing: border-box;
    margin: 0 1rem; }
    .infinite-slider2 .swiper-slide.half {
      width: 28rem !important; }
    .infinite-slider2 .swiper-slide img {
      width: 100%;
      height: auto; }
  @media screen and (max-width: 600px) {
    .infinite-slider2 .swiper-slide {
      width: 28rem !important; }
      .infinite-slider2 .swiper-slide.half {
        width: 19.55rem !important; } }

.slide-inner .name {
  font-size: 2rem;
  line-height: 1.4;
  margin-top: 2rem;
  font-feature-settings: "palt"; }
.slide-inner .distance {
  font-size: 1.2rem;
  margin-top: 1rem; }