/* AUEN LP-CODE（体験先行型・bl3336 の型）─ 2026-09-17。スコープ #auen-lp-e。DS準拠：Zen Kaku Gothic New / 6色 / 影なし / 角丸なし */ #auen-lp-e{--page:#FFFFFF;--mist:#F3F3F3;--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}} #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:#121518;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:#FFFFFF;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} /* 05 MATERIAL クロスフェード：3枚×3.4s＝10.2s で一巡（build-lp-code.js が枚数から生成） */ #auen-lp-e .au-update .au-slides img{animation:auen-fade 10.2s infinite ease-in-out} @keyframes auen-fade{0%{opacity:0;transform:scale(1.06)} 13.73%{opacity:1} 33.33%{opacity:1} 47.06%{opacity:0;transform:scale(1)} 100%{opacity:0;transform:scale(1)}} @media(prefers-reduced-motion:reduce){#auen-lp-e .au-update .au-slides img{animation:none;opacity:0}#auen-lp-e .au-update .au-slides img:first-child{opacity:1}} /* ts3366: #auen-pd is already full width, so do not bleed again (no scrollbar-width script on this page) 2026-10-08 */ #auen-pd #auen-lp-e{margin-left:0!important;margin-right:0!important;width:auto!important;max-width:none!important}