:root {
  --color-brw:#9C886B;
}

.c-flex {
  display: flex;
}
.c-flex.c-spb {
  justify-content: space-between;
}
.c-flex.c-wrap {
  flex-wrap: wrap;
}
.c-flex.c-ac {
  align-items: center;
}
.c-flex.c-afs {
  align-items: flex-start;
}

.c-mix {
  mix-blend-mode: multiply;
}

[class*=__inner] {
  max-width: 1200px;
  width: 90%;
  margin: 0 auto;
}

.access .navigation-bar {
  transform: translateY(0);
}

.p-access {
  background-image: url(../images/location/bg1.webp);
  background-size: 100%;
}
.p-access-mv {
  position: relative;
}
.p-access-mv h2 {
  font-family: "miller-banner", serif;
  font-weight: 300;
  color: var(--color-brw);
  position: absolute;
  z-index: 2;
  font-size: clamp(6rem, 3rem + 9.375vw, 21rem);
  letter-spacing: 0.05em;
  right: 0;
  bottom: 15px;
}
@media screen and (max-width: 767px) {
  .p-access-mv h2 {
    opacity: 1;
  }
}
.p-access h3 {
  text-align: center;
  font-family: "miller-banner", serif;
  font-weight: 300;
  font-size: clamp(1.5rem, 1.2rem + 0.9375vw, 3rem);
  letter-spacing: 0.05em;
  color: var(--color-brw);
  margin-bottom: clamp(1rem, -0.8rem + 5.625vw, 10rem);
}
.p-access h4 {
  text-align: center;
  font-size: clamp(1.4rem, 1.14rem + 0.8125vw, 2.7rem);
  letter-spacing: 0.2em;
  line-height: 2;
  margin-bottom: 170px;
  margin-bottom: clamp(4.5rem, 2rem + 7.8125vw, 17rem);
}
@media screen and (max-width: 767px) {
  .p-access h4 {
    line-height: 1.7;
  }
}
.p-access-area1 {
  padding: clamp(3rem, 0rem + 9.375vw, 18rem) 0;
}
.p-access-area1__txt {
  max-width: 880px;
  margin: 0 auto;
  margin-bottom: clamp(4rem, 1.8rem + 6.875vw, 15rem);
}
@media screen and (max-width: 767px) {
  .p-access-area1__txt {
    width: 66%;
  }
}
@media screen and (max-width: 767px) {
  .p-access-area1__inner {
    width: 85%;
  }
}
.p-access-area1__box1 {
  display: flex;
  justify-content: space-between;
  padding: 150px 50px 0 50px;
}
@media screen and (max-width: 767px) {
  .p-access-area1__box1 {
    padding: 5% 0 0 0;
  }
}
.p-access-area1__pic2 {
  width: 32%;
  margin-top: 20%;
}
.p-access-area1__pic3 {
  width: 61%;
}
@media screen and (max-width: 767px) {
  .p-access-area1__pic3 {
    margin-right: -10%;
    width: 72.5%;
  }
}
.p-access-area1__pic4 {
  max-width: 1200px;
  width: 90%;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .p-access-area1__pic4 {
    overflow: hidden;
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .p-access-area1__pic4 img {
    width: 125%;
    margin-left: -15%;
  }
}
.p-access-area1__box2 {
  margin-block-start: clamp(4.5rem, 0.4rem + 12.8125vw, 25rem);
  margin-block-end: clamp(1.5rem, -1.2rem + 8.4375vw, 15rem);
  padding: 180px 0 120px 0;
  background-color: rgba(156, 136, 107, 0.2);
}
@media screen and (max-width: 767px) {
  .p-access-area1__box2 {
    padding: 0;
    background: none;
  }
}
.p-access-area1__box2 .c-flex {
  margin-block-end: clamp(5rem, 3.6rem + 4.375vw, 12rem);
}
@media screen and (max-width: 767px) {
  .p-access-area1__box2 .c-flex {
    flex-direction: column;
    padding: 0 0;
  }
}
.p-access-area1__box2 .c-flex dl {
  width: 35%;
}
@media screen and (max-width: 767px) {
  .p-access-area1__box2 .c-flex dl {
    width: 100%;
    text-align: center;
    margin-bottom: 5%;
  }
}
.p-access-area1__box2 .c-flex dl dt {
  font-size: clamp(1.7rem, 1.36rem + 1.0625vw, 3.4rem);
  line-height: 1.5;
  margin-bottom: 1em;
}
.p-access-area1__box2 .c-flex figure {
  width: 58%;
}
@media screen and (max-width: 767px) {
  .p-access-area1__box2 .c-flex figure {
    width: 100%;
  }
}
.p-access-area1__box2 .c-grid {
  display: grid;
  -moz-column-gap: 70px;
       column-gap: 70px;
  row-gap: 25px;
  grid-template: "pic1 pic2 pic3" auto "txt1 txt2 txt3" auto/1fr 1fr 1fr;
}
@media screen and (max-width: 767px) {
  .p-access-area1__box2 .c-grid {
    gap: 0;
    grid-template: "txt1" auto "pic1" auto "txt2" auto "pic2" auto "txt3" auto "pic3" auto/1fr;
  }
}
@media screen and (max-width: 767px) {
  .p-access-area1__box2 .c-grid figure {
    margin-bottom: 15%;
  }
}
.p-access-area1__box2 .c-grid figure:nth-of-type(1) {
  grid-area: pic1;
}
.p-access-area1__box2 .c-grid figure:nth-of-type(2) {
  grid-area: pic2;
}
.p-access-area1__box2 .c-grid figure:nth-of-type(3) {
  grid-area: pic3;
}
@media screen and (max-width: 767px) {
  .p-access-area1__box2 .c-grid figure:nth-of-type(3) {
    margin-bottom: 0;
  }
}
.p-access-area1__box2 .c-grid p {
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-access-area1__box2 .c-grid p {
    margin-bottom: 5%;
    margin-inline: auto;
  }
}
.p-access-area1__box2 .c-grid p:nth-of-type(1) {
  grid-area: txt1;
}
@media screen and (max-width: 767px) {
  .p-access-area1__box2 .c-grid p:nth-of-type(1) {
    width: 95%;
  }
}
.p-access-area1__box2 .c-grid p:nth-of-type(2) {
  grid-area: txt2;
}
@media screen and (max-width: 767px) {
  .p-access-area1__box2 .c-grid p:nth-of-type(2) {
    width: 87%;
  }
}
.p-access-area1__box2 .c-grid p:nth-of-type(3) {
  grid-area: txt3;
}
@media screen and (max-width: 767px) {
  .p-access-area1__box2 .c-grid p:nth-of-type(3) {
    width: 95%;
  }
}
.p-access-area2 {
  position: relative;
  color: #fff;
  padding-block-start: clamp(6rem, 4.8rem + 3.75vw, 12rem);
  padding-block-end: clamp(6rem, 3.6rem + 7.5vw, 18rem);
}
.p-access-area2:before {
  content: "";
  background-color: #4F4D4D;
  mix-blend-mode: multiply;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}
.p-access-area2 * {
  position: relative;
}
.p-access-area2__inner {
  display: grid;
  justify-content: space-between;
  align-items: center;
  grid-template: "tl1 tl1" max-content "tl2 tl2" max-content "txt1 pic1" 1fr/35% 60%;
}
@media screen and (max-width: 767px) {
  .p-access-area2__inner {
    display: block;
    width: 85%;
  }
}
.p-access-area2__inner h3 {
  grid-area: tl1;
  margin-bottom: clamp(2rem, 1.2rem + 2.5vw, 6rem);
}
.p-access-area2__inner h4 {
  grid-area: tl2;
  margin-bottom: clamp(2rem, 0rem + 6.25vw, 12rem);
}
.p-access-area2__inner dl {
  grid-area: txt1;
}
.p-access-area2__inner dl dt {
  font-size: clamp(1.4rem, 1.32rem + 0.25vw, 1.8rem);
  line-height: 1.8;
  letter-spacing: 0.2em;
  margin-bottom: 3em;
}
@media screen and (max-width: 767px) {
  .p-access-area2__inner dl dt {
    width: 90%;
    letter-spacing: 0.1em;
    margin-inline: auto;
  }
}
@media screen and (max-width: 767px) {
  .p-access-area2__inner dl dd {
    width: 90%;
    margin: 12% auto 8%;
  }
}
.p-access-area2__inner figure {
  grid-area: pic1;
}
.p-access-area3 {
  position: relative;
  color: #fff;
  padding-block-start: clamp(6rem, 4.8rem + 3.75vw, 12rem);
  padding-block-end: clamp(6rem, 3.6rem + 7.5vw, 18rem);
}
.p-access-area3:before {
  content: "";
  background-color: #567B8E;
  mix-blend-mode: multiply;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}
.p-access-area3 * {
  position: relative;
}
.p-access-area3__inner {
  display: grid;
  justify-content: space-between;
  grid-template: "tl1 tl1" max-content "tl2 tl2" max-content "txt1 pic1" max-content "ul ul" 1fr/25% 70%;
}
@media screen and (max-width: 767px) {
  .p-access-area3__inner {
    display: block;
    width: 85%;
  }
}
.p-access-area3__inner h3 {
  grid-area: tl1;
  margin-bottom: clamp(2rem, 1.2rem + 2.5vw, 6rem);
}
.p-access-area3__inner h4 {
  grid-area: tl2;
  margin-bottom: clamp(2rem, 0rem + 6.25vw, 12rem);
}
.p-access-area3__inner p {
  grid-area: txt1;
  font-size: clamp(1.4rem, 1.32rem + 0.25vw, 1.8rem);
  line-height: 1.8;
  letter-spacing: 0.2em;
}
@media screen and (max-width: 767px) {
  .p-access-area3__inner p {
    width: 90%;
    letter-spacing: 0.1em;
    margin-inline: auto;
  }
}
.p-access-area3__inner figure {
  grid-area: pic1;
}
@media screen and (max-width: 767px) {
  .p-access-area3__inner figure {
    margin-top: 10%;
  }
}
.p-access-area3__inner ul {
  grid-area: ul;
  display: flex;
  justify-content: space-between;
  margin-top: 120px;
}
@media screen and (max-width: 767px) {
  .p-access-area3__inner ul {
    margin-top: 10%;
    display: flex;
    flex-direction: column;
    gap: 7.5vw;
  }
}
.p-access-area3__inner ul li:nth-of-type(1) {
  width: 50%;
}
@media screen and (max-width: 767px) {
  .p-access-area3__inner ul li:nth-of-type(1) {
    width: 100%;
  }
}
.p-access-area3__inner ul li:nth-of-type(2) {
  width: 42%;
}
@media screen and (max-width: 767px) {
  .p-access-area3__inner ul li:nth-of-type(2) {
    width: 100%;
  }
}/*# sourceMappingURL=access.css.map */