@charset "UTF-8";
/* ------------------------------------
// accessHeader
------------------------------------ */
#accessHeader {
  width: 100%;
  margin: 5rem auto 10rem;
  display: grid;
  gap: 0;
  position: relative;
  grid-template-columns: 1fr 50%;
  grid-template-areas: "text photo";
}
@media screen and (min-width: calc(1000px + 2rem)) {
  #accessHeader {
    width: 75%;
    min-width: 1000px;
  }
}
#accessHeader:before, #accessHeader:after {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 80%;
}
#accessHeader::before {
  z-index: 0;
  background: #F1F8FA;
  top: 0;
  left: 0;
}
#accessHeader::after {
  z-index: -1;
  background: #E8F3F8;
  top: 4rem;
  left: 4rem;
}
#accessHeader .text {
  grid-area: text;
  z-index: 2;
  padding: 5rem;
}
#accessHeader .text .leadTitle {
  position: relative;
  margin-bottom: 3rem;
}
#accessHeader .text .leadTitle h3 {
  font-size: clamp(2rem, 1.7vw, 2.4rem);
  font-weight: 600;
  width: fit-content;
  letter-spacing: 0.03em;
  text-indent: 0.03em;
}
#accessHeader .text .leadTitle h3 strong {
  color: #3BA8D1;
  font-weight: 600;
}
#accessHeader .text p {
  color: #002A54;
}
#accessHeader .text p + p {
  margin-top: 2rem;
}
#accessHeader .text p.link a {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  color: #3BA8D1;
  text-decoration: underline;
}
#accessHeader .text p.link a::after {
  content: "";
  width: 2.2rem;
  aspect-ratio: 14.5/22;
  background: url(/lib/img/cmn/icon_access.svg) no-repeat center/contain;
}
#accessHeader .text .contact {
  margin-top: 3rem;
}
#accessHeader .text .contact li + li {
  margin-top: 1rem;
}
#accessHeader .text .contact a {
  box-shadow: 4px 4px 0 #FFF;
  color: #FFF;
  font-weight: 500;
  padding: 2rem 2rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  box-shadow: 5px 5px 0 #EDF4F5;
}
#accessHeader .text .contact a:after {
  content: "";
  display: block;
  position: absolute;
  right: 1rem;
  top: calc(50% - 5px);
  width: 6px;
  height: 10px;
  mask: url(/lib/img/cmn/icon_arrow_01.svg) no-repeat center/contain;
  background: #FFF;
}
#accessHeader .text .contact a:before {
  content: "";
  width: 20px;
  aspect-ratio: 1;
}
#accessHeader .text .contact .link_reserve {
  background: #002A54;
  font-size: clamp(1.8rem, 1.4vw, 2rem);
}
#accessHeader .text .contact .link_reserve:before {
  width: 22px;
  background: url(/lib/img/cmn/icon_cal.svg) no-repeat center/contain;
}
#accessHeader .text .contact .link_tel {
  background: #3BA8D1;
  font-family: "Sofia Sans", sans-serif;
  font-size: clamp(2rem, 1.7vw, 2.4rem);
}
#accessHeader .text .contact .link_tel:before {
  width: 20px;
  background: url(/lib/img/cmn/icon_tel.webp) no-repeat center/contain;
}
#accessHeader .photo {
  grid-area: photo;
  z-index: 2;
  padding-top: 2rem;
  max-width: 600px;
  margin: 0 0 0 auto;
}
@media screen and (max-width: 768px) {
  #accessHeader {
    margin: 5rem 2rem;
    width: calc(100% - 4rem);
    grid-template-columns: 1fr;
    grid-template-areas: "text" "photo";
  }
  #accessHeader .text {
    padding: 2rem 3rem 2rem 2rem;
  }
  #accessHeader .text .featureTitle {
    padding: 0;
    margin-bottom: 2rem;
  }
  #accessHeader .text .featureTitle h3 {
    font-size: clamp(1.7rem, 1.7vw, 2.4rem);
  }
  #accessHeader .photo {
    padding: 1rem;
    max-width: 400px;
    margin: 0 auto;
  }
  #accessHeader:before, #accessHeader:after {
    height: 100%;
    width: calc(100% - 2rem);
  }
  #accessHeader:after {
    top: 2rem;
    left: 2rem;
  }
}

/* ------------------------------------
// #accessby
------------------------------------ */
#accessby {
  position: relative;
  margin-bottom: 10rem;
  /* 個別 */
}
#accessby::after {
  content: "";
  width: 100%;
  height: 28px;
  background: #F2F7F8;
  mask: url(/lib/img/cmn/separate_nami_01.svg) repeat-x bottom/cover;
  display: block;
  position: absolute;
  bottom: -28px;
  left: 0;
}
@media screen and (max-width: 768px) {
  #accessby {
    margin-bottom: 5rem;
  }
  #accessby::after {
    height: 14px;
    bottom: -14px;
  }
}
#accessby .innerlink {
  position: relative;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  gap: clamp(1rem, 1.4vw, 2rem);
  padding: 0 2rem;
}
@media screen and (min-width: calc(1000px + 2rem)) {
  #accessby .innerlink {
    width: 75%;
    min-width: 1000px;
  }
}
#accessby .innerlink li a {
  height: 100%;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  grid-template-columns: 5rem 1fr;
  padding: 3rem 2rem 4rem;
  color: #FFF;
  position: relative;
}
#accessby .innerlink li a::before {
  content: "";
  width: clamp(3rem, 3.2vw, 4.6rem);
  aspect-ratio: 1;
  display: block;
  background: #FFF;
}
#accessby .innerlink li a:after {
  content: "";
  width: 10px;
  aspect-ratio: 1/2;
  display: block;
  mask: url(/lib/img/cmn/icon_arrow_01.svg) no-repeat center/contain;
  background: #FFF;
  position: absolute;
  left: calc(50% - 1rem);
  top: 1rem;
  transform: rotate(90deg);
}
#accessby .innerlink li a:hover {
  transform: translateY(1rem);
}
#accessby .innerlink li.train a {
  background: #84CDD9;
}
#accessby .innerlink li.train a:before {
  mask: url(/lib/img/cmn/icon_train.svg) no-repeat center/contain;
}
#accessby .innerlink li.bus a {
  background: #3BA8D1;
}
#accessby .innerlink li.bus a:before {
  mask: url(/lib/img/cmn/icon_bus.svg) no-repeat center/contain;
}
#accessby .innerlink li.car a {
  background: #5183C4;
}
#accessby .innerlink li.car a:before {
  mask: url(/lib/img/cmn/icon_car.svg) no-repeat center/contain;
}
@media screen and (max-width: 768px) {
  #accessby .innerlink {
    gap: 0.5rem;
    display: block;
  }
  #accessby .innerlink li a {
    height: 100%;
    justify-content: start;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1rem 1rem;
    color: #FFF;
    position: relative;
  }
  #accessby .innerlink li a br {
    display: none;
  }
  #accessby .innerlink li a:after {
    content: "";
    width: 8px;
    left: auto;
    right: 1rem;
    top: calc(50% - 8px);
  }
  #accessby .innerlink li a:hover {
    transform: translateY(0);
  }
  #accessby .innerlink li.car a {
    padding-bottom: 2rem;
  }
}
#accessby > section {
  padding: 5rem 2rem 7rem;
  position: relative;
}
#accessby > section::before {
  content: "";
  width: 100%;
  height: 28px;
  background: #FAF9F5;
  mask: url(/lib/img/cmn/separate_nami_01.svg) repeat-x bottom/cover;
  display: block;
  transform: rotate(180deg);
  position: absolute;
  top: -27px;
  left: 0;
}
@media screen and (max-width: 768px) {
  #accessby > section {
    padding: 2rem 2rem 5rem;
  }
  #accessby > section::before {
    height: 14px;
    top: -14px;
  }
}
#accessby > section hgroup {
  display: grid;
  grid-template-columns: max-content 1fr;
  width: fit-content;
  color: #002A54;
  gap: 1rem;
  margin: 0 auto 3rem;
}
#accessby > section hgroup:before {
  content: "";
  width: 4.6rem;
  aspect-ratio: 1;
  display: block;
}
#accessby > section hgroup h2 {
  font-size: clamp(1.8rem, 1.8vw, 2.6rem);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.02em;
  text-indent: 0.02em;
  color: #002A54;
  padding-top: 0.5rem;
}
#accessby > section hgroup h2:after {
  content: "";
  width: 110px;
  height: 3px;
  display: block;
  border-top: 3px dotted #3BA8D1;
  margin: 1.5rem auto 0;
}
@media screen and (max-width: 768px) {
  #accessby > section hgroup {
    grid-template-columns: 1fr;
  }
  #accessby > section hgroup:before {
    margin: 0 auto;
  }
}
#accessby > section .access_detail {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
@media screen and (min-width: calc(1000px + 2rem)) {
  #accessby > section .access_detail {
    width: 75%;
    min-width: 1000px;
  }
}
#accessby > section ol li {
  padding-left: calc(clamp(2rem, 1.8vw, 2.6rem) + 1rem);
  text-indent: calc((clamp(2rem, 1.8vw, 2.6rem) + 1rem) * -1);
}
#accessby > section ol li span {
  font-size: clamp(2rem, 1.8vw, 2.6rem);
  color: #3BA8D1;
  font-weight: 900;
  padding-right: 1rem;
}
#accessby > section .photolist {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}
#accessby > section .photolist li img {
  border: 5px solid #FFF;
}
#accessby > section .photolist li p {
  margin-top: 1rem;
}
@media screen and (max-width: 768px) {
  #accessby > section .photolist {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
#accessby #access_train {
  background: #F6F2E4;
}
#accessby #access_train:before {
  background: #F6F2E4;
}
#accessby #access_train hgroup:before {
  mask: url(/lib/img/cmn/icon_train.svg) no-repeat center/contain;
  background: #D39948;
}
#accessby #access_train hgroup h2:after {
  border-color: #D39948;
}
#accessby #access_bus {
  background: #DDEEF0;
}
#accessby #access_bus:before {
  background: #DDEEF0;
}
#accessby #access_bus hgroup:before {
  mask: url(/lib/img/cmn/icon_bus.svg) no-repeat center/contain;
  background: #3BA8D1;
}
#accessby #access_bus hgroup h2:after {
  border-color: #3BA8D1;
}
#accessby #access_car {
  background: #F2F7F8;
}
#accessby #access_car:before {
  background: #F2F7F8;
}
#accessby #access_car hgroup:before {
  width: 3.6rem;
  mask: url(/lib/img/cmn/icon_car.svg) no-repeat center/contain;
  background: #3BA8D1;
}
#accessby #access_car hgroup h2 {
  padding-top: 0;
}
#accessby #access_car hgroup h2:after {
  border-color: #3BA8D1;
}
#accessby #access_car .car_detail {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
@media screen and (min-width: calc(1000px + 2rem)) {
  #accessby #access_car .car_detail {
    width: 75%;
    min-width: 1000px;
  }
}
#accessby #access_car .car_detail h3 {
  grid-area: h3;
  width: fit-content;
  align-self: center;
  font-size: clamp(2rem, 1.7vw, 2.4rem);
  color: #002A54;
  width: fit-content;
  border-bottom: 1px solid #000;
}
#accessby #access_car .car_detail .disc {
  grid-area: disc;
}
#accessby #access_car .car_detail .photo {
  grid-area: photo;
}
#accessby #access_car .car_detail .accessmap {
  grid-area: accessmap;
  background: #FFF;
  padding: 3rem;
}
@media screen and (max-width: 768px) {
  #accessby #access_car .car_detail .accessmap {
    padding: 2rem 1rem 2rem 1rem;
  }
}
#accessby #access_car .car_detail .accessmap p {
  margin-top: 1rem;
}
#accessby #access_car .firstPort {
  display: grid;
  grid-template-columns: 1fr clamp(300px, 31.3vw, 45rem);
  grid-template-areas: "h3 photo" "disc photo";
  gap: 1rem 4rem;
}
@media screen and (max-width: 768px) {
  #accessby #access_car .firstPort {
    grid-template-columns: 1fr;
    grid-template-areas: "h3" "disc" "photo";
  }
  #accessby #access_car .firstPort .photo {
    max-width: 350px;
    margin: 0 auto;
  }
}
#accessby #access_car .secondPort {
  display: grid;
  grid-template-columns: clamp(300px, 31.3vw, 45rem) 1fr;
  grid-template-areas: "h3 accessmap" "disc accessmap" "photo accessmap";
  gap: 1rem 4rem;
  margin-top: 5rem;
}
@media screen and (max-width: 768px) {
  #accessby #access_car .secondPort {
    grid-template-columns: 1fr;
    grid-template-areas: "h3" "disc" "photo" "accessmap";
  }
  #accessby #access_car .secondPort .photo {
    max-width: 350px;
    margin: 0 auto;
  }
}