@charset "UTF-8";
/* カシミヤ紹介ページ（/cashmere・zutto-cashmere-page）。デザインの正本は Main.dc.html。
   全ルールを .cashmere-lp の中に閉じる（レイアウト側の #wrapper・#contents の上書きだけは外に書く）。
   書体：見出し Shippori Mincho、英字と数字 Cormorant Garamond（Google Fonts）。本文は端末の文字 */

/* ── レイアウト（stories）の枠を全幅にする ── */
#contents { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; }
#contentsTopWrapper { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; }
@media (max-width: 768px) {
  #wrapper { min-width: 0 !important; max-width: 100% !important; padding: 0 !important; }
  #contents { padding: 0 !important; margin: 0 !important; }
}
/* #wrapper は max-width: 1200px なので、ページ部分だけ画面の端から端まで広げる。
   100vw はスクロールバーの分だけはみ出すことがあるので、このページでは横方向を隠す（この CSS はカシミヤのページでしか読まない）。
   🔴 hidden にしない：SP 共通 CSS の html { overflow-y: scroll } のため body が独立したスクロール領域になり、指のスクロールを吸って画面が動かなくなる。clip はスクロール領域を作らない */
body { overflow-x: clip; }

/* PC：スクロールしても共通ヘッダーを固定しない（このページだけ）。
   固定は base.js のスクロール処理が行う：#header に .scrollNav とインラインの position: fixed・top を付け、#wrapper に padding-top を足す。
   共通の base.js は変えず、このページで読む CSS で打ち消す。.scrollNav は PC の処理だけが付けるので、SP のヘッダーには効かない。
   .scrollNav が付けたときの見た目の変化（上段のメニュー・通常のロゴを隠し、小さいロゴを出す）も元の値に戻し、ヘッダーの高さを変えない。
   stories レイアウトの #header.scrollNav（!important）より後に負けないよう、#wrapper を前に付けて詳しく書く */
#wrapper #header.scrollNav { position: relative !important; top: 0 !important; left: auto !important; transform: none !important; width: 100% !important; }
#wrapper #header.scrollNav #navTop1 { display: inline-block !important; }
#wrapper #header.scrollNav .logoWrapper { display: block !important; }
#wrapper #header.scrollNav .fixlogo { display: none !important; }
#wrapper #header.scrollNav #headerInner { padding-bottom: 15px !important; }
#wrapper:has(#header.scrollNav) { padding-top: 0 !important; }

/* ── 共通 ── */
.cashmere-lp {
  --cm-bordeaux: #6B1226;
  --cm-charcoal: #2B2E2D;
  --cm-beige: #E9DFCD;
  --cm-ground: #F7F6F3;
  --cm-on-dark: #F5ECDF;
  --cm-mincho: 'Shippori Mincho', serif;
  --cm-roman: 'Cormorant Garamond', serif;
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', YuGothic, Meiryo, sans-serif;
  font-size: 17px;
  line-height: 2;
  font-variant-numeric: lining-nums;
  color: var(--cm-charcoal);
  background: var(--cm-ground);
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  text-align: left;
  scroll-behavior: smooth;
}
.cashmere-lp *, .cashmere-lp *::before, .cashmere-lp *::after { box-sizing: border-box; }
.cashmere-lp img { display: block; max-width: none; }
/* base.css の初期化が全要素を vertical-align: top にしているので、文中の要素は元に戻す */
.cashmere-lp span, .cashmere-lp a, .cashmere-lp br { vertical-align: baseline; }
.cashmere-lp a { color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
/* 薄くするのは hover ができる端末だけ（スマホではタップ後に :hover が残り、その行だけ薄いままになる） */
@media (hover: hover) {
  .cashmere-lp a:hover { opacity: .72; }
  .cashmere-lp a:hover img { opacity: 1; }
}
.cashmere-lp a:focus-visible, .cashmere-lp button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.cashmere-lp h1, .cashmere-lp h2, .cashmere-lp h3, .cashmere-lp p, .cashmere-lp figure,
.cashmere-lp ol, .cashmere-lp ul, .cashmere-lp dl, .cashmere-lp dd, .cashmere-lp dt { margin: 0; padding: 0; }
.cashmere-lp ol, .cashmere-lp ul { list-style: none; }
.cashmere-lp h1, .cashmere-lp h2, .cashmere-lp h3 { font-family: var(--cm-mincho); font-weight: 500; color: inherit; background: none; border: 0; }

.cashmere-lp .cm-en { font-family: var(--cm-roman); font-size: 20px; letter-spacing: .1em; line-height: 1.4; margin-bottom: 8px; }
.cashmere-lp .cm-h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.5; letter-spacing: .06em; }
.cashmere-lp .cm-h3 { font-size: 21px; line-height: 1.6; }
.cashmere-lp .cm-small { font-size: 16px; line-height: 1.9; }
.cashmere-lp .cm-button {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 28px;
  border: 1px solid currentColor; text-decoration: none; font-size: 15px; letter-spacing: .08em;
}
.cashmere-lp .cm-grid { display: grid; }

/* ── ページ内ナビ（サイト共通のヘッダーの下。ロゴは出さない） ── */
.cashmere-lp .cm-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 8px 32px; padding: 20px clamp(16px, 4vw, 56px);
}
@media (max-width: 768px) {
  .cashmere-lp .cm-header { justify-content: flex-start; }
}
.cashmere-lp .cm-nav { display: flex; flex-wrap: wrap; gap: 4px 28px; font-size: 15px; }
.cashmere-lp .cm-nav a { text-decoration: none; padding: 8px 0; }

/* ── 最初の画面 ── */
.cashmere-lp .cm-hero { display: flex; flex-wrap: wrap; }
.cashmere-lp .cm-hero__photo { flex: 3 1 560px; min-width: 0; min-height: 420px; position: relative; background: #F0F0EE; }
.cashmere-lp .cm-hero__photo img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.cashmere-lp .cm-hero__panel {
  flex: 2 1 340px; min-width: 0; min-height: 640px; background: var(--cm-bordeaux); color: var(--cm-on-dark);
  padding: clamp(32px, 5vw, 64px); display: flex; justify-content: space-between; gap: 24px;
}
.cashmere-lp .cm-hero__spec { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-width: 0; }
.cashmere-lp .cm-hero__en { font-family: var(--cm-roman); font-size: 22px; line-height: 1.3; letter-spacing: .06em; }
.cashmere-lp .cm-hero__ja { font-size: 15px; line-height: 1.8; }
.cashmere-lp .cm-hero h1 {
  writing-mode: vertical-rl; font-size: clamp(32px, 3.5vw, 48px); line-height: 1.7; letter-spacing: .12em;
  flex: none; max-height: 560px;
}

/* ── 導入 ── */
.cashmere-lp .cm-intro {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(32px, 6vw, 88px); align-items: center; padding: clamp(64px, 10vw, 136px) clamp(16px, 8vw, 120px);
}
.cashmere-lp .cm-intro__text { max-width: 560px; }
.cashmere-lp .cm-intro__text .cm-h2 { line-height: 1.6; margin-bottom: 32px; }
.cashmere-lp .cm-intro img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* ── 商品（カラーで背景・文字色・写真が変わる） ── */
.cashmere-lp .cm-items {
  --stage-bg: #E9DFCD; --stage-fg: #2B2E2D; --stage-line: rgba(43,46,45,.35);
  background: var(--stage-bg); color: var(--stage-fg);
  padding: clamp(64px, 8vw, 112px) clamp(16px, 5vw, 72px); transition: background .5s ease, color .5s ease;
}
.cashmere-lp .cm-items[data-cashmere-color="bordeaux"] { --stage-bg: #6B1226; --stage-fg: #F5ECDF; --stage-line: rgba(245,236,223,.4); }
.cashmere-lp .cm-items[data-cashmere-color="grey"] { --stage-bg: #2F3332; --stage-fg: #F2EEE6; --stage-line: rgba(242,238,230,.4); }
.cashmere-lp .cm-items__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 24px 48px; margin-bottom: clamp(32px, 4vw, 56px);
}
.cashmere-lp .cm-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.cashmere-lp .cm-swatch {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 16px 6px 8px; border-radius: 999px;
  border: 1px solid transparent; background: transparent; color: inherit; font: inherit; font-size: 14px;
  letter-spacing: .04em; line-height: 1; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.cashmere-lp .cm-swatch[aria-pressed="true"] { border-color: currentColor; }
.cashmere-lp .cm-swatch__chip { width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(127,127,127,.5); flex: none; }
.cashmere-lp .cm-swatch__chip--beige { background: #E3D3B8; }
.cashmere-lp .cm-swatch__chip--bordeaux { background: #7A1730; }
.cashmere-lp .cm-swatch__chip--grey { background: #3C4140; }
.cashmere-lp .cm-items__list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(32px, 4vw, 64px); }
.cashmere-lp .cm-item img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%; }
.cashmere-lp .cm-item h3 { font-size: 26px; line-height: 1.5; margin-top: 24px; }
.cashmere-lp .cm-item__price { font-family: var(--cm-roman); font-size: 28px; line-height: 1.4; margin: 8px 0 16px; }
.cashmere-lp .cm-item__price span { font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', YuGothic, Meiryo, sans-serif; font-size: 14px; }
.cashmere-lp .cm-item dl {
  display: grid; grid-template-columns: 72px 1fr; gap: 2px 16px; font-size: 15px; line-height: 1.8;
  margin: 16px 0 24px; padding-top: 16px; border-top: 1px solid var(--stage-line);
}
.cashmere-lp .cm-items__note {
  font-size: 15px; line-height: 1.9; margin-top: clamp(32px, 4vw, 56px); padding-top: 20px; border-top: 1px solid var(--stage-line);
}

/* ── 素材 ── */
.cashmere-lp .cm-material { padding: clamp(64px, 10vw, 136px) clamp(16px, 8vw, 120px); }
.cashmere-lp .cm-material > .cm-h2 { margin-bottom: 24px; }
.cashmere-lp .cm-material__lead { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); }
.cashmere-lp .cm-fiber { display: flex; flex-direction: column; gap: 28px; margin-bottom: 12px; }
.cashmere-lp .cm-fiber__row { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.cashmere-lp .cm-fiber__label { line-height: 1.5; flex: 0 0 220px; }
.cashmere-lp .cm-fiber__num { font-family: var(--cm-roman); font-size: 40px; }
.cashmere-lp .cm-fiber__num--accent { color: var(--cm-bordeaux); }
.cashmere-lp .cm-fiber__name { font-size: 15px; }
.cashmere-lp .cm-fiber__bar { flex: 1 1 280px; min-width: 0; }
.cashmere-lp .cm-fiber__bar--cashmere { height: 30px; background: var(--cm-bordeaux); }
.cashmere-lp .cm-fiber__bar--wool { height: 55px; background: #B9B3A8; }
.cashmere-lp .cm-fiber__bar--itch { height: 60px; border: 1px dashed #5C5A55; }
.cashmere-lp .cm-fiber__note { font-size: 14px; color: #5C5A55; margin-bottom: clamp(48px, 6vw, 80px); }
.cashmere-lp .cm-features {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 32px 40px;
  border-top: 1px solid #CFCAC0; padding-top: 32px;
}
.cashmere-lp .cm-features .cm-h3 { margin-bottom: 8px; }

/* ── モンゴル ── */
.cashmere-lp .cm-mongolia { background: var(--cm-charcoal); color: #F2EEE6; padding: clamp(64px, 10vw, 136px) clamp(16px, 5vw, 72px); }
.cashmere-lp .cm-mongolia__head {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(32px, 5vw, 72px);
  align-items: end; margin-bottom: clamp(40px, 5vw, 64px);
}
.cashmere-lp .cm-mongolia__head img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.cashmere-lp .cm-mongolia__head .cm-h2 { line-height: 1.6; margin-bottom: 24px; }
.cashmere-lp .cm-numbers {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 32px 40px;
  border-top: 1px solid #5B5F5C; border-bottom: 1px solid #5B5F5C; padding: 32px 0; margin-bottom: clamp(40px, 5vw, 64px);
}
.cashmere-lp .cm-numbers > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.cashmere-lp .cm-numbers dt { font-size: 15px; line-height: 1.8; }
.cashmere-lp .cm-numbers dd { font-family: var(--cm-roman); font-size: 52px; line-height: 1.2; }
.cashmere-lp .cm-numbers dd span { font-size: 24px; }
.cashmere-lp .cm-mongolia__cols { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(32px, 4vw, 56px); }
.cashmere-lp .cm-mongolia__col { display: flex; flex-direction: column; gap: 16px; }
.cashmere-lp .cm-mongolia__col img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.cashmere-lp .cm-mongolia__col img.cm-pos-low { object-position: 50% 70%; }

/* ── 着こなし ── */
.cashmere-lp .cm-look { padding: clamp(64px, 10vw, 136px) clamp(16px, 5vw, 72px); }
.cashmere-lp .cm-look > .cm-h2 { margin-bottom: clamp(32px, 4vw, 56px); }
.cashmere-lp .cm-look__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.cashmere-lp .cm-look__col { display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 24px); }
.cashmere-lp .cm-look__col img { width: 100%; height: auto; object-fit: cover; }
.cashmere-lp .cm-look__col img.cm-tall { aspect-ratio: 2 / 3; }
.cashmere-lp .cm-look__col img.cm-wide { aspect-ratio: 3 / 2; }
.cashmere-lp .cm-look__col img.cm-pos-right { object-position: 72% 50%; }
.cashmere-lp .cm-look__col img.cm-pos-top { object-position: 50% 20%; }

/* ── お手入れ ── */
.cashmere-lp .cm-care { background: var(--cm-beige); padding: clamp(64px, 10vw, 136px) clamp(16px, 5vw, 72px); }
.cashmere-lp .cm-care__head {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(32px, 5vw, 72px);
  align-items: center; margin-bottom: clamp(40px, 5vw, 64px);
}
.cashmere-lp .cm-care__head .cm-h2 { line-height: 1.6; margin-bottom: 24px; }
.cashmere-lp .cm-care__head img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.cashmere-lp .cm-steps {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 0 32px;
  border-top: 2px solid var(--cm-charcoal); margin-bottom: clamp(40px, 5vw, 64px);
}
.cashmere-lp .cm-steps li { padding: 20px 0; }
.cashmere-lp .cm-steps__num { font-family: var(--cm-roman); font-size: 30px; line-height: 1.4; }
.cashmere-lp .cm-steps h3 { font-size: 20px; line-height: 1.6; }
.cashmere-lp .cm-steps__text { font-size: 16px; line-height: 1.8; }

/* ── よみもの ── */
.cashmere-lp .cm-stories { padding: clamp(64px, 8vw, 112px) clamp(16px, 8vw, 120px); }
.cashmere-lp .cm-stories h2 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.5; letter-spacing: .06em; margin-bottom: 24px; }
.cashmere-lp .cm-stories ul { border-top: 1px solid #CFCAC0; }
.cashmere-lp .cm-stories li { border-bottom: 1px solid #CFCAC0; }
/* 番号の列（72px）とタイトルの列の2列に固定する。タイトルが長くても番号の下へ回り込ませず、番号の列の右側で折り返す */
.cashmere-lp .cm-stories a { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: start; gap: 0 24px; padding: 16px 0; text-decoration: none; }
.cashmere-lp .cm-stories__vol { font-family: var(--cm-roman); font-size: 20px; width: 72px; }

/* ── 贈りもの ── */
.cashmere-lp .cm-gift { display: flex; flex-wrap: wrap; background: var(--cm-bordeaux); color: var(--cm-on-dark); }
.cashmere-lp .cm-gift img { flex: 1 1 480px; min-width: 0; width: 100%; height: auto; aspect-ratio: 5 / 3; object-fit: cover; }
.cashmere-lp .cm-gift__text {
  flex: 1 1 400px; min-width: 0; padding: clamp(40px, 6vw, 80px) clamp(16px, 5vw, 72px);
  display: flex; flex-direction: column; justify-content: center; gap: 24px;
}
.cashmere-lp .cm-gift .cm-h2 { line-height: 1.6; }
.cashmere-lp .cm-gift__buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.cashmere-lp .cm-gift__buttons .cm-button { padding: 0 24px; letter-spacing: .06em; }
.cashmere-lp .cm-gift__buttons .cm-button--fill { background: var(--cm-on-dark); color: var(--cm-bordeaux); border-color: var(--cm-on-dark); }
.cashmere-lp .cm-gift__note { font-size: 14px; line-height: 1.8; }

/* ── お手入れ・よみもの（/cashmere/how-to-care・/cashmere/stories/:slug）。書体・色・幅は /cashmere に合わせる ── */
.cashmere-lp .cm-article { max-width: 768px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) clamp(16px, 5vw, 24px) clamp(64px, 8vw, 112px); }
.cashmere-lp .cm-article h1 { font-size: clamp(24px, 3vw, 40px); line-height: 1.5; letter-spacing: .06em; margin-bottom: 16px; }
.cashmere-lp .cm-article__date { font-family: var(--cm-roman); font-size: 18px; letter-spacing: .06em; color: #5C5A55; }
.cashmere-lp .cm-article__back { font-size: 15px; margin-bottom: clamp(32px, 4vw, 48px); }
.cashmere-lp .cm-article__back--bottom { margin: clamp(48px, 6vw, 72px) 0 0; padding-top: 24px; border-top: 1px solid #CFCAC0; }
.cashmere-lp .cm-article__body { margin-top: clamp(32px, 4vw, 48px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid #CFCAC0; }
.cashmere-lp .cm-article__body p { margin-bottom: 1.4em; }
.cashmere-lp .cm-article__body h2 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.6; letter-spacing: .04em; margin: clamp(48px, 6vw, 72px) 0 24px; }
.cashmere-lp .cm-article__body h3 { font-size: 20px; line-height: 1.6; margin: 40px 0 16px; }
.cashmere-lp .cm-article__body h2 + h3 { margin-top: 24px; }
.cashmere-lp .cm-article__figure { margin: 32px 0; }
.cashmere-lp .cm-article__figure img { width: 100%; height: auto; }
.cashmere-lp .cm-article__body ul { margin: 0 0 1.4em; padding-left: 1.2em; list-style: disc; }
.cashmere-lp .cm-article__body li { margin-bottom: .4em; list-style: disc; }
.cashmere-lp .cm-article__body blockquote { margin: 24px 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--cm-bordeaux); }
.cashmere-lp .cm-article__body blockquote p:last-child { margin-bottom: 0; }
.cashmere-lp .cm-article__body hr { border: 0; border-top: 1px solid #CFCAC0; margin: 48px 0; }
.cashmere-lp .cm-article__caption { font-size: 14px; line-height: 1.8; color: #5C5A55; margin-top: -16px; }
.cashmere-lp .cm-article__link { margin: 8px 0 16px; }