:root {
  --viewport-width: min(100vw, 1600px);
  --b: calc(var(--viewport-width) / 160);
}

#access .h2title {
  padding-top: max(24.4rem, 150px);
}
#access > .container {
  margin: max(10rem, 50px) auto max(15rem, 100px);
}
#access h3 {
  font-size: max(3rem, 20px);
  margin-bottom: max(5rem, 25px);
  line-height: 2;
}
#access h3 .rhombus {
  background-color: #3A9447;
  aspect-ratio: 11/6;
  width: max(3.3rem, 30px);
  height: 100%;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  transform: scale(0.8);
  margin-right: max(1.66rem, 5px);
}
#access h3 .sub {
  font-size: max(2rem, 20px);
  font-family: "Questrial", sans-serif;
  letter-spacing: 0.05em;
  color: #3A9447;
  margin-left: max(1.2rem, 12px);
  line-height: 1.7;
}
@media screen and (max-width: 550px) {
  #access h3 .sub {
    margin-left: max(1rem, 5px);
  }
}
#access .store {
  margin-top: max(14rem, 70px);
}
#access .store h4 {
  font-size: max(2rem, 16px);
  color: #30B8D8;
  background-color: rgba(48, 184, 216, 0.15);
  padding: max(2.2rem, 15px) max(3.7rem, 22px);
  margin-bottom: max(4.2rem, 20px);
}
#access .store .map {
  width: 100%;
  aspect-ratio: 701/288;
  min-height: 300px;
}
#access .store .map iframe {
  width: 100%;
  height: 100%;
}
#access .store ul {
  margin-top: max(2rem, 10px);
}
#access .store ul li {
  display: flex;
}
@media screen and (max-width: 1220px) {
  #access .store ul li {
    flex-direction: column;
  }
}
@media screen and (max-width: 768px) {
  #access .store ul li {
    flex-direction: row;
  }
}
@media screen and (max-width: 460px) {
  #access .store ul li {
    flex-direction: column;
  }
}
#access .store ul li p {
  font-weight: 400;
}
#access .store ul li p:nth-of-type(1) {
  width: 100%;
  min-width: 115px;
  max-width: 170px;
}
#access .store ul li p:nth-of-type(1) {
  flex: 1;
}
#access .store ul li p a {
  display: inline-block;
}
#access .store .dot {
  font-size: max(1.4rem, 12px);
  padding: max(4.5rem, 30px) 0;
  margin-top: max(4.5rem, 30px);
  border-top: 2px dotted #3A9447;
  border-bottom: 2px dotted #3A9447;
}
#access .store .dot .point {
  color: #3A9447;
}
#access section {
  margin-bottom: max(10rem, 80px);
}
@media screen and (max-width: 768px) {
  #access section {
    margin-bottom: max(10rem, 60px);
  }
}
#access section .flexbox {
  display: flex;
  gap: max(5rem, 30px);
}
@media screen and (max-width: 768px) {
  #access section .flexbox {
    flex-direction: column;
  }
}
#access section .flexbox__left {
  flex: 1;
  justify-content: space-between;
  gap: max(4.2rem, 40px);
  min-width: 300px;
}
#access section .flexbox__right {
  width: 54%;
}
@media screen and (max-width: 768px) {
  #access section .flexbox__right {
    width: 100%;
  }
}
#access section .flexbox.nomap {
  gap: max(9rem, 50px);
}
@media screen and (max-width: 768px) {
  #access section .flexbox.nomap {
    gap: max(9rem, 60px);
  }
}
#access section .flexbox.nomap .flexbox__right {
  width: initial;
  flex: 1;
}
#access section#mainoffice .flexbox__left {
  display: flex;
  flex-direction: column;
}
#access .map__wrapper {
  padding-top: max(13rem, 80px);
}
#access .map__content {
  position: relative;
  z-index: 0;
}
#access .map__menu {
  position: absolute;
  top: 0;
  left: 15%;
  z-index: 10;
}
@media screen and (max-width: 1300px) {
  #access .map__menu {
    left: 10%;
  }
}
@media screen and (max-width: 1000px) {
  #access .map__menu {
    left: 5%;
  }
}
@media screen and (max-width: 768px) {
  #access .map__menu {
    left: 0;
  }
}
@media screen and (max-width: 550px) {
  #access .map__menu {
    position: static;
    margin-bottom: 50px;
  }
}
#access .map__menu__list {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  width: max(22rem, 220px);
  background: #e8faeb;
  border-radius: max(0.5rem, 5px);
  overflow: hidden;
  padding: 1.5%;
  transition: max-height 0.3s ease;
}
@media screen and (max-width: 550px) {
  #access .map__menu__list {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  #access .map__menu__list {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: max-height 0.3s ease;
  }
}
@media screen and (max-width: 768px) {
  #access .map__menu__list__item {
    order: 1;
  }
  #access .map__menu__list__item.active {
    order: 0;
  }
}
#access .map__menu__list__item button {
  position: relative;
  width: 100%;
  padding: max(2rem, 20px) max(1.5rem, 10px);
  border-radius: max(0.5rem, 5px);
  overflow: hidden;
  color: #3A9447;
  font-size: max(1.6rem, 12px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  transition: color 0.4s ease, background 0.4s ease;
}
#access .map__menu__list__item button::before {
  position: absolute;
  content: "";
  top: 50%;
  right: 10px;
  width: max(1rem, 10px);
  height: auto;
  aspect-ratio: 1/1;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transition: opacity 0.4s ease;
}
#access .map__menu__list__item.active button {
  color: #fff;
  background: #3A9447;
}
#access .map__menu__list__item.active button::before {
  opacity: 1;
}
#access .map__area {
  position: relative;
  width: max(80%, 785px);
  margin: 0 auto;
}
@media screen and (max-width: 1000px) {
  #access .map__area {
    width: 100%;
  }
}
#access .map__area__body.all .map__area__islands .parts {
  fill: #69de7b;
}
#access .map__area__body.all .map__area__islands .contour {
  fill: #fff;
}
#access .map__area__body.all .map__area__islands .contour-b {
  fill: #363636;
}
#access .map__area__body.all .map__area__branch #branch-miyazaki .branch__title,
#access .map__area__body.all .map__area__branch #branch-sendai .branch__title,
#access .map__area__body.all .map__area__branch #branch-komatsu .branch__title,
#access .map__area__body.all .map__area__branch #branch-tsuruoka .branch__title,
#access .map__area__body.all .map__area__branch #branch-sapporo .branch__title {
  fill: #30B8D8;
}
#access .map__area__body.all .map__area__branch .branch__title {
  fill: #3A9447;
}
#access .map__area__body.all .map__area__branch path,
#access .map__area__body.all .map__area__branch circle {
  pointer-events: none;
}
#access .map__area__body.all .map__area__branch rect {
  cursor: pointer;
}