@charset "utf-8";

@media screen and (min-width: 961px) {
  #page, .main {
    overflow: revert;
  }

  .sidebarBox--sp {
    display: none;
  }
}

.column {
  display: grid;
  grid-template-columns: 330px 1fr;
  column-gap: calc(70 / 1500 * 100%);
  margin-top: 120px;
  position: relative;
  z-index: 0;
}
.column::before {
  content: '';
  width: 100%;
  height: 10%;
  background: url(../../img/common/bg_gradient.png) repeat-x top left / auto 1000px;
  position: absolute;
  top: -4%;
  left: 0;
  z-index: -1;
}

@media screen and (max-width: 960px) {
  .column {
    display: block;
    margin-top: 50px;
  }

  .column::before {
    background-size: auto 800px;
    top: -2%;
  }
}

/* sidebar
---------------------------------------------- */
.sidebar {
  padding-bottom: 150px;
  position: relative;
  z-index: 1;
}
.sidebarBox {
  position: sticky;
  top: 150px;
  width: 280px;
  background-color: #333;
  border-radius: 40px 0 0 0;
  color: #fff;
  margin-left: auto;
  padding: 50px 35px;
}
.sidebarList {
  margin-top: 40px;
}
.sidebarList > li + li {
  margin-top: 1.5em;
}
.sidebarList__link:link {
  display: flex;
  align-items: center;
  gap: .5em;
  color: rgb(204 204 204 / .4);
  font-size: 17px;
  transition: .4s;
}
.sidebarList__link::before {
  content: '';
  display: block;
  width: 10px;
  height: 3px;
  background-color: #ccc;
  opacity: 0;
  transition: .4s;
}
.sidebarList__link.is-active,
.sidebarList__link.is-active::before {
  opacity: 1;
  color: rgb(204 204 204 / 1);
}

@media (hover: hover) and (pointer: fine) {
  .sidebarList__link:hover {
    color: rgb(204 204 204 / 1);
  }
}

@media screen and (max-width: 1200px) {
  .column {
    grid-template-columns: 260px 1fr;
  }
  .sidebarBox {
    width: 260px;
  }
}

@media screen and (max-width: 768px) {
  .sidebar {
    padding-bottom: 0;
  }
  .sidebarBox {
    position: static;
    width: calc(100% - 15px);
    padding-inline: 20px;
  }
  .sidebarList {
    margin-top: 25px;
  }
  .sidebarList {
    display: grid;
    grid-template-columns: auto auto;
    gap: 1em;
  }
  .sidebarList > li + li {
    margin-top: 0;
  }
  .sidebarList__link:link {
    font-size: 15px;
  }
}

/* mainContents
---------------------------------------------- */
.mainContents {
  /* overflow: hidden; */
  min-width: 0;
}

.section {
  padding-block: 120px 150px;
  position: relative;
  z-index: 0;
}

.section--bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(100% - 100vw);
  width: 100vw;
  height: 100%;
  background: url(../img/bg_texture.jpg) center/100%;
  z-index: -1;
}

.sectionHead {
  overflow: hidden;
}

.section__title {
  display: flex;
  align-items: center;
  gap: 2em;
  width: calc(100% - 100px);
  white-space: nowrap;
}
.section__title::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ccc;
}

.sectionHeadBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px 3%;
  width: calc(100% - 100px);
  max-width: 1000px;
  padding-top: 40px;
}
.sectionHead__copy {
  font-size: clamp(24px, 1.11rem + 0.82vw, 30px);
  letter-spacing: 0.05em;
  line-height: 1.7;
}
.sectionHead__copy.eb {
  font-size: clamp(30px, 1.07rem + 1.26vw, 36px);
}

* + .sectionHeadImg {
  margin-top: 120px;
}

/* topics */
.topics {
  width: calc(100% - 100px);
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 0;
}
.topics::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc((100% - 20px));
  background-color: #94928a;
  border-radius: 60px 0 0 0;
  z-index: -1;
}
* + .topics {
  margin-top: 100px;
}

.topics__title {
  position: absolute;
  top: 100px;
  left: 1em;
  z-index: 1;
}

.topics__inner {
  display: flex;
  gap: 40px calc(40 / 840 * 100%);
  width: calc(840 / 1000 * 100%);
  /* max-width: 840px; */
}

.topicsHead {
  flex: 1;
  padding-block: 100px;
}

.topics__copy {
  font-size: clamp(24px, 1.23rem + 0.42vw, 26px);
  letter-spacing: 0.05em;
}
.topics__text {
  margin-top: 2em;
}

.topicsBody {
  width: min(calc(330 / 840 * 100%), 330px);
}

/* pickup */
.pickup {
  margin-top: 130px;
  overflow: hidden;
}
.pickup__inner {
  display: flex;
  justify-content: space-between;
  gap: calc(50 / 1100 * 100%);
  border-left: 1px solid #ccc;
}

.pickupHead {
  padding-left: .5em;
}

.pickupSlider {
  flex: 1;
  padding-bottom: 50px;
  overflow: hidden;
}
.pickupSlider .swiper-slide {
  width: 320px;
}
.pickupSlider__name {
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height: 1.7;
  margin-top: 1em;
}
.pickupSlider__name .small {
  display: block;
  font-size: 12px;
  color: #858585;
}

.pickupSlider .swiper-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  position: static;
  margin-top: 20px;
  padding-left: 6px;
}
.pickupSlider .swiper-pagination-bullet {
  flex-shrink: 0;
  width: 6px;
  height: auto;
  aspect-ratio: 1;
  background: #94928a;
  margin: 0 !important;
  opacity: .5;
  transition: .4s;
}
.pickupSlider .swiper-pagination-bullet-active {
  transform: scale(1.6);
  opacity: 1;
}

/* position */
.positionGallery {
  margin-top: 80px;
}
.positionGalleryList {
  display: flex;
  flex-wrap: wrap;
  gap: 10px calc(10 / 1100 * 100%);
}
.positionGalleryList > li {
  width: calc(545 / 1100 * 100%);
}
.positionGalleryList > li.positionGalleryList__item03 {
  width: calc(270 / 1100 * 100%);
}
.positionGalleryList > li.positionGalleryList__item04 {
  width: calc(450 / 1100 * 100%);
}
.positionGalleryList > li.positionGalleryList__item05 {
  width: calc(360 / 1100 * 100%);
}

.position .topics::before {
  height: calc((100% - 60px));
}
.position .topics__title {
  top: 150px;
}
.position .topicsHead {
  padding-block: 140px 120px;
}
.position .topicsImgBox {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.position .topicsImg {
  width: calc(160 / 330 * 100%);
}
.position .topicsImg:first-child {
  margin-top: 40px;
}
.topics__name {
  font-size: 12px;
  letter-spacing: 0.05em;
  margin-top: 1em;
  text-align: center;
}


/* map */
.map .sectionHeadImg {
  width: calc(100% - 100px);
}

.infoWrap {
  width: calc(100% - 100px);
  margin-top: 50px;
}

.infoBox + .infoBox {
  margin-top: 50px;
}

.infoBox__title {
  color: #fff;
  border-radius: 30px 0 0 0;
}
.infoBox__title .accBtn {
  display: block;
  width: 100%;
  height: 100%;
  /* padding-right: 50px; */
  padding: .8em 1.8em .8em;
  /* padding-left: 1.8em; */
  text-align: left;
  position: relative;
  z-index: 0;
}
.infoBox__title .accIcon {
  width: 14px;
  aspect-ratio: 1;
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  z-index: 1;
}
.infoBox__title .accIcon::before,
.infoBox__title .accIcon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 1px;
  background-color: #fff;
  transition: .4s;
  z-index: 0;
}
.infoBox__title .accIcon::after {
  width: 1px;
  height: 100%;
}
.infoBox__title .accBtn[aria-expanded="true"] .accIcon::after {
  height: 0;
}

.infoBox__inner {
  display: flex;
  justify-content: space-between;
  /* padding-top: 10px; */
}
.infoBoxList {
  width: calc((100% - 40px) / 2);
  /* display: grid; */
  /* grid-template-columns: 1fr 1fr; */
  /* column-gap: min(calc(40 / 1000 * 100%), 40px); */
}
.infoBoxList > li {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1em;
  border-bottom: 2px dotted #ccc;
  padding-block: 20px 10px;
}
.infoBoxList__name {
  font-size: 16px;
  line-height: 1.75;
}
.infoBoxList__name .small {
  font-size: 75%;
}
.infoBoxList__time {
  color: #858585;
  font-size: 12px;
  letter-spacing: 0.1em;
  line-height: 1.5;
  margin-left: auto;
}

.infoBox--shopping .infoBox__title {
  background-color: #997a6c;
}
.infoBox--education .infoBox__title {
  background-color: #9588a6;
}
.infoBox--bank .infoBox__title {
  background-color: #99926c;
}
.infoBox--hospital .infoBox__title {
  background-color: #6c8999;
}
.infoBox--park .infoBox__title {
  background-color: #899974;
}

.accBody {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s;
}
.accBody[aria-hidden="false"] {
  grid-template-rows: 1fr;
}
.accBody__inner {
  overflow: hidden;
}

@media screen and (max-width: 1200px) {
  .topics {
    width: 100%;
  }

  .map .sectionHeadImg,
  .infoWrap {
    width: calc(100% - 40px);
  }
}

@media screen and (max-width: 768px) {
  .section {
    padding-block: 50px 80px;
  }
  * + .section {
    margin-top: 60px;
  }

  .section--bg::before {
    left: 0;
    width: 100%;
  }

  .section__title {
    gap: 1em;
    width: calc(340 / 375 * 100%);
    margin-inline: auto;
  }

  .sectionHeadBox {
    align-items: flex-start;
    flex-direction: column;
    width: calc(340 / 375 * 100%);
    margin-inline: auto;
  }
  .sectionHead__copy {
    line-height: 1.6;
  }

  * + .sectionHeadImg {
    margin-top: 30px;
  }

  /* topics */
  .topics {
    width: calc(340 / 375 * 100%);
    margin-inline: auto;
  }
  .topics::before {
    height: calc((100% - 70px));
  }
  * + .topics {
    margin-top: 60px;
  }

  .topics__title {
    top: 150px;
    left: .5em;
  }

  .topics__inner {
    align-items: center;
    flex-direction: column-reverse;
    width: calc(280 / 340 * 100%);
    padding-bottom: 70px;
  }

  .topicsHead {
    flex: revert;
    padding-block: 0;
  }

  .topics__copy {
    text-align: center;
  }

  .topicsBody {
    width: calc(240 / 280 * 100%);
  }

  /* pickup */
  .pickup {
    margin-top: 60px;
  }
  .pickup__inner {
    gap: calc(30 / 360 * 100%);
    width: calc(100% - 15px);
    margin-left: auto;
  }

  .pickupSlider {
    padding-bottom: 50px;
  }
  .pickupSlider .swiper-slide {
    width: 240px;
  }

  /* position */
  .positionGallery {
    width: calc(340 / 375 * 100%);
    margin-top: 35px;
    margin-inline: auto;
  }
  .positionGalleryList {
    gap: 5px calc(5 / 340 * 100%);
  }
  .positionGalleryList > li {
    width: 100%;
  }
  .positionGalleryList > li.positionGalleryList__item02 {
    width: calc(224 / 340 * 100%);
  }
  .positionGalleryList > li.positionGalleryList__item03 {
    width: calc(111 / 340 * 100%);
  }
  .positionGalleryList > li.positionGalleryList__item04 {
    width: calc(185 / 340 * 100%);
  }
  .positionGalleryList > li.positionGalleryList__item05 {
    width: calc(150 / 340 * 100%);
  }

  .position .topics::before {
    height: calc((100% - 110px));
  }
  .position .topics__title {
    top: 180px;
  }
  .position .topicsHead {
    padding-block: 0;
  }
  .position .topicsImg {
    width: calc(116 / 240 * 100%);
  }
  .position .topicsImg:first-child {
    margin-top: 30px;
  }


  /* map */
  .map .sectionHeadImg {
    width: 100%;
  }

  .infoWrap {
    width: calc(100% - 15px);
    margin-top: 40px;
    margin-left: auto;
  }

  .infoBox + .infoBox {
    margin-top: 40px;
  }

  .infoBox__title {
    font-size: 15px;
    border-radius: 20px 0 0 0;
  }
  .infoBox__title .accBtn {
    padding-inline: 1.5em;
  }

  .infoBox__inner {
    flex-direction: column;
  }
  .infoBoxList {
    /* grid-template-columns: 1fr; */
    width: calc(100% - 18px);
  }
  .infoBoxList > li {
    gap: .2em;
  }
  .infoBoxList__name {
    width: 100%;
  }
  .infoBoxList__time {
    width: 100%;
    text-align: right;
  }
}