@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@24,300&family=Noto+Sans+JP:wght@300;400;500&display=swap');
:root {
  --ink:#673b26;
  --brown:#63371f;
  --line:#9b654c;
  --paper:#fff
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:90px
}
body {
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:'Noto Sans JP','Yu Gothic',sans-serif;
  font-size:13px;
  font-weight:300;
  line-height:2;
  letter-spacing:.045em
}
body.menu-open {
  overflow:hidden
}
button,a {
  cursor:pointer
}
a {
  color:inherit
}
img {
  max-width:100%;
  display:block
}
h1,h2,h3,p {
  margin-top:0
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.site-nav {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:30;
  height:90px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px clamp(18px,3vw,48px);
  transition:transform .35s,background .35s
}
.site-nav.is-hidden {
  transform:translateY(-110%)
}
.site-nav.is-solid,.site-nav.menu-visible {
  background:rgba(255,255,255,.95)
}
.site-nav__brand img {
  width:43px;
  height:43px;
  object-fit:contain
}
.off-hero {
  display:none!important
}
.is-solid .off-hero,.menu-visible .off-hero {
  display:block!important
}
.is-solid .on-hero,.menu-visible .on-hero {
  display:none!important
}
.site-nav__actions {
  display:flex;
  align-items:center;
  gap:22px
}
.nav-diagnosis img {
  width:180px
}
/* 添付マークをSVGで再現。縦線・中央線が消え、上下の線が×へ変化。 */
.menu-toggle {
  width:44px;
  height:44px;
  padding:6px;
  border:0;
  background:transparent;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.menu-toggle:focus-visible {outline:2px solid currentColor;outline-offset:4px}
.menu-toggle .menu-mark {display:block;width:32px;height:auto;overflow:visible}
.menu-mark path {fill:none;stroke:currentColor;stroke-width:8;stroke-linecap:butt}
.menu-mark__top,.menu-mark__bottom {
  transform-box:view-box;
  transition:transform .48s cubic-bezier(.22,.61,.36,1);
}
.menu-mark__top {transform-origin:151.5px 40.5px}
.menu-mark__bottom {transform-origin:151.5px 235px}
.menu-mark__stem,.menu-mark__middle {
  transform-box:view-box;
  transition:opacity .25s ease,transform .4s cubic-bezier(.22,.61,.36,1);
}
.menu-mark__stem {transform-origin:5px 40.5px}
.menu-mark__middle {transform-origin:298px 137.5px}
.is-solid .menu-toggle,.menu-visible .menu-toggle {color:var(--ink)}
.menu-visible .menu-mark__top {transform:translateY(79.5px) rotate(45deg)}
.menu-visible .menu-mark__bottom {transform:translateY(-115px) rotate(-45deg)}
.menu-visible .menu-mark__stem {opacity:0;transform:scaleY(0)}
.menu-visible .menu-mark__middle {opacity:0;transform:scaleX(0)}
@media(prefers-reduced-motion:reduce) {
  .menu-mark__top,.menu-mark__bottom,.menu-mark__stem,.menu-mark__middle {transition:none}
}
.site-menu {
  position:fixed;
  inset:0;
  z-index:25;
  overflow:auto;
  background:linear-gradient(rgba(255,255,255,.93),rgba(255,255,255,.89)),url('/static/lab/image/pc_fv/pc_fv_1.jpg') center/cover
}
.site-menu[hidden] {
  display:none
}
.site-menu__inner {
  max-width:1050px;
  margin:0 auto;
  padding:110px 34px 50px
}
.site-menu__inner>p img {
  width:190px
}
.site-menu nav {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 50px;
  margin:30px 0
}
.site-menu nav a {
  text-decoration:none;
  font-family:'Inter',sans-serif;
  font-size:20px;
  letter-spacing:.15em
}
.site-menu nav small {
  display:inline-block;
  font-family:'Noto Sans JP',sans-serif;
  font-size:10px;
  letter-spacing:0
}
.site-menu__links {
  display:flex;
  gap:16px;
  flex-wrap:wrap
}
.pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:39px;
  padding:8px 25px;
  border:1px solid var(--brown);
  border-radius:24px;
  font-size:11px;
  line-height:1.35;
  text-decoration:none;
  letter-spacing:.06em
}
.pill small {
  display:block;
  font-size:8px;
  margin-left:8px
}
.pill--filled {
  background:var(--brown);
  color:white
}
.pill:hover,.more-link:hover {
  opacity:.7
}
.hero {
  position:relative;
  height:100svh;
  min-height:560px;
}
.hero__slides,.hero__slide,.hero__slide img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%
}
.hero__slide {
  opacity:0;
  transition:opacity 1.3s ease
}
.hero__slide.is-active {
  opacity:1
}
.hero__cta {
  position:absolute;
  right:3%;
  top:25px;
  width:180px;
  display:none
}
.section {
  max-width:1180px;
  margin:auto;
  padding:115px 40px 30px;
  scroll-margin-top:70px
}
.section-heading {
  display:flex;
  align-items:baseline;
  gap:12px;
  margin:0 0 30px;
  padding-left:1.5%
}
.section-heading h2 {
  font:normal 27px 'Inter',sans-serif;
  letter-spacing:.16em;
  margin:0
}
.section-heading span {
  font-size:10px
}
.about-grid {
  display:grid;
  grid-template-columns:48% 1fr;
  gap:8%;
  align-items:center
}
.about-grid__image {
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover
}
.about-grid__text {
  max-width:450px
}
.draw-title {
  font-size:19px;
  line-height:1.8;
  letter-spacing:.09em;
  font-weight:400;
  display:table;
  border-bottom:1px solid var(--brown);
  padding-bottom:6px;
  margin-bottom:4px
}
.en-caption {
  font:10px 'Inter',sans-serif;
  letter-spacing:.08em;
  margin-bottom:36px
}
.about-grid p:not(.en-caption),.yuyaku-info p:not(.en-caption) {
  line-height:2.4
}
.more-link {
  display:block;
  margin:22px 0 0 auto;
  width:35px;
  transition:opacity .2s
}
.more-link img {
  width:100%
}
.yuyaku-info {
  display:grid;
  grid-template-columns:1fr 44%;
  gap:6%;
  align-items:center;
  padding:70px 8% 0
}
.yuyaku-info>img {
  width:100%
}
.section--workshop {
  padding-top:135px
}
.workshop-grid {
  display:grid;
  grid-template-columns:50% 1fr;
  align-items:center;
  gap:8%
}
.workshop-grid>img {
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover
}
.workshop-grid>div {
  max-width:350px
}
.workshop-grid .pill {
  margin-top:25px
}
.service-track {
  display:flex;
  overflow:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  gap:8px
}
.service-track::-webkit-scrollbar {
  display:none
}
.service-track img {
  width:calc(33.333% - 6px);
  aspect-ratio:1.45;
  object-fit:cover;
  flex:none;
  scroll-snap-align:center
}
.service-caption {
  max-width:700px;
  margin:60px auto 0;
  font-size:12px
}
.section--news,.section--instagram,.section--shop {
  max-width:900px;
  padding-top:145px
}
.news-preview {
  padding:0;
  list-style:none;
  border-top:1px solid var(--line)
}
.news-preview li {
  border-bottom:1px solid var(--line)
}
.news-preview a {
  display:flex;
  gap:24px;
  align-items:baseline;
  text-decoration:none;
  padding:15px 8px
}
.news-preview a:hover {
  opacity:.65
}
.news-preview time {
  min-width:90px;
  font:11px 'Inter',sans-serif
}
.news-preview span {
  font-size:12px
}
.instagram-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}
.instagram-grid a {
  aspect-ratio:1;
  overflow:hidden
}
.instagram-grid img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s
}
.instagram-grid a:hover img {
  transform:scale(1.05)
}
.instagram-more {
  display:block;
  text-align:right;
  margin-top:18px;
  font-size:11px
}
.shop-details {
  display:grid;
  grid-template-columns:120px 1fr;
  gap:24px 25px;
  margin:45px 0 80px
}
.shop-details dt {
  font-weight:400
}
.shop-details small {
  font-size:10px
}
.shop-details dd {
  margin:0
}
.site-footer {
  text-align:center;
  padding:45px 20px 70px
}
.site-footer img {
  width:170px;
  margin:0 auto 10px
}
.site-footer small {
  font-size:9px
}
.loading {
  position:fixed;
  inset:0;
  z-index:100;
  background:#fff;
  display:grid;
  place-items:center;
  transition:opacity .55s,visibility .55s
}
.loading.is-done {
  opacity:0;
  visibility:hidden
}
.loading__mark {
  position:relative;
  width:80px;
  height:80px
}
.loading__mark img {
  position:absolute;
  inset:0;
  width:100%
}
.loading__mark img:nth-child(2) {
  animation:steam-left 1.6s ease-in-out infinite
}
.loading__mark img:nth-child(3) {
  animation:steam-center 1.6s ease-in-out .16s infinite
}
.loading__mark img:nth-child(4) {
  animation:steam-right 1.6s ease-in-out .32s infinite
}
@keyframes steam-left {
  50% {
    transform:translate(-4px,-8px);
    opacity:.55
  }
}
@keyframes steam-center {
  50% {
    transform:translateY(-11px);
    opacity:.55
  }
}
@keyframes steam-right {
  50% {
    transform:translate(4px,-8px);
    opacity:.55
  }
}
@media(max-width:700px) {
  body {
    font-size:12px
  }
  .site-nav {
    height:66px;
    padding:8px 14px
  }
  .site-nav__brand img {
    width:34px;
    height:34px
  }
  .nav-diagnosis {
    display:none
  }
  .menu-toggle {
    width:44px
  }
  .menu-toggle .menu-mark {
    width:29px
  }
  .hero__cta {
    display:block;
    top:auto;
    bottom:9%;
    left:50%;
    right:auto;
    width:195px;
    transform:translateX(-50%)
  }
  .site-menu__inner {
    padding:82px 22px 35px
  }
  .site-menu__inner>p img {
    width:160px
  }
  .site-menu nav {
    grid-template-columns:1fr;
    gap:9px;
    margin:20px 0
  }
  .site-menu nav a {
    font-size:17px
  }
  .site-menu nav small {
    font-size:9px
  }
  .section {
    padding:67px 22px 0
  }
  .section-heading {
    margin-bottom:19px;
    padding-left:0
  }
  .section-heading h2 {
    font-size:22px
  }
  .section-heading span {
    font-size:9px
  }
  .about-grid,.workshop-grid,.yuyaku-info {
    display:block
  }
  .about-grid__image {
    aspect-ratio:1.3
  }
  .about-grid__text {
    padding-top:20px
  }
  .draw-title {
    font-size:15px
  }
  .en-caption {
    font-size:9px;
    margin-bottom:22px
  }
  .about-grid p:not(.en-caption),.yuyaku-info p:not(.en-caption) {
    line-height:2.15
  }
  .more-link {
    width:30px;
    margin-top:10px
  }
  .yuyaku-info {
    padding:25px 0 0
  }
  .yuyaku-info>img {
    margin-top:30px
  }
  .workshop-grid>img {
    aspect-ratio:1.4
  }
  .workshop-grid>div {
    padding:22px 0 0
  }
  .service-track {
    margin:0 -22px;
    padding:0 17vw;
    gap:10px
  }
  .service-track img {
    width:66vw;
    aspect-ratio:1.1
  }
  .service-caption {
    margin:28px 0 0
  }
  .section--news,.section--instagram,.section--shop {
    padding-top:85px
  }
  .news-preview span {
    display:block
  }
  .instagram-grid {
    grid-template-columns:repeat(2,1fr);
    gap:7px
  }
  .shop-details dd {
    margin-bottom:18px
  }
  .site-footer {
    padding:45px 20px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    transition-duration:.01ms!important
  }
}
.news-preview .news-category {
  flex:0 0 90px;
  font-family:'Inter',sans-serif;
  font-size:11px
}
.news-preview .news-title {
  flex:1
}
@media(max-width:700px) {
  .news-preview time {
    grid-column:1
  }
  .news-preview .news-category {
    grid-column:2;
    font-size:10px
  }
}
/* 読み込み中にJavaScriptが止まってもトップを表示できるようにする */
.loading {
  animation:loading-fallback .01s linear 2.3s forwards
}
@keyframes loading-fallback {
  to {
    opacity:0;
    visibility:hidden;
    pointer-events:none
  }
}
/* The T and reversed L motifs used by the editorial headings. */
.t-heading {
  position:relative;
  padding-left:17px;
  margin-bottom:36px
}
.t-heading::before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  border-left:1px solid var(--brown)
}
.t-heading .draw-title {
  display:block;
  position:relative;
  width:100%;
  box-sizing:border-box;
  border:0;
  margin:0 0 5px;
  padding:0 0 7px
}
.t-heading .draw-title::after {
  content:"";
  position:absolute;
  left:-17px;
  right:0;
  bottom:0;
  border-bottom:1px solid var(--brown);
  transform-origin:left
}
.t-heading .en-caption {
  margin:0
}
.more-ending {
  position:relative;
  width:100%;
  padding-bottom:27px;
  margin-top:18px
}
.more-ending .more-link {
  margin:0 0 0 auto
}
.more-ending::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  border-bottom:1px solid var(--brown);
  transform-origin:right
}
.more-ending::after {
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  height:25px;
  border-right:1px solid var(--brown)
}
.motion-ready .t-heading .draw-title::after,.motion-ready .more-ending::before {
  transform:scaleX(0)
}
.motion-ready .t-heading.is-in-view .draw-title::after,.motion-ready .more-ending.is-in-view::before {
  transform:scaleX(1);
  transition:transform 1.15s cubic-bezier(.22,.65,.28,1) .16s
}
@media(max-width:700px) {
  .t-heading {
    margin-bottom:24px
  }
  .more-ending {
    padding-bottom:23px
  }
  .more-ending::after {
    height:21px
  }
}
@media(prefers-reduced-motion:reduce) {
  .motion-ready .t-heading .draw-title::after,.motion-ready .more-ending::before {
    transform:scaleX(1)!important;
    transition:none!important
  }
}
/* Keep the opening photograph in place while the About heading enters over it. */
.hero {
  position:sticky;
  top:0;
  z-index:0
}
.section {
  position:relative;
  z-index:1;
  isolation:isolate
}
.section::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:var(--paper)
}
.section--about {
  padding-top:155px
}
.section--about>.section-heading {
  top:29px;
  left:40px;
  right:40px;
}
@media(max-width:700px) {
  .section--about>.section-heading {
    top:23px;
    left:25px;
    right:25px
  }
}
/* The About panel begins white at its heading, while the hero remains behind it. */
.section--about {
  padding-top:115px
}
.section--about::before {
  top:0
}
.section--about>.section-heading {
  position:static;
  color:var(--ink);
  margin:0 0 30px
}
.section--about>.section-heading h2,.section--about>.section-heading span {
  color:var(--ink)
}
@media(max-width:700px) {
  .section--about {
    padding-top:85px
  }
  .section--about::before {
    top:0
  }
  .section--about>.section-heading {
    position:static;
    margin:0 0 22px
  }
  .service-track.is-continuous {
    scroll-snap-type:none;
    overflow-x:auto;
    overscroll-behavior-x:contain
  }
  .service-track.is-continuous img {
    scroll-snap-align:none;
    width:72vw;
    aspect-ratio:.9;
    object-fit:cover
  }
}
/* English paragraphs below the Japanese copy, matching the design PDF. */
.about-grid__text .english-description,.yuyaku-info .english-description,.workshop-grid .english-description,.section--service .english-description,.subpage .english-description {
  font:normal 12px/1.75 'Inter',sans-serif;
  letter-spacing:.015em;
  color:var(--ink);
  margin:22px 0 0
}
.section--service .english-description {
  max-width:700px;
  margin:16px auto 0
}
.subpage .english-description {
  font-size:12px;
  line-height:1.8
}
@media(max-width:700px) {
  .about-grid__text .english-description,.yuyaku-info .english-description,.workshop-grid .english-description,.section--service .english-description,.subpage .english-description {
    font-size:10px;
    line-height:1.8;
    margin-top:18px
  }
}
/* Final layout adjustments from the desktop and mobile design sheets. */
.t-heading {
  --title-line:calc(19px * 1.8 + 7px)
}
.t-heading::before {
  bottom:auto;
  height:calc(2 * var(--title-line))
}
.yuyaku-info .more-ending--yuyaku::before,.yuyaku-info .more-ending--yuyaku::after {
  display:none
}
.yuyaku-info .more-ending--yuyaku {
  padding-bottom:0;
  margin-bottom:12px
}
.yuyaku-ending {
  grid-column:1/-1;
  position:relative;
  margin-top:30px;
  height:26px;
  border-bottom:1px solid var(--brown)
}
.yuyaku-ending::after {
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  height:25px;
  border-right:1px solid var(--brown)
}
.graphic-link {
  display:block;
  width:max-content;
  max-width:100%;
  margin-top:18px
}
.graphic-link img {
  display:block;
  width:100%;
  height:auto
}
.graphic-link--diagnosis {
  width:178px
}
.graphic-link--workshop {
  width:235px
}
.graphic-link:hover {
  opacity:.75
}
.site-nav--subpage {
  background:#fff
}
.site-nav--subpage .off-hero,.site-nav--subpage.is-solid .off-hero {
  display:block!important
}
.site-nav--subpage .menu-toggle {
  color:var(--brown)
}
.site-nav--subpage.is-hidden {
  transform:none
}
.site-footer--subpage {
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:32px;
  padding:70px 20px
}
.site-footer--subpage .footer-top {
  font-size:12px;
  letter-spacing:.16em;
  text-decoration:none;
  border-bottom:1px solid var(--brown);
  padding-bottom:8px
}
.site-footer--subpage img {
  display:block;
  width:160px;
  margin:0
}
.subpage__row--intro {
  align-items:center
}
.subpage__row--intro .t-heading {
  margin-bottom:25px
}
.hero {
  background:#e5cbb9
}
@media(max-width:700px) {
  .t-heading {
    --title-line:calc(15px * 1.8 + 7px)
  }
  .graphic-link--diagnosis {
    width:188px
  }
  .graphic-link--workshop {
    width:225px
  }
  .yuyaku-info {
    display:flex;
    flex-direction:column;
    align-items:stretch
  }
  .yuyaku-info>img {
    order:2
  }
  .yuyaku-info .yuyaku-ending {
    width:100%
  }
  .subpage__row--intro {
    display:flex;
    flex-direction:column
  }
  .subpage__row--intro>img {
    width:100%
  }
}
/* Full-width hero: align at the upper left and trim only its bottom if needed. */
.hero {
  height:min(100svh,70.15625vw);
  min-height:0;
  overflow:hidden;
  background:#fff
}
.hero__slide {
  overflow:hidden;
  background:#fff
}
.hero__slide img {
  display:block;
  top:0;
  left:0;
  right:auto;
  bottom:auto;
  width:100%;
  height:auto;
  max-width:none;
  object-fit:fill;
  object-position:left top
}
/* The closing L keeps its vertical cap visible as the line grows right to left. */
.l-ending {
  position:relative;
  width:45%;
  height:30px;
  margin:35px 0 60px auto
}
.l-ending::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  border-bottom:1px solid var(--brown);
  transform-origin:right
}
.l-ending::after {
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  height:27px;
  border-right:1px solid var(--brown)
}
.motion-ready .l-ending::before {
  transform:scaleX(0)
}
.motion-ready .l-ending.is-in-view::before {
  transform:scaleX(1);
  transition:transform 1.15s cubic-bezier(.22,.65,.28,1) .16s
}
.yuyaku-info .yuyaku-ending {
  grid-column:1/-1;
  margin:34px 0 0 auto
}
.yuyaku-info .yuyaku-ending::before {
  border-bottom:1px solid var(--brown)
}
.subpage .subpage__product-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 42%;
  gap:7%;
  align-items:center;
  margin:55px auto 25px
}
.subpage .subpage__intro {
  margin:0;
  max-width:none
}
.subpage .subpage__product-image {
  display:block;
  width:100%;
  height:auto
}
.subpage .t-heading--steps {
  max-width:680px;
  margin:90px 0 30px
}
.subpage .steps {
  margin-top:25px
}
.subpage .l-ending {
  margin-top:40px
}
.shop-details small {
  line-height:1.8
}
@media(max-width:700px) {
  .hero {
    height:min(100svh,175vw);
    min-height:0
  }
  .hero__slide img {
    width:100%;
    height:auto;
    object-fit:fill;
    object-position:left top
  }
  .l-ending {
    width:100%;
    height:24px;
    margin:26px 0 42px
  }
  .l-ending::after {
    height:22px
  }
  .yuyaku-info .yuyaku-ending {
    order:3;
    margin:25px 0 0
  }
  .subpage .subpage__product-grid {
    display:block;
    margin:38px auto 20px
  }
  .subpage .subpage__product-image {
    margin:35px auto 0
  }
  .subpage .t-heading--steps {
    margin:70px 0 22px
  }
  .shop-details {
    grid-template-columns:74px minmax(0,1fr);
    gap:22px 8px;
    margin:28px 0 50px
  }
  .shop-details dd {
    margin:0
  }
  .shop-details dt {
    font-size:11px
  }
  .shop-details small {
    font-size:9px
  }
}
@media(prefers-reduced-motion:reduce) {
  .motion-ready .l-ending::before {
    transform:scaleX(1)!important;
    transition:none!important
  }
}
.yuyaku-info .yuyaku-ending {
  border-bottom:0
}
/* YUYAKU's full-bleed photograph stays in place as its white copy panel rises. */
.section--yuyaku .yuyaku-fixed-photo {
  display:block;
  position:sticky;
  top:0;
  z-index:0;
  width:100vw;
  height:100svh;
  min-height:520px;
  margin:0 0 0 calc(50% - 50vw);
  background:#d8c7b3 url('/static/lab/image/yuyaku_1_pc.jpg') center center / cover no-repeat
}
.section--yuyaku .yuyaku-info {
  position:relative;
  z-index:1;
  isolation:isolate;
  padding-bottom:70px;
  background:#fff
}
.section--yuyaku .yuyaku-info::before {
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:0;
  bottom:0;
  width:100vw;
  transform:translateX(-50%);
  background:#fff
}
@media(max-width:700px) {
  .section--yuyaku .yuyaku-fixed-photo {
    min-height:0;
    background-image:url('/static/lab/image/yuyaku_1_sp.jpg');
    background-position:center center
  }
  .section--yuyaku .yuyaku-info {
    padding-bottom:48px
  }
}
@media(prefers-reduced-motion:reduce) {
  .section--yuyaku .yuyaku-fixed-photo {
    position:relative
  }
}
/* News dates use the PDF's light sans face; mobile metadata sits immediately above the title. */
.news-preview time,.news-preview .news-category {
  font-family:'Noto Sans JP','Yu Gothic',sans-serif;
  font-weight:300;
  letter-spacing:.03em
}
@media(max-width:700px) {
  .news-preview a {
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    column-gap:9px;
    row-gap:0;
    padding:10px 2px
  }
  .news-preview time {
    display:block;
    min-width:0;
    margin:0;
    line-height:1.25
  }
  .news-preview .news-category {
    display:block;
    margin:0;
    line-height:1.25
  }
  .news-preview .news-title {
    display:block;
    grid-column:1/-1;
    margin:1px 0 0;
    line-height:1.45
  }
}

/* 店舗営業カレンダー */
.section--calendar {
  max-width:900px;
  margin:0 auto;
  padding:64px clamp(18px,5vw,55px) 95px
}
.store-calendar {
  max-width:650px;
  margin:32px auto 0;
  color:var(--ink)
}
.store-calendar__heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:22px
}
.store-calendar__heading strong {
  font-size:42px;
  font-weight:300;
  line-height:1
}
.store-calendar__heading span {
  margin-left:8px;
  font-size:15px
}
.store-calendar__heading small {
  display:block;
  font-size:11px;
  line-height:1.5
}
.store-calendar__controls {
  display:flex;
  gap:8px
}
.store-calendar__controls button {
  border:1px solid #cdb9aa;
  background:transparent;
  color:inherit;
  width:34px;
  height:34px;
  font-size:25px;
  line-height:1
}
.store-calendar table {
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  text-align:left;
  font-weight:300
}
.store-calendar th {
  font-weight:300;
  border-bottom:1px solid #bda494;
  padding:4px 8px
}
.store-calendar td {
  height:80px;
  vertical-align:top;
  border-bottom:1px dashed #d9c9bc;
  padding:4px 8px
}
.store-calendar th+th,.store-calendar td+td {
  border-left:1px solid #d9c9bc
}
.store-calendar__date {
  display:block;
  font-size:15px
}
.store-calendar__marks {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  margin-top:13px
}
.store-calendar__status,.store-calendar__legend i {
  display:inline-block;
  width:8px;
  height:8px;
  border:1px solid #a99587
}
.store-calendar__status.is-closed,.store-calendar__legend i.is-closed {
  border-color:#d77d4f;
  background:#d77d4f
}
.store-calendar__workshop,.store-calendar__legend b {
  font-size:13px;
  color:#a07a54;
  line-height:1
}
.store-calendar__legend {
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:12px;
  margin-top:14px;
  font-size:11px
}
.store-calendar__legend span {
  display:inline-flex;
  align-items:center;
  gap:4px
}
@media(max-width:600px) {
  .section--calendar {
    padding:50px 18px 70px
  }
  .store-calendar td {
    height:65px;
    padding:3px 5px
  }
  .store-calendar th {
    padding:3px 5px
  }
  .store-calendar__marks {
    margin-top:8px
  }
  .store-calendar__heading strong {
    font-size:34px
  }
}
@media (max-width: 700px) {
  .section--shop {
    padding-bottom: 50px;
  }

  .shop-details {
    margin-bottom: 0;
  }
}
.about-grid,
.yuyaku-info,
.workshop-grid {
  align-items: start;
}
.about-grid__text .draw-title,
.yuyaku-info .draw-title,
.workshop-grid > div > p:first-child {
  margin-top: 0;
}
@media (min-width: 701px) {
  .subpage .subpage__row,
  .subpage .subpage__row--intro,
  .subpage .subpage__product-grid {
    align-items: start;
  }
  .subpage .subpage__row > div > p:first-child {
    margin-top: 0;
  }
}

.calendar-note{display:block;font-size:10px;line-height:1.5;overflow-wrap:anywhere}

/* 2026-10-14: supplied revision sheet */
:root { --english-font: 'Inter', Arial, sans-serif; }
.section-heading h2, .site-menu nav a, .en-caption, .english-description,
.subpage > h1, .news-preview time, .news-preview .news-category,
.shop-details small, .store-calendar__heading { font-family:var(--english-font) !important; font-weight:300; font-optical-sizing:none; font-variation-settings:"opsz" 24; }
.section p:not(.en-caption), .subpage p:not(.en-caption), .news-detail p { text-align:justify; text-align-last:left; overflow-wrap:break-word; }
.instagram-grid a { aspect-ratio:3/4; }
.instagram-more { width:38px; margin:22px 0 0 auto; }
.shop-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:55px; align-items:start; }
.section--shop { max-width:1160px; padding-bottom:70px; }
.shop-layout .shop-details { grid-template-columns:85px minmax(0,1fr); margin:0; gap:22px 14px; }
.shop-layout .store-calendar { margin:0; max-width:none; }
.shop-layout .store-calendar td { height:62px; }
.site-menu__links .graphic-link { margin-top:0; }
.subpage .subpage__row { align-items:start; gap:7%; margin:55px 0 80px; }
.subpage .subpage__row img { height:auto; }
.subpage .subpage__row p { line-height:2.2; }
.subpage .subpage__row .english-description { line-height:1.8; }
.subpage .subpage__row .l-ending { margin:24px 0 0 auto; width:60%; }
.about-yunohana { max-width:700px; margin:0 auto 65px; }
.about-yunohana > img { width:100%; height:auto; margin-bottom:30px; }
.about-yunohana > h2 { font-size:17px; font-weight:300; }
@media(max-width:700px) {
  .section { padding-left:44px; padding-right:44px; }
  .subpage { padding-left:44px; padding-right:44px; }
  .t-heading { padding-left:0; }
  .t-heading::before { left:-10px; height:30px; top:-10px; }
  .t-heading .draw-title::after { left:-10px; }
  .more-ending { width:65%; margin-left:auto; }
  .more-ending::before { right:-10px; }
  .more-ending::after { right:-10px; height:18px; }
  .l-ending, .subpage .subpage__row .l-ending { width:65%; margin-left:auto; }
  .l-ending::before { right:-10px; }
  .l-ending::after { right:-10px; height:18px; }
  .yuyaku-info .yuyaku-ending { width:65%; margin-left:auto; }
  .service-track { margin:0; padding:0; }
  .service-track img, .service-track.is-continuous img { width:100%; }
  .shop-layout { display:block; }
  .shop-layout .shop-details { grid-template-columns:68px minmax(0,1fr); gap:22px 8px; }
  .shop-layout #store-calendar { margin-top:60px; }
  .shop-layout .store-calendar td { height:55px; padding:3px; }
  .store-calendar th { padding:3px; }
  .store-calendar__legend { font-size:9px; gap:8px; }
  .store-calendar__heading span { font-size:12px; }
  .subpage .subpage__row { display:flex; flex-direction:column; gap:0; margin:30px 0 60px; }
  .subpage .subpage__row > img { margin:0 0 25px; }
  .about-philosophy > img { order:-1; }
  .about-yunohana > h2 { font-size:15px; }
  .section-heading { flex-wrap:wrap; }
}

/* Fine adjustments: align the calendar to the Shop title and center the T stem on its rule. */
@media(min-width:701px) {
  .shop-layout { column-gap:55px; row-gap:30px; }
  .shop-layout > .section-heading { grid-column:1; grid-row:1; margin:0; }
  .shop-layout > .shop-details { grid-column:1; grid-row:2; }
  .shop-layout > #store-calendar { grid-column:2; grid-row:1 / span 2; }
}
@media(max-width:700px) {
  .t-heading::before { display:none; }
  .t-heading .draw-title::before {
    content:""; position:absolute; left:-10px; bottom:-18px;
    height:36px; border-left:1px solid var(--brown);
  }
  .site-menu__links .graphic-link--diagnosis { width:225px; }
}

/* Text versions of the public navigation and content buttons. */
.nav-diagnosis {width:180px}
.site-text-pill {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  aspect-ratio:1825 / 446;
  border:1px solid currentColor;
  border-radius:999px;
  font-size:clamp(10px,1.5vw,14px);
  line-height:1.3;
  letter-spacing:.13em;
  white-space:nowrap;
}
.site-text-pill small {display:block;font-size:.77em;letter-spacing:.13em}
.site-text-pill.off-hero {color:var(--brown)}
.site-text-pill.on-hero {color:#fff}
.is-solid .site-text-pill.off-hero,.menu-visible .site-text-pill.off-hero {display:flex!important}
.site-text-pill.filled {background:var(--brown);border-color:var(--brown);color:#fff}
.site-text-pill.mini {aspect-ratio:1200 / 438}
.site-text-more {
  display:grid;
  gap:5px;
  justify-items:center;
  color:var(--brown);
  font-size:12px;
  letter-spacing:.12em;
}
.site-text-more span:first-child {
  display:grid;
  place-items:center;
  width:100%;
  aspect-ratio:1;
  border:1px solid currentColor;
  border-radius:42%;
  font-size:24px;
  line-height:1;
  letter-spacing:0;
}
.shop-details .site-map-pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:8px;
  width:87px;
  aspect-ratio:261 / 99;
  border:1px solid var(--brown);
  border-radius:999px;
  background:#fff;
  color:var(--brown);
  font-size:17px;
  letter-spacing:.13em;
  text-decoration:none;
}
@media (max-width:767px) {
  .shop-details .site-map-pill {width:107px;aspect-ratio:321 / 121;background:var(--brown);color:#fff}
}
.hero__cta .site-text-pill {color:#fff}

/* Live text and the original photographs on the YUYAKU step cards. */
.step {container-type:inline-size;display:flex;min-width:0}
.step-card {
  width:100%;
  padding:10cqi 11.3cqi 11cqi;
  background:#edeff0;
  color:#643719;
  clip-path:polygon(0 0,100% 0,100% 89cqi,96.7% 91.4cqi,100% 93.8cqi,100% 100%,0 100%,0 93.8cqi,3.3% 91.4cqi,0 89cqi);
}
.step-card p,.step-card h3 {margin:0;font-weight:400}
.step-card .step-card__number {font-size:7.4cqi;letter-spacing:.14em;line-height:1.2;margin-bottom:7.2cqi;font-weight:300}
.step-card__photo {display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.step-card__heading {position:relative;margin-top:13.4cqi}
.step-card__heading::before {
  content:"";
  position:absolute;
  left:-3.7cqi;
  top:3cqi;
  bottom:1cqi;
  border-left:1px dashed currentColor;
}
.step-card__heading h3 {
  position:relative;
  font-size:5.3cqi;
  line-height:1.4;
  letter-spacing:.13em;
  padding-bottom:2.4cqi;
}
.step-card__heading h3::after {
  content:"";
  position:absolute;
  left:-3.7cqi;
  right:0;
  bottom:0;
  height:1px;
  background:repeating-linear-gradient(90deg,currentColor 0 2.3%,transparent 2.3% 4.6%);
}
.step-card__heading p {padding-top:2cqi;font-size:4cqi;line-height:1.3}
.step-card .step-card__ja {
  margin-top:7cqi;
  min-height:45.5cqi;
  font-size:max(11px,4.5cqi);
  line-height:1.9;
  overflow-wrap:anywhere;
}
.step-card__ja small {display:block;margin-top:1cqi;font-size:.7em}
.step-card .step-card__en {font-size:max(10px,4cqi);line-height:1.43;letter-spacing:.035em;overflow-wrap:anywhere}

.site-text-more {gap:7px;font-size:11px}
.site-text-more span:first-child {font-size:0;position:relative}
.site-text-more span:first-child::before,.site-text-more span:first-child::after {
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:40%;
  height:1px;
  background:currentColor;
  transform:translate(-50%,-50%);
}
.site-text-more span:first-child::after {transform:translate(-50%,-50%) rotate(90deg)}

/* Button links retain the typography of their original artwork. */
a:is(.nav-diagnosis,.hero__cta,.graphic-link,.more-link,.site-map-pill):any-link {
  text-decoration:none;
}

.t-heading {--title-rule-left:-17px}
.t-heading::before {display:none}
.t-heading .draw-title::before {
  content:"";
  position:absolute;
  left:var(--title-rule-left);
  bottom:-18px;
  height:36px;
  border-left:1px solid var(--brown);
}
.t-heading .draw-title::after {
  left:var(--title-rule-left);
  right:auto;
  width:calc(var(--title-text-width,100%) + 1em - var(--title-rule-left));
}
.l-ending::after,.more-ending::after {height:18px}
@media(max-width:700px) {
  .t-heading {--title-rule-left:-10px}
}