@charset "UTF-8";
/* ── こだわり（縦積み）／ネイビー × 白テキスト ── */

.kodawari-slide{
  position:relative;
  background:
    linear-gradient(180deg,#0f0f1f 0%,rgba(15,15,31,.88) 18%,rgba(15,15,31,.72) 48%,rgba(15,15,31,.9) 100%),
    url("../image/kodawari_bg.jpg") center top/cover no-repeat,
    var(--navy,#0f0f1f);
  font-family:var(--font-mincho);
  line-height:normal;
}
.kodawari-slide::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(12,20,36,.45) 0%,rgba(26,39,68,.28) 45%,rgba(15,15,31,.5) 100%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  background-size:auto,140px 140px;
  opacity:1;
  pointer-events:none;
}
.kodawari-slide::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:0;
  height:calc(280/750*var(--lp-vw));
  background:linear-gradient(180deg,transparent 0%,rgba(15,15,31,.55) 50%,rgba(15,15,31,.92) 80%,#0f0f1f 100%);
  pointer-events:none;
}
.kodawari-slide__intro{
  position:relative;
  z-index:1;
  overflow:hidden;
  padding:calc(40/750*var(--lp-vw)) calc(41/750*var(--lp-vw)) calc(36/750*var(--lp-vw));
}
.kodawari-slide__scroll{
  position:relative;
  z-index:0;
  width:calc(100% + calc(82/750*var(--lp-vw)));
  margin:min(calc(-8/750*var(--lp-vw)),-6px) 0 calc(5/750*var(--lp-vw)) calc(-1 * calc(41/750*var(--lp-vw)));
  overflow:hidden;
  line-height:1;
}
.kodawari-slide__scroll-track{
  display:flex;
  width:max-content;
  align-items:center;
  animation:kodawariSlideScroll 84s linear infinite;
}
.kodawari-slide__scroll-row{
  display:flex;
  flex-shrink:0;
  align-items:center;
  margin:0;
}
.kodawari-slide__scroll-row span{
  display:block;
  font-family:var(--font-mincho);
  font-size:calc(178/750*var(--lp-vw));
  font-weight:500;
  letter-spacing:.04em;
  line-height:1;
  color:rgba(255,255,255,.08);
  white-space:nowrap;
  padding:.06em 0;
}
@keyframes kodawariSlideScroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
.kodawari-slide__title{
  position:relative;
  z-index:1;
  margin:calc(10/750*var(--lp-vw)) 0 0;
  font-size:calc(62/750*var(--lp-vw));
  font-weight:700;
  letter-spacing:.12em;
  line-height:1.4;
  color:rgba(255,255,255,.94);
}
.kodawari-slide__lead{
  position:relative;
  z-index:1;
  margin:calc(20/750*var(--lp-vw)) 0 0;
  font-size:calc(32/750*var(--lp-vw));
  font-weight:500;
  letter-spacing:.05em;
  line-height:1.9;
  color:rgba(255,255,255,.78);
}
.kodawari-slide__list{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:calc(32/750*var(--lp-vw));
  padding:0 calc(41/750*var(--lp-vw)) calc(55/750*var(--lp-vw));
}
.kodawari-slide__panel{
  width:100%;
}
.kodawari-slide__panel-inner{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:calc(27/750*var(--lp-vw)) calc(27/750*var(--lp-vw)) calc(27/750*var(--lp-vw)) calc(23/750*var(--lp-vw));
  background:rgba(255,255,255,.96);
  border-radius:calc(18/750*var(--lp-vw));
  box-shadow:
    0 calc(9/750*var(--lp-vw)) calc(32/750*var(--lp-vw)) rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.95);
  overflow:visible;
}
.kodawari-slide__heading{
  position:relative;
  z-index:1;
  display:block;
  margin:0 0 calc(25/750*var(--lp-vw));
  min-height:calc(123/750*var(--lp-vw));
  overflow:visible;
}
.kodawari-slide__index{
  position:absolute;
  top:min(calc(-2/750*var(--lp-vw)),-2px);
  left:min(calc(2/750*var(--lp-vw)),2px);
  z-index:0;
  font-size:calc(160/750*var(--lp-vw));
  font-weight:600;
  letter-spacing:0;
  line-height:1;
  color:rgba(90,168,196,.42);
  pointer-events:none;
  user-select:none;
}
.kodawari-slide__heading-text{
  position:relative;
  z-index:1;
  display:block;
  padding:calc(39/750*var(--lp-vw)) 0 0 calc(87/750*var(--lp-vw));
  font-size:calc(48/750*var(--lp-vw));
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.5;
  color:rgba(15,15,31,.88);
}
.kodawari-slide__heading-group{
  position:relative;
  z-index:1;
  display:block;
  padding:calc(21/750*var(--lp-vw)) 0 0 calc(87/750*var(--lp-vw));
}
.kodawari-slide__heading-group .kodawari-slide__heading-text{
  padding:calc(9/750*var(--lp-vw)) 0 0;
}
.kodawari-slide__eyebrow-panel{
  display:block;
  margin:0;
  font-size:calc(23/750*var(--lp-vw));
  font-weight:500;
  letter-spacing:.24em;
  line-height:1.4;
  color:rgba(160,120,72,.85);
}
.kodawari-slide__visual{
  position:relative;
  z-index:1;
  width:calc(593/750*var(--lp-vw));
  max-width:82%;
  margin:0 auto calc(21/750*var(--lp-vw));
  aspect-ratio:1;
  border-radius:calc(11/750*var(--lp-vw));
  overflow:hidden;
  background:linear-gradient(180deg,#eef2f7 0%,#f7f9fc 100%);
  box-shadow:0 0 0 1px rgba(201,160,106,.28);
}
.kodawari-slide__visual--landscape{
  aspect-ratio:747/560;
}
.kodawari-slide__visual--portrait{
  aspect-ratio:330/495;
}
.kodawari-slide__visual img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}
.kodawari-slide__visual--landscape img{
  object-fit:cover;
  object-position:center;
}
.kodawari-slide__visual--portrait img{
  object-fit:cover;
  object-position:center 18%;
}
.kodawari-slide__body{
  position:relative;
  z-index:1;
  margin:0;
  font-size:calc(28/750*var(--lp-vw));
  font-weight:500;
  letter-spacing:.03em;
  line-height:1.9;
  color:rgba(15,15,31,.72);
}
.kodawari-slide__panel:nth-child(1) .kodawari-slide__panel-inner{
  padding-top:calc(21/750*var(--lp-vw));
  padding-bottom:calc(21/750*var(--lp-vw));
}
.kodawari-slide__panel:nth-child(1) .kodawari-slide__heading,
.kodawari-slide__panel:nth-child(2) .kodawari-slide__heading,
.kodawari-slide__panel:nth-child(3) .kodawari-slide__heading{
  min-height:calc(150/750*var(--lp-vw));
  margin-bottom:calc(23/750*var(--lp-vw));
}
.kodawari-slide__panel:nth-child(1) .kodawari-slide__visual,
.kodawari-slide__panel:nth-child(2) .kodawari-slide__visual,
.kodawari-slide__panel:nth-child(3) .kodawari-slide__visual{
  margin-top:calc(11/750*var(--lp-vw));
}
.kodawari-slide__panel:nth-child(1) .kodawari-slide__heading-text{
  white-space:nowrap;
  font-size:calc(44/750*var(--lp-vw));
  letter-spacing:.04em;
  line-height:1.45;
  padding-top:calc(46/750*var(--lp-vw));
}
.kodawari-slide__panel:nth-child(1) .kodawari-slide__visual img{
  object-fit:cover;
  object-position:center;
}
.kodawari-slide__panel:nth-child(1) .kodawari-slide__body{
  text-align:center;
  line-height:1.9;
}
.kodawari-slide__panel:nth-child(2) .kodawari-slide__heading-text{
  white-space:nowrap;
  font-size:calc(38/750*var(--lp-vw));
  letter-spacing:.01em;
  line-height:1.45;
  padding-top:calc(46/750*var(--lp-vw));
  padding-left:calc(58/750*var(--lp-vw));
}
.kodawari-slide__panel:nth-child(3) .kodawari-slide__heading-text{
  white-space:nowrap;
  font-size:calc(40/750*var(--lp-vw));
  letter-spacing:.03em;
  line-height:1.45;
  padding-top:calc(46/750*var(--lp-vw));
}
.kodawari-slide__panel:nth-child(3) .kodawari-slide__panel-inner{
  padding-bottom:calc(64/750*var(--lp-vw));
}

/* ── 使い方（横スクロール） ── */

.howto-slide{
  --hs-stage-h:calc(935/750*var(--lp-vw));
  --hs-panel-w:calc(730/750*var(--lp-vw));
  --hs-panel-gap:calc(18/750*var(--lp-vw));
  position:relative;
  background:
    radial-gradient(ellipse at 18% 12%,rgba(201,160,106,.14) 0%,transparent 42%),
    radial-gradient(ellipse at 88% 78%,rgba(90,110,160,.18) 0%,transparent 48%),
    radial-gradient(ellipse at 50% 0%,rgba(43,41,64,.55) 0%,transparent 58%),
    linear-gradient(180deg,#1b1b29 0%,#0f0f1f 48%,#080814 100%);
  color:#fff;
  font-family:var(--font-mincho);
  line-height:normal;
  overflow:hidden;
}
.howto-slide::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%,rgba(255,255,255,.75),transparent),
    radial-gradient(1px 1px at 28% 42%,rgba(255,248,232,.65),transparent),
    radial-gradient(1.5px 1.5px at 46% 14%,rgba(255,255,255,.55),transparent),
    radial-gradient(1px 1px at 62% 36%,rgba(232,200,152,.55),transparent),
    radial-gradient(1.5px 1.5px at 78% 22%,rgba(255,255,255,.7),transparent),
    radial-gradient(1px 1px at 88% 48%,rgba(255,248,232,.5),transparent),
    radial-gradient(1.5px 1.5px at 22% 68%,rgba(255,255,255,.45),transparent),
    radial-gradient(1px 1px at 54% 72%,rgba(232,200,152,.45),transparent),
    radial-gradient(1.5px 1.5px at 72% 86%,rgba(255,255,255,.55),transparent),
    radial-gradient(1px 1px at 38% 88%,rgba(255,248,232,.4),transparent);
  opacity:.85;
}
.howto-slide__sky{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.howto-slide__star{
  position:absolute;
  color:rgba(255,248,232,.72);
  font-style:normal;
  font-size:calc(11/750*var(--lp-vw));
  line-height:1;
  text-shadow:0 0 6px rgba(255,248,232,.45);
  animation:howtoStarTwinkle 3.6s ease-in-out infinite;
}
.howto-slide__star:nth-child(1){top:8%;left:10%;animation-delay:0s}
.howto-slide__star:nth-child(2){top:14%;left:72%;font-size:calc(8/750*var(--lp-vw));animation-delay:.4s}
.howto-slide__star:nth-child(3){top:22%;left:38%;animation-delay:.9s}
.howto-slide__star:nth-child(4){top:18%;left:88%;font-size:calc(9/750*var(--lp-vw));animation-delay:1.3s}
.howto-slide__star:nth-child(5){top:36%;left:16%;font-size:calc(8/750*var(--lp-vw));animation-delay:.2s}
.howto-slide__star:nth-child(6){top:42%;left:58%;animation-delay:1.7s}
.howto-slide__star:nth-child(7){top:58%;left:8%;font-size:calc(9/750*var(--lp-vw));animation-delay:.7s}
.howto-slide__star:nth-child(8){top:62%;left:82%;animation-delay:2.1s}
.howto-slide__star:nth-child(9){top:74%;left:28%;font-size:calc(8/750*var(--lp-vw));animation-delay:1.5s}
.howto-slide__star:nth-child(10){top:80%;left:66%;animation-delay:.5s}
.howto-slide__star:nth-child(11){top:88%;left:14%;font-size:calc(10/750*var(--lp-vw));animation-delay:1.9s}
.howto-slide__star:nth-child(12){top:90%;left:48%;font-size:calc(8/750*var(--lp-vw));animation-delay:2.4s}
@keyframes howtoStarTwinkle{
  0%,100%{opacity:.35;transform:scale(.92)}
  50%{opacity:.95;transform:scale(1)}
}
.howto-slide__stage{
  position:relative;
  top:0;
  left:0;
  width:100%;
  height:var(--hs-stage-h);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  z-index:1;
}
.howto-slide__stage.is-pinned{
  z-index:20;
}
.howto-slide__intro{
  flex:0 0 auto;
  padding:calc(41/750*var(--lp-vw)) calc(41/750*var(--lp-vw)) calc(18/750*var(--lp-vw));
}
.howto-slide__eyebrow{
  margin:0;
  font-size:calc(23/750*var(--lp-vw));
  font-weight:600;
  letter-spacing:.28em;
  color:rgba(255,248,232,.78);
  opacity:.95;
}
.howto-slide__title{
  margin:calc(11/750*var(--lp-vw)) 0 0;
  font-size:calc(50/750*var(--lp-vw));
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.45;
  color:var(--gold-l,#e8c898);
  background:var(--gold-grad,linear-gradient(120deg,#f0d4a8 0%,#c9a06a 48%,#a07848 100%));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.howto-slide__lead{
  margin:calc(14/750*var(--lp-vw)) 0 0;
  font-size:calc(27/750*var(--lp-vw));
  font-weight:500;
  letter-spacing:.04em;
  line-height:1.85;
  color:rgba(255,255,255,.78);
}
.howto-slide__meta{
  display:flex;
  align-items:center;
  gap:calc(14/750*var(--lp-vw));
  margin-top:calc(18/750*var(--lp-vw));
}
.howto-slide__index{
  margin:0;
  font-size:calc(25/750*var(--lp-vw));
  font-weight:600;
  letter-spacing:.12em;
  color:rgba(255,255,255,.88);
  white-space:nowrap;
}
.howto-slide__bar{
  flex:1;
  height:1px;
  background:rgba(255,255,255,.22);
  overflow:hidden;
}
.howto-slide__bar span{
  display:block;
  height:100%;
  width:0;
  background:var(--gold-grad);
  transition:width .35s ease;
}
.howto-slide__viewport{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  padding:0 0 calc(9/750*var(--lp-vw));
}
.howto-slide__track{
  display:flex;
  height:100%;
  gap:var(--hs-panel-gap);
  padding:0 calc(41/750*var(--lp-vw));
  will-change:transform;
}
.howto-slide__panel{
  flex:0 0 var(--hs-panel-w);
  width:var(--hs-panel-w);
  min-width:0;
}
.howto-slide__panel-inner{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  padding:0 calc(14/750*var(--lp-vw)) calc(14/750*var(--lp-vw));
  background:linear-gradient(180deg,rgba(255,255,255,.97) 0%,rgba(248,244,236,.97) 100%);
  border:1px solid rgba(201,160,106,.35);
  border-radius:calc(16/750*var(--lp-vw));
  overflow:hidden;
  box-shadow:0 calc(9/750*var(--lp-vw)) calc(27/750*var(--lp-vw)) rgba(0,0,0,.35);
}
.howto-slide__step{
  flex:0 0 auto;
  margin:calc(16/750*var(--lp-vw)) 0 0;
  padding:0 calc(5/750*var(--lp-vw)) min(calc(2/750*var(--lp-vw)),2px);
  font-size:calc(50/750*var(--lp-vw));
  font-weight:700;
  letter-spacing:.08em;
  line-height:1;
  text-align:center;
  color:#0f0f1f;
}
.howto-slide__visual{
  flex:1 1 auto;
  min-height:0;
  margin:0;
  border-radius:calc(9/750*var(--lp-vw)) calc(9/750*var(--lp-vw)) 0 0;
  overflow:hidden;
  background:#fff;
}
.howto-slide__visual img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:top center;
}
.howto-slide__cap{
  flex:0 0 auto;
  margin:0;
  font-size:calc(27/750*var(--lp-vw));
  font-weight:500;
  letter-spacing:.05em;
  line-height:1.75;
  text-align:center;
  color:rgba(255,255,255,.78);
}
.howto-slide__note{
  flex:0 0 auto;
  margin:0;
  padding:0 calc(41/750*var(--lp-vw)) calc(23/750*var(--lp-vw));
  font-size:calc(25/750*var(--lp-vw));
  font-weight:500;
  letter-spacing:.08em;
  text-align:center;
  color:rgba(255,255,255,.78);
}

@media (prefers-reduced-motion:reduce){
  .howto-slide__star{
    animation:none;
    opacity:.7;
  }
  .howto-slide{
    height:auto;
  }
  .howto-slide__stage{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    width:100%!important;
    height:auto;
  }
  .howto-slide__viewport{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    flex:none;
    padding-bottom:calc(14/750*var(--lp-vw));
  }
  .howto-slide__viewport::-webkit-scrollbar{
    display:none;
  }
  .howto-slide__track{
    transform:none!important;
    height:auto;
    padding-bottom:calc(9/750*var(--lp-vw));
  }
  .howto-slide__panel{
    scroll-snap-align:start;
  }
  .howto-slide__panel-inner{
    height:auto;
  }
  .howto-slide__visual{
    aspect-ratio:4/3;
  }
  .howto-slide__bar span{
    width:100%;
  }
  .kodawari-slide__scroll-track{
    animation:none;
  }
}