/* Attractive v29 — 「テンプレ感」を減らす見直し
 *
 *  すべて body.at29 のときだけ効きます（カスタマイザーでオフ、または URL に ?at29=0 で元の見た目）。
 *   1. 色と書体 … 金色の線・英字大文字の見出しをやめ、日本語の明朝を主役に
 *   2. 並べ方   … 新着の1枚目を大きく／特集は「大1＋小3」／WOMEN・MEN は幅と高さをずらす
 *   3. 動き     … 下から浮き上がる動きをやめ、ふわっと出るだけに
 *   4. つくり手の話（トップ）
 *   5. 着用メモ（商品ページ）
 */

/* 1. 色と書体 ------------------------------------------------------------ */
body.at29 {
  --a-gold: #5d564c;                 /* 飾りの金色をやめる。光るのは商品写真の金属だけに */
  --a-serif: 'Shippori Mincho', 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
}

/* 見出し：日本語を大きく、英字は小さな添え書きに（大文字・広い字間をやめる） */
body.at29 .at27-title { flex-direction: column-reverse; gap: 6px; }
body.at29 .at27-title-ja {
  font: 500 20px/1.5 var(--a-serif); letter-spacing: .04em; color: var(--a-ink);
  font-feature-settings: 'palt';
}
body.at29 .at27-title-en {
  font: italic 400 14px/1.2 var(--a-en); letter-spacing: .02em; text-transform: none; color: var(--a-mute);
}
@media (min-width: 900px) {
  body.at29 .at27-title-ja { font-size: 25px; }
  body.at29 .at27-title-en { font-size: 15px; }
}
html.at-motion body.at29 .at27-head.is-in .at27-title-en { animation: none; }
body.at29 .at27-feature-label { letter-spacing: .08em; }

/* 2. 並べ方 -------------------------------------------------------------- */
/* 2-1. 新着：1枚目だけ大きく。端数が出ないよう、表示する枚数も画面幅ごとに合わせています
 *      〜599px … 2列・7枚（大1＋小6）／600〜899px … 2列・11枚／900〜1199px … 4列・9枚／1200px〜 … 5列・12枚 */
body.at29 .at27-grid--6 > :first-child { grid-column: span 2; }
body.at29 .at27-grid--6 > :first-child .ac-media { aspect-ratio: 5 / 4; }
body.at29 .at27-grid--6 > :first-child .ac-name { font-size: 14.5px; }
@media (max-width: 599px) {
  body.at29 .at27-home .at27-grid--6 > :nth-child(7) { display: block; }
}
@media (min-width: 600px) and (max-width: 899px) {
  body.at29 .at27-grid--6 > :nth-child(n+12) { display: none; }
}
@media (min-width: 900px) {
  body.at29 .at27-grid--6 > :first-child { grid-row: span 2; display: flex; flex-direction: column; }
  body.at29 .at27-grid--6 > :first-child .ac-media { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }
  body.at29 .at27-grid--6 > :first-child .ac-body { flex: none; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  body.at29 .at27-grid--6 > :nth-child(9) { display: block; }
}
@media (min-width: 1200px) {
  body.at29 .at27-grid--6 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px 24px; }
}

/* 2-2. 特集：同じ大きさ4つ → 大1＋小3（PCのみ。スマホは横スクロールのまま） */
@media (min-width: 900px) {
  body.at29 .at27-feature-list { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 28px 48px; align-items: start; }
  body.at29 .at27-feature-list > li:first-child { grid-row: 1 / span 3; }
  body.at29 .at27-feature-list > li:first-child img { aspect-ratio: 4 / 3; }
  body.at29 .at27-feature-list > li:first-child .at27-feature-text { margin-top: 18px; max-width: 30em; }
  body.at29 .at27-feature-list > li:first-child .at27-feature-title { font: 500 21px/1.6 var(--a-serif); letter-spacing: .04em; }
  body.at29 .at27-feature-list > li:first-child .at27-feature-desc { font-size: 13.5px; line-height: 1.9; }
  body.at29 .at27-feature-list > li:not(:first-child) .at27-feature-item { display: grid; grid-template-columns: 40% minmax(0, 1fr); gap: 20px; align-items: center; }
  body.at29 .at27-feature-list > li:not(:first-child) img { aspect-ratio: 4 / 3; }
  body.at29 .at27-feature-list > li:not(:first-child) .at27-feature-text { margin-top: 0; }
}

/* 2-3. WOMEN / MEN：半分ずつ → 7:5、右を一段下げる */
@media (min-width: 900px) {
  body.at29 .at27-gender { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: start; }
  /* v36：枠の前に読み上げ用の見出し（h2）があるため、nth-child ではなく div だけを数える nth-of-type で指定 */
  body.at29 .at27-gender > .at27-gender-col:nth-of-type(even) { margin-top: 72px; }
  body.at29 .at27-gender > .at27-gender-col:nth-of-type(odd) .at27-gender-photo img { aspect-ratio: 16 / 9; }
  body.at29 .at27-gender > .at27-gender-col:nth-of-type(even) .at27-gender-photo img { aspect-ratio: 4 / 3; }
  /* カテゴリーが2行に折り返したとき、行頭に「/」が来ないよう、区切りは余白だけに */
  body.at29 .at27-gender-cats { gap: 2px 22px; }
  body.at29 .at27-gender-cats a { padding-right: 0; }
  body.at29 .at27-gender-cats li + li a::before { content: none; }
}

/* 2-4. 余白に強弱をつける（帯つきの枠はそのまま） */
@media (min-width: 900px) {
  body.at29 .at27-home > .at27-sec:not(.at27-band) { margin-top: 104px; }
  body.at29 .at27-home > .at27-band + .at27-sec:not(.at27-band) { margin-top: 88px; }
}

/* 3. 動き：浮き上がりをやめ、表示の切り替わりだけ残す ------------------------ */
html.at-motion body.at29 :is(
  .at27-head, .at27-rank-sub, .at27-info, .at27-shop-head, .at27-rail > *, .at27-items-list > li,
  .at27-feature-list > li, .at27-gender > *, .at27-grid > *, .at-curated-grid > *, .at-wish-grid > *
) { transform: none !important; transition-duration: .45s; transition-delay: 0s; }
html.at-motion body.at29 .at-bnr-slide.is-current img { animation: none; }

/* 4. つくり手の話（トップ） ------------------------------------------------ */
.at29-story { display: grid; gap: 28px; }
.at29-story-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--a-photo); }
.at29-story-text { max-width: 31em; font-size: 14.5px; line-height: 2.1; color: var(--a-ink2); }
.at29-story-text p { margin: 0 0 1.4em; }
.at29-story-title { margin: 0 0 20px; padding: 0; border: 0; font: 500 22px/1.7 var(--a-serif); letter-spacing: .05em; color: var(--a-ink); font-feature-settings: 'palt'; }
.at29-story-title::before, .at29-story-title::after { content: none !important; }
.at29-story-sign { margin-top: 28px !important; font-size: 13px; text-align: right; color: var(--a-ink); }
.at29-story-link { margin: 0 !important; }
@media (min-width: 900px) {
  .at29-story { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 0 9%; align-items: start; }
  .at29-story-photo { margin-left: -32px; }          /* 写真だけ、枠から少しはみ出させる */
  .at29-story-text { padding-top: 112px; }           /* 文章は写真より下から始める */
  .at29-story-title { font-size: 28px; margin-bottom: 28px; }
  .at29-story.is-noimg { grid-template-columns: minmax(0, 1fr); }
  .at29-story.is-noimg .at29-story-text { padding-top: 0; margin-left: 16%; }
}

/* 5. 着用メモ（商品ページ） ------------------------------------------------ */
#page .at29-fit { margin: 24px 0 4px; padding: 20px 0 18px; border-top: 1px solid var(--a-line); border-bottom: 1px solid var(--a-line); }
#page .at29-fit-head { margin: 0 0 10px; font: 500 12px/1.4 var(--a-ja); letter-spacing: .1em; color: var(--a-mute); }
#page .at29-fit-wear { margin: 0; font-size: 14px; line-height: 1.9; color: var(--a-ink); }

#page .at29-len { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; margin: 14px 0 0; padding: 0; }
#page .at29-len svg { display: block; width: 100%; height: auto; }
.at29-len-body { fill: none; stroke: #cfc9bf; stroke-width: 1.2; stroke-linecap: round; }
.at29-len-arc { fill: none; stroke: #cfc9bf; stroke-width: 1; stroke-dasharray: 2 3; }
.at29-len-arc.is-this { stroke: var(--a-ink); stroke-width: 1.6; stroke-dasharray: none; }
.at29-len-num { font: 400 10px/1 var(--a-ja); fill: #8d8a85; }
.at29-len-num.is-this { font-weight: 600; fill: var(--a-ink); }
#page .at29-len figcaption { font-size: 13.5px; line-height: 1.8; color: var(--a-ink2); }
#page .at29-len figcaption strong { font-weight: 600; color: var(--a-ink); }
#page .at29-len figcaption small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--a-mute); }

#page .at29-fit-list { display: grid; gap: 6px; margin: 14px 0 0; }
#page .at29-fit-list > div { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 12px; font-size: 13.5px; line-height: 1.8; }
#page .at29-fit-list dt { margin: 0; font-weight: 400; color: var(--a-mute); }
#page .at29-fit-list dd { margin: 0; color: var(--a-ink2); }

#page .at29-maker { margin: 16px 0 0; padding: 14px 16px 14px 18px; border-left: 2px solid var(--a-ink); background: var(--a-paper); }
#page .at29-maker-head { margin: 0 0 4px; font: 500 12px/1.4 var(--a-ja); letter-spacing: .08em; color: var(--a-mute); }
#page .at29-maker p { margin: 0; font-size: 13.5px; line-height: 1.9; color: var(--a-ink); }

#page .at29-fit-more { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 14px 0 0; font-size: 12.5px; }
#page .at29-fit-more a { display: inline-flex; align-items: center; min-height: 32px; color: var(--a-ink); text-decoration: underline; text-decoration-color: #bdb6aa; text-underline-offset: 4px; }
#page .at29-fit-more a:hover { text-decoration-color: var(--a-ink); }