/*
 * ナレッジ記事の関連記事（2026-09-24）
 *
 * 畔栁さんが見本 /design/knowledge-related-2/ から「案D 大きな画像に文字を重ねる」を選んだ。
 *   パソコン … いちばん新しい1件を大きく（画像の下側を墨色でぼかし、白い文字を重ねる）、残り2件を右に小さく
 *   スマホ   … 3件を横に並べて指で送る（1枚は8割の幅。次のカードの端がのぞく）。画面に入ると一度だけ少しずれて戻る。
 *              いま見ているカード以外は少し薄く小さく、下の短い線で何枚目かを示す
 * 組み立ては template-parts/related-knowlegde_hub.php、動きは assets/js/knowledge-related.js。
 * 一覧ページ（list-archive.css）と同じ部品：カテゴリーは金の文字、日付は Noto Sans JP、楕円の札・丸いボタンは使わない。
 */

.areaNewsDetail .detailRelated {
    margin-top: 80px;
    /* 枠の左右の余白（news-detail.css の .detailWrap と同じ値）。スマホの横送りを枠の端まで広げるのに使う */
    --g: 96px;
}

.rl {
    --ink: #242428;
    --gold: #C9A551;
    --gold-dark: #A8812F;
    --line: #E3E3E6;
    --muted: #6A6A72;
    --en: "FuturaLTProLight", "Futura", sans-serif;
    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease2: cubic-bezier(.65, 0, .35, 1);
    container: rl / inline-size;
    position: relative;
    font-family: "Noto Sans JP", sans-serif;
    color: var(--ink);
    line-height: 1.7;
}
.rl *, .rl *::before, .rl *::after { box-sizing: border-box; }
.rl :where(p, ul, li, figure, h3) { margin: 0; padding: 0; }
.rl :where(ul) { list-style: none; }
.rl :where(a) { color: inherit; text-decoration: none; }
.rl :where(img) { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 見出し：左に「RELATED ARTICLES／関連記事」、右に同じカテゴリーの一覧へ */
.rlHead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.rlLabel { display: flex; align-items: center; gap: 14px; font-family: var(--en); font-size: 12.5px; letter-spacing: .26em; color: var(--gold-dark); }
.rlLabel::before { content: ""; width: 36px; height: 1px; background: var(--gold); transform-origin: left; transition: transform 1s var(--ease2); }
.rlHead h3 { margin-top: 8px; font-size: 24px; font-weight: 400; letter-spacing: .1em; line-height: 1.4; color: var(--ink); background: none; border: 0; padding: 0; }
.rlHead h3 small { margin-left: 12px; font-size: 13px; letter-spacing: .06em; color: var(--muted); }
.rlMoreCat { display: inline-flex; align-items: center; gap: 12px; padding-bottom: 4px; font-size: 13px; letter-spacing: .08em; white-space: nowrap; }
.rlMoreCat b { font-weight: 500; color: var(--gold-dark); }

/* 部品 */
.rlImg { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #F4F4F6; border-radius: 6px; }
.rlImg img { transition: transform .9s var(--ease); }
.rlImg--none img { object-fit: contain; padding: 18% 30%; opacity: .5; }
.rl a:hover .rlImg img { transform: scale(1.03); }
.rlMeta { display: flex; align-items: center; gap: 12px; font-size: 12px; line-height: 1.4; }
.rlMeta .c { font-weight: 500; letter-spacing: .1em; color: var(--gold-dark); }
.rlMeta .d { color: var(--muted); letter-spacing: .04em; font-feature-settings: "tnum"; }
.rlMeta .c + .d::before { content: ""; display: inline-block; width: 1px; height: 10px; margin-right: 12px; background: #CFCFD4; vertical-align: -1px; }
.rlTitle { font-size: 15px; font-weight: 500; line-height: 1.75; letter-spacing: .02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rlTitle span { background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 100% / 0 1px; transition: background-size .5s var(--ease); }
.rl a:hover .rlTitle span { background-size: 100% 1px; }
.rlArw { position: relative; display: inline-block; width: 26px; height: 9px; flex: none; transition: transform .5s var(--ease); }
.rlArw::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: currentColor; }
.rlArw::after { content: ""; position: absolute; right: 0; top: 1px; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.rl a:hover .rlArw { transform: translateX(5px); }
.rlGo { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 13px; letter-spacing: .12em; }

/* 下の「ナレッジハブ一覧へ」（線付きの文字リンク） */
.rlFoot { display: flex; justify-content: center; margin-top: 48px; }
.rlAll { display: inline-flex; align-items: center; gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--ink); font-size: 14px; letter-spacing: .14em; }
.rlAll .rlArw { width: 30px; }

/* 大きな1件＋2件（上に区切りの線） */
.rlGrid { position: relative; display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; margin-top: 32px; padding-top: 36px; }
.rlGrid::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform-origin: left; transition: transform 1s var(--ease2) .1s; }
.rlSmall { display: grid; gap: 26px; align-content: center; }
.rlSmall a { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 20px; align-items: start; }
.rlSmall .rlImg { border-radius: 4px; }
.rlSmall .rlTitle { margin-top: 6px; font-size: 14.5px; -webkit-line-clamp: 3; }
.rlDots { display: none; }

/* 大きな1件：画像の下側を墨色でぼかし、白い文字を重ねる */
.rlBig a { position: relative; display: block; overflow: hidden; border-radius: 8px; }
.rlBig .rlImg { aspect-ratio: 4 / 3; border-radius: 0; }
.rlBig .rlImg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27, 27, 31, 0) 30%, rgba(27, 27, 31, .55) 55%, rgba(27, 27, 31, .92)); }
.rlBig .rlTxt { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 26px; }
.rlBig .rlMeta .c { color: var(--gold); }
.rlBig .rlMeta .d { color: #D5D5DC; }
.rlBig .rlMeta .c + .d::before { background: rgba(255, 255, 255, .35); }
.rlBig .rlTitle { margin-top: 10px; font-size: 19px; line-height: 1.65; color: #fff; }
.rlBig .rlTitle span { background-image: linear-gradient(#fff, #fff); }
.rlBig .rlGo { color: #fff; }

/* 現れ方：見出しの金の線と区切りの線が引かれ、記事が濃さだけで順に現れる */
.rl.is-ready [data-a] { opacity: 0; transition: opacity .8s var(--ease); transition-delay: calc(var(--i, 0) * 90ms + .3s); }
.rl.is-in [data-a] { opacity: 1; }
.rl.is-ready .rlLabel::before, .rl.is-ready .rlGrid::before { transform: scaleX(0); }
.rl.is-in .rlLabel::before, .rl.is-in .rlGrid::before { transform: none; }

@media (max-width: 768px) {
    .areaNewsDetail .detailRelated {
        margin-top: 48px;
        --g: clamp(15px, 4.1vw, 25px);
    }
}

/* =====================================================================
   スマホ：3件を横に並べて指で送る
   ===================================================================== */
@container rl (max-width: 600px) {
    .rlHead { display: block; }
    .rlHead h3 { font-size: 20px; }
    .rlHead h3 small { display: block; margin: 4px 0 0; font-size: 12px; }
    .rlMoreCat { margin-top: 12px; font-size: 12.5px; }
    .rlFoot { margin-top: 28px; }
    .rlAll { font-size: 13px; }
    /* 1枚は8割の幅。枠の端まで広げて、次のカードの端がのぞくようにする */
    .rlGrid {
        grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; gap: 16px; align-items: start;
        margin: 22px calc(-1 * var(--g, 20px)) 0; padding: 24px var(--g, 20px) 6px;
        overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--g, 20px);
        scrollbar-width: none; overscroll-behavior-x: contain;
    }
    .rlGrid::-webkit-scrollbar { display: none; }
    .rlGrid::before { left: var(--g, 20px); right: var(--g, 20px); }
    .rlSmall { display: contents; }
    .rlBig, .rlSmall > li { scroll-snap-align: start; transition: opacity .5s var(--ease), transform .5s var(--ease); }
    /* いま見ているカード以外は少し薄く小さく（is-cur は knowledge-related.js が付ける） */
    .rl.is-js .rlBig:not(.is-cur), .rl.is-js .rlSmall > li:not(.is-cur) { opacity: .45; transform: scale(.95); }
    .rl.is-ready.is-js .rlBig:not(.is-cur), .rl.is-ready.is-js .rlSmall > li:not(.is-cur) { opacity: 0; }
    .rl.is-in.is-js .rlBig:not(.is-cur), .rl.is-in.is-js .rlSmall > li:not(.is-cur) { opacity: .45; }
    /* カードの中身は「画像が上・文字が下」にそろえる（大きな1件は画像に文字を重ねたまま） */
    .rlSmall a { display: block; }
    .rlImg, .rlSmall .rlImg, .rlBig .rlImg { aspect-ratio: 16 / 10; border-radius: 6px; }
    .rlBig .rlImg { border-radius: 0; }
    .rlBig a { border-radius: 6px; }
    .rlBig .rlTxt { padding: 14px 16px; }
    .rlSmall .rlMeta { margin-top: 14px; font-size: 11.5px; gap: 10px; }
    .rlBig .rlMeta { font-size: 11.5px; gap: 10px; }
    .rlMeta .c + .d::before { margin-right: 10px; }
    .rlBig .rlTitle { margin-top: 6px; font-size: 14.5px; line-height: 1.65; -webkit-line-clamp: 2; }
    .rlSmall .rlTitle { margin-top: 6px; font-size: 14.5px; line-height: 1.65; -webkit-line-clamp: 3; }
    .rlGo { display: none; }
    /* 画面に入ったとき一度だけ、カードが左へ少しずれて戻る（横に送れることを知らせる。translate なので縮小はそのまま） */
    .rlGrid.is-hint > .rlBig, .rlGrid.is-hint .rlSmall > li { animation: rlHint 1.2s var(--ease); }
    /* 何枚目か（短い線。いまの1枚が金で長くなる） */
    .rlDots { display: flex; justify-content: center; gap: 6px; margin-top: 18px; }
    .rlDots i { width: 14px; height: 2px; background: var(--line); transition: width .4s var(--ease), background .4s; }
    .rlDots i.on { width: 30px; background: var(--gold); }
}
@keyframes rlHint { 0% { translate: 0 0; } 38% { translate: -52px 0; } 100% { translate: 0 0; } }

/* 動きを減らす設定の方には、最初から全部見せる。ずれて戻る動きもしない */
@media (prefers-reduced-motion: reduce) {
    .rl [data-a], .rl .rlLabel::before, .rl .rlGrid::before { opacity: 1 !important; transform: none !important; transition: none !important; }
    .rlGrid.is-hint > .rlBig, .rlGrid.is-hint .rlSmall > li { animation: none; }
}