/* 洋楽コラム（/column/）：雑誌の特集ページ風 */

/* 一覧のヒーロー */
.col-hero{position:relative;overflow:hidden;padding:clamp(44px,7vw,96px) 0 clamp(30px,4vw,52px);border-bottom:1px solid var(--line);background:
 radial-gradient(600px 300px at 90% 10%,rgba(232,23,79,.14),transparent 70%),
 radial-gradient(700px 360px at 10% 100%,rgba(245,184,46,.2),transparent 70%),
 repeating-linear-gradient(-45deg,transparent 0 22px,rgba(168,107,0,.035) 22px 23px)}
.col-hero-in{position:relative}
.col-hero h1{font-size:clamp(38px,7vw,88px);font-weight:900;line-height:1.08;letter-spacing:-.03em;margin:10px 0 18px}
.col-hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--hot),#ff7a2f 60%,var(--sun));-webkit-background-clip:text;background-clip:text;color:transparent}
.col-hero h1 span{font:400 1.25em/1 var(--disp);color:var(--hot);margin:0 .08em 0 .18em;letter-spacing:0}
.col-hero .ph-lead{max-width:640px}
.col-hero-rk{position:absolute;right:0;bottom:-30px;width:clamp(120px,18vw,220px);height:auto;filter:drop-shadow(0 18px 30px rgba(60,45,20,.2));animation:colfloat 4s ease-in-out infinite}
@keyframes colfloat{50%{transform:translateY(-10px) rotate(-3deg)}}
@media(max-width:760px){.col-hero-rk{position:static;width:110px;margin:-10px 0 6px auto}}
.col-top{padding-top:28px}

/* カテゴリのタブ */
.colcats{display:flex;flex-wrap:wrap;gap:8px}
.colcats a{--c:var(--tx);display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);font-weight:700;font-size:14px;transition:.2s}
.colcats a small{font:400 14px/1 var(--disp);color:var(--c);letter-spacing:.04em}
.colcats a:hover{border-color:var(--c);color:var(--c);transform:translateY(-2px)}
.colcats a[aria-current]{background:var(--c);border-color:var(--c);color:#fff}
.colcats a[aria-current] small{color:#fff}

/* カテゴリの見出し */
.col-cath{display:grid;grid-template-columns:1fr auto;gap:2px 20px;align-items:end;margin-bottom:22px;padding:0 0 16px;border-bottom:3px solid var(--c)}
.col-cath p{grid-column:1/-1;font:400 14px/1 var(--disp);letter-spacing:.24em;color:var(--c)}
.col-cath h2{font-size:clamp(24px,3.2vw,36px);font-weight:900;line-height:1.25}
.col-cath h2 small{font-size:.45em;margin-left:10px;color:#fff;background:var(--c);border-radius:99px;padding:2px 10px;vertical-align:middle}
.col-cath span{grid-column:1;color:var(--mut);font-size:14px}
.col-cath .more{grid-column:2;grid-row:2/4;display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--c);font-size:14px}

/* カード */
.ccgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
/* 横スクロールはなし：.scroll でも折り返すグリッドにする */
.ccgrid.scroll{display:grid}
.cc{--c:var(--hot);display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:var(--card);border:1px solid var(--line);transition:.25s;position:relative}
.cc:hover{transform:translateY(-4px) rotate(-.3deg);box-shadow:0 18px 44px rgba(60,45,20,.18);border-color:var(--c)}
.cc-img{position:relative;aspect-ratio:16/9;overflow:hidden;background:#222}
.cc-img img{width:100%;height:100%;object-fit:cover;transition:.5s}
.cc:hover .cc-img img{transform:scale(1.07)}
.cc-img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.45),transparent 55%)}
.cc-cat{position:absolute;left:12px;top:12px;z-index:1;font-style:normal;font-size:12px;font-weight:900;color:#fff;background:var(--c);padding:4px 10px;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.cc-noimg{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--c) 70%,#fff),var(--c) 60%,color-mix(in srgb,var(--c) 70%,#000));color:#fff}
.cc-noimg b{font:400 clamp(26px,3vw,36px)/1 var(--disp);letter-spacing:.06em;text-align:center;padding:0 16px;opacity:.95}
.cc-body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1}
.cc-t{font-size:17px;font-weight:900;line-height:1.5}
.cc-x{font-size:13.5px;color:var(--mut);line-height:1.65}
.cc-m{margin-top:auto;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--c)}
.cc.big{display:grid;grid-template-columns:1.25fr 1fr}
.cc.big .cc-img{aspect-ratio:auto;min-height:280px}
.cc.big .cc-body{padding:clamp(22px,3vw,40px);justify-content:center;background:linear-gradient(135deg,var(--card),var(--bg2))}
.cc.big .cc-t{font-size:clamp(22px,2.8vw,32px);line-height:1.35}
.cc.big .cc-x{font-size:16px}
.cc.big .cc-m{margin-top:10px;font-size:14px}
@media(max-width:760px){.cc.big{grid-template-columns:1fr}.cc.big .cc-img{min-height:0;aspect-ratio:16/9}}

/* 記事のヒーロー */
.cart-hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;padding:clamp(54px,9vw,120px) 0 clamp(36px,5vw,64px);background:#1c1a21}
.cart-hero::before{content:"";position:absolute;inset:-30px;z-index:-2;background:var(--img,none) center/cover;filter:blur(18px) saturate(1.3);opacity:.55;transform:scale(1.1)}
.cart-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,rgba(18,16,22,.94) 30%,rgba(18,16,22,.55)),linear-gradient(0deg,color-mix(in srgb,var(--c) 55%,transparent),transparent 60%)}
.cart-hero-in{max-width:980px}
.cart-k{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12.5px;font-weight:700;margin-bottom:16px}
.cart-k a{font:400 14px/1 var(--disp);letter-spacing:.2em;background:var(--c);color:#fff;padding:7px 12px 5px;border-radius:6px}
.cart-k span{color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.3);padding:4px 10px;border-radius:99px}
.cart-hero h1{font-size:clamp(28px,5vw,58px);font-weight:900;line-height:1.22;letter-spacing:-.02em;text-wrap:balance}
.cart-catch{margin-top:18px;font:italic 700 clamp(17px,2.2vw,24px)/1.6 "Playfair Display","Noto Sans JP",serif;color:var(--sun2)}
.cart-catch::before{content:"— "}

/* 記事の本文 */
.cart-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;padding-top:36px}
@media(max-width:980px){.cart-body{grid-template-columns:1fr}}
.cart-main{max-width:760px;font-size:16.5px;line-height:2}
.cart-side{position:sticky;top:84px;align-self:start;display:flex;flex-direction:column}
@media(max-width:980px){.cart-side{position:static}}
.cart-lead{position:relative;font-size:clamp(17px,1.8vw,19.5px);line-height:2;font-weight:500;padding-bottom:24px;margin-bottom:30px}.cart-lead::after{content:"";position:absolute;left:0;bottom:0;width:84px;height:10px;background:var(--c);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 10'%3E%3Cpath d='M2 5q5-6 10 0t10 0 10 0 10 0 10 0 10 0 10 0 10 0' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 10'%3E%3Cpath d='M2 5q5-6 10 0t10 0 10 0 10 0 10 0 10 0 10 0 10 0' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.cart-main b{background:linear-gradient(transparent 62%,color-mix(in srgb,var(--sun) 55%,transparent) 62%);font-weight:900}
.cpoints{border:2px solid var(--tx);border-radius:16px;padding:20px 24px;margin:0 0 32px;background:var(--card);box-shadow:6px 6px 0 var(--c)}
.cpoints>p{font-weight:900;font-size:15px;margin-bottom:8px}
.cpoints ol{counter-reset:p;display:grid;gap:6px}
.cpoints li{counter-increment:p;position:relative;padding-left:38px;line-height:1.6;font-size:15px;font-weight:700}
.cpoints li::before{content:counter(p);position:absolute;left:0;top:-1px;width:26px;height:26px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font:400 17px/1 var(--disp);padding-top:2px}
.cart-yt{margin:0 0 40px}
.cart-yt figcaption{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:14px;font-weight:700;margin-bottom:10px;color:var(--tx2)}
.cart-yt figcaption svg{color:var(--c)}
.csec{margin-top:44px}
.csec h2{font-size:clamp(21px,2.6vw,28px);font-weight:900;line-height:1.45;margin-bottom:18px;display:flex;gap:14px;align-items:baseline}
.csec-n{font:400 clamp(38px,4.4vw,52px)/.8 var(--disp);color:var(--c);flex:none;letter-spacing:0}
.csec p+p{margin-top:1.1em}
.cbox{margin:26px 0 6px;padding:20px 22px;border-radius:14px;background:color-mix(in srgb,var(--c) 7%,var(--card));border:1px dashed color-mix(in srgb,var(--c) 50%,transparent);font-size:15px;line-height:1.85}
.cbox-k{font:400 13px/1 var(--disp);letter-spacing:.22em;color:var(--c)}
.cbox h3{font-size:17px;font-weight:900;margin:6px 0 6px}
.cnums-h small,.cwords h2 small,.csongs h2 small{display:block;font:400 14px/1 var(--disp);letter-spacing:.22em;color:var(--c);margin-bottom:6px}
.cnums-h{display:block!important}
.cnums{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.cnums div{padding:18px;border-radius:14px;background:#1c1a21;color:#fff;position:relative;overflow:hidden}
.cnums div::after{content:"";position:absolute;right:-20px;top:-20px;width:80px;height:80px;border-radius:50%;background:var(--c);opacity:.35}
.cnums b{display:block;font:400 clamp(30px,3.6vw,42px)/1.05 var(--disp);color:var(--sun);letter-spacing:.02em;background:none;word-break:keep-all}
.cnums span{display:block;font-size:13px;line-height:1.6;margin-top:6px;color:#e6e1ea}

/* ひとこと */
.ctake{position:relative;margin:52px 0 0;padding:26px 26px 26px 132px;border-radius:18px;background:linear-gradient(120deg,var(--sun2),#fff3c4);border:2px solid var(--sun)}
.ctake-rk{position:absolute;left:18px;bottom:10px;width:100px;height:auto}
.ctake-k{font-size:13px;font-weight:900;color:var(--gold2);margin-bottom:4px}
.ctake p:last-child{font-size:17px;font-weight:700;line-height:1.8}
@media(max-width:560px){.ctake{padding:22px 20px 20px 20px}.ctake-rk{position:static;width:72px;margin-bottom:4px}}

/* クイズ */
.cquiz{position:relative;margin-top:44px;padding:28px 28px 26px;border-radius:18px;background:#1c1a21;color:#fff;overflow:hidden}
.cquiz-rk{position:absolute;right:14px;top:10px;width:96px;height:auto;opacity:.95}
.cquiz-k{font:400 14px/1 var(--disp);letter-spacing:.22em;color:var(--sun)}
.cquiz h2{font-size:clamp(18px,2.2vw,23px);font-weight:900;line-height:1.55;margin:10px 110px 18px 0}
.cquiz-c{display:grid;gap:10px}
.cquiz-c button{display:flex;align-items:center;gap:12px;text-align:left;padding:13px 16px;border-radius:12px;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.18);font-weight:700;font-size:15px;line-height:1.5;transition:.2s}
.cquiz-c button span{flex:none;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;font:400 18px/1 var(--disp);padding-top:2px}
.cquiz-c button:hover:not(:disabled){border-color:var(--sun);transform:translateX(4px)}
.cquiz-c button.ok{background:#2b8a3e;border-color:#69db7c}
.cquiz-c button.ng{background:#a61e4d;border-color:#ff8787}
.cquiz-c button:disabled{cursor:default}
.cquiz-r{margin-top:16px;font-size:20px;font-weight:900;color:var(--sun)}
.cquiz-why{margin-top:6px;color:#e6e1ea;font-size:15px;line-height:1.8}
.cquiz.done .cquiz-rk{animation:colpop .6s}
@keyframes colpop{40%{transform:scale(1.25) rotate(8deg)}}
@media(max-width:560px){.cquiz h2{margin-right:0;margin-top:70px}.cquiz-rk{width:70px}}

/* 英語表現 */
.cwords{margin-top:48px}
.cwords h2,.csongs h2{font-size:clamp(21px,2.6vw,28px);font-weight:900;margin-bottom:16px}
.cwords-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.cw{padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--c) 16%,transparent) 0 48px,transparent 49px),var(--card);line-height:1.6}
.cw p{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cw p b{font-size:19px;font-weight:900;background:none}
.cw strong{display:block;font-size:14.5px;margin:4px 0}
.cw span{display:block;font-size:13px;color:var(--mut)}

/* 曲 */
.csongs{margin-top:48px}
.csongs ul{display:grid;gap:14px}
.cs{display:grid;grid-template-columns:240px 1fr;gap:18px;padding:14px;border-radius:16px;border:1px solid var(--line);background:var(--card);align-items:center}
.cs .yt{border-radius:10px;box-shadow:none}
.cs .yt i{width:54px;height:54px;font-size:28px;box-shadow:0 0 0 6px rgba(242,193,78,.3)}
.cs-search{aspect-ratio:16/9;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;font-size:13px;font-weight:700;line-height:1.4;color:#fff;background:linear-gradient(135deg,#2a2530,color-mix(in srgb,var(--c) 70%,#2a2530))}
.cs-search svg{font-size:34px;color:var(--sun)}
.cs-t{line-height:1.6}
.cs-t>b{display:block;font-size:18px;font-weight:900;background:none}
.cs-t>span{display:block;font-size:13.5px;color:var(--mut)}
.cs-t>span i{font-style:normal;margin-left:8px;color:var(--c);font-weight:700}
.cs-t>p{font-size:14px;margin-top:6px;color:var(--tx2)}
.cs-links{display:flex;flex-wrap:wrap;gap:6px 16px}
.cs-links a{display:inline-flex;align-items:center;gap:4px;color:var(--c);font-weight:700;font-size:13px}
@media(max-width:620px){.cs{grid-template-columns:1fr}}
.cvids{margin-top:22px}
.cvids h3{font-size:15px;font-weight:900;margin-bottom:10px}
.cvids .links a svg:first-child{color:var(--hot)}

/* 前後・もくじ */
.cpn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:36px}
.cpn a{padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:var(--card);font-weight:700;font-size:14px;line-height:1.55;transition:.2s}
.cpn a:last-child{text-align:right}
.cpn a:hover{border-color:var(--c);color:var(--c)}
.cpn small{display:block;font-size:12px;color:var(--mut);margin-bottom:4px}
@media(max-width:560px){.cpn{grid-template-columns:1fr}.cpn a:last-child{text-align:left}}
.ctoc ol{counter-reset:t;display:grid;gap:2px}
.ctoc li{counter-increment:t}
.ctoc a{display:flex;gap:10px;padding:7px 4px;border-radius:8px;font-size:13.5px;font-weight:700;line-height:1.5;color:var(--tx2)}
.ctoc a::before{content:counter(t,decimal-leading-zero);font:400 15px/1.4 var(--disp);color:var(--c);flex:none}
.ctoc a:hover,.ctoc a.on{background:var(--card2);color:var(--tx)}
.col-rand{width:100%}

/* ホーム・曲ページに出すコラム枠 */
.colban{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:20px 24px;border-radius:18px;background:linear-gradient(120deg,#1c1a21,#4a2240);color:#fff;margin-bottom:22px}
.colban b{font-size:clamp(18px,2.2vw,24px);font-weight:900;line-height:1.4}
.colban span{display:block;font-size:13.5px;color:#e2dbe8;margin-top:4px}
.colban img{width:84px;height:auto}
@media(max-width:620px){.colban{grid-template-columns:1fr}.colban img{display:none}}
.song-cols .links a{line-height:1.5}