@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@600;700&family=EB+Garamond:wght@500&display=swap');

/* root */
:root { --line: 1.5px; --line: round(0.1rem, 0.5px); --c_black: #000000; --c_white: #ffffff; --c_photo: #eeeeec; --f_ja: "Noto Serif JP", serif; --f_en: "EB Garamond", serif; color-scheme: light; }

/* reset */
* { box-sizing: border-box; }

/* base */
html { width: 100%; overflow-x: hidden; }
body { margin: 0; color: var(--c_black); background: var(--c_white); font-family: var(--f_ja); font-size: 1rem; font-weight: 600; line-height: 1.8; letter-spacing: 0.05em; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; opacity: 0; transition: opacity 1.4s ease; }
img.loaded { opacity: 1; }
picture { display: contents; }
a, button { color: inherit; transition: opacity 0.7s ease; }
a:hover, button:hover { opacity: 0.55; }
a:focus-visible, button:focus-visible { outline: var(--line) solid var(--c_black); outline-offset: 0.25rem; }
.using-mouse a:focus-visible, .using-mouse button:focus-visible { outline: none; }
::selection { color: var(--c_white); background: var(--c_black); }
.pc { display: block; }
.sp { display: none; }
.br__pc { display: inline; }
.br__sp { display: none; }
.cMain { padding-inline: 7.5rem; }
.cImageFrame { position: relative; overflow: hidden; background: var(--c_photo); }
.cImageFrame img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

/* fade */
.fade { opacity: 0; transition: opacity 2.4s cubic-bezier(0.22, 0.61, 0.36, 1); }
.fade.active { opacity: 1; }
.cHero__logo.fade, .cHero__name.fade, .cHero__photo.fade { transition-delay: 0.3s; }
.cStory__copy.fade { transition-delay: 0.35s; }
.cService .cSlider.fade { transition-delay: 0.25s; }
.cService__catch.fade { transition-delay: 0.5s; }

/* nav */
.cNav { position: fixed; top: 4rem; left: 3rem; z-index: 10; display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.cNav.fade { transition-delay: 1.6s; }
.cNav__link { padding: 0 0.5rem 0 0; border-right: var(--line) solid var(--c_black); }
.cNav__link img { display: block; width: 1.4rem; height: auto; }
.cNav__insta { display: block; width: 2rem; height: 2rem; margin: 0 0 0 -0.25rem; }
.cNav__insta svg { display: block; width: 100%; height: 100%; }

/* hero */
.cHero { position: relative; padding-top: 32rem; }
.cHero__logo { position: absolute; top: 8rem; right: 5rem; width: 4.5rem; margin: 0; }
.cHero__name { position: absolute; top: 20rem; left: 5rem; width: 9.75rem; margin: 0; }
.cHero__logo img, .cHero__name img { width: 100%; }
.cHero__photo { aspect-ratio: 1200 / 630; }

/* story */
.cStory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
.cStory--1 { margin-top: 7rem; }
.cStory--reverse .cStory__photo { order: 2; }
.cStory__photo { aspect-ratio: 1 / 1; }
.cStory__copy { justify-self: center; }
.cStory__copy img { width: 100%; }
.cStory--1 .cStory__copy { width: 17rem; }
.cStory--2 .cStory__copy { width: 20rem; }
.cStory--3 .cStory__copy { width: 14rem; }

/* ingredients */
.cIngredients { margin-top: 6.25rem; padding: 2.5rem 0 1.75rem 4.5rem; border-top: var(--line) solid var(--c_black); border-bottom: var(--line) solid var(--c_black); }
.cIngredients dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.8; letter-spacing: 0.1em; }
.cIngredients dt { margin: 0; white-space: nowrap; }
.cIngredients dd { margin: 0; }

/* service */
.cService { display: grid; grid-template-columns: 29.5rem 34rem minmax(0, 1fr); grid-template-areas: "body photo catch"; align-items: start; padding: 7.5rem 0 5.5rem; border-bottom: var(--line) solid var(--c_black); }
.cService--bento { grid-template-columns: 10.75rem 36.75rem minmax(0, 1fr); grid-template-areas: "catch photo body"; }
.cService--enkai { padding-bottom: 5.75rem; }
.cService__body { grid-area: body; padding: 0rem 2rem 0 5rem; }
.cService--bento .cService__body { padding: 0.5rem 0 0 4.5rem; }
.cService--enkai .cService__body { padding: 0.5rem 2rem 0 5.25rem; }
.cService__title { margin: 0 0 2rem 0.25rem; }
.cService__title img { height: 1.75rem; width: auto; }
.cService--bento .cService__title, .cService--enkai .cService__title { margin-left: 0; }
.cService--enkai .cService__title { margin-bottom: 2rem; }
.cHours { display: grid; grid-template-columns: 5rem auto; margin: 0; font-size: 1.4rem; font-weight: 700; line-height: 1.6; letter-spacing: 0.1em; }
.cHours dd { margin: 0; white-space: nowrap; }
.cHours small { font-size: 0.6em; }
.cHours--plain { display: block; }
.cService__note { margin: 0.75rem 0 0; font-size: 1.05rem; font-weight: 700; line-height: 1.45; letter-spacing: 0.1em; }
.cService__note--indent { margin-top: 0; padding-left: 2.25rem; }
.cService__plan { margin: 0 0 0.5rem; font-size: 1.4rem; font-weight: 700; line-height: 1.6; letter-spacing: 0.1em; }
.cService__plan small { margin-left: 0.5em; font-size: 0.6em; }
.cPrice { display: grid; grid-template-columns: 14rem auto; margin: 0; font-size: 1.4rem; font-weight: 700; line-height: 1.6; letter-spacing: 0.1em; white-space: nowrap; }
.cPrice dd { margin: 0; }
.cPrice__group { margin-top: -0.5rem; }
.cPrice__sub { padding-left: 2.25rem; }
.cPrice__sub, .cPrice__sub + dd { line-height: 1.65; }
.cService__tel { margin: 1.75rem 0 0; font-size: 1.3rem; font-weight: 700; line-height: 1.35; letter-spacing: 0.1em; white-space: nowrap; }
.cService--bento .cService__tel { margin-top: 2.25rem; }
.cService--enkai .cService__tel { margin-top: 2.5rem; }
.cService__tel a { display: block; width: fit-content; font-family: var(--f_en); font-size: 2.05rem; font-weight: 500; line-height: 1.3; letter-spacing: 0.05em; }
.cService__catch { grid-area: catch; justify-self: end; width: 1.5rem; margin: 0rem 5rem 0 0; }
.cService__catch img { width: 100%; }
.cService--bento .cService__catch { justify-self: start; width: 1.5rem; margin: 0rem 0 0 5rem; }
.cService--enkai .cService__catch { width: 1.5rem; margin: 0rem 5rem 0 0; }

/* button */
.cButton { display: grid; grid-template-columns: 3rem minmax(0, 1fr); width: 18rem; height: 3.75rem; margin-top: 2.25rem; border: var(--line) solid var(--c_black); transition: color 0.7s ease, background-color 0.7s ease; }
.cButton:hover { color: var(--c_white); background: var(--c_black); opacity: 1; }
.cButton__arrow { display: grid; place-items: center; border-right: var(--line) solid var(--c_black); transition: border-color 0.7s ease; }
.cButton:hover .cButton__arrow { border-color: var(--c_white); }
.cButton__arrow svg { width: 0.5rem; }
.cButton__label { display: grid; place-items: center; }
.cButton__label img { width: 10.5rem; height: auto; transition: filter 0.7s ease; }
.cButton:hover .cButton__label img { filter: invert(1); }

/* slider */
.cSlider { grid-area: photo; position: relative; }
.cService--enkai .cSlider { margin-left: 0.5rem; }
.cSlider__frame { aspect-ratio: 1 / 1; }
.cSlider__slide { transition: opacity 1.8s ease; }
.cSlider__slide:not(.is-current) { opacity: 0; pointer-events: none; }
.cSlider__dots { display: flex; justify-content: center; gap: 0.75rem; height: 2rem; padding-top: 1.25rem; }
.cSlider__dot { width: 0.5rem; height: 0.5rem; border: var(--line) solid var(--c_black); border-radius: 50%; transition: background 0.7s ease; }
.cSlider__dot.is-current { background: var(--c_black); }
.cSlider--single .cSlider__dots { display: none; }

/* footer */
.cFooter { padding: 6.5rem 0 7.5rem 5rem; }
.cFooter p { margin: 0; font-size: 1.1rem; font-weight: 700; line-height: 1.85; letter-spacing: 0.1em; }
.cFooter .cFooter__name { margin-bottom: 2rem; }
.cFooter__name img { width: 20.5rem; }
.cFooter a { margin-left: 1.25em; letter-spacing: 0.05em; }
.cFooter__tel a { margin-left: 0; letter-spacing: 0.1em; }

/* size */
html { font-size: max(10px, 1.1vw); }

/* sp */
@media screen and (max-width: 600px) {
  html { font-size: clamp(10px, 3.4vw, 100px); }
  .pc { display: none; }
  .sp { display: block; }
  .br__pc { display: none; }
  .br__sp { display: inline; }
  .cMain { padding-inline: 0; }

  /* nav */
  .cNav { top: 0; right: 0; bottom: auto; left: 0; flex-direction: row; align-items: center; justify-content: space-between; gap: 0; height: auto; padding: 1.5rem 2.5rem; background: var(--c_white); }
  .cNav__link { margin-top: 0; padding: 0 0 0.5rem; border-right: 0; border-bottom: var(--line) solid var(--c_black); }
  .cNav__link img { width: 9.25rem; aspect-ratio: 142 / 20; }
  .cNav__insta { order: -1; width: 2.25rem; height: 2.25rem; margin: 0; }

  /* hero */
  .cHero { padding-top: 34rem; }
  .cHero__logo { top: 12.5rem; right: 4rem; width: 4.25rem; }
  .cHero__name { top: 24rem; left: 3.25rem; width: 9rem; }
  .cHero__photo { aspect-ratio: 5 / 6; }

  /* story */
  .cStory { display: flex; flex-direction: column; align-items: center; margin-top: 0; }
  .cStory__photo, .cStory--reverse .cStory__photo { order: 2; width: 100%; }
  .cStory__photo { aspect-ratio: 601 / 721; }
  .cStory__copy { margin: 6rem 0; }
  .cStory--1 .cStory__copy { width: 18rem; }
  .cStory--2 .cStory__copy { width: 21.25rem; }
  .cStory--3 .cStory__copy { width: 14.75rem; }

  /* ingredients */
  .cIngredients { margin: 4rem 2rem 4.75rem 2rem; padding: 0; border: 0; }
  .cIngredients dl { line-height: 1.7; }
  .cIngredients dt { padding-right: 0.25rem; }

  /* service */
  .cService__title img { height: 1.5rem; }
  .cHours { grid-template-columns: 4.75rem auto; font-size: 1.35rem; line-height: 1.55; }
  .cService__note { font-size: 1rem; line-height: 1.4; }
  .cService__plan { font-size: 1.35rem; line-height: 1.55; }
  .cPrice { grid-template-columns: 12.75rem auto; font-size: 1.35rem; line-height: 1.55; }
  .cPrice__sub, .cPrice__sub + dd { line-height: 1.6; }
  .cService__tel { font-size: 1.25rem; line-height: 1.3; }
  .cService__tel a { font-size: 1.95rem; }
  .cService, .cService--bento { grid-template-columns: 7rem minmax(0, 1fr); grid-template-areas: "photo photo" "catch body"; padding: 2.5rem 0 3.25rem; border: 0; }
  .cService--bento { padding-bottom: 3rem; }
  .cService--enkai { padding-bottom: 3rem; }
  .cService__body, .cService--bento .cService__body, .cService--enkai .cService__body { padding: 5.25rem 1.5rem 0 0; }
  .cService--bento .cService__body { padding-top: 4.75rem; }
  .cService--enkai .cService__body { padding-top: 4.5rem; }
  .cService__title, .cService--bento .cService__title, .cService--enkai .cService__title { margin-left: 0; }
  .cService__catch, .cService--bento .cService__catch, .cService--enkai .cService__catch { justify-self: start; margin: 5rem 0 0 2.25rem; }
  .cService--bento .cService__catch { margin: 4.75rem 0 0 2.5rem; }
  .cService--enkai .cService__catch { margin: 4.5rem 0 0 2.5rem; }
  .cService--enkai .cSlider { margin-left: 0; }

  /* footer */
  .cFooter { margin: 0 2.75rem 0 2.25rem; padding: 2.75rem 0 7.5rem 0; border-top: var(--line) solid var(--c_black); }
  .cFooter a { display: block; margin-left: 0; }
}

/* motion off */
@media (prefers-reduced-motion: reduce) {
  img, .fade, .cSlider__slide, .cSlider__dot, .cButton, .cButton__arrow, .cNav, a, button { transition: none; }
  .fade { opacity: 1; }
}