/* =========================================================
   26AW Knit & Outer 特集 共通CSS
   すべて #knit-outer 配下に限定（他店・公式で共通利用）
   ========================================================= */
/* ===== base ===== */
#knit-outer,
#knit-outer *,
#knit-outer *::before,
#knit-outer *::after {
  box-sizing: border-box
}
#knit-outer {
  --u: .9px;
  --navy: #262a5a;
  --red: #9b2d3a;
  --main-bg: #f0ede8;
  --sec-bg: #e8e3dc;
  --pc-bg: #ded7cf;
  --en: "norman-variable", sans-serif;
}

#knit-outer h1,
#knit-outer h2,
#knit-outer h3,
#knit-outer p {
  margin: 0;
}


#knit-outer {
  margin: 0;
  background: var(--pc-bg);
  color: #333;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.7
}
#knit-outer img {
  display: block;
  width: 100%;
  height: auto;
  border: 0
}
#knit-outer a {
  color: inherit;
  text-decoration: none
}
#knit-outer ul {
  margin: 0;
  padding: 0;
  list-style: none
}
#knit-outer .sp {
  display: none
}
#knit-outer span,
#knit-outer small,
#knit-outer b {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}
/* =========================
Global Nav
========================= */
#knit-outer #global-nav {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 9999;
  opacity: 0;
  transition: .4s;
}
#knit-outer #global-nav.m_fixed {
  opacity: 1;
}
#knit-outer #global-nav img {
  width: 90px;
}
@media screen and (max-width: 768px) {
  #knit-outer #global-nav {
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    background: rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  #knit-outer #global-nav img {
    width: 70px;
  }
}
#knit-outer .fadein {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s ease, transform .8s ease;
}
#knit-outer .wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto
}
#knit-outer .main {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  background: var(--main-bg);
  overflow: hidden
}
/* ===== MV ===== */
#knit-outer .mv {
  position: relative;
  aspect-ratio: 750/800;
}
#knit-outer .mv img {
  height: 100%;
  object-fit: cover
}
#knit-outer .mv-text {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  color: #fff;
  text-shadow: 0 0 calc(30*var(--u)) rgba(0, 0, 0, .35)
}
#knit-outer .mv-text h1 {
  margin: 0;
  font-weight: 400;
  font-size: calc(46*var(--u));
  line-height: 1.5;
  letter-spacing: .08em
}
#knit-outer .mv-text h1 b {
  font-weight: 700;
  font-size: calc(52*var(--u))
}
#knit-outer .mv-text small {
  display: block;
  font-family: var(--en);
  font-size: calc(22*var(--u))
}
/* ===== lead / coupon ===== */
#knit-outer .lead {
  margin: calc(180 * var(--u)) 0;
  padding: calc(90*var(--u)) 5% calc(60*var(--u));
  text-align: center;
  font-size: 16.8px;
  line-height: 2
}
#knit-outer .lead p {
  letter-spacing: 0.08em;
  margin: 0;
	  font-size: 16px;
}
#knit-outer .coupon {
  width: 70%;
  margin: 0 auto calc(80*var(--u))
}
#knit-outer .coupon a {
  display: block;
  transition: opacity .3s
}
#knit-outer .coupon a:hover {
  opacity: .8
}
#knit-outer .coupon-lead {
  margin: 0 0 calc(20*var(--u));
  text-align: center;
  font-size: calc(19*var(--u));
  line-height: 1.6;
  letter-spacing: .05em;
  color: var(--navy);
}
#knit-outer .coupon-lead span {
  position: relative;
  display: inline-block;
  padding: 0 1.4em;
}
#knit-outer .coupon-lead span::before,
#knit-outer .coupon-lead span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1px;
  height: 1.6em;
  background: var(--navy);
}
#knit-outer .coupon-lead span::before {
  left: 0;
  transform: translateY(-50%) rotate(-30deg);
}
#knit-outer .coupon-lead span::after {
  right: 0;
  transform: translateY(-50%) rotate(30deg);
}
/* ===== menu ===== */
#knit-outer .menu {
  padding: calc(150 * var(--u)) 0 calc(80*var(--u));
  text-align: center;
}
#knit-outer .menu-ttl {
  margin: 0 0 calc(35*var(--u));
  font-family: var(--en);
  font-weight: 500;
  font-size: calc(56*var(--u));
  line-height: 1.1;
  color: var(--navy)
}
#knit-outer .menu-ttl small {
  padding-top: 1%;
  display: block;
  font-family: inherit;
  font-size: calc(20*var(--u));
  color: #b0865a;
  font-family: sans-serif
}
#knit-outer .menu-list {
  display: flex;
  justify-content: center;
  gap: 1.5%;
  padding: 0 3%;
  margin-bottom: calc(60*var(--u))
}
#knit-outer .menu-list li {
  flex: 0 1 23%
}
#knit-outer .menu-list.outer li {
  flex: 0 1 28%
}
#knit-outer .menu-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  min-height: calc(56*var(--u));
  padding: calc(8*var(--u)) calc(14*var(--u)) calc(8*var(--u)) calc(22*var(--u));
  background: var(--navy);
  color: #fff;
  border-radius: 999px;
  font-size: calc(18*var(--u));
  line-height: 1.3;
  text-align: left;
  transition: opacity .3s
}
#knit-outer .menu-list a:hover {
  opacity: .8
}
#knit-outer .menu-list a::after {
  content: "";
  flex: none;
  width: calc(30*var(--u));
  height: calc(30*var(--u));
  margin-left: calc(8*var(--u));
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.5 3.5 5 6.5l2.5-3' fill='none' stroke='%232e3170' stroke-width='1.2'/%3E%3C/svg%3E") center/60% no-repeat;
}
/* ===== category title (Knit / Outer) ===== */
#knit-outer .cat-ttl {
  position: relative;
  width: max-content;
  margin: calc(100*var(--u)) auto 0;
  padding-bottom: calc(40*var(--u));
  font-family: var(--en);
  font-weight: 500;
  font-size: calc(80*var(--u));
  line-height: 1;
  color: var(--navy);
  letter-spacing: 0.05em
}
#knit-outer #design,
#knit-outer #coat {
  padding-top: calc(30*var(--u));
}
#knit-outer .cat-label {
  position: absolute;
  top: calc(-6*var(--u));
  width: calc(90*var(--u)); /* 変更前 80 */
  height: calc(75*var(--u)); /* 変更前 60 */
  right: calc(-50*var(--u)); /* 変更前 -48。右に出す */
  overflow: visible;
  fill: #b0865a;
  font-family: var(--en);
  font-size: 17px;
  letter-spacing: .1em;
}
/* ===== item section ===== */
/* 背景切替（ニット→アウター） */
#knit-outer .bg-area {
  background-color: #f9f2e8;
  background-image: linear-gradient(to bottom, #f0ede8, rgba(240, 237, 232, 0));
  background-size: 100% calc(160*var(--u));
  background-repeat: no-repeat;
  transition: background-color 1.2s ease;
}
#knit-outer .bg-area.is-outer {
  background-color: #ded4c5;
}
#knit-outer .sec {
  padding: calc(80*var(--u)) 0 calc(100*var(--u));
  text-align: center;
}
#knit-outer .sec-ttl {
  margin: 0;
  font-family: var(--en);
  font-weight: 500;
  font-size: calc(55*var(--u));
  line-height: 1.2;
  color: var(--navy);
  letter-spacing: 0.08em
}
#knit-outer .sec-ttl .en {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  opacity: .4;
}
#knit-outer .sec-ttl.is-in .en {
  padding-bottom: 2%;
  animation: knitTtlIn 1.2s ease forwards;
}
#knit-outer .sec-ttl small {
  font-weight: 200;
  display: block;
  margin-top: calc(5*var(--u));
  font-family: "Noto Sans JP", sans-serif;
  font-size: calc(16*var(--u));
  color: #555;
  opacity: 0;
  transform: translateY(20px);
}
#knit-outer .sec-ttl.is-in small {
  animation: knitSmallIn 1s ease .2s forwards;
}
@keyframes knitTtlIn {
  from { clip-path: inset(0 100% 0 0); opacity: .4; }
  to   { clip-path: inset(0 0 0 0);    opacity: 1; }
}
@keyframes knitSmallIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
#knit-outer .sec-catch {
  margin: calc(30*var(--u)) 0 calc(50*var(--u));
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 500;
  font-size: calc(39*var(--u)/1.5); /* 変更前 28。今は約21.6px */
  line-height: 1.6;
  color: #333;
}
#knit-outer .item {
  width: 75%;
  margin: 0 auto calc(15*var(--u));
  text-align: left
}
#knit-outer .item:has(+ .item) {
  margin-bottom: calc(70*var(--u));
}
#knit-outer .item-link {
  display: block;
}
#knit-outer .price .buy {
  margin-left: 1em;
  margin-right: .8em;
  text-decoration: underline;
}
#knit-outer .item-link:hover {
  opacity: .8;
}
/* slider (fade) */
#knit-outer .slider {
  position: relative
}
#knit-outer .slides {
  position: relative;
  aspect-ratio: 4/5;
  touch-action: pan-y
}
#knit-outer .slides li {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease, visibility .9s
}
#knit-outer .slides li.is-active {
  opacity: 1;
  visibility: visible
}
#knit-outer .slides img {
  height: 100%;
  object-fit: cover
}
#knit-outer .dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(16*var(--u));
  display: flex;
  justify-content: center;
  gap: calc(10*var(--u));
  margin-top: 0
}
#knit-outer .dots button {
  width: calc(7*var(--u));
  height: calc(7*var(--u));
  min-width: 7px;
  min-height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  cursor: pointer
}
#knit-outer .dots button.is-active {
  background: #fff
}
#knit-outer .name {
  margin: calc(12*var(--u)) 0 0;
  font-size: calc(22*var(--u)/1.5);
  line-height: 1.5
}
#knit-outer .price {
  margin: 0;
  font-size: calc(22*var(--u)/1.5)
}
#knit-outer .price .sale {
  color: var(--red)
}
#knit-outer .price .arrow {
  margin: 0 .3em
}
#knit-outer .item-text {
  width: 82%;
  margin: calc(30*var(--u)) auto calc(75*var(--u));
  font-size: calc(16*var(--u));
  line-height: 2;
  text-align: center;
  color: #444
}
/* thumbs */
#knit-outer .thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(30*var(--u)) 2.5%;
  padding: 0 9%;
  width: 100%;
  margin: 0 auto;
  text-align: left
}
#knit-outer .thumbs img {
  aspect-ratio: 640/768;
  object-fit: cover;
  background: #ece8e3;
}
#knit-outer .thumbs .name,
#knit-outer .thumbs .price {
  font-size: calc(13*var(--u))
}
#knit-outer .thumbs .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#knit-outer .cp {
  display: inline-block;
  margin-top: calc(6*var(--u));
  padding: 0 calc(10*var(--u));
  border: 1px solid #bbb;
  background: #f6f4f1;
  font-size: calc(12*var(--u));
  line-height: 1.6;
  color: #555
}
#knit-outer .item .price .cp {
  display: inline-block;
  margin: 0;
  vertical-align: middle;
  white-space: nowrap;
}
#knit-outer .coupon-anchor {
  padding: calc(60*var(--u)) 5%;
  background: #fff;
  text-align: center;
  font-size: calc(20*var(--u))
}
/* =========================
HOME BTN
========================= */
#knit-outer .homeBtn {
  margin: 120px auto 0;
  text-align: center;
}
#knit-outer .homeBtn a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  height: 60px;
  border-radius: 40px;
  border: 1px solid var(--navy);
  letter-spacing: .08em;
  transition: .3s;
  color: var(--navy);
  font-family: var(--en);
  font-weight: 500;
}
#knit-outer .homeBtn a:hover {
  background: var(--navy);
  color: var(--pc-bg);
}
@media (max-width: 768px) {
  #knit-outer .homeBtn a {
    width: 170px;
    height: 50px;
    font-size: 0.9em;
  }
}
/* =========================
Footer
========================= */
#knit-outer .footer_copy {
  padding: 40px 20px;
  text-align: center;
  font-size: 12px;
}
/* ===== PCのみサイズ調整 ===== */
@media screen and (min-width:769px) {
  #knit-outer .mv-text,
#knit-outer .lead,
#knit-outer .menu-list {
    --u: .6px
  }
  #knit-outer .menu-ttl,
#knit-outer .cat-ttl,
#knit-outer .sec-ttl {
    --u: .765px
  }
}
/* ===== SP ===== */
@media screen and (max-width:768px) {
  #knit-outer {
    --u: calc(100vw/750)
  }
  #knit-outer .sp {
    display: block
  }
  #knit-outer .pc {
    display: none
  }
  #knit-outer .lead {
    margin: calc(150 * var(--u)) 0;
    font-size: calc(30*var(--u))
  }
  #knit-outer .coupon {
    width: 86%
  }
  #knit-outer .coupon-lead {
    font-weight: 500;
    font-size: calc(24*var(--u));
  }
  #knit-outer .menu {
    text-align: center;
  }
  #knit-outer .menu-list.knit {
    flex-wrap: wrap;
    gap: calc(16*var(--u)) 2%;
    padding: 0 4%
  }
  #knit-outer .menu-list.knit li {
    flex: 0 0 48%
  }
  #knit-outer .menu-list a {
    font-size: calc(24*var(--u));
    min-height: calc(76*var(--u))
  }
  #knit-outer .menu-list a::after {
    width: calc(36*var(--u));
    height: calc(36*var(--u))
  }
  #knit-outer .menu-list.outer {
    gap: 2%;
    padding: 0 4%
  }
  #knit-outer .menu-list.outer li {
    flex: 1 1 0
  }
  #knit-outer .menu-ttl {
    margin: calc(0*var(--u)) 0 calc(40*var(--u));
    font-family: var(--en);
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.1;
    font-size: calc(75*var(--u));
  }
  #knit-outer .menu-ttl small {
    font-size: calc(22*var(--u));
    margin-top: 1%;
  }
  #knit-outer .cat-ttl {
    font-size: calc(100*var(--u))
  }
  #knit-outer .sec-ttl {
    font-size: calc(64*var(--u))
  }
  #knit-outer .sec-ttl small {
    font-size: calc(22*var(--u))
  }
  #knit-outer .sec-catch {
    font-size: calc(32*var(--u));
    margin: calc(30*var(--u)) 0 calc(70*var(--u));
  }
  #knit-outer .item {
    width: 90%
  }
  #knit-outer .item:has(+ .item) {
    margin-bottom: calc(80 * var(--u));
  }
  #knit-outer .name {
    margin: calc(5 * var(--u)) 0 0;
  }
  #knit-outer .name,
#knit-outer .price {
    font-size: calc(22*var(--u))
  }
  #knit-outer .item-text {
    text-wrap: balance;
    word-break: auto-phrase;
    width: 94%;
    margin: calc(60 * var(--u)) auto calc(90 * var(--u));
    font-size: calc(22*var(--u))
  }
  #knit-outer .thumbs {
    width: 100%;
    gap: calc(35*var(--u)) 2%;
    padding: 0 4%;
  }
  #knit-outer .thumbs .name,
#knit-outer .thumbs .price {
    font-size: calc(20*var(--u))
  }
  #knit-outer .cp {
    display: block;
    width: fit-content;
    margin-top: calc(8*var(--u));
    font-size: calc(18*var(--u));
  }
}