@charset "UTF-8";

/* =========================================================
   works.css - リノベーション事例
   ・before / after 画像 or 施工画像単体
   ・簡単な施工内容

   ※ 一覧は property.css と同じ「枠線の箱を縦に積む」型。
     見た目を変えるときは物件情報とセットで考えること。
========================================================= */

/* ※ 外側（セクション本体）が余白、内側（__inner）が max-width と中央寄せ。
   ※ 上下の余白はヘッダーの高さ（--header-height）に合わせる。
     トップのお知らせセクション（index.css の .sec-news-link）と同じ考え方。
     画面幅で変わる値なので、4rem（〜575px）・4.5rem（576px〜）・5.5rem（1025px〜）と
     自動で段階が付く。
   ※ ※重要※ 値の定義は common.css の :root。
     ヘッダーの高さを変えるとこのセクションの余白も変わる。
   ※ 地は暗いウォールナットの木目（dark-fine-wood-01-straight-walnut.webp）。
     以前は地を指定していなかった（body の白）。
     物件情報（property.css の .property）と同じく、繰り返して敷く。
     事例が増えてセクションが縦に長くなっても、木目が引き伸ばされない。
   ※ ※重要※ 1枚の大きさは 512px に指定する（以前は auto＝元の大きさ）。
     元の大きさのままだと、高解像度の画面では1ピクセルが2〜3倍に引き伸ばされ、
     細かい木目が拡大されて粗く見える。
     木目の細かさを変えるときはこの値を触る（小さくするほど細かくなる）。
     物件情報（property.css の .property）・お知らせ詳細（news.css の .news-detail）も同じ値なので、
     3ページをそろえて直す。
   ※ background-color は画像が読み込まれるまでの地。
   ※ ※重要※ 地が暗いので、木目の上に直接乗る要素（絞り込み・未登録の案内・
     0件の文言・ページ送り・カードの枠線）の色は、ファイル末尾の
     「暗い地向けの上書き」で白系にしている。 */
.works {
    padding-block: var(--header-height);
    padding-inline: var(--section-px);
    background-color: var(--color-bg-dark);
    background-image: url('../images/dark-fine-wood-01-straight-walnut.webp');
    background-size: 512px auto;
    background-position: left top;
    background-repeat: repeat;
}

.works__inner {
    width: 100%;
    max-width: var(--w-lg);
    margin-inline: auto;
}

/* ※ 768px未満（縦積み）は 576px（--w-sm）で止める。
     タブレット縦向き（576〜767px）でカードが広がりすぎないようにするため。
   ※ 576px未満では画面幅の方が狭いので、この指定は効かない。 */
@media (max-width: 767px) {
    .works__inner {
        max-width: var(--w-sm);
    }
}

/* ---------------------------------------------------------
   種別の絞り込み（property-filter と同じ型）
   ※ ※重要※ こちらは常に中央寄せ。
     物件情報（property-filter）は左寄せなので、両方を揃えるときは注意。
--------------------------------------------------------- */

.works-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: var(--spacing-lg);
}

.works-filter__item {
    display: inline-block;
    padding: 0.75rem 1.75rem;
    border: 1px solid var(--color-border);
    font-size: 0.825rem;
    letter-spacing: 0.06em;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

@media (min-width: 475px) {
    .works-filter__item {
        font-size: 0.875rem;
    }
}

.works-filter__item:hover {
    border-color: var(--color-primary);
}

.works-filter__item.is-current {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #FFFFFF;
}

/* ※ 768px未満はグリッドにする。
     flex の折り返しだと、1行目と最終行の項目数が揃わず、
     ボタンの幅も文字数でバラつくため。
   ※ 文字数の多い項目（住宅リフォームなど）が入るので2列。
     3列にすると狭い画面で折り返す。
   ※ ※重要※ この分岐は必ず .works-filter__item のベースの後ろに置くこと。
     詳細度が同じなので、前に置くとベースの padding に負ける。 */
@media (max-width: 767px) {
    .works-filter {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .works-filter__item {
        padding-inline: 0.5rem;
        text-align: center;
    }
}

/* ---------------------------------------------------------
   事例一覧
--------------------------------------------------------- */

/* ※ カードを並べる。
     ベース＝1列、768px以上＝2列、1025px以上＝3列。
   ※ カード同士の間は 2rem、1024px以上は 1.5rem（下の分岐）。以前は全幅 1.5rem。
   ※ ※重要※ 1枚のカードの中で Before / After を必ず横並びに保つ。
     3列だと写真1枚は小さくなるが、縦に積むと見比べにならない。 */
.works-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .works-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .works-list {
        gap: 1.5rem;
    }
}

@media (min-width: 1025px) {
    .works-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 0件のときの文言
   ※ 今は works.php が0件のとき一覧を出さず .works-empty を出すので、通常は使われない。
     万一空の一覧が出たときの保険として残している（物件情報と同じ）。
   ※ 列の中に入ると左寄りになるので、全列をまたぐ。 */
.works-list:empty::before {
    content: '該当する事例はありません。';
    grid-column: 1 / -1;
    display: block;
    padding-block: var(--spacing-xl);
    text-align: center;
    font-size: 0.9375rem;
    color: var(--color-text-light);
}

/* 登録がないときの案内（works.php の $worksEmpty）
   ※ 絞り込んだ種別が0件のときもこちら。文言に種別名が入る。
   ※ 罫線のボックス（デザイン案A）。最大幅は 576px（--w-sm）で中央に置く。
     物件情報の案内（property.css の .property-empty）と同じ形・同じ値。変えるときはセットで。
     ここは明るい地向けの色。暗い木目の地では、ファイル末尾の
     「暗い地向けの上書き」で枠線と文字を白系にしている。
   ※ 474px以下は左揃え、475px以上で中央揃え（下の分岐）。
     狭い幅では2行目が折り返すので、中央揃えだと行頭がそろわず読みにくい。
     475px はこの案内の分岐。サイト共通のブレークポイントではない。
   ※ 1行目（__title）は本文の色、2行目（__text）は一段小さく薄い色。 */
.works-empty {
    max-width: var(--w-sm);
    margin-inline: auto;
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--color-border);
    text-align: left;
}

@media (min-width: 475px) {
    .works-empty {
        text-align: center;
    }
}

.works-empty__title {
    font-size: 0.9375rem;
    line-height: 2;
    color: var(--color-text);
}

/* お知らせのアイコン（icon-information-thin-square.png）
   ※ 文字の一部として行の中に置く（inline-block）。色は currentColor で塗る（マスク）。
   ※ 縦の位置は、箱を1行分の高さにして行の上端に揃え、アイコンを上下中央に描いて合わせる。
   ※ 大きさ・間隔・位置の考え方は property.css の .property-empty__icon を参照。同じ値。変えるときはセットで。 */
.works-empty__icon {
    display: inline-block;
    width: 1.25em;
    height: 2em;
    height: 1lh;
    margin-right: 0.375em;
    vertical-align: top;
    background-color: currentColor;
    -webkit-mask: url('../images/icon-information-thin-square.png') center / 1.25em 1.25em no-repeat;
    mask: url('../images/icon-information-thin-square.png') center / 1.25em 1.25em no-repeat;
}

.works-empty__text {
    font-size: 0.875rem;
    line-height: 2;
    color: var(--color-text-light);
}

/* ※ 縦のフレックスにして、タイトルの黒い面（__body）で残りの高さを埋める。
     グリッドの同じ行でカードの高さが揃うので、タイトルが短いカードは
     黒い面の下にカードの白い地が見えてしまっていた。
   ※ 枠線はカテゴリの絞り込みボタン（.works-filter__item）と同じ色。
     明るい地では --color-border、暗い木目の地ではファイル末尾の上書きで白25%。
     一度外したが、絞り込みボタンと色をそろえて戻した。
   ※ カードの地は暗い色（以前は白）。
     白い地が写真や帯の端から細い線のように覗かないようにするため。 */
.works-item {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-dark);
}

/* ※ カードのフェードインはやめた（works.php の li から js-reveal を外した）。
     以前はここで nth-child ごとに transition-delay を付け、左上から順に出していた。
     半透明の途中で木目の地が透け、テクスチャの背景と相性が悪かったため。 */

/* ---- 写真（Before / After）----
   ※ 既定は After。1枚だけ見せて、ボタンで Before に切り替える。
     以前は2枚を横に並べていたが、3列のとき1枚が小さすぎた。
   ※ 切り替えはクロスフェード。位置が動かないので見比べやすい。 */

/* ※ 写真の箱の地は暗い色（以前は --color-border の薄いグレー）。
     明るい地だと、写真の端で細い明るい線に見えることがある。 */
.works-item__visual {
    background-color: var(--color-bg-dark);
}

/* ※ 写真を重ねて入れ替えるので、入れ物を位置の基準にする。
   ※ 地は暗い色（以前は --color-bg-light）。写真の読み込み中や端で明るい色が覗かないように。
   ※ 縦横比はベース（575px以下）4:3、576〜1024px 16:11、1025px以上 4:3（下の分岐）。
     以前は全幅 4:3。
     1025px以上は3列でカードが狭くなるので、4:3 に戻して写真の高さを確保する。
   ※ ※重要※ 1025px の分岐は 576px の分岐より後ろに置くこと（同じ詳細度）。 */
.works-item__photo {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--color-bg-dark);
}

@media (min-width: 576px) {
    .works-item__photo {
        aspect-ratio: 16 / 11;
    }
}

@media (min-width: 1025px) {
    .works-item__photo {
        aspect-ratio: 4 / 3;
    }
}

/* ※ 写真全体を押せるようにする（ライトボックスの起動）。
   ※ .is-active のものだけ見せる。
     visibility も切るのは、透明なままだと上に重なって押せてしまうため。
   ※ .is-active を付け外しするのは works.js。 */
.works-item__photo-link {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease;
}

.works-item__photo-link.is-active {
    opacity: 1;
    visibility: visible;
}

/* ---- ビフォー／アフターの切り替え（.works-item__photo--ba）----
   ※ クロスフェードではなく、トップの事例セクション（index.css の
     .sec-link--works .sec-link__media-item::after）と同じワイプで切り替える。
       ビフォー → アフター：アフターが左から右へ開く（トップと同じ向き）
       アフター → ビフォー：アフターが右から左へ閉じる（その逆）
   ※ 2枚とも常に表示して重ねる（下＝ビフォー、上＝アフター）。
     アフターの見えている範囲を clip-path で変える。
   ※ 切り替えの合図は写真の箱の .is-before（works.js が付け外しする）。
     JS が動かないときは付かないので、アフターのまま。
   ※ ※重要※ 速さ（1.1s）とイージングはトップと同じ値。変えるときはセットで直す。
   ※ 隠れている部分は押せない（clip-path は当たり判定も切る）。
     ビフォーを見ているときに押すと、ビフォーのライトボックスが開く。 */
.works-item__photo--ba .works-item__photo-link {
    opacity: 1;
    visibility: visible;
    transition: none;
}

.works-item__photo--ba .works-item__photo-link[data-view="before"] {
    z-index: 1;
}

.works-item__photo--ba .works-item__photo-link[data-view="after"] {
    z-index: 2;
    clip-path: inset(0 0 0 0);
    transition: clip-path 1.1s cubic-bezier(0.65, 0, 0.35, 1);
}

.works-item__photo--ba.is-before .works-item__photo-link[data-view="after"] {
    clip-path: inset(0 100% 0 0);
}

.works-item__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.works-item__photo--placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg-dark);
    font-family: var(--font-en);
    font-size: 1.75rem;
    font-weight: 300;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.28);
}

/* ---- Before / After の切り替えボタン ----
   ※ 写真の左上に2つ並べる。
   ※ 選んでいる方を濃い地＋金の文字にする。
     黒地なので金は --color-gold-bright。 */
.works-item__toggle {
    position: absolute;
    top: 0;
    left: 0;
    /* ※ ビフォー／アフターの写真（z-index 1・2）より前に出す。 */
    z-index: 3;
    display: flex;
}

.works-item__toggle-btn {
    padding: 0.375rem 0.875rem;
    background-color: rgba(0, 0, 0, 0.45);
    font-family: var(--font-en);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
}

.works-item__toggle-btn:hover {
    color: #FFFFFF;
}

.works-item__toggle-btn.is-active {
    background-color: rgba(0, 0, 0, 0.75);
    color: var(--color-gold-bright);
}

/* 写真が1枚だけのときのラベル（切り替えなし） */
.works-item__label {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    padding: 0.375rem 0.875rem;
    font-family: var(--font-en);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, 0.6);
}

@media (prefers-reduced-motion: reduce) {
    .works-item__photo-link,
    .works-item__photo--ba .works-item__photo-link[data-view="after"] { transition: none; }
}

/* ---- テキスト ---- */

/* ※ タイトルの面は黒地に白文字（以前はカードと同じ白地）。
   ※ 黒は --color-bg-dark（暗背景セクションと同じ色）。
   ※ 文字色は下の .works-item__title が持つ。
   ※ 余白は上下 1rem・左右 1.25rem、1200px以上（3列でカードが広くなる）は上下 1.125rem・左右 1.5rem。
     上下を左右より少し詰めて、写真の下の帯として見せる。
     以前は上下左右 1.25rem（その前は 1.5rem）。
   ※ flex: 1 でカードの残りの高さを受け持つ（.works-item のコメント参照）。 */
.works-item__body {
    flex: 1;
    padding: 1rem 1.25rem;
    background-color: var(--color-bg-dark);
}

@media (min-width: 1200px) {
    .works-item__body {
        padding: 1.125rem 1.5rem;
    }
}

/* ※ カテゴリの札。写真の左下に重ねる。
   ※ 切り替えボタン・「Photo」のラベルは左上なので、こちらは左下。
   ※ 写真の上に乗るので、地は黒で文字は白。
     寸法は切り替えボタンと揃えている。
   ※ ※重要※ 当たり判定を持たせない。下の写真は押すと
     ライトボックスが開くので、札で遮らないようにする。 */
.works-item__cat {
    position: absolute;
    left: 0;
    bottom: 0;
    /* ※ ビフォー／アフターの写真（z-index 1・2）より前に出す。 */
    z-index: 3;
    padding: 0.375rem 0.875rem;
    background-color: rgba(0, 0, 0, 0.6);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: #FFFFFF;
    pointer-events: none;
}

/* ※ ※重要※ タイトルは本文の書体（--font-family）にする。
     見出し用の明朝体（--font-heading）は、カードの小さい文字だと
     線が細くて読みづらい。一覧は文字数が多いので可読性を優先する。 */
.works-item__title {
    font-family: var(--font-family);
    /* ※ 0.9375rem、1200px以上（3列でカードが広くなる）は 1rem（下の分岐）。
         以前は全幅 0.95rem（その前は 1rem）。 */
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.06em;
    /* ※ 黒地の上なので白（以前は --color-title）。 */
    color: #FFFFFF;
}

@media (min-width: 1200px) {
    .works-item__title {
        font-size: 1rem;
    }
}

/* ---------------------------------------------------------
   ページ送り（property と同じ型）
--------------------------------------------------------- */

.works-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: var(--spacing-lg);
}

.works-pager__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--color-border);
    font-family: var(--font-num);
    font-size: 0.9375rem;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.works-pager__num:hover {
    border-color: var(--color-primary);
}

.works-pager__num.is-current {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #FFFFFF;
}

/* =========================================================
   暗い地向けの上書き
   ※ セクションの地を暗い木目にしたので、木目の上に直接乗る要素だけ色を変える。
     事例カードの中身（写真・黒い帯）はそのまま。
   ※ ※重要※ ここにまとめる。各ブロックに散らすと、地を白に戻すときに見落とす。
     地を白に戻すときは、.works の背景とこのブロックをまとめて消す。
   ※ 値は物件情報（property.css の同名のブロック）とそろえている。
     暗い面の枠線は白25%、選択中は白地に黒文字（黒地に黒い面を置くと溶けるため）。
========================================================= */

/* ---- 絞り込み ---- */
.works-filter__item {
    border-color: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
}

.works-filter__item:hover {
    border-color: rgba(255, 255, 255, 0.6);
}

.works-filter__item.is-current {
    background-color: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--color-primary);
}

/* ---- 未登録の案内・0件の文言 ---- */
.works-empty {
    border-color: rgba(255, 255, 255, 0.25);
}

.works-empty__title {
    color: #FFFFFF;
}

.works-empty__text,
.works-list:empty::before {
    color: rgba(255, 255, 255, 0.75);
}

/* ---- 事例カードの枠線 ----
   ※ 絞り込みボタン（上）と同じ白25%。変えるときはセットで直す。 */
.works-item {
    border-color: rgba(255, 255, 255, 0.25);
}

/* ---- ページ送り ---- */
.works-pager__num {
    border-color: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
}

.works-pager__num:hover {
    border-color: rgba(255, 255, 255, 0.6);
}

.works-pager__num.is-current {
    background-color: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--color-primary);
}