/* Attractive v30 — 仕上げ
 *
 *  v29 と同じスイッチ（<body class="at29">）のときだけ読み込まれます。
 *   1. トップ：写真1枚＋縦書きのことば
 *   2. 特集：写真のない枠は「文字だけの枠」に
 *   3. 商品カード：素材のひとこと・順位の数字
 *   4. 読みものページ（サイズガイド／素材とお手入れ）
 *   5. ご案内ページ共通：英字ラベルと箱をやめる
 *   6. 小さな仕上げ（空のカート・404・選択色）
 */

/* 1. トップ：写真1枚＋縦書きのことば ------------------------------------------ */
.at30-hero { position: relative; display: grid; background: var(--a-paper); color: var(--a-ink); }
.at30-hero-photo { display: block; margin: 0; overflow: hidden; background: var(--a-photo); }
.at30-hero-photo img { display: block; width: 100% !important; height: 100% !important; max-width: none; aspect-ratio: 4 / 5; max-height: 74vh; object-fit: cover; }
.at30-hero-text { display: flex; flex-direction: column; gap: 20px; padding: 28px 16px 36px; }
.at30-hero-copy { margin: 0; font: 500 24px/1.75 var(--a-serif); letter-spacing: .08em; color: var(--a-ink); }
.at30-hero-copy span { display: block; }
.at30-hero-sub { display: grid; gap: 14px; justify-items: start; }
.at30-hero-lead { max-width: 24em; margin: 0; font-size: 13.5px; line-height: 2; color: var(--a-ink2); }
@media (min-width: 900px) {
  .at30-hero { grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); min-height: clamp(460px, calc(100vh - 230px), 700px); }
  .at30-hero-photo { grid-column: 2; grid-row: 1; position: relative; }
  .at30-hero-photo img { position: absolute; inset: 0; aspect-ratio: auto; max-height: none; }
  .at30-hero-text {
    grid-column: 1; grid-row: 1; justify-content: space-between; gap: 40px; box-sizing: border-box;
    padding: 64px 56px 52px max(32px, calc((100vw - 1360px) / 2));
  }
  /* 縦書き：1行目がいちばん右（写真のすぐ隣）。2行目・3行目は少しずつ下げて始める */
  .at30-hero-copy {
    writing-mode: vertical-rl; align-self: flex-end;
    font-size: clamp(26px, 2.5vw, 36px); line-height: 2; letter-spacing: .18em;
  }
  .at30-hero-copy span:nth-child(2) { padding-top: 1.6em; }
  .at30-hero-copy span:nth-child(n+3) { padding-top: 3.2em; }
  .at30-hero-lead { font-size: 14px; }
  .at30-hero.is-noimg { grid-template-columns: minmax(0, 1fr); min-height: 420px; }
  .at30-hero.is-noimg .at30-hero-text { width: var(--a-w); margin: 0 auto; padding-left: 0; padding-right: 8%; }
}

/* 2. 特集：写真のない枠は文字だけで見せる -------------------------------------- */
body.at29 .at27-feature-item.is-text {
  display: flex; flex-direction: column; justify-content: flex-end; box-sizing: border-box;
  height: 100%; min-height: 172px; padding: 22px 20px 20px; background: #fff;
}
body.at29 .at27-feature-item.is-text .at27-feature-text { margin-top: 0; }
body.at29 .at27-feature-item.is-text .at27-feature-title { font: 500 17px/1.6 var(--a-serif); letter-spacing: .04em; }
.at30-feature-go { margin-top: 10px; font-size: 12.5px; color: var(--a-ink); text-decoration: underline; text-decoration-color: #bdb6aa; text-underline-offset: 5px; }
body.at29 .at27-feature-list > li { height: auto; }
@media (max-width: 899px) { body.at29 .at27-feature-list { align-items: stretch; } }
@media (min-width: 900px) {
  body.at29 .at27-feature-list { align-items: stretch; }
  body.at29 .at27-feature-list > li:first-child .at27-feature-item.is-text { min-height: 420px; padding: 44px 44px 40px; }
  body.at29 .at27-feature-list > li:first-child .at27-feature-item.is-text .at27-feature-title { font-size: 27px; line-height: 1.7; }
  body.at29 .at27-feature-list > li:first-child .at27-feature-item.is-text .at27-feature-text { margin-top: 0; }
  body.at29 .at27-feature-list > li:not(:first-child) .at27-feature-item.is-text { display: flex; align-items: stretch; min-height: 0; padding: 22px 26px; }
  body.at29 .at27-feature-item.is-text:hover .at30-feature-go { text-decoration-color: var(--a-ink); }
}

/* 3. 商品カード ------------------------------------------------------------ */
body.at29 .ac-mat { margin: 2px 0 0; font-size: 11.5px; line-height: 1.5; letter-spacing: .02em; color: var(--a-mute); }
/* 順位の見た目は css/at-v31.css に移しました */

/* 4. 読みものページ（サイズガイド／素材とお手入れ） ----------------------------- */
#page .at30-doc-head .at30-doc-lead { max-width: 34em; margin: 16px 0 0; font: 400 14.5px/2 var(--a-ja); letter-spacing: .02em; color: var(--a-ink2); text-align: left; }
#page .at30-doc { width: min(1032px, calc(100% - 32px)); margin: 4px auto 0; }
#page .at30-doc-nav ul { display: flex; gap: 8px; margin: 0 -16px; padding: 0 16px 4px; list-style: none; overflow-x: auto; scrollbar-width: none; }
#page .at30-doc-nav ul::-webkit-scrollbar { display: none; }
#page .at30-doc-nav a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border: 1px solid var(--a-line); font-size: 12.5px; white-space: nowrap; color: var(--a-ink2); text-decoration: none; }
#page .at30-doc-body { margin-top: 20px; }
#page .at30-doc-body > section { padding: 36px 0 40px; border-top: 1px solid var(--a-line); scroll-margin-top: calc(var(--a-head) + 64px); }
#page .at30-doc-body > section:first-child { border-top-color: var(--a-ink); }
#page .at30-doc-body h2 { margin: 0 0 14px; padding: 0; border: 0; font: 500 21px/1.6 var(--a-serif); letter-spacing: .05em; color: var(--a-ink); text-align: left; }
#page .at30-doc-body h2::before, #page .at30-doc-body h2::after { content: none; }
#page .at30-doc-body p { margin: 0 0 1.1em; font-size: 14.5px; line-height: 2; color: var(--a-ink2); }
#page .at30-doc-body p:last-child { margin-bottom: 0; }

#page .at30-steps { counter-reset: at30; margin: 24px 0; padding: 0; list-style: none; }
#page .at30-steps li { counter-increment: at30; position: relative; margin: 0 0 20px; padding: 0 0 0 44px; font-size: 14.5px; line-height: 1.95; color: var(--a-ink2); }
#page .at30-steps li::before { content: counter(at30); position: absolute; } /* 数字の見た目は css/at-v31.css */
#page .at30-steps strong { display: block; font-weight: 500; color: var(--a-ink); }

#page .at30-table-wrap { max-width: 380px; margin: 28px 0 10px; }
#page .at30-table { width: 100%; margin: 0; border: 0; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
#page .at30-table caption { padding: 0 0 8px; text-align: left; font-size: 12.5px; color: var(--a-mute); caption-side: top; }
#page .at30-table th, #page .at30-table td { padding: 9px 12px 9px 0; border: 0; border-bottom: 1px solid var(--a-line); background: none; text-align: left; font-weight: 400; color: var(--a-ink); }
#page .at30-table thead th { padding-top: 6px; border-bottom-color: var(--a-ink); font-size: 12px; color: var(--a-mute); }
#page .at30-doc-body .at30-note { font-size: 12.5px; line-height: 1.8; color: var(--a-mute); }

#page .at30-points { margin: 22px 0 0; padding: 0; list-style: none; }
#page .at30-points li { position: relative; padding: 0 0 0 22px; margin: 0 0 10px; font-size: 14.5px; line-height: 1.95; color: var(--a-ink2); }
#page .at30-points li::before { content: ''; position: absolute; left: 2px; top: .98em; width: 10px; height: 1px; background: var(--a-ink); }

#page .at30-len-fig { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px; align-items: center; margin: 24px 0 14px; padding: 0; }
#page .at30-len-fig svg { display: block; width: 100%; height: auto; }
#page .at30-len-list { margin: 0; }
#page .at30-len-list > div { display: grid; grid-template-columns: 4.2em minmax(0, 1fr); padding: 9px 0; border-bottom: 1px solid var(--a-line); font-size: 14px; }
#page .at30-len-list dt { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--a-ink); }
#page .at30-len-list dd { margin: 0; color: var(--a-ink2); }

#page .at30-care { margin: 0; }
#page .at30-care > div { display: grid; gap: 2px; padding: 14px 0; border-top: 1px solid var(--a-line); }
#page .at30-care > div:first-child { border-top: 0; padding-top: 4px; }
#page .at30-care dt { margin: 0; font-size: 12.5px; font-weight: 400; letter-spacing: .04em; color: var(--a-mute); }
#page .at30-care dd { margin: 0; font-size: 14.5px; line-height: 1.95; color: var(--a-ink2); }

#page .at30-doc-body > section.at30-ask { margin-top: 8px; padding: 30px 24px 32px; border-top: 0; background: var(--a-paper); }
#page a.at30-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 28px; background: var(--a-ink); color: #fff; font-size: 14px; letter-spacing: .04em; text-decoration: none; transition: background .2s; }
#page a.at30-btn:hover { background: #3a3733; color: #fff; }

@media (min-width: 600px) {
  #page .at30-care > div { grid-template-columns: 11.5em minmax(0, 1fr); gap: 24px; padding: 16px 0; }
  #page .at30-care dt { padding-top: .35em; }
  #page .at30-len-fig { grid-template-columns: 180px minmax(0, 1fr); gap: 36px; }
}
@media (min-width: 900px) {
  #page .at30-doc { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 0 88px; align-items: start; width: min(1032px, calc(100% - 64px)); margin-top: 20px; }
  #page .at30-doc-nav { position: sticky; top: calc(var(--a-head) + 76px); }
  #page .at30-doc-nav ul { display: block; margin: 0; padding: 0; border-left: 1px solid var(--a-line); overflow: visible; }
  #page .at30-doc-nav a { display: block; min-height: 0; padding: 7px 0 7px 18px; margin-left: -1px; border: 0; border-left: 1px solid transparent; font-size: 13px; white-space: normal; color: var(--a-mute); }
  #page .at30-doc-nav a:hover { border-left-color: var(--a-ink); color: var(--a-ink); }
  #page .at30-doc-body { max-width: 41em; margin-top: 0; }
  #page .at30-doc-body > section { padding: 48px 0 56px; }
  #page .at30-doc-body > section:first-child { padding-top: 0; border-top: 0; }
  #page .at30-doc-body h2 { font-size: 24px; margin-bottom: 18px; }
  #page .at30-doc-body > section.at30-ask { padding: 40px 44px 44px; }
}

/* 5. ご案内ページ共通：英字ラベルと箱をやめ、線で区切る -------------------------- */
body.at29 #page .page-header-en, body.at29 #page .at-page-header-label { display: none !important; }
body.at29 #page .at-guide-card { padding: 28px 0 30px !important; border: 0 !important; border-top: 1px solid var(--a-line) !important; border-radius: 0 !important; background: none !important; }
body.at29 #page .at-guide-card h2 { font-family: var(--a-serif) !important; font-weight: 500 !important; }
@media (min-width: 900px) {
  body.at29 #page .at-guide-grid { gap: 0 64px !important; }
}

/* 6. 小さな仕上げ --------------------------------------------------------- */
body.at29 ::selection { background: #e3ded6; color: var(--a-ink); }
body.at29 .at-empty-cart-v22 > svg { display: none; }
body.at29 .at-404-num { font: italic 400 20px/1 var(--a-en) !important; letter-spacing: .04em !important; color: var(--a-mute) !important; }
#page .at30-len-fig .at29-len-arc { stroke: #8d8a85; }
#page .at30-len-fig .at29-len-num { fill: var(--a-ink); }

/* 7. 残っていた金色の整理 ---------------------------------------------------
 *    画面を1枚ずつ確認し、金色のまま残っていた箇所だけを墨色・グレーに揃えています（レビューの星はそのまま） */
body.at29 #page :is(.at-auth-options, .at-auth-privacy, .at-co-dialog-note, .at-wish-notice, .at-contact-wrap p, .at-page-body p) a:not([class]) {
  color: var(--a-ink) !important; text-decoration: underline; text-decoration-color: #bdb6aa; text-underline-offset: 4px;
}
body.at29 #page :is(.at-section-label, .at-thanks-label, .at-toc-title, .at-cart-page-head > span, .at-auth-eyebrow, .at-guide-card-en) { color: var(--a-mute) !important; }
body.at29 #page .at-faq summary::before, body.at29 #page details > summary::before { color: var(--a-mute); }
body.at29 #page .at-cart-save { color: var(--a-ink2) !important; }
body.at29 #page .at-account-avatar { background: var(--a-ink) !important; color: #fff !important; }
body.at29 #page .at-empty-ship { border-color: var(--a-line) !important; }
body.at29 #page .at-contact-success { border-color: var(--a-ink) !important; }
body.at29 #page .at-contact-back { color: var(--a-ink) !important; border-color: var(--a-ink) !important; }
body.at29 #page .at-thanks-mark { border-color: var(--a-ink) !important; color: var(--a-ink) !important; }
body.at29 #page .at-thanks-mark svg { stroke: currentColor; }
body.at29 #page .at-page-header-title::after { content: none !important; }
body.at29 #page :is(.at-auth-merits, .at-trust) li::before { background: var(--a-ink) !important; }
body.at29 #page .at-wish-inline-heart { color: var(--a-sale) !important; }
body.at29 #page .at-wish-btn.is-active { color: var(--a-sale) !important; }
body.at29 #page .at-wish-btn.is-active svg path { stroke: currentColor; }