@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap");
/*==================================================
  root
==================================================*/

:root {
  /* color */
  --color-primary: #c50000;
  --color-secondary: #000;
  --color-tertiary: #b89600;

  --color-black: #222;
  --color-white: #fff;
  --color-gray: #777;
  --color-border: #ddd;
  --color-bg: #fbf7f4;

  /* font */
  --font-serif: "Shippori Mincho", serif;
  --font-sans: "Noto Sans JP", sans-serif;

  /* content */
  --content-width: 1200px;
  --content-padding: 32px;

  /* spacing */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 80px;
  --space-xxl: 120px;

  /* radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* transition */
  --transition: 0.3s ease;
}

/*==================================================
  access
==================================================*/

.access-content {
  position: relative;
}

.access-motto {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(../images/bg-loop-bk.webp);
  background-position: center center;
  background-size: cover;
  padding: clamp(20px, 8vw, 90px) 20px;
}

.access-motto-inner {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .access-motto-inner {
    flex-direction: column;
  }
}

.access-motto-block {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
}
@media (max-width: 768px) {
  /* SPサイズ */
  .access-motto-block {
    width: 100%;
  }
}

.access-motto h2 {
  color: var(--color-white);
  font-family: var(--font-serif);
  text-align: left;
  font-size: clamp(21px, 3vw, 38px);
  font-weight: 600;
  line-height: 1.8;
  display: inline-block;
}

.access-motto p {
  color: var(--color-white);
  font-family: var(--font-serif);
  text-align: left;
  font-size: clamp(14px, 1.8vw, 20px);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.8;
  display: inline-block;
}

@media (max-width: 768px) {
  /* SPサイズ */
  .access-motto p {
    margin-top: 30px;
  }
}

@media (max-width: 768px) {
  /* SPサイズ */
  .access-motto {
    padding: 30px 20px;
  }
}

.access-info {
  position: relative;
  padding: clamp(20px, 9vw, 90px) 0 0;
  background-image: url(../images/wave-black-re.svg);
  background-position: right -10vw bottom -10vw;
  background-size: clamp(300px, 50vw, 800px) auto;
  background-repeat: no-repeat;
}

.access-info-inner {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  margin-bottom: clamp(40px, 7vw, 80px);
}

.access-info-inner .heading {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(14px, 1.5vw, 16px);
  letter-spacing: 0.2em;
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.access-info-inner .heading img {
  width: clamp(30px, 7vw, 70px);
  height: 1px;
  margin-right: 15px;
}

.access-info-box {
  display: flex;
  align-items: start;
  justify-content: space-between;
}
@media (max-width: 768px) {
  /* SPサイズ */
  .access-info-box {
    flex-direction: column;
  }
}

.access-info-inner .information {
  width: 50%;
  padding: 0 10px 0 clamp(10px, 7vw, 80px);
}
@media (max-width: 768px) {
  /* SPサイズ */
  .access-info-inner .information {
    width: 100%;
  }
}

.access-info-inner .information h2 {
  font-size: 38px;
  font-weight: 600;
  margin-bottom: 40px;
}

.access-info-inner .information dl div {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.access-info-inner .information dt {
  width: 30px;
  flex-shrink: 0;
  margin-right: 17px;
}

.access-info-inner .information dt img {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.access-info-inner .information dd {
  margin: 0;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 600;
  line-height: 1.6;
}

.access-info-inner .information .text {
  margin: 36px 0 0;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.9;
  font-weight: 600;
}

.access-info-box .photo {
  width: 50%;
}
@media (max-width: 768px) {
  /* SPサイズ */
  .access-info-box .photo {
    width: 100%;
    padding: 20px;
  }
}

.access-info-box .photo img {
  width: 100%;
  height: auto;
}

.access-info-inner .information2 {
  width: 100%;
  padding: 0 10px 0 clamp(10px, 6vw, 80px);
}

.access-info-inner .information2 h2 {
  font-size: 38px;
  font-weight: 600;
  margin-bottom: 40px;
}

.access-info-inner .information2 dl div {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.access-info-inner .information2 dt {
  width: 30px;
  flex-shrink: 0;
  margin-right: 17px;
}

.access-info-inner .information2 dt img {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.access-info-inner .information2 dd {
  margin: 0;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 600;
  line-height: 1.6;
}

.access-map {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  aspect-ratio: 1160 / 600;
  padding: 20px;
}

.access-map iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

@media (max-width: 767px) {
  .access-map {
    aspect-ratio: 4 / 3;
  }
}