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


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

　WORKS LEAD（リード文）

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

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

@media print, screen and (min-width: 768px){
    /* padding-bottomはFigma実測（リード文末尾～施工事例見出し間 61px）に合わせ、
       次セクション.worksListのpadding-topは0にして二重加算を避ける */
    .worksLead{ padding-top: 5em; padding-bottom: 3.8125em; }
}
@media screen and (max-width: 767px){
    /* SPは上限固定禁止のため、clamp()の上限をやめvwのみで常に比例縮小する。
       padding-bottomはFigma実測（Introのpb-40px）に合わせる */
    .worksLead{ padding-top: 12.3077vw; padding-bottom: 10.2564vw; }
}

/* worksLead__inner
---------------------------------------------------- */
.worksLead__inner{ text-align: center; }

/* worksLead__heading（共通部分は widget/sectionHeading.css の .sectionHeading）
---------------------------------------------------- */
.worksLead__heading{
    --sectionHeading-letterSpacing: 0.05em;
    --sectionHeading-color: #242424;
    --sectionHeading-lineHeight-pc: 1.44;
    /* Figma SPは2行折り返し前提でPCより広いline-height（36px/22px）を明示指定 */
    --sectionHeading-lineHeight-sp: 1.6364;
}

/* worksLead__text（共通部分は widget/sectionHeading.css の .sectionLead）
---------------------------------------------------- */
.worksLead__text{
    --sectionLead-marginTop-pc: 1.6em;
    --sectionLead-lineHeight-pc: 1.6;
    --sectionLead-lineHeight-sp: 1.6;
    --sectionLead-letterSpacing: 0.01em;
    --sectionLead-color: #242424;
    /* margin-topはFigma実測（見出し～本文間gap 20px/390）に合わせたSP専用比率 */
    --sectionLead-fontSize-sp: 3.3333vw;
    --sectionLead-textAlign-sp: left;
}


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

　WORKS LIST（サイドバー＋カードグリッド）

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

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

@media print, screen and (min-width: 768px){
    /* padding-topは.worksLeadのpadding-bottomに統合したため0（Figma実測でも
       Filter側にはpadding-topがなく、リード文側の余白のみで間隔を構成している） */
    .worksList{ padding-top: 0; padding-bottom: 5em; }
}
@media screen and (max-width: 767px){
    /* SPは上限固定禁止のため常にvwのみで比例縮小する（他のSP指定と同様） */
    .worksList{ padding-top: 0; padding-bottom: 14.359vw; }
}

/* worksList__row（サイドバー＋カードグリッドの横並び行）
---------------------------------------------------- */
.worksList__row{
    display: flex;
    align-items: flex-start;
}
@media print, screen and (min-width: 768px){
    .worksList__row{ gap: 3.125em; }
}
@media screen and (max-width: 767px){
    /* SPは上限固定禁止のためvwのみで比例縮小 */
    .worksList__row{ flex-direction: column; gap: 8.2051vw; }
}


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

　worksFilter（サイドバーカテゴリ）

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

.worksFilter{ flex-shrink: 0; }
@media print, screen and (min-width: 768px){
    .worksFilter{ width: 180px; }
}
@media screen and (max-width: 767px){
    .worksFilter{ width: 100%; }
}

/* worksFilter__heading
---------------------------------------------------- */
.worksFilter__heading{
    line-height: 1.44;
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 2.2rem;
    color: #242424;
}
@media screen and (max-width: 767px){
    /* Figma実測：22px（PC・SP共通サイズ） */
    .worksFilter__heading{ font-size: 5.641vw; }
}

/* worksFilter__heading（カテゴリ別一覧のカテゴリ名見出しとしての再利用）
   .worksList__inner直下（サイドバー.worksFilter外）に出た場合のみ、
   本来.worksFilter__list側が担っていたmargin-top（見出し～次要素間隔）と
   同じ値を、見出し自身のmargin-bottomとして持たせる。デザイン
   （文字サイズ・font-weight・line-height・色・装飾）は.worksFilter__heading
   本体の指定をそのまま共用し、ここでは間隔のみを追加する */
.worksList__inner > .worksFilter__heading{ margin-bottom: 3.25em; }
@media screen and (max-width: 767px){
    .worksList__inner > .worksFilter__heading{ margin-bottom: 5.1282vw; }
}

/* worksFilter__heading::after（見出し下のツートン下線。PCのみ・Figmaにマークアップ
   なしのCSS実装：全幅1pxの薄いグレー線の上に、左半分だけ2px太さのプライマリ色を
   重ねる。SPはFigma上にこの下線が存在しないため出さない） */
@media print, screen and (min-width: 768px){
    .worksFilter__heading::after{
        content: "";
        display: block;
        margin-top: 1rem; /* Figma実測10px */
        width: 100%;
        height: 0.2rem; /* Figma実測2px */
        background-image:
            linear-gradient(to right, var(--color-primary) 50%, transparent 50%),
            linear-gradient(to bottom, transparent 50%, #dadddf 50%);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

/* worksFilter__list
---------------------------------------------------- */
.worksFilter__list{
    display: flex;
    flex-direction: column;
}
@media print, screen and (min-width: 768px){
    /* gapはFigma実測の行間（項目上端どうしの距離35px）をそのまま使っていたが、
       これは「文字の行の高さ込みの距離」であり、実装側のリンク自体の高さ
       （font-size:15pxの行ボックスで実測27px）を差し引いていなかったため、
       行間が本来の約2.6倍（62px）に広がっていた。35px − 27px = 8px を
       gapの正しい値とする */
    .worksFilter__list{ margin-top: 3.25em; gap: 0.5em; }
}
@media screen and (max-width: 767px){
    /* Figma SPは折り返しタグではなく、上下境界線付きの縦一列リスト */
    .worksFilter__list{
        flex-direction: column;
        margin-top: 5.1282vw;
        border-top: 1px solid #dedede;
    }
}

/* worksFilter__item
---------------------------------------------------- */
@media screen and (max-width: 767px){
    .worksFilter__item{ border-bottom: 1px solid #dedede; }
}

/* worksFilter__link
---------------------------------------------------- */
.worksFilter__link{
    display: flex;
    align-items: center;
    letter-spacing: 0.02em;
    font-size: 1.5rem;
    color: #242424;
    transition: color var(--transition);
}
.worksFilter__link:hover,
.worksFilter__link:focus-visible{ color: var(--color-primary); }
.worksFilter__link::before{
    content: "";
    flex-shrink: 0;
    display: inline-block;
    width: 12px;
    height: 1px;
    margin-right: 0.6667em;
    background: #242424;
    transition: background var(--transition);
}
.worksFilter__link:hover::before,
.worksFilter__link:focus-visible::before{ background: var(--color-primary); }
@media screen and (max-width: 767px){
    /* Figma SPはダッシュ装飾のない太字・紺色テキストの境界線リスト行 */
    .worksFilter__link{
        padding-top: 3.5897vw;
        padding-bottom: 3.5897vw;
        font-size: 4.1026vw;
        font-weight: 700;
        letter-spacing: normal;
        color: #1b3d8c;
    }
    .worksFilter__link::before{ display: none; }
}


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

　worksGrid（カードグリッド）

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

.worksFilter + * .worksFilter__heading {
    margin-bottom: 2.6em;
}

.worksGrid{
    flex: 1;
    min-width: 0;
    display: grid;
}
@media print, screen and (min-width: 768px){
    .worksGrid{
        grid-template-columns: repeat(3, 1fr);
        column-gap: 2.1875em;
        row-gap: 2.5em;
    }
}
@media screen and (max-width: 767px){
    .worksGrid{ grid-template-columns: 1fr; row-gap: 8.2051vw; }
}

/* worksCard
　.worksGridの各<li>はグリッドの仕様でセルの高さいっぱいにストレッチされる。
　その高さを実際に使い切って矢印（.worksCard__row）を常にカード下端へ
　揃えるため、リンク全体とworksCard__bodyをflexカラムにし、
　worksCard__rowをmargin-top:autoで下端へ押し出す（タイトル行数・
　タグ数によらず基準位置が動かないようにする。カードごとの個別指定はしない）
---------------------------------------------------- */
.worksCard__link{ display: flex; flex-direction: column; height: 100%; }

/* worksCard__figure
---------------------------------------------------- */
.worksCard__figure{
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 2;
}
.worksCard__photo{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* transform単体のみ。scaleは軽め(1.04)・durationは0.3sで「軽く自然に反応する」動きにする */
    transition: transform 0.3s ease;
}
.worksCard__link:hover .worksCard__photo,
.worksCard__link:focus-visible .worksCard__photo{ transform: scale(1.04); }
/* 暗転は画像自体にfilter:brightness()をかけない。filterはtransformと違い
   コンポジタだけで完結せず毎フレーム再ラスタライズが発生しやすく、
   同時に動くscaleと合わさってカクつきの原因になっていた。
   代わりに黒の半透明レイヤーをopacityで重ねる（opacityはtransformと同じく
   コンポジタのみで滑らかに動く） */
.worksCard__figure::after{
    content: "";
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.worksCard__link:hover .worksCard__figure::after,
.worksCard__link:focus-visible .worksCard__figure::after{ opacity: 0.15; }

/* worksCard__body
---------------------------------------------------- */
.worksCard__body{
    display: flex;
    flex: 1;
    flex-direction: column;
    padding-top: 1.125em;
}
@media screen and (max-width: 767px){
    .worksCard__body{ padding-top: 4.1026vw; }
}

/* worksCard__tagList（カテゴリタグの行）
　.worksCard__body は矢印をカード下端に揃えるためdisplay:flex;flex-direction:columnに
　なっており、直接の子要素はデフォルトのalign-items:stretchで幅いっぱいに
　伸びてしまう。タグをこのラッパーで包み、中のタグ自体は伸ばさずに
　左詰め・複数タグの横並び・折り返しができるようにする。
---------------------------------------------------- */
.worksCard__tagList{
    display: flex;
    flex-wrap: wrap;
}

/* worksCard__tag（角丸ピル型タグ）
---------------------------------------------------- */
.worksCard__tag{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding-right: 1.3333em;
    padding-left: 1.3333em;
    border-radius: 999px;
    background: rgba(56, 85, 153, 0.1);
    font-weight: 700;
    letter-spacing: 0.05em;
    font-size: 1.2rem;
    color: var(--color-primary);
    white-space: nowrap;
    /* カテゴリを複数選択した投稿はタグが複数並ぶため、タグ間の隙間と
       折り返し時の縦の隙間を確保する（単数の場合は末尾の余白のみ） */
    margin: 0 0.4em 0.4em 0;
}
@media screen and (max-width: 767px){
    /* Figma実測：高さ26px・左右padding16px・文字12pxはPCと同一サイズ（縮小なし） */
    .worksCard__tag{
        height: 6.6667vw;
        padding-right: 4.1026vw;
        padding-left: 4.1026vw;
        font-size: 3.0769vw;
    }
}

/* worksCard__row（タイトル＋詳細アイコンを横並び）
---------------------------------------------------- */
.worksCard__row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75em;
    /* タグ有無・タイトル行数に関わらず常にカード下端に揃える */
    margin-top: auto;
    padding-top: 0.375em;
}
@media screen and (max-width: 767px){
    .worksCard__row{ gap: 3.0769vw; margin-top: 1.5385vw; }
}

/* worksCard__title
---------------------------------------------------- */
.worksCard__title{
    line-height: 1.7;
    letter-spacing: 0.02em;
    font-size: 1.5rem;
    color: #222;
    transition: color var(--transition);
}
.worksCard__link:hover .worksCard__title,
.worksCard__link:focus-visible .worksCard__title{ color: var(--color-primary); }
@media screen and (max-width: 767px){
    /* Figma SPはBold・17px・line-height24px（PCのRegular・15pxとは別仕様） */
    .worksCard__title{ font-size: 4.359vw; font-weight: 700; line-height: 1.4118; }
}

/* worksCard__more（詳細丸矢印アイコン）
---------------------------------------------------- */
.worksCard__more{
    flex-shrink: 0;
    display: flex;
    transition: opacity var(--transition);
}
.worksCard__more img{
    width: 36px;
    height: 36px;
}
@media screen and (max-width: 767px){
    /* Figma実測：36px（PCと同一サイズ・縮小なし） */
    .worksCard__more img{ width: 9.2308vw; height: 9.2308vw; }
}
.worksCard__link:hover .worksCard__more,
.worksCard__link:focus-visible .worksCard__more{ opacity: 0.6; }