@import url('https://use.typekit.net/jym8bxa.css');

@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400&family=Noto+Sans+JP:wght@400&family=Noto+Serif+JP:wght@300:600&display=swap');

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

ul,
ol {
  list-style: none;
  padding-inline-start: 0;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
}

a {
  background-color: transparent;
  color: inherit;
  text-decoration: none;
}

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

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

summary {
  display: block;
}

summary::-webkit-details-marker {
  display: none;
}

[type='text'],
[type='text'],
[type='search'],
[type='tel'],
[type='url'],
[type='email'],
[type='password'],
textarea,
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
}

[type='radio'],
[type='checkbox'] {
  opacity: 0;
  position: absolute;
}

[type='text']:hover,
[type='search']:hover,
[type='tel']:hover,
[type='url']:hover,
[type='email']:hover,
[type='password']:hover,
textarea:hover,
select:hover {
  outline: none;
}

[type='text']:focus,
[type='search']:focus,
[type='tel']:focus,
[type='url']:focus,
[type='email']:focus,
[type='password']:focus,
textarea:focus,
select:focus {
  border-color: #ccc;
}

.wrap {
  margin-inline: revert;
  padding-inline: revert;
}

html {
  min-height: 100%;
  text-rendering: geometricPrecision;
  width: 100%;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

body {
  background-color: #fff;
  color: #333;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(0.875rem, 0.1294498382vw + 0.8446601942rem, 1rem);
  font-weight: 400;
  line-height: 1.76;
  overflow-wrap: break-word;
}

button {
  cursor: pointer;
}

a {
  cursor: pointer;
}

img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  vertical-align: top;
}

#contents-area {
  padding-bottom: 0;
}

.fadeUp._lg {
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-name: fadeUpLarge;
}

@keyframes fadeUpLarge {
  from {
    opacity: 0;
    transform: translateY(80px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeUp {
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-name: fadeUpAnime;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.clear {
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-name: clearAnime;
}

@keyframes clearAnime {
  from {
    filter: blur(1.5rem);
  }

  to {
    filter: blur(0);
  }
}

.js-animate-up {
  opacity: 0;
}

.l-inner {
  padding-inline: 7.77%;
}

.l-inner--narrow {
  padding-inline: 7.77%;
}

.l-category {
  display: flex;
  flex-direction: column;
  row-gap: 64px;
}

.l-section {
  display: flex;
  flex-direction: column;
  row-gap: 96px;
}

.l-container {
  display: flex;
  flex-direction: column;
  row-gap: 120px;
}

.c-link-button {
  aspect-ratio: 1/1;
  border: 1px solid #efc637;
  border-radius: 50%;
  display: grid;
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(0.75rem, 0.1294498382vw + 0.7196601942rem, 0.875rem);
  margin-inline: auto;
  overflow: hidden;
  padding: 4px;
  place-items: center;
  position: relative;
  text-align: center;
  width: 100%;
}

.c-link-button::before {
  background-color: rgba(0, 0, 0, 0.2);
  content: '';
  height: 100%;
  position: absolute;
  width: 100%;
}

.c-link-button span {
  color: #fff;
  font-weight: 700;
  position: absolute;
}

.c-link-button img {
  inset: 0;
  position: absolute;
  z-index: -1;
}

.c-cart-button {
  border: 1px solid #333;
  border-radius: 30px;
  margin-inline: auto;
  max-width: 320px;
  padding-block: 8px;
  text-align: center;
  width: 100%;
}

.c-cart-button:hover {
  background-color: #333;
  color: #fff;
  transition: background-color ease 0.5s, color ease 0.5s;
}

.c-cat-header {
  display: grid;
  grid-template-rows: repeat(2, auto);
  row-gap: 1rem;
  text-align: center;
}

.c-cat-header._left {
  text-align: left;
}

.c-cat-header__title {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(1.25rem, 0.2588996764vw + 1.1893203883rem, 1.5rem);
}

.c-cat-header__title--en {
  color: #fff;
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(1.25rem, 0.2588996764vw + 1.1893203883rem, 1.5rem);
  grid-column: 1/2;
  grid-row: 1/2;
}

.c-cat-header__description {
  line-height: 1.71;
}

.c-cat-header__link {
  background-color: #d3a07e;
  border-radius: 30px;
  padding: 8px 16px;
  color: #fff !important;
  margin-inline: auto;
}

.c-item-title {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(1rem, 0.1294498382vw + 0.9696601942rem, 1.125rem);
  text-align: center;
}

.c-item-title._left {
  text-align: left;
}

.c-cards._budget .c-item-title {
  font-size: clamp(0.875rem, 0.2588996764vw + 0.8143203883rem, 1.125rem);
}

.c-section-title {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(1.5rem, 0.2588996764vw + 1.4393203883rem, 1.75rem);
  position: relative;
  text-align: center;
}

.c-section-title::after {
  background-color: #efc637;
  bottom: 0;
  content: '';
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  translate: -50% 0;
  width: 96px;
}

.c-section-title--en {
  color: #efc637;
  font-family: 'Noto Serif JP', serif;
}

.c-cards-container {
  display: grid;
  row-gap: 54px;
}

.c-cards-wrapper {
  display: grid;
  row-gap: 24px;
}

.c-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  -moz-column-gap: 16px;
  column-gap: 16px;
  row-gap: 32px;
}

.c-cards._pickup {
  grid-template-columns: auto;
  row-gap: 32px;
}

.c-cards._budget {
  grid-template-columns: repeat(3, 1fr);
  -moz-column-gap: 8px;
  column-gap: 8px;
}

.c-cards._budget .c-card__img {
  border-radius: 0;
}

.c-card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 12px;
}

.c-cards._pickup .c-card {
  grid-row: span 4;
  margin-inline: auto;
  max-width: 80%;
}

.c-card__img {
  background: #ebecf0;
  border-radius: 30px;
  box-shadow: 5px 5px 20px #c8c9cc, -5px -5px 20px #ffffff;
  overflow: hidden;
}

.c-card__img._round {
  border-radius: 50%;
}

.c-card__price {
  font-size: clamp(0.75rem, 0.2588996764vw + 0.6893203883rem, 1rem);
  text-align: center;
}

.c-splide__text {
  padding-inline-start: 2em;
}

.c-splide__img {
  aspect-ratio: 1/1;
}

.c-sub-title {
  display: grid;
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(1rem, 0.1294498382vw + 0.9696601942rem, 1.125rem);
  grid-template-columns: max-content 1fr;
  -moz-column-gap: 1rem;
  align-items: center;
  column-gap: 1rem;
}

.c-sub-title::before,
.c-sub-title::after {
  border-top: 1px solid currentColor;
  content: '';
  width: 30%;
}

.c-sub-title::before {
  display: none;
}

.p-reasons__wrapper {
  display: grid;
  row-gap: 48px;
}

.p-reason {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
}

.p-reason._upsidedown {
  flex-direction: column-reverse;
}

.p-reason__text {
  display: grid;
  flex: 50%;
  row-gap: 8px;
}

.p-reason__img {
  flex: 50%;
}

.p-reason__title {
  align-self: end;
  display: grid;
}

.p-reason__link {
  color: #55a8f1;
}

.p-reason__banner {
  margin-inline: auto;
  max-width: 1440px;
}

.p-furoshiki__text {
  align-self: center;
  grid-column: 1/2;
  grid-row: 1/2;
  justify-self: flex-start;
  padding-inline-start: 8%;
}

.p-furoshiki__below {
  display: none;
  text-align: center;
}

.p-furoshiki__items {
  display: none;
}

.p-furoshiki__item {
  position: relative;
}

.p-furoshiki__item._first {
  grid-column: 2/3;
  grid-row: 1/2;
}

.p-furoshiki__item._second {
  grid-column: 2/3;
  grid-row: 2/3;
}

.p-furoshiki__item._third {
  grid-column: 1/2;
  grid-row: 1/3;
}

.p-furoshiki__item img {
  aspect-ratio: 16/9;
}

.p-furoshiki__item-hover {
  opacity: 0;
  position: absolute;
  visibility: hidden;
}

.p-furoshiki__item:hover .p-furoshiki__item-hover {
  background-color: rgba(0, 0, 0, 0.3);
  display: grid;
  inset: 0;
  opacity: 1;
  padding: 16px;
  place-items: center;
  text-align: center;
  transition: visibility 0.3s ease, opacity 0.3s ease,
    background-color 0.3s ease;
  visibility: visible;
}

.p-furoshiki__item-title {
  align-self: self-end;
  color: #fff;
}

.p-furoshiki__item-price {
  align-self: self-start;
  color: #fff;
}

.p-sweets__text {
  color: #fff;
  grid-column: 1/2;
  grid-row: 1/2;
  padding: 6%;
}

.p-feature {
  display: flex;
  flex-direction: column;
}

.p-feature__fixed {
  display: grid;
  overflow: hidden;
  position: relative;
}

.p-feature__fixed::before {
  background-color: rgba(0, 0, 0, 0.1);
  content: '';
  inset: 0;
  position: absolute;
}

.p-feature__fixed .c-cat-header__title--en {
  align-self: center;
  display: grid;
  font-size: 40px;
  inset: 0;
  justify-self: center;
  letter-spacing: 0.1em;
  position: absolute;
}

.p-feature__wrapper {
  height: 120vh;
  position: relative;
}

.p-feature__wrapper:not(:first-child) {
  display: none;
}

.p-feature__inner {
  align-items: center;
  clip-path: inset(0);
  display: grid;
  inset: 0;
  position: absolute;
}

.p-feature__img {
  display: block;
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: -1;
}

.p-feature__text {
  background-color: rgba(250, 250, 250, 0.7);
  display: flex;
  flex-direction: column;
  padding-block: 64px;
  padding-inline: 8px;
  row-gap: 16px;
}

.p-feature__items {
  margin-block-start: 32px;
}

.p-variety {
  display: grid;
  margin-inline: auto;
  row-gap: 16px;
}

.p-variety__item {
  display: grid;
  row-gap: 8px;
}

.p-variety__item-title {
  font-size: clamp(0.5rem, 0.2588996764vw + 0.4393203883rem, 0.75rem);
  text-align: center;
}

.p-variety__img {
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
}

.p-variety__grid {
  display: grid;
  gap: 6.6%;
}

.p-variety__grid._tea {
  grid-template-columns: repeat(3, 1fr);
}

.p-variety__grid._coffee {
  grid-template-columns: repeat(4, 1fr);
}

.p-variety__grid._coffee .p-variety__item {
  grid-row: 2/3;
}

.p-variety__item-cat {
  font-family: 'Noto Serif JP', serif;
  grid-column: 1/3;
  grid-row: 1/2;
}

.p-top__introduction {
  align-content: center;
  align-items: center;
  display: grid;
}

.p-top__text {
  font-family: 'Noto Serif JP', serif;
  grid-column: 1/2;
  grid-row: 1/2;
  padding: 2em;
}

.p-top__bg {
  grid-column: 1/2;
  grid-row: 1/2;
  height: 100%;
  position: relative;
  z-index: -1;
}

.p-top__bg::before {
  background-color: rgba(252, 255, 255, 0.3);
  content: '';
  inset: 0;
  position: absolute;
}

.p-top__title {
  font-size: clamp(1.25rem, 0.5177993528vw + 1.1286407767rem, 1.75rem);
  padding-block-end: 1em;
  text-align: center;
}

.p-top__link-area {
  margin-block-start: 32px;
}

.p-top__links {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
  margin-block-start: 32px;
}

.p-top__img {
  height: 100vh;
}

.p-jtea__grid {
  display: none;
}

.p-jtea__text {
  align-self: center;
  grid-column: 2/3;
  grid-row: 3/4;
  padding-block-start: 1rem;
  padding-inline-end: 1rem;
}

.p-jtea__img {
  grid-column: 1/4;
  grid-row: 1/3;
}

.p-jtea__img--sm {
  grid-column: 3/5;
  grid-row: 2/4;
}

.p-budget__wrapper {
  display: grid;
  row-gap: 24px;
}

.p-parallax__wrapper {
  height: 120vh;
  position: relative;
  width: calc(100vw - (100vw - 100%));
}

.p-parallax__inner {
  align-items: center;
  clip-path: inset(0);
  display: grid;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.p-parallax__img {
  display: block;
  height: 100vh;
  inset: 0;
  position: fixed;
  width: calc(100vw - (100vw - 100%));
  z-index: -1;
}

.p-parallax__text {
  background-color: rgba(250, 250, 250, 0.4);
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  margin-inline-start: 2.2%;
  padding-block: 64px;
  padding-inline: 8px;
  row-gap: 16px;
  width: 60%;
}

.ut-is-md {
  display: none;
}

.ut-is-sm {
  display: block;
}

.ut-mt--16 {
  margin-block-start: 16px;
}

@media screen and (min-width: 576px) {
  .c-cards._pickup {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 0;
    -moz-column-gap: 32px;
    column-gap: 32px;
  }

  .c-cards._pickup .c-card {
    max-width: 100%;
  }
}

@media (min-width: 751px) {
  .p-feature__container {
    display: flex;
  }

  .p-feature__fixed {
    height: 100vh;
    position: sticky;
    top: 0;
    width: 50%;
  }

  .p-feature__parallax {
    width: 50%;
  }

  .p-feature__wrapper:not(:first-child) {
    display: block;
  }

  .p-feature__img {
    width: calc(50% - 110px);
  }

  .p-parallax__img {
    inset: revert;
    top: 0;
    width: calc(100vw - (100vw - 100%) - 220px);
  }

  .p-parallax__text {
    padding-inline: 32px;
    width: 35%;
  }
}

@media screen and (min-width: 768px) {
  .l-inner {
    margin-inline: auto;
    max-width: 1120px;
    padding-inline: revert;
    width: 77.7%;
  }

  .l-inner--narrow {
    margin-inline: auto;
    max-width: 800px;
    padding-inline: revert;
    width: 55.5%;
  }

  .l-category {
    row-gap: 80px;
  }

  .l-section {
    row-gap: 120px;
  }

  .l-container {
    row-gap: 160px;
  }

  .c-section-title {
    padding-inline-start: 3.3vw;
    text-align: revert;
  }

  .c-section-title::after {
    left: 0;
    translate: revert;
    width: 55.5vw;
  }

  .c-cards {
    grid-template-columns: repeat(3, 1fr);
    -moz-column-gap: 32px;
    column-gap: 32px;
  }

  .c-sub-title {
    grid-template-columns: 60px auto 60px;
    justify-content: center;
    text-align: center;
  }

  .c-sub-title::before,
  .c-sub-title::after {
    width: 60px;
  }

  .c-sub-title::before {
    display: block;
  }

  .p-reasons__wrapper {
    row-gap: revert;
    row-gap: 64px;
  }

  .p-reason {
    flex-direction: row;
    row-gap: revert;
    -moz-column-gap: 32px;
    column-gap: 32px;
  }

  .p-reason._reverse {
    flex-direction: row-reverse;
  }

  .p-reason._upsidedown {
    flex-direction: revert;
  }

  .p-furoshiki__below {
    display: grid;
    row-gap: 16px;
  }

  .p-furoshiki__items {
    display: grid;
    grid-template-columns: 60% 40%;
    grid-template-rows: repeat(2, 1fr);
  }

  .p-variety__item-carousel {
    display: none;
  }

  .p-top__text {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
  }

  .p-top__bg {
    height: 600px;
  }

  .p-top__title {
    padding-block-end: 1em;
    position: relative;
    text-align: start;
    text-orientation: mixed;
    writing-mode: vertical-rl;
  }

  .p-top__title::after {
    background-color: #333;
    content: '';
    height: 50%;
    left: 0;
    position: absolute;
    top: 0;
    width: 1px;
  }

  .p-top__description {
    letter-spacing: 0.2em;
    line-height: 2.4;
    padding-block-start: 5em;
    text-orientation: mixed;
    text-wrap: balance;
    writing-mode: vertical-rl;
  }

  .p-top__description span {
    text-combine-upright: all;
  }

  .p-jtea__grid {
    display: grid;
    grid-template-columns: 11.1% 44.4% 8.8% 24.4% auto;
    grid-template-rows: auto 32px auto;
  }

  .ut-is-md {
    display: block;
  }

  .ut-is-sm {
    display: none;
  }
}

@media screen and (min-width: 1024px) {
  .p-top__links {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
} /*# sourceMappingURL=map/style.css.map */