.home-road-map-wrapper {
  position: relative;
}
.home-road-map-wrapper::before {
  aspect-ratio: 1440/860;
  background: url(../../images/home/background_road-map.png) center top no-repeat;
  background-size: contain;
  content: "";
  display: block;
  height: 80vw;
  position: absolute;
  top: 8.75rem;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  z-index: 2;
}
.home-road-map-wrapper::after {
  background-color: #7fd9fc;
  content: "";
  height: 50%;
  position: absolute;
  top: 8.75rem;
  left: 0;
  width: 100%;
  z-index: 1;
}
.home-road-map-wrapper > .inner > * {
  position: relative;
  z-index: 3;
}

.home-road-map-title {
  margin-bottom: 2.75rem;
  padding-top: 19.375rem;
  position: relative;
  z-index: 2;
}
.home-road-map-title > .main {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 10.625rem;
}
.home-road-map-title > .title {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-top: 6.25rem;
}
.home-road-map-title > .image {
  display: none;
}
.home-road-map-title > .image > .item01 {
  border-radius: 20px 0 20px 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: min(27.78vw, 25rem);
  width: min(13.75vw, 12.375rem);
}
.home-road-map-title > .image > .item02 {
  border-radius: 20px 0 20px 0;
  overflow: hidden;
  position: absolute;
  top: min(18.54vw, 16.688rem);
  right: min(18.54vw, 16.688rem);
  width: min(15.07vw, 13.563rem);
}

.home-road-map {
  aspect-ratio: 750/3814;
  height: auto;
  overflow: hidden;
  position: relative;
  top: 0;
  width: 100%;
}
.home-road-map > .content {
  height: 100%;
  width: 100%;
}
.home-road-map > .content svg, .home-road-map > .content img {
  aspect-ratio: 750/3814;
  height: auto;
  position: absolute;
  width: 100%;
}
.home-road-map > .content .road-map-item {
  aspect-ratio: 250/250;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 30.4%;
  will-change: transform;
}
.home-road-map > .content .road-map-item img {
  display: none;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.home-road-map > .content .road-map-item img.-show {
  display: block;
}
.home-road-map > .content .textitem01 {
  aspect-ratio: 164/165;
  display: block;
  position: absolute;
  top: 45.6vw;
  left: 9.07vw;
  z-index: 2;
  width: 43.73%;
  will-change: transform;
}
.home-road-map > .content .textitem01 img {
  aspect-ratio: auto;
  height: auto;
  width: 100%;
}
.home-road-map > .content .textitem02 {
  aspect-ratio: 124/67;
  display: block;
  position: absolute;
  top: 153.6vw;
  left: 8.53%;
  z-index: 2;
  width: 33.07%;
  will-change: transform;
}
.home-road-map > .content .textitem02 img {
  aspect-ratio: auto;
  height: auto;
  width: 100%;
}
.home-road-map > .content .textitem03 {
  aspect-ratio: 160/34;
  display: block;
  position: absolute;
  top: 195.2vw;
  right: 5.6%;
  z-index: 2;
  width: 42.67%;
  will-change: transform;
}
.home-road-map > .content .textitem03 img {
  aspect-ratio: auto;
  height: auto;
  width: 100%;
}
.home-road-map > .content .textitem04 {
  aspect-ratio: 160/131;
  display: block;
  position: absolute;
  top: 252vw;
  left: 8.53%;
  z-index: 2;
  width: 42.67%;
  will-change: transform;
}
.home-road-map > .content .textitem04 img {
  aspect-ratio: auto;
  height: auto;
  width: 100%;
}
.home-road-map > .content .textitem05 {
  aspect-ratio: 208/126;
  display: block;
  position: absolute;
  top: 354.67vw;
  right: 5.33%;
  z-index: 2;
  width: 55.47%;
  will-change: transform;
}
.home-road-map > .content .textitem05 img {
  aspect-ratio: auto;
  height: auto;
  width: 100%;
}

#js-road-map-scroller {
  height: 100%;
  position: absolute;
  width: 100%;
}

#js-scroll-base {
  height: 100%;
  position: absolute;
  width: 100%;
}

.home-this-month > .title {
  margin-bottom: 4.5rem;
  text-align: center;
}
.home-this-month > .title img {
  height: auto;
  width: calc(100% - 1.25rem);
}
.home-this-month > .content {
  background-color: var(--color-white);
  border-radius: 70px 0 70px 0;
  border: 1px solid var(--color-black);
  display: grid;
  align-items: center;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  filter: drop-shadow(0px 4px 0px var(--color-black));
  padding: 4rem var(--margin-side-small) 3rem;
  position: relative;
}
.home-this-month > .content > .text {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.home-this-month > .content > .text > .month {
  height: 5.813rem;
  margin: auto;
  position: absolute;
  top: -2.875rem;
  right: 0;
  left: 0;
  width: 5.813rem;
}
.home-this-month > .content > .text > .month img {
  height: 5.813rem;
  width: 5.813rem;
}
.home-this-month > .content > .text > .heading {
  font-size: 1.313rem;
  font-weight: 700;
  line-height: 1.4;
  padding: 1.5rem 0;
  position: relative;
}
.home-this-month > .content > .text > .heading::before, .home-this-month > .content > .text > .heading::after {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 0.938rem;
  position: absolute;
  width: 1.125rem;
}
.home-this-month > .content > .text > .heading::before {
  background-image: url(../../images/common/ornament_thismonth01.svg);
  top: 0;
  left: 0;
}
.home-this-month > .content > .text > .heading::after {
  background-image: url(../../images/common/ornament_thismonth02.svg);
  right: 0;
  bottom: 0;
}
.home-this-month > .content > .text > .description {
  font-size: 0.875rem;
  line-height: 1.9;
}
.home-this-month > .content > .image {
  border-radius: 20px;
  order: -1;
  overflow: hidden;
}

.home-vision {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  position: relative;
}
.home-vision::after {
  background: url(../../images/home/image_vision.png) center center no-repeat;
  background-size: contain;
  content: "";
  display: block;
  margin: auto;
  height: 51.2vw;
  width: 53.33vw;
}
.home-vision > .title {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.home-vision-item > .title {
  position: relative;
  z-index: 2;
}
.home-vision-item > .title > .inner {
  background-color: var(--color-white);
  border: 2px solid var(--color-black);
  border-bottom: 0;
  border-radius: 30px 30px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  padding: 2rem var(--margin-side-small);
  position: relative;
  width: 100%;
  z-index: 2;
}
.home-vision-item > .title > .inner > .main {
  color: var(--color-project-green);
  font-size: 1.563rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  z-index: 2;
}
.home-vision-item > .title > .inner > .sub {
  font-family: var(--font-poppins);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1;
  position: relative;
  text-transform: uppercase;
  z-index: 2;
}
.home-vision-item > .content {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  z-index: 1;
}
.home-vision-item > .content > .inner {
  background-color: var(--color-white);
  border: 2px solid var(--color-black);
  border-top: 0;
  border-radius: 0 0 30px 30px;
  padding: 0 var(--margin-side-small) 2rem;
  position: relative;
  text-align: center;
}
.home-vision-item > .content > .inner > .main {
  font-size: 1.563rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-break: strict;
  line-height: 1.3;
  margin-bottom: 2rem;
  overflow-wrap: anywhere;
  word-break: keep-all;
}
.home-vision-item > .content > .inner > .sub {
  display: block;
  font-family: var(--font-poppins);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.3;
}
.home-vision-item > .content > .inner > .mind7 {
  border-top: dotted 1px var(--color-black);
  margin-top: 2rem;
  padding-top: 2rem;
}
.home-vision-item > .content > .inner > .mind7 > .main {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.3;
  margin-bottom: 2rem;
}
.home-vision-item > .content > .inner > .mind7 > .sub {
  display: block;
  font-family: var(--font-poppins);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.3;
}

.home-group {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  position: relative;
}
.home-group::after {
  background: url(../../images/common/ornament_parts02.svg) center center no-repeat;
  background-size: contain;
  content: "";
  height: 4.813rem;
  position: absolute;
  top: -8.75rem;
  right: 0;
  width: 6.25rem;
}
.home-group > .text {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.home-group > .text > .title {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.home-location {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
.home-location > .text {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.home-location > .text > .title {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.home-location > .text > .content {
  background-color: var(--color-white);
  border: 1px solid var(--color-black);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem var(--margin-side-small);
}

.home-location-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}
.home-location-item > .name > .item {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.home-location-item > .map {
  width: 100%;
}
.home-location-item > .map > .item {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  line-height: 1.5;
  text-decoration: none;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.home-location-item > .address {
  font-size: 0.875rem;
  line-height: 1.3;
  width: 100%;
}
.home-location-item.-yotsuba > .name > .item {
  color: var(--color-project-yotsuba);
}
.home-location-item.-yotsuba > .name > .item::after {
  background-color: currentColor;
  content: "";
  display: block;
  -webkit-mask-image: url(../../images/icon/popup.svg);
  mask-image: url(../../images/icon/popup.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  height: 1.5rem;
  width: 1.5rem;
}
.home-location-item.-showa > .name > .item {
  color: var(--color-project-showa);
}
.home-location-item.-motoki > .name > .item {
  color: var(--color-project-motoki);
}

.home-news {
  background-color: var(--color-white);
  border-radius: 30px;
  padding: 2.5rem var(--margin-side-small);
}
.home-news > .inner {
  display: grid;
  align-items: end;
  gap: 2rem;
  grid-template-areas: "title" "content" "button";
  grid-template-columns: 1fr;
}
.home-news > .inner > .title {
  grid-area: title;
  text-align: center;
}
.home-news > .inner > .button {
  grid-area: button;
}
.home-news > .inner > .button > .item {
  transition-property: color;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-delay: 0s;
  color: var(--color-black);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  margin-right: auto;
  margin-left: auto;
  text-decoration: none;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.home-news > .inner > .button > .item::after {
  background-color: currentColor;
  content: "";
  display: block;
  -webkit-mask-image: url(../../images/icon/arrow_right-secondary.svg);
  mask-image: url(../../images/icon/arrow_right-secondary.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  height: 1.5rem;
  width: 1.5rem;
}
.home-news > .inner > .button > .item:hover {
  color: var(--color-project-green);
}
.home-news > .inner > .content {
  grid-area: content;
  margin-bottom: -1.5rem;
}