）と同じ縮小版 auen-appdl-v16-day-*（300×372）＝同じ記事で読み込み済みなので通信が増えない */ #c6 .c6-week{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:36px} #c6 .c6-day{display:flex;flex-direction:column;min-width:0} #c6 .c6-dph{position:relative;aspect-ratio:300/372} #c6 .c6-dph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;pointer-events:none;background:linear-gradient(to top,rgba(12,15,18,.5),rgba(12,15,18,0))} #c6 .c6-dn{position:absolute;left:10px;bottom:9px;z-index:1;font-family:var(--fe);font-weight:300;font-size:21px;line-height:1;letter-spacing:.06em;text-transform:uppercase;color:#fff} #c6 .c6-of{display:block;margin-top:12px;font-size:12px;line-height:1.7;letter-spacing:.06em;word-break:keep-all;overflow-wrap:anywhere} #c6 .c6-day:hover .c6-ph img{transform:scale(1.03)} #c6 a.c6-day:hover .c6-of{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px} /* STEP 03 と、CODEシリーズのページへ */ #c6 .c6-st0{margin-top:0} #c6 .c6-close{margin-top:80px;padding-top:40px;border-top:1px solid var(--rule);align-items:center} #c6 .c6-close .c6-step{padding-top:0} #c6 .c6-close .c6-ht{display:flex;flex-direction:column;align-items:flex-start;gap:24px} #c6 .c6-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:46px;padding:12px 24px; border:1px solid var(--ink);font-size:13px;line-height:1.4;letter-spacing:.12em;color:var(--ink);transition:background .4s,color .4s} #c6 a.c6-btn:hover{background:var(--ink);color:#fff} @media (prefers-reduced-motion:reduce){#c6 *{transition:none !important}} /* 枠が中くらい（タブレットの記事＝本文645px前後） */ @container (max-width:759px){ #c6{--pad:28px;--gap:14px;padding-top:40px;padding-bottom:44px} #c6 .c6-cin{left:24px;right:24px;bottom:22px} #c6 .c6-claim{font-size:15px;margin-top:10px} #c6 .c6-intro{margin-top:48px} #c6 .c6-intro .c6-txt,#c6 .c6-step,#c6 .c6-ht{grid-column:1/-1} #c6 .c6-lead{font-size:19px} #c6 .c6-sec{margin-top:64px} #c6 .c6-ht{margin-top:16px} #c6 .c6-h{font-size:19px} #c6 .c6-setup{margin-top:28px} #c6 .c6-setup .c6-ph{grid-column:1/7} #c6 .c6-setup .c6-side{grid-column:7/-1} /* トップスは横に送る（TOPの棚と同じ作法）。帯だけは部品の端まで使う */ #c6 .c6-cards{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none; margin:28px calc(var(--pad) * -1) 0;padding:0 var(--pad) 4px;scroll-padding-inline:var(--pad)} #c6 .c6-cards::-webkit-scrollbar{display:none} #c6 .c6-card{flex:0 0 42%;scroll-snap-align:start} #c6 .c6-week{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none; margin:28px calc(var(--pad) * -1) 0;padding:0 var(--pad) 4px;scroll-padding-inline:var(--pad)} #c6 .c6-week::-webkit-scrollbar{display:none} #c6 .c6-day{flex:0 0 26%;scroll-snap-align:start} #c6 .c6-close{margin-top:64px;padding-top:32px} #c6 .c6-close .c6-ht{gap:20px;margin-top:12px} } /* スマホ（本文342px前後） */ @container (max-width:479px){ #c6{--pad:16px;padding-top:32px;padding-bottom:40px} #c6 .c6-cover{aspect-ratio:4/5} #c6 .c6-cin{left:18px;right:18px;bottom:18px;flex-direction:column;align-items:flex-start;gap:12px} #c6 .c6-name{font-size:min(34px,10cqi)} #c6 .c6-claim{font-size:14.5px;letter-spacing:.12em} #c6 .c6-season{order:-1} #c6 .c6-intro{margin-top:40px} #c6 .c6-lead{font-size:18px;letter-spacing:.1em} #c6 .c6-body{font-size:13px} #c6 .c6-sec{margin-top:56px} #c6 .c6-h{font-size:18px} #c6 .c6-setup .c6-ph,#c6 .c6-setup .c6-side{grid-column:1/-1} #c6 .c6-setup .c6-side{margin-top:20px} #c6 .c6-buys{margin-top:18px} #c6 .c6-card{flex-basis:80%} #c6 .c6-day{flex-basis:44%} #c6 .c6-close{margin-top:56px} #c6 .c6-btn{width:100%} }