/* ============================================================
   style.css（MATERA LIAN | refined & compact）
   - 競合/重複を整理。コメント最小。既存デザイン維持。
   ============================================================ */

/* ========== Tokens ==========
   配色・角丸・フォントサイズ */
:root {
  --color-bg: #fff;
  --color-ink: #0a0d14;
  --color-muted: #4b5563;
  --color-line: #e6e8ee;
  --color-soft: #f7f7f8;
  --color-brand: #0a0d14;
  --color-accent: #111827;
  --radius: 0px;
  --radius-soft: 32px;
  --shadow: 0 12px 36px rgba(15, 23, 42, .08);
  --container: 1120px;
  --container-header: 1400px;
  --header-gutter: 16px;
  --fz-h1: clamp(36px, 6vw, 64px);
  --fz-h2: clamp(22px, 3.2vw, 36px);
  --fz-base: 16px;
}

/* ========== Base ========== */
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-size: var(--fz-base);
  font-family: var(--font-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.container {
  width: min(100% - 32px, var(--container));
  margin-inline: auto;
}

/* ========== Section ========== */
.section {
  padding: 72px 0;
  border-top: 1px solid var(--color-line);
}
/*
.section--soft {
  background: var(--color-soft);
}　*/

.section--bleed {
  padding: 0;
  border-top: 0;
}

.section__title {
  font-size: var(--fz-h2);
  text-align: center;
  margin: 0 0 8px;
}

.section__lead {
  color: var(--color-muted);
  text-align: center;
  margin: 0 0 36px;
}

/* ========== Hero ========== */
.hero {
  border-top: 0;
}

.hero--image-only {
  padding: 0;
  border-top: 0;
  position: relative;
}

.hero--image-only .hero__media {
  margin: 0;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.hero__media--full {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  aspect-ratio: 4/5;
}

.hero__media--full picture,
.hero__media--full img {
  display: block;
  width: 100%;
  height: auto;
}

/* SP専用：ヒーロー画像を縦長化 */
@media (max-width: 959px) {
  .hero__media--full {
    height: 100vh;
  }
  .hero__media--full img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* copy overlay */
.hero__overlay {
  position: absolute;
  left: clamp(16px, 4vw, 56px);
  bottom: clamp(18px, 6vw, 80px);
  width: min(70vw, 1100px);
  z-index: 2;
  pointer-events: none;
}

.hero__copy {
  margin: 0;
  color: #fff;
  font-weight: 500;
  font-size: clamp(22px, 4.8vw, 56px);
  line-height: 1.08;
  letter-spacing: .1em;
  display: flex;
  flex-direction: column;
  gap: .08em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .30), 0 1px 3px rgba(0, 0, 0, .28);
}

.hero__line {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

/* SP/iPad：3行コピーを採用 */
.hero__copy--sp {
  display: none;
}

@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .hero__overlay {
    left: 12px;
    right: 12px;
    width: auto;
    bottom: clamp(64px, 18vw, 160px);
    max-width: clamp(560px, 86vw, 940px);
    container-type: inline-size;
  }
  .hero__copy {
    display: none;
  }
  .hero__copy--sp {
    display: flex;
    flex-direction: column;
    gap: .08em;
    margin: 0;
    color: #fff;
    font-family: var(--font-hero, inherit);
    font-weight: 700;
    font-size: clamp(18px, min(7vw, 9cqw), 30px);
    line-height: 1.14;
    letter-spacing: .02em;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .30), 0 1px 3px rgba(0, 0, 0, .28);
  }
  .hero__copy--sp .hero__line {
    white-space: nowrap;
  }
  .hero__sub {
    font-size: clamp(12px, 3.8vw, 15.5px);
    line-height: 1.65;
    letter-spacing: -.1em;
  }
}

@supports not (font-size: 1cqw) {
  @media (max-width: 1024px) {
    .hero__copy--sp {
      font-size: clamp(18px, 6.6vw, 30px);
    }
  }
}

@media (max-width: 360px) {
  .hero__copy--sp {
    font-size: clamp(16px, 7.2vw, 28px);
  }
}

.hero__copy,
.hero__sub {
  font-family: var(--font-hero);
}

/* ========== Features ========== */
#features.section {
  padding-top: 0 !important;
  border-top: 0;
  background: transparent;
}

.container--bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.features.features--quad .features-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(3, 1fr);
  gap: 0;
  border: 1px solid #000;
  background: transparent;
}

.features.features--quad .features-grid > * {
  padding: clamp(20px, 3vw, 36px);
}

@media (min-width: 900px) {
  .features-label {
    border-right: 1px solid #000;
  }
  .features-rail {
    display: contents !important;
  }
  .features-rail > .feature {
    border-right: 1px solid #000;
  }
  .features-rail > .feature:last-child {
    border-right: none;
  }
}

@media (max-width: 899px) {
  .features.features--quad .features-grid {
    display: block;
    border: none !important;
  }
  .features-label {
    padding: 16px;
  }
  .features-rail {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    padding: 0 16px 16px;
    margin: 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .features-rail::-webkit-scrollbar {
    display: none;
  }
  .features-rail .feature {
    flex: 0 0 85%;
    min-width: 85%;
    scroll-snap-align: start;
    border: 1px solid #000;
    border-radius: 0;
    padding: 16px;
  }
}

.features-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.features-label__eyebrow {
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.features-label__jp {
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--color-muted);
}

.feature {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
}

.feature__media {
  margin: 0;
  width: 100%;
  overflow: hidden;
}

.feature__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 0;
}

.feature__body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  padding: clamp(16px, 2.5vw, 28px);
}

.feature__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .02em;
}

.feature__text {
  margin: 0;
  color: var(--color-ink);
  line-height: 1.9;
}

@media (max-width: 899px) {
  #features .features-label__eyebrow {
    font-size: 12px;
    letter-spacing: .12em;
  }
  #features .features-label__jp {
    font-size: 10px;
    letter-spacing: .18em;
  }
  #features .feature__title {
    font-size: clamp(14px, 4.2vw, 16px);
  }
  #features .feature__text {
    font-size: clamp(12px, 3.6vw, 13.5px);
    line-height: 1.85;
  }
}

/* ========== Products ========== */
#products.section {
  border-top: 0 !important;
}

.products__header {
  padding: clamp(20px, 3vw, 36px);
}

.products-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.products-label__eyebrow {
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.products-label__jp {
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--color-muted);
}

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

@media (min-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.product-card--panel {
  border: 1px solid var(--color-line);
  border-radius: 0;
  background: transparent;
  overflow: hidden;
  box-shadow: none;
  padding: 0;
}

.product-card__canvas {
  position: relative;
  height: clamp(320px, 36vw, 420px);
  --grad-1: #fff;
  --grad-2: #eceff3;
  --grad-3: #d1d4da;
  --grad-angle: 135deg;
  background-image: linear-gradient(var(--grad-angle), var(--grad-1) 0%, var(--grad-2) 50%, var(--grad-3) 100%);
  background-size: 200% 200%;
  background-position: 0% 0%;
  transition: background-position .9s cubic-bezier(.22, .61, .36, 1);
  --meta-h: clamp(60px, 8vw, 84px);
  --top-safe: 56px;
  --arrow: 44px;
  --pad: 2px;
}

.product-card--panel:hover .product-card__canvas {
  background-position: 100% 100%;
}

@media (prefers-reduced-motion: reduce) {
  .product-card__canvas {
    transition: none;
  }
}

.product-card__art {
  position: absolute;
  top: 50% !important;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(72%, 560px);
  height: auto;
  max-height: calc(100% - var(--meta-h) - var(--top-safe) - 24px);
  object-fit: contain;
  pointer-events: none;
}

.product-card__label {
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--color-muted);
}

.product-card__badge {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  background: #000;
  color: #fff;
  border-radius: 999px;
}

.product-card__meta {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: var(--pad);
  height: var(--meta-h);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 3px;
  padding-right: calc(var(--arrow) + 20px);
}

.product-card__line {
  margin: 0;
}

.product-card__line--primary {
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.28;
  letter-spacing: .01em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.product-card__line--sub {
  font-size: 12px;
  color: var(--color-muted);
}

.product-card__arrow {
  position: absolute;
  right: 16px;
  bottom: calc(var(--pad) + (var(--meta-h) / 2) - (var(--arrow) / 2));
  width: var(--arrow);
  height: var(--arrow);
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  text-decoration: none;
  color: var(--color-ink);
  font-size: 18px;
  line-height: 1;
  transition: transform .08s ease;
}

.product-card__arrow:hover {
  transform: translateY(-1px);
}

.product-card {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.product-card__image {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
}

.product-card__body {
  padding: 18px;
  display: grid;
  gap: 12px;
  justify-items: center;
}

.product-card__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .02em;
}

@media (max-width: 899px) {
  .product-card__canvas {
    --meta-h: clamp(72px, 18vw, 96px);
    --top-safe: 48px;
  }
  .product-card__line--primary {
    font-size: clamp(12px, 3.2vw, 14px);
  }
  .product-card__arrow {
    width: 48px;
    height: 48px;
  }
}

/* hover glamor */
@media (hover: hover) and (pointer: fine) {
  .product-card__label,
  .product-card__badge,
  .product-card__meta,
  .product-card__arrow {
    z-index: 5;
    position: absolute;
  }
  .product-card__canvas {
    isolation: isolate;
  }
  .product-card__canvas::before {
    content: "";
    position: absolute;
    inset: -20% -60%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 65%);
    transform: translateX(-140%);
    opacity: 0;
    z-index: 4;
    filter: blur(.2px);
    transition: opacity .38s ease, transform 0s .38s;
    will-change: transform, opacity;
  }
  .product-card--panel:hover .product-card__canvas::before {
    opacity: 1;
    animation: shearSweep 2.6s cubic-bezier(.22, .61, .36, 1) forwards;
  }
  .product-card__canvas::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(30px 30px at 18% 30%, rgba(255, 255, 255, .28) 0 30%, transparent 32%),
      radial-gradient(24px 24px at 72% 22%, rgba(255, 255, 255, .22) 0 30%, transparent 35%),
      radial-gradient(36px 36px at 64% 72%, rgba(255, 255, 255, .20) 0 28%, transparent 34%),
      radial-gradient(20px 20px at 32% 82%, rgba(255, 255, 255, .18) 0 30%, transparent 36%);
    opacity: 0;
    transform: translateY(2px) scale(1.02);
    transition: opacity .45s ease, transform .9s ease;
    z-index: 1;
    pointer-events: none;
  }
  .product-card--panel:hover .product-card__canvas::after {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: sparkleFloat 3.6s ease-in-out infinite alternate;
  }
  .product-card__art {
    transition: transform .85s cubic-bezier(.22, .61, .36, 1);
  }
  .product-card--panel:hover .product-card__art {
    transform: translate(-50%, -50%) scale(1.035);
  }
  .product-card--panel:hover .product-card__canvas {
    box-shadow: 0 22px 60px rgba(15, 23, 42, .10);
  }
}

@keyframes shearSweep {
  from { transform: translateX(-140%); }
  to   { transform: translateX(140%); }
}

@keyframes sparkleFloat {
  from { transform: translateY(0) scale(1); }
  to   { transform: translateY(-4px) scale(1.01); }
}

@media (prefers-reduced-motion: reduce) {
  .product-card__canvas::before,
  .product-card__canvas::after,
  .product-card__art {
    transition: none !important;
    animation: none !important;
    opacity: 1;
  }
}

/* ========== Instagram：自動横スライド（停止なし・無限ループ） ========== */
#instagram .container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ig-marquee {
  --ig-gap: 18px;
  --ig-edge: 24px;
  --ig-size: clamp(160px, 18vw, 260px);
  overflow: hidden;
  padding-inline: var(--ig-edge);
}

.ig-strip-images {
  display: flex;
  align-items: stretch;
  gap: var(--ig-gap);
  animation: ig-scroll 40s linear infinite;
}

.ig-img {
  flex: 0 0 var(--ig-size);
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #fff;
}

.ig-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  transition: transform .25s;
}

.ig-img:hover img {
  transform: scale(1.03);
}

@keyframes ig-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ig-strip-images {
    animation: none;
  }
}

/* ========== About ========== */
.about-rich {
  max-width: 820px;
  margin-inline: auto;
  color: var(--color-ink);
  font-size: clamp(12px, 1.05vw, 14px);
  line-height: 2;
  letter-spacing: .01em;
}

.about__title {
  margin: 40px 0 12px;
  font-size: 16px;
  letter-spacing: .14em;
  color: var(--color-ink);
}

.about-rich p {
  margin: 20px 0 10px;
}

.about__closing {
  margin-top: 16px;
}

.about__sig {
  margin-top: 10px;
  color: var(--color-muted);
  font-size: 12px;
  line-height: 1.8;
}

.about-hero {
  margin: 0 0 16px;
}

#about .container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#about .about-hero {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-bottom: 16px !important;
}

#about .about-hero img {
  display: block;
  width: 100%;
  height: clamp(360px, 50vw, 640px) !important;
  object-fit: cover;
}

.about__sign {
  display: block;
  margin: 10px 0 0;
  width: clamp(160px, 36%, 320px);
  height: auto;
}

@media (max-width: 899px) {
  .about__sign {
    width: clamp(140px, 50%, 260px);
  }
  #about .about-hero img {
    height: clamp(300px, 90vw, 520px) !important;
  }
  #about .about-rich {
    padding-left: 23px !important;
    padding-right: 23px !important;
  }
}

/* ========== Support ========== */
#support.section {
  border-top: 0;
}

.support__header {
  padding: clamp(20px, 3vw, 36px) 0 clamp(8px, 1.8vw, 12px);
  text-align: center;
}

.support-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.support-label__eyebrow {
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.support-label__jp {
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--color-muted);
}

.help-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 900px) {
  .help-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.help-card {
  position: relative;
  display: grid;
  place-items: center;
  text-decoration: none;
  color: var(--color-ink);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  min-height: clamp(140px, 20vw, 200px);
  padding: clamp(18px, 3.5vw, 28px);
  transition: background .2s ease, transform .06s ease, border-color .2s ease;
}

.help-card:hover {
  background: #fafafa;
  border-color: #dde2ea;
}

.help-card:active {
  transform: translateY(1px);
}

.help-card__body {
  display: grid;
  gap: 8px;
  text-align: center;
}

.help-card__title {
  font-weight: 700;
  letter-spacing: .02em;
  font-size: clamp(16px, 1.3vw, 20px);
}

.help-card__sub {
  color: var(--color-muted);
  font-size: 14px;
}

.help-card__arrow {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-line);
  background: #fff;
  border-radius: 50%;
  transition: transform .08s ease;
}

.help-card__arrow::after {
  content: "→";
  font-size: 18px;
  line-height: 1;
  color: var(--color-ink);
}

.help-card:hover .help-card__arrow {
  transform: translateX(2px);
}

/* ========== Buttons / Helpers / Footer / Forms / Typography ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .02em;
  border: 1px solid var(--color-ink);
  transition: transform .06s ease, box-shadow .2s ease, background .2s, color .2s, border-color .2s;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--color-brand);
  color: #fff;
  border-color: var(--color-brand);
  box-shadow: var(--shadow);
}

.btn--primary:hover {
  background: var(--color-accent);
}

.btn--outline {
  background: transparent;
  color: var(--color-ink);
}

.btn--outline:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn--ghost {
  background: transparent;
  border-color: transparent;
}

.btn--ghost:hover {
  border-color: var(--color-line);
}

.sp-only {
  display: inline;
}

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

.fade-in {
  opacity: 0;
  transform: translateY(6px);
  animation: fadeIn .6s ease forwards;
}

.fade-in:nth-child(2) { animation-delay: .05s; }
.fade-in:nth-child(3) { animation-delay: .1s; }

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

.site-footer {
  padding: 44px 0 96px;
  border-top: 1px solid var(--color-line);
  color: var(--color-muted);
  font-size: 14px;
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  justify-content: center;
}

.footer__copy {
  margin: 0;
}

.footer-nav {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-link {
  padding: 6px 8px;
  border-radius: 8px;
}

.footer-link:hover {
  background: #eef1f5;
}

.form {
  display: grid;
  gap: 14px;
  max-width: 720px;
  margin: 0 auto;
}

.field {
  display: grid;
  gap: 6px;
}

.field__label {
  font-weight: 600;
}

.field__control {
  padding: 12px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  font: inherit;
}

.form__note {
  font-size: 13px;
  color: var(--color-muted);
}

.form__success {
  display: none;
  padding: 12px 14px;
  background: #ecfeff;
  border: 1px solid #06b6d4;
  color: #0e7490;
  border-radius: 12px;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--font-serif) !important;
  font-feature-settings: "palt" 1;
}

.section__title,
.feature__title,
.product-card__line--primary,
.help-card__title,
.btn {
  font-weight: 700;
}

/* ========== SP finishing ========== */
@media (max-width: 899px) {
  .section {
    padding: 56px 0;
  }
  .features-rail {
    padding-left: 20px;
    padding-right: 20px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
  }
  .features-rail .feature {
    flex: 0 0 88%;
  }
  .help-card {
    min-height: 150px;
  }
  .help-card__arrow {
    width: 44px;
    height: 44px;
  }
  .about-rich {
    font-size: clamp(13px, 3.8vw, 14px);
    line-height: 1.95;
  }
  .field__control {
    font-size: 16px;
    padding: 14px;
  }
}

/* ===== Features：2カラム版 ===== */
.features.features--duo .features-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(2, 1fr);
  gap: 0;
  border: 1px solid #000;
  background: transparent;
}

.features.features--duo .features-grid > * {
  padding: clamp(20px, 3vw, 36px);
}

/* PC：右2枚をカラムに展開し、縦線を引く */
@media (min-width: 900px) {
  .features.features--duo .features-rail {
    display: contents !important;
  }
  .features.features--duo .features-label {
    border-right: 1px solid #000;
  }
  .features.features--duo .features-rail > .feature {
    border-right: 1px solid #000;
  }
  .features.features--duo .features-rail > .feature:last-child {
    border-right: none;
  }
}

/* SP：ラベル上段＋横スライド（枠線は各カードのみ） */
@media (max-width: 899px) {
  .features.features--duo .features-grid {
    display: block;
    border: none !important;
  }
  .features.features--duo .features-label {
    padding: 16px;
  }
  .features.features--duo .features-rail {
    display: flex;
    gap: 16px;
    padding: 0 16px 16px;
    margin: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .features.features--duo .features-rail::-webkit-scrollbar {
    display: none;
  }
  .features.features--duo .features-rail .feature {
    flex: 0 0 88%;
    min-width: 88%;
    scroll-snap-align: start;
    border: 1px solid #000;
    border-radius: 0;
    padding: 16px;
  }
}

/* VIEW MORE ボタン（黒背景・白文字・細身） */
.feature__cta {
  margin-top: clamp(12px, 1.4vw, 16px);
}

.btn--view {
  padding: 10px 18px;
  border-radius: 0;
  font-size: 12px;
  letter-spacing: .16em;
}

/* ===== Features：VIEW MORE を下揃え ===== */
.features .feature {
  display: grid;
  grid-template-rows: auto 1fr;
  background: transparent;
}

.features .feature__body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: transparent;
}

.features .feature__cta {
  margin-top: auto;
  padding-top: clamp(10px, 1.2vw, 14px);
}

.btn--view {
  background: #000;
  color: #fff;
  border-color: #000;
}

/* VIEW MORE：下線・枠線なし */
.btn--view,
.btn--view:link,
.btn--view:visited {
  text-decoration: none !important;
  border: 0 !important;
  background: #000;
  color: #fff;
}

.btn--view:hover {
  background: #111;
  color: #fff;
}

.btn--view:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ===== Features：VIEW MORE を説明文の右下に揃える ===== */
.features .feature {
  display: grid;
  grid-template-rows: auto 1fr;
}

.features .feature__body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.features .feature__cta {
  margin-top: auto;
  align-self: flex-end;
}

.features .feature__cta .btn--view {
  display: inline-flex;
  text-decoration: none;
  border: 0;
}

/* Features：タイトル内の一部だけ色替え */
:root {
  --color-accent-matera: #92757c;
  --color-accent-water: #668194;
}

.feature__accent {
  color: inherit;
}

.feature__accent--matera {
  color: var(--color-accent-matera);
}

.feature__accent--water {
  color: var(--color-accent-water);
}

/* ===== ENLARGE: Features / Products section titles ===== */
.features-label__eyebrow,
.products-label__eyebrow {
  font-size: clamp(18px, 1.8vw, 24px);
  letter-spacing: .16em;
}

.features-label__jp,
.products-label__jp {
  font-size: clamp(13px, 1.1vw, 16px);
  letter-spacing: .22em;
}

@media (max-width: 899px) {
  #features .features-label__eyebrow,
  .products-label__eyebrow {
    font-size: clamp(14px, 4.6vw, 18px);
  }
  #features .features-label__jp,
  .products-label__jp {
    font-size: clamp(11px, 3.4vw, 14px);
  }
}

.ig-track {
  display: flex;
  gap: var(--ig-gap, 18px);
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.ig-thumb {
  flex: 0 0 var(--ig-size, clamp(160px, 18vw, 220px));
  aspect-ratio: 1 / 1;
  background: #fff;
  overflow: hidden;
}

.ig-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  transform: scale(1);
  transition: transform .25s ease;
}

.ig-thumb:hover img {
  transform: scale(1.03);
}

/* Instagram 無限横スクロール（シームレス、停止なし） */
#instagram .container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ig-marquee {
  --ig-gap: 18px;
  --ig-edge: 24px;
  --ig-size: clamp(160px, 18vw, 260px);
  --ig-speed: 100s;
  overflow: hidden;
  padding-inline: var(--ig-edge);
}

.ig-track {
  display: flex;
  align-items: stretch;
  gap: var(--ig-gap);
  will-change: transform;
  animation: ig-scroll var(--ig-speed) linear infinite;
  transform: translate3d(0, 0, 0);
}

.ig-img {
  flex: 0 0 var(--ig-size);
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #fff;
}

.ig-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  transition: transform .25s;
}

.ig-img:hover img {
  transform: scale(1.03);
}

@keyframes ig-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 動きが苦手なユーザーへの配慮 */
@media (prefers-reduced-motion: reduce) {
  .ig-track {
    animation: none;
  }
}

.ig-track {
  display: flex;
  gap: var(--ig-gap, 18px);
  animation: ig-scroll 10s linear infinite;
  width: max-content;
}

@keyframes ig-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--ig-gap)/2)); }
}

/* ===== Instagram：停止→スライド→停止（シンプル版） ===== */
#instagram .ig-marquee{
  --ig-gap: 18px;
  --ig-edge: 24px;
  --ig-size: clamp(160px, 18vw, 260px);
  --ig-speed: 20s;
}

#instagram .ig-track{
  display:flex;
  gap: var(--ig-gap);
  will-change: transform;
  animation: ig-scroll-step var(--ig-speed) infinite both;
  transform: translate3d(0,0,0);
}

@keyframes ig-scroll-step{
  0%   { transform: translateX(0); }
  15%  { transform: translateX(0); }
  40%  { transform: translateX(-25%); }
  55%  { transform: translateX(-25%); }
  80%  { transform: translateX(-50%); }
  100% { transform: translateX(calc(-50% - var(--ig-gap)/2)); }
}

#instagram .ig-img{
  flex:0 0 var(--ig-size);
  aspect-ratio:1/1;
  overflow:hidden;
  background:#fff;
}
#instagram .ig-img img{
  width:100%; height:100%;
  object-fit:cover; display:block;
  -webkit-user-drag:none; user-select:none;
  transition: transform .25s;
}
#instagram .ig-img:hover img{ transform:scale(1.03); }

@media (prefers-reduced-motion: reduce){
  #instagram .ig-track{ animation:none !important; }
}

@media (min-width: 960px){
  #about .about-hero img{
    height: auto !important;
    aspect-ratio: 21 / 6;
    object-fit: cover;
  }
}

@media (max-width: 959px){
  #about .about-hero img{
    height: auto !important;
    aspect-ratio: 21 / 9;
    object-fit: cover;
  }
}

.about-intro {
  text-align: center;
  margin: 32px auto 124px;
  max-width: 860px;
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1;
  color: var(--color-ink);
  padding-inline: 16px;
}

.about-intro p {
  margin: 0;
  white-space: pre-line;
}

@media (max-width: 959px) {
  .hero.hero--image-only {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
  }
  .site-header {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 959px){
  .hero__overlay{
    left: 12px; right: 12px;
    top: 50%;
    bottom: auto;
    transform: translateY(-10%);
  }
}

@keyframes liquidShift{
  0%   { transform: translate3d(-2%,0,0) scale(1); }
  50%  { transform: translate3d(1%,0,0)  scale(1.02); }
  100% { transform: translate3d(2%,0,0)  scale(1.01); }
}

@media (prefers-color-scheme: dark){
  .site-header{
    background:
      linear-gradient(135deg, rgba(20,24,28,.55), rgba(20,24,28,.35)),
      radial-gradient(1100px 230px at 10% -20%, rgba(60,140,110,.18), transparent 60%),
      radial-gradient(800px 210px  at 110% 8%, rgba(40,110,95,.14), transparent 60%);
    border-bottom: 1px solid rgba(255,255,255,.16);
    box-shadow:
      0 6px 24px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.10);
  }
  .site-header::before{
    opacity:.9;
  }
}

@media (prefers-reduced-motion: reduce){
  .site-header::before{ animation: none; }
}

@media (min-width: 960px){
  .hero__overlay {
    bottom: clamp(40px, 8vw, 120px);
  }
}

@media (min-width: 960px){
  .hero__media--full {
    aspect-ratio: 18.5/9;
  }
}

/*強制修正ああああああああああああああああ*/

/* --- IG hotfix: 強制フレックス＆横並び固定 --- */
#instagram .ig-marquee{
  --ig-gap: 18px;
  --ig-edge: 24px;
  --ig-size: clamp(160px, 18vw, 260px);
  overflow: hidden;
  padding-inline: var(--ig-edge);
}

#instagram .ig-track{
  display: flex !important;
  align-items: stretch;
  gap: var(--ig-gap);
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
}

#instagram .ig-img{
  flex: 0 0 var(--ig-size) !important;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

#instagram .ig-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==== SPヒーローコピーの調整 ==== */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .hero__copy--sp {
    font-weight: 400;
    letter-spacing: .08em;
    line-height: 1.3;
  }
}

/* PCではインライン扱い */
.hero__sub .sp-break {
  display: inline;
}

/* SP専用の調整まとめ */
@media (max-width: 959px) {
  .hero__sub .sp-break {
    display: block;
  }
  .hero__sub {
    white-space: normal !important;
    line-height: 1.6;
  }
}

@media (max-width: 899px) {
  .features .feature__body {
    padding: 12px;
    gap: 6px;
  }
  .features .feature__text {
    margin: 0;
    line-height: 1.7;
  }
}

.about-intro p {
  line-height: 1.2;
  margin: 0;
}

/* br を自然改行と同じ高さに */
.about-intro br {
  display: block;
  content: "";
  margin: 0;
  line-height: 1.9;
}

/* 画像の下にサブキャッチ用の帯（背景は透過） */
.hero__below{
  padding: clamp(18px, 3vw, 28px) 16px 0;
}

/* サブキャッチの基本体裁（中央揃え・最大幅） */
.hero__sub{
  margin: 0 auto;
  max-width: 980px;
  text-align: center;
  letter-spacing: .02em;
  line-height: 1.75;
}

/* SP時に少しだけ上の余白を広めに（メインコピーとの間隔） */
@media (max-width: 959px){
  .hero__below{ padding-top: clamp(14px, 4vw, 22px); }
}

/* ① 特徴セクションのタイトル */
.features-label__eyebrow,
.features-label__jp{
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif !important;
  font-weight: 700;
}

/* ② 商品一覧セクションのタイトル */
.products-label__eyebrow,
.products-label__jp{
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif !important;
  font-weight: 700;
}

/* ③ サブキャッチコピー */
.hero__sub{
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif !important;
  font-weight: 500;
  letter-spacing: .03em;
  line-height: 1.7;
}

.hero__below {
  padding: clamp(28px, 5vw, 48px) 16px clamp(40px, 6vw, 64px);
}

@media (min-width: 960px){
  .hero__overlay {
    bottom: clamp(220px, 28vw, 340px);
  }
}

.hero__sub {
  letter-spacing: 0.08em;
}

@media (max-width: 959px){
  .hero__below{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

.hero__copy {
  color: #677cc0 !important;
  text-shadow: none !important;
}

/* ===== Aqua Hero ===== */
.hero--aqua{
  position: relative;
  min-height: clamp(520px, 92vh, 920px);
  overflow: clip;
  border-top: 0;
}

/* 背景Canvas */
#water-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}

/* 商品画像：中央にふわっと */
.hero__product{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) scale(.98);
  width:min(40vw, 520px);
  max-width:72%;
  height:auto;
  opacity:0;
  filter: drop-shadow(0 20px 40px rgba(82, 82, 102, 0.2));
  transition: transform .9s cubic-bezier(.22,.61,.36,1), opacity .9s ease;
  z-index:2;
}
.hero--aqua.is-in .hero__product{
  opacity:1; transform:translate(-50%,-50%) scale(1);
}

/* 右下キャッチ：白プレートで読みやすく */
.hero__copy-cta{
  position:absolute; left:clamp(12px,4vw,48px); bottom:clamp(12px,4vw,40px);
  display:flex; flex-direction:column; gap:10px;
  z-index:3;
  margin:0;
  text-align:left;
}
.hero__copy-cta span{
  display:block;
  color:#677cc0;
  font-family: var(--font-hero, "Shippori Mincho","Noto Serif JP",serif);
  font-weight:700;
  font-size:clamp(26px, 6vw, 56px);
  line-height:1.3;
  letter-spacing:.03em;
  opacity:0; transform:translateY(10px);
  transition:opacity .7s ease, transform .7s ease;
  background:none;
  box-shadow:none;
  padding:0;
}

.hero--aqua.is-in .hero__copy-cta span{
  opacity:1; transform:translateY(0);
}

/* SP：少し縮めて余白も調整 */
@media (max-width: 480px){
  .hero__product{ width:min(66vw, 380px); }
  .hero__copy-cta{ right:12px; left:12px; align-items:flex-end; }
  .hero__copy-cta span{ font-size:clamp(18px,7vw,28px); }
}

/* 動きが苦手なユーザー配慮 */
@media (prefers-reduced-motion: reduce){
  .hero__product, .hero__copy-cta span{ transition:none; }
}

/* ヒーロー箱を基準に */
.hero.hero--aqua{
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #e9f6ff url("{{ file_root_path }}bg-water-texture.jpg") center / cover no-repeat;
}

/* 水面キャンバスは最背面 */
#water-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  z-index:0;
}

/* 商品画像：中央に。デフォルトで見える（JSなくてもOK） */
.hero__product{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%, -52%);
  width:min(42vw, 460px);
  height:auto;
  z-index:2;
  opacity:1;
  transition: transform .9s cubic-bezier(.22,.61,.36,1), opacity .9s;
  will-change: transform, opacity;
}

/* コピー：左下（※右下にしたいなら right に変更） */
.hero__copy-cta{
  position:absolute;
  left:clamp(16px, 6vw, 56px);
  bottom:clamp(16px, 6vw, 56px);
  z-index:2;
  color:#ffffff;
  line-height:1.22;
  letter-spacing:.04em;
  font-weight:500;
  opacity:1;
  transition: transform .9s cubic-bezier(.22,.61,.36,1), opacity .9s;
  will-change: transform, opacity;
}
.hero__copy-cta span{ display:block; }

/* ===== JSが走った時だけ“ふわっ”演出 =====
   JSが <section class="hero hero--aqua"> に .is-ready を付与する想定
*/
.hero--aqua.is-ready .hero__product{
  transform:translate(-50%, -54%) scale(1.02);
}
.hero--aqua.is-ready .hero__copy-cta{
  transform:translateY(-4px);
}


.hero__product, .hero__copy-cta{ opacity: .00; }
.hero--aqua.is-ready .hero__product,
.hero--aqua.is-ready .hero__copy-cta{ opacity:1; }

/* ================== HERO copy visibility hotfix (append at end) ================== */
/* 1) 元の見た目（白字＋シャドウ）を復元 */
.hero__overlay .hero__copy {
  color: #fff !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.28) !important;
  display: flex; /* デスクトップ用の既定表示 */
}

/* 2) モバイルで .hero__copy--sp がある場合だけ .hero__copy を隠す（両方表示を防止） */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .hero__overlay:has(.hero__copy--sp) .hero__copy { display: none !important; }
  .hero__copy--sp { display: flex !important; }
  /* .hero__copy--sp が無いページでは .hero__copy を表示（消えない保険） */
  .hero__overlay:not(:has(.hero__copy--sp)) .hero__copy { display: flex !important; }
}

/* 3) 念のため重なり順を確保（背景画像より前面に） */
.hero__overlay { z-index: 5; }

/* ================== HERO copy-cta visibility hotfix (append at end) ================== */
/* 常時見えるように（アニメはJS/他ルールが付与しても最終的に可視） */
.hero__copy-cta,
.hero__copy-cta span {
  opacity: 1 !important;
  transform: none !important; /* 初期の translateY を打ち消し */
}

/* 念のため前面に固定（商品画像やキャンバスより前） */
.hero__copy-cta { z-index: 6 !important; }

/* 可読性（既存トーンを維持） */
.hero__copy-cta span {
  background: linear-gradient(135deg, #677cc0, #3c4568);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; /* Safari以外にも保険 */
  text-shadow: none; /* グラデーションなので影は外すのがおすすめ */
}


/* モバイルでも必ず表示（どこかで display: none; が当たっても解除） */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .hero__copy-cta { display: flex !important; }
}

/* ================== HERO copy-cta position adjust ================== */
.hero__copy-cta {
  bottom: clamp(80px, 12vh, 160px) !important; /* ← 数値を調整して「上に」寄せる */
}

/* =========================
   SP REFINEMENTS (append)
   ========================= */
@media (max-width: 959px) {
  /* 安全領域（iOS等） */
  :root { --safe-bottom: env(safe-area-inset-bottom, 0px); }

  /* Header：タップしやすさ＆ロゴ視認性を微調整 */
  .header__bar { padding: 8px 0; }
  .brand__logo-img { height: 30px; }

  /* HERO：コピー必ず表示＋“少し上”に固定、折返し最適化 */
  .hero__copy-cta {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    bottom: clamp(96px, 18vh, 220px) !important; /* ← ご要望の「もうちょい上」 */
    left: clamp(14px, 5vw, 28px);
    right: clamp(14px, 5vw, 28px);
    z-index: 6 !important;
  }
  .hero__copy-cta span {
    font-size: clamp(18px, 6.4vw, 28px);
    line-height: 1.35;
    letter-spacing: .03em;
    word-break: keep-all;
  }

  /* HERO：商品とコピーの重なりを軽減（商品をほんの少し小さく） */
  .hero__product {
    width: min(64vw, 360px);
    transform: translate(-50%, -52%);
  }

  /* Features：横スクロールの見切れ防止＆カード幅の統一 */
  .features.features--duo .features-rail,
  .features-rail {
    padding-left: 20px;
    padding-right: 20px;
    scroll-padding-left: 20px;
  }
  .features.features--duo .features-rail .feature,
  .features-rail .feature {
    flex: 0 0 88%;
    min-width: 88%;
  }
  .features .feature__body {
    padding: 14px;    /* 既存よりわずかにゆとり */
    gap: 8px;
  }

  .product-card__canvas {
    --meta-h: clamp(76px, 20vw, 100px); /* 行高に合わせ少し拡張 */
  }
  .product-card__arrow { width: 48px; height: 48px; }

  /* Instagram：移動速度を少しだけ穏やかに */
  #instagram .ig-marquee { --ig-speed: 28s; }

  /* About：行間・余白の整え（読みやすさ優先、色は触らない） */
  .about-rich {
    font-size: clamp(13px, 3.8vw, 14px);
    line-height: 1.9;
    padding-inline: 23px;
  }

  /* Support：カードの最小サイズを確保（指で押しやすく） */
  .help-card { min-height: 150px; }

  /* Footer：OSジェスチャー被り防止 */
  .site-footer { padding-bottom: calc(48px + var(--safe-bottom)); }
}

/* さらに小さい端末向けのピンポイント調整（任意） */
@media (max-width: 480px) {
  .hero__copy-cta { bottom: clamp(110px, 22vh, 240px) !important; }
  .hero__copy-cta span { font-size: clamp(18px, 7vw, 26px); }
  .brand__logo-img { height: 28px; }
}

/* =========================
   SP HERO 修正パッチ
   ========================= */
@media (max-width: 959px) {
  /* 商品画像を少し上へ */
  .hero__product {
    transform: translate(-50%, -60%);  /* -52% → -60% で上に寄せる */
    width: min(64vw, 340px);           /* 少しコンパクトにして重なり回避 */
  }

  /* キャッチコピーを中央揃えに */
  .hero__copy-cta {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    bottom: clamp(40px, 12vh, 100px) !important; /* 少し余裕を残して配置 */
    text-align: center;
    align-items: center;  /* 中央揃え */
    max-width: 90%;
  }

  .hero__copy-cta span {
    text-align: center;
    font-size: clamp(16px, 5.5vw, 24px);
    line-height: 1.4;
  }
}

/* =========================
   SP HERO Copy 修正パッチ
   ========================= */
@media (max-width: 959px) {
  .hero__copy-cta {
    position: absolute;
    left: 50% !important;
    bottom: clamp(60px, 14vh, 120px) !important;
    transform: translateX(-50%) !important; /* 中央寄せ */
    text-align: center !important;
    align-items: center !important;
    max-width: 92%;
    right: auto !important; /* 右指定を無効化 */
  }

  .hero__copy-cta span {
    display: block;
    text-align: center;
    font-size: clamp(16px, 5vw, 22px);
    line-height: 1.5;
  }
}

/* ヒーローは Ripples の対象にする */
.hero--aqua {
  background-size: cover;
  background-position: 50% 50%;
}

/* Ripples 有効時は自前Canvasを隠す（フォールバック二重描画を防ぐ） */
.hero--aqua.is-ripples-on #water-canvas { display: none !important; }

.hero--aqua {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --- HERO background lock (final wins) --- */
.hero--aqua{
  background: #e9f6ff url("{{ file_root_path }}/img/bg-water-texture.jpg") center / cover no-repeat !important;
}

/* ほんの少しだけ視認性を底上げしたい場合（任意） */
.hero--aqua { filter: contrast(1.06) saturate(1.04); }

/* 基本（PCは2行表示にする） */
.hero__copy-cta .line-2,
.hero__copy-cta .line-3 {
  display: inline;   /* 同じ行に置ける */
}

/* 改行を入れたいときは block にする */
.hero__copy-cta span {
  display: block;    /* 1行目は常に改行 */
}

/* --- SPだけ3行に分ける --- */
@media (max-width: 767px) {
  .hero__copy-cta .line-2,
  .hero__copy-cta .line-3 {
    display: block;  /* SPでは改行させる */
  }
}

/* ===== Hero copy: PC=2行 / SP=3行（最終優先） ===== */

/* PC（768px以上）：1行目を折り、2・3行目は同じ段に並べる */
@media (min-width: 768px) {
  .hero__copy-cta{
    display: flex;           /* 既存のcolumnを上書き */
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.3em;              /* 句読点の詰まりを少しだけ調整（任意） */
  }
  .hero__copy-cta span{
    display: inline;         /* 途中で block を当てている箇所を無効化 */
  }
  .hero__copy-cta span:first-child{
    flex-basis: 100%;        /* ← ここで1段目を占有させて改行を作る */
    width: 100%;
  }
}

/* SP（～767px）：3行に積む */
@media (max-width: 767px) {
  .hero__copy-cta{
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .hero__copy-cta span{
    display: block;
  }
}

/* ===== SP: ヒーローコピーを必ず3行に固定 ===== */
@media (max-width: 767px) {
  .hero__copy-cta{
    max-width: min(92vw, 560px);
  }
  .hero__copy-cta span{
    display: block;
    white-space: nowrap;      /* ← 行内改行を禁止 */
    text-wrap: nowrap;        /* ← 追加の保険（対応ブラウザ用） */
    word-break: keep-all;     /* ← 句読点後での改行を抑止 */
    letter-spacing: .02em;    /* ← 折返し回避の微調整（任意） */
    font-size: clamp(18px, 6.2vw, 28px); /* はみ出す場合の保険 */
  }
}

/* ===== SP HERO Copy：余白を削って文字を大きく見せる ===== */
@media (max-width: 767px) {
  .hero__copy-cta {
    left: clamp(6px, 2vw, 12px) !important;   /* ← 左余白を削る */
    right: clamp(6px, 2vw, 12px) !important;  /* ← 右余白も削る */
    max-width: 98%;                           /* ← 横幅をほぼフルで確保 */
  }

  .hero__copy-cta span {
    white-space: nowrap;   /* 句読点で勝手に折返させない */
    text-wrap: nowrap;
    word-break: keep-all;
  }
}

/* ===== SP: ヒーローコピーを中央に固定して余白だけ詰める ===== */
@media (max-width: 767px) {
  .hero__copy-cta{
    /* 中央寄せに統一（left/right の競合を打ち消す） */
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;

    /* 横幅を広く確保しつつ、左右の余白だけ薄く */
    width: min(96vw, 560px);
    padding-inline: clamp(6px, 2vw, 12px);

    text-align: center;
    align-items: center;
    gap: 8px;
  }
  .hero__copy-cta span{
    display: block;
    white-space: nowrap;   /* 3行固定 */
    text-wrap: nowrap;
    word-break: keep-all;
  }
}

@media (max-width: 767px) {
  .hero__copy-cta span {
    font-size: clamp(24px, 8.5vw, 40px); /* ← ここで大きさを上げる */
    line-height: 1.2;                    /* 行間を少し詰めて収める */
    letter-spacing: -.09em;                  /* ← 文字間を狭く（デフォルトに近い） */
  }

  .hero__copy-cta {
    width: min(98vw, 600px);             /* 横幅を広めに確保 */
    padding-inline: clamp(4px, 2vw, 10px); /* 端の余白をさらに薄く */
  }
}

/* SPだけ <br> を有効化（PCでは無効） */
.br-sp { display: none; }
@media (max-width: 767px) { .br-sp { display: inline; } }

/* 2行目に“1回だけ”グラデーションを適用 */
.hero__copy-cta .line-2{
  background: linear-gradient(135deg, #677cc0, #3c4568);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}

/* 既存の分割用クラスが残っていても無効化しておく（保険） */
.hero__copy-cta .line-3 { display: inline !important; } /* 使わない想定 */

.hero__product {
  z-index: 1000;
}

/* staging fail-safe */
.hero__product{ opacity:1 !important; }

/* ===== Modal (centered panel) ===== */
.modal {
  position: fixed; inset: 0; z-index: 1000;
  display: grid;
  place-items: center;                 /* ← パネルを中央に配置 */
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s ease;
}


.modal__backdrop {
  position: fixed; inset: 0;
  background: rgba(10,13,20,.55);     /* ← 透明にしない（濃さはお好みで） */
  z-index: 0;
}

.modal__panel {
  z-index: 1;
  display: flex; flex-direction: column;

  /* ★ここが効いていなかったので巨大化していました */
  width: min(92vw, 760px);
  max-height: min(88vh, 900px);
  background: #fff;                    /* ← 白背景に戻す */
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);

  transform: translateY(12px) scale(.98);
  opacity: 0;
  transition:
    transform .36s cubic-bezier(.2,.6,.2,1),
    opacity   .36s ease;
  will-change: transform, opacity;
  contain: paint;
}

.modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-line);
}

.modal__title {
  margin: 0; font-weight: 700; letter-spacing: .02em; font-size: 16px;
}

.modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal.is-open .modal__panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal__close {
  appearance: none; 
  border: 0; 
  background: transparent; 
  cursor: pointer;
  width: 40px; 
  height: 40px; 
  border-radius: 999px;
  display: grid; 
  place-items: center; 
  font-size: 22px;
  color: #111 !important;         /* 文字色を固定 */
  -webkit-tap-highlight-color: transparent; /* iOSの青いタップ波紋を無効化 */
  outline: none;                   /* 既定のフォーカス輪郭を消す */
}

.modal__close:hover,
.modal__close:active {
  color: #111 !important;
  background: #f3f4f6;
}

.modal__body {
  padding: 40px;
  flex: 1;                     /* ← panel 内で余った高さを使う */
  overflow-y: auto;            /* ← 縦スクロール */
  overflow-x: hidden;
  line-height: 1.9;
}

/* ユーザーが「動きを減らす」設定ならアニメを無効化 */
@media (prefers-reduced-motion: reduce){
  .modal, .modal__panel { transition: none !important; }
}

/* フェードインさせているULだけ、点とインデントを消す */
.fade-in-list {
  list-style: none;   /* 点を消す */
  padding-left: 0;    /* 左の余白も消す */
  margin: 0;
}

html.scroll-lock, body.scroll-lock { overflow: hidden; }
body.scroll-lock { padding-right: var(--scrollbar, 0px); }  /* スクロールバー幅分を補填 */


.modal__body img { max-width: 100%; height: auto; display: block; }

/* === Modal content typography (optional) === */
.modal__body .feature-wrap { display: grid; gap: 28px; }
.modal__body h4 { font-size: 18px; margin: 4px 0; }
.modal__body p { margin: 0; }
.modal__body ul { 
  margin: 0; 
  padding-left: 1.2em; 
  font-size: 20px;
  font-weight: 500;
}
.modal__body li { 
  margin: .1em 0; 
}
.modal__body figure { margin: 0; }
.modal__body figure img { width: 100%; height: auto; display: block; }
.modal__body figcaption { font-size: 12px; color: #666; margin-top: 6px; }

/* 表（％）と番号リスト */
.mr-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mr-table th, .mr-table td { padding: 8px 10px; border-bottom: 1px solid #eee; }
.mr-ol { margin: 0; padding-left: 1.4em; }
.mr-ol li { margin: .25em 0; }

/* --- 一行ずつフェードイン --- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 速度と間隔を変えたい時はこの2つの数値だけ触ればOK */
.fade-in-list { 
  --fade-duration: 10s;   /* 1行あたりの再生時間（ゆっくり） */
  --stagger: 800ms;        /* 順番の遅延間隔（ゆっくり） */
}

.fade-in-list li { opacity: 0; }                 /* 初期は非表示 */
.fade-in-list.is-live li {
  animation: fadeUp .48s ease both;
}

/* 遅延（4行分）— 必要なら増やしてOK */
.fade-in-list.is-live li:nth-child(1) { animation-delay: 0ms; }
.fade-in-list.is-live li:nth-child(2) { animation-delay: 140ms; }
.fade-in-list.is-live li:nth-child(3) { animation-delay: 280ms; }
.fade-in-list.is-live li:nth-child(4) { animation-delay: 420ms; }

/* STEP説明（画像の下に左右2カラムで配置） */
.steps-caption {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 12px;
}
.steps-caption h5 {
  margin: 0 0 6px;
  font-size: 14px;
  letter-spacing: .08em;
  font-weight: 700;
}
.steps-caption p {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
}
/* SPは縦並び */
@media (max-width: 640px){
  .steps-caption { grid-template-columns: 1fr; gap: 14px; }

  .modal__body p { font-size: clamp(14px, 2.8vw, 16px); }

}