.u-bg {
  background-color: #fbf7e9;
}

.content-wrapper {
  padding-top: clamp(60px, 47.1428571429px + 3.2967032967vw, 90px);
}

.u-anchor {
  padding-top: 120px;
  margin-top: -120px;
}
@media (max-width: 1200px) {
  .u-anchor {
    padding-top: 60px;
    margin-top: -60px;
  }
}

.u-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 768px) {
  .u-grid-2 {
    display: flex;
    flex-direction: column;
  }
}

.u-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 960px) {
  .u-grid-3 {
    display: flex;
    flex-direction: column;
  }
}

.u-inner--960w, .u-inner--wide, .u-inner {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 90%;
}

.u-inner {
  max-width: 1080px;
}

.u-inner--wide {
  max-width: 1200px;
}

.u-inner--960w {
  max-width: 960px;
}

@media (max-width: 768px) {
  .mod--sp100 {
    width: 100%;
  }
}

[data-ani] {
  --ani-delay: 0s;
  --ani-duration: 1s;
  pointer-events: none;
}
[data-ani].is-animated-done {
  pointer-events: auto;
}

.ani-width {
  width: 0;
  transition: width var(--ani-duration) cubic-bezier(0.42, 0, 0.58, 1) var(--ani-delay);
}
.ani-width.is-animated {
  width: 100%;
}

.ani-fade, .ani-fade-left, .ani-fade-right, .ani-fade-down-full, .ani-fade-down, .ani-fade-up {
  opacity: 0;
  transition: opacity var(--ani-duration) cubic-bezier(0.42, 0, 0.58, 1) var(--ani-delay), transform var(--ani-duration) cubic-bezier(0.42, 0, 0.58, 1) var(--ani-delay);
}
.ani-fade.is-animated, .is-animated.ani-fade-left, .is-animated.ani-fade-right, .is-animated.ani-fade-down-full, .is-animated.ani-fade-down, .is-animated.ani-fade-up {
  opacity: 1;
}
.ani-fade-up {
  transform: translateY(30px);
}
.ani-fade-up.is-animated {
  transform: translateY(0);
}
.ani-fade-down {
  transform: translateY(-10px);
}
.ani-fade-down.is-animated {
  transform: translateY(0);
}
.ani-fade-down-full {
  transform: translateY(-100%);
}
.ani-fade-down-full.is-animated {
  transform: translateY(0);
}
.ani-fade-right {
  transform: translateX(-10px);
}
.ani-fade-right.is-animated {
  transform: translateX(0);
}
.ani-fade-left {
  transform: translateX(10px);
}
.ani-fade-left.is-animated {
  transform: translateX(0);
}

.ani-scale {
  transform: scale(0.6);
  transform-origin: center;
  transition: opacity var(--ani-duration) cubic-bezier(0.42, 0, 0.58, 1) var(--ani-delay), transform var(--ani-duration) cubic-bezier(0.42, 0, 0.58, 1) var(--ani-delay);
}
.ani-scale.is-animated {
  transform: scale(1);
}

.ani-zoom {
  transform: scale(1.2);
  transform-origin: center;
  transition: transform var(--ani-duration) cubic-bezier(0.07, 0.09, 0.09, 0.62) var(--ani-delay);
}
.ani-zoom.is-animated {
  transform: scale(1);
}

.ani-clip, .ani-clip-full {
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  transition: all var(--ani-duration) ease-in-out var(--ani-delay);
  will-change: clip-path;
}
@media (max-width: 768px) {
  .ani-clip-full {
    transition: all calc(var(--ani-duration) / 2) cubic-bezier(0.07, 0.09, 0.09, 0.62) calc(var(--ani-delay) / 2);
  }
}
.ani-clip.is-animated, .is-animated.ani-clip-full {
  opacity: 1;
  clip-path: inset(0);
}

.p-top .mv {
  position: relative;
  overflow: hidden;
  height: -moz-fit-content;
  height: fit-content;
  aspect-ratio: 12/8;
}
@media (max-width: 440px) {
  .p-top .mv {
    aspect-ratio: unset;
  }
}
.p-top .mv .mv__txt, .p-top .mv .mv__line, .p-top .mv .mv__effect, .p-top .mv .mv__main {
  aspect-ratio: 12/8;
  overflow: hidden;
}
@media (max-width: 440px) {
  .p-top .mv .mv__txt, .p-top .mv .mv__line, .p-top .mv .mv__effect, .p-top .mv .mv__main {
    aspect-ratio: unset;
    height: calc(100vh - 125px);
  }
}
.p-top .mv .mv__txt img, .p-top .mv .mv__line img, .p-top .mv .mv__effect img, .p-top .mv .mv__main img {
  height: 100%;
  width: 100vw;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 90% 75%;
     object-position: 90% 75%;
}
@media (max-width: 768px) {
  .p-top .mv .mv__txt img, .p-top .mv .mv__line img, .p-top .mv .mv__effect img, .p-top .mv .mv__main img {
    -o-object-position: 100% 100%;
       object-position: 100% 100%;
    scale: 1.2;
    transform-origin: right bottom;
  }
}
.p-top .mv .mv__effect {
  position: absolute;
  z-index: 2;
  transition: opacity 1s cubic-bezier(0.42, 0, 0.58, 1) 0.9s;
  opacity: 0;
}
.p-top .mv .mv__effect.is-animated {
  opacity: 1;
}
.p-top .mv .mv__line {
  position: absolute;
  z-index: 3;
  transition: clip-path 0.5s linear, opacity 0.3s ease;
  clip-path: inset(0 99% 0 0);
  opacity: 0;
  will-change: clip-path, opacity;
}
.p-top .mv .mv__line.is-animated {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  will-change: unset;
}
.p-top .mv .mv__txt {
  position: absolute;
  z-index: 4;
  transition: opacity 1s cubic-bezier(0.42, 0, 0.58, 1) 1.5s, transform 1s cubic-bezier(0.42, 0, 0.58, 1) 1.5s;
  opacity: 0;
}
.p-top .mv .mv__txt.is-animated {
  opacity: 1;
}
.p-top .info {
  background-color: #fbf7e9;
  padding: clamp(25px, 18.5714285714px + 1.6483516484vw, 40px) 0 clamp(40px, 31.4285714286px + 2.1978021978vw, 60px);
}
.p-top .info .info__ttl {
  text-align: center;
}
.p-top .info .info__list {
  width: -moz-fit-content;
  width: fit-content;
  margin: clamp(10px, 5.7142857143px + 1.0989010989vw, 20px) auto clamp(35px, 32.8571428571px + 0.5494505495vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.p-top .info .info__list .info__list-item {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.p-top .info .info__list a {
  transition: opacity 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .p-top .info .info__list a:hover {
    opacity: 0.6;
  }
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .p-top .info .info__list a:hover {
    opacity: 0.6;
  }
}
.p-top .info .info__btn {
  margin-inline: auto;
  width: min(90%, 580px);
}
.p-top .info .info__btn span {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-items: center;
  text-align: center;
  line-height: 1.6;
  font-size: clamp(1.6rem, 12.1428571429px + 0.989010989vw, 2.5rem);
  font-weight: bold;
  letter-spacing: initial;
  gap: 10px;
  transform: translateX(10px);
}
.p-top .info .info__btn span::after {
  position: relative;
}
.p-top .sidemenu {
  position: fixed;
  width: 40%;
  top: calc(50% + 45px);
  left: 5%;
  padding: clamp(15px, 8.5714285714px + 1.6483516484vw, 30px) 0 0;
  z-index: 100;
  background: #fbf7e9;
  opacity: 0;
  visibility: hidden;
  transition: all ease-out 1s;
  transform: translateX(-5%) translateY(-50%);
}
.p-top .sidemenu.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) translateY(-50%);
}
.p-top .sidemenu .sidemenu__ttl {
  font-weight: 600;
  color: #af891a;
  text-align: center;
  font-size: clamp(16px, 12.5714285714px + 0.8791208791vw, 24px);
  margin-bottom: clamp(1px, -7.1428571429px + 2.0879120879vw, 20px);
}
@media (max-width: 1200px) {
  .p-top .sidemenu {
    width: 43%;
    top: 90px;
    left: 0%;
    transform: translateX(-5%) translateY(0);
  }
  .p-top .sidemenu.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) translateY(0);
  }
}
@media (max-width: 768px) {
  .p-top .sidemenu {
    display: none;
  }
}
.p-top .section {
  position: sticky;
  top: 90px;
  scroll-padding-top: 90px;
  z-index: 0;
  --scroll-progress: 0;
}
.p-top .section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(calc(1 + var(--scroll-progress) * 0.2));
  transition: transform 0.1s ease-out 0;
  will-change: transform;
}
@media (max-height: 750px) {
  .p-top .section {
    position: relative;
    top: 0;
  }
  .p-top .section::before {
    background-attachment: fixed;
    transform: unset;
    will-change: auto;
  }
}
@media (max-width: 1200px) {
  .p-top .section {
    position: relative;
    top: 0;
  }
  .p-top .section::before {
    background-attachment: fixed;
    transform: unset;
    will-change: auto;
  }
}
.p-top .section::after {
  content: "";
  background: rgba(255, 255, 255, 0.4);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.p-top .section.mod--concept::before {
  background-image: url("../../img/top/bg_concept.jpg");
  background-image: -webkit-image-set(url("../../img/top/bg_concept.webp") type("image/webp") 1x, url("../../img/top/bg_concept.jpg") type("image/jpeg") 1x);
  background-image: image-set(url("../../img/top/bg_concept.webp") type("image/webp") 1x, url("../../img/top/bg_concept.jpg") type("image/jpeg") 1x);
}
.p-top .section.mod--design::before {
  background-image: url("../../img/top/bg_design.jpg");
  background-image: -webkit-image-set(url("../../img/top/bg_design.webp") type("image/webp") 1x, url("../../img/top/bg_design.jpg") type("image/jpeg") 1x);
  background-image: image-set(url("../../img/top/bg_design.webp") type("image/webp") 1x, url("../../img/top/bg_design.jpg") type("image/jpeg") 1x);
}
.p-top .section.mod--select::before {
  background-image: url("../../img/top/bg_select.jpg");
  background-image: -webkit-image-set(url("../../img/top/bg_select.webp") type("image/webp") 1x, url("../../img/top/bg_select.jpg") type("image/jpeg") 1x);
  background-image: image-set(url("../../img/top/bg_select.webp") type("image/webp") 1x, url("../../img/top/bg_select.jpg") type("image/jpeg") 1x);
}
.p-top .section.mod--location::before {
  background-image: url("../../img/top/bg_location.jpg");
  background-image: -webkit-image-set(url("../../img/top/bg_location.webp") type("image/webp") 1x, url("../../img/top/bg_location.jpg") type("image/jpeg") 1x);
  background-image: image-set(url("../../img/top/bg_location.webp") type("image/webp") 1x, url("../../img/top/bg_location.jpg") type("image/jpeg") 1x);
}
.p-top .section .section__scrollwrapper {
  margin-bottom: 50vh;
  height: calc(100vh - 90px);
}
@media (max-height: 750px) {
  .p-top .section .section__scrollwrapper {
    margin-bottom: 0;
    height: auto;
    min-height: unset;
  }
}
@media (max-width: 1200px) {
  .p-top .section .section__scrollwrapper {
    margin-bottom: 0;
    height: auto;
    min-height: unset;
  }
}
.p-top .section .section__inner {
  background-color: #fbf7e9;
  width: 35%;
  min-width: 390px;
  max-width: 500px;
  margin: 0 15% 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.p-top .section .section__inner .c-btn {
  background-color: #af891a;
}
.p-top .section .section__inner .c-btn span {
  color: #ffffff;
}
.p-top .section .section__inner.mod--bg {
  color: #fbf7e9;
  background-color: #00b4e8;
}
.p-top .section .section__inner.mod--bg .c-btn {
  background-color: #af891a;
}
.p-top .section .section__inner.mod--bg .c-btn span {
  color: #ffffff;
}
@media (max-width: 1200px) {
  .p-top .section .section__inner {
    max-width: unset;
    width: 53%;
    margin: 0 2% 0 auto;
    height: auto;
  }
}
@media (max-width: 768px) {
  .p-top .section .section__inner {
    min-width: unset;
    width: 100%;
  }
}
.p-top .section .section__top {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 5% 0;
}
@media (max-height: 750px) {
  .p-top .section .section__top {
    padding-top: 40px;
    padding-bottom: 30px;
  }
}
@media (max-width: 1200px) {
  .p-top .section .section__top {
    padding-top: 40px;
    padding-bottom: 30px;
    display: block;
  }
}
.p-top .section .section__top .section__ttl {
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  margin-bottom: 25px;
}
.p-top .section .section__top .section__ttl.mod--color-d {
  color: #af891a;
}
.p-top .section .section__top .section__ttl.mod--color-d span::before, .p-top .section .section__top .section__ttl.mod--color-d span::after {
  background-color: #af891a;
}
.p-top .section .section__top .section__ttl.mod--color-l {
  color: #fbf7e9;
}
.p-top .section .section__top .section__ttl.mod--color-l span::before, .p-top .section .section__top .section__ttl.mod--color-l span::after {
  background-color: #fbf7e9;
}
.p-top .section .section__top .section__ttl em {
  font-size: 28px;
}
.p-top .section .section__top .section__ttl span {
  font-size: clamp(14px, 13.5714285714px + 0.1098901099vw, 15px);
  position: relative;
}
.p-top .section .section__top .section__ttl span::before {
  position: absolute;
  content: "";
  width: 8px;
  height: 1px;
  top: 50%;
  left: 0;
  transform: translate(calc(-100% - 4px), 50%);
}
.p-top .section .section__top .section__ttl span::after {
  position: absolute;
  content: "";
  width: 8px;
  height: 1px;
  top: 50%;
  right: 0;
  transform: translate(calc(100% + 4px), 50%);
}
.p-top .section .section__top .section__txt {
  text-align: center;
  font-size: clamp(14px, 13.5714285714px + 0.1098901099vw, 15px);
  letter-spacing: 0.04em;
}
.p-top .section .section__top .section__txt span {
  display: block;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
}
.p-top .section .section__top .section__txt span em {
  font-size: 1.2em;
}
.p-top .section .section__top .section__txt.mod--concept {
  text-align: left;
}
@media (max-width: 1200px) {
  .p-top .section .section__top .section__txt.mod--concept {
    margin: 0 auto;
    width: 90%;
  }
}
@media (max-width: 440px) {
  .p-top .section .section__top .section__txt.mod--concept {
    width: 95%;
  }
}
.p-top .section .concept-logo {
  width: 80%;
  max-width: 230px;
  margin: 0 auto 15px;
}
.p-top .section .section__btm {
  height: -moz-fit-content;
  height: fit-content;
}
.p-top .section .section__btm .concept-img {
  flex-shrink: 1;
  width: 70%;
  max-width: 320px;
  margin: 0 auto;
}
@media (max-height: 850px) and (min-height: 750px) {
  .p-top .section .section__btm .concept-img {
    height: 50vh;
  }
}
@media (max-width: 1200px) {
  .p-top .section .section__btm .concept-img {
    max-width: unset;
    width: 80%;
  }
}
@media (max-width: 440px) {
  .p-top .section .section__btm .concept-img {
    width: 90%;
  }
}
.p-top .section .section__btm figure {
  position: relative;
}
.p-top .section .section__btm figure img {
  width: 100%;
  height: 50vh;
  max-height: 400px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
@media (max-width: 1200px) {
  .p-top .section .section__btm figure img {
    height: auto;
    min-height: unset;
  }
}
.p-top .section .section__btm figure .c-caption {
  position: absolute;
  color: #ffffff;
  bottom: 2px;
  left: 8px;
}
.p-top .section .section__btm.mod--select img {
  height: 25vh;
  max-height: 200px;
}
.p-top .section .section__btm .c-btn {
  height: 80px;
}
@media (max-height: 850px) and (min-height: 750px) {
  .p-top .section .section__btm .c-btn {
    height: 70px;
  }
}
.p-top .section .section__btm .c-btn span {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.p-top .footer {
  margin-top: -50vh;
  position: sticky;
  top: 90px;
  z-index: 1;
  background-color: #ffffff;
}
@media (max-height: 750px) {
  .p-top .footer {
    margin-top: 0;
  }
}
@media (max-width: 1200px) {
  .p-top .footer {
    margin-top: 0;
  }
}/*# sourceMappingURL=top.css.map */