@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap");
:root {
  --font-ja: YakuHanMP, "Noto Serif JP", serif;
  --font-en: "Montserrat", sans-serif;
}

html {
  scroll-behavior: smooth;
}

.wrap {
  width: 100%;
  overflow: hidden;
}

.contents_wrapp {
  margin-top: 80px;
  width: 100%;
  overflow: hidden;
  position: relative;
  background: #fff;
  font-family: var(--font-ja);
  font-weight: 500;
}

.contents_wrapp_in {
  width: 90%;
  max-width: 940px;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .contents_wrapp_in {
    width: 85.7142857143vw;
  }
}

.design_heading {
  text-align: center;
  white-space: nowrap;
}
.design_heading p {
  font-family: var(--font-en);
  font-size: min(2.734375vw, 35px);
  font-weight: 600;
  letter-spacing: 0.37em;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .design_heading p {
    font-size: 6.4285714286vw;
    letter-spacing: 0.2em;
  }
}
.design_heading h3 {
  margin-top: 1em;
  font-size: min(1.640625vw, 21px);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .design_heading h3 {
    font-size: 4vw;
  }
}
.design_lead {
  margin-top: 2.5em;
  font-size: min(2.1875vw, 28px);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.75;
  text-align: center;
  white-space: nowrap;
  color: #003b80;
}
@media screen and (max-width: 768px) {
  .design_lead {
    font-size: 5.2857142857vw;
    line-height: 2;
  }
}
.design_text {
  margin-top: 2.5em;
  font-size: min(1.09375vw, 14px);
  line-height: 2.5;
  letter-spacing: 0.1em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .design_text {
    font-size: 3.4285714286vw;
    letter-spacing: 0;
  }
}
.design_img {
  overflow: hidden;
  position: relative;
  margin-top: min(6.25vw, 80px);
  margin-inline: calc(50% - 50vw);
}
@media screen and (max-width: 768px) {
  .design_img {
    margin-top: 10.7142857143vw;
  }
}
.design_img figcaption {
  position: absolute;
  right: 1.5em;
  bottom: 0.5em;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 0 3px black, 0 0 3px black, 0 0 3px black;
}
.design_img figcaption:not(:last-child) {
  right: calc(50% + 1.5em);
}
@media screen and (max-width: 768px) {
  .design_img figcaption:not(:last-child) {
    right: 1.5em;
    bottom: calc(52% + 0.5em);
  }
}

.design_header {
  position: relative;
  z-index: 0;
  height: min(30.3125vw, 388px);
  background: #fff;
}
@media screen and (max-width: 768px) {
  .design_header {
    height: 93.5714285714vw;
  }
}
.design_header_title {
  position: absolute;
  z-index: 1;
  inset: 50%;
  translate: -50% -50%;
  width: min(22.5vw, 288px);
}
@media screen and (max-width: 768px) {
  .design_header_title {
    width: 53.4285714286vw;
  }
}
.design_header_bg {
  position: absolute;
  z-index: -1;
  inset: 0;
}
.design_header_bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.design_header_ornament {
  position: absolute;
  z-index: -2;
  bottom: 0;
  translate: 0 100%;
  mix-blend-mode: multiply;
  transition-delay: 0.8s;
}
.design_header_ornament:nth-of-type(1) {
  left: 0;
  width: min(44.921875vw, 575px);
}
@media screen and (max-width: 768px) {
  .design_header_ornament:nth-of-type(1) {
    width: 61.5714285714vw;
  }
}
.design_header_ornament:nth-of-type(2) {
  right: 0;
  width: min(38.203125vw, 489px);
}
@media screen and (max-width: 768px) {
  .design_header_ornament:nth-of-type(2) {
    width: 52.2857142857vw;
  }
}

.design_concept {
  padding: min(11.71875vw, 150px) 0 0;
}
@media screen and (max-width: 768px) {
  .design_concept {
    padding: 38.5714285714vw 0 0;
  }
}
.design_concept_content {
  max-width: min(64.0625vw, 820px);
  margin: min(5.46875vw, 70px) auto 0;
  padding: min(3.125vw, 40px) 0 min(1.5625vw, 20px);
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 768px) {
  .design_concept_content {
    max-width: none;
    margin: 6.4285714286vw auto 0;
    padding: 5.7142857143vw 0 2.8571428571vw;
  }
}
.design_concept_content_heading {
  font-size: min(1.5625vw, 20px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-align: center;
  color: #003b80;
}
@media screen and (max-width: 768px) {
  .design_concept_content_heading {
    font-size: 4.4285714286vw;
    line-height: 1.7;
  }
}
.design_concept_content_col {
  display: grid;
  grid-template-columns: auto min(35.9375vw, 460px);
  gap: min(2.734375vw, 35px);
  margin-top: min(2.734375vw, 35px);
}
@media screen and (max-width: 768px) {
  .design_concept_content_col {
    grid-template-columns: auto;
    justify-items: center;
    gap: 2.8571428571vw;
    margin-top: 4.2857142857vw;
  }
}
.design_concept_content_img figcaption {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-align: right;
}
.design_concept_content_body {
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
  .design_concept_content_body {
    width: 64.2857142857vw;
    gap: 4.2857142857vw;
  }
}
.design_concept_content_text {
  flex-grow: 1;
  font-size: min(1.09375vw, 14px);
  line-height: 1.8;
  text-align: justify;
}
@media screen and (max-width: 768px) {
  .design_concept_content_text {
    font-size: 3.4285714286vw;
  }
}

.design_section {
  position: relative;
  padding-top: min(7.8125vw, 100px);
}
@media screen and (max-width: 768px) {
  .design_section {
    padding-top: 21.4285714286vw;
  }
}

.design_land {
  position: relative;
  margin: 0 calc(50% - 50vw) 0;
  padding: min(7.8125vw, 100px) calc(50vw - 50%);
  background: rgba(222, 236, 243, 0.4);
}
@media screen and (max-width: 768px) {
  .design_land {
    margin: 0 calc(50% - 50vw) 0;
    padding: 11.4285714286vw calc(50vw - 50%);
  }
}
.design_land_map {
  position: relative;
  margin-top: min(1.5625vw, 20px);
}
@media screen and (max-width: 768px) {
  .design_land_map {
    margin: 0 calc(50% - 50vw);
  }
}
.design_land_map > span {
  position: absolute;
  right: 1.5em;
  bottom: min(3.90625vw, 50px);
  font-size: 10px;
  letter-spacing: 0.04em;
  display: none;
}
@media screen and (max-width: 768px) {
  .design_land_map > span {
    bottom: 7.1428571429vw;
  }
}
.design_land_map > span.is-active {
  display: block;
}
.design_land_images {
  display: grid;
}
@media screen and (max-width: 768px) {
  .design_land_images {
    overflow-x: auto;
  }
}
.design_land_images img {
  grid-area: 1/1;
  display: none;
}
@media screen and (max-width: 768px) {
  .design_land_images img {
    max-width: none;
    width: 171.4285714286vw;
  }
}
.design_land_images img.is-active {
  display: block;
}
.design_land_slider {
  position: relative;
}
@media screen and (max-width: 768px) {
  .design_land_slider {
    margin-top: 2.8571428571vw;
  }
}
.design_land_slider .swiper-wrapper {
  padding-top: min(7.8125vw, 100px);
}
@media screen and (max-width: 768px) {
  .design_land_slider .swiper-wrapper {
    padding-top: 0;
  }
}
.design_land_slider .swiper-slide {
  width: min(25.46875vw, 326px);
  margin: 0 min(3.125vw, 40px);
  transition: scale 1s;
  transform-origin: bottom;
}
@media screen and (max-width: 768px) {
  .design_land_slider .swiper-slide {
    width: auto;
    margin: 0;
  }
}
.design_land_slider .swiper-slide-active {
  scale: 1.3;
}
@media screen and (max-width: 768px) {
  .design_land_slider .swiper-slide-active {
    scale: 1;
  }
}
.design_land_slider .swiper-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: min(1.5625vw, 20px);
  margin-top: min(1.5625vw, 20px);
}
@media screen and (max-width: 768px) {
  .design_land_slider .swiper-controls {
    gap: 1.4285714286vw;
    margin-top: 1.4285714286vw;
  }
}
.design_land_slider .swiper-button-prev,
.design_land_slider .swiper-button-next {
  position: static;
  top: initial;
  left: initial;
  right: inherit;
  margin-top: 0;
  width: min(3.4375vw, 44px);
}
@media screen and (max-width: 768px) {
  .design_land_slider .swiper-button-prev,
  .design_land_slider .swiper-button-next {
    width: 8.1428571429vw;
  }
}
.design_land_slider .swiper-button-prev::after,
.design_land_slider .swiper-button-next::after {
  display: none;
}
.design_land_slider .swiper-pagination {
  position: relative;
  top: initial;
  bottom: initial;
  width: auto;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .design_land_slider .swiper-pagination {
    flex-grow: 1;
  }
}
.design_land_slider .swiper-pagination-bullet {
  width: min(3.125vw, 40px);
  height: min(3.125vw, 40px);
  border-radius: 0;
  margin: 0 1px !important;
  background: linear-gradient(transparent 45%, #e9eaea 45%, #e9eaea 55%, transparent 55%);
  opacity: 1;
}
@media screen and (max-width: 768px) {
  .design_land_slider .swiper-pagination-bullet {
    width: auto;
    height: 5.7142857143vw;
    flex-grow: 1;
  }
}
.design_land_slider .swiper-pagination-bullet-active {
  background: linear-gradient(transparent 45%, #003b80 45%, #003b80 55%, transparent 55%);
}
.design_land_card {
  display: flex;
  flex-direction: column;
  gap: min(0.78125vw, 10px);
}
@media screen and (max-width: 768px) {
  .design_land_card {
    gap: 2.8571428571vw;
  }
}
.design_land_card_img {
  position: relative;
}
@media screen and (max-width: 768px) {
  .design_land_card_img {
    aspect-ratio: 630/500;
  }
  .design_land_card_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.design_land_card_img span {
  position: absolute;
  right: 1.5em;
  bottom: 0.5em;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 0 3px black, 0 0 3px black, 0 0 3px black;
}
.design_land_card_title {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: min(0.625vw, 8px) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  font-size: min(1.71875vw, 22px);
  font-weight: bold;
  line-height: 1;
  text-align: center;
  color: #003b80;
}
@media screen and (max-width: 768px) {
  .design_land_card_title {
    padding: 1.7142857143vw 0;
    font-size: 6vw;
  }
}
.design_land_card_title span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(2.734375vw, 35px);
  height: min(2.734375vw, 35px);
  padding-top: 10%;
  border-radius: 50%;
  font-family: var(--font-en);
  font-size: min(1.5625vw, 20px);
  font-weight: normal;
  line-height: 1;
  color: #fff;
  background: #003b80;
}
@media screen and (max-width: 768px) {
  .design_land_card_title span {
    width: 8.5714285714vw;
    height: 8.5714285714vw;
    font-size: 5vw;
  }
}
.design_land_card_text {
  margin-top: min(0.78125vw, 10px);
  font-size: min(1.09375vw, 14px);
  line-height: 2;
  letter-spacing: -0.05em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .design_land_card_text {
    margin-top: 1em;
    font-size: 3.4285714286vw;
  }
}
.design_land_card_caption {
  font-size: 10px;
  line-height: 1;
  text-align: right;
}

.design_community_blocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: min(2.34375vw, 30px);
  margin-top: min(2.34375vw, 30px);
}
@media screen and (max-width: 768px) {
  .design_community_blocks {
    margin-top: 8.5714285714vw;
    grid-template-columns: auto;
    gap: 11.4285714286vw;
  }
}
.design_community_block {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: min(1.328125vw, 17px);
}
@media screen and (max-width: 768px) {
  .design_community_block {
    gap: 5.7142857143vw;
  }
}
.design_community_block:not(:first-child)::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: max(-1.171875vw, -15px);
  content: "";
  width: 1px;
  background: rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 768px) {
  .design_community_block:not(:first-child)::before {
    top: -5.7142857143vw;
    right: 0;
    bottom: initial;
    left: 0;
    width: 100%;
    height: 1px;
  }
}
.design_community_block_img {
  position: relative;
}
.design_community_block_img span {
  position: absolute;
  right: 1.5em;
  bottom: 0.5em;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 0 3px black, 0 0 3px black, 0 0 3px black;
}
.design_community_block_lead {
  font-size: min(0.9375vw, 12px);
  letter-spacing: 0.126em;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .design_community_block_lead {
    font-size: 2.8571428571vw;
  }
}
.design_community_block_title {
  margin-top: min(0.9375vw, 12px);
  color: #003b80;
}
@media screen and (max-width: 768px) {
  .design_community_block_title {
    margin-top: 2.1428571429vw;
  }
}
.design_community_block_title p {
  font-family: var(--font-en);
  font-size: min(1.796875vw, 23px);
  letter-spacing: 0.37em;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .design_community_block_title p {
    font-size: 5.7142857143vw;
    letter-spacing: 0.3em;
  }
}
.design_community_block_title h4 {
  margin-top: 0.75em;
  font-size: min(0.9375vw, 12px);
  letter-spacing: 0.126em;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .design_community_block_title h4 {
    font-size: 2.8571428571vw;
  }
}
.design_community_block_text {
  margin-top: 2em;
  font-size: min(1.09375vw, 14px);
  letter-spacing: 0.05em;
  line-height: 2;
  text-align: justify;
}
@media screen and (max-width: 768px) {
  .design_community_block_text {
    margin-top: 1em;
    font-size: 3.4285714286vw;
  }
}

.mask_text {
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  transition: clip-path 1s linear;
  will-change: clip-path;
}
.mask_text.on {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.ornament {
  pointer-events: none;
  position: absolute;
  z-index: 2;
  mix-blend-mode: multiply;
}
.ornament img {
  pointer-events: none;
  user-select: none;
}
.ornament01 {
  position: absolute;
  top: min(3.125vw, 40px);
  left: max(-9.375vw, -120px);
  width: min(18.359375vw, 235px);
}
@media screen and (max-width: 768px) {
  .ornament01 {
    top: 32.8571428571vw;
    left: -12.8571428571vw;
    width: 30.2857142857vw;
  }
}
.ornament02 {
  position: absolute;
  top: min(2.34375vw, 30px);
  right: max(-11.71875vw, -150px);
  width: min(18.90625vw, 242px);
}
@media screen and (max-width: 768px) {
  .ornament02 {
    top: 2.8571428571vw;
    right: -17.1428571429vw;
    width: 31.1428571429vw;
  }
}
.ornament03 {
  position: absolute;
  top: min(0.78125vw, 10px);
  right: calc(50% + min(31.25vw, 400px));
  width: min(15.3125vw, 196px);
}
@media screen and (max-width: 768px) {
  .ornament03 {
    top: -7.1428571429vw;
    left: -2.8571428571vw;
    right: initial;
    width: 25.1428571429vw;
  }
}
.ornament04 {
  position: absolute;
  top: max(-3.125vw, -40px);
  right: max(-10.9375vw, -140px);
  width: min(18.359375vw, 235px);
}
@media screen and (max-width: 768px) {
  .ornament04 {
    top: -11.4285714286vw;
    right: -20vw;
    width: 32.4285714286vw;
  }
}
.ornament05 {
  position: absolute;
  top: 0;
  left: max(-10.9375vw, -140px);
  width: min(16.015625vw, 205px);
}
@media screen and (max-width: 768px) {
  .ornament05 {
    top: 35.7142857143vw;
    left: -12.8571428571vw;
    width: 24.4285714286vw;
  }
}
.ornament06 {
  position: absolute;
  top: min(3.90625vw, 50px);
  right: max(-9.375vw, -120px);
  width: min(12.1875vw, 156px);
}
@media screen and (max-width: 768px) {
  .ornament06 {
    top: 2.8571428571vw;
    right: -5.7142857143vw;
    width: 20vw;
  }
}

.ribbon {
  position: absolute;
  z-index: 1;
  margin: auto;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: left;
  filter: blur(10px);
  opacity: 0;
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  transition: all 1.75s ease-in-out;
  transform-origin: center;
}
.ribbon.on {
  filter: blur(0);
  opacity: 1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  animation: floating 5s ease-in-out infinite;
}
@media screen and (max-width: 768px) {
  .ribbon {
    transition: all 1.25s ease-in-out;
  }
}

@keyframes floating {
  0% {
    transform: translateY(0);
    filter: drop-shadow(0 7px 7px rgba(0, 0, 0, 0.2));
  }
  50% {
    transform: translateY(15px);
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.5));
  }
  100% {
    transform: translateY(0);
    filter: drop-shadow(0 7px 7px rgba(0, 0, 0, 0.2));
  }
}
.ribbon-reverse {
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

.ribbon-y.on {
  animation: floating-y 5s ease-in-out infinite;
}

@keyframes floating-y {
  0% {
    transform: translateY(0);
    filter: drop-shadow(0 7px 7px rgba(0, 0, 0, 0.2));
  }
  50% {
    transform: translateY(-15px);
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.5));
  }
  100% {
    transform: translateY(0);
    filter: drop-shadow(0 7px 7px rgba(0, 0, 0, 0.2));
  }
}/*# sourceMappingURL=design.css.map */