@charset "UTF-8";
/*
A modern CSS reset 2023 / 9 / 18
https://github.com/Andy-set-studio/modern-css-reset
*/
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul[role=list], ol[role=list] {
  list-style: none;
}

body {
  min-height: 100vh;
  line-height: 1.5;
}

h1, h2, h3, h4, button, input, label {
  line-height: 1.1;
}

h1, h2, h3, h4 {
  text-wrap: balance;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

img, picture {
  max-width: 100%;
  display: block;
}

input, button, textarea, select {
  font: inherit;
}

textarea:not([rows]) {
  min-height: 10em;
}

:target {
  scroll-margin-block: 5ex;
}

/**  base  **/
@keyframes fadeIn {
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  100% {
    opacity: 0;
  }
}
@keyframes clipPath {
  100% {
    clip-path: inset(0);
  }
}
@keyframes clipPathCircle {
  100% {
    clip-path: circle(100% at 50% 50%);
  }
}
p,
ul,
ol,
h1,
h2,
h3,
figure,
dl,
dd,
button {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

ul,
ol {
  list-style: none;
}

img,
video {
  max-width: 100%;
  vertical-align: bottom;
  line-height: 1;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  appearance: none;
}

a {
  color: currentColor;
  text-decoration: none;
}
@media (hover: hover) {
  a:hover {
    opacity: 0.5;
  }
}

[x-cloak],
[v-cloak] {
  display: none !important;
}

*:focus {
  outline: none;
}

@media (min-width: 600px) {
  .device-sp {
    display: none;
  }
}

.device-pc {
  display: none;
}
@media (min-width: 600px) {
  .device-pc {
    display: block;
  }
}

html {
  scroll-behavior: smooth;
}

body.scroll_rock {
  overflow: hidden;
}

:root {
  --body-text-color: #4F4F4F;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-coral: #F15938;
  --color-footer-bg: #96898A;
}

html {
  font-size: 100%;
}

body {
  color: var(--body-text-color);
  font-family: "Yu Gothic Pr6N D";
  font-size: 16px;
  font-size: 1rem;
}

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Yu Gothic Pr6N B";
}

main img {
  width: 100%;
  height: auto;
}

.footer {
  --fs-footer: .875rem;
  --ls-footer: 1.96px;
  --fs-copyright: .5625rem;
  --ls-copyright: 0.9px;
  --footer-pad: 317px 0 47px 35px;
  --store-pad: 27px 0 31px;
  --share-gap: 12px;
  --share-icon-gap: 24px;
  --hobo-pad: 27px 0 0;
  display: flex;
  flex-direction: column;
  padding: var(--footer-pad);
  color: var(--color-white);
  font-size: var(--fs-footer);
  font-family: "Koburina Gothic W6 JIS2004";
  letter-spacing: var(--ls-footer);
  background-color: var(--color-footer-bg);
}
.footer_group {
  display: flex;
  flex-direction: column;
}
.footer_share {
  display: flex;
  align-items: flex-end;
  gap: var(--share-gap);
}
.footer_share > p {
  letter-spacing: 0.8px;
}
.footer_share ul {
  display: flex;
  align-items: center;
  gap: var(--share-icon-gap);
}
.footer_hobo {
  padding: var(--hobo-pad);
}
.footer_store {
  padding: var(--store-pad);
}
.footer_copyright {
  font-size: var(--fs-copyright);
  text-align: left;
  letter-spacing: var(--ls-copyright);
}
@media (min-width: 768px) {
  .footer {
    --fs-footer: 1rem;
    --fs-copyright: .75rem;
    --ls-footer: 0.8px;
    --ls-copyright: 1.2px;
    --footer-pad: 124px 0 76px;
    --store-pad: 20px 0 54px;
    --share-gap: 40px;
    --share-icon-gap: 27px;
    --hobo-pad: 0 0 0 61px;
  }
  .footer ul {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }
  .footer_group {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .footer_share {
    justify-self: flex-end;
    align-items: center;
  }
  .footer_hobo {
    justify-self: flex-start;
  }
  .footer_hobo li:not(:last-of-type):after {
    content: "／";
  }
  .footer_store li:not(:last-of-type):after {
    content: "｜";
  }
  .footer_copyright {
    text-align: center;
  }
}

.hero {
  --hero-ar: 375 / 696;
  --hobo-x: 2.9333333333vw;
  --hobo-y: 10.1333333333vw;
  --hobo-fs: 0.570625rem;
  --hobo-ls: 1.278px;
  --tag1-x: 4vw;
  --tag1-y: 7.4666666667vw;
  --tag1-w: 59.4666666667vw;
  --tag1-h: 12vw;
  --tag2-x: 5.0773333333vw;
  --tag2-y: 20.2293333333vw;
  --tag2-w: 66.9333333333vw;
  --tag2-h: 12.8266666667vw;
  --logo-x: 26.5173333333vw;
  --logo-y: 5.8666666667vw;
  --logo-w: 47.0826666667vw;
  --logo-h: 13.6vw;
  position: relative;
  aspect-ratio: var(--hero-ar);
  overflow: hidden;
}
.hero .bg {
  position: relative;
}
.hero .tagline-01,
.hero .tagline-02,
.hero .hobonichi,
.hero .title {
  position: absolute;
}
.hero .hobonichi {
  top: var(--hobo-y);
  right: var(--hobo-x);
  font-family: "Koburina Gothic W6 JIS2004";
  font-size: var(--hobo-fs);
  letter-spacing: var(--hobo-ls);
}
.hero .tagline-01 {
  top: var(--tag1-y);
  left: var(--tag1-x);
  width: var(--tag1-w);
  height: var(--tag1-h);
  transition: transform 0.5s ease-in-out;
}
.hero .tagline-02 {
  top: var(--tag2-y);
  left: var(--tag2-x);
  width: var(--tag2-w);
  height: var(--tag2-h);
  transition: transform 0.5s 0.5s ease-in-out;
}
.hero .tagline-01,
.hero .tagline-02 {
  transform: scaleY(0);
  transform-origin: top center;
}
.hero.in-view .tagline-01,
.hero.in-view .tagline-02 {
  transform: scaleY(1);
}
.hero .title {
  right: var(--logo-x);
  bottom: var(--logo-y);
  width: var(--logo-w);
  height: var(--logo-h);
}
.hero img {
  width: 100%;
  height: auto;
}
@media (min-width: 768px) {
  .hero {
    --hero-ar: 1440 / 904;
    --hobo-x: 1.8055555556vw;
    --hobo-y: 1.4583333333vw;
    --hobo-fs: 0.9375rem;
    --hobo-ls: 2.1px;
    --tag1-x: 3.0555555556vw;
    --tag1-y: 4.5138888889vw;
    --tag1-w: 26.875vw;
    --tag1-h: 5.4166666667vw;
    --tag2-x: 3.5416666667vw;
    --tag2-y: 10.2777777778vw;
    --tag2-w: 30.2777777778vw;
    --tag2-h: 5.7986111111vw;
    --logo-x: 6.5472222222vw;
    --logo-y: 13.0555555556vw;
    --logo-w: 17.55vw;
    --logo-h: 5.0694444444vw;
  }
}

.intro {
  --intro-pad: 109px 0 108px;
  --h2-w: 85.3333333333vw;
  --h2-w-max: 608px;
  --h2-fs: 1.25rem;
  --h2-lh: 215%;
  --h2-ls: 2.6px;
  --grid-gap: 56px;
  --img-min: 91.7333333333vw;
  --img-max: 704px;
  display: grid;
  gap: var(--grid-gap);
  place-items: center;
  padding: var(--intro-pad);
  transition: background-size 2s;
  background-image: linear-gradient(var(--bg-d, -35deg), #C0D7E1 50%, transparent 50%), linear-gradient(var(--bg-d, -35deg), transparent 50%, #FFB78F 50%);
  background-repeat: no-repeat;
  background-position: bottom right, top left;
  background-size: var(--bg-s, 100% 50%, 100% 50%);
}
.intro h2 {
  width: min(var(--h2-w), var(--h2-w-max));
  font-size: var(--h2-fs);
  line-height: var(--h2-lh);
  letter-spacing: var(--h2-ls);
  font-feature-settings: "halt" on;
}
.intro span {
  display: block;
}
.intro picture {
  background-color: #ffffff;
  transition: transform 1s 0.5s;
  transform-origin: center;
  transform: scale(var(--pic-t, 0));
}
.intro img {
  width: min(var(--img-min), var(--img-max));
  opacity: var(--img-o, 0);
  transform: scale(var(--img-t, 0.5));
  transition: all 1.5s 1s;
}
.intro.in-view {
  --bg-s: 100% 100%, 100% 100%;
  --pic-t: 1;
  --img-o: 1;
  --img-t: 1;
}
@media (min-width: 768px) {
  .intro {
    --intro-pad: 97px 0 106px;
    --bg-d: -12.9deg;
    --h2-fs: 1.5rem;
    --h2-ls: 3.12px;
    --grid-gap: 62px;
  }
  .intro br {
    display: none;
  }
}

.gallery {
  --gallery-pad: 56px 0;
  --gallery-gap: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--gallery-gap);
  padding: var(--gallery-pad);
  overflow-x: hidden;
  --f-fs: 0.875rem;
  --f-lh: 150%;
  --f-ls: 0.63px;
  --f-pt: 25px;
}
.gallery.light {
  background-color: #DEEAEA;
}
.gallery.dark {
  background-color: #6FB4AC;
}
.gallery .stack-card {
  display: grid;
  gap: var(--gallery-gap);
}
.gallery .pair {
  width: 85.3333333333vw;
}
.gallery .pair .left {
  margin-bottom: -1.5px;
}
.gallery__footer {
  width: min(85.3333333333vw, 1134px);
  padding-top: var(--f-pt);
  font-size: var(--f-fs);
  line-height: var(--f-lh);
  letter-spacing: var(--f-ls);
  text-align: center;
  border-top: 1px solid #ffffff;
}
.gallery__footer a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 0.75px;
}
@media (min-width: 768px) {
  .gallery {
    --gallery-pad: 104px 0;
    --gallery-gap: 136px;
    --f-fs: 1.125rem;
    --f-ls: 0.81px;
    --f-pt: 56px;
  }
  .gallery .stack-card {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    grid-template-columns: auto auto;
    gap: 0;
  }
  .gallery .stack-card .right {
    order: 1;
  }
  .gallery .pair {
    display: flex;
  }
  .gallery .pair .left {
    margin-bottom: 0;
  }
}

.picture {
  width: 100%;
  height: auto;
}
.picture.full {
  width: min(100vw, 1000px);
}
.picture.seventy {
  width: min(70.4vw, 448px);
}
.picture.left {
  margin: 0 auto 0 0;
  transition: mask 2s;
  -webkit-mask: linear-gradient(to right, #000000 50%, rgba(0, 0, 0, 0) 50%) center left/var(--full-s, 0% 100%) no-repeat;
  mask: linear-gradient(to right, #000000 50%, rgba(0, 0, 0, 0) 50%) center left/var(--full-s, 0% 100%) no-repeat;
}
.picture.left.in-view {
  --full-s: 200% 100%;
}
.picture.right {
  margin: 0 0 0 auto;
  transition: mask 2s;
  -webkit-mask: linear-gradient(to left, #000000 50%, rgba(0, 0, 0, 0) 50%) center right/var(--full-s, 0% 100%) no-repeat;
  mask: linear-gradient(to left, #000000 50%, rgba(0, 0, 0, 0) 50%) center right/var(--full-s, 0% 100%) no-repeat;
}
.picture.right.in-view {
  --full-s: 200% 100%;
}
.picture.rounded-01 {
  width: min(85.3333333333vw, 720px);
}
.picture.rounded-02 {
  width: min(61.6vw, 520px);
}
.picture.round {
  transition: mask 2s;
  -webkit-mask: radial-gradient(circle at center, #000000 50%, rgba(0, 0, 0, 0) 50%) center/var(--s, 5% 5%) no-repeat;
  mask: radial-gradient(circle at center, #000000 50%, rgba(0, 0, 0, 0) 50%) center/var(--s, 5% 5%) no-repeat;
}
.picture.round.in-view {
  --s: 200% 200%;
}

.shape-card {
  --card-pad: 37px 20px;
  --t-fs: 1.25rem;
  --t-lh: 150%;
  --t-ls: 1px;
  --t-mb: 12px;
  --p-fs: 0.875rem;
  --p-lh: 215%;
  --p-ls: 1.82px;
  width: 100%;
  max-width: 1108px;
  padding: var(--card-pad);
  color: var(--color-coral);
  background-color: #ffffff;
  transform: translate(100px, 100px);
  transition: transform 1.5s;
  clip-path: polygon(0% 0%, 100% 10.6060606061%, 100% 90.9090909091%, 0% 100%);
}
.shape-card.in-view {
  transform: translate(0, 0);
}
.shape-card h2 {
  margin-bottom: var(--t-mb);
  font-size: var(--t-fs);
  line-height: var(--t-lh);
  letter-spacing: var(--t-ls);
}
.shape-card p {
  font-size: var(--p-fs);
  line-height: var(--p-lh);
  letter-spacing: var(--p-ls);
}
@media (min-width: 768px) {
  .shape-card {
    --card-pad: 49px 58px;
    --t-fs: 2rem;
    --t-ls: 1.6px;
    --t-mb: 16px;
    --p-fs: 1rem;
    --p-ls: 2.08px;
    clip-path: polygon(2.8880866426% 0, 96.7509025271% 22.3484848485%, 100% 80.6818181818%, 0% 100%);
    margin-bottom: -32px;
  }
}

.description-card {
  --card-pad: 37px 7.3333333333vw;
  --t-fs: 1rem;
  --t-lh: 150%;
  --t-ls: 0.8px;
  --t-mb: 16px;
  --p-fs: 0.875rem;
  --p-lh: 215%;
  --p-ls: 1.82px;
  padding: var(--card-pad);
  background-color: #FBFFE1;
}
.description-card h3 {
  margin-bottom: var(--t-mb);
  color: var(--color-coral);
  font-size: var(--t-fs);
  line-height: var(--t-lh);
  letter-spacing: var(--t-ls);
}
.description-card p {
  font-size: var(--p-fs);
  line-height: var(--p-lh);
  letter-spacing: var(--p-ls);
  font-feature-settings: "halt" on;
}
@media (min-width: 768px) {
  .description-card {
    --card-pad: 0;
    --t-fs: 1.25rem;
    --t-ls: 1px;
    --p-fs: 1rem;
    --p-ls: 2.08px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .description-card .easy {
    width: 60.3260869565%;
  }
  .description-card .medium {
    width: 87.6811594203%;
  }
  .description-card .difficult {
    width: 91.4855072464%;
  }
}

.shape-stack {
  --s-min: 85.3333333333vw;
  --s-max: 720px;
  --s-gap: 40px;
  --p-fs: 1rem;
  --p-lh: 215%;
  --p-ls: 2.08px;
  width: min(var(--s-min), var(--s-max));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-gap);
}
.shape-stack p {
  max-width: 432px;
  font-size: var(--p-fs);
  line-height: var(--p-lh);
  letter-spacing: var(--p-ls);
}

.credit {
  --fs: 1rem;
  --lh: 192%;
  --ls: 0.8px;
  --w: 261px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  width: var(--w);
  color: #ffffff;
}
.credit h3 {
  font-size: var(--fs);
  font-family: "Yu Gothic Pr6N D";
}
.credit ul {
  display: grid;
  gap: 8px;
}
.credit li {
  display: grid;
  grid-template-columns: auto 45.2107279693%;
}
.credit .name:before {
  content: "｜";
  margin-right: 20px;
}
@media (min-width: 768px) {
  .credit {
    margin: -32px 0;
  }
}

.products {
  --grid-pad: 54px 0;
  --season-color: #ED3C3C;
  --on-sale-fs: 1.3125rem;
  --on-sale-ls: 0.945px;
  --on-sale-m: 19px 0 5px;
  --date-ls: 129%;
  --sale-ls: 139%;
  --limited-fs: 0.875rem;
  --limited-lh: 139%;
  --limited-ls: 0.63px;
  --logo-min-w: 70.176vw;
  --logo-max-w: 323.26px;
  --span-display: block;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--grid-pad);
  background-color: #ffffff;
}
.products__header {
  width: min(80vw, 1130px);
}
.products__header h2 {
  width: min(var(--logo-min-w), var(--logo-max-w));
}
.products__header h2 img {
  width: 100%;
  height: auto;
}
.products__header .on-sale,
.products__header .limited {
  color: var(--season-color);
  font-family: "Yu Gothic Pr6N D";
}
.products__header .on-sale {
  margin: var(--on-sale-m);
  font-size: var(--on-sale-fs);
  letter-spacing: var(--on-sale-ls);
}
.products__header span {
  display: var(--span-display);
}
.products__header .date {
  line-height: var(--date-ls);
}
.products__header .sale {
  line-height: var(--sale-ls);
}
.products__header .limited {
  font-size: var(--limited-fs);
  line-height: var(--limited-lh);
  letter-spacing: var(--limited-ls);
}
@media (min-width: 768px) {
  .products {
    --grid-pad: 115px 0 166px;
    --on-sale-fs: 1.5625rem;
    --on-sale-ls: 1.5px;
    --on-sale-m: 22px 0 3px;
    --date-ls: 148%;
    --sale-ls: 148%;
    --span-display: inline-block;
  }
}

.product-list {
  --grid-col: repeat(2, 1fr);
  --grid-gap: 20px 14px;
  --grid-mt: 36px;
  width: min(80vw, 1130px);
  margin-top: var(--grid-mt);
  display: grid;
  grid-template-columns: var(--grid-col);
  gap: var(--grid-gap);
}
@media (min-width: 450px) {
  .product-list {
    --grid-col: repeat(3, 1fr);
  }
}
@media (min-width: 768px) {
  .product-list {
    --grid-col: repeat(4, 1fr);
    --grid-gap: 40px 35px;
    --grid-mt: 62px;
  }
}

.item {
  --color-cart-button: #7AB3F5;
  --name-fs: 0.875rem;
  --name-lh: 148.5%;
  --name-ls: -0.36px;
  --size-fs: 0.75rem;
  --size-lh: 148.5%;
  --size-ls: -0.36px;
  --price-fs: 0.875rem;
  --price-lh: 119.958%;
  --price-ls: 0.42px;
  --price-m: 8px 0 7px;
  --inc-tax-fs: 0.5625rem;
  --inc-tax-lh: 186.601%;
  --inc-tax-ls: 0.36px;
  --button-fs: 0.7239375rem;
  --button-lh: 25px;
  --button-ls: 0.579px;
  --button-max-w: 192px;
}
.item a {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.item__photo {
  aspect-ratio: 1;
  margin-bottom: 13.5px;
}
.item__photo img {
  width: auto;
  height: 100%;
  object-fit: cover;
}
.item__name {
  font-family: "Yu Gothic Pr6N M";
  font-size: var(--name-fs);
  line-height: var(--name-lh);
  letter-spacing: var(--name-ls);
}
.item__size {
  font-family: "Yu Gothic Pr6N D";
  font-size: var(--size-fs);
  line-height: var(--size-lh);
  letter-spacing: var(--size-ls);
}
.item .price, .item__currency {
  font-family: "Yu Gothic Pr6N B";
  font-family: "Yu Gothic Pr6N B";
  font-size: var(--price-fs);
  line-height: var(--price-lh);
  letter-spacing: var(--price-ls);
}
.item__price {
  display: flex;
  flex-wrap: wrap;
  margin: auto 0 4px;
  font-feature-settings: "halt" on;
}
.item__inc-tax {
  margin-left: 0.25em;
  font-family: "Yu Gothic Pr6N R";
  font-size: var(--inc-tax-fs);
  line-height: var(--inc-tax-lh);
  letter-spacing: var(--inc-tax-ls);
}
.item__button {
  width: 100%;
  max-width: var(--button-max-w);
  font-family: "Yu Gothic Pr6N B";
  color: var(--color-white);
  font-size: var(--button-fs);
  line-height: var(--button-lh);
  letter-spacing: var(--button-ls);
  text-align: center;
  border-radius: calc(var(--button-lh) / 2);
  background-color: var(--color-cart-button);
}
@media (min-width: 768px) {
  .item {
    --name-fs: 1.125rem;
    --name-lh: 159.5%;
    --name-ls: 1.44px;
    --size-fs: 1rem;
    --size-lh: 159.5%;
    --size-ls: 1.28px;
    --price-fs: 1.3125rem;
    --price-lh: 142.857%;
    --price-m: 5px 0 9px;
    --inc-tax-fs: 0.625rem;
    --inc-tax-lh: 300%;
    --inc-tax-ls: 0.4px;
    --button-fs: 1rem;
    --button-lh: 35px;
    --button-ls: 0.8px;
    --button-max-w: 192px;
  }
  .item .price, .item__currency {
    font-family: "Yu Gothic Pr6N D";
  }
  .item__button {
    padding: 0 0 0 2.8472222222vw;
    text-align: left;
  }
}