@charset "UTF-8";
/* ====================================================
　施工事例詳細ページ固有CSS（ファーストビュー以降）
　pageWorksDetail_body.css
==================================================== */


/* ######################################################################################

　WORK DETAIL（施工事例本体）

###################################################################################### */

/* ----- workDetail ----- */
.workDetail{ background: var(--color-white); }

@media print, screen and (min-width: 768px){
    .workDetail{ padding-top: 5.9375em; padding-bottom: 5em; }
}
@media screen and (max-width: 767px){
    .workDetail{ padding-top: 10.2564vw; padding-bottom: 14.359vw; }
}

/* workDetail__head
---------------------------------------------------- */
.workDetail__head{ margin-bottom: 1.6875em; }
@media screen and (max-width: 767px){
    .workDetail__head{ margin-bottom: 4.1026vw; }
}

/* workDetail__category
---------------------------------------------------- */
.workDetail__category{
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--color-primary);
}
@media print, screen and (min-width: 768px){
    .workDetail__category{ font-size: 1.6rem; }
}
@media screen and (max-width: 767px){
    /* Figma SPはPCと異なり角丸ピル型バッジ表示（worksCard__tagと同じ意匠） */
    .workDetail__category{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 6.6667vw;
        padding-right: 3.0769vw;
        padding-left: 3.0769vw;
        border-radius: 999px;
        background: rgba(56, 85, 153, 0.1);
        font-size: 3.0769vw;
    }
}

/* workDetail__title
---------------------------------------------------- */
.workDetail__title{
    font-family: var(--font-serif);
    font-weight: 700;
    letter-spacing: 0.03em;
    /* line-height未指定だとbody継承の1.8になり、Figma実測（55px÷38px）より
       行高が膨らむため固定する */
    line-height: 1.45;
    color: #222;
}
@media print, screen and (min-width: 768px){
    .workDetail__title{ margin-top: 0.0789em; font-size: 3.8rem; }
}
@media screen and (max-width: 767px){
    .workDetail__title{ font-size: 6.1538vw; margin-top: 2.0513vw; }
}

/* workDetail__layout（写真ギャラリー＋概要の2カラム／SPは縦積み）
---------------------------------------------------- */
.workDetail__layout{
    display: flex;
    align-items: flex-start;
    gap: 2.875em;
}
@media screen and (max-width: 767px){
    .workDetail__layout{ flex-direction: column; gap: 8.2051vw; }
}

/* workDetail__gallery
　幅指定は pageWorksDetail_first.css 側（slick初期化前に確定させる必要があるため）
---------------------------------------------------- */

/* workDetail__mainPhotoFrame（比率確定用の外枠。aspect-ratioはここでのみ計算する）
　素材写真に4:3が多いため表示枠自体を4:3に固定する（PC/SP共通。横幅は
　.workDetail__galleryの幅に追従し、高さは4:3から自動算出されるため、
　スライドが切り替わっても表示枠のサイズは変化しない）
---------------------------------------------------- */
.workDetail__mainPhotoFrame{
    overflow: hidden;
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--color-bg-light);
}
@media screen and (max-width: 767px){
    /* SPはPREV/NEXTで1枚ずつ切り替える前提の4:3固定フレームを廃止し、
       .workDetail__mainSlider側で全画像を縦積み表示する（下記参照）。
       枠自体はもう比率を持たないただのコンテナに戻す */
    .workDetail__mainPhotoFrame{
        overflow: visible;
        aspect-ratio: auto;
        background: none;
    }
}

/* workDetail__mainSlider（slick。fadeで1枚ずつクロスフェード切替）
　position:absolute で通常フローから切り離し、slickが内部で設定する
　スライド幅・トラック幅が外枠のサイズ計算に影響しないようにする
　touch-action：lib/jquery/slick/slick.cssの.slick-slider既定値がtouch-action:pan-y
　（pinch-zoomを含まない）のため、SPでメイン画像上のピンチイン/アウトができなく
　なっていた。pan-y（縦スクロールはブラウザに委ねる。横方向はslickのJSスワイプに
　委ねる）はそのまま維持しつつpinch-zoomだけ許可し、縦スワイプ・横スワイプの
　既存挙動を変えずにブラウザ標準のピンチズームだけ復元する
---------------------------------------------------- */
.workDetail__mainSlider{
    touch-action: pan-y pinch-zoom;
    position: absolute;
    inset: 0;
}
.workDetail__mainSlider,
.workDetail__mainSlider .slick-list,
.workDetail__mainSlider .slick-track{ height: 100%; }
.workDetail__mainSlider:not(.slick-initialized) .workDetail__mainSlide{ display: none; }
.workDetail__mainSlider:not(.slick-initialized) .workDetail__mainSlide:first-child{ display: block; }
@media screen and (max-width: 767px){
    /* SPはworksDetailGallery.jsのresponsive設定でSlickをunslickする
       （destroy()が.slick-list/.slick-trackを取り除き、各.workDetail__mainSlide
       を.workDetail__mainSliderへ元の順番のまま直接戻すため、以降は
       ただのコンテナ内での通常フローになる。unslick後も.slick-initialized
       クラスは付かない＝上のPC用FOUC防止ルール（:not(.slick-initialized)で
       1枚目以外をdisplay:noneにする）がそのまま作用してしまうため、
       SPは全画像を表示するよう明示的に上書きする。JS未実行時も同じ
       セレクタが効くため、JSが動かなくても全画像が閲覧できる）
       isolation:isolate（2026-09追加）：下のコメントのとおりSlickの既知の癖で
       子の.workDetail__mainSlideへ不要なz-indexが再付与されることがある。
       isolation:isolateは要素のposition値に関わらず必ず新しいstacking
       contextを生成するため、子孫がどんなz-index値を持ってしまってもこの
       コンテナの中に封じ込められ、.header（position:fixed; z-index:100）を
       含むページ側の要素と直接比較されることがなくなる
       （.workDetail__mainSlider自身はz-index未指定のまま＝親からは通常の
       非positioned要素として扱われ、DOM順どおりheaderより背面に描画される） */
    .workDetail__mainSlider{
        touch-action: auto;
        position: static;
        inset: auto;
        display: flex;
        flex-direction: column;
        gap: 6.1538vw;
        height: auto;
        isolation: isolate;
    }
    .workDetail__mainSlider:not(.slick-initialized) .workDetail__mainSlide{
        display: block;
    }
    /* !important必須（実機検証で判明したlib/jquery/slick/slick.jsの既知の癖への対処）：
       fade:trueオプション使用時、initializeEvents()内の`$(_.setPosition);`
       （実体は$(document).readyのショートハンド呼び出し）が、unslick()による
       同期的なdestroy()完了後に非同期（ready完了後のマイクロタスク）で
       もう一度setPosition()→setFade()を呼んでしまい、_.unslickedの状態を
       一切確認しないまま各.workDetail__mainSlideへ再度インラインstyle
       （position:relative; left/top:0; z-index:998または999; opacity:0）を
       付与し直す。destroy()自身のスタイル復元（originalStylingへの巻き戻し）は
       正しく動作しているが、その直後にこの巻き戻し済みの要素へさらに
       上書きしてしまうため、destroy()側を直しても解決しない。
       positionはPC同様position:relativeのまま許容する（下のキャプションを
       画像へ重ねるためposition:relativeのコンテナが必要。base側の
       `.workDetail__mainSlide{ position: relative; }` と一致しており競合しない）。
       z-index・left・top・opacityの4つだけ、いつ・何度再実行されても確実に
       中立値へ戻るよう!important付きで固定する（通常のstylesheetルールは
       インラインstyleに負けるが、!important付きauthor stylesheetのルールは
       インラインstyle（!importantなし）に勝つというCSSの優先順位を利用）。
       z-indexをautoに固定するのは、たとえ上のisolation:isolateで実害が
       封じ込められていても、不要なz-indexをDOM上に残さないため（多重の
       安全策）。vendor配布のslick.js/slick.min.js自体は、他ページのfade
       未使用スライダー（works__list・relatedCase__list）にも影響するため
       変更しない */
    .workDetail__mainSlide{
        opacity: 1 !important;
        z-index: auto !important;
        left: 0 !important;
        top: 0 !important;
    }
}

/* workDetail__mainSlider .slick-arrow（メイン画像4:3フレーム内側の前後矢印）
　Figma node 344:1559 実測（get_design_context。ボタン実体は
　"Works active page button container" というSVG：円35×35・fill黒・
　fill-opacity 0.4、内側に white stroke-width 1.5 のシェブロンパス
　（PREVはNEXTのアイコンを rotate(180deg) + scaleY(-1) で水平反転した
　もの＝同一アセット共用）。PC(1920フレーム)・SP(390フレーム)とも
　ボタン実寸は同じ35pxで、スマホでもvwで縮小しない固定サイズと判断できる
　（サイズだけ固定・配置間隔だけ後述のとおりPC/SPで別指定）。
　.workDetail__mainSliderはinset:0で.workDetail__mainPhotoFrame（4:3フレーム・
　position:relative）と同じ矩形を占めるため、Slickが.workDetail__mainSliderへ
　直接追加するprevArrow/nextArrowはそのままフレーム基準で配置できる
　（prev/nextとも.workDetail__mainSliderの直接の子として生成されるため、
　.workDetail__mainSlider .slick-arrow は他ページ・他スライダーの
　.slick-arrowへ一切波及しない）。
　クリック領域サイズ（35×35・下のrelatedCase共用ブロックの24×24とは別値）と
　背景円は、この技法だとrelatedCase側と共用できないためここで個別指定する。
　配置（top/left/right）も下の.relatedCase__sliderWrap .slick-arrowと別に
　個別指定する（フレーム高さがコンテナ幅に応じて可変なため、relatedCaseの
　固定px指定ではなくtop:50%+translateY(-50%)で常に天地中央を維持する） */
.workDetail__mainSlider .slick-arrow{
    top: 50%;
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: rgba(0,0,0,0.4);
}
/* 左右の余白はFigma実測で完全な左右対称ではなかった（メイン画像端から
   PREV側8px・NEXT側12px）ため、推測で丸めず実測値をそのまま使用する。
   SPは390pxフレームで両側とも5px（＝1.2821vw。common_first.cssの
   --container-pad-sp と同じ考え方でvw化）と対称だったためそのまま使う */
@media print, screen and (min-width: 768px){
    .workDetail__mainSlider .slick-prev{ left: 8px; }
    .workDetail__mainSlider .slick-next{ right: 12px; }
}
@media screen and (max-width: 767px){
    .workDetail__mainSlider .slick-prev{ left: 1.2821vw; }
    .workDetail__mainSlider .slick-next{ right: 1.2821vw; }
}
/* シェブロンの寸法・太さ（2026-09追加指示で再調整。縦9px×横9px・線幅2px、
   丸ボタンの天地左右中央に配置）。
   親.slick-arrowのflexセンタリングだけに頼ると、border-top+border-right回転
   技法は「正方形の回転中心」と「V字として視認される図形の中心」がズレる
   （V字の先端側だけが中心から離れて見える）ため、position:absolute＋
   top:50%/left:50%＋transform:translate(-50%,-50%)で要素自身の中心を
   親の中心に明示的に一致させたうえで、同じtransformにrotateを追加する
   （transform-originは既定の中心のまま。translateしてからrotateしても
   回転軸は要素自身の中心なのでズレは生じない）。回転角はrelatedCase側と
   同じ値をそのまま使う */
.workDetail__mainSlider .slick-arrow:before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    opacity: 1;
}
.workDetail__mainSlider .slick-prev:before{ transform: translate(-50%, -50%) rotate(-135deg); }
.workDetail__mainSlider .slick-next:before{ transform: translate(-50%, -50%) rotate(45deg); }
/* disabled時のopacityは、下のrelatedCase側との共用宣言をそのまま維持する
   （.workDetail__mainSliderの.slick-arrow.slick-disabled セレクタに残る）。
   回転角（rotate）はPREV/NEXTで中央配置の実装が異なる（上のtranslate付き
   transformを使う）ため、下の共用ブロックからは.workDetail__mainSlider分を
   外し、relatedCase側にのみ個別指定し直した。クリック領域24×24・背景円
   なしはrelatedCase側専用のため、既にその上のブロックで幅・高さを外し
   relatedCase側にのみ個別指定済み */

/* workDetail__mainSlide
---------------------------------------------------- */
.workDetail__mainSlide{ position: relative; height: 100%; }
.workDetail__mainSlide img{
    display: block;
    width: 100%;
    height: 100%;
    /* coverでのトリミングを廃止し、縦横比を保ったまま画像全体を表示する。
       縦長画像は左右に、横長画像は上下に.workDetail__mainPhotoFrameの
       background（--color-bg-light）が余白として見える仕様とする */
    object-fit: contain;
}
@media screen and (max-width: 767px){
    /* SPはheight:100%（4:3フレーム基準）をやめてheight:autoにする。
       width:100%はそのまま維持しつつ高さを画像自身の実寸から自動算出させ、
       元画像の縦横比を一切変形させない（object-fit:containは
       box比率＝画像比率になるため実質無効化されるが、値自体は
       PC/SP共通のまま変更不要） */
    .workDetail__mainSlide{ height: auto; }
    .workDetail__mainSlide img{ height: auto; }
}

/* workDetail__mainCaption（PC/SP共通デザイン。2026-09変更：SP専用の別デザイン
　だった時期があったが、画像に重ねる黒半透明バッジという表示方法・背景・文字色を
　PCと完全に共通化し、SP専用の重複実装を廃止した。position:absoluteの基準は
　.workDetail__mainSlide（base側で`position: relative;`。SPでは4:3フレームを
　使わないため`.workDetail__mainSlide{ height: auto; }`と画像自身の高さに
　追従するが、position:relativeのコンテナ自体はPCと変わらないため、この
　キャプションは常にその画像自身の右下に重なる。取得元データ（WordPress
　メディアの既存「キャプション」）・空キャプション時に<span>ごと出力しない
　仕様はPHP側（single.php）のまま変更していない）
---------------------------------------------------- */
.workDetail__mainCaption{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 10px;
    bottom: 10px;
    height: 30px;
    padding-right: 1.0769em;
    padding-left: 1.0769em;
    border-radius: 15px;
    background: rgba(0,0,0,0.4);
    font-size: 1.3rem;
    color: var(--color-white);
}
.workDetail__mainCaption:empty{ display: none; }

/* workDetail__thumbList（PC専用。2026-09改修でSPは非表示に変更）
　列数はPC6列（Figma node 344:1559実測）。
　PCのみサムネイル一覧を縦スクロールにし、ページ全体は伸ばさない
　（2026-09更新：表示領域を「4行分」に変更。4行以内なら内部スクロール
　なし、5行目以降が発生する場合のみ4行分の高さで固定して内部スクロール
　にする。旧仕様「2.5行」は廃止）。
　SPは「メイン画像切替に連動するサムネイル」という役割自体をやめ、
　.workDetail__mainSlider側で全画像を縦積み表示する仕様に変更したため、
　SPではこの一覧全体をdisplay:noneにする（旧仕様「SPは4列のまま全件を
　ページスクロールで見せる」は廃止。マークアップはPCと共用のまま
　変更していない＝不要なHTML重複を増やさず、非表示化のみで対応）。
---------------------------------------------------- */
.workDetail__thumbList{
    --thumbGap: 0.5em;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--thumbGap);
    overscroll-behavior: contain;
}
@media print, screen and (min-width: 768px){
    /* PCのみ内部スクロールにする。スクロールバーはFigma上でも素朴な
       ブラウザ標準スクロールバーの画像（node 949:311）が置かれているだけで、
       独自デザインの指定ではなかったため、scrollbar-width/-color・
       ::-webkit-scrollbarのカスタム指定は行わず、標準サイズのまま使う。
       右端サムネイルとスクロールバーの間隔は、Figma実測でもサムネイル間
       gap（8px）と同じだったため、別の値を新設せず同じ--thumbGapを
       padding-rightに使い回す（マジックナンバーの二重管理を避ける） */
    .workDetail__thumbList{
        margin-top: 0.75em;
        overflow-y: auto;
        padding-right: var(--thumbGap);
    }
    /* 4行分＋行間gap3つ分の高さを算出（.workDetail__gallery幅645px基準、
       6列。固定値を決め打ちせず、実際の列幅・gapから計算する）：
       列幅 = (645px − padding-right8px − gap8px×5列分) ÷ 6列
            = (645px − 8px − 40px) ÷ 6 = 99.5px
       行高 = 列幅 × サムネイル縦横比(105/154) ≒ 67.8409px
       4行分＋gap3つ分 = 行高×4 + gap8px×3 ≒ 295.36px
       （+1pxはブラウザのgrid自動行高計算とこのcalc()の丸め誤差を吸収する
       安全マージン。4行がちょうど収まり、5行目が見えたり4行目が
       途切れたりしないようにする。calc()にしているのは、列幅・gapを
       変更した際に手計算のやり直し・値のズレが発生しないようにするため） */
    .workDetail__thumbList{ max-height: calc(99.5px * 105 / 154 * 4 + 8px * 3 + 1px); }
}
@media screen and (max-width: 767px){
    /* SPはサムネイル一覧・PREV/NEXT・スライド切替を使用しない仕様のため
       非表示にする（worksDetailGallery.jsのresponsive設定でSlick自体も
       unslickされ、サムネイルクリックによる画像切替は機能しなくなる） */
    .workDetail__thumbList{ display: none; }
}

/* workDetail__thumbBtn
---------------------------------------------------- */
.workDetail__thumbBtn{
    display: block;
    overflow: hidden;
    width: 100%;
    /* Figma実測：PC(154:105相当)・SP(92:62相当)ともほぼ同じ横長比率で、
       以前のSP側「正方形」指定はFigma実測と異なっていたため撤去し、
       PC/SP共通のこの比率のみを使用する */
    aspect-ratio: 154 / 105;
    opacity: 0.5;
    transition: opacity var(--transition), outline-color var(--transition);
}
.workDetail__thumbBtn img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.workDetail__thumbBtn:hover{ opacity: 0.85; }
/* 選択中サムネイルの罫線（Figma node 948:281実測：border-3 #385599＝
   var(--color-primary)の枠線のみの矩形が、選択中サムネイルと全く同じ
   外寸で重ねて置かれていた＝内側罫線）。
   以前はbox-shadow:insetで実装していたが、実写真（<img width:100%;
   height:100%;object-fit:cover>）が読み込まれると、box-shadowは要素自身の
   背景と同じ描画段階で塗られるため、その上に重なる子要素（img）に完全に
   隠れてしまい実表示で罫線が見えなくなっていた（ローカル検証では画像が
   https/httpの証明書問題で読み込めず素通しになっていたため気づけなかった。
   実画像をdata URIで差し替えて確認し発覚）。
   outlineは仕様上、要素自身の子孫がすべて描画された後の最終段階で
   常に上から描かれるため、この問題が起きない。また、
   .workDetail__thumbBtnのoverflow:hiddenは要素自身のoutlineをクリップしない
   （overflowは子孫のはみ出しをクリップするためのプロパティで、要素自身の
   outlineには影響しない）。box-shadowと同じ「内側」の見た目にするため
   outline-offsetを線幅と同じ-3pxにして内側へ寄せる（outlineはbox-shadowと
   同様レイアウト・グリッド幅・gapに一切影響しない） */
.workDetail__thumbBtn.is-active{
    opacity: 1;
    outline: 3px solid var(--color-primary);
    outline-offset: -3px;
}

/* workDetail__meta
---------------------------------------------------- */
.workDetail__meta{ min-width: 0; flex: 1; }

/* workDetail__desc
---------------------------------------------------- */
.workDetail__desc{
    line-height: 1.667;
    letter-spacing: 0.03em;
    font-size: 2.4rem;
    color: #222;
}
@media screen and (max-width: 767px){
    .workDetail__desc{ font-size: 3.8462vw; }
}

/* workDetail__table
---------------------------------------------------- */
.workDetail__table{ margin-top: 2.5em; }
@media screen and (max-width: 767px){
    /* SPは行の下端に罫線を引く仕様のため、リスト先頭にのみ上端の罫線を別途追加する */
    .workDetail__table{ margin-top: 6.1538vw; border-top: 1px solid #dedede; }
}

/* workDetail__row
---------------------------------------------------- */
.workDetail__row{
    display: flex;
    align-items: baseline;
}
.workDetail__row dt{
    flex-shrink: 0;
    color: #242424;
}
.workDetail__row dd{
    color: #242424;
}
@media print, screen and (min-width: 768px){
    /* dtは固定幅6emの列としてdd開始位置を揃えるため、gapは0
       （Figma実測：dt列幅90px＝dd開始位置と一致、追加のgapなし） */
    .workDetail__row{
        gap: 0;
        border-top: 1px solid #bac6cb;
        padding-top: 1.25em;
        padding-bottom: 1.25em;
    }
    .workDetail__row dt,
    .workDetail__row dd{ font-size: 1.5rem; }
    .workDetail__row dt{ width: 6em; }
}
@media screen and (max-width: 767px){
    /* Figma SPはdt/ddで文字サイズ・太さが異なり、罫線は各行下端＋リスト上端に表示 */
    .workDetail__row{
        gap: 4.1026vw;
        border-top: none;
        border-bottom: 1px solid #dedede;
        padding-top: 3.5897vw;
        padding-bottom: 3.5897vw;
    }
    .workDetail__row dt{ width: 90px; font-size: 3.5897vw; font-weight: 700; }
    .workDetail__row dd{ font-size: 4.1026vw; }
}

/* workDetail__backWrap
---------------------------------------------------- */
.workDetail__backWrap{
    margin-top: 3.75em;
    text-align: center;
}
@media screen and (max-width: 767px){
    .workDetail__backWrap{ margin-top: 10.2564vw; }
}

/* workDetail__backBtn
---------------------------------------------------- */
.workDetail__backBtn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5333em;
    transition: opacity var(--transition);
    width: 280px;
    height: 56px;
    border-radius: 4px;
    background: var(--color-primary);
    letter-spacing: 0.03em;
    font-size: 1.5rem;
    color: var(--color-white);
}
.workDetail__backBtn:hover{ opacity: 0.85; }
.workDetail__backBtn img{ flex-shrink: 0; width: 15px; height: 15px; }
@media screen and (max-width: 767px){
    .workDetail__backBtn{ width: 100%; max-width: 280px; height: 56px; font-size: 3.8462vw; }
}


/* ######################################################################################

　RELATED CASE（関連する施工事例）

###################################################################################### */

/* ----- relatedCase ----- */
.relatedCase{ background: #eff1f4; }

@media print, screen and (min-width: 768px){
    /* Figma実測：セクション上端から見出しまで97px、カード下端からセクション
       下端まで96px（旧実装の80pxは詰まりすぎていた） */
    .relatedCase{ padding-top: 6.0625em; padding-bottom: 6em; }
}
@media screen and (max-width: 767px){
    .relatedCase{ padding-top: 14.359vw; padding-bottom: 14.359vw; }
}

/* relatedCase__inner
---------------------------------------------------- */
.relatedCase__inner{ text-align: center; }
@media print, screen and (min-width: 768px){
    .relatedCase__inner.contents{ max-width: 1160px; }
}

/* relatedCase__heading
---------------------------------------------------- */
.relatedCase__heading{
    font-family: var(--font-serif);
    font-weight: 900;
    letter-spacing: 0.05em;
    /* line-height未指定だとbody継承の1.8になり、Figma実測（49px÷34px）より
       行高が膨らむため固定する */
    line-height: 1.44;
    font-size: 3.4rem;
    color: #242424;
}
@media screen and (max-width: 767px){
    .relatedCase__heading{ line-height: normal; font-size: 5.641vw; }
}

/* relatedCase__headingSub
---------------------------------------------------- */
.relatedCase__headingSub{
    display: block;
    margin-top: 0.6154em;
    letter-spacing: 0.05em;
    /* line-height未指定だとbody継承の1.8になり、Figma実測（16px÷13px）より
       行高が膨らむため固定する */
    line-height: 1.23;
    font-size: 1.3rem;
    color: #242424;
}
@media screen and (max-width: 767px){
    /* Figma実測：SPは14px・見出し（RELATED CASE）との間隔8px（PCのclampのままだと
       極端に小さくなってしまうため固定値に上書き） */
    .relatedCase__headingSub{ margin-top: 2.0513vw; line-height: normal; font-size: 3.5897vw; }
}

/* relatedCase__sliderWrap
---------------------------------------------------- */
.relatedCase__sliderWrap{
    position: relative;
    /* Figma実測：見出し下からカード上端まで36px（旧32px） */
    margin-top: 2.25em;
}
@media print, screen and (min-width: 768px){
    .relatedCase__sliderWrap{ padding-right: 2.5em; padding-left: 2.5em; }
}

/* relatedCase__list
---------------------------------------------------- */
.relatedCase__list:not(.slick-initialized){
    display: flex;
    /* 既定は表示状態（3件以下はSlickを初期化しないため、常にこのまま確定する） */
    opacity: 1;
}
@media print, screen and (min-width: 768px){
    /* Figma実測：カード間の横gap35px（旧30px） */
    .relatedCase__list:not(.slick-initialized){ gap: 2.1875em; }
    /* 4件以上（＝Slick初期化対象）の場合のみ、初期化直前のちらつきを防ぐため
       一瞬opacity:0にする。JS未実行・エラー時にも消えたままにならないよう、
       アニメーションで一定時間後に強制的に再表示するフォールバックを設ける */
    .relatedCase__list:has(> :nth-child(4)):not(.slick-initialized){
        opacity: 0;
        animation: relatedCaseListFallbackShow 0s 1.2s forwards;
    }
}
@media screen and (max-width: 767px){
    /* SPはSlickを初期化しない（unslick）ため、常にこの縦並び表示のまま
       確定する。PC用のFOUC防止opacity:0を打ち消して表示する */
    .relatedCase__list:not(.slick-initialized){ flex-direction: column; gap: 8.2051vw; opacity: 1; }
}
@keyframes relatedCaseListFallbackShow{
    to{ opacity: 1; }
}
.relatedCase__list.slick-initialized{
    opacity: 1;
    transition: opacity 0.3s ease;
}
.relatedCase__list.slick-initialized{ margin-right: clamp(-0.9375em, -1vw, -0.48em); margin-left: clamp(-0.9375em, -1vw, -0.48em); }
.relatedCase__list .slick-track{ display: flex; align-items: stretch; }
/* slickは各<li>（.relatedCaseCard）に直接.slick-slideクラスを付与し、
   ラップ用の<div>は生成しない。カード間の余白は.slick-slide自身への
   padding + box-sizing:border-boxで確保する（.slick-slide > divは実在しないため無効） */
.relatedCase__list .slick-slide{
    box-sizing: border-box;
    height: auto;
    /* 左右合計でrelatedCase__list gapと同じ35px相当になるよう、片側17.5px分 */
    padding-right: 1.09375em;
    padding-left: 1.09375em;
}

/* relatedCaseCard
---------------------------------------------------- */
.relatedCaseCard{ text-align: left; }

/* relatedCaseCard__link
---------------------------------------------------- */
.relatedCaseCard__link{ display: block; width: 100%; }

/* relatedCaseCard__figure
---------------------------------------------------- */
.relatedCaseCard__figure{
    overflow: hidden;
    aspect-ratio: 300 / 200;
}
.relatedCaseCard__photo{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.relatedCaseCard__link:hover .relatedCaseCard__photo{ transform: scale(1.04); }

/* relatedCaseCard__body
---------------------------------------------------- */
.relatedCaseCard__body{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75em;
    margin-top: 0.5em;
}

/* relatedCaseCard__tag
---------------------------------------------------- */
.relatedCaseCard__tag{
    letter-spacing: 0.05em;
    color: var(--color-primary);
}
@media print, screen and (min-width: 768px){
    .relatedCaseCard__tag{ font-size: 1.3rem; }
}
@media screen and (max-width: 767px){
    /* Figma SPはPCと異なり角丸ピル型バッジ表示（worksCard__tagと同じ意匠） */
    .relatedCaseCard__tag{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 6.6667vw;
        padding-right: 3.0769vw;
        padding-left: 3.0769vw;
        border-radius: 999px;
        background: rgba(56, 85, 153, 0.1);
        font-weight: 700;
        font-size: 3.0769vw;
    }
}

/* relatedCaseCard__title
---------------------------------------------------- */
.relatedCaseCard__title{
    margin-top: 0.2667em;
    color: #222;
}
@media print, screen and (min-width: 768px){
    /* Figma実測：15px文字に対し行高30px（比率2.0）。旧line-height:1.6（24px相当）は詰まりすぎ */
    .relatedCaseCard__title{ line-height: 2; font-size: 1.5rem; }
}
@media screen and (max-width: 767px){
    /* Figma実測：Bold・17px・line-height24px（PCのRegular・15pxとは別仕様） */
    .relatedCaseCard__title{ font-size: 4.359vw; font-weight: 700; line-height: 1.4118; }
}

/* relatedCaseCard__more（丸＋シェブロンをCSSで描画）
---------------------------------------------------- */
.relatedCaseCard__more{
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid #777777;
    border-radius: 50%;
    transition: background var(--transition), border-color var(--transition);
}
@media print, screen and (min-width: 768px){
    .relatedCaseCard__more{
        display: flex;
        width: 36px;
        height: 36px;
    }
}
@media screen and (max-width: 767px){
    /* Figma SPにはこのアイコンが存在しないため非表示 */
    .relatedCaseCard__more{ display: none; }
}
.relatedCaseCard__more::before{
    content: "";
    width: 6px;
    height: 6px;
    margin-left: -0.125em;
    border-top: 1.5px solid #242424;
    border-right: 1.5px solid #242424;
    transform: rotate(45deg);
}
.relatedCaseCard__link:hover .relatedCaseCard__more{
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.relatedCaseCard__link:hover .relatedCaseCard__more::before{ border-color: var(--color-white); }

/* relatedCase__list .slick-arrow（外側の前後矢印。CSSでシェブロン描画）
　disabled時のopacityのみ.workDetail__mainSlider .slick-arrow（メイン画像
　フレーム内側の前後矢印）と共用する。クリック領域サイズ（relatedCase側
　24×24、workDetail側35×35）・配置（top・left/right。フレーム基準か固定px
　基準かで前提が違うため個別指定）・シェブロン自体の形状／太さ／色／中央
　配置の実装方法（メイン画像側は白・2px・11×11、position:absolute+
   translate(-50%,-50%)で中央配置。relatedCase側は下記の通りグレー・2px・
　14.14×14.14のまま、rotateのみでflexセンタリングに任せる）・背景円の有無
　（workDetail側のみ）は個別指定とし、その差分はそれぞれの箇所
　（.workDetail__mainSlider側は上のブロック）で追加指定する
---------------------------------------------------- */
.relatedCase__sliderWrap .slick-arrow,
.workDetail__mainSlider .slick-arrow{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 2;
}
/* Figma実測：カード画像(200px)の垂直中央 */
.relatedCase__sliderWrap .slick-arrow{ top: 100px; transform: translateY(-50%); width: 24px; height: 24px; }
/* Figma実測：矢印(見た目のV字)からカード画像端まで45px。left:0/right:0基準では
   実測でカードと約7px重なっていたため、その分を含めて45px相当まで押し出す */
.relatedCase__sliderWrap .slick-prev{ left: -52px; }
.relatedCase__sliderWrap .slick-next{ right: -52px; }
.relatedCase__sliderWrap .slick-arrow:before{
    content: "";
    /* Figma実測（node 344:491 arw_ico10 / SVG viewBox 22×12、stroke-width 2px）：
       配置後の実寸（90°回転済みインスタンス）は奥行き10px×開き20px。
       border-top+border-rightを45°回転して作るV字は、正方形の一辺Lに対し
       実際に見える奥行きがL×cos45°（＝L/√2）に縮むため、奥行き10pxを得るには
       一辺Lを10×√2≒14.14pxにする必要がある（旧10pxは正方形の辺の値を
       そのままFigma実寸と誤認しており、実際の見た目は奥行き7.07px×開き14.14pxと
       小さすぎた）。回転の中心は要素自身の中心（transform-origin既定値）のため、
       このサイズ変更だけでは矢印の中心位置はズレない */
    width: 14.14px;
    height: 14.14px;
    border-top: 2px solid #777777;
    border-right: 2px solid #777777;
    opacity: 1;
}
.relatedCase__sliderWrap .slick-prev:before{ transform: rotate(-135deg); }
.relatedCase__sliderWrap .slick-next:before{ transform: rotate(45deg); }
.relatedCase__sliderWrap .slick-arrow.slick-disabled,
.workDetail__mainSlider .slick-arrow.slick-disabled{ opacity: 0.3; }
@media screen and (max-width: 767px){
    .relatedCase__sliderWrap{ padding-right: 0; padding-left: 0; }
    .relatedCase__sliderWrap .slick-arrow{ display: none !important; }
}