@charset "UTF-8";

html { scroll-behavior: smooth; font-size: min(1.010101vw, 10px); }

body { margin: 0; }

/* ===== 出現アニメ（inview） ===== */
.js-fade { opacity: 0; transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.js-fade.is-active { opacity: 1; }
.is-noanim .js-fade { transition: none !important; opacity: 1 !important; }
/* reduced-motion フォールバック（a11y＋overlay-diff の偽ミスマッチ対策） */
@media (prefers-reduced-motion: reduce) {
  .js-fade { transition: none !important; opacity: 1 !important; }
}

/* ============================================================
   トークン（カンプ実測値）
   ============================================================ */
.feature {
  --c-text:     #222222; /* 本文・見出し */
  --c-muted:    #888888; /* 日付・著者・SNS */
  --c-accent:   #9B8266; /* 連番・英字サブ・カテゴリチップ */
  --c-line:     #E5E5E5; /* 細罫（見出し脇・meta下・カード枠） */
  --c-line-toc: #CCCCCC; /* 目次の行間罫 */
  --c-rule:     #222222; /* セクション見出し脇の罫 */
  --c-soft:     #F7F5F2; /* 淡ベージュ地 */
  --c-white:    #FFFFFF;
  --f-ja: "Noto Sans JP", sans-serif;
  --f-en: "Inter", sans-serif;
}

/* ===== 特集共通枠 ===== */
.feature {
  box-sizing: border-box; color: var(--c-text); margin: 0 auto;
  overflow: clip; position: relative; width: 100%;
  background: var(--c-white);
  font-family: var(--f-ja); font-weight: 400; font-style: normal;
}
.feature * { margin: 0; padding: 0; border: 0; vertical-align: baseline; box-sizing: border-box; }
.feature a { color: inherit; text-decoration: none; }
.feature img { vertical-align: bottom; max-width: 100%; }
.feature ul, .feature ol { list-style: none; }
.feature section[id] { scroll-margin-top: 2rem; }
.feature .bold {font-weight: 700;}

/* ===== PCフレーム（中央1カラムのみ） ===== */
.feature .frame { display: flex; align-items: stretch; justify-content: center; }
.feature .frame-main { flex: 0 0 auto; width: 100%; }
.feature .frame-main__Inner { overflow: clip; width: 99rem; margin: auto; background: var(--c-white); } /* 990px */

/* ============================================================
   共通部品
   ============================================================ */
/* --- セクション見出し（左右罫＋中央タイトル＋英字サブ） --- */
.feature .secHead { display: flex; flex-direction: column; gap: .8rem; }
.feature .secHead__Row { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 1.6rem; }
.feature .secHead__Line { display: block; flex: 1 1 0; height: 0; border-top: .1rem solid var(--c-rule); }
.feature .secHead__Ttl {
  flex: 0 0 auto; font-family: var(--f-ja); font-weight: 700;
  font-size: 2.2rem; line-height: 1.2; letter-spacing: .09rem; text-align: center; color: var(--c-text);
}
.feature .secHead__En {
  font-family: var(--f-en); font-weight: 400; font-size: 1.2rem; line-height: 1.4;
  letter-spacing: .3rem; text-align: center; color: var(--c-accent);
}
.feature .secHead__En,
.feature .sec02__HeadEn,
.feature .sec02__Num,
.feature .keyCard__En,
.feature .typeCard__En,
.feature .sec08__TypeNum,
.feature .sec10__QMark,
.feature .sec10__AMark {
  font-style: italic;
}

/* --- 本文リード（PC/SP共通 fs16 lh1.9） --- */
.feature .lead { font-size: 1.6rem; line-height: 1.9; color: var(--c-text); }

/* ============================================================
   01 記事トップ
   ============================================================ */
.feature .sec01 { display: flex; flex-direction: column; align-items: center; gap: 2.4rem; background: var(--c-white); margin-top: 3rem; }
.feature .sec01__CatWrap { width: 99rem; display: flex; }
.feature .sec01__Cat {
  display: inline-flex; padding: .3rem 1.2rem; background: var(--c-accent); color: var(--c-white);
  font-family: var(--f-en); font-weight: 400; font-size: 1.1rem; line-height: 1.21; letter-spacing: .275rem;
}
.feature .sec01__Ttl {
  width: 99rem; font-family: var(--f-ja); font-weight: 700;
  font-size: 3rem; line-height: 1.5; letter-spacing: .06rem; color: var(--c-text);
}
.feature .sec01__Meta {
  width: 99rem; display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  gap: 1.6rem; padding-bottom: 1.6rem; border-bottom: .1rem solid var(--c-line);
  height: 4rem;
}
.feature .sec01__MetaInfo { display: flex; flex-direction: row; gap: 1.6rem; align-items: center; }
.feature .sec01__Date,
.feature .sec01__Author { font-size: 1.2rem; line-height: 1.2; color: var(--c-muted); }
.feature .sec01__Share { display: flex; flex-direction: row; gap: .8rem; }
.feature .sec01__ShareItem a {
  display: flex; align-items: center; justify-content: center;
  width: 2.8rem; height: 2.8rem; border: .1rem solid var(--c-line); border-radius: 1.4rem;
  font-family: var(--f-en); font-weight: 400; font-size: 1.1rem; line-height: 1.21; color: var(--c-muted);
}
.feature .sec01__Hero { width: 99rem; }
.feature .sec01__Hero img { width: 100%; height: auto; }
.feature .sec01__Lead { width: 99rem; font-size: 1.6rem; line-height: 1.9; color: var(--c-text); }

/* ============================================================
   02 目次 INDEX
   ============================================================ */
.feature .sec02 { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; background: var(--c-white); padding: 4.4rem 0; }
.feature .sec02__Inner { width: 95rem; display: flex; flex-direction: column; gap: 1.2rem; }
.feature .sec02__Head { display: flex; flex-direction: row; align-items: center; gap: 1.2rem; }
.feature .sec02__HeadLabel { display: flex; flex-direction: row; align-items: center; gap: .6rem; flex: 0 0 auto; }
.feature .sec02__HeadEn {
  font-family: var(--f-en); font-weight: 600; font-size: 1.3rem; line-height: 1.21;
  letter-spacing: .26rem; color: var(--c-text);
}
.feature .sec02__HeadJa { font-weight: 500; font-size: 1.3rem; line-height: 1.2; color: var(--c-text); }
.feature .sec02__HeadLine { display: block; flex: 1 1 0; height: 0; border-top: .1rem solid var(--c-line); }
.feature .sec02__List { display: flex; flex-direction: column; gap: 1.2rem; margin-top: 1rem; }
.feature .sec02__Item { position: relative; }
.feature .sec02__Item:not(:last-child) { padding-bottom: 1.2rem; }
.feature .sec02__Item:not(:last-child)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  border-top: .1rem solid var(--c-line-toc);
}
.feature .sec02__Link { display: flex; flex-direction: row; align-items: center; gap: 1.4rem; }
.feature .sec02__Num {
  flex: 0 0 auto; font-family: var(--f-en); font-weight: 600; font-size: 1.4rem;
  line-height: 1.21; color: var(--c-accent);
}
.feature .sec02__Txt { font-size: 1.4rem; line-height: 1.5; color: var(--c-text); }

/* ============================================================
   03 10秒診断
   ============================================================ */
.feature .sec03 { display: flex; flex-direction: column; align-items: center; gap: 2.4rem; background: var(--c-white); padding: 4rem 0; }
.feature .sec03 .secHead { width: 99rem; }
.feature .sec03__Lead { width: 99rem; font-size: 1.6rem; line-height: 1.9; }
.feature .sec03__Quiz {
  width: 99rem; display: flex; flex-direction: column; align-items: center;
  gap: 2.859rem; padding: 5.718rem 4.289rem; background: var(--c-soft);
}
.feature .sec03__Q {
  width: 90.422rem; font-weight: 700; font-size: 2.2rem; line-height: 1.6;
  text-align: center; color: var(--c-text);
}
.feature .sec03__Opts {
  width: 90.422rem; display: flex; flex-direction: row; flex-wrap: wrap; gap: 2.144rem;
}
.feature .sec03__Opt {
  flex: 0 0 calc((100% - 2.144rem) / 2); display: flex; align-items: center; justify-content: center;
  padding: 2.502rem 2.144rem; background: var(--c-white);
  box-shadow: inset 0 0 0 .179rem var(--c-text);
  border-radius: 999rem;
  font-size: 2rem; line-height: 1.5; text-align: center; color: var(--c-text);
}

/* ============================================================
   04 日傘選びの基本 — 4つのキーワード
   ============================================================ */
.feature .sec04 { display: flex; flex-direction: column; align-items: center; gap: 2.4rem; background: var(--c-white); padding: 4rem 0; }
.feature .sec04 .secHead { width: 99rem; }
.feature .sec04__Lead { width: 99rem; font-size: 1.6rem; line-height: 1.9; }
.feature .sec04__Lead span { font-weight: 700;}
.feature .sec04__Keys { width: 99rem; display: flex; flex-wrap: wrap; align-items: stretch; gap: 2.144rem; }
.feature .keyCard {
  flex: 0 0 calc((100% - 2.144rem) / 2);
  display: flex; flex-direction: column; gap: .715rem; padding: 2.859rem;
  box-shadow: inset 0 0 0 .1rem var(--c-line);
}
.feature .keyCard__Head { display: flex; flex-direction: row; align-items: center; gap: 1.43rem; }
.feature .keyCard__Ttl { font-weight: 700; font-size: 1.8rem; line-height: 1.2; color: var(--c-text); }
.feature .keyCard__En { font-family: var(--f-en); font-weight: 400; font-size: 1.6rem; line-height: 1.21; color: var(--c-accent); }
.feature .keyCard__Txt { font-size: 1.6rem; line-height: 1.7; color: #555555; }

/* --- 編集長コメント（丸アバター＋角丸フキダシ）＝共通部品 --- */
.feature .editor { width: 99rem; display: flex; flex-direction: row; align-items: flex-start; gap: 1.6rem; }
.feature .editor__Avatar {
  flex: 0 0 auto; width: 6.4rem; height: 6.4rem; border-radius: 50%;
  background: var(--c-soft); box-shadow: inset 0 0 0 .179rem var(--c-line);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.feature .editor__Avatar img { width: 100%; height: 100%; object-fit: cover; }
.feature .editor__Bubble {
  flex: 1 1 auto; display: flex; flex-direction: column; gap: .6rem;
  padding: 1.6rem 2rem; background: var(--c-white);
  box-shadow: inset 0 0 0 0.1rem var(--c-line); border-radius: .8rem;
}
.feature .editor__Name { font-size: 1.1rem; line-height: 1.2; color: var(--c-muted); }
.feature .editor__Txt { font-size: 1.4rem; line-height: 1.8; color: var(--c-text); }

/* --- ラインナップ見出し＋商品カード4枚 --- */
.feature .sec04__LineupTtl { width: 99rem; font-weight: 700; font-size: 1.6rem; line-height: 1.2; text-align: left; color: var(--c-text); margin-top: 1rem; }
.feature .sec04__Items { width: 99rem; display: flex; flex-direction: row; align-items: stretch; gap: 2.8rem; flex-wrap: wrap; }

.feature .sec08 .sec04__Items {
  margin-top: 2rem;
}

/* ---------- セクション05 (PC) ---------- */
/* ============================================================
   05 長傘 or 折りたたみ？（タイプの選び方）
   ============================================================ */
.feature .sec05 { display: flex; flex-direction: column; align-items: center; gap: 2.4rem; background: var(--c-white); padding: 4rem 0; }
.feature .sec05 .secHead { width: 99rem; }

/* --- 比較カード2枚（長傘／折りたたみ --- */
.feature .sec05__Types { width: 99rem; display: flex; flex-direction: row; align-items: stretch; gap: 2.859rem; }
.feature .typeCard {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 1.072rem;
  padding: 4.289rem 3.574rem;
  box-shadow: inset 0 0 0 .1rem var(--c-line);
}
.feature .typeCard__Fig { display: block; text-align: center; }
.feature .typeCard__Fig img { width: 19.657rem; height: 19.657rem; object-fit: contain; }
.feature .typeCard__Ttl { font-weight: 700; font-size: 2.2rem; line-height: 1.2; text-align: center; color: var(--c-text); margin: 1rem 0 1rem; }
.feature .typeCard__En { font-family: var(--f-en); font-weight: 400; font-size: 1.966rem; line-height: 1.21; color: var(--c-accent); margin: 0 0 1rem; }
.feature .typeCard__Txt { align-self: stretch; font-size: 1.6rem; line-height: 1.8; color: #555555; text-align: left;}

/* --- タイプ別ラインナップ --- */
.feature .sec05__LineupTtl { width: 99rem; font-weight: 700; font-size: 1.6rem; line-height: 1.2; color: var(--c-text); margin-top: 1rem; }
.feature .sec05__Items { width: 99rem; display: flex; flex-direction: row; align-items: stretch; gap: 2.148rem; }
.feature .sec05__Shop { width: 99rem; min-height: 2.8rem; display: flex; flex-direction: row; align-items: center; gap: 0.8rem; }
.feature .sec05__ShopMark { flex: 0 0 auto; font-size: 1.2rem; line-height: 1.2; color: var(--c-accent); }
.feature .sec05__ShopLink { flex: 1 1 auto; font-size: 1.4rem; line-height: 1.6; color: #7D6850; }

/* ---------- セクション06 (PC) ---------- */
/* ============================================================
   06 デザインの選び方（メンズ・レディース）
   ============================================================ */
.feature .sec06 {
  display: flex; flex-direction: column; align-items: center; gap: 2.4rem; background: var(--c-white); padding: 4rem 0; }
.feature .sec06 .secHead { width: 99rem; }

/* --- 小見出し帯（h3bar 990x34・枠線1px #9B8266） --- */
.feature .sec06__Bar {
  width: 99rem; display: flex; flex-direction: row; align-items: center;
  padding: .6rem 1.2rem .65rem; border-left: 4px solid #9B8266; background: linear-gradient(90deg, #F7F5F2 0%, #FFF 100%);
}
.feature .sec06__BarTtl {
  font-family: var(--f-ja); font-weight: 700; font-size: 1.8rem; line-height: 1.2;
  letter-spacing: 0; color: var(--c-text);
}

/* --- 本文リード --- */
.feature .sec06__Lead { width: 99rem; font-size: 1.6rem; line-height: 1.9; color: var(--c-text); }

/* --- ラインナップ小見出し --- */
.feature .sec06__ItemsTtl {
  width: 99rem; font-weight: 700; font-size: 1.6rem; line-height: 1.2;
  text-align: left; color: var(--c-text); margin-top: 1rem;
}

/* --- 商品カード4枚 --- */
.feature .sec06__Items {
  width: 99rem; display: flex; flex-direction: row; align-items: stretch; gap: 2.148rem;
}
.feature .sec06__Shop {
  width: 99rem; display: flex; flex-direction: row; align-items: flex-start; gap: 1rem;
  min-height: 2.8rem; 
}
.feature .sec06__ShopTxt { font-size: 1.4rem; line-height: 1.6; color: #7D6850; }
.feature .sec06__Tri { flex: 0 0 auto; position: relative; width: 1.2rem; height: 1.4rem; }
.feature .sec06__Tri::before {
  content: ""; position: absolute; top: 50%; left: .15rem; transform: translateY(-50%);
  width: 0; height: 0; border-style: solid; border-width: .35rem 0 .35rem .6rem;
  border-color: transparent transparent transparent var(--c-accent);
}


.feature .sec06 .editor { gap: 1.6rem; }
.feature .sec06 .editor__Avatar {
  width: 6.4rem; height: 6.4rem; box-shadow: inset 0 0 0 .1rem var(--c-line);
}
.feature .sec06 .editor__Bubble {
  gap: .6rem; padding: 1.6rem 2rem;
  box-shadow: inset 0 0 0 .1rem var(--c-line); border-radius: .8rem;
}
.feature .sec06 .editor__Name { font-size: 1.1rem; }
.feature .sec06 .editor__Txt { font-size: 1.4rem; }

/* ---------- セクション07 (PC) ---------- */
.feature .sec07 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  background: var(--c-white);
  padding: 4rem 0;
}

/* --- 見出し（共通部品 .secHead の差分だけ） --- */
.feature .sec07 .secHead { width: 99rem; }
.feature .sec07 .secHead__Line { border-top-color: var(--c-text); }

/* --- リード文 --- */
.feature .sec07__Lead {
  width: 99rem;
  font-size: 1.6rem;
  line-height: 1.9;
  color: var(--c-text);
}

/* --- サイズ図3列 --- */
.feature .sec07__Cards {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  width: 99rem;
}
.feature .sec07__Card {
  box-sizing: border-box;
  flex: 0 0 30.295rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 3.43rem 2.058rem;
  box-shadow: inset 0 0 0 .171rem var(--c-line);
  color: var(--c-text);
}
.feature .sec07__Card.-s { min-height: 36rem; width: 33.33%; margin-right: 2rem; }
.feature .sec07__Card.-m { min-height: 36rem; width: 33.33%; margin-right: 2rem; }
.feature .sec07__Card.-l { min-height: 36rem; width: 33.33%; }

/* 傘の模式図（VECTOR: 天蓋アーチ＋中棒） */
.feature .sec07__Fig {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  width: 100%;
}
.feature .sec07__Umb {
  display: block;
  overflow: visible;
}
.feature .sec07__Card.-s .sec07__Fig { height: 8.917rem; padding-top: 5.12rem; }
.feature .sec07__Card.-s .sec07__Umb { width: 6.614rem; height: 2.425rem; }
.feature .sec07__Card.-m .sec07__Fig { height: 10.289rem; padding-top: 5.015rem; }
.feature .sec07__Card.-m .sec07__Umb { width: 10.803rem; height: 3.858rem; }
.feature .sec07__Card.-l .sec07__Fig { height: 11.661rem; padding-top: 4.287rem; }
.feature .sec07__Card.-l .sec07__Umb { width: 16.462rem; height: 5.402rem; }

.feature .sec07__CardTtl {
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1.2;
  text-align: center;
  color: var(--c-text);
}
.feature .sec07__CardSpec {
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  color: #7D6850;
}
.feature .sec07__CardTxt {
  width: 100%;
  font-size: 1.6rem;
  line-height: 1.7;
  color: #555555;
}

/* --- グループ見出し（小さめ日傘 / 大きめ日傘） --- */
.feature .sec07__GrpTtl {
  width: 99rem;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.2;
  text-align: left;
  color: var(--c-text);
  margin-top: 1rem;
}
.feature .sec07__Prods {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 2.148rem;
  width: 99rem;
}

/* --- 商品リンク枠 --- */
.feature .sec07__Shop {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
  width: 99rem;
  height: 2.8rem;
  text-decoration: none;
}
.feature .sec07__Shop.-nudge { padding-left: .1rem; }
.feature .sec07__ShopMark {
  flex: 0 0 1.2rem;
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--c-accent);
}
.feature .sec07__ShopTxt {
  font-size: 1.4rem;
  line-height: 1.6;
  color: #7D6850;
}

/* ---------- セクション08 (PC) ---------- */
/* ============================================================
   08 目的別 — あなたはどのタイプ？（4タイプの繰り返し）
   ============================================================ */
.feature .sec08 {
  display: flex; flex-direction: column; align-items: center;
  gap: 5.718rem; background: var(--c-white);
  overflow: clip; /* 大判ブリード画像（asset-28/29）が横スクロールを出さないための保険 */
  padding: 4rem 0;
}

/* --- 見出し（共通部品 .secHead の差分だけ。罫は301.41×2＋gap28.59×2＋タイトル330＝990） --- */
.feature .sec08 .secHead { width: 99rem; gap: 1.43rem; }
.feature .sec08 .secHead__Row { gap: 2.859rem; }
.feature .sec08 .secHead__Line { border-top-width: .179rem; border-top-color: var(--c-rule); }

.feature .sec08__Hero { width: 99rem; background-color: #fcf6f0; }
.feature .sec08__Hero img, .feature .sec08__Hero a { display: block; width: 100%; }
.feature .sec08__Hero .sec08__HeroImg {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0.1rem 3.1rem 1.7rem;
  gap:.5rem
}
.feature .sec08__Hero .sec08__HeroImg li {
  width: 45.6rem;
}
.feature .sec08__Hero .sec08__HeroImg li:nth-child(2),
.feature .sec08__Hero .sec08__HeroImg li:nth-child(4) {
  width: 46rem;
}

/* --- リード文・タイプ本文（どちらも990幅 fs16 lh1.9） --- */
.feature .sec08__Lead { width: 99rem; font-size: 1.6rem; line-height: 1.9; color: var(--c-text); }

/* ---------- タイプブロック（4回の繰り返し。差はタイプ色と画像座標だけ） ---------- */
.feature .sec08__Type { width: 99rem; display: flex; flex-direction: column; gap: 2.502rem; }
.feature .sec08__Type.-t1 { --c-type: #E0705F; }
.feature .sec08__Type.-t2 { --c-type: #2AA8A0; }
.feature .sec08__Type.-t3 { --c-type: #A47AB8; }
.feature .sec08__Type.-t4 { --c-type: #4A90C9; }

/* --- タイプ見出し（990x36.3＝本文22＋padding-bottom14.3。下線はinsetで高さを増やさない） --- */
.feature .sec08__TypeHead {
  display: flex; flex-direction: row; align-items: baseline; height: 3.63rem;
  padding-bottom: 1.4296rem; background: var(--c-white); color: var(--c-type);
  box-shadow: inset 0 -.3574rem 0 0 var(--c-type);
}
.feature .sec08__TypeNum {
  flex: 0 0 auto; font-family: var(--f-en); font-weight: 600;
  font-size: 1.8rem; line-height: 1.21; color: inherit;
}
.feature .sec08__TypeTtl {
  flex: 0 0 auto; font-family: var(--f-ja); font-weight: 700;
  font-size: 1.8rem; line-height: 1.2; color: inherit;
}

/* --- 「こんな方におすすめ」の淡ベージュ帯（990幅・中の本文932.82） --- */
.feature .sec08__Rec {
  width: 99rem; display: flex; flex-direction: column; gap: 1.43rem;
  padding: 2.859rem; background: var(--c-soft); overflow: clip;
}
.feature .sec08__RecTtl { font-weight: 700; font-size: 1.3rem; line-height: 1.2; color: var(--c-text); }

.feature .sec08__RecFig { position: relative; width: 100%; overflow: clip; }
.feature .sec08__RecFig img { position: absolute; display: block; max-width: none; }
.feature .sec08__RecNoImg {
  position: absolute; font-size: 1.1rem; line-height: 1.2;
  white-space: nowrap; color: var(--c-line-toc);
}

.feature .sec08__Type.-t1 .sec08__RecFig { height: 59.15rem; }
.feature .sec08__Type.-t1 .sec08__RecFig img { left: 14.691rem; top: 0; width: 59.15rem; height: 59.15rem; }
.feature .sec08__Type.-t1 .sec08__RecNoImg { left: -161.94rem; top: 28.924rem; }

.feature .sec08__Type.-t2 .sec08__RecFig { height: 61.652rem; }
.feature .sec08__Type.-t2 .sec08__RecFig img { left: 27.431rem; top: .261rem; width: 41.637rem; height: 61.127rem; }

.feature .sec08__Type.-t3 .sec08__RecFig { height: 61.652rem; }
.feature .sec08__Type.-t3 .sec08__RecFig img { left: -54.63rem; top: -94.444rem; width: 200.502rem; height: 250.538rem; }
.feature .sec08__Type.-t3 .sec08__RecNoImg { left: 145.871rem; top: 30.175rem; }

.feature .sec08__Type.-t4 .sec08__RecFig { height: 61.652rem; }
.feature .sec08__Type.-t4 .sec08__RecFig img { left: -53.201rem; top: -94.443rem; width: 200.502rem; height: 250.538rem; }
.feature .sec08__Type.-t4 .sec08__RecNoImg { left: 147.301rem; top: 30.176rem; }

.feature .sec08__Bullets { align-self: flex-start; display: flex; flex-direction: column; gap: .894rem; }
.feature .sec08__Bullet { display: flex; flex-direction: row; align-items: center; gap: 1.43rem; }
.feature .sec08__Dot { flex: 0 0 1.072rem; width: 1.072rem; height: 1.072rem; background: var(--c-text); }
.feature .sec08__BulletTxt { font-size: 1.4rem; line-height: 1.5; color: var(--c-text); }

.feature .sec08__Items {
  width: 98.821rem; align-self: flex-start;
  display: flex; flex-direction: row; align-items: stretch; gap: 2.144rem;
}
.feature .sec08__Shop {
  width: 99rem; display: flex; flex-direction: row; align-items: flex-start; gap: 1.072rem;
}
.feature .sec08__ShopMark { flex: 0 0 1.2rem; font-size: 1.2rem; line-height: 1.2; color: var(--c-accent); }
.feature .sec08__ShopTxt { flex: 1 1 auto; font-size: 1.4rem; line-height: 1.6; color: #7D6850; }

/* ---------- セクション09 (PC) ---------- */
/* ============================================================
   09 日傘は何色が合わせやすい？（PC / カンプ 990x3416.36）
   ============================================================ */
.feature .sec09 {
  display: flex; flex-direction: column; align-items: center; gap: 2.4rem; background: var(--c-white); padding: 4rem 0; }
.feature .sec09 .secHead { width: 99rem; }
.feature .sec09 .secHead__En { line-height: 1.21; }
.feature .sec09__Lead { width: 99rem; font-size: 1.6rem; line-height: 1.9; color: var(--c-text); }
.feature .sec09__Colors { width: 99rem; display: flex; flex-direction: column; gap: 1.6rem; }
.feature .sec09__ColorRow { display: flex; flex-direction: row; align-items: stretch; gap: 1.6rem; }
.feature .sec09__Color {
  flex: 1 1 0; display: flex; flex-direction: column; gap: .8rem; padding: 2rem;
  box-shadow: inset 0 0 0 .1rem var(--c-line);
}
.feature .sec09__ColorHead { display: flex; flex-direction: row; align-items: center; gap: 1.2rem; }
.feature .sec09__Sw {
  flex: 0 0 auto; width: 3.6rem; height: 3.6rem; border-radius: 50%;
}
.feature .sec09__Sw.-black { background: #2B2B2B; }
.feature .sec09__Sw.-navy  { background: #22375C; }
.feature .sec09__Sw.-beige { background: #E6DCC8; }
.feature .sec09__Sw.-gray  { background: #9AA0A6; }
.feature .sec09__ColorLabel { flex: 1 1 auto; display: flex; flex-direction: column; gap: .2rem; }
.feature .sec09__ColorName { font-weight: 700; font-size: 1.6rem; line-height: 1.2; color: var(--c-text); }
.feature .sec09__ColorSub { font-size: 1.2rem; line-height: 1.4; color: var(--c-muted); }
.feature .sec09__ColorTxt { font-size: 1.3rem; line-height: 1.7; color: #555555; }
.feature .sec09__ColorRule { display: block; position: relative; height: 0; }
.feature .sec09__ColorRule::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  border-top: .1rem solid var(--c-line-toc);
}
.feature .sec09__ColorList { display: flex; flex-direction: column; gap: .2rem; }
.feature .sec09__ColorItem { font-size: 1.2rem; line-height: 1.6; color: #555555; }

.feature .sec09__Guide { width: 99rem; display: flex; flex-direction: column; gap: .6rem; margin-top: 3rem; }
.feature .sec09__GuideTtl { font-weight: 700; font-size: 1.6rem; line-height: 1.6; color: var(--c-text); }
.feature .sec09__GuideTxt { font-size: 1.4rem; line-height: 1.9; color: var(--c-text); margin-bottom: 2rem; }

.feature .sec09__Items {
  width: 99rem; display: flex; flex-direction: row; align-items: stretch; gap: 2.148rem;
  --cardLine: .179rem; --cardGap: .716rem; --cardPb: 1.432rem;
  --thumbW: 17.902rem; --thumbH: 26.854rem;
  --infoGap: .358rem; --infoPt: 1.074rem;
  --numFs: 2.506rem; --nameFs: 1.969rem; --noimgFs: 1.969rem;
}
.feature .sec09__NoImg {
  font-size: var(--noimgFs); line-height: 1.2; text-align: center; color: var(--c-line-toc);
}

.feature .sec09__Shop {
  width: 99rem; min-height: 2.8rem; display: flex; flex-direction: row;
  align-items: flex-start; gap: .6rem;
}
.feature .sec09__Shop.-g10 { gap: 1rem; }
.feature .sec09__Shop.-pl1 { padding-left: .1rem; }
.feature .sec09__ShopMark { flex: 0 0 auto; font-size: 1.2rem; line-height: 1.2; color: var(--c-accent); }
.feature .sec09__ShopTxt { flex: 1 1 auto; font-size: 1.4rem; line-height: 1.6; color: #7D6850; }

.feature .sec09__Bar {
  width: 99rem; display: flex; flex-direction: row; align-items: center;
  padding: .6rem 1.2rem;
  border-left: 4px solid #9B8266;
  background: linear-gradient(90deg, #F7F5F2 0%, #FFF 100%);
  margin-top: 2rem;
}
.feature .sec09__BarTtl { font-weight: 700; font-size: 1.8rem; line-height: 1.2; color: var(--c-text); }

.feature .sec09__LineupTtl {
  width: 99rem; font-weight: 700; font-size: 1.6rem; line-height: 1.2; color: var(--c-text); margin-top: 1rem; margin-top: 1rem;
}

.feature .sec09 .editor { gap: 1.6rem; }
.feature .sec09 .editor__Avatar {
  width: 6.4rem; height: 6.4rem; box-shadow: inset 0 0 0 .1rem var(--c-line);
}
.feature .sec09 .editor__Bubble {
  flex: 0 0 auto; width: 90.8rem; gap: .6rem; padding: 1.6rem 2rem;
  box-shadow: inset 0 0 0 .1rem var(--c-line); border-radius: .8rem;
}
.feature .sec09 .editor__Name { font-size: 1.1rem; }
.feature .sec09 .editor__Txt { font-size: 1.4rem; }

/* --- 「かっこいい日傘を選ぶ5つのポイント」の注記＋番号つき手順 --- */
.feature .sec09__Note { width: 99rem; font-size: 1.4rem; line-height: 1.9; color: var(--c-text); }
.feature .sec09__Steps { width: 99rem; display: flex; flex-direction: column; gap: .8rem; }
.feature .sec09__Step { display: flex; flex-direction: row; gap: .8rem; }
.feature .sec09__StepNum { flex: 0 0 auto; font-size: 1.4rem; line-height: 1.2; color: var(--c-text); }
.feature .sec09__StepTxt { flex: 1 1 auto; font-size: 1.4rem; line-height: 1.9; color: var(--c-text); }

/* ---------- セクション10 (PC) ---------- */
/* ============================================================
   10 日傘に関するよくある質問・スタッフの日傘基準
   ============================================================ */
.feature .sec10 { display: flex; flex-direction: column; align-items: center; gap: 2.4rem; background: var(--c-white); padding: 4rem 0; }
.feature .sec10 .secHead { width: 99rem; }

/* --- Q&A（faq-accordion 990x323／item は pad16/0・itemどうしの隙間は0） --- */
.feature .sec10__Faq { width: 99rem; display: flex; flex-direction: column; }
.feature .sec10__Item { position: relative; display: flex; flex-direction: column; gap: .8rem; padding: 1.6rem 0; }
.feature .sec10__Item::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  border-top: .1rem dotted var(--c-line-toc);
}
.feature .sec10__Q,
.feature .sec10__A { display: flex; flex-direction: row; gap: .6rem; }
.feature .sec10__QMark {
  flex: 0 0 auto; font-family: var(--f-en); font-weight: 600;
  font-size: 1.6rem; line-height: 1.21; color: var(--c-accent);
}
.feature .sec10__QTxt { flex: 1 1 auto; font-weight: 700; font-size: 1.6rem; line-height: 1.6; color: var(--c-text); }
.feature .sec10__AMark {
  flex: 0 0 auto; font-family: var(--f-en); font-weight: 600;
  font-size: 1.4rem; line-height: 1.21; color: #E0705F;
}
.feature .sec10__ATxt { flex: 1 1 auto; font-size: 1.4rem; line-height: 1.8; color: #555555; }

.feature .sec10__SubTtl {
  width: 99rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: .6rem 1.2rem;
  border-left: 4px solid #9B8266;
  background: linear-gradient(90deg, #F7F5F2 0%, #FFF 100%);
  margin-top: 2rem;
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.2;
  color: var(--c-text);
 }
.feature .sec10__Txt { width: 99rem; font-size: 1.4rem; line-height: 1.9; color: var(--c-text); }

/* ---------- セクション11 (PC) ---------- */
/* ============================================================
   11 2026年 売れゆきベスト8（ランキング）
   ============================================================ */
.feature .sec11 { display: flex; flex-direction: column; align-items: center; gap: 2.4rem; background: var(--c-white); padding: 4rem 0; }
/* 見出しはPCカンプでは罫が132px固定（titleRow 554＝132＋16＋258＋16＋132）＝
   共通 .secHead__Line の flex:1 1 0（990幅いっぱいに伸びる）を固定幅へ上書きする */
.feature .sec11 .secHead { width: 99rem; }
.feature .sec11 .secHead__Line { flex: 0 1 13.2rem; }

.feature .sec11__Lead { width: 99rem; font-size: 1.4rem; line-height: 1.9; color: var(--c-text); }

.feature .sec11__Items {
  width: 99rem; display: flex; flex-direction: row; flex-wrap: wrap;
  align-items: stretch; row-gap: 2.4rem; column-gap: 2.148rem;
}
.feature .sec11__Note { width: 99rem; font-size: 1.2rem; line-height: 1.6; color: var(--c-muted); }

.feature .sec11__CtaWrap {
  width: 99rem; display: flex; flex-direction: row;
  align-items: center; justify-content: center; padding-top: 4.289rem;
}
.feature .sec11__Cta {
  width: 71.48rem; display: flex; align-items: center; justify-content: center;
  padding: 2.859rem 4.289rem; background: var(--c-accent);
  border-radius: 999rem; /* カンプ値 radius 1785.22＝pill指定(999)の1.787倍スケール残骸 */
  font-family: var(--f-ja); font-weight: 700; font-size: 2.681rem; line-height: 1.2;
  letter-spacing: .268rem; text-align: center; color: var(--c-white);
}

/* ---------- .item__list (PC) ---------- */
.item__list {
  letter-spacing: -0.4em;
}
.item__list>li {
  width: 22.6rem;
  margin: 0 0 1em 0;
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal;
}
.item__list>li .search-result__item__icon-area,
.item__list .item-tags-container {
  display: none;
}
.item__list>li .search-result__list {
  position: relative;
  letter-spacing: normal;
  margin: 0 !important;
}
.item__list>li a img {
  width: 100%;
  height: auto;
}
.item__list .item__listCell .item-color-image ul li {
  width: 2.4em;
}
.item__list .item_campaign {
  width: 100%;
  padding: 3px;
  box-sizing: border-box;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: #F98282;
  border: 1px solid #F48E8E;
}



/* ============================================================
   ▼SP（768px以下） — SPカンプ375px幅の実測値 ÷ 10 のrem
   ============================================================ */
@media screen and (max-width: 768px) {
  html { font-size: 2.66667vw; } /* 1rem=10px@375 */

  .feature section[id] {
      scroll-margin-top: 17rem;
  }
  .feature .frame { display: block; }
  .feature .frame-main { width: 100%; }
  .feature .frame-main__Inner { width: 100%; }

  /* --- 01 記事トップ --- */
  .feature .sec01 { align-items: stretch; gap: 1.6rem; padding: 1.6rem 2rem 0; margin-top: 0; }
  .feature .sec01__CatWrap { width: auto; }
  .feature .sec01__Ttl,
  .feature .sec01__Meta,
  .feature .sec01__Lead { width: auto; }
  .feature .sec01__Meta { height: auto; }
  .feature .sec01__Hero { width: auto; }

  /* --- 02 目次 --- */
  .feature .sec02 { gap: 1.6rem; padding: 2.4rem 2rem; }
  .feature .sec02__Inner { width: auto; gap: 1.6rem; }
  .feature .sec02__HeadLabel { gap: .6rem; }
  .feature .sec02__List { gap: 1.6rem; }
  .feature .sec02__Link { gap: 1.2rem; align-items: flex-start; }
  .feature .sec02__Item,
  .feature .sec02__Item:not(:last-child) { padding-bottom: 1.6rem; }
  .feature .sec02__Item::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    border-top: .1rem solid var(--c-line-toc);
  }


  .feature .sec03 { gap: 2rem; padding: 2rem; }
  .feature .sec03 .secHead { width: auto; }
  .feature .sec03__Lead { width: auto; }
  .feature .sec03__Quiz { width: 100%; gap: 1.6rem; padding: 3.2rem 2.4rem; }
  .feature .sec03__Q { width: auto; font-size: 1.6rem; }
  .feature .sec03__Opts { width: auto; flex-direction: column; flex-wrap: nowrap; gap: 1.2rem; }
  .feature .sec03__Opt {
    flex: 0 0 auto; padding: 1.4rem 5rem; font-size: 1.4rem;
    box-shadow: inset 0 0 0 .1rem var(--c-text); border-radius: 99.9rem;
  }

  .feature .secHead.-spStack .secHead__Row { flex-direction: column; align-items: center; gap: .8rem; }
  .feature .secHead.-spStack .secHead__Line:first-child { display: none; }
  .feature .secHead.-spStack .secHead__Line:last-child { display: none; }

  .feature .sec04 { gap: 2rem; padding: 2.4rem 2rem; align-items: stretch; }
  .feature .sec04 .secHead { width: auto; gap: 1.5; }
  .feature .sec04__Lead { width: auto; }
  .feature .sec04__Keys { width: auto; gap: .726rem; }
  .feature .keyCard {
    flex: 0 0 calc((100% - .726rem) / 2);
    gap: .242rem; padding: .968rem; box-shadow: inset 0 0 0 .06rem var(--c-line);
  }
  .feature .keyCard__Head { gap: .484rem; }
  .feature .keyCard__Ttl { font-size: .847rem; }
  .feature .keyCard__En { font-size: .665rem; }
  .feature .keyCard__Txt { font-size: .786rem; }
  .feature .editor { width: auto; gap: .969rem; }
  .feature .editor__Avatar { width: 3.453rem; height: 3.453rem; box-shadow: inset 0 0 0 .061rem var(--c-line); }
  .feature .editor__Bubble {
    gap: .363rem; padding: .969rem 1.212rem;
    box-shadow: inset 0 0 0 .061rem var(--c-line); border-radius: .485rem;
  }
  .feature .editor__Name { font-size: .666rem; }
  .feature .editor__Txt { font-size: .848rem; }
  .feature .sec04__LineupTtl { width: auto; }
  .feature .sec04__Items { width: auto; flex-wrap: wrap; gap: 1.5rem; margin-top: 1rem; }

  /* ---------- セクション05 (SP) ---------- */
    /* --- 05 長傘 or 折りたたみ？（SPカンプ375px幅の実測値÷10） --- */
    .feature .sec05 { gap: 2rem; padding: 2.4rem 2rem; align-items: stretch; }
    .feature .sec05 .secHead { width: auto; }
    .feature .sec05 .secHead__Row { gap: 1.2rem; } /* SPカンプは罫45.5＋gap12（PCはgap16） */

    /* 比較カード2枚（159.5×2＋gap16＝335） */
    .feature .sec05__Types { width: auto; gap: 1.4rem; }
    .feature .typeCard { gap: .6rem; padding: 2.4rem 1.5rem; box-shadow: inset 0 0 0 .1rem var(--c-line); }
    .feature .typeCard.-long .typeCard__Fig img { width: 11rem; height: 11rem; }
    .feature .typeCard.-folding .typeCard__Fig img { width: 11.7rem; height: 11rem; }
    .feature .typeCard__Ttl { font-size: 1.6rem; }
    .feature .typeCard__En { font-size: 1.1rem; }
    .feature .typeCard__Txt { font-size: 1.3rem; }

    .feature .sec05 .editor { gap: 1.6rem; }
    .feature .sec05 .editor__Avatar { width: 6.4rem; height: 6.4rem; box-shadow: inset 0 0 0 .1rem var(--c-line); }
    .feature .sec05 .editor__Bubble {
      gap: .6rem; padding: 1.6rem 2rem;
      box-shadow: inset 0 0 0 .1rem var(--c-line); border-radius: .8rem;
    }
    .feature .sec05 .editor__Name { font-size: 1.1rem; }
    .feature .sec05 .editor__Txt { font-size: 1.4rem; }

    .feature .sec05__LineupTtl { width: auto; }
    .feature .sec05__Items { width: auto; flex-wrap: wrap; row-gap: 2rem; column-gap: 1.5rem; }

    .feature .sec05__Shop { width: auto; min-height: 0; gap: 1rem; }
    .feature .sec05__ShopMark { font-size: 1.2rem; }
    .feature .sec05__ShopLink { font-size: 1.4rem; }

  /* ---------- セクション06 (SP) ---------- */
  /* ============================================================
     06 デザインの選び方（メンズ・レディース）  SPカンプ 375x2560
     ============================================================ */
  .feature .sec06 { align-items: stretch; gap: 2rem; padding: 2rem; }
  .feature .sec06 .secHead { width: auto; }

  /* --- 小見出し帯（335x56＝2行。paddingはPCと同値6/12） --- */
  .feature .sec06__Bar { width: auto; }

  /* --- 本文リード --- */
  .feature .sec06__Lead { width: auto; }

  .feature .sec06__ItemsTtl { width: auto; text-align: left; }

  .feature .sec06__Items { width: auto; flex-wrap: wrap; gap: 2rem 1.5rem; }

  .feature .sec06__Shop { width: auto; }

  .feature .sec06 .editor { width: auto; gap: 1.6rem; }
  .feature .sec06 .editor__Avatar {
    width: 6.4rem; height: 6.4rem; box-shadow: inset 0 0 0 .1rem var(--c-line);
  }
  .feature .sec06 .editor__Bubble {
    gap: .6rem; padding: 1.6rem 2rem;
    box-shadow: inset 0 0 0 .1rem var(--c-line); border-radius: .8rem;
  }
  .feature .sec06 .editor__Name { font-size: 1.1rem; }
  .feature .sec06 .editor__Txt { font-size: 1.4rem; }

  /* ---------- セクション07 (SP) ---------- */
  /* ========== sec07 きれいに持てるサイズを選ぶ（SP / カンプ 375x1915.98） ========== */
  .feature .sec07 {
    align-items: stretch;
    gap: 2rem;
    padding: 2rem;
  }

  /* --- 見出し（SPは短い罫＋中央タイトル。-spStack ではない） --- */
  .feature .sec07 .secHead { width: auto; }
  .feature .sec07 .secHead__Row { gap: 1.2rem; }
  .feature .sec07 .secHead__Line { flex: 0 0 .7rem; }

  /* --- リード文 --- */
  .feature .sec07__Lead { width: auto; }

  /* --- サイズ図3列 --- */
  .feature .sec07__Cards {
    width: auto;
    align-items: stretch;
    gap: .726rem;
  }
  .feature .sec07__Card {
    flex: 1 1 0;
    min-width: 0;
    gap: .242rem;
    padding: 1.209rem .726rem;
    box-shadow: inset 0 0 0 .06rem var(--c-line);
  }
  .feature .sec07__Card.-s,
  .feature .sec07__Card.-m,
  .feature .sec07__Card.-l { min-height: 0; margin-right: 0; }

  .feature .sec07__Card.-s .sec07__Fig { height: 3.144rem; padding-top: 1.806rem; }
  .feature .sec07__Card.-s .sec07__Umb { width: 2.332rem; height: .855rem; }
  .feature .sec07__Card.-m .sec07__Fig { height: 3.628rem; padding-top: 1.769rem; }
  .feature .sec07__Card.-m .sec07__Umb { width: 3.81rem; height: 1.361rem; }
  .feature .sec07__Card.-l .sec07__Fig { height: 4.112rem; padding-top: 1.512rem; }
  .feature .sec07__Card.-l .sec07__Umb { width: 5.805rem; height: 1.905rem; }

  .feature .sec07__CardTtl { font-size: .907rem; }
  .feature .sec07__CardSpec { font-size: .726rem; }
  .feature .sec07__CardTxt { font-size: .726rem; }

  /* --- 編集長コメント --- */
  .feature .sec07 .editor {
    width: auto;
    gap: .968rem;
  }
  .feature .sec07 .editor__Avatar {
    flex: 0 0 3.87rem;
    width: 3.87rem;
    height: 3.87rem;
    box-shadow: inset 0 0 0 .06rem var(--c-line);
  }
  .feature .sec07 .editor__Bubble {
    gap: .363rem;
    padding: .968rem 1.209rem;
    border-radius: .48375rem;
    box-shadow: inset 0 0 0 .06rem var(--c-line);
  }
  .feature .sec07 .editor__Name { font-size: 1.1rem; }
  .feature .sec07 .editor__Txt { font-size: .847rem; }
  .feature .sec07__GrpTtl {
    width: auto;
    text-align: left;
  }
  .feature .sec07__Prods {
    width: auto;
    flex-wrap: wrap;
    gap: 2rem 1.5rem;
  }
  .feature .sec07__Shop {
    width: auto;
    height: auto;
  }
  .feature .sec07__Shop.-nudge { padding-left: 0; }

  /* ---------- セクション08 (SP) ---------- */
  /* ============================================================
     08 目的別 — あなたはどのタイプ？  SPカンプ 375x5203.99
     ============================================================ */
  .feature .sec08 { align-items: stretch; gap: 2rem; padding: 2rem; }

  /* --- 見出し（SPは罫1px・gap10・ls0・英字lh1.21） --- */
  .feature .sec08 .secHead { width: auto; gap: .8rem; }
  .feature .sec08 .secHead__Row { gap: 1rem; }
  .feature .sec08 .secHead__Line { flex: 0 0 .1rem; border-top-width: .1rem; }
  .feature .sec08 .secHead__Ttl { letter-spacing: 0; }
  .feature .sec08 .secHead__En { line-height: 1.21; letter-spacing: 0; }

  /* --- 見出し帯の横長画像（335x188＝実ファイル等倍） --- */
  .feature .sec08__Hero { width: auto; padding-top: .5rem; }
  .feature .sec08__Hero img { height: auto; }

.feature .sec08__Hero .sec08__HeroImg {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0.5rem .5rem 1rem;
  gap: .3rem
}

.feature .sec08__Hero .sec08__HeroImg li {
  width: 16rem;
}

.feature .sec08__Hero .sec08__HeroImg li:nth-child(2),
.feature .sec08__Hero .sec08__HeroImg li:nth-child(4) {
  width: 16.2rem;
}

  /* --- リード文・タイプ本文（SPは fs16 lhpx19.2＝lh1.2） --- */
  .feature .sec08__Lead { width: auto; line-height: 1.2; }

  /* ---------- タイプブロック ---------- */
  .feature .sec08__Type { width: auto; gap: 1.6rem; margin-top: 1.5rem; }

  .feature .sec08__TypeHead {
    flex-wrap: wrap; align-items: center; height: auto;
    padding-bottom: 0; box-shadow: none; background: transparent;
  }
  .feature .sec08__TypeTtl { flex: 1 1 0; min-width: 0; }
  .feature .sec08__Type.-t2 .sec08__TypeTtl,
  .feature .sec08__Type.-t3 .sec08__TypeTtl { flex: 0 0 auto; max-width: 100%; }

  .feature .sec08__Rec { width: auto; gap: 1.6rem; padding: 1.6rem; }

  .feature .sec08__Type.-t1 .sec08__RecFig { height: 23.6rem; }
  .feature .sec08__Type.-t1 .sec08__RecFig img { left: 2.75rem; top: 1.4rem; width: 22.9rem; height: 20.8rem; }
  .feature .sec08__Type.-t1 .sec08__RecNoImg { left: -98.25rem; top: 11.15rem; }

  .feature .sec08__Type.-t2 .sec08__RecFig { height: 20.862rem; }
  .feature .sec08__Type.-t2 .sec08__RecFig img { left: 8.105rem; top: .089rem; width: 14.089rem; height: 20.684rem; }

  .feature .sec08__Type.-t3 .sec08__RecFig { height: 20.975rem; }
  .feature .sec08__Type.-t3 .sec08__RecFig img { left: -20.458rem; top: -32.132rem; width: 68.216rem; height: 85.24rem; }
  .feature .sec08__Type.-t3 .sec08__RecNoImg { left: 47.758rem; top: 10.088rem; font-size: .669rem; }

  .feature .sec08__Type.-t4 .sec08__RecFig { height: 20.862rem; }
  .feature .sec08__Type.-t4 .sec08__RecFig img { left: -15.106rem; top: -31.958rem; width: 67.847rem; height: 84.778rem; }
  .feature .sec08__Type.-t4 .sec08__RecNoImg { left: 52.741rem; top: 10.031rem; font-size: .665rem; }

  /* --- 箇条書き（1行17px・行間5・角マーカー6角） --- */
  .feature .sec08__Bullets { align-self: stretch; gap: .5rem; }
  .feature .sec08__Bullet { gap: .8rem; }
  .feature .sec08__Dot { flex: 0 0 .6rem; width: .6rem; height: .6rem; }
  .feature .sec08__BulletTxt { line-height: 1.2; }

  /* --- 商品カード（SPは2列×2段。横gap15 / 段間はブロックのgap16） --- */
  .feature .sec08__Items {
    width: auto; align-self: stretch; flex-wrap: wrap;
    row-gap: 1.6rem; column-gap: 1.5rem;
  }

  /* --- 商品リンク枠（335x34＝2行。▶は上下中央・gap6） --- */
  .feature .sec08__Shop { width: auto; align-items: center; gap: .6rem; }
  .feature .sec08__ShopTxt { line-height: 1.2; }

  /* ---------- セクション09 (SP) ---------- */
  /* ============================================================
     09 日傘は何色が合わせやすい？（SP / カンプ 375x4920.31）
     ============================================================ */
  .feature .sec09 { align-items: stretch; gap: 2rem; padding: 2.4rem 2rem; }

  .feature .sec09 .secHead { width: auto; }
  .feature .sec09 .secHead__Row { gap: 1rem; }
  .feature .sec09 .secHead__Line { border-top-color: var(--c-accent); } /* SPカンプは #9B8266 */
  .feature .sec09 .secHead__En { line-height: 1.4; } /* PC側の1.21を戻す（SPカンプは lh1.4） */

  /* --- リード文 --- */
  .feature .sec09__Lead { width: auto; }

  /* --- 色見本カード（162.66×2＋gap9.68＝335。0.605倍スケール） --- */
  .feature .sec09__Colors { width: auto; gap: .968rem; }
  .feature .sec09__ColorRow { gap: .968rem; }
  .feature .sec09__Color { gap: .484rem; padding: 1.209rem; box-shadow: inset 0 0 0 .06rem var(--c-line); }
  .feature .sec09__ColorHead { gap: .726rem; }
  .feature .sec09__Sw { width: 2.177rem; height: 2.177rem; box-shadow: inset 0 0 0 .06rem var(--c-line); }
  .feature .sec09__ColorLabel { gap: .121rem; }
  .feature .sec09__ColorName { font-size: .968rem; }
  .feature .sec09__ColorSub { font-size: .726rem; }
  .feature .sec09__ColorTxt { font-size: .786rem; }
  .feature .sec09__ColorList { gap: .121rem; }
  .feature .sec09__ColorItem { font-size: .726rem; }
  .feature .sec09__ColorRule::after { border-top-width: .06rem; }

  .feature .sec09__Guide { width: auto; gap: 1.2rem; }
  .feature .sec09__Guide .sec09__Items { margin-top: .8rem; }

  .feature .sec09__Items,
  .feature .sec09__Items.-sm {
    width: auto; flex-wrap: wrap; gap: 2rem 1.5rem;
    --cardGap: .8rem; --cardPb: 0rem;
    --thumbW: 100%; --thumbH: 19rem;
    --infoGap: .2rem; --infoPt: 0rem;
    --numFs: 2rem; --nameFs: 1.25rem; --noimgFs: 1.1rem;
  }

  /* --- リンク行（335x44＝2行。三角とgapはPCと同値。高さはhug） --- */
  .feature .sec09__Shop { width: auto; min-height: 0; }

  /* --- 小見出し帯・ラインナップ小見出し・注記・手順（値はPCと同じ） --- */
  .feature .sec09__Bar { width: auto; }
  .feature .sec09__LineupTtl { width: auto; }
  .feature .sec09__Note { width: auto; }
  .feature .sec09__Steps { width: auto; }

  .feature .sec09 .editor { width: auto; gap: .968rem; }
  .feature .sec09 .editor__Avatar {
    width: 3.87rem; height: 3.87rem; box-shadow: inset 0 0 0 .06rem var(--c-line);
  }
  .feature .sec09 .editor__Bubble {
    flex: 1 1 auto; width: auto; gap: .363rem; padding: .968rem 1.209rem;
    box-shadow: inset 0 0 0 .06rem var(--c-line); border-radius: .484rem;
  }
  .feature .sec09 .editor__Name { font-size: 1.1rem; }
  .feature .sec09 .editor__Txt { font-size: .847rem; }

  /* ---------- セクション10 (SP) ---------- */
  /* ============================================================
     10 日傘に関するよくある質問・スタッフの日傘基準
     ============================================================ */
  .feature .sec10 { align-items: stretch; gap: 2rem; padding: 2.4rem 2rem; }

  .feature .sec10 .secHead { width: auto; }
  .feature .sec10 .secHead__Row { gap: 1.2rem; }

  /* --- Q&A（faq-accordion 335x598／item は pad16/0・行内gapは8） --- */
  .feature .sec10__Faq { width: auto; }
  .feature .sec10__Q,
  .feature .sec10__A { gap: .8rem; } /* SPカンプはgap8（PCはgap6） */
  .feature .sec10__Item:last-child::after { display: none; }

  .feature .sec10 .editor {
    width: auto; flex-direction: column; align-items: center; gap: 1.2rem; padding: 0;
  }
  .feature .sec10 .editor__Avatar {
    flex: 0 0 auto; width: 6.4rem; height: 6.4rem;
    box-shadow: inset 0 0 0 .1rem var(--c-line);
  }
  .feature .sec10 .editor__Bubble {
    align-self: stretch; gap: .8rem; padding: 1.6rem 2rem;
    box-shadow: inset 0 0 0 .1rem var(--c-line); border-radius: .8rem;
  }
  .feature .sec10 .editor__Name { font-size: 1.1rem; }
  .feature .sec10 .editor__Txt { font-size: 1.4rem; }

  /* --- 番外編 --- */
  .feature .sec10__SubTtl { width: auto; padding: .6rem 1.2rem; }
  .feature .sec10__Txt { width: auto; }

  /* ---------- セクション11 (SP) ---------- */
  /* ============================================================
     11 2026年 売れゆきベスト（ランキング）  SPカンプ 375x1395
     ============================================================ */
  .feature .sec11 { align-items: stretch; gap: 2rem; padding: 2rem; }
  .feature .sec11 .secHead { width: auto; }
  .feature .sec11 .secHead__Row { gap: 1.2rem; }
  .feature .sec11 .secHead__Line { flex: 0 1 2.8rem; }
  .feature .sec11__Lead { width: auto; }
  .feature .sec11__Items { width: auto; row-gap: 1.8rem; column-gap: 1.5rem; }
  .feature .sec11__CtaWrap { width: auto; padding: .4rem 0; }
  .feature .sec11__Cta {
    width: 100%; padding: 1.6rem 2.4rem; border-radius: 99.9rem;
    font-size: 1.5rem; line-height: 1.2; letter-spacing: .15rem;
  }
  /* ---------- .item__list (SP) ---------- */
  .item__list .item__listCell {
    width: 16rem;
  }
  .item__list .ranking_item .item-color-image {
    margin-top: 0.5rem;
  }
  .item__list .ranking_item .item-color-image ul li {
    width: 2.7rem;
  }
  .item__list .item_campaign {
    width: 100%;
    height: auto !important;
    line-height: 130% !important;
    padding: 5px 0 6px;
    box-sizing: border-box;
    text-align: center;
    font-size: 11px;
    font-weight: 500;
    color: #f17a7a;
    border: 1px solid #F48E8E;
    position: inherit !important;
    background: none !important;
    letter-spacing: 1px;
  }
  /* SPSECTIONS:END */
}