/* AUEN LP-CODE（体験先行型・bl3336 の型）─ 2026-09-17。スコープ #auen-lp-e。DS準拠：Zen Kaku Gothic New / 6色 / 影なし / 角丸なし */ #auen-lp-e{--page:#FFFFFF;--mist:#F2F5F6;--grey:#97A0A4;--ink:#1B2025;--ink2:rgba(27,32,37,.70);--ink3:rgba(27,32,37,.52);--acc:#56B5CE;--line:rgba(27,32,37,.10); font-family:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif;color:var(--ink);background:var(--page); font-size:15px;line-height:1.9;letter-spacing:.03em;display:block;max-width:1040px;margin:0 auto;text-align:left} #auen-lp-e *{margin:0;padding:0;box-sizing:border-box} #auen-lp-e img{max-width:100%;display:block;width:100%;height:auto} #auen-lp-e section{padding:80px 24px} @media(min-width:760px){#auen-lp-e section{padding:112px 40px}} #auen-lp-e .au-eb{font-size:12px;font-weight:500;letter-spacing:.18em;color:var(--ink3);margin-bottom:14px} /* 節の番号＋英字ラベル（bl3304 と同じ型） */ #auen-lp-e .au-ix{display:flex;align-items:center;gap:11px;margin-bottom:16px} #auen-lp-e .au-ix b{font-size:14px;font-weight:700;letter-spacing:.04em;font-variant-numeric:tabular-nums} #auen-lp-e .au-ix span{font-size:10.5px;font-weight:700;letter-spacing:.22em;color:var(--ink3)} #auen-set .au-ix{display:flex;align-items:center;gap:11px;margin-bottom:16px} #auen-set .au-ix b{font-size:14px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums} #auen-set .au-ix span{font-size:10.5px;font-weight:700;letter-spacing:.22em;color:rgba(255,255,255,.58)} /* 小ラベル（SCENE 01 ／ VALUE 01） */ #auen-lp-e .au-role figcaption i,#auen-lp-e .au-why .au-item i{display:block;font-style:normal;font-size:10.5px; font-weight:700;letter-spacing:.18em;color:var(--ink3);margin-bottom:8px} #auen-lp-e h2{font-size:24px;font-weight:500;line-height:1.5;letter-spacing:.02em;max-width:26em} @media(min-width:760px){#auen-lp-e h2{font-size:30px}} #auen-lp-e .au-lead{font-size:15px;color:var(--ink2);margin-top:20px;max-width:36em} #auen-lp-e .au-body{font-size:15px;color:var(--ink2);margin-top:14px;max-width:36em} #auen-lp-e .au-note{font-size:12.5px;color:var(--ink3);margin-top:14px;max-width:40em} #auen-lp-e .au-btn{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;font-size:14px;font-weight:500;padding:16px 34px;letter-spacing:.06em} #auen-lp-e .au-btn-line{display:inline-block;background:transparent;color:var(--ink);text-decoration:none;font-size:13px;font-weight:500;padding:14px 28px;border:1px solid var(--ink);letter-spacing:.06em} #auen-lp-e a.au-tx{color:var(--ink);text-underline-offset:4px} /* 1 hero ─ 主役は体験のコピー（h1）。商品名は「その入口になる1本目」を添える支え役。PCは左文章・右写真の2カラム */ /* HERO＝白地。SPは写真が先、PCは左コピー・右写真の2カラム */ #auen-lp-e .au-hero{padding:0;display:flex;flex-direction:column} #auen-lp-e .au-hero figure{order:1} #auen-lp-e .au-hero .au-name{order:2;padding:32px 24px 8px} #auen-lp-e .au-hero .au-product-sm{font-size:13px;font-weight:500;letter-spacing:.14em;color:var(--ink3);margin-bottom:16px} #auen-lp-e .au-hero h1{font-size:clamp(30px,3.4vw,50px);font-weight:500;line-height:1.62;letter-spacing:.05em} #auen-lp-e .au-hero h1 .au-h1-name{display:block;font-size:clamp(19px,2vw,24px);font-weight:500;letter-spacing:.09em;line-height:1.5;color:var(--ink2);margin-top:24px} /* 1行目が9文字以上の品番用（tt3158「朝のインナー選び、」）。PC幅1400px超で列幅452pxに収まらず「選／び、」で折れたため、上限を46pxに。使う側が h1 の主コピーを で包む（2026-09-18） */ #auen-lp-e .au-hero h1 .au-h1-fit{display:block;font-size:clamp(30px,3.1vw,46px)} #auen-lp-e .au-hero .au-proof{display:inline-block;margin-top:22px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;letter-spacing:.16em;color:var(--ink3)} #auen-lp-e .au-hero .au-proof b{font-weight:700;font-size:15px;letter-spacing:.06em;color:var(--ink)} #auen-lp-e .au-hero .au-lead{font-size:14px;line-height:2.1;color:var(--ink2);margin-top:22px;max-width:480px} #auen-lp-e .au-hero .au-anchor{margin-top:30px} #auen-lp-e .au-hero .au-anchor .au-note{margin-top:8px} #auen-lp-e .au-hero figure{margin-top:36px} @media(min-width:760px){ #auen-lp-e .au-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;padding:72px 40px 96px} #auen-lp-e .au-hero figure{order:2} #auen-lp-e .au-hero .au-name{order:1;padding:0} #auen-lp-e .au-hero .au-product-sm{font-size:14px} #auen-lp-e .au-hero figure{margin-top:0} } /* 4 code-ai（写真もアプリへのリンク） */ #auen-lp-e .au-ai .au-shot{display:block} #auen-lp-e .au-ai .au-shot img{aspect-ratio:auto;object-fit:contain} #auen-lp-e .au-ai .au-grid{display:grid;gap:32px;margin-top:36px} @media(min-width:760px){#auen-lp-e .au-ai .au-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:48px}} /* 5 role */ #auen-lp-e .au-role .au-three{display:grid;gap:36px;margin-top:40px} /* SP＝横スライド（1.15カラム＝次の1枚が少しのぞく。写真の大きさは保ったまま「まだある」と分かる） PC＝3カラムのまま。ドットはJSが動く時だけ出す */ @media(max-width:759px){ #auen-lp-e .au-role .au-three{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;margin:40px -24px 0;padding:0 24px 6px;scroll-padding-left:24px;scrollbar-width:none} #auen-lp-e .au-role .au-three::-webkit-scrollbar{display:none} #auen-lp-e .au-role .au-three>*{flex:0 0 95%;scroll-snap-align:start} #auen-lp-e .au-role .au-three>*:last-child{scroll-snap-align:end} } @media(min-width:760px){#auen-lp-e .au-role .au-three{grid-template-columns:repeat(3,1fr);gap:28px}} #auen-lp-e .au-role figcaption b{display:block;font-weight:500;font-size:16px;margin-top:14px} #auen-lp-e .au-role figcaption span{display:block;font-size:13.5px;color:var(--ink2);margin-top:6px} /* アップデート（生地と仕立てから、見直しました。）＝左に実写、右に3項目の縦リスト */ #auen-lp-e .au-update .au-grid{display:grid;gap:32px} @media(min-width:760px){#auen-lp-e .au-update .au-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center}} #auen-lp-e .au-update figure{position:relative} #auen-lp-e .au-update figure img{aspect-ratio:3/4;object-fit:cover} /* 05 MATERIAL のクロスフェード（3.4秒ごと・重なり1.4秒・ゆっくり引くズームつき）。 周期は「枚数×3.4秒」で変わるため、animation・@keyframes・reduced-motion は build-lp-code.js が枚数から生成してCSS末尾に足す （2026-09-17：4枚のLPに6枚用の20.4sが当たり、1周の1/3が空白になった不具合の再発防止） */ #auen-lp-e .au-update .au-slides{position:relative;aspect-ratio:3/4;background:var(--mist);overflow:hidden} #auen-lp-e .au-update .au-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0; transform-origin:center;will-change:opacity,transform} #auen-lp-e .au-update .au-slides img:first-child{opacity:1} /* 仮画像チップ（センタープレスと同じ写真の別クロップ＝実写が入ったら外す） */ #auen-lp-e .au-update .au-ups{list-style:none;display:grid;gap:20px;margin-top:28px;counter-reset:u} #auen-lp-e .au-update .au-ups li{padding-top:18px;border-top:1px solid var(--line)} #auen-lp-e .au-update .au-ups li::before{content:counter(u,decimal-leading-zero);counter-increment:u;display:block; font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--ink3);margin-bottom:10px} #auen-lp-e .au-update .au-ups h3{font-size:16px;font-weight:500;line-height:1.5;letter-spacing:.02em} @media(min-width:760px){#auen-lp-e .au-update .au-ups h3{font-size:17px}} #auen-lp-e .au-update .au-ups p{font-size:14px;color:var(--ink2);margin-top:8px;max-width:34em} /* スクロールで現れる（JSが動く時だけ。動かなければ最初から表示） */ #auen-lp-e.au-rv-on .au-rv{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s ease} #auen-lp-e.au-rv-on .au-rv.au-is-in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){#auen-lp-e.au-rv-on .au-rv{opacity:1;transform:none;transition:none}} /* 横スライドの中の1枚ごとには、現れる動きを付けない（2026-09-30 y.nojiri 指摘）。 IntersectionObserver は画面の外（右側）のカードを「見えていない」と数えるので、フリックで入ってきた瞬間に translateY(22px)→0 が走り、スライドが上下にふわふわ動く。節ごとの現れる動きはそのまま残す。 09 STYLING は PC でも矢印で送る横スライドなので常に。02／04 は横スライドになる SP だけ */ #auen-lp-e.au-rv-on .au-looks .au-four>.au-rv{opacity:1;transform:none;transition:none} @media(max-width:759px){ #auen-lp-e.au-rv-on .au-role .au-three>.au-rv,#auen-lp-e.au-rv-on .au-why .au-grid6>.au-rv{opacity:1;transform:none;transition:none} } /* 横スライドの枠は縦には動かさない（2026-09-30 y.nojiri 指摘「横スクロール中に縦スクロールへ移りにくい」）。 overflow-x:auto だけだと縦も auto になり、端数ぶんのはみ出しで枠が縦の指の動きを受け取ることがある。 縦は常にページへ渡し、横の行き止まりでページ側（戻る操作など）へ動きを渡さない */ #auen-lp-e .au-role .au-three,#auen-lp-e .au-why .au-grid6,#auen-lp-e .au-looks .au-four,#auen-lp-e .au-spec .au-fits{overflow-y:hidden;overscroll-behavior-x:contain} /* 6 why（PC＝1項目1行・写真と文章を左右に交互／SP＝横スワイプのスライド。画像は正方形） */ #auen-lp-e .au-why .au-grid6{display:grid;grid-template-columns:repeat(2,1fr);gap:36px 16px;margin-top:36px} #auen-lp-e .au-why figure{position:relative;margin-bottom:16px} #auen-lp-e .au-why figure img,#auen-lp-e .au-why figure video{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--mist)} /* 動画は元の比率のまま（横幅いっぱい・切らない）。写真は 1:1 のまま（2026-09-18 y.nojiri） */ #auen-lp-e .au-why figure video{aspect-ratio:auto;height:auto;object-fit:contain} #auen-lp-e .au-why h3{font-size:16px;font-weight:500;line-height:1.5;letter-spacing:.02em} #auen-lp-e .au-why .au-item p{font-size:13.5px;color:var(--ink2);margin-top:10px} @media(min-width:760px){ #auen-lp-e .au-why .au-grid6{display:block;margin-top:0} #auen-lp-e .au-why .au-item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;margin-top:72px} #auen-lp-e .au-why .au-item:nth-child(even) figure{order:2} #auen-lp-e .au-why figure{margin-bottom:0} #auen-lp-e .au-why h3{font-size:24px} #auen-lp-e .au-why .au-item p{font-size:15px;margin-top:14px;max-width:30em} } /* SP＝横スワイプ（次のカードが少し見える）。ドットはJSが動く時だけ */ @media(max-width:759px){ #auen-lp-e .au-why .au-grid6{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:24px;-webkit-overflow-scrolling:touch;margin:48px -24px 0;padding:0 24px 6px;scrollbar-width:none} #auen-lp-e .au-why .au-grid6::-webkit-scrollbar{display:none} #auen-lp-e .au-why .au-grid6>.au-item{flex:0 0 78%;scroll-snap-align:start} #auen-lp-e .au-why .au-dots,#auen-lp-e .au-role .au-dots{display:none;justify-content:center;gap:8px;margin-top:20px} #auen-lp-e.au-rv-on .au-why .au-dots,#auen-lp-e.au-rv-on .au-role .au-dots{display:flex} #auen-lp-e .au-why .au-dots span,#auen-lp-e .au-role .au-dots span{width:6px;height:6px;border-radius:50%;background:var(--grey);opacity:.55} #auen-lp-e .au-why .au-dots span.au-on,#auen-lp-e .au-role .au-dots span.au-on{background:var(--ink);opacity:1} } @media(min-width:760px){#auen-lp-e .au-why .au-dots,#auen-lp-e .au-role .au-dots{display:none}} /* 欄4 コーデ（届いたら、こう合わせる。） */ /* 横スライド：SP＝1.5カラム（次が半分見える）／PC＝2カラム。スクロールバーは隠す */ #auen-lp-e .au-looks .au-four{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;margin:36px -24px 0;padding:0 24px 8px;scroll-padding-left:24px;scrollbar-width:none} #auen-lp-e .au-looks .au-four::-webkit-scrollbar{display:none} #auen-lp-e .au-looks .au-four>*{flex:0 0 71%;scroll-snap-align:start} #auen-lp-e .au-looks .au-four>*:last-child{scroll-snap-align:end} @media(min-width:760px){ #auen-lp-e .au-looks .au-four{gap:24px;margin:36px 0 0;padding:0 0 10px;scroll-padding-left:0} #auen-lp-e .au-looks .au-four>*{flex:0 0 calc((100% - 24px)/2)} } /* スライドの矢印（PCのみ・カードの外側）と現在位置のドット */ #auen-lp-e .au-fitwrap{position:relative} #auen-lp-e .au-fitnav{display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:2; width:44px;height:44px;background:var(--page);border:1px solid var(--ink); color:var(--ink);font-size:22px;line-height:1;cursor:pointer;align-items:center; justify-content:center;padding:0;transition:background-color .2s,color .2s,border-color .2s} #auen-lp-e .au-fitnav.au-prev{left:-56px} #auen-lp-e .au-fitnav.au-next{right:-56px} @media(min-width:1180px){#auen-lp-e .au-fitnav{display:flex}} #auen-lp-e .au-fitnav:hover{background:var(--ink);color:var(--page)} #auen-lp-e .au-fitnav:disabled{border-color:var(--line);color:var(--grey);background:var(--page);cursor:default} #auen-lp-e .au-fitdots{display:none;justify-content:center;gap:8px;margin-top:16px} #auen-lp-e.au-rv-on .au-fitdots{display:flex} #auen-lp-e .au-fitdots span{width:6px;height:6px;border-radius:50%;background:var(--grey);opacity:.55} #auen-lp-e .au-fitdots span.au-on{background:var(--ink);opacity:1} #auen-lp-e .au-looks figure img{aspect-ratio:3/4;object-fit:cover} #auen-lp-e .au-looks figcaption b{display:block;font-weight:500;font-size:14.5px;margin-top:14px;line-height:1.5} #auen-lp-e .au-looks figcaption span{display:block;font-size:13px;color:var(--ink2);margin-top:6px} #auen-lp-e .au-looks figcaption .au-check{display:block;margin-top:14px;border-top:1px solid var(--line)} #auen-lp-e .au-looks figcaption .au-check a{display:flex;align-items:baseline;justify-content:space-between;gap:10px; padding:10px 0;border-bottom:1px solid var(--line2, rgba(27,32,37,.06));font-size:12.5px;color:var(--ink);text-decoration:none} #auen-lp-e .au-looks figcaption .au-check em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--ink3)} #auen-lp-e .au-looks figcaption b{font-size:15px;line-height:1.55} /* 8 colors */ #auen-lp-e .au-colors .au-four{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:28px} @media(min-width:760px){#auen-lp-e .au-colors .au-four{grid-template-columns:repeat(4,1fr);gap:20px}} /* 色数に合わせた列数（5色＝5列で孤立行を出さない。2〜4色は4列のまま）2026-09-17 */ @media(min-width:760px){#auen-lp-e .au-colors .au-four.au-n5{grid-template-columns:repeat(5,1fr);gap:16px}} /* 3色＝SPもPCも3列（2列だと1枚だけ下の行に孤立、4列だと右が1枠空く）2026-10-10 ドレスウール */ #auen-lp-e .au-colors .au-four.au-n3{grid-template-columns:repeat(3,1fr);gap:12px} @media(min-width:760px){#auen-lp-e .au-colors .au-four.au-n3{gap:20px}} #auen-lp-e .au-colors figcaption b{display:block;font-weight:500;font-size:15px;margin-top:12px} #auen-lp-e .au-colors figcaption span{display:block;font-size:13px;color:var(--ink2);margin-top:6px} /* 2本目の選び方（洗い替え／使い分け） */ #auen-lp-e .au-colors .au-second{display:grid;gap:18px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)} @media(min-width:760px){#auen-lp-e .au-colors .au-second{grid-template-columns:repeat(2,1fr);gap:40px}} #auen-lp-e .au-colors .au-second b{display:block;font-weight:500;font-size:16px;letter-spacing:.02em} #auen-lp-e .au-colors .au-second p{font-size:14px;color:var(--ink2);margin-top:8px;max-width:30em} /* 07 LAYERING（重ね着・2026-10-02）＝tn3342／ts3255 だけ。左に首元の写真、右に着方の3手順（05 と同じ罫線リスト）。 下に色の組み合わせ3つ・2枚の商品カード（03 と同じ線のカード）・ts3255 は Vネックの導線。価格は出さない（初出はFSの購入パネル）。 カードは grid で組む＝FS 側の a{flex-direction:column} の影響を受けない */ #auen-lp-e .au-layer .au-grid{display:grid;gap:32px} @media(min-width:760px){#auen-lp-e .au-layer .au-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}} #auen-lp-e .au-layer .au-grid figure img{aspect-ratio:3/4;object-fit:cover;background:var(--mist)} #auen-lp-e .au-layer .au-steps{list-style:none;display:grid;gap:20px;margin-top:28px;counter-reset:l} #auen-lp-e .au-layer .au-steps li{padding-top:18px;border-top:1px solid var(--line)} #auen-lp-e .au-layer .au-steps li::before{content:counter(l,decimal-leading-zero);counter-increment:l;display:block; font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--ink3);margin-bottom:10px} #auen-lp-e .au-layer .au-steps h3{font-size:16px;font-weight:500;line-height:1.5;letter-spacing:.02em} @media(min-width:760px){#auen-lp-e .au-layer .au-steps h3{font-size:17px}} #auen-lp-e .au-layer .au-steps p{font-size:14px;color:var(--ink2);margin-top:8px;max-width:34em} #auen-lp-e .au-layer .au-sub{font-size:10.5px;font-weight:700;letter-spacing:.22em;color:var(--ink3)} #auen-lp-e .au-layer .au-pairs{margin-top:64px;padding-top:32px;border-top:1px solid var(--line)} #auen-lp-e .au-layer .au-pl{display:grid;gap:24px;margin-top:20px} #auen-lp-e .au-layer .au-p{display:grid;grid-template-columns:104px minmax(0,1fr);gap:4px 16px;align-items:center} #auen-lp-e .au-layer .au-sw{display:grid;grid-template-columns:1fr 1fr;gap:2px;grid-row:1 / 3} #auen-lp-e .au-layer .au-sw img{aspect-ratio:3/4;object-fit:cover;object-position:50% 30%;background:var(--mist)} #auen-lp-e .au-layer .au-p b{display:block;font-weight:500;font-size:14px;letter-spacing:.02em;align-self:end} #auen-lp-e .au-layer .au-p span{display:block;font-size:13px;color:var(--ink2);align-self:start} @media(min-width:760px){ #auen-lp-e .au-layer .au-pl{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} #auen-lp-e .au-layer .au-p{grid-template-columns:minmax(0,1fr);gap:0;align-items:start;align-content:start} #auen-lp-e .au-layer .au-p b{font-size:15px} #auen-lp-e .au-layer .au-sw{grid-row:auto} #auen-lp-e .au-layer .au-p b{margin-top:14px} #auen-lp-e .au-layer .au-p span{margin-top:6px} } #auen-lp-e .au-layer .au-lcards{display:grid;gap:12px;margin-top:40px} @media(min-width:760px){#auen-lp-e .au-layer .au-lcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}#auen-lp-e .au-layer a.au-lcard{grid-template-columns:minmax(0,1fr) auto}} #auen-lp-e .au-layer a.au-lcard{display:grid;grid-template-columns:minmax(0,1fr);gap:6px 20px;align-items:center; border:1px solid var(--line);padding:20px 24px;text-decoration:none;color:var(--ink);background:var(--page);transition:border-color .25s} #auen-lp-e .au-layer a.au-lcard:hover{border-color:var(--ink)} #auen-lp-e .au-layer a.au-lcard span{grid-column:1;font-size:10px;font-weight:700;letter-spacing:.2em;color:var(--ink3)} #auen-lp-e .au-layer a.au-lcard strong{grid-column:1;font-size:16px;font-weight:500;letter-spacing:.03em} #auen-lp-e .au-layer a.au-lcard b{grid-column:1;font-size:12px;font-weight:700;white-space:nowrap;color:var(--ink);margin-top:6px} @media(min-width:760px){#auen-lp-e .au-layer a.au-lcard b{grid-column:2;grid-row:1 / 3;margin-top:0}} #auen-lp-e .au-layer .au-vn{display:grid;gap:24px;margin-top:64px;padding-top:32px;border-top:1px solid var(--line)} @media(min-width:760px){#auen-lp-e .au-layer .au-vn{grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center}} #auen-lp-e .au-layer .au-vn figure{max-width:320px} #auen-lp-e .au-layer .au-vn figure img{aspect-ratio:3/4;object-fit:cover;background:var(--mist)} #auen-lp-e .au-layer .au-vn i{display:block;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.18em;color:var(--ink3);margin-bottom:10px} #auen-lp-e .au-layer .au-vn h3{font-size:18px;font-weight:500;line-height:1.5;letter-spacing:.02em} @media(min-width:760px){#auen-lp-e .au-layer .au-vn h3{font-size:22px}} #auen-lp-e .au-layer .au-vn p{font-size:14px;color:var(--ink2);margin-top:12px;max-width:30em} #auen-lp-e .au-layer .au-vn a.au-lcard{margin-top:24px;max-width:440px} /* 07 LAYERING をスマホで短くする（2026-10-02 y.nojiri「スマホだとセクションが長すぎる」＝390px で 2,235〜3,052px あった。他の節は約1,000px）。 PC は変えない。①写真は正方形で首元に寄せる ②3手順は見出しだけ（説明文は PC のみ） ③色の組み合わせは横スワイプ ④商品カードは英字ラベルを外して1行 ⑤Vネックは写真を左に小さく */ @media(max-width:759px){ /* ⑥見出し（07 LAYERING・h2）を写真の上、リードは写真の下へ（2026-10-05 y.nojiri）。au-copy を display:contents にして並び順だけ変える＝HTMLとPCは変えない */ #auen-lp-e .au-layer .au-grid{display:flex;flex-direction:column;gap:0} #auen-lp-e .au-layer .au-copy{display:contents} #auen-lp-e .au-layer .au-grid>figure{order:1;margin-top:22px} #auen-lp-e .au-layer .au-copy>.au-lead{order:2;margin-top:20px} #auen-lp-e .au-layer .au-copy>h2{word-break:keep-all;overflow-wrap:anywhere} #auen-lp-e .au-layer .au-steps{order:3} #auen-lp-e .au-layer .au-grid figure img{aspect-ratio:1/1;object-position:50% 22%} #auen-lp-e .au-layer .au-steps{gap:0;margin-top:22px} #auen-lp-e .au-layer .au-steps li{display:flex;align-items:baseline;gap:14px;padding:13px 0} #auen-lp-e .au-layer .au-steps li:last-child{border-bottom:1px solid var(--line)} #auen-lp-e .au-layer .au-steps li::before{margin-bottom:0;flex:0 0 auto} #auen-lp-e .au-layer .au-steps h3{font-size:15px} #auen-lp-e .au-layer .au-steps p{display:none} #auen-lp-e .au-layer .au-pairs{margin-top:40px;padding-top:24px} #auen-lp-e .au-layer .au-pl{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;margin:16px -24px 0;padding:0 24px 6px;scroll-padding-left:24px;scrollbar-width:none} #auen-lp-e .au-layer .au-pl::-webkit-scrollbar{display:none} #auen-lp-e .au-layer .au-p{flex:0 0 58%;scroll-snap-align:start;grid-template-columns:minmax(0,1fr);gap:0;align-items:start} #auen-lp-e .au-layer .au-p:last-child{scroll-snap-align:end} #auen-lp-e .au-layer .au-sw{grid-row:auto} #auen-lp-e .au-layer .au-p b{font-size:14px;margin-top:10px} #auen-lp-e .au-layer .au-p span{font-size:12.5px;margin-top:4px} #auen-lp-e .au-layer .au-pairs .au-note{margin-top:10px} #auen-lp-e .au-layer .au-lcards{gap:8px;margin-top:28px} #auen-lp-e .au-layer a.au-lcard{grid-template-columns:minmax(0,1fr) auto;padding:15px 16px;gap:12px} #auen-lp-e .au-layer a.au-lcard span{display:none} #auen-lp-e .au-layer a.au-lcard strong{font-size:15px} #auen-lp-e .au-layer a.au-lcard b{grid-column:2;grid-row:1;margin-top:0;font-size:11.5px} #auen-lp-e .au-layer .au-vn{grid-template-columns:104px minmax(0,1fr);gap:8px 16px;margin-top:40px;padding-top:24px;align-items:start} #auen-lp-e .au-layer .au-vn figure{max-width:none} #auen-lp-e .au-layer .au-vn i{margin-bottom:6px} #auen-lp-e .au-layer .au-vn h3{font-size:15px;text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere} #auen-lp-e .au-layer .au-vn p{font-size:13px;margin-top:6px} #auen-lp-e .au-layer .au-vn a.au-lcard{margin-top:16px;max-width:none} #auen-lp-e .au-layer .au-vn>div{display:contents} #auen-lp-e .au-layer .au-vn>div>i{grid-column:2;grid-row:1} #auen-lp-e .au-layer .au-vn>div>h3{grid-column:2;grid-row:2} #auen-lp-e .au-layer .au-vn>div>p{grid-column:2;grid-row:3} #auen-lp-e .au-layer .au-vn figure{grid-column:1;grid-row:1 / 4} #auen-lp-e .au-layer .au-vn>div>a.au-lcard{grid-column:1 / -1;grid-row:4} } /* 07 の商品カードにサムネ（2026-10-02 y.nojiri「枠の中にサムネも入れて、細長く」）。PC・SP 共通で1行の細長い帯。 上の指定（ラベル・商品名・案内の並び）を、サムネの列を足した形で上書きする */ #auen-lp-e .au-layer a.au-lcard{grid-template-columns:52px minmax(0,1fr) auto;gap:2px 16px;padding:8px 20px 8px 8px} #auen-lp-e .au-layer a.au-lcard img{grid-column:1;grid-row:1 / 3;width:52px;height:68px;aspect-ratio:auto;object-fit:cover;object-position:50% 28%;background:var(--mist);display:block} #auen-lp-e .au-layer a.au-lcard span{grid-column:2;grid-row:1;align-self:end} #auen-lp-e .au-layer a.au-lcard strong{grid-column:2;grid-row:2;align-self:start;font-size:15px} #auen-lp-e .au-layer a.au-lcard b{grid-column:3;grid-row:1 / 3;align-self:center;margin-top:0} #auen-lp-e .au-layer .au-vn a.au-lcard{max-width:460px} @media(max-width:759px){ #auen-lp-e .au-layer a.au-lcard{grid-template-columns:44px minmax(0,1fr);gap:2px 14px;padding:6px 16px 6px 6px} #auen-lp-e .au-layer a.au-lcard img{width:44px;height:58px} #auen-lp-e .au-layer a.au-lcard strong{grid-row:1;align-self:end;font-size:14.5px} #auen-lp-e .au-layer a.au-lcard b{grid-column:2;grid-row:2;align-self:start;font-size:11px;color:var(--ink3)} } /* 10 faq */ #auen-lp-e .au-faq details{border-top:1px solid var(--line);padding:18px 0} #auen-lp-e .au-faq details:last-of-type{border-bottom:1px solid var(--line)} #auen-lp-e .au-faq summary{cursor:pointer;font-size:15.5px;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:16px} #auen-lp-e .au-faq summary::after{content:"＋";color:var(--ink3);flex:0 0 auto} #auen-lp-e .au-faq details[open] summary::after{content:"－"} #auen-lp-e .au-faq details p{font-size:14px;color:var(--ink2);margin-top:12px;max-width:40em} #auen-lp-e .au-faq .au-list{margin-top:28px} /* 11 services */ #auen-lp-e .au-services .au-cards{display:grid;gap:18px;margin-top:32px} @media(min-width:760px){#auen-lp-e .au-services .au-cards{grid-template-columns:repeat(3,1fr)}} #auen-lp-e .au-services .au-cards h3{font-size:15px;font-weight:700} #auen-lp-e .au-services .au-cards p{font-size:13px;color:var(--ink2);margin-top:8px} /* set（そろえる・why直下） */ /* 濃色の節（ページ唯一・全幅）。#auen-lp-e の外にあるので、必要な指定をここで完結させる */ #auen-set{display:block;background:#1B2025;color:#fff;text-align:left; font-family:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif; font-size:15px;line-height:1.9;letter-spacing:.03em;padding:80px 24px} @media(min-width:760px){#auen-set{padding:112px 40px}} #auen-set *{margin:0;padding:0;box-sizing:border-box} #auen-set img{max-width:100%;display:block;width:100%;height:auto} #auen-set .au-inner{max-width:1040px;margin:0 auto;display:grid;gap:28px} @media(min-width:760px){#auen-set .au-inner{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}} #auen-set figure img{aspect-ratio:3/4;object-fit:cover} #auen-set .au-eb{font-size:12px;font-weight:500;letter-spacing:.18em;color:rgba(255,255,255,.58);margin-bottom:14px} #auen-set h2{font-size:24px;font-weight:500;line-height:1.5;letter-spacing:.02em;max-width:26em;color:#fff} @media(min-width:760px){#auen-set h2{font-size:30px}} #auen-set h2 span{display:block} #auen-set .au-lead{font-size:14px;line-height:2.1;color:rgba(255,255,255,.72);margin-top:20px;max-width:500px} #auen-set .au-cards{margin-top:30px} #auen-set .au-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px; background:transparent;border:1px solid rgba(255,255,255,.22);padding:20px 24px;text-decoration:none;color:#fff;margin-top:12px; transition:border-color .25s,background-color .25s} #auen-set .au-card:hover{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.05)} #auen-set .au-card>div{min-width:0} #auen-set .au-card span{display:block;font-size:10px;font-weight:700;letter-spacing:.2em;color:rgba(255,255,255,.55);margin-bottom:6px} #auen-set .au-card strong{font-size:16px;font-weight:500;letter-spacing:.03em} #auen-set .au-card b{font-size:12px;font-weight:700;white-space:nowrap;color:rgba(255,255,255,.85)} #auen-set.au-rv-on .au-rv{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s ease} #auen-set.au-rv-on .au-rv.au-is-in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){#auen-set.au-rv-on .au-rv{opacity:1;transform:none;transition:none}} /* ---- B パターン（2026-09-15）：機能バッジ／使い分け。商品情報（spec）は 2026-09-15 から A・B 共通 ---- */ #auen-lp-e .au-why .au-fb{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--ink3);border:1px solid var(--line);padding:3px 10px;margin-bottom:12px} #auen-lp-e .au-spec h3{font-size:16px;font-weight:700;letter-spacing:.06em;margin-top:36px} #auen-lp-e .au-spec h3 small{font-size:12px;font-weight:500;color:var(--ink3);margin-left:12px;letter-spacing:.04em} #auen-lp-e .au-spec .au-tw{overflow-x:auto;margin-top:16px;border:1px solid var(--line)} #auen-lp-e .au-spec table.au-size{border-collapse:collapse;width:100%;min-width:520px;font-size:14px;line-height:1.6;text-align:center;font-variant-numeric:tabular-nums} #auen-lp-e .au-spec table.au-size th,#auen-lp-e .au-spec table.au-size td{padding:12px 10px;border-bottom:1px solid var(--line)} #auen-lp-e .au-spec table.au-size thead th{background:var(--mist);font-size:12px;font-weight:700;letter-spacing:.06em} #auen-lp-e .au-spec table.au-size tbody th{font-weight:700;color:var(--acc);border-right:1px solid var(--line)} #auen-lp-e .au-spec table.au-size tbody tr:nth-child(even) th,#auen-lp-e .au-spec table.au-size tbody tr:nth-child(even) td{background:#FAFBFB} #auen-lp-e .au-spec .au-notes{list-style:none;margin-top:12px;font-size:12.5px;color:var(--ink3);max-width:40em} #auen-lp-e .au-spec .au-notes li{padding-left:1.2em;text-indent:-1.2em} #auen-lp-e .au-spec .au-notes li::before{content:"※ "} #auen-lp-e .au-spec .au-measure{margin-top:18px;max-width:280px} #auen-lp-e .au-spec .au-measure img{width:100%;border:1px solid var(--line)} #auen-lp-e .au-spec .au-measure figcaption{font-size:12px;color:var(--ink3);margin-top:6px} /* 体型別の着比べ＝sizesam から写真だけを切り出し、数字と判定はここで組む（PCは矢印で送る）。bl3336 と同じ指定（2026-09-17 追加） */ #auen-lp-e .au-spec .au-fits{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;margin:18px -24px 0;padding:0 24px 6px;scrollbar-width:none} #auen-lp-e .au-spec .au-fits article:last-child{scroll-snap-align:end} #auen-lp-e .au-spec .au-fits::-webkit-scrollbar{display:none} #auen-lp-e .au-spec .au-fits article{flex:0 0 86%;scroll-snap-align:start;border:1px solid var(--line);padding:18px 18px 20px} @media(min-width:760px){ #auen-lp-e .au-spec .au-fits{margin:18px 0 0;padding:0 0 6px;gap:20px} #auen-lp-e .au-spec .au-fits article{flex:0 0 calc(50% - 10px)} } #auen-lp-e .au-spec .au-who{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding-bottom:16px;border-bottom:1px solid var(--line2, rgba(27,32,37,.06))} #auen-lp-e .au-spec .au-who dt{font-size:10.5px;letter-spacing:.06em;color:var(--ink3);font-weight:500} #auen-lp-e .au-spec .au-who dd{font-size:17px;font-weight:700;letter-spacing:.01em;margin-top:3px;font-variant-numeric:tabular-nums} #auen-lp-e .au-spec .au-who small{font-size:10.5px;font-weight:500;color:var(--ink3);margin-left:2px} #auen-lp-e .au-spec .au-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px} #auen-lp-e .au-spec .au-pair img{width:100%;height:auto;aspect-ratio:341/527;object-fit:cover;background:var(--mist)} #auen-lp-e .au-spec .au-pair figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-top:10px} #auen-lp-e .au-spec .au-pair b{font-size:14px;font-weight:700;letter-spacing:.06em;min-width:2.2em} #auen-lp-e .au-spec .au-pair span{font-size:12.5px;color:var(--ink2);white-space:nowrap} #auen-lp-e .au-spec .au-pair i{flex:0 0 100%;font-style:normal;font-size:11.5px;color:var(--ink3);margin-top:2px} #auen-lp-e .au-spec .au-pair i::before{content:"※ "} #auen-lp-e .au-spec .au-pills{margin-top:16px;border-top:1px solid var(--line)} #auen-lp-e .au-spec .au-pills div{display:grid;grid-template-columns:5em minmax(0,1fr);gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line2, rgba(27,32,37,.06))} #auen-lp-e .au-spec .au-pills dt{font-size:13px;font-weight:700;color:var(--ink2)} #auen-lp-e .au-spec .au-pills dd{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} #auen-lp-e .au-spec .au-pills span{display:block;border:1px solid var(--line);padding:9px 6px;text-align:center;font-size:13px;color:var(--ink3)} #auen-lp-e .au-spec .au-pills span.au-on{background:rgba(86,181,206,.14);border-color:transparent;color:var(--ink);font-weight:700} #auen-lp-e .au-spec .au-specs{display:grid;gap:0;margin-top:16px;border-top:1px solid var(--line)} #auen-lp-e .au-spec .au-specs div{display:grid;grid-template-columns:7em minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line2)} @media(min-width:760px){#auen-lp-e .au-spec .au-specs div{grid-template-columns:10em minmax(0,1fr)}} #auen-lp-e .au-spec .au-specs dt{font-size:12px;letter-spacing:.08em;color:var(--ink3);font-weight:700;padding-top:2px} #auen-lp-e .au-spec .au-specs dd{font-size:14px;color:var(--ink2)} /* 09 CODE SERIES（そろえる順番）＝5点のラインナップ。いま見ている品番は枠を強く、他はリンク */ #auen-lp-e .au-series .au-five{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:32px} @media(min-width:760px){#auen-lp-e .au-series .au-five{grid-template-columns:repeat(5,1fr);gap:14px}} #auen-lp-e .au-series .au-five>*{display:block;text-decoration:none;color:var(--ink);border:1px solid var(--line);padding:0 0 16px;transition:border-color .25s} #auen-lp-e .au-series a.au-it:hover{border-color:var(--ink)} #auen-lp-e .au-series .au-it img{aspect-ratio:3/4;object-fit:cover;background:var(--mist)} #auen-lp-e .au-series .au-it i{display:block;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--ink3);margin:14px 14px 6px} #auen-lp-e .au-series .au-it strong{display:block;font-size:13.5px;font-weight:500;line-height:1.5;margin:0 14px} #auen-lp-e .au-series .au-it span{display:block;font-size:12px;color:var(--ink2);margin:6px 14px 0} #auen-lp-e .au-series .au-it em{display:block;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--ink3);margin:10px 14px 0} #auen-lp-e .au-series .au-it.au-self{border-color:var(--ink)} #auen-lp-e .au-series .au-it.au-self em{color:var(--acc)} #auen-lp-e .au-series .au-order{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);font-size:14px;color:var(--ink2);max-width:42em} /* FS の商品ページはLPを左右 padding 付きのカラムに入れるため、画面幅いっぱいに出し直す （プレビューと同じ見え方に揃える。祖先が overflow:hidden なので横スクロールは出ない） */ #auen-lp-e,#auen-set{width:auto;max-width:none; margin-left:calc(50% - 50vw + var(--auen-sbw,0px) / 2); margin-right:calc(50% - 50vw + var(--auen-sbw,0px) / 2)} /* 本文は読みやすい幅で中央に戻す */ #auen-lp-e>section,#auen-lp-e>.au-gap-cart{max-width:1040px;margin-left:auto;margin-right:auto} /* 4) 写真が浮いて文字に重なるのを止める（FS側の figure img{position:absolute} 対策）。 アップデート節のクロスフェードだけは absolute のまま＝そちらの指定の方が具体的なので勝つ */ #auen-lp-e figure img,#auen-lp-e figure video,#auen-set figure img{position:static;inset:auto} /* FS側が section/figure/img に高さを指定してくることがあるので、既定に戻す */ #auen-lp-e section,#auen-lp-e figure,#auen-lp-e figure img,#auen-set,#auen-set figure,#auen-set figure img{height:auto;min-height:0;max-height:none} /* 2) 欄1の最後とカートの間の余白 */ #auen-lp-e .au-gap-cart{height:56px} @media(min-width:760px){#auen-lp-e .au-gap-cart{height:80px}} /* ───── FS のテーマCSSに負けないための明示（2026-09-17・実ページで確認した3点＋予防） ───── */ /* 見出しの色：FS 側に h1{color:#444} があり、継承任せだと負ける */ #auen-lp-e h1,#auen-lp-e h2,#auen-lp-e h3,#auen-lp-e h4{color:var(--ink)} /* 横並び：FS 側に a{flex-direction:column} 相当があり、宣言しないと縦積みになる */ #auen-lp-e .au-ix,#auen-lp-e .au-faq summary,#auen-lp-e .au-looks .au-check a,#auen-lp-e .au-dots, #auen-lp-e .au-fitdots,#auen-lp-e .au-fitnav,#auen-lp-e .au-why .au-grid6,#auen-lp-e .au-role .au-three, #auen-lp-e .au-looks .au-four,#auen-lp-e .au-spec .au-fits,#auen-lp-e .au-spec .au-pair figcaption, #auen-set .au-inner,#auen-set .au-card{flex-direction:row} /* 角丸と影：AUEN は使わない。FS 側の既定が乗るのを止める */ #auen-lp-e a,#auen-lp-e button,#auen-lp-e img,#auen-lp-e video,#auen-lp-e figure,#auen-lp-e table,#auen-lp-e details, #auen-set a,#auen-set img,#auen-set figure{border-radius:0;box-shadow:none} /* ───── ドレスウール LP（lp-dw-css.js）───── */ #auen-lp-e .au-dw-band{max-width:none;padding-left:0;padding-right:0} #auen-lp-e .au-dw-in{max-width:1040px;margin:0 auto;padding:0 24px} @media(min-width:760px){#auen-lp-e .au-dw-in{padding:0 40px}} #auen-lp-e .au-dw-lb{display:block;font-style:normal;font-size:11px;font-weight:500;letter-spacing:.24em;color:var(--ink2)} #auen-lp-e .au-dw-lb::after{content:"";display:block;width:32px;height:3px;background:var(--acc);margin-top:12px} #auen-lp-e .au-dw-dark{--page:#1B2025;--ink:#FFFFFF;--ink2:rgba(255,255,255,.80);--ink3:rgba(255,255,255,.62);--line:rgba(255,255,255,.18);background:#1B2025;color:#FFFFFF} #auen-lp-e .au-dw-mist{background:#F2F5F6} /* 01 ヒーロー：SP＝写真（3:4）→ 白地に文字／PC＝全幅の横長写真の左に文字 */ #auen-lp-e .au-dw-hero{padding:0;position:relative} #auen-lp-e .au-dw-hero picture,#auen-lp-e .au-dw-hero img{display:block;width:100%} #auen-lp-e .au-dw-hero img{aspect-ratio:3/4;object-fit:cover;height:auto} #auen-lp-e .au-dw-hero .au-dw-copy{padding:40px 24px 8px} #auen-lp-e .au-dw-hero h1{font-size:30px;font-weight:500;line-height:1.55;letter-spacing:.06em;margin-top:22px;color:var(--ink)} #auen-lp-e .au-dw-hero .au-dw-name{display:block;font-size:13px;font-weight:500;letter-spacing:.2em;color:var(--ink2);margin-top:22px} #auen-lp-e .au-dw-hero .au-lead{font-size:15px;line-height:2;margin-top:18px;max-width:28em} @media(min-width:760px){ #auen-lp-e .au-dw-hero{background:#1B2025} #auen-lp-e .au-dw-hero img{aspect-ratio:16/9;max-height:92vh;min-height:560px} #auen-lp-e .au-dw-hero .au-dw-copy{position:absolute;left:0;top:0;bottom:0;width:min(52%,680px);display:flex;flex-direction:column;justify-content:center; padding:0 0 0 max(40px,calc(50vw - 520px));--ink:#FFFFFF;--ink2:rgba(255,255,255,.82);color:#FFFFFF} #auen-lp-e .au-dw-hero h1{font-size:clamp(32px,3.1vw,46px);color:#FFFFFF;white-space:nowrap} } /* 02 ABOUT：大きな一文＋要点3つ */ #auen-lp-e .au-dw-about{text-align:left} #auen-lp-e .au-dw-about h2{font-size:26px;line-height:1.6;letter-spacing:.06em;margin-top:24px} @media(min-width:760px){#auen-lp-e .au-dw-about h2{font-size:38px}} #auen-lp-e .au-dw-facts{display:grid;grid-template-columns:minmax(0,1fr);margin-top:48px;border-top:1px solid var(--line)} #auen-lp-e .au-dw-facts>div{padding:22px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:16px;align-items:baseline} #auen-lp-e .au-dw-facts b{font-size:22px;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums} #auen-lp-e .au-dw-facts b small{font-size:12px;font-weight:500;margin-left:2px} #auen-lp-e .au-dw-facts span{font-size:14.5px;color:var(--ink2);line-height:1.8} @media(min-width:760px){ #auen-lp-e .au-dw-facts{grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)} #auen-lp-e .au-dw-facts>div{display:block;padding:32px 28px 30px;border-bottom:0;border-left:1px solid var(--line)} #auen-lp-e .au-dw-facts>div:first-child{border-left:0;padding-left:0} #auen-lp-e .au-dw-facts b{display:block;font-size:30px} #auen-lp-e .au-dw-facts span{display:block;margin-top:10px} } /* 03 ONE DAY：見出し → 時刻の帯（上に貼りつく）→ 5つの時刻 */ #auen-lp-e .au-dw-day{padding-bottom:0} #auen-lp-e .au-dw-day h2{margin-top:24px} #auen-lp-e .au-dw-rail{position:sticky;top:0;z-index:5;margin-top:48px;background:#FFFFFF;border-top:1px solid rgba(27,32,37,.10);border-bottom:1px solid rgba(27,32,37,.10);transition:background .4s,color .4s,border-color .4s} #auen-lp-e .au-dw-rail ol{list-style:none;display:flex;flex-direction:row;justify-content:space-between;max-width:1040px;margin:0 auto;padding:0 16px} @media(min-width:760px){#auen-lp-e .au-dw-rail ol{padding:0 40px}} #auen-lp-e .au-dw-rail li{flex:1;text-align:center} #auen-lp-e .au-dw-rail a{display:block;padding:12px 2px 11px;text-decoration:none;color:rgba(27,32,37,.45);font-size:12.5px;font-weight:700;letter-spacing:.04em;font-variant-numeric:tabular-nums;border-bottom:3px solid transparent} #auen-lp-e .au-dw-rail a small{display:none;font-size:10px;font-weight:500;letter-spacing:.16em;margin-left:8px} @media(min-width:760px){#auen-lp-e .au-dw-rail a{font-size:14px}#auen-lp-e .au-dw-rail a small{display:inline}} #auen-lp-e .au-dw-rail a.au-on{color:#1B2025;border-bottom-color:var(--acc)} #auen-lp-e .au-dw-rail.au-dw-night{background:#1B2025;border-color:rgba(255,255,255,.14)} #auen-lp-e .au-dw-rail.au-dw-night a{color:rgba(255,255,255,.45)} #auen-lp-e .au-dw-rail.au-dw-night a.au-on{color:#FFFFFF} #auen-lp-e .au-dw-ch{padding-top:72px;padding-bottom:80px;scroll-margin-top:48px} #auen-lp-e .au-dw-ch .au-dw-in{display:grid;gap:28px} #auen-lp-e .au-dw-t{font-size:56px;font-weight:700;line-height:1;letter-spacing:.01em;font-variant-numeric:tabular-nums;color:var(--ink)} #auen-lp-e .au-dw-t small{display:block;font-size:11px;font-weight:500;letter-spacing:.24em;color:var(--ink2);margin-top:14px} #auen-lp-e .au-dw-ch h3{font-size:24px;font-weight:500;line-height:1.6;letter-spacing:.05em;color:var(--ink);margin-top:28px} #auen-lp-e .au-dw-ch .au-dw-p{font-size:15px;line-height:2;color:var(--ink2);margin-top:16px;max-width:30em} #auen-lp-e .au-dw-scene img{aspect-ratio:4/5;object-fit:cover} /* 理由の実写（寄り）：写真の横に短い説明。暗い面では白い額 */ #auen-lp-e .au-dw-why{display:grid;grid-template-columns:minmax(0,132px) minmax(0,1fr);gap:16px;align-items:center;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)} #auen-lp-e .au-dw-why figure{background:#FFFFFF;overflow:hidden;position:relative} #auen-lp-e .au-dw-dark .au-dw-why figure{outline:6px solid #FFFFFF} #auen-lp-e .au-dw-why img{aspect-ratio:1/1;object-fit:cover} #auen-lp-e .au-dw-why p{font-size:13.5px;line-height:1.85;color:var(--ink2)} #auen-lp-e .au-dw-why p b{display:block;font-size:11px;font-weight:500;letter-spacing:.2em;color:var(--ink);margin-bottom:6px} @media(min-width:760px){ #auen-lp-e .au-dw-ch{padding-top:120px;padding-bottom:128px} #auen-lp-e .au-dw-ch .au-dw-in{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px);align-items:center} #auen-lp-e .au-dw-ch.au-dw-rev .au-dw-scene{order:-1} #auen-lp-e .au-dw-t{font-size:88px} #auen-lp-e .au-dw-ch h3{font-size:30px} #auen-lp-e .au-dw-why{grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:24px;margin-top:44px} } /* 触れると拡大（近くで見るほど上質に見える、を体験にする） */ #auen-lp-e .au-dw-zoom{cursor:zoom-in;touch-action:manipulation} #auen-lp-e .au-dw-zoom img{transition:transform .35s ease;transform-origin:50% 50%} #auen-lp-e .au-dw-zoom.au-z img{transform:scale(2.4)} #auen-lp-e .au-dw-zoom figcaption{position:absolute;right:0;bottom:0;background:#1B2025;color:#FFFFFF;font-size:10px;font-weight:500;letter-spacing:.12em;padding:4px 8px;pointer-events:none} #auen-lp-e .au-dw-zoom.au-z figcaption{display:none} /* 04 FIT：テーパード／ストレートの切り替え */ #auen-lp-e .au-dw-fit .au-dw-in{display:grid;gap:32px} #auen-lp-e .au-dw-tabs{display:flex;flex-direction:row;margin-top:32px;border:1px solid var(--ink);width:max-content} #auen-lp-e .au-dw-tabs button{appearance:none;border:0;background:transparent;color:var(--ink);font:inherit;font-size:13.5px;font-weight:500;letter-spacing:.08em;padding:12px 26px;cursor:pointer} #auen-lp-e .au-dw-tabs button.au-on{background:var(--ink);color:#FFFFFF} #auen-lp-e .au-dw-fitpics{position:relative;background:#FFFFFF} #auen-lp-e .au-dw-fitpics figure{transition:opacity .45s ease} #auen-lp-e .au-dw-fitpics figure+figure{position:absolute;inset:0} #auen-lp-e .au-dw-fitpics img{aspect-ratio:3/4;object-fit:cover} #auen-lp-e .au-dw-fitpics figure.au-off{opacity:0} #auen-lp-e .au-dw-fitpics figcaption{position:absolute;left:0;bottom:0;background:#FFFFFF;color:#1B2025;font-size:11px;font-weight:500;letter-spacing:.16em;padding:6px 12px} #auen-lp-e .au-dw-fittx{margin-top:24px;min-height:7.5em} #auen-lp-e .au-dw-fittx div.au-off{display:none} #auen-lp-e .au-dw-fittx b{display:block;font-size:20px;font-weight:500;letter-spacing:.06em} #auen-lp-e .au-dw-fittx p{font-size:15px;line-height:2;color:var(--ink2);margin-top:10px} #auen-lp-e .au-dw-fittx a{display:inline-block;margin-top:14px;font-size:13.5px;font-weight:500;color:var(--ink);text-underline-offset:5px} @media(min-width:760px){#auen-lp-e .au-dw-fit .au-dw-in{grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:72px;align-items:center}} /* 05 上下そろい（白地・写真＋3枚のカード） */ #auen-lp-e .au-dw-set .au-dw-in{display:grid;gap:32px} #auen-lp-e .au-dw-set figure img{aspect-ratio:4/5;object-fit:cover} #auen-lp-e .au-dw-cards{margin-top:28px;border-top:1px solid var(--line)} #auen-lp-e .au-dw-cards a{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)} #auen-lp-e .au-dw-cards span{display:block;font-size:10.5px;font-weight:500;letter-spacing:.2em;color:var(--ink2)} #auen-lp-e .au-dw-cards strong{display:block;font-size:15.5px;font-weight:500;margin-top:4px} #auen-lp-e .au-dw-cards b{font-size:12.5px;font-weight:500;white-space:nowrap} @media(min-width:760px){#auen-lp-e .au-dw-set .au-dw-in{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:72px;align-items:center}} /* 06 COLOR（ライトグレーの面に、白地の商品写真） */ #auen-lp-e .au-dw-col .au-dw-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:36px} #auen-lp-e .au-dw-col figure{background:#FFFFFF} #auen-lp-e .au-dw-col img{aspect-ratio:3/4;object-fit:cover} #auen-lp-e .au-dw-col figcaption{padding:12px 12px 16px} #auen-lp-e .au-dw-col figcaption b{display:block;font-size:14px;font-weight:500} #auen-lp-e .au-dw-col figcaption span{display:block;font-size:12.5px;line-height:1.8;color:var(--ink2);margin-top:6px} @media(min-width:760px){#auen-lp-e .au-dw-col .au-dw-three{gap:20px}#auen-lp-e .au-dw-col figcaption{padding:18px 20px 22px}#auen-lp-e .au-dw-col figcaption span{font-size:13.5px}} #auen-lp-e .au-dw-col .au-note{margin-top:20px} /* 動き：見えたらそっと出る（土台の au-rv と同じ）。動きを減らす設定では出しっぱなし */ @media(prefers-reduced-motion:reduce){#auen-lp-e .au-dw-zoom img,#auen-lp-e .au-dw-fitpics figure{transition:none}} #auen-lp-e .au-dw-rail ol,#auen-lp-e .au-dw-tabs,#auen-lp-e .au-dw-cards a{flex-direction:row} /* ── 2026-10-13 見直し2回目（スマホ） ── */ /* 要点3つ：スマホは英字の上に説明を積む（STITCHLESS が説明に重なっていた） */ @media(max-width:759px){ #auen-lp-e .au-dw-facts>div{display:block} #auen-lp-e .au-dw-facts span{display:block;margin-top:8px} /* 時刻ごとの並び：時刻・見出し → 場面の写真 → 説明 → 実物の写真（写真を先に見せる） */ #auen-lp-e .au-dw-ch .au-dw-in{display:flex;flex-direction:column;gap:0} #auen-lp-e .au-dw-ch .au-dw-tx{display:contents} #auen-lp-e .au-dw-ch .au-dw-t{order:1} #auen-lp-e .au-dw-ch h3{order:2;margin-top:22px} #auen-lp-e .au-dw-ch .au-dw-scene{order:3;margin:24px -24px 0} #auen-lp-e .au-dw-ch .au-dw-p{order:4;margin-top:22px} #auen-lp-e .au-dw-ch .au-dw-why{order:5} /* 色：1色ずつ横並び（写真＋説明） */ #auen-lp-e .au-dw-col .au-dw-three{grid-template-columns:minmax(0,1fr);gap:12px} #auen-lp-e .au-dw-col figure{display:grid;grid-template-columns:38% minmax(0,1fr);align-items:center} #auen-lp-e .au-dw-col figcaption{padding:16px 18px} #auen-lp-e .au-dw-col figcaption span{font-size:13.5px} } /* ── 2026-10-14 TOPページのトンマナに合わせる（y.nojiri「水色のアクセントなどTOPで使っていない」）── 出典＝www.clubd.co.jp のTOPの埋め込みCSS（2026-10-14 取得）：水色 #56B5CE は0回。墨 #1B2025・補助 #5A6167／rgba(27,32,37,.62)・線 rgba(27,32,37,.14) ・面 #F3F3F3・暗い面 #121518 に生成り #F4F4F2。和文 Noto Sans JP（商品ページは global.css が 400/500/700 を読む）・英字と数字は Inter ・英字ラベルは 11px／.22em／大文字／補助色で棒なし・リンクは下線1px・見出しは太さ400 */ #auen-lp-e{--ink:#1B2025;--ink2:#5A6167;--ink3:rgba(27,32,37,.62);--line:rgba(27,32,37,.14);--mist:#F3F3F3;--acc:#1B2025; --fl:"Inter","Noto Sans JP",sans-serif;font-family:"Noto Sans JP",-apple-system,"Hiragino Sans","Yu Gothic",sans-serif;letter-spacing:.02em} #auen-lp-e .au-dw-dark{--page:#121518;--ink:#F4F4F2;--ink2:rgba(244,244,242,.78);--ink3:rgba(244,244,242,.66);--line:rgba(244,244,242,.16);--acc:#F4F4F2;background:#121518;color:#F4F4F2} #auen-lp-e .au-dw-mist{background:#F3F3F3} /* 英字ラベル（棒をやめる）。カート下の英字ラベルも同じ書体に */ #auen-lp-e .au-dw-lb,#auen-lp-e .au-eb,#auen-lp-e .au-ix span{font-family:var(--fl);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink3)} #auen-lp-e .au-dw-lb::after{display:none} /* 見出し＝太さ400・字間広め */ #auen-lp-e h1,#auen-lp-e h2,#auen-lp-e h3{font-weight:400} #auen-lp-e .au-dw-hero h1{font-weight:400;letter-spacing:.1em} #auen-lp-e .au-dw-ch h3{font-weight:400;letter-spacing:.08em} #auen-lp-e .au-dw-about h2,#auen-lp-e .au-dw-day h2,#auen-lp-e .au-dw-fit h2,#auen-lp-e .au-dw-set h2,#auen-lp-e .au-dw-col h2,#auen-lp-e .au-faq h2{letter-spacing:.08em} #auen-lp-e .au-dw-hero .au-dw-name{font-weight:400;letter-spacing:.12em} @media(min-width:760px){#auen-lp-e .au-dw-hero{background:#121518}#auen-lp-e .au-dw-hero .au-dw-copy{--ink:#F4F4F2;--ink2:rgba(244,244,242,.82);--ink3:rgba(244,244,242,.78);color:#F4F4F2}#auen-lp-e .au-dw-hero h1{color:#F4F4F2}} /* 数字は Inter */ #auen-lp-e .au-dw-t{font-family:var(--fl);font-weight:400;letter-spacing:0} #auen-lp-e .au-dw-t small,#auen-lp-e .au-dw-why p b,#auen-lp-e .au-dw-cards span,#auen-lp-e .au-dw-zoom figcaption,#auen-lp-e .au-dw-fitpics figcaption{font-family:var(--fl);letter-spacing:.22em;text-transform:uppercase} #auen-lp-e .au-dw-facts b{font-family:var(--fl);font-weight:400;letter-spacing:.04em} #auen-lp-e .au-dw-facts b small{font-weight:400} /* 時刻の帯：下線は墨（夜は生成り） */ #auen-lp-e .au-dw-rail a{font-family:var(--fl);font-weight:500;color:rgba(27,32,37,.40)} #auen-lp-e .au-dw-rail a small{letter-spacing:.22em} #auen-lp-e .au-dw-rail a.au-on{color:#1B2025;border-bottom-color:#1B2025} #auen-lp-e .au-dw-rail.au-dw-night{background:#121518;border-color:rgba(244,244,242,.14)} #auen-lp-e .au-dw-rail.au-dw-night a{color:rgba(244,244,242,.42)} #auen-lp-e .au-dw-rail.au-dw-night a.au-on{color:#F4F4F2;border-bottom-color:#F4F4F2} #auen-lp-e .au-dw-zoom figcaption{background:#121518;color:#F4F4F2} #auen-lp-e .au-dw-dark .au-dw-why figure{outline-color:#F4F4F2} /* リンク＝文字＋下線1px（TOPの「もっと見る」と同じ） */ #auen-lp-e .au-dw-fittx a{text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px;font-size:13px;font-weight:400;letter-spacing:.1em} #auen-lp-e .au-dw-cards b{font-weight:400;font-size:12px;letter-spacing:.1em;border-bottom:1px solid currentColor;padding-bottom:2px} #auen-lp-e .au-dw-cards strong{font-weight:400} /* 切り替え：枠線のボタン（TOPの枠線ボタンと同じ字間） */ #auen-lp-e .au-dw-tabs{border-color:#1B2025} #auen-lp-e .au-dw-tabs button{font-weight:400;letter-spacing:.16em;padding:14px 28px} #auen-lp-e .au-dw-tabs button.au-on{background:#1B2025;color:#FFFFFF} #auen-lp-e .au-dw-fittx b,#auen-lp-e .au-dw-col figcaption b{font-weight:400;letter-spacing:.06em} /* カート下の残り：サイズの選択中の印（水色の薄い面）・表のしま（青みの白）を中立の色へ */ #auen-lp-e .au-spec .au-pills span.au-on{background:#F3F3F3;border-color:#1B2025;font-weight:500} #auen-lp-e .au-spec table.au-size tbody tr:nth-child(even) th,#auen-lp-e .au-spec table.au-size tbody tr:nth-child(even) td{background:#F8F8F7} #auen-lp-e .au-spec table.au-size thead th,#auen-lp-e .au-spec table.au-size tbody th{font-weight:500} #auen-lp-e button,#auen-lp-e summary{font-family:inherit} /* ── 2026-10-14 y.nojiri 指示の5点 ── */ /* 02 ABOUT：元ページの「ウールの、格。」の動画を、文の横（スマホは下）に */ #auen-lp-e .au-dw-ab{display:grid;grid-template-columns:minmax(0,1fr);gap:32px} #auen-lp-e .au-dw-mov video{display:block;width:100%;height:auto;background:#F3F3F3} #auen-lp-e .au-dw-mov figcaption{margin-top:12px;font-size:13px;line-height:1.8;color:var(--ink2)} #auen-lp-e .au-dw-mov figcaption b{display:block;font-family:var(--fl);font-size:11px;font-weight:500;letter-spacing:.22em;color:var(--ink);margin-bottom:4px} @media(min-width:760px){#auen-lp-e .au-dw-ab{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:72px;align-items:center}} /* 03 ONE DAY：スマホは時刻の節を横スライドに（スワイプか、上の時刻のタブで切り替え） */ #auen-lp-e .au-dw-swipe{display:none} @media(max-width:759px){ #auen-lp-e .au-dw-swipe{display:block;margin:0;padding:12px 24px 0;font-size:12px;line-height:1.6;color:var(--ink3);text-align:center} #auen-lp-e .au-dw-days{display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;margin-top:12px} #auen-lp-e .au-dw-days::-webkit-scrollbar{display:none} #auen-lp-e .au-dw-days>.au-dw-ch{flex:0 0 100%;width:100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;padding-top:36px;padding-bottom:56px} #auen-lp-e.au-rv-on .au-dw-days .au-rv{opacity:1;transform:none;transition:none} } /* 05 CODEイージーパンツとくらべる（表。このページの商品の列はグレーの面） */ #auen-lp-e .au-dw-vsgrid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr) minmax(0,1fr);margin-top:36px} #auen-lp-e .au-dw-vshd{padding:16px 8px 20px;text-align:center} #auen-lp-e .au-dw-vshd figure{max-width:240px;margin:0 auto} #auen-lp-e .au-dw-vshd img{aspect-ratio:3/4;object-fit:cover;background:#F3F3F3} #auen-lp-e .au-dw-vshd b{display:block;font-size:12.5px;font-weight:500;line-height:1.5;margin-top:12px} #auen-lp-e .au-dw-vshd a{display:inline-block;margin-top:8px;font-size:12px;letter-spacing:.06em;color:var(--ink);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px} #auen-lp-e .au-dw-vshd span{display:inline-block;margin-top:8px;font-size:11px;letter-spacing:.06em;color:var(--ink3)} #auen-lp-e .au-dw-vsk,#auen-lp-e .au-dw-vsv{padding:16px 8px;border-top:1px solid var(--line);font-size:13px;line-height:1.75} #auen-lp-e .au-dw-vsk{font-size:12px;font-weight:500;color:var(--ink3)} #auen-lp-e .au-dw-vsgrid .au-dw-self{background:#F3F3F3} #auen-lp-e .au-dw-vsgrid>:nth-last-child(-n+3){border-bottom:1px solid var(--line)} #auen-lp-e .au-dw-same{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;margin-top:24px;font-size:13px} #auen-lp-e .au-dw-same span{font-size:12px;color:var(--ink3);margin-right:6px} #auen-lp-e .au-dw-same b{font-weight:400;border:1px solid var(--line);padding:6px 14px} @media(min-width:760px){ #auen-lp-e .au-dw-vsgrid{grid-template-columns:180px minmax(0,1fr) minmax(0,1fr)} #auen-lp-e .au-dw-vshd{padding:24px 24px 28px} #auen-lp-e .au-dw-vshd b{font-size:15px} #auen-lp-e .au-dw-vsk,#auen-lp-e .au-dw-vsv{padding:20px 24px;font-size:14.5px} #auen-lp-e .au-dw-vsk{font-size:13px;padding-left:0} } /* ヒーローの説明文が写真の明るい所にかからないよう、PCは幅を詰める（2026-10-14 oj3149 で右端が窓にかかった） */ @media(min-width:760px){#auen-lp-e .au-dw-hero .au-lead{max-width:24em}} /* 2026-10-14 y.nojiri「スマホVer.だと黒基調になっておらず雰囲気が違う」＝スマホもヒーローの文字の面を暗い面にして、PCと同じ入り方にする */ #auen-lp-e .au-dw-hero{background:#121518} #auen-lp-e .au-dw-hero .au-dw-copy{--ink:#F4F4F2;--ink2:rgba(244,244,242,.82);--ink3:rgba(244,244,242,.78);color:#F4F4F2} #auen-lp-e .au-dw-hero h1{color:#F4F4F2} @media(max-width:759px){#auen-lp-e .au-dw-hero .au-dw-copy{padding:40px 24px 56px}} /* 2026-10-14 y.nojiri「PCのFV画像が顔と足元が切れている」＝高さの上限（92vh）で上下を切っていた。写真は切らずに画面の高さへ収め、右寄せにする（左の余りはヒーローの地の色＝写真の左の暗い柱とつながる） */ @media(min-width:760px){#auen-lp-e .au-dw-hero img{max-height:92vh;object-fit:contain;object-position:right center;background:#121518}}