@charset "UTF-8";

/* 2609 テストページ用。既存の style-2608.css は変更しない。
   このファイルだけで表示できるよう、2608 の指定を取り込んだあとに 2609 の差分を置く。 */

/* ========================================
   aden + anais LP (SP 700px)
   ======================================== */

:root {
  --white: #ffffff;
  --black: #000000;
  --gray: #666b6c;
  --lightgray: #f7f7f7;
  --mint: #007378;
  --bgmint: #E5F1EF;
  --lightbgmint: #F2F8F7;
  --lightmint: #b8dfdc;
  --lightblue: #E3EEF4;
  --blue: #152144;
  --mint-soft: #9bbab8;
  --dadway-blue: #009cde;
}

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

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

html,
body {
  margin: 0;
}

/* パンくず */
.pane-topic-path {
  background-color: var(--white);
}

.block-topic-path {
  margin-top: 0 ;
  margin-bottom: 0 ;
}

/* メイン */
.aden {
  --aden-max: 700;
  background-color: var(--lightgray);
  color: var(--gray);
  font-family: "source-han-sans-japanese", "sofia-pro", sans-serif;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

:where(.aden img) {
  width: 100%;
  height: auto;
  display: block;
}

:where(.aden a) {
  color: inherit;
  text-decoration: none;
}

:where(.aden ul) {
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.aden h1, .aden h2, .aden h3, .aden p) {
  margin: 0;
}

.main-wrapper {
  position: relative;
}

.inner {
  width: min(700px, 100%);
  margin-inline: auto;
}

.main-contents {
  position: relative;
  z-index: 1;
  background-color: var(--white);
  --shadow-offset: 15px;
  --shadow-spread: -12px;
  --shadow-blur: 12px;
  --shadow-color: rgba(0, 0, 0, 0.3);
  box-shadow:
    var(--shadow-offset) 0 var(--shadow-blur) var(--shadow-spread) var(--shadow-color),
    calc(var(--shadow-offset) * -1) 0 var(--shadow-blur) var(--shadow-spread) var(--shadow-color);
}

/* 共通セクションタイトル */
.section-title {
  color: var(--mint);
  font-weight: 700;
  font-size: clamp(24px, 5.14vw, 36px); /* 36px @700 */
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 1.35;
}

.section-title--en {
  font-family: "sofia-pro", "source-han-sans-japanese", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(24px, 6.4vw, 45px); /* 45px @700 */
}

/* ========================================
   FV
   ======================================== */
.fv {
  position: relative;
  background-color: var(--lightmint);
  text-align: center;
}

.fv__visual {
  position: relative;
  width: 100%;
}

.fv__visual > img {
  width: 100%;
  height: auto;
  display: block;
}

/* Figma: テキストは下帯（約 y944〜）に配置 */
.fv__copy {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 2.5%;
  padding-block: 0 clamp(20px, 4vw, 32px);
  padding-inline: clamp(20px, 6.9vw, 48px);
  text-align: center;
  /* 下帯高さ ≈ 309/1270 */
  height: calc(309 / 1270 * 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(8px, 1.8vw, 13.6px);
}

.fv__title {
  color: var(--mint);
  font-family: "Noto Serif JP", "source-han-sans-japanese", serif;
  font-weight: 700;
  font-size: clamp(18px, 4.3vw, 30px); /* 30px @700 */
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.52);
  margin: 0;
  padding: 0;
  text-align: center;
}

.fv__lead {
  color: var(--gray);
  font-family: "Noto Serif JP", "source-han-sans-japanese", serif;
  font-weight: 600;
  font-size: clamp(11px, 2.85vw, 20px); /* 20px @700 */
  letter-spacing: 0.065em;
  line-height: 1.8;
  text-align: center;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.52);
}

.fv__lead--sub {
  margin-block-start: clamp(4px, 1vw, 8px);
}

/* ========================================
   Anchor
   ======================================== */
.anchor {
  background-color: var(--lightgray);
  padding-block: clamp(32px, 5.5vw, 44px) clamp(40px, 7vw, 56px);
  padding-inline: clamp(20px, 4.5vw, 32px);
}

.anchor__text {
  color: var(--gray);
  font-size: clamp(12px, 2.3vw, 19px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 2;
  text-align: center;
  line-height: 1.7;
}

.anchor .anchor__list {
  margin-block-start: clamp(32px, 5.5vw, 47px);
  display: grid;
  gap: clamp(10px, 2vw, 14px);
}

.anchor__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--mint);
  color: var(--white);
  font-weight: 900;
  font-size: clamp(13px, 3.14vw, 22px); /* 22px @700 */
  letter-spacing: 0.06em;
  min-height: clamp(48px, 9.25vw, 64.8px); /* 65px @700 */
  border-radius: 0;
  padding-inline: 16px 36px;
  text-decoration: none;
  transition: opacity 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
}

.anchor__btn:hover,
.anchor__btn:focus-visible {
  opacity: 0.9;
  text-decoration: none;
}

.anchor__btn .anchor__icon {
  position: absolute;
  inset-inline-end: clamp(12px, 3vw, 20px);
  inset-block-start: 50%;
  transform: translateY(-50%);
  width: clamp(13.6px, 3vw, 21.6px);
  height: auto;
  flex-shrink: 0;
}

/* ========================================
   gelato pique
   ======================================== */
.gelatopique {
  position: relative;
  background-color: var(--lightblue);
  padding-block: clamp(56px, 12vw, 84px) clamp(36px, 7.4vw, 52px);
  padding-inline: clamp(32px, 6.9vw, 48px);
  text-align: center;
}

.gelatopique__badge {
  position: absolute;
  inset-block-start: clamp(12px, 2vw, 20px);
  inset-inline-start: clamp(12px, 2.5vw, 20px);
  width: clamp(80px, 16.7vw, 117px);
  z-index: 1;
}

.gelatopique__img {
  width: 100%;
}

.gelatopique__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 536px);
  margin-block-start: clamp(16px, 5.7vw, 40px);
  margin-inline: auto;
  gap: 8px;
  background-color: var(--blue);
  color: var(--white);
  font-family: "sofia-pro", "source-han-sans-japanese", sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 4.57vw, 32px); /* 32px @700 */
  letter-spacing: 0.05em;
  min-height: clamp(48px, 11.5vw, 80.8px); /* 81px @700 */
  padding-inline: 36px 36px;
  border-radius: 60px;
  text-decoration: none;
  transition: opacity 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
}

.gelatopique__btn:hover,
.gelatopique__btn:focus-visible {
  opacity: 0.9;
  text-decoration: none;
}

.gelatopique__btn img {
  position: absolute;
  inset-inline-end: clamp(12px, 3vw, 20px);
  inset-block-start: 50%;
  transform: translateY(-50%);
  width: 11.2px;
  height: auto;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}

/* ========================================
   Line compare
   ======================================== */
.info-line {
  background-color: var(--white);
  padding-block-start: clamp(40px, 7vw, 56px);
  content-visibility: auto;
  contain-intrinsic-size: auto 1400px;
}

.line-compare {
  margin-block-start: clamp(24px, 4.5vw, 36px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0;
  row-gap: 0;
  position: relative;
  overflow: clip;
  /* 2カラム背景を連続させる */
  background: linear-gradient(
    to right,
    var(--bgmint) 0%,
    var(--bgmint) 50%,
    var(--lightbgmint) 50%,
    var(--lightbgmint) 100%
  );
  box-shadow: inset 0 0 0 1px var(--bgmint);
}

.line-compare__col {
  padding-block: clamp(28px, 7vw, 49px) clamp(8px, 1.5vw, 12px);
  padding-inline: clamp(8px, 1.5vw, 12px);
  text-align: center;
  color: var(--mint);
  background: transparent;
}

.line-compare__col--aden,
.line-compare__col--essentials {
  background: transparent;
}

.line-compare__logo {
  width: min(90%, 257px);
  margin-inline: auto;

  img {
    mix-blend-mode: multiply;
  }
}

.line-compare__name {
  font-weight: 700;
  font-size: clamp(14px, 3.14vw, 22px); /* 22px */
  letter-spacing: 0.1em;
  line-height: 1.35;
  margin-block-start: clamp(12px, 2.5vw, 18px) ;
}

.line-compare__desc {
  font-weight: 500;
  font-size: clamp(12px, 2.7vw, 19px); /* 19px */
  letter-spacing: 0.04em;
  line-height: 1.65;
  margin-block-start: clamp(12px, 2.5vw, 18px) ;
}

.line-compare__pill {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-block-start: clamp(24px, 5.7vw, 40px);
  position: relative;
  z-index: 1;
  min-block-size: clamp(36px, 7.3vw, 51.2px);
  /* 背景は親のグラデーションを見せる */
  background: transparent;
}

.line-compare__pill span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--lightmint);
  color: var(--mint);
  font-weight: 700;
  font-size: clamp(15px, 3.4vw, 24px); /* 24px */
  letter-spacing: 0.1em;
  min-inline-size: clamp(128px, 29vw, 206px);
  min-block-size: clamp(36px, 7.3vw, 51.2px);
  padding-inline: 24px;
  box-shadow: 0 2px 6px rgba(0, 115, 120, 0.12);
}

.line-compare__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--mint);
  margin-block-start: clamp(24px, 5.7vw, 40px);
  padding-block: clamp(8px, 1.5vw, 12px) clamp(20px, 3.5vw, 28px);
  padding-inline: clamp(6.4px, 1.2vw, 12px);
  background: transparent;

  img {
    mix-blend-mode: multiply;
  }
}

.line-compare__cell--left,
.line-compare__cell--right {
  background: transparent;
}

.line-compare__cell img {
  width: clamp(80px, 20vw, 140px);
}

.line-compare__cell p {
  font-weight: 500;
  font-size: clamp(11px, 2.7vw, 19px);
  letter-spacing: 0.03em;
  line-height: 1.65;
  margin-block-start: 12px;
}

/* ========================================
   Fabrics
   ======================================== */
.fabrics {
  background-color: var(--lightgray);
  padding-block: clamp(40px, 6vw, 48px) clamp(40px, 6vw, 52px);
  padding-inline: clamp(24px, 6.4vw, 45px);
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

.fabrics__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 1.5vw, 12px);
  margin-block-start: clamp(20px, 3.5vw, 28px) ;
}

.fabrics__item {
  text-align: center;
  color: var(--mint);
}

.fabrics__img {
  overflow: hidden;
}

.fabrics__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fabrics__name {
  font-family: "sofia-pro", sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 4vw, 28px); /* 28px */
  letter-spacing: 0.05em;
  line-height: 1.3;
  margin-block-start: 12px;
}

.fabrics__material {
  font-weight: 700;
  font-size: clamp(11px, 2.55vw, 18px); /* 18px */
  letter-spacing: 0.05em;
  line-height: 1.4;
  margin-block-start: 4px;
}

.fabrics__desc {
  font-weight: 500;
  font-size: clamp(10px, 2.15vw, 15px); /* 15px */
  letter-spacing: 0.04em;
  line-height: 1.6;
  margin-block-start: 8px;
  padding-inline: 7%;
  text-align: left;
}

/* ========================================
   Design
   ======================================== */
.design {
  background-color: var(--white);
  padding-block: clamp(40px, 6vw, 52px);
  padding-inline: clamp(16px, 3.5vw, 32px);
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

.design__list {
  display: grid;
  gap: clamp(12px, 2.5vw, 18px);
  margin-block-start: clamp(20px, 3.5vw, 28px);
}

.design__btn {
  display: block;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

.design__btn:hover,
.design__btn:focus-visible {
  opacity: 0.92;
}

/* ========================================
   Variation marquee
   ======================================== */
.variation {
  background-color: var(--lightgray);
  padding-block: clamp(40px, 6vw, 52px) clamp(40px, 9.9vw, 69px);
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

.variation__title {
  color: var(--mint);
  font-weight: 700;
  font-size: clamp(16px, 3.9vw, 27px);
  letter-spacing: 0.08em;
  text-align: center;
  line-height: 1.6;
  padding-inline: 16px;
}

/* index.html / lp.css の variation-wrap に合わせる */
.variation__wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-block-start: clamp(28px, 6.6vw, 46px);
}

.variation-slider {
  overflow: hidden;
  width: 100%;
}

.variation-slider:not(:first-child) {
  margin-block-start: 4%;
}

.variation-slider-track {
  display: flex;
  gap: clamp(12px, 4.1vw, 29px);
  width: max-content;
  animation: variation-scroll-left 80s linear infinite;
  will-change: transform;
}

.variation-slider.reverse .variation-slider-track {
  animation-name: variation-scroll-right;
}

.variation-slider-item {
  flex: 0 0 auto;
  /* lp.css: 300 / 1080 * min(700px, 100vw) */
  width: calc(300 / 1080 * min(700px, 100vw));
}

@keyframes variation-scroll-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes variation-scroll-right {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .variation-slider-track {
    animation: none;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ========================================
   Line Up
   ======================================== */
.lineup {
  background-color: var(--white);
  padding-block: clamp(40px, 6vw, 52px);
  padding-inline: clamp(12px, 2.5vw, 20px);
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}

.lineup__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(6.4px, 1.2vw, 8px);
  margin-block-start: clamp(20px, 3.5vw, 28px);
}

.lineup__grid a:hover,
.lineup__grid a:focus-visible {
  opacity: 0.92;
}

.lineup__btn {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 344 / 194;
  font-weight: 700;
  font-size: clamp(14px, 4.14vw, 29px); /* 29px @700 */
  letter-spacing: 0.06em;
  color: var(--white);
  border-radius: 0;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

.lineup__btn > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lineup__btn--gift {
  background-color: var(--lightmint);
}

.lineup__btn--all {
  background-color: var(--mint-soft);
  color: var(--white);
}

.lineup__text {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.lineup__btn-icon {
  position: absolute;
  inset-inline-end: clamp(9.6px, 2.5vw, 16px);
  inset-block-start: 50%;
  transform: translateY(-50%);
  width: 11.2px;
  height: auto;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}

/* ========================================
   Chosen tabs (:has)
   ======================================== */
.chosen {
  padding-block: clamp(24px, 4vw, 32px) clamp(40px, 6vw, 52px);
  padding-inline: clamp(12px, 2.5vw, 20px);
  content-visibility: auto;
  contain-intrinsic-size: auto 1200px;
}

.chosen__tabs {
  position: relative;
}

.chosen__input {
  position: absolute !important;
  width: 1px ;
  height: 1px ;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0 ;
}

.chosen__tablist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  z-index: 2;
}

.chosen__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(48px, 10.5vw, 73.6px);
  font-weight: 700;
  font-size: clamp(14px, 3.14vw, 22px); /* 22px */
  letter-spacing: 0.08em;
  color: var(--mint);
  cursor: pointer;
  position: relative;
  border: 6px solid transparent;
  /* border-block-end: 6px solid var(--mint-soft); */
  border-radius: 24px 24px 0 0;
  background-color: var(--bgmint);
  transition: background-color 0.2s ease, border-color 0.2s ease;

  @media (max-width: 768px) {
    border-width: 3px;
  }
}

.chosen__panel {
  display: none;
  background-color: var(--lightgray);
  border: 6px solid var(--mint-soft);
  border-block-start: none;
  border-radius: 0 0 12px 12px;
  padding-block: clamp(28px, 5vw, 40px) clamp(24px, 4vw, 32px);
  padding-inline: clamp(12px, 2.5vw, 20px);
  margin-block-start: -2px;
  position: relative;
  z-index: 1;

  @media (max-width: 768px) {
    border-width: 3px;
  }
}

/* :has() でアクティブタブ制御 */
.chosen__tabs:has(#feature-tab-reason:checked) .chosen__tab--reason,
.chosen__tabs:has(#feature-tab-howto:checked) .chosen__tab--howto {
  background-color: var(--lightgray);
  border-color: var(--mint-soft);
  border-block-end: none;
  position: relative;
  z-index: 3;
}

/* 未選択タブ側に下線を差し込む */
.chosen__tabs:has(#feature-tab-reason:checked) .chosen__tab--howto::after,
.chosen__tabs:has(#feature-tab-howto:checked) .chosen__tab--reason::after {
  content: "";
  position: absolute;
  inset-inline: -6px;
  inset-block-end: -6px;
  height: 6px;
  background-color: var(--mint-soft);

  @media (max-width: 768px) {
    inset-inline: -3px;
    inset-block-end: -3px;
    height: 3px;
  }
}

.chosen__tabs:has(#feature-tab-reason:checked) .chosen__panel--reason,
.chosen__tabs:has(#feature-tab-howto:checked) .chosen__panel--howto {
  display: block;
}

.chosen__heading {
  color: var(--mint);
  font-weight: 700;
  font-size: clamp(18px, 4.57vw, 32px); /* 32px */
  letter-spacing: 0.08em;
  text-align: center;
  line-height: 1.5;
}

.chosen__intro {
  color: var(--gray);
  font-weight: 500;
  font-size: clamp(12px, 2.7vw, 19px); /* 19px */
  letter-spacing: 0.06em;
  line-height: 1.65;
  text-align: justify;
  max-width: 36em;
  margin-block-start: clamp(12px, 2.5vw, 20px);
  margin-inline: auto;
}

.chosen__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 2.5vw, 18px) clamp(8px, 1.5vw, 12px);
  margin-block-start: clamp(20px, 4vw, 28px);
}

.chosen__card {
  background-color: var(--white);
  text-align: center;
  border-radius: 8px;
  padding-block-end: clamp(12px, 2.5vw, 20px);
}

.chosen__card-img {
  position: relative;
  z-index: 1;
  aspect-ratio: 276 / 220;
}

.chosen__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
}

.chosen__num {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 50%;
  translate: -50% 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(36px, 8.8vw, 61.6px);
  height: clamp(36px, 8.8vw, 61.6px);
  border-radius: 50%;
  background-color: var(--white);
  color: var(--gray);
  font-family: "sofia-pro", sans-serif;
  font-size: clamp(16px, 4.1vw, 28.8px);
  line-height: 1;
  z-index: 2;
}

.chosen__card-title {
  color: var(--mint);
  font-weight: 700;
  font-size: clamp(12px, 2.4vw, 17px); /* 17px */
  letter-spacing: 0.02em;
  line-height: 1.4;
  margin-block-start: clamp(24px, 5vw, 36px);
  padding-inline: 4px;
}

.chosen__card-body {
  color: var(--gray);
  font-weight: 500;
  font-size: clamp(11px, 2.3vw, 16px); /* 16px */
  letter-spacing: 0.02em;
  line-height: 1.55;
  text-align: justify;
  margin-block-start: 6.4px;
  padding-inline: 8%;
}

.chosen__howto-img {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  margin-block-start: clamp(20px, 4vw, 28px);
}

/* ========================================
   Shop（Figma 41:477）
   ======================================== */
.shop {
  background-color: var(--white);
  padding-block: clamp(40px, 6.9vw, 48px) clamp(48px, 11.7vw, 82px);
  padding-inline: clamp(16px, 3.7vw, 26px);
  content-visibility: auto;
  contain-intrinsic-size: auto 1180px;
}

.shop-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1vw, 8px);
  text-align: center;
  width: 100%;
  min-height: clamp(96px, 18.5vw, 129.6px);
  padding-block: clamp(12px, 2.5vw, 20px);
  padding-inline: clamp(10px, 2.3vw, 16px);
  border-radius: 13px;
  background-color: var(--lightmint);
  text-decoration: none;
  transition: opacity 0.2s ease;

  @media (max-width: 768px) {
    padding-block: clamp(8px, 1.7vw, 10px);
    padding-inline: clamp(8px, 1.5vw, 8px);
  }
}

.shop-btn:hover,
.shop-btn:focus-visible {
  opacity: 0.92;
  text-decoration: none;
}

.shop-btn--full {
  margin-block-start: clamp(40px, 8.9vw, 62px);
}

.shop-btn__top {
  color: var(--white);
  font-weight: 700;
  font-size: clamp(22px, 5.3vw, 37px);
  letter-spacing: 0.025em;
  line-height: 1.1;

  @media (max-width: 768px) {
    font-size: clamp(20px, 4.5vw, 26px);
  }
}

.shop-btn--full .shop-btn__top {
  font-size: clamp(28px, 6.3vw, 44px);
  letter-spacing: 0.025em;

  @media (max-width: 768px) {
    font-size: clamp(22px, 5.6vw, 28px);
  }
}

.shop-btn__bottom {
  color: var(--mint);
  font-weight: 700;
  font-size: clamp(12px, 2.7vw, 19px);
  letter-spacing: 0.05em;
  line-height: 1.3;
}

.shop-btn--full .shop-btn__bottom {
  font-size: clamp(14px, 3.14vw, 22px);
}

.shop-btn__arrow {
  position: absolute;
  inset-inline-end: clamp(8px, 1.7vw, 12px);
  inset-block-start: 50%;
  translate: 0 -50%;
  width: clamp(10px, 1.94vw, 13.6px);
  height: auto;
  filter: brightness(0) invert(1);
}

.shop__sitelogo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 0.8vw, 6px);
  margin-block-start: clamp(24px, 4.6vw, 32px);
}

.shop__sitelogo--dadway {
  margin-block-start: clamp(40px, 7.9vw, 55px);
}

.shop__sitelogo img {
  width: clamp(140px, 33.2vw, 232.7px);
  mix-blend-mode: multiply;
}

.shop__sitelogo--dadway img {
  width: clamp(100px, 22.5vw, 157.5px);
  mix-blend-mode: normal;
}

.shop__sitelabel {
  color: var(--mint);
  font-weight: 700;
  font-size: clamp(14px, 3.14vw, 22px);
  letter-spacing: 0.05em;
  line-height: 1;
}

.shop__sitelabel--blue {
  color: var(--dadway-blue);
}

.shop__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 1.85vw, 13px) clamp(10px, 1.8vw, 12.4px);
  margin-block-start: clamp(20px, 4.1vw, 29px);
}

/* ========================================
   Brand
   ======================================== */
.brand {
  background-color: var(--lightmint);
  padding-block: clamp(36px, 8.3vw, 58px) clamp(40px, 7vw, 56px);
  padding-inline: clamp(16px, 3.5vw, 28px);
  text-align: center;
  content-visibility: auto;
  contain-intrinsic-size: auto 1100px;
}

.brand__main {
  width: 100%;
  margin-inline: calc(-1 * clamp(16px, 3.5vw, 28px));
  width: calc(100% + 2 * clamp(16px, 3.5vw, 28px));
}

.brand__logo {
  width: clamp(88px, 21.7vw, 152px);
  margin-block-start: clamp(20px, 3.5vw, 28px);
  margin-inline: auto;

  img {
    mix-blend-mode: multiply;
  }
}

.brand__catch {
  color: var(--mint);
  font-family: "sofia-pro", sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 5vw, 35px); /* 35px */
  letter-spacing: 0.02em;
  line-height: 1.4;
  margin-block-start: clamp(16px, 3vw, 24px);
}

.brand__copy {
  color: var(--mint);
  font-weight: 500;
  font-size: clamp(12px, 2.7vw, 19px); /* 19px */
  letter-spacing: 0.08em;
  line-height: 2;
  margin-block-start: clamp(16px, 3vw, 24px);
}

/* ========================================
   More
   ======================================== */
.more {
  background-color: var(--white);
  padding-block: clamp(40px, 6vw, 56px);
  padding-inline: clamp(16px, 3.5vw, 28px);
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}

.more__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 2.5vw, 20px);
  margin-block-start: clamp(24px, 4vw, 32px);
}

.more__list a {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

.more__list a:hover,
.more__list a:focus-visible {
  opacity: 0.92;
}

/* ========================================
   Instagram
   ======================================== */
.instagram {
  background-color: var(--white);
  padding-block: 0 clamp(32px, 5vw, 44px);
  padding-inline: clamp(24px, 5vw, 40px);
}

.instagram__btn {
  display: block;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

.instagram__btn:hover,
.instagram__btn:focus-visible {
  opacity: 0.92;
}

/* フォーカス可視性 */
.aden a:focus-visible,
.aden label:focus-visible,
.aden .chosen__tab:focus-within {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
}

/* ========================================
   2609 差分
   ======================================== */

/* 2609 ブランドページの追加・差し替え */

.info-line {
  padding-block-start: 0;
}

.info-line__hero {
  position: relative;
}

.info-line__title {
  position: absolute;
  inset-block-start: calc(43 / 406 * 100%);
  inset-inline-start: calc(47 / 700 * 100%);
  color: var(--mint);
  font-weight: 700;
  font-size: clamp(32px, 7.43vw, 52px);
  line-height: 1.15;
  letter-spacing: 0;
  text-align: left;
}

.line-compare {
  margin-block-start: 0;
  padding-block-end: clamp(24px, 5.3vw, 37px);
}

.line-compare__col {
  padding-block: clamp(32px, 8vw, 56px) 0;
}

.line-compare__col--essentials .line-compare__logo {
  width: min(90%, 251px);
}

.line-compare__name {
  margin-block-start: clamp(20px, 5.4vw, 38px);
  font-size: clamp(16px, 3.14vw, 22px);
  line-height: 1;
  letter-spacing: 0.07em;
}

.line-compare__col--essentials .line-compare__name {
  margin-block-start: clamp(14px, 3.4vw, 24px);
  line-height: 1.18;
}

.line-compare__desc {
  margin-block-start: clamp(16px, 4.3vw, 30px);
  font-size: clamp(14px, 2.7vw, 19px);
  line-height: 1.37;
}

.line-compare__row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  margin-block-start: clamp(28px, 7vw, 49px);
}

.line-compare__col + .line-compare__row {
  margin-block-start: clamp(36px, 9.1vw, 64px);
}

.line-compare__row .line-compare__cell {
  display: contents;
  margin-block-start: 0;
  padding: 0;
}

.line-compare__row img {
  height: auto;
  justify-self: center;
  align-self: center;
}

.line-compare__row--size .line-compare__cell--left img {
  width: clamp(76px, 19vw, 133px);
}

.line-compare__row--size .line-compare__cell--right img {
  width: clamp(70px, 17.6vw, 123px);
}

.line-compare__row--weave .line-compare__cell--left img {
  width: clamp(76px, 19.1vw, 134px);
}

.line-compare__row--weave .line-compare__cell--right img {
  width: clamp(82px, 20.4vw, 143px);
}

.line-compare__row--price .line-compare__cell--left img {
  width: clamp(70px, 17.3vw, 121px);
}

.line-compare__row--price .line-compare__cell--right img {
  width: clamp(70px, 17.7vw, 124px);
}

.line-compare__row .line-compare__cell--left img,
.line-compare__row .line-compare__cell--left p {
  grid-column: 1;
}

.line-compare__row .line-compare__cell--right img,
.line-compare__row .line-compare__cell--right p {
  grid-column: 2;
}

.line-compare__row img {
  grid-row: 1;
}

.line-compare__row .line-compare__cell p {
  grid-row: 2;
  margin-block-start: clamp(8px, 1.5vw, 10px);
  padding-inline: clamp(8px, 2vw, 16px);
  font-size: clamp(13px, 2.7vw, 19px);
  line-height: 1.37;
}

.line-compare__row .line-compare__pill {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  z-index: 1;
  margin-block-start: 0;
  min-block-size: 0;
}

.line-compare__pill span {
  min-inline-size: clamp(96px, 18.6vw, 130px);
  min-block-size: clamp(40px, 7.3vw, 51px);
  padding-inline: 8px;
  font-size: clamp(16px, 3.43vw, 24px);
  letter-spacing: 0.09em;
  box-shadow: none;
}

.aden .fabrics__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(8px, 1.7vw, 12px);
}

.aden .fabrics__material {
  letter-spacing: 0.02em;
}

/* 干支コレクション */
.sheep__visual {
  position: relative;
  display: block;
  text-decoration: none;
}

.sheep__title {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: min(579px, 83%);
}

.sheep__dates {
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: 0;
  width: min(291px, 42%);
}

.sheep__schedule {
  position: absolute;
  inset-inline: 4% 8.9%;
  inset-block: 2.6% 8%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  color: var(--mint);
  font-weight: 600;
  text-align: right;
}

.sheep__date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  column-gap: 0.2em;
  line-height: 1;
}

.sheep__date--reserve {
  align-items: flex-end;
  font-size: clamp(28px, 7.7vw, 54px);
  letter-spacing: -0.05em;
  line-height: 0.96;
}

.sheep__date--release {
  font-size: clamp(20px, 4.6vw, 32px);
  letter-spacing: -0.05em;
  line-height: 1.56;
  margin-block-start: clamp(8px, 2.4vw, 17px);
  border-block-start: 1px solid var(--mint);
}

.sheep__date-label {
  font-weight: 600;
}

.sheep__date--reserve .sheep__date-label {
  flex-basis: 100%;
  font-size: 0.81em;
  letter-spacing: 0;
  line-height: 1.18;
}

.sheep__weekday {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.9em;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--mint);
  color: var(--white);
  font-size: 0.37em;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

.sheep__date--reserve .sheep__weekday {
  margin-inline-end: 0.2em;
}

.sheep__date--release .sheep__weekday {
  width: 1.75em;
  margin-block-start: 6px;
  font-size: 0.5em;
}

.sheep__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 80px;
  background-color: var(--mint);
  color: var(--lightgray);
  font-weight: 600;
  font-size: clamp(20px, 4.6vw, 32px);
  letter-spacing: 0.08em;
  line-height: 1;
  transition: opacity 0.2s ease;

  @media (any-hover: hover) {
    &:hover {
      opacity: 0.85;
    }
  }
}

.sheep__more img {
  width: 12px;
  filter: brightness(0) invert(1);
}

/* Design */
.design {
  background-color: var(--white);
  padding-block: clamp(36px, 9.7vw, 68px) clamp(28px, 6vw, 48px);
}

.design__list {
  gap: clamp(12px, 2.9vw, 20px);
  margin-block-start: clamp(20px, 5vw, 35px);
}

.design__list a {
  display: block;
  transition: opacity 0.2s ease;

  @media (any-hover: hover) {
    &:hover {
      opacity: 0.92;
    }
  }
}

/* Style */
.style-block {
  background-color: var(--white);
  padding-block: clamp(28px, 5vw, 40px) clamp(36px, 8vw, 56px);
  padding-inline: clamp(16px, 4.9vw, 34px);
}

.style-block__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 6vw, 42px) clamp(12px, 3.6vw, 25px);
  margin-block-start: clamp(24px, 6.9vw, 48px);
}

.style-block__list a {
  display: block;
  transition: opacity 0.2s ease;

  @media (any-hover: hover) {
    &:hover {
      opacity: 0.92;
    }
  }
}

.style-block__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  margin-block-start: 12px;
  border-radius: 32px;
  background-color: var(--mint);
  color: var(--white);
  font-family: "sofia-pro", "source-han-sans-japanese", sans-serif;
  font-size: clamp(20px, 4.6vw, 32px);
  line-height: 1;
}

.style-block__btn img {
  position: absolute;
  inset-inline-end: 16px;
  inset-block-start: 50%;
  translate: 0 -50%;
  width: 14px;
  filter: brightness(0) invert(1);
}

/* for GIFT */
.gift {
  background-color: var(--white);
  padding-block: clamp(32px, 6.9vw, 48px) clamp(40px, 8vw, 56px);
  text-align: center;
}

.gift__lead {
  margin-block-start: 12px;
  color: var(--mint);
  font-weight: 500;
  font-size: clamp(18px, 3.7vw, 26px);
  letter-spacing: 0.08em;
  line-height: 1.5;
}

.gift__body {
  margin-block-start: 16px;
  color: var(--gray);
  font-size: clamp(15px, 3.1vw, 22px);
  line-height: 1.45;
}

.gift__note {
  font-size: clamp(12px, 2.3vw, 16px);
  line-height: 2;
}

.gift__photo {
  margin-block-start: clamp(20px, 5.8vw, 41px);
}

.gift__reviews {
  padding-inline: clamp(16px, 5.7vw, 40px);
}

.gift__review {
  position: relative;
  width: min(490px, 100%);
  margin-block-start: clamp(16px, 2.9vw, 20px);
  padding: 20px 72px 16px 24px;
  border: 2px solid var(--lightmint);
  border-radius: 20px;
  background-color: var(--lightbgmint);
  box-shadow: 4px 4px 0 var(--lightmint);
  text-align: left;
}

.gift__review--end {
  margin-inline-start: auto;
}

.gift__stars {
  color: #e8b931;
  font-size: 22px;
  letter-spacing: 0.14em;
  line-height: 1.45;
}

.gift__comment {
  margin-block-start: 4px;
  color: var(--gray);
  font-size: clamp(14px, 2.6vw, 18px);
  line-height: 1.56;
}

.gift__avatar {
  position: absolute;
  inset-inline-end: 12px;
  inset-block-start: 12px;
  width: 64px;
  border-radius: 50%;
}

.gift__source {
  margin-block-start: 12px;
  padding-inline: clamp(16px, 5.7vw, 40px);
  color: var(--gray);
  font-size: 14px;
  line-height: 1.4;
  text-align: right;

  @media (max-width: 768px) {
    font-size: 10px;
  }
}

.gift__wrap {
  position: relative;
  width: min(620px, calc(100% - 40px));
  margin-block-start: 68px;
  margin-inline: auto;
  padding: 28px 180px 20px 24px;
  border-radius: 20px;
  background-color: var(--bgmint);
  text-align: left;

  @media (max-width: 768px) {
    padding: 16px 100px 16px 20px;
  }
}

.gift__wrap-photo {
  position: absolute;
  inset-inline-end: 28px;
  inset-block-start: -48px;
  width: min(204px, 34vw);
  border-radius: 50%;

  @media (max-width: 768px) {
    width: min(154px, 30vw);
    inset-inline-end: 16px;
    inset-block-start: -28px;

  }
}

.gift__wrap-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.gift__wrap-icon {
  width: 49px;
  flex-shrink: 0;

  @media (max-width: 768px) {
    width: 25px;
  }
}

.gift__wrap-title {
  color: var(--mint);
  font-weight: 500;
  font-size: clamp(18px, 3.7vw, 26px);
  line-height: 1.23;

  @media (max-width: 768px) {
    font-size: 16px;
  }
}

.gift__wrap-note {
  margin-block-start: 12px;
  color: var(--gray);
  font-size: 14px;
  line-height: 1.43;

  @media (max-width: 768px) {
    font-size: 10px;
  }
}

/* 店舗バッジ */
.shop-btn--feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "top marks"
    "bottom marks";
  align-items: center;
  justify-items: center;
  column-gap: clamp(8px, 2vw, 16px);
  row-gap: 2px;
  min-height: clamp(148px, 25.7vw, 180px);
  margin-block-start: clamp(16px, 3vw, 24px);
  padding-inline: clamp(12px, 3vw, 20px) clamp(36px, 7vw, 54px);
  
  @media (max-width: 768px) {
    min-height: clamp(124px, 25.7vw, 160px);
    padding-inline: clamp(8px, 1.7vw, 12px) clamp(40px, 4.5vw, 52px);
  }
}

.shop-btn--feature .shop-btn__top {
  grid-area: top;
  align-self: end;
}

.shop-btn--feature .shop-btn__bottom {
  grid-area: bottom;
  align-self: start;
}

.shop-btn__marks {
  grid-area: marks;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(8px, 3vw, 20px);
  padding-block-start: 8px;
}

.shop-mark {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(64px, 14vw, 108px);
}

.shop-mark img {
  width: 100%;
  height: auto;
  border-radius: 50%;
}

.shop-mark__tag {
  position: absolute;
  inset-block-start: -5px;
  inset-inline-start: 50%;
  translate: -50% 0;
  min-width: clamp(64px, 11.4vw, 80px);
  padding: 2px 8px;
  border-radius: 20px;
  background-color: var(--mint);
  color: var(--white);
  font-size: clamp(11px, 2vw, 14px);
  font-weight: 500;
  line-height: 1.43;
  text-align: center;
  white-space: nowrap;
}

.shop-mark__caption {
  margin-block-start: 5px;
  width: 130%;
  color: var(--white);
  font-size: clamp(11px, 2.4vw, 16px);
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
}

.shop-btn__top--line {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: calc(100% - 16px);
}

.shop-btn__top-brand {
  line-height: 1.1;
  white-space: nowrap;
}

.shop-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 72px;
  min-height: 32px;
  padding-inline: 6px;
  border-radius: 20px;
  background-color: var(--white);
  color: var(--mint);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;

  @media (max-width: 768px) {
    font-size: 9px;
    min-width: 56px;
    min-height: 24px;
  }
}

.shop-btn--dadway {
  min-height: clamp(110px, 18.5vw, 130px);

  @media (max-width: 768px) {
    min-height: clamp(88px, 20vw, 100px);
  }
}

.shop-side {
  position: absolute;
  inset-inline-end: 12.5%;
  inset-block-start: 6px;
  width: clamp(64px, 12.9vw, 90px);
}

.shop-side__caption {
  position: absolute;
  inset-block-start: calc(100% + 3px);
  inset-inline-start: 50%;
  translate: -50% 0;
  width: 170%;
  color: var(--white);
  font-size: clamp(12px, 2.57vw, 18px);
  font-weight: 600;
  line-height: 1.11;
  text-align: center;
  white-space: nowrap;
}

.shop__grid .shop-btn:only-child {
  grid-column: 1;
}