* {
  min-height: 0%;
  box-sizing: border-box;
}

body {
  color: #000;
  font-family: "A1 Gothic R";
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
}

a {
  text-decoration: none;
  transition: all 0.25s;
}
a:hover {
  opacity: 0.5;
}

img {
  width: 100%;
  vertical-align: bottom;
}

ul, li {
  list-style: none;
}

.footerWrap {
  background-color: #fff;
}

footer {
  max-width: 940px;
  margin: 0 auto;
  padding: 63px 0 37px;
  text-align: center;
  font-size: 16px;
}

footer a {
  color: #000;
  border-color: #000;
}

footer ul {
  display: flex;
  gap: 30px;
  justify-content: center;
}

footer ul.hobo a {
  text-align: center;
  width: 220px;
  border-radius: 2em;
  border: 1px solid;
  display: inline-block;
  line-height: 3;
}

footer ul.sns {
  padding: 30px 0;
  gap: 25px;
}

footer ul.link a {
  font-family: "A1 Gothic L", sans-serif;
  font-size: 13px;
  color: #000;
  position: relative;
}

footer ul.link a:after {
  content: "/";
  display: inline-block;
  position: absolute;
  right: -18px;
}

footer ul.link li:last-of-type a:after {
  display: none;
}

footer .copyright {
  padding-top: 20px;
  display: inline-block;
}

@media screen and (max-width: 834px) {
  footer {
    padding: 30px 0 25px;
  }
  footer ul.hobo, footer ul.link {
    display: block;
  }
  footer ul.hobo li:nth-of-type(n + 2) {
    padding-top: 20px;
  }
  footer ul.sns img {
    width: 33px;
  }
  footer ul {
    gap: 24px;
  }
  footer ul.link {
    line-height: 1.8;
  }
  footer ul.link a:after {
    display: none;
  }
}
@keyframes slides-2 {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }
  25.00% {
    opacity: 1;
    animation-timing-function: ease-out;
  }
  50.00% {
    opacity: 1;
  }
  75.00% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-in {
  0% {
    visibility: visible;
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}
@keyframes fade-in-up {
  0% {
    visibility: visible;
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }
}
.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.header-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.header .gallery {
  position: relative;
  z-index: 1;
  height: 100vh;
}
.header .gallery .gallery-item {
  height: 100%;
  color: transparent;
  opacity: 0;
  z-index: 0;
  animation: slides-2 10s linear infinite 0s;
  backface-visibility: hidden;
}
.header .gallery .gallery-item:not(:first-child) {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0;
  bottom: 0;
}
.header .gallery .gallery-item:nth-child(1) {
  animation-delay: 0s;
}
.header .gallery .gallery-item:nth-child(2) {
  animation-delay: 5s;
}
.header .gallery-picture {
  display: block;
  height: 100%;
  width: 100%;
}
.header .gallery-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.header-logo, .header-strap {
  position: absolute;
  z-index: 2;
  height: auto;
  object-fit: unset;
  visibility: hidden;
}
.header-logo {
  top: 30.4347826087vh;
  left: 29.0666666667vw;
  width: 48.7893333333vw;
  animation: fade-in 0.5s 1s forwards linear;
}
.header-strap {
  top: 7.0464767616vh;
  left: 47.2vw;
  width: 5.6vw;
  animation: fade-in 0.2s 7s forwards;
}

@media (min-width: 768px) {
  .header-logo {
    width: 13.828125%;
    top: 35%;
    left: 43.125%;
  }
  .header-strap {
    width: 2.1875%;
    top: 23.2352941176%;
    left: 26.953125%;
  }
}
.section {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section p {
  font-size: 15px;
  white-space: pre-line;
}

@media (min-width: 768px) {
  .section p {
    font-size: 18px;
  }
}
.cover {
  position: relative;
  width: 100%;
  height: 100vh;
}
.cover picture,
.cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cover h2 {
  position: absolute;
  display: flex;
  flex-direction: column-reverse;
  gap: 4px 0;
  color: #ffffff;
  font-weight: 400;
  font-size: 15px;
  line-height: 30px;
  font-feature-settings: "halt" on;
  opacity: 0;
}
.cover h2 span {
  display: block;
  line-height: 24px;
}
.cover h2 img {
  object-fit: unset;
}
.cover .switch {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.cover.in-view h2 {
  animation: fade-in 1s 0.25s forwards ease-in-out;
}
.cover.in-view .switch {
  animation: switch 7s 2s infinite;
}

@media (min-width: 768px) {
  .cover h2 {
    gap: 22px 0;
    font-size: 22px;
    line-height: 1;
  }
}
@keyframes switch {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.steps {
  width: 86.4vw;
  max-width: 1136px;
}
.steps picture {
  width: 40vw;
  opacity: 0;
}
.steps picture:nth-of-type(2) {
  margin: -50% 0 0 auto;
}
.steps picture:nth-of-type(3) {
  margin: 34px 0 0 34.2592592593%;
}
.steps.in-view picture:first-of-type {
  animation: fade-in 0.5s forwards ease-out;
}
.steps.in-view picture:nth-of-type(2) {
  animation: fade-in 0.5s 0.5s forwards ease-out;
}
.steps.in-view picture:nth-of-type(3) {
  animation: fade-in 0.5s 1s forwards ease-out;
}
@media (min-width: 768px) {
  .steps {
    display: flex;
    gap: 0 16px;
  }
  .steps picture:nth-of-type(2), .steps picture:nth-of-type(3) {
    margin: 0;
  }
}

.stagger {
  position: relative;
}
.stagger picture:not(:first-of-type) {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.stagger.in-view picture:nth-of-type(2) {
  animation: fade-in 1.5s 1s forwards;
}
.stagger.in-view picture:nth-of-type(3) {
  animation: fade-in 1.5s 3s forwards;
}

.text-detail {
  height: 80px;
  width: auto;
  margin-top: 22px;
}
.text-detail.indent {
  padding-left: 8px;
}

@media (min-width: 768px) {
  .text-detail {
    height: 111px;
    margin-top: 0;
  }
  .text-detail.indent {
    padding-left: 0;
  }
}
.on-sale {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 375/667;
}
.on-sale-logo {
  position: absolute;
  top: 18.1409295352vh;
  left: 31.7333333333vw;
  width: 138px;
}
.on-sale picture {
  animation: zoom-in-out 30s infinite alternate;
}
@media (min-width: 768px) {
  .on-sale {
    aspect-ratio: 1280/630;
  }
  .on-sale-logo {
    top: 35.873015873%;
    left: 45.15625%;
  }
}

@keyframes zoom-in-out {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.5);
  }
}
.S-01 .cover h2 {
  left: 6.6666666667vw;
  bottom: 3.8980509745vh;
}
.S-01 .cover h2 img {
  width: min(59.2vw, 350px);
  height: auto;
}
.S-01-02 {
  position: relative;
  width: min(86.4vw, 1033px);
  margin: 30px 0 22px;
}
.S-01-02 p {
  margin-top: 32px;
}
.S-01-02 .stagger {
  width: 76.2666666667vw;
}
.S-01-02 .stagger:first-of-type {
  margin: 0 0 30px auto;
}
.S-01-04 {
  width: min(86.4vw, 1032px);
  margin: 22px 0 30px;
}
.S-01-04 picture:first-of-type {
  margin-bottom: 22px;
}
@media (min-width: 768px) {
  .S-01 .cover h2 {
    display: flex;
    flex-direction: column;
    left: unset;
    right: 5.9765625%;
    bottom: 44.4604316547%;
    font-size: 20px;
  }
  .S-01-02 {
    margin: 59.5px 0 63px;
  }
  .S-01-02 .stagger {
    width: 47.3378509197%;
  }
  .S-01-02 .stagger:first-of-type {
    margin: 0;
  }
  .S-01-02 .stagger:nth-of-type(2) {
    margin: -48.4725050916% 0 0 auto;
  }
  .S-01-02 .stagger:nth-of-type(2) picture:nth-of-type(2) {
    animation-delay: 5s;
  }
  .S-01-02 p {
    position: absolute;
    bottom: 0;
  }
  .S-01-04 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 60px 0 91px;
  }
  .S-01-04 picture {
    width: 47.3837209302%;
  }
  .S-01-04 picture:first-of-type {
    margin: 0;
  }
  .S-01-04 picture:nth-of-type(2) {
    transform: translateY(22%);
  }
  .S-01 .text-detail {
    margin-top: 104px;
  }
}

.S-02 .cover h2 {
  left: 5.8666666667vw;
  top: 5.6971514243vh;
}
.S-02 .cover h2 img {
  width: min(79.2vw, 433px);
  height: auto;
}
.S-02-02 {
  width: 86.4vw;
  max-width: 1098px;
  margin: 30px 0 0;
}
.S-02-02 p {
  margin-bottom: 40px;
}
.S-02-02-02 picture, .S-02-02-03 {
  width: 76.2666666667vw;
}
.S-02-02-02 {
  margin: 22px 0 30px;
}
.S-02-02-02 picture {
  margin: 0 0 0 auto;
}
.S-02-03 {
  width: 91.7333333333vw;
  max-width: 1098px;
  margin: 30px 0 38px;
}
@media (min-width: 768px) {
  .S-02 .cover h2 {
    left: 10.46875%;
    top: unset;
    bottom: 14.5035971223%;
  }
  .S-02-02 {
    display: grid;
    grid-template-columns: 55.6466302368% 41.0746812386%;
    grid-auto-rows: max-content;
    justify-content: space-between;
    gap: 0 3.4608378871%;
    margin: 103px 0 0;
  }
  .S-02-02-02 {
    margin: 0;
    transform: translateY(50%);
  }
  .S-02-02-02 picture {
    width: 100%;
  }
  .S-02-02-03 {
    width: 73.8134206219%;
    margin: 40px 0 0 auto;
  }
  .S-02-03 {
    display: flex;
    grid-template-columns: auto 55.4644808743%;
    justify-content: space-between;
    margin: 48px 0 84px;
  }
  .S-02-03 picture {
    order: 1;
    width: 55.4644808743%;
  }
  .S-02-03 .text-detail {
    align-self: end;
    width: 42.8961748634%;
  }
}

.S-03 .cover h2 {
  left: 12.2666666667vw;
  top: 3.748125937vh;
}
.S-03 .cover h2 img {
  width: min(61.0666666667vw, 334px);
  height: auto;
}
.S-03 p {
  white-space: normal;
  word-break: keep-all;
}
.S-03-02 {
  width: 86.4vw;
  max-width: 1032px;
  margin: 40px 0 0;
}
.S-03-02-01 {
  display: flex;
  flex-direction: column;
  gap: 30px 0;
}
.S-03-02-01 picture {
  width: 88.2716049383%;
}
.S-03-02-01 picture:first-of-type {
  align-self: flex-end;
}
.S-03-02-02 {
  display: flex;
  flex-direction: column;
  gap: 30px 0;
  margin: 22px 0 21px;
}
.S-03-03 {
  width: 91.7333333333vw;
  max-width: 1032px;
  margin: 0 0 23px;
}
@media (min-width: 520px) {
  .S-03 p {
    white-space: pre-line;
    word-break: keep-all;
  }
}
@media (min-width: 768px) {
  .S-03 .cover h2 {
    top: unset;
    left: 10.390625%;
    bottom: 16.9784172662%;
  }
  .S-03-02 {
    margin: 60px 0 0;
  }
  .S-03-02-01 {
    flex-direction: row;
    justify-content: space-between;
  }
  .S-03-02-01 picture {
    width: 47.3837209302%;
  }
  .S-03-02-02 {
    flex-direction: row;
    justify-content: space-between;
    margin: 60px 0 61px;
  }
  .S-03-02-02 picture {
    width: 59.2054263566%;
  }
  .S-03-03 {
    display: flex;
    align-items: flex-end;
    gap: 0 2.6162790698%;
    margin: 0 0 107px;
  }
  .S-03-03 picture {
    width: 57.2674418605%;
  }
}

.S-04 .cover h2 {
  left: 5.0666666667vw;
  top: 5.3973013493vh;
}
.S-04 .cover h2 img {
  width: min(88.5333333333vw, 485px);
  height: auto;
}
.S-04-02 {
  display: flex;
  flex-direction: column;
  gap: 22px 0;
  width: 86.4vw;
  max-width: 936px;
  margin: 40px 0 30px;
}
.S-04-04 {
  width: 91.7333333333vw;
  max-width: 1082px;
  margin: 30px 0 36px;
}
@media (min-width: 768px) {
  .S-04 .cover h2 {
    left: unset;
    top: unset;
    right: 3.515625%;
    bottom: 10.2158273381%;
  }
  .S-04-02 {
    flex-direction: row;
    gap: 0 5.8760683761%;
    align-items: flex-end;
    margin: 60px 0;
  }
  .S-04-02 picture {
    width: 65.2777777778%;
  }
  .S-04-04 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 42px 0 62px;
  }
  .S-04-04 picture {
    order: 1;
    width: 54.6210720887%;
  }
  .S-04-04 .text-detail {
    width: 37.5231053604%;
  }
}

.S-05 .cover h2 {
  left: 5.0666666667vw;
  top: 5.3973013493vh;
}
.S-05 .cover h2 img {
  width: min(88vw, 484px);
  height: auto;
}
.S-05-02, .S-05-03 {
  width: 86.4vw;
  max-width: 1048px;
}
.S-05-02 {
  margin: 36px 0 0;
}
.S-05-02-01 {
  display: flex;
  justify-content: space-between;
  margin: 0 0 30px;
}
.S-05-02-01 picture {
  width: 46.2962962963%;
}
.S-05-02-01 picture:nth-of-type(2) {
  margin-top: 42%;
}
.S-05-02-02 {
  display: flex;
  flex-direction: column;
}
.S-05-02-02 picture {
  width: 78.0864197531%;
  align-self: flex-end;
  margin: 0 0 30px;
}
.S-05-03 {
  margin: 30px 0 36px;
}
@media (min-width: 768px) {
  .S-05 .cover h2 {
    left: 6.875%;
    top: 50.071942446%;
  }
  .S-05-02 {
    display: flex;
    justify-content: space-between;
    gap: 0 5.7251908397%;
    margin: 71px 0 0;
  }
  .S-05-02-01 {
    flex: none;
    width: 43.7022900763%;
    flex-direction: column;
  }
  .S-05-02-01 picture {
    width: 80.3493449782%;
  }
  .S-05-02-01 picture:nth-of-type(2) {
    margin-top: 80px;
    align-self: flex-end;
  }
  .S-05-02-02 {
    width: 61.2595419847%;
    gap: 64px 0;
    transform: translateY(12%);
  }
  .S-05-02-02 picture {
    width: 100%;
    order: 1;
  }
  .S-05-03 {
    display: flex;
    align-items: flex-end;
    gap: 0 3.9122137405%;
    margin: 80px 0 75px;
  }
  .S-05-03 picture {
    width: 58.3015267176%;
  }
}

.S-06 .cover h2 {
  left: 5.0666666667vw;
  top: 5.3973013493vh;
}
.S-06 .cover h2 img {
  width: min(45.0666666667vw, 255px);
  height: auto;
}
.S-06-02 {
  display: flex;
  gap: 22px 4.9796747967%;
  flex-direction: column;
  width: 86.4vw;
  max-width: 984px;
  margin: 30px 0;
}
.S-06-03 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 86.4vw;
  max-width: 943px;
  margin: 0 0 36px;
}
.S-06-03 picture {
  flex: none;
  width: 40vw;
}
.S-06-03 picture:nth-of-type(2) {
  margin-top: 18%;
}
@media (min-width: 768px) {
  .S-06 .cover h2 {
    left: unset;
    right: 5.625%;
    top: 10.7913669065%;
  }
  .S-06-02 {
    flex-direction: row;
    align-items: flex-end;
    margin: 109px 0 82px;
  }
  .S-06-02 .stagger {
    flex: none;
    width: 62.093495935%;
  }
  .S-06-03 {
    position: relative;
    margin: 0 0 85px;
  }
  .S-06-03 picture:first-of-type {
    width: 39.0243902439%;
  }
  .S-06-03 picture:nth-of-type(2) {
    width: 51.8557794274%;
    margin-top: 0;
    transform: translateY(16%);
  }
}

.staff {
  text-align: center;
  color: #231815;
  padding: 38px 5%;
  border-bottom: 1px solid #000;
  background-color: #fff;
}
.staff .ttl {
  font-size: 20px;
  letter-spacing: 2.4px;
}
.staff .cnt {
  font-size: 14px;
  line-height: 2;
  margin-top: 15px;
  white-space: pre-line;
}

@media (min-width: 835px) {
  .staff {
    padding: 70px 30px;
  }
}
.main {
  overflow: hidden;
}
.main picture,
.main img {
  display: block;
}

[data-observe=fade-in] {
  opacity: 0;
  transform: translateY(30px);
  transition: all 1s ease-in-out;
}
[data-observe=fade-in].in-view {
  opacity: 1;
  transform: translateY(0);
}