@charset "UTF-8";
/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
#Billboard {overflow: hidden;}
#Billboard .swiper-wrapper {transition-timing-function: linear;}
#Billboard .swiper-slide {width: auto;background-color: var(--color-03);}
#Billboard .swiper-slide img {width: auto;height: 40vw;mix-blend-mode: lighten;}

#Main .block-location-01 {background-color: #fff;}
#Main .block-location-01 h2 {text-align: center;line-height: 1;font-family: "Copperplate Custom", serif;font-size: 650%;color: var(--color-04);opacity: 0.5;}
#Main .block-location-01 h3 {position: relative;margin: -1.75em auto 0.5em;text-align: center;font-family: var(--serif);font-size: 175%;color: var(--color-02);}
#Main .block-location-01 h4 {text-align: center;font-family: var(--serif);font-size: 150%;color: #aa8e50;}
#Main .block-location-01 .lead {max-width: 30em;margin: 0 auto 2em;color: var(--color-03);}
#Main .block-location-01 .lead strong {font-weight: normal;color: var(--color-02);}
#Main .block-location-01 .grid-list > div figure {position: relative;}
#Main .block-location-01 .grid-list > div figure figcaption {position: absolute;bottom: 0;left: 0;right: 0;background: linear-gradient(0deg, rgb(0 0 0 / 50%) 0%, rgb(0 0 0 / 0%) 100%);padding: 3em 0.5em 0.5em;font-family: var(--serif);color: #fff;-moz-osx-font-smoothing:initial;-webkit-font-smoothing: auto;}
#Main .block-location-01 .mallage {position: relative;}
#Main .block-location-01 .mallage::before {content: "";position: absolute;top: 0;left: 0;right: 0;height: 2em;background-color: #fff;clip-path: ellipse(70% 200% at 50% -110%);}
#Main .block-location-01 .mallage::after {content: "";position: absolute;bottom: 0;left: 0;right: 0;height: 2em;background-color: #fff;clip-path: ellipse(70% 200% at 50% 210%);}
#Main .block-location-01 .column {position: relative;display: flex;justify-content: space-between;gap: 4em;border-top: 1px solid #ddd;margin-top: 3em;padding-top: 3em;}
#Main .block-location-01 .column > div {width: calc(50% - 1em);position: relative;}
#Main .block-location-01 .column > div figure {margin-bottom: 1.5em;}
#Main .block-location-01 .column > div figure img {}
#Main .block-location-01 .column > div figcaption {display: block;font-size: 87.5%;color: #454545;}
#Main .block-location-01 .column > div ul {display: flex;justify-content: space-between;flex-wrap: wrap;gap: 1em;}
#Main .block-location-01 .column > div ul li {width: calc(50% - 0.5em);margin: 0;}
#Main .block-location-01 .column > div ul li span {display: block;font-size: 87.5%;line-height: 1.8;color: #454545;}
#Main .block-location-01 .access {position: relative;margin-top: 2.5em;}
#Main .block-location-01 .access figcaption {font-family: var(--serif);color: #454545;}
#Main .block-location-01 .access figcaption span {display: inline-block;white-space: nowrap;}
#Main .block-location-01 .access figcaption strong {display: block;font-weight: normal;color: #aa8e50;}

#Main .block-location-02 {background-color: rgb(255 255 255 / 93%);}
#Main .block-location-02 h3 {margin-bottom: 1.5em;color: var(--color-02);}
#Main .block-location-02 h3 span {background: var(--grad-01);-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-size: 75%;opacity: 0.3;}
#Main .block-location-02 .map {position: relative;margin-bottom: 3em;}
#Main .block-location-02 .map img {position: relative;z-index: 2;}
#Main .block-location-02 .feature .lead {max-width: 40em;margin: 1em auto;}
#Main .block-location-02 .feature .grid-list > div figure figcaption {margin: 0.75em 0 0;letter-spacing: 0;line-height: 1.5;color: var(--color-02);}
#Main .block-location-02 .feature .grid-list > div figure figcaption span {white-space: nowrap;}
#Main .block-location-02 .feature .grid-list > div figure figcaption small {margin-right: 0.5em;letter-spacing: 0;font-size: 75%;}
#Main .block-location-02 .feature .grid-list > div figure + p {font-size: 75%;line-height: 1;color: #454545;}
#Main .block-location-02 .feature .grid-list > div figure + p strong {font-weight: normal;font-size: 150%;font-family: var(--serif);}
#Main .block-location-02 .life-information {position: relative;z-index: 2;padding: 1.5em 0 5em;}
#Main .block-location-02 .life-information dl {padding: 2em 0 0;}
#Main .block-location-02 .life-information dl::before {content: "";display: block;height: 1px;background: var(--grad-06);}
#Main .block-location-02 .life-information dl dt {padding: 0.5em;font-size: 125%;letter-spacing: 0.1em;color: #aa8e50;}
#Main .block-location-02 .life-information dl dt span {-webkit-text-fill-color: #aa8e50;font-size: 125%;font-family: var(--serif);}
#Main .block-location-02 .life-information dl dt small {margin-left: 1em;font-size: 75%;}
#Main .block-location-02 .life-information dl dd {margin: 0;padding: 0.5em;color: #454545;}
#Main .block-location-02 .life-information dl dd + dd {border-top: 1px dotted rgb(255 255 255 / 20%);}
#Main .block-location-02 .life-information dl dd p {display: table;width: 100%;margin: 0;padding: 0;}
#Main .block-location-02 .life-information dl dd p span {display: table-cell;font-size: 88.89%;letter-spacing: 0;vertical-align: middle;}
#Main .block-location-02 .life-information dl dd p span:nth-child(1) {}
#Main .block-location-02 .life-information dl dd p span:nth-child(2) {width: 4.5em;text-align: right;white-space: nowrap;}
#Main .block-location-02 .life-information dl dd p span:nth-child(3) {width: 3.8em;text-align: right;white-space: nowrap;}
#Main .block-location-02 .life-information dl dd p span:nth-child(2) strong {display: inline-block;font-size: 150%;font-family: var(--serif);font-weight: normal;line-height: 1;}
#Main .block-location-02 .life-information dl dd p span:nth-child(3) {font-size: 62.5%;font-weight: normal;}
#Main .block-location-02 .life-information dl dd p span small {display: block;font-size: 62.5%;line-height: 1;color: #454545;}
#Main .block-location-02 .life-information .column-list > div {position: relative;height: auto!important;break-inside: avoid;}
#Main .block-location-02 .caps {margin-top: -1em;text-align: right;font-size: 62.5%;color: #888;}
#Main .block-location-02 .pathmove {position: absolute;top: 0;left: 50%;transform: translateY(-50%);}

/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width:769px) {
  #Main .block-location-01 .grid-list-wrap {position: relative;margin: -4em 2em 0;}
  #Main .block-location-01 .grid-list {justify-content: space-between;}
  #Main .block-location-01 .grid-list > div {width: calc(16.667% - 1em);margin: 0.5em;max-width: 172px;}
  #Main .block-location-01 .grid-list > div:nth-of-type(-n+3) {width: calc(33.33% - 1em);max-width: 361px;}
  #Main .block-location-01 .access figcaption {position: absolute;bottom: 66%;left: 52%;}
  #Main .block-location-01 .column::before {content: "";position: absolute;top: 0;bottom: 0;left: 50%;width: 1px;background-color: #ddd;}
  #Main .block-location-01 .column > div:nth-child(1) ul {position: absolute;bottom: 0;}

  #Main .block-location-02 h4 {margin: 1em 0 0;}
  #Main .block-location-02 .feature .grid-list-wrap {position: relative;padding-left: 4em;}
  #Main .block-location-02 .feature .grid-list-wrap::before {content: attr(data-title) "";position: absolute;top: 50%;left: 0;transform-origin: 0 50%;transform: rotate(90deg) translateX(-58%) translateY(-100%);font-family: var(--serif);letter-spacing: 0.15em;line-height: 1.5;color: #fff;z-index: 2;}
  #Main .block-location-02 .feature .grid-list-wrap::after {content: "";position: absolute;top: 1em;left: 0;bottom: 1em;width: 3em;}
  #Main .block-location-02 .feature .grid-list-wrap[data-title="SHOPPING"]::after {background: #ae4e4f;}
  #Main .block-location-02 .feature .grid-list-wrap[data-title="EDUCATION"]::after {background: #6b8a69;}
  #Main .block-location-02 .feature .grid-list-wrap[data-title="PUBLIC / LEISURE"]::before {letter-spacing: 0.05em;}
  #Main .block-location-02 .feature .grid-list-wrap[data-title="PUBLIC / LEISURE"]::after {background: #b4923a;}
  #Main .block-location-02 .feature .grid-list-wrap[data-title="HOSPITAL"]::after {background: #4d99c1;}
  #Main .block-location-02 .feature .grid-list-wrap[data-title="BANK"]::after {background: #949495;}
  #Main .block-location-02 .feature .grid-list {margin: 0 -0.5em;}
  #Main .block-location-02 .feature .grid-list > div {width: calc(25% - 1em);margin: 1em 0.5em;}
  #Main .block-location-02 .feature .grid-list.col-04 {margin: 0;}
  #Main .block-location-02 .feature .grid-list.col-04 > div {width: 25%;margin: 0 0 2em;}
  #Main .block-location-02 .feature .grid-list.col-05 figure img {max-width: 226px;}
  #Main .block-location-02 .feature .grid-list.col-06 > div {width: 16.66%;margin: 1em 0;}
  #Main .block-location-02 .feature .grid-list.col-06 figure img {max-width: 200px;}
  #Main .block-location-02 .feature .grid-list.col-06 figure figcaption {text-align: center;}
  #Main .block-location-02 .life-information .column-list {display: block;column-count: 2;}
  #Main .block-location-02 .container {position: relative;z-index: 2;padding-top: 3em;}
}
/* =====
* LAYOUT :: TAB
=================================================================== */
@media only screen and (min-width: 769px) and (max-width: 1100px) {
  #Main .block-location-02 .feature .grid-list > div {width: calc(33.33% - 1em);}
  #Main .block-location-02 .caps {margin-top: -1.5em;margin-left: 6.5em;text-align: left;}
}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width:768px) {
  #Billboard .swiper-slide img {height: 100vw;}

  #Main .block-location-01 h2 {font-size: 146.8%;}
  #Main .block-location-01 h3 {margin-top: 0;font-size: 125%;}
  #Main .block-location-01 .column {display: block;}
  #Main .block-location-01 .column > div {width: 100%;}
  #Main .block-location-01 .column > div + div {margin-top: 3em;}
  #Main .block-location-01 .mallage {margin: 0 -1.5em;}
  #Main .block-location-01 .access figcaption {position: absolute;top: 1em;left: 0;right: 0;text-align: center;}
  #Main .block-location-01 .grid-list-wrap {margin-top: -3em;}
  #Main .block-location-01 .grid-list {display: flex;flex-wrap: wrap;}
  #Main .block-location-01 .grid-list > div {width: calc(33.33% - 2px);margin: 1px;}
  #Main .block-location-01 .grid-list > div:nth-of-type(-n+3) {width: calc(100% - 2px);margin: 0 1px 2px;}
  #Main .block-location-01 .container {padding-top: 3em;}

  #Main .block-location-02 .container {padding-top: 3em;}
  #Main .block-location-02 .feature .grid-list-wrap {}
  #Main .block-location-02 .feature .grid-list-wrap::before {content: attr(data-title) "";display: block;margin: 1em 0;padding: 1em 0;text-align: center;font-family: var(--serif);letter-spacing: 0.15em;line-height: 1.5;color: #fff;}
  #Main .block-location-02 .feature .grid-list-wrap[data-title="SHOPPING"]::before {background: #ae4e4f;}
  #Main .block-location-02 .feature .grid-list-wrap[data-title="EDUCATION"]::before {background: #6b8a69;}
  #Main .block-location-02 .feature .grid-list-wrap[data-title="PUBLIC / LEISURE"]::before {background: #b4923a;}
  #Main .block-location-02 .feature .grid-list-wrap[data-title="HOSPITAL"]::before {background: #4d99c1;}
  #Main .block-location-02 .feature .grid-list-wrap[data-title="BANK"]::before {background: #949495;}
  #Main .block-location-02 .feature .grid-list {display: flex;flex-wrap: wrap;margin: 0 -0.5em;}
  #Main .block-location-02 .feature .grid-list > div {width: calc(50% - 1em);margin: 0 0.5em 1.5em;}
  #Main .block-location-02 .feature .grid-list > div figure figcaption {margin-top: 0.25em;line-height: 1.5;}
  #Main .block-location-02 .life-information {padding: 0 0 1.5em;}
  #Main .block-location-02 .life-information .column-list {column-count: 1;}
  #Main .block-location-02 .life-information .column-list dl dt {margin-bottom: 0.25em;text-align: center;}
  #Main .block-location-02 .caps {margin: -2em 0 2em;text-align: left;}
}
@media only screen and (max-width:768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}