@charset "UTF-8";

:root {
  --color-bg: #fff;
  --color-text: #4d4d4d;
  --color-menu-bg: #4d4d4d;
  --color-menu-fg: #fff;
  --color-line: #fff;
  --color-hero-solid: #5b5956;
  --color-panel: #d6d6d6;
  --color-section-bg: #eeede6;
  --color-cta-contact: #00669c;
  --color-cta-shop: #bcbcbc;

  --font-body: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  --font-display: "Zen Old Mincho", "Shippori Mincho B1", "Hiragino Mincho ProN", serif;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-base: 16px;
  --lh-base: 1.9;
  --ls-base: .04em;

  --container-max: 1280px;
  --container-pad: clamp(24px, 3.125vw, 40px);
  --mid-measure: 34.375rem;

  --header-h: 110px;
  --header-pad-x: 47px;
  --header-fg: #fff;
  --header-logo-w: 216.69px;
  --hamburger-w: 65px;
  --hamburger-bar: 2.13px;
  --hamburger-gap: 10px;

  --dur-menu: .32s;
  --dur-fade: .8s;
  --ease-out: cubic-bezier(.22, .61, .36, 1);

  --menu-scroll-comp: 0px;
}

/* ==== RESET ==== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  color: var(--color-text);
  background-color: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: 1.55;
  margin: 0;
}

p, ul, ol, dl, figure {
  margin: 0;
}

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

img,
svg {
  max-width: 100%;
  vertical-align: middle;
}

img {
  height: auto;
}

button {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity .3s var(--ease-out);
}

a:hover {
  opacity: .7;
}

.is-disabled {
  cursor: default;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

[id]:target {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  padding: 12px 20px;
  color: var(--color-menu-fg);
  background: var(--color-menu-bg);
  transform: translateY(-120%);
  transition: transform .2s var(--ease-out);
}

.skip-link:focus-visible {
  transform: none;
}

.site-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.site-container-full {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}

.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-fade) ease, transform var(--dur-fade) ease;
}

.fade-up.is-visible {
  opacity: 1;
  transform: none;
}

/* サムネイルの切り抜き。枠は --thumb-ar で比率を決め、
   中の画像は --img-w / --img-l / --img-t でトリミング位置を指定する。 */
.material-sec__thumb,
.product-sec__thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--thumb-ar);
}

.material-sec__thumb img,
.product-sec__thumb img {
  position: absolute;
  left: var(--img-l);
  top: var(--img-t);
  width: var(--img-w);
  max-width: none;
  height: auto;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: var(--menu-scroll-comp);
  z-index: 1000;
  pointer-events: none;
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: var(--header-h);
  padding-inline: var(--header-pad-x);
}

.header-logo {
  grid-column: 2;
  display: block;
  width: var(--header-logo-w);
  pointer-events: auto;
  color: var(--header-fg);
}

.header-logo img {
  display: block;
  width: 100%;
}

.menu-toggle {
  grid-column: 3;
  justify-self: end;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--hamburger-w);
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--header-fg);
  cursor: pointer;
}

.menu-toggle-bars {
  display: flex;
  flex-direction: column;
  gap: calc(var(--hamburger-gap) - var(--hamburger-bar));
  width: 100%;
}

.menu-toggle-bars span {
  display: block;
  flex: 0 0 auto;
  height: var(--hamburger-bar);
  background-color: currentColor;
}

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  overflow-y: auto;
  overscroll-behavior: contain;
  container-type: inline-size;
  background-color: var(--color-menu-bg);
  color: var(--color-menu-fg);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-menu) var(--ease-out),
    visibility 0s linear var(--dur-menu);
}

.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.menu-close {
  position: absolute;
  top: 39.5px;
  right: 46.5px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66.5px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-menu-fg);
  cursor: pointer;
}

.menu-close img {
  display: block;
  width: 66.5px;
  height: 22px;
}

.menu-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100%;
  padding-inline: 24px;
  text-align: center;
}

.menu-inner::before,
.menu-inner::after {
  content: "";
  display: block;
  flex-shrink: 1;
  flex-basis: 0;
}

.menu-inner::before {
  flex-grow: 236.48;
  min-height: 56px;
}

.menu-inner::after {
  flex-grow: 227.75;
  min-height: 48px;
}

.menu-logo {
  display: block;
  width: min(585px, 45.703125cqw);
  transform: translateX(max(-1.98px, -.1546875cqw));
}

.menu-tagline {
  display: block;
  width: min(406px, 31.71875cqw);
  margin-top: min(17.32px, 1.353125cqw);
  transform: translateX(min(.43px, .03359375cqw));
}

.menu-nav {
  --menu-nav-fs: clamp(15px, 1.484375cqw, 19px);
  width: 100%;
  margin-top: min(68.06px, 5.3171875cqw);
}

.menu-list {
  display: flex;
  justify-content: center;
  gap: 1.92em;
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--menu-nav-fs);
  line-height: 1.4210526;
  letter-spacing: -.04em;
  white-space: nowrap;
}

.menu-rule {
  width: min(100%, calc(var(--menu-nav-fs) * 33.5274));
  height: 1.42px;
  margin: calc(var(--menu-nav-fs) * 2.0226) auto 0;
  padding: 0;
  border: 0;
  background-color: var(--color-line);
}

.menu-list-secondary {
  margin-top: calc(var(--menu-nav-fs) * 2.3442);
}

body.is-menu-open {
  overflow: hidden;
  padding-right: var(--menu-scroll-comp);
}

.site-footer {
  background-color: var(--color-menu-bg);
  color: var(--color-menu-fg);
}

@media screen and (max-width: 767px) {
  :root {
    --header-h: 65.75px;
    --header-pad-x: 19.82px;
    --header-logo-w: 146.60px;
    --hamburger-w: 44.68px;
    --hamburger-bar: 1.46px;
    --hamburger-gap: 6.87px;
    --container-pad: 10%;
    --fs-base: 14px;
  }

  .menu-close {
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
  }

  .menu-close img {
    width: 44px;
    height: 14.6px;
  }

  .menu-inner {
    padding-inline: 20px;
  }

  .menu-inner::before { min-height: 68px; }
  .menu-inner::after { min-height: 40px; }

  .menu-logo {
    width: min(585px, 78cqw);
    transform: none;
  }

  .menu-tagline {
    width: min(406px, 70cqw);
    margin-top: 14px;
    transform: none;
  }

  .menu-nav {
    --menu-nav-fs: clamp(15px, 4.8cqw, 19px);
    margin-top: 40px;
  }

  .menu-list {
    flex-direction: column;
    gap: 1.35em;
  }

  .menu-rule {
    width: min(637.02px, 70cqw);
    margin-top: 28px;
  }

  .menu-list-secondary {
    margin-top: 32px;
  }
}

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

  .fade-up,
  .fade-up.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .menu-overlay,
  .skip-link,
  a {
    transition: none;
  }
}

/* ==== SECTION STYLES (appended below) ==== */

.hero-sec {
  position: relative;
  background-color: var(--color-hero-solid);
  overflow-x: clip;
}

.hero-sec__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  height: 154.3617%;
  overflow: hidden;
}

.hero-sec__bg img {
  position: absolute;
  top: 0;
  left: -3.2578125%;
  width: 106.25%;
  max-width: none;
  height: auto;
  transform: translateY(-28.872549%);
}

.hero-sec__stage {
  position: relative;
  aspect-ratio: 1280 / 940;
}

.hero-sec__doodles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  line-height: 0;
}

.hero-sec__doodles img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-sec__figure {
  position: absolute;
  top: 26.378723%;
  left: 22.578906%;
  width: 69.221875%;
}

.hero-sec__figure img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

.hero-sec__scroll {
  position: absolute;
  top: 63.052128%;
  left: 96.4453125%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  color: #fff;
}

.hero-sec__scroll-label {
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
}

.hero-sec__scroll::before {
  content: "";
  order: 1;
  width: 1px;
  height: 89.48px;
  margin-top: 7.31px;
  background-color: currentColor;
}

.hero-sec__scroll::after {
  content: "";
  order: 2;
  width: 7.52px;
  height: 7.52px;
  border-radius: 50%;
  background-color: currentColor;
}

@media screen and (max-width: 767px) {
  .hero-sec {
    background-color: var(--color-hero-solid);
  }

  .hero-sec__bg {
    height: 258.5714%;
  }

  .hero-sec__bg img {
    left: -36.101333%;
    width: 170.666667%;
    transform: translateY(-25.329167%);
  }

  .hero-sec__stage {
    aspect-ratio: 375 / 490;
  }

  .hero-sec__figure {
    top: 31.27551%;
    left: 5.669333%;
    width: 111.2%;
  }

  .hero-sec__scroll {
    display: none;
  }
}

.statement-sec {
  background-color: var(--color-hero-solid);
  padding-top: 14.99px;
  padding-bottom: 43.15px;
  color: #fff;
  text-align: center;
}

.statement-sec__inner {
  position: relative;
}

.statement-sec__logo img {
  display: block;
  width: 74.3333%;
  margin-inline: auto;
}

.statement-sec__lead {
  margin-top: 32.87px;
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 36.53px;
  line-height: 1;
  letter-spacing: -.04em;
}

.statement-sec__body {
  margin-top: 47.24px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 18px;
  line-height: 27.52px;
  letter-spacing: 0;
}

.statement-sec__body p + p {
  margin-top: 27.52px;
}

.statement-sec__yaku {
  letter-spacing: -.5em;
}

.statement-sec__lead .statement-sec__yaku {
  letter-spacing: -.54em;
}

.statement-sec__yaku--sp-only {
  letter-spacing: normal;
}

.statement-sec__lat {
  margin-right: .25em;
}

.statement-sec__br-sp {
  display: none;
}

@media screen and (max-width: 767px) {
  .statement-sec {
    background-color: var(--color-hero-solid);
    padding-top: 10.4px;
    padding-bottom: 33.14px;
  }

  .statement-sec__logo img {
    width: 100%;
  }

  .statement-sec__lead {
    margin-top: 10.33px;
    font-size: 16px;
  }

  .statement-sec__body {
    margin-top: 64.96px;
    margin-inline: -8px;
    font-size: 15px;
    line-height: 23.84px;
  }

  .statement-sec__body p + p {
    margin-top: 23.84px;
  }

  .statement-sec__yaku--sp-only {
    letter-spacing: -.5em;
  }

  .statement-sec__br-sp {
    display: inline;
  }
}

/* 中間幅では版面を広げ、狭い画面向けの改行を無効化する */
@media screen and (min-width: 481px) and (max-width: 767px) {
  .statement-sec__body {
    max-width: var(--mid-measure);
    margin-inline: auto;
  }

  .statement-sec__body br {
    display: none;
  }
}

.material-sec {
  background: linear-gradient(var(--color-hero-solid) 0 420px, var(--color-bg) 420px);
  padding: 42px var(--container-pad) 10px;
}

.material-sec__panel {
  max-width: calc(var(--container-max) - var(--container-pad) * 2);
  margin-inline: auto;
  padding: 77px 18px 36.52px;
  border-radius: 80px 80px 0 0;
  background-color: var(--color-panel);
}

.material-sec__head {
  display: flex;
  align-items: flex-end;
  gap: 32.68px;
  margin-inline: 32px;
}

.material-sec__title {
  flex: none;
}

.material-sec__title img {
  display: block;
  width: 357px;
}

.material-sec__lead {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 16px;
  line-height: 23.46px;
  letter-spacing: 0;
  color: var(--color-text);
}

.material-sec__brand {
  margin-right: .25em;
}

.material-sec__yaku {
  letter-spacing: -.5em;
}

.material-sec__carousel {
  display: flex;
  gap: 12px;
  margin-top: 37px;
}

.material-sec__nav {
  flex: none;
  align-self: flex-start;
  margin-top: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgb(255 255 255 / .7);
  color: var(--color-text);
  cursor: pointer;
}

.material-sec__chevron {
  width: 7.38px;
  height: 10.6px;
}

.material-sec__viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.material-sec__viewport::-webkit-scrollbar {
  display: none;
}

.material-sec__track {
  display: flex;
  gap: 12px;
}

.material-sec__card {
  flex: 0 0 173.33px;
}

.material-sec__thumb {
  --thumb-ar: 4 / 3;
}

.material-sec__thumb--moringa   { --img-w: 113.8695%; --img-l: -5.5386%; --img-t: -5.3154%; }
.material-sec__thumb--dashigara { --img-w: 115.2388%; --img-l: -7.604%;  --img-t: -6.0615%; }
.material-sec__thumb--flower    { --img-w: 109.8944%; --img-l: -4.9386%; --img-t: -4.2462%; }
.material-sec__thumb--coffee    { --img-w: 104.6732%; --img-l: -2.377%;  --img-t: -2.1%; }
.material-sec__thumb--kinsho    { --img-w: 104.5289%; --img-l: -2.2731%; --img-t: -2.0462%; }
.material-sec__thumb--wood      { --img-w: 104.477%;  --img-l: -2.2616%; --img-t: -2.0846%; }

.material-sec__label {
  margin-top: 4.73px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: center;
  color: var(--color-text);
}

@media screen and (max-width: 767px) {
  .material-sec {
    background: var(--color-hero-solid);
    padding: 0;
  }

  .material-sec__panel {
    max-width: none;
    padding: 30.16px 0 20.35px;
    border-radius: 36.19px 36.19px 0 0;
  }

  .material-sec__head {
    display: block;
    margin-inline: 0;
    text-align: center;
  }

  .material-sec__title img {
    width: clamp(152.16px, 40.576%, 357px);
    margin-inline: auto;
  }

  .material-sec__lead {
    margin-top: 12.73px;
    font-size: 14px;
    line-height: 20px;
  }

  .material-sec__lead-line {
    display: block;
  }

  .material-sec__carousel {
    display: block;
    margin-top: 21.14px;
  }

  .material-sec__nav,
  [data-carousel-clone] {
    display: none;
  }

  .material-sec__viewport {
    overflow: visible;
    padding-inline: 9.6587% 10.424%;
  }

  .material-sec__track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 6.61px;
    row-gap: 10.54px;
  }

  .material-sec__label {
    margin-top: .81px;
    font-size: 13px;
  }

  /* SPは3列グリッド。2行目以降(4枚目以降)のラベルだけ余白を変える。
     JSが挿入する複製カードには data-carousel-item が無いため、
     :nth-child ではなく兄弟結合子の連結で元のカードだけを数えている。 */
  [data-carousel-item] ~ [data-carousel-item] ~ [data-carousel-item] ~ [data-carousel-item] .material-sec__label {
    margin-top: 2.93px;
  }
}

/* 中間幅ではリード文を1行に戻す */
@media screen and (min-width: 481px) and (max-width: 767px) {
  .material-sec__lead-line {
    display: inline;
  }
}

.concept-sec {
  position: relative;
  padding: 120.99px 0 4.9px;
  background-image: linear-gradient(var(--color-bg) 0 252px,
                                    var(--color-section-bg) 252px 1432px,
                                    var(--color-bg) 1432px);
}

.concept-sec__decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.concept-sec__waves {
  position: absolute;
  left: 0;
  top: 74px;
  width: 100%;
  height: 1161px;
}

.concept-sec__deco {
  position: absolute;
  max-width: none;
}

.concept-sec__deco--bird       { left: 68.3266%; top: 270.93px; width: 229.44px; }
.concept-sec__deco--star-blue  { left: 13.9484%; top: 597.02px; width: 174.84px; }
.concept-sec__deco--star-pink  { left: 63.1727%; top: 892.92px; width: 198.38px; }

.concept-sec__inner {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.concept-sec__list {
  text-align: center;
}

.concept-sec__title img {
  display: block;
  margin-inline: auto;
}

.concept-sec__item:nth-child(1) .concept-sec__title img { width: 580px; }
.concept-sec__item:nth-child(2) .concept-sec__title img { width: 341px; }
.concept-sec__item:nth-child(3) .concept-sec__title img { width: 297px; }
.concept-sec__item:nth-child(4) .concept-sec__title img { width: 159px; }

.concept-sec__desc {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: 18px;
  line-height: 1.45;
  letter-spacing: -.04em;
  color: var(--color-text);
}

.concept-sec__item + .concept-sec__item { margin-top: 149px; }
.concept-sec__item:nth-child(3)         { margin-top: 132.76px; }
.concept-sec__item:nth-child(4)         { margin-top: 111.89px; }

.concept-sec__item:nth-child(1) .concept-sec__desc { margin-top: 23.56px; }
.concept-sec__item:nth-child(2) .concept-sec__desc { margin-top: 12.06px; }
.concept-sec__item:nth-child(3) .concept-sec__desc { margin-top: 23.33px; }
.concept-sec__item:nth-child(4) .concept-sec__desc { margin-top: 24px; }

.concept-sec__person {
  width: 38.8483%;
  margin: 12.15px 0 0 35.5992%;
}

.concept-sec__person img {
  display: block;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .concept-sec {
    padding: 50.31px 0 0;
    background-image: linear-gradient(var(--color-bg) 0 117.31px,
                                      var(--color-section-bg) 117.31px);
  }

  .concept-sec__waves {
    top: 29px;
    height: 575.97px;
  }

  .concept-sec__deco--bird       { left: 65.232%;  top: 213.76px; width: 113.71px; }
  .concept-sec__deco--star-blue  { left: 9.6987%;  top: 383.56px; width: 86.53px; }
  .concept-sec__deco--star-pink  { left: 67.4027%; top: 496.06px; width: 98.16px; }

  .concept-sec__item:nth-child(1) .concept-sec__title img { width: clamp(287.7px, 95.9%, 580px); }
  .concept-sec__item:nth-child(2) .concept-sec__title img { width: clamp(169.17px, 56.39%, 341px); }
  .concept-sec__item:nth-child(3) .concept-sec__title img { width: clamp(147.33px, 49.11%, 297px); }
  .concept-sec__item:nth-child(4) .concept-sec__title img { width: clamp(78.81px, 26.27%, 159px); }

  .concept-sec__desc {
    font-size: 14px;
  }

  .concept-sec__item + .concept-sec__item { margin-top: 63.7px; }
  .concept-sec__item:nth-child(3)         { margin-top: 57.89px; }
  .concept-sec__item:nth-child(4)         { margin-top: 55.3px; }

  .concept-sec__item:nth-child(1) .concept-sec__desc { margin-top: 10.55px; }
  .concept-sec__item:nth-child(2) .concept-sec__desc { margin-top: 6.63px; }
  .concept-sec__item:nth-child(3) .concept-sec__desc { margin-top: 10.4px; }
  .concept-sec__item:nth-child(4) .concept-sec__desc { margin-top: 10.8px; }

  .concept-sec__inner {
    display: flow-root;
  }

  .concept-sec__person {
    width: 67.7%;
    margin: 9.2px 0 -34.95px 23.3233%;
  }
}

.business-sec {
  padding-top: 15.5px;
  padding-bottom: 67.77px;
  background-color: var(--color-bg);
  text-align: center;
}

.business-sec__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 40px;
}

.business-sec__title {
  margin-bottom: 28.28px;
}

.business-sec__title img {
  display: block;
  width: 779px;
  height: auto;
  margin-inline: auto;
}

.business-sec__body {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 16px;
  line-height: 43px;
  letter-spacing: 0;
  color: var(--color-text);
}

.business-sec__lat {
  margin-right: .25em;
}

.business-sec__lead {
  display: block;
  margin-bottom: 3px;
}

.business-sec__mark {
  padding: 6.23px 5px 4.77px 6.23px;
  margin-left: -6.23px;
  margin-right: .28em;
  color: #fff;
  background-color: #666;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* 読点で終わるマーカーは右の余白を詰める */
.business-sec__mark--kuten {
  padding-right: 0;
  margin-right: 0;
}

@media screen and (max-width: 767px) {
  .business-sec {
    padding-top: 51.98px;
    padding-bottom: 28.84px;
  }

  .business-sec__inner {
    padding-inline: 10%;
  }

  .business-sec__title {
    margin-bottom: 13.32px;
  }

  .business-sec__title img {
    width: clamp(300.09px, 100%, 779px);
    max-width: 100%;
  }

  .business-sec__body {
    width: 100%;
    max-width: var(--mid-measure);
    margin-inline: auto;
    font-size: 14px;
    line-height: 25px;
    text-align: justify;
  }

  .business-sec__lead {
    display: inline;
    margin-bottom: 0;
  }

  .business-sec__mark {
    padding: 1.4px 3px .6px;
    margin-left: -3px;
  }

  .business-sec__mark--kuten {
    padding-right: 0;
  }
}

.product-sec {
  padding-top: 38px;
  padding-bottom: 46.5px;
  background-color: var(--color-bg);
}

.product-sec__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 40px;
}

.product-sec__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.product-sec__band,
.product-sec__item--card {
  grid-column: 1 / -1;
}

.product-sec__band {
  position: relative;
  container-type: inline-size;
}

.product-sec__item {
  position: relative;
}

.product-sec__head {
  position: absolute;
  left: calc(max(0px, (100cqw - 779px) / 2) - .69958cqw);
  top: 5.22333cqw;
  z-index: 1;
}

.product-sec__title {
  margin-bottom: 2.17583cqw;
}

.product-sec__title img {
  display: block;
  width: 43.75cqw;
  height: auto;
  margin-left: .69958cqw;
}

.product-sec__lead {
  width: 39.375cqw;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: max(14px, 1.33333cqw);
  line-height: 3.33333cqw;
  letter-spacing: 0;
  color: var(--color-text);
}

.product-sec__cap {
  position: absolute;
  left: var(--cap-x, auto);
  right: var(--cap-r, auto);
  bottom: var(--cap-b, auto);
  top: var(--cap-t, auto);
}

.product-sec__name {
  margin-left: var(--name-x, 0);
  margin-right: var(--name-r, 0);
}

.product-sec__name img {
  display: block;
  width: var(--name-w);
  height: auto;
}

.product-sec__desc {
  margin-top: var(--name-gap);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 26.25px;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--color-text);
}

.product-sec__cap--row {
  display: flex;
  align-items: center;
  gap: 41.665px;
}

.product-sec__cap--row .product-sec__desc {
  margin-top: 0;
}

.product-sec__item--tile {
  --thumb-ar: 1200 / 1363.5;
  --img-w: 141.90667%;
  --img-l: -19.1%;
  --img-t: -26.11294%;
  --cap-x: 35.73px;
  --cap-b: 32.56px;
  --name-w: 160px;
}

.product-sec__item--paper {
  --thumb-ar: 595 / 1000;
  --img-w: 129.73998%;
  --img-l: -10.53277%;
  --img-t: -15.5505%;
  --cap-x: 32.507px;
  --cap-b: 30.475px;
  --name-x: 3.413px;
  --name-gap: 16.105px;
  --name-w: 242px;
}

.product-sec__item--bag {
  --thumb-ar: 595 / 1000;
  --img-w: 180.15748%;
  --img-l: -31.42286%;
  --img-t: -26.7523%;
  --cap-x: 28.02px;
  --cap-b: 30.455px;
  --name-x: 8.28px;
  --name-gap: 16.275px;
  --name-w: 162px;
}

.product-sec__item--card {
  --thumb-ar: 1200 / 700;
  --img-w: 109.48908%;
  --img-l: -1.57783%;
  --img-t: -10.51414%;
  --cap-x: 32.32px;
  --cap-b: 38.315px;
  --name-x: 3.57px;
  --name-gap: 20.045px;
  --name-w: 194px;
}

@media screen and (max-width: 767px) {
  .product-sec {
    padding-top: 15.17px;
    padding-bottom: 4.83px;
  }

  .product-sec__inner {
    padding-inline: 0;
  }

  .product-sec__grid {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .product-sec__head {
    left: 10%;
    right: 10%;
    top: 33.68px;
  }

  .product-sec__title {
    margin-bottom: 13.13px;
  }

  .product-sec__title img {
    width: clamp(164.04px, 54.68%, 525px);
    margin-left: 0;
  }

  .product-sec__lead {
    width: auto;
    max-width: var(--mid-measure);
    font-size: 14px;
    line-height: 22.5px;
    text-align: justify;
  }

  .product-sec__br {
    display: none;
  }

  .product-sec__desc {
    font-size: 14px;
  }

  .product-sec__cap--row {
    display: block;
  }

  .product-sec__cap--row .product-sec__desc {
    margin-top: var(--name-gap);
  }

  .product-sec__item--tile .product-sec__cap,
  .product-sec__item--bag .product-sec__cap {
    text-align: right;
  }

  .product-sec__item--tile .product-sec__name img,
  .product-sec__item--bag .product-sec__name img {
    margin-left: auto;
  }

  .product-sec__item--tile {
    --thumb-ar: 375 / 650;
    --img-w: 199.21067%;
    --img-l: -61.73333%;
    --img-t: -17.71846%;
    --cap-x: auto;
    --cap-r: 19.91px;
    --cap-b: 12.77px;
    --name-gap: 10.23px;
    --name-w: 50.05px;
  }

  .product-sec__item--paper {
    --thumb-ar: 1.25;
    --img-w: 102.1432%;
    --img-l: -.13387%;
    --img-t: -57.05733%;
    --cap-x: 20.16px;
    --cap-b: 18.21px;
    --name-x: 0;
    --name-gap: 8.3px;
    --name-w: 75.6px;
  }

  .product-sec__item--bag {
    --thumb-ar: 1.25;
    --img-w: 106.89307%;
    --img-l: -6.8072%;
    --img-t: -30.72633%;
    --cap-x: auto;
    --cap-r: 20.49px;
    --cap-b: auto;
    --cap-t: 18.9px;
    --name-x: 0;
    --name-r: 1.71px;
    --name-gap: 10.28px;
    --name-w: 50.61px;
  }

  .product-sec__item--card {
    --thumb-ar: 1.25;
    --img-w: 127.1872%;
    --img-l: -2.52693%;
    --img-t: -1.30367%;
    --cap-x: 20.11px;
    --cap-b: 13.82px;
    --name-x: .95px;
    --name-gap: 10.2px;
    --name-w: 60.57px;
  }
}

.about-sec {
  padding-top: 100px;
  padding-bottom: 70.24px;
  background-color: var(--color-section-bg);
  text-align: center;
}

.about-sec__title img {
  display: block;
  width: 507.04px;
  margin-inline: auto;
}

.about-sec__org {
  margin-top: 24.78px;
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: 21.26px;
  line-height: 1.45;
  letter-spacing: .05em;
  color: #333;
}

.about-sec__logo a {
  display: block;
  width: 341.94px;
  margin-top: 55.53px;
  margin-inline: auto;
}

.about-sec__logo img {
  display: block;
  width: 100%;
}

.about-sec__lat {
  margin-right: .25em;
}

.about-sec__lead {
  max-width: 660px;
  margin-top: 52.92px;
  margin-inline: auto;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 16px;
  line-height: 28px;
  letter-spacing: 0;
  text-align: justify;
  color: var(--color-text);
}

.about-sec__links {
  display: flex;
  justify-content: center;
  gap: 39.5px;
  margin-top: 58.9px;
}

.about-sec__links a {
  display: block;
  width: 130px;
  padding-bottom: 7.05px;
  border-bottom: 1px solid currentColor;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 17.72px;
  line-height: 1;
  letter-spacing: -.04em;
}

@media screen and (max-width: 767px) {
  .about-sec {
    padding-top: 71.01px;
    padding-bottom: 43.73px;
  }

  .about-sec__title img { width: clamp(230.52px, 76.84%, 507px); }

  .about-sec__org {
    margin-top: 17.45px;
    font-size: 15px;
  }

  .about-sec__logo a {
    width: clamp(190.56px, 63.52%, 342px);
    margin-top: 28.68px;
  }

  .about-sec__lead {
    max-width: var(--mid-measure);
    margin-top: 32.43px;
    font-size: 14px;
    line-height: 22px;
  }

  .about-sec__yaku {
    letter-spacing: -.6em;
  }

  .about-sec__links {
    gap: 39.56px;
    margin-top: 48.91px;
  }

  .about-sec__links a {
    width: 130.22px;
    padding-bottom: 7.17px;
    font-size: 16px;
  }
}

.cta-sec {
  display: flex;
}

.cta-sec__col {
  display: flex;
  flex: 1 1 50%;
  flex-direction: column;
  align-items: center;
  min-height: 300px;
  text-align: center;
}

.cta-sec__col--contact {
  padding-top: 108.4px;
  padding-bottom: 97.13px;
  background-color: var(--color-cta-contact);
  color: #fff;
}

.cta-sec__col--shop {
  padding-top: 103.39px;
  padding-bottom: 86.19px;
  background-color: var(--color-cta-shop);
  color: var(--color-text);
}

.cta-sec__ttl img {
  display: block;
}

.cta-sec__col--contact .cta-sec__ttl img { width: 260.58px; }
.cta-sec__col--shop    .cta-sec__ttl img { width: 311.55px; }

.cta-sec__note {
  margin-top: 21.35px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: 0;
}

.cta-sec__base {
  display: block;
  width: 100px;
  margin-top: 15.14px;
}

@media screen and (max-width: 767px) {
  .cta-sec {
    flex-direction: column;
  }

  .cta-sec__col {
    flex: 0 0 auto;
    min-height: 130px;
  }

  .cta-sec__col--contact {
    padding-top: 37.53px;
    padding-bottom: 29.71px;
  }

  .cta-sec__col--shop {
    padding-top: 38.32px;
    padding-bottom: 20px;
  }

  .cta-sec__col--contact .cta-sec__ttl img { width: 151.14px; }
  .cta-sec__col--shop    .cta-sec__ttl img { width: 175.65px; }

  .cta-sec__note {
    margin-top: 13.5px;
    font-size: 14px;
  }

  .cta-sec__base {
    width: 84.98px;
    margin-top: 6.42px;
  }
}

.footer-sec {
  padding-bottom: 32.82px;
  background-color: var(--color-menu-bg);
  color: var(--color-menu-fg);
}

.footer-sec__main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 103.26px;
  padding-inline: 9.1773% 14.9219%;
}

.footer-sec__brand {
  flex: 0 0 auto;
  width: 60.161%;
  max-width: 584.49px;
  margin-top: 35.79px;
}

.footer-sec__logo {
  display: block;
  width: 100%;
}

.footer-sec__tagline {
  display: block;
  width: 69.3103%;
  margin: 2.977% auto 0;
}

.footer-sec__nav {
  flex: none;
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: 14.17px;
  line-height: 27px;
  letter-spacing: -.04em;
  text-align: left;
}

.footer-sec__nav-rule {
  width: 137px;
  height: 1px;
  margin: 16.24px 0 0;
  padding: 0;
  border: 0;
  background-color: var(--color-line);
}

.footer-sec__list--sub {
  margin-top: 11.76px;
}

.footer-sec__rule {
  width: 100%;
  height: 1px;
  margin: 81.74px 0 0;
  padding: 0;
  border: 0;
  background-color: var(--color-line);
}

.footer-sec__copy {
  margin-top: 23.92px;
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: 14.17px;
  line-height: 1.45;
  letter-spacing: -.04em;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .footer-sec {
    padding-bottom: 11.51px;
  }

  .footer-sec__main {
    flex-direction: column;
    align-items: center;
    padding-top: 44.87px;
    padding-inline: 0;
  }

  .footer-sec__brand {
    width: 72.28%;
    max-width: none;
    margin-top: 0;
  }

  .footer-sec__nav {
    width: 100%;
    margin-top: 23.55px;
    font-size: 16px;
    line-height: 31.12px;
    text-align: center;
  }

  .footer-sec__rule {
    margin-top: 35.17px;
  }

  /* SPでは区切り線とサブメニューを隠す */
  .footer-sec__nav-rule,
  .footer-sec__list--sub {
    display: none;
  }

  .footer-sec__copy {
    margin-top: 8.94px;
    font-size: 13px;
  }
}