@charset "UTF-8";

/* ================================================
   W2 Reset CSS
   W2プラットフォームの不要要素を非表示化
================================================ */

.p-product-list__category-title { display: none; }
.reccomend_bnr_content { display: none; }
#container { padding-top: 0 !important; }
.p-product-list__category-info {
  background: transparent;
  padding: 0;
  text-align: unset;
  margin-bottom: 0;
  margin: 0;
}
.c-top-button,
.c-top-button_ranking { display: none !important; }
.details_search-button-wrap { display: none !important; }
.p-foot-banner { display: none; }
.l-side-menu { display: none; }
.l-product-list .l-main { flex: 100%; max-width: 100%; }
.l-container { max-width: 100%; padding-right: 0; padding-left: 0; }
.l-header { display: none; }
.p-header { display: none; }
footer { display: none; }
.p-ext.tokusho { display: none; }
.longbnr_section { display: none; }
.l-section--medium { margin-top: 0 !important; }
#ItemList { margin: 0 auto; background-color: #fff; padding: 3%; }
#itemListCategory span { color: transparent !important; border: 0 !important; padding: 0 !important; }
#itemListCategory a { pointer-events: none; }
.c-product-list__image img { border-radius: 0 !important; }
.c-product-list__brand-tag { background: transparent; }
.p-gnav { max-width: 100% !important; }
@media screen and (min-width: 768px) {
  .feature-page-detail__article { max-width: 100% !important; }
  .feature-item-list { max-width: 100rem !important; margin: 0 auto !important; }
}

/* ================================================
   LP Base
================================================ */

:root {
  --c-yukata:     #864A64;
  --c-jinbei:     #4B7986;
  --c-navy:       #1e3a4c;
  --c-navy-light: #2d5270;
  --c-gold:       #c8874a;
  --c-gold-dark:  #b0723d;
  --c-text:       #333333;
  --c-text-mid:   #555555;
  --c-text-light: #888888;
  --c-bg:         #ffffff;
  --c-bg-warm:    #fdf9f5;
  --c-bg-cool:    #f3f7fa;
  --c-bg-pink:    #fdf5f7;
  --c-border:     #e0dbd5;
  --font-serif:   'Noto Serif JP', '游明朝', 'YuMincho', serif;
  --font-sans:    'Noto Sans JP', 'ヒラギノ角ゴ Pro', sans-serif;
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body, html {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--c-bg);
}

body {
  font-family: var(--font-sans);
  color: var(--c-text);
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
  margin: 0;
  padding: 0;
}

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

a { text-decoration: none; color: inherit; }

/* 画像未配置のフォールバック */
img[src=""],
img:not([src]) {
  background: #ece8e2;
  min-height: 80px;
}

/* ================================================
   LP Wrapper
================================================ */

#lp-wrap {
  max-width: 750px;
  margin: 0 auto;
  background: var(--c-bg);
  overflow: hidden;
}

/* ================================================
   ① Hero
================================================ */

.hero {
  width: 100%;
  background: #f4f0ea;
  position: relative;
}

.hero__kv {
  width: 100%;
  display: block;
}

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

/* ================================================
   ② キャッチコピー
================================================ */

.catch {
  background: var(--c-bg-warm);
  padding: 56px 28px 52px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.catch::before {
  content: 'SUMMER';
  position: absolute;
  bottom: -0.12em;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-sans);
  font-size: 5.5rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--c-text);
  opacity: 0.03;
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
  user-select: none;
}

.catch__en {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  color: var(--c-text-light);
  text-transform: uppercase;
  margin-bottom: 18px;
}

.catch__heading {
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.3;
  margin: 0 0 16px;
}

.catch__heading .col-yukata { color: var(--c-yukata); }
.catch__heading .col-jinbei { color: var(--c-jinbei); }

.catch__year {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.42em;
  color: var(--c-text-light);
  margin-bottom: 28px;
}

.catch__divider {
  width: 32px;
  height: 1px;
  background: var(--c-border);
  margin: 0 auto 24px;
}

.catch__lead {
  font-size: 0.875rem;
  color: var(--c-text-mid);
  line-height: 2;
  max-width: 320px;
  margin: 0 auto;
  text-align: center;
}

/* ================================================
   ③ アンカーボタン
================================================ */

.anchor-nav {
  background: var(--c-bg);
  padding: 28px 16px;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

.anchor-nav__label {
  text-align: center;
  font-size: 0.58rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-text-light);
  margin: 0 0 12px;
}

.anchor-nav__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  max-width: 400px;
  margin: 0 auto;
}

.anchor-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 18px 8px 16px;
  position: relative;
  overflow: hidden;
  transition: background 0.22s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.anchor-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  transition: width 0.32s var(--ease-out);
}

.anchor-btn:hover::after,
.anchor-btn:focus::after { width: 100%; }
.anchor-btn:active { opacity: 0.7; }

.anchor-btn--yukata {
  border: 1.5px solid rgba(134, 74, 100, 0.3);
  background: rgba(134, 74, 100, 0.05);
}
.anchor-btn--yukata::after { background: var(--c-yukata); }
.anchor-btn--yukata:hover  { background: rgba(134, 74, 100, 0.1); }

.anchor-btn--jinbei {
  border: 1.5px solid rgba(75, 121, 134, 0.3);
  background: rgba(75, 121, 134, 0.05);
}
.anchor-btn--jinbei::after { background: var(--c-jinbei); }
.anchor-btn--jinbei:hover  { background: rgba(75, 121, 134, 0.1); }

.anchor-btn--school {
  border: 1.5px solid rgba(30, 58, 76, 0.22);
  background: rgba(30, 58, 76, 0.04);
}
.anchor-btn--school::after { background: var(--c-navy); }
.anchor-btn--school:hover  { background: rgba(30, 58, 76, 0.08); }

.anchor-btn__label {
  display: block;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.3;
}

.anchor-btn--yukata .anchor-btn__label { color: var(--c-yukata); }
.anchor-btn--jinbei .anchor-btn__label { color: var(--c-jinbei); }
.anchor-btn--school .anchor-btn__label { color: var(--c-navy); }

.anchor-btn__sub {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--c-text-light);
  margin-top: 4px;
}

/* ================================================
   CTA ボタン（共通）
================================================ */

.cta-block {
  padding: 36px 24px;
  text-align: center;
  background: var(--c-bg-cool);
}

.cta-block--dark {
  background: var(--c-bg-cool);
  padding: 56px 24px;
}

.cta-block__title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.8;
  margin: 0;
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 17px 40px;
  border-radius: 50px;
  width: 100%;
  max-width: 320px;
  background: var(--c-gold);
  background-size: 200% auto;
}

.cta-btn:active {
  opacity: 0.88;
  transform: scale(0.98);
}

.cta-btn::after {
  content: '›';
  font-size: 1.15rem;
  line-height: 1;
}

.cta-btn--outline {
  background: #333;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 1);
  box-shadow: none;
  animation: none;
  margin-top: 12px;
}

.cta-btn--yukata {
  background: var(--c-yukata);
}

.cta-btn--jinbei {
  background: var(--c-jinbei);
}

.cta-btn--outline:active {
  background: rgba(255, 255, 255, 0.1);
}

/* ================================================
   セクション共通
================================================ */

.lp-sec {
  padding: 60px 0 48px;
  background: var(--c-bg);
}

.lp-sec--warm { background: var(--c-bg-warm); }
.lp-sec--pink { background: var(--c-bg-pink); }
.lp-sec--cool { background: var(--c-bg-cool); }

/* セクション見出し */
.sec-head {
  text-align: center;
  padding: 0 24px 44px;
  position: relative;
  overflow: hidden;
}

.sec-head__en {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-text-light);
  margin-bottom: 10px;
  position: relative;
}

.sec-head__ja {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.2;
  margin: 0 0 16px;
  position: relative;
}

.sec-head__ja--yukata { color: var(--c-yukata); }
.sec-head__ja--jinbei { color: var(--c-jinbei); }
.sec-head__ja--school { color: var(--c-navy); }

.sec-head__bar {
  width: 0;
  height: 2px;
  border-radius: 1px;
  margin: 0 auto;
  transition: width 1s var(--ease-out) 0.1s;
}

.sec-head__bar.is-show { width: 40px; }

.sec-head__bar--yukata { background: var(--c-yukata); }
.sec-head__bar--jinbei { background: var(--c-jinbei); }
.sec-head__bar--school { background: var(--c-navy); }

/* メイン画像 */
.sec-main-img {
  width: 100%;
  margin-bottom: 40px;
  overflow: hidden;
}

.sec-main-img img {
  width: 100%;
  height: auto;
  display: block;
  min-height: 260px;
  transition: transform 0.7s var(--ease-out);
}

.lp-sec--pink .sec-main-img {
  background: var(--c-bg-pink);
}

.lp-sec--warm .sec-main-img {
  background: var(--c-bg-warm);
}

.lp-sec--cool .sec-main-img {
  background: var(--c-bg-cool);
}

@media screen and (min-width: 768px) {
  .sec-main-img img { padding: 0 16px; }
}

/* .sec-main-img:hover img { transform: scale(1.025); } */

/* コピーテキスト */
.sec-copy {
  padding: 0 28px 40px;
}

.sec-copy__catch {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: 0.06em;
  line-height: 1.75;
  margin: 0 0 16px;
  padding-left: 14px;
  border-left: 3px solid var(--c-border);
}

.lp-sec--warm .sec-copy__catch { border-left-color: var(--c-yukata); }
.lp-sec--pink .sec-copy__catch { border-left-color: var(--c-jinbei); }
.lp-sec--cool .sec-copy__catch { border-left-color: var(--c-navy); }

.sec-copy__body {
  font-size: 0.875rem;
  color: var(--c-text-mid);
  line-height: 2;
  text-align: justify;
}

/* 特集ブロック（2カラム: 画像＋テキスト） */
.sec-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0 16px 40px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--c-border);
  background: #fff;
}

.sec-feature__img {
  overflow: hidden;
}

.sec-feature__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 180px;
}

.sec-feature__text {
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sec-feature__catch {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.55;
  margin: 0 0 10px;
}

.lp-sec--warm .sec-feature__catch { color: var(--c-yukata); }
.lp-sec--pink .sec-feature__catch { color: var(--c-jinbei); }
.lp-sec--cool .sec-feature__catch { color: var(--c-navy); }

.sec-feature__body {
  font-size: 0.84rem;
  color: var(--c-text-mid);
  line-height: 1.9;
  text-align: justify;
}

@media screen and (max-width: 480px) {
  .sec-feature {
    grid-template-columns: 1fr;
  }
}

/* ラインナップ */
.lineup {
  padding: 0 0 32px;
}

.lineup__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 16px 16px;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text-light);
}

.lineup__head::before,
.lineup__head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--c-border);
}

/* スライダー */
.slider__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 10px;
  /* モバイル: 1枚センター表示。12%パディングで左右に見切れ */
  padding: 4px 12% 8px;
}

.slider__track::-webkit-scrollbar { display: none; }

.slider__track .litem {
  flex: 0 0 76%;
  flex-shrink: 0;
  scroll-snap-align: center;
}

@media screen and (min-width: 480px) {
  .slider__track {
    padding: 4px calc(8% - 5px) 8px;
    scroll-padding-left: calc(14% - 5px);
  }
  .slider__track .litem {
    flex: 0 0 42%;
    scroll-snap-align: start;
  }
}

.slider__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 14px 0 4px;
}

.slider__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-border);
  transition: width 0.35s var(--ease-out), background 0.35s, border-radius 0.35s;
  cursor: pointer;
}

.slider__dot.is-active {
  width: 22px;
  border-radius: 3px;
  background: var(--c-text);
}

/* テレポート中・マウスドラッグ中はスナップを無効化 */
.slider__track[data-teleporting],
.slider__track[data-dragging] {
  scroll-snap-type: none !important;
}

.slider__track {
  cursor: grab;
}

.slider__track[data-dragging] {
  cursor: grabbing;
  user-select: none;
}

.litem {
  background: var(--c-bg);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--c-border);
}

.litem__img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  background: #ece8e2;
}

.litem__body {
  padding: 10px 12px 14px;
}

.litem__brand {
  font-size: 0.65rem;
  color: var(--c-text-light);
  letter-spacing: 0.05em;
  margin-bottom: 3px;
}

.litem__name {
  font-size: 0.8rem;
  color: var(--c-text);
  line-height: 1.4;
}

/* セクション内CTAボタン */
.sec-cta {
  padding: 0 24px 8px;
  text-align: center;
}

/* サイズバッジ（sec-head 内） */
.sec-size-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 4px;
  padding: 7px 20px;
  margin-top: 16px;
}
.lp-sec--warm .sec-size-badge {
  color: var(--c-yukata);
  background: rgba(134, 74, 100, 0.07);
  border: 1.5px solid rgba(134, 74, 100, 0.25);
}
.lp-sec--pink .sec-size-badge {
  color: var(--c-jinbei);
  background: rgba(75, 121, 134, 0.07);
  border: 1.5px solid rgba(75, 121, 134, 0.25);
}

/* CTA上インフォテキスト */
.sec-cta-note {
  display: block;
  max-width: 400px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--c-text-mid);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 10px 20px;
  margin: 0 auto 16px;
  letter-spacing: 0.02em;
}
.sec-cta-note::before {
  content: '✓ ';
  color: var(--c-gold);
}

/* ================================================
   サイズガイド
================================================ */

.size-guide {
  margin: 0 16px 36px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.size-guide__head {
  background: var(--c-navy);
  padding: 12px 16px;
  text-align: center;
}

.size-guide__head p {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.1em;
  margin: 0;
}

.size-guide__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
  text-align: center;
}

.size-guide__table th {
  background: var(--c-bg-cool);
  color: var(--c-text);
  padding: 7px 4px;
  border: 1px solid var(--c-border);
  font-weight: 700;
  white-space: nowrap;
}

.size-guide__table td {
  padding: 7px 4px;
  border: 1px solid var(--c-border);
  color: var(--c-text-mid);
  white-space: nowrap;
}

.size-guide__note {
  padding: 8px 12px;
  font-size: 0.65rem;
  color: var(--c-text-light);
  text-align: center;
  line-height: 1.6;
  border-top: 1px solid var(--c-border);
}

/* ================================================
   ⑨ LP Footer
================================================ */

.lp-footer {
  display: block; /* W2の footer { display:none } を上書き */
  background: var(--c-navy);
  padding: 44px 24px 64px;
  text-align: center;
}

.lp-footer__shop {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.12em;
  margin: 0 0 8px;
}

.lp-footer__tagline {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.05em;
  margin: 0 0 20px;
}

.lp-footer__brands {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0 0 28px;
  padding: 0 8px;
}

.lp-footer__brand-link {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.6);
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  transition: color 0.2s, border-color 0.2s;
}

.lp-footer__brand-link:hover {
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.4);
}

.lp-footer__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin: 0 0 20px;
}

.lp-footer__link {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.5);
  transition: color 0.2s;
}

.lp-footer__copy {
  display: block;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.05em;
}

/* ================================================
   Animation System
================================================ */

.js-fade {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}

.js-fade--left  { transform: translateX(-26px); }
.js-fade--right { transform: translateX(26px); }
.js-fade--scale { transform: scale(0.94); }

.js-fade.is-show {
  opacity: 1;
  transform: none;
}

/* Stagger delays */
.js-fade[data-delay="50"]  { transition-delay: 0.05s; }
.js-fade[data-delay="100"] { transition-delay: 0.1s;  }
.js-fade[data-delay="150"] { transition-delay: 0.15s; }
.js-fade[data-delay="200"] { transition-delay: 0.2s;  }
.js-fade[data-delay="250"] { transition-delay: 0.25s; }
.js-fade[data-delay="300"] { transition-delay: 0.3s;  }
.js-fade[data-delay="350"] { transition-delay: 0.35s; }

/* ================================================
   Responsive: 480px+
================================================ */

@media screen and (min-width: 480px) {
  .catch__heading        { font-size: 3.6rem; }
  .catch::before         { font-size: 8rem; }
  .sec-head__ja          { font-size: 2.8rem; }
  .sec-head__watermark   { font-size: 6.5rem; }
}