/* Works専用。TOPの共通部品・アニメーションを継承します。 */
.works-page { background: linear-gradient(100deg, #12345a99, #010615bb 70%), url('images/top/top9.webp') center top / cover no-repeat; }
.works-hero { position: relative; background: #020820; }
.works-hero-art { display: block; width: 100%; height: auto; }
.works-hero-copy { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.works-inner { width: 78%; max-width: 1500px; }
.works-archive { padding: 5% 0 6%; }
.works-archive-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 30px; }
.works-item { min-width: 0; border: 1px solid #a6b4cf; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg,#08122a,#000); }
.works-item > a { display: block; height: 100%; }
.works-item-image { aspect-ratio: 1.68; overflow: hidden; background: #06142d; }
.works-item-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.works-no-image { height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #cbd9ec; font-size: 36px; font-family: Georgia,serif; }
.works-no-image > span { font: 14px Arial,sans-serif; }
.works-item-body { padding: 20px 18px; }
.works-item-body h2 { font-size: clamp(16px,1.4vw,24px); letter-spacing: .02em; line-height: 1.7; overflow-wrap: anywhere; }
.works-item-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.works-item-bottom p { font-size: 13px; color: #99daff; }
.works-card-more { margin-left: auto; border: 1px solid #8194b5; border-radius: 30px; padding: 2px 12px; background: linear-gradient(100deg,#073695,#02091b); white-space: nowrap; font-size: 12px; }
.works-card-more > span { display: inline-block; margin-left: 8px; }
.works-load-more-wrap { text-align: center; margin-top: 65px; }
.works-load-more[aria-disabled="true"] { opacity: .65; cursor: progress; }
.works-load-status { min-height: 1.8em; text-align: center; font-size: 14px; margin-top: 18px; }
.works-detail { padding: 5% 0 6%; }
.works-category { display: inline-block; background: #020814; border: 1px solid #65728b; padding: 2px 16px; border-radius: 30px; font-size: 13px; margin-bottom: 18px; }
.works-description h1 { font-size: clamp(26px,2.8vw,48px); line-height: 1.5; margin-bottom: 18px; overflow-wrap: anywhere; }
.works-richtext { max-width: 950px; font-size: 16px; line-height: 2; overflow-wrap: anywhere; }
.works-richtext h2 { font-size: 28px; line-height: 1.5; margin: 28px 0 14px; }
.works-richtext h3 { font-size: 22px; margin: 24px 0 12px; }
.works-richtext a { text-decoration: underline; text-underline-offset: 3px; }
.works-richtext figure { max-width: 100%; margin: 24px 0; }
.works-richtext table { border-collapse: collapse; width: 100%; }
.works-richtext td,.works-richtext th { border: 1px solid #7c8caa; padding: 10px; }
.works-gallery { margin-top: 45px; }
.works-gallery-track { display: flex; gap: 28px; padding: 0 11% 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 11%; scrollbar-width: thin; scrollbar-color: #5e83b6 #03122b; }
.works-slide { flex: 0 0 48%; min-width: 0; margin: 0; scroll-snap-align: start; }
.works-slide > img { display: block; width: 100%; height: auto; aspect-ratio: 1.68; object-fit: contain; background: #020819; }
.works-slide figcaption { font-size: 14px; padding: 8px 0; color: #cbd8e9; }
.works-gallery-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 14px; }
.works-gallery-controls[hidden] { display: none; }
.works-gallery-controls button { color: #fff; background: transparent; border: 1px solid #8da4c2; border-radius: 50%; width: 42px; height: 42px; padding: 0; }
.works-gallery-controls button:disabled { opacity: .35; cursor: default; }
.works-gallery-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 65%; }
.works-gallery-dots button { width: 28px; height: 32px; border: 0; border-radius: 0; position: relative; }
.works-gallery-dots button::after { content: ''; position: absolute; width: 7px; height: 7px; top: 50%; left: 50%; transform: translate(-50%,-50%); border: 1px solid white; border-radius: 50%; background: transparent; }
.works-gallery-dots button[aria-current="true"]::after { background: #fff; }
.works-back { text-align: center; margin-top: 48px; }
.works-back a { display: inline-block; width: 210px; max-width: 60%; transition: transform .25s; }
.works-back img { display: block; width: 100%; }
.works-page .contact { margin-top: 0; }
@media (hover:hover) and (pointer:fine) {
    .works-item a:hover .works-item-image img { transform: scale(1.04); }
    .works-back a:hover { transform: translateY(-4px); }
}
@media (max-width:1000px) {
    .works-inner { width: 88%; }
    .works-archive-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
    .works-gallery-track { padding-left: 6%; padding-right: 6%; scroll-padding-left: 6%; gap: 20px; }
    .works-slide { flex-basis: 72%; }
}
@media (max-width:700px) {
    .works-hero { min-height: 440px; background: #07152c url('images/works/hero.webp') right bottom / auto 100% no-repeat; }
    .works-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#041027f5,#03102488 70%,#02082033); }
    .works-hero-art { display: none; }
    .works-hero-copy { position: relative; width: auto; height: auto; margin: 0; clip: auto; white-space: normal; padding: 160px 6% 70px; }
    .works-hero-copy h1,.works-hero-title { font-size: 64px; font-style: italic; font-weight: bold; line-height: 1.2; }
    .works-hero-copy span { display: block; font-size: 24px; font-style: normal; font-weight: 500; margin: 16px 0; }
    .works-hero-copy > p:last-child { font-size: 15px; }
    .works-archive,.works-detail { padding: 45px 0 55px; }
    .works-gallery-track { gap: 16px; }
    .works-slide { flex-basis: 100%; }
    .works-load-more-wrap { margin-top: 35px; }
}
@media (max-width:600px) {
    .works-archive-grid { grid-template-columns: 1fr; gap: 25px; }
    .works-item-body h2 { font-size: 19px; }
}
@media (prefers-reduced-motion:reduce) {
    .works-item-image img,.works-back a { transition: none; }
    .works-item a:hover .works-item-image img,.works-back a:hover { transform: none; }
}

/* 実績写真のスワイプ・ドラッグ */
.works-gallery-track {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
}
.works-gallery-track.is-draggable {
    cursor: grab;
}
.works-gallery-track.is-draggable img {
    -webkit-user-drag: none;
    user-select: none;
}
.works-gallery-track.is-dragging {
    cursor: grabbing;
    user-select: none;
    scroll-snap-type: none;
    scroll-behavior: auto;
}

/* 一覧カード：浮き上がり・青い光・写真の拡大 */
.works-item {
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.works-item-image img {
    transition: transform .6s ease;
}
.works-card-more {
    transition: background .3s ease, border-color .3s ease;
}
.works-card-more > span {
    transition: transform .3s ease;
}
@media (hover: hover) and (pointer: fine) {
    .works-item:hover {
        transform: translateY(-6px);
        border-color: #61ccff;
        box-shadow: 0 12px 30px rgba(0, 150, 255, .22);
    }
    .works-item a:hover .works-item-image img {
        transform: scale(1.06);
    }
    .works-item:hover .works-card-more {
        background: #075bb6;
        border-color: #83d7ff;
    }
    .works-item:hover .works-card-more > span {
        transform: translateX(3px);
    }
}
.works-item:focus-within {
    border-color: #61ccff;
    box-shadow: 0 0 0 2px #61ccff;
}
@media (prefers-reduced-motion: reduce) {
    .works-item,
    .works-item-image img,
    .works-card-more,
    .works-card-more > span {
        transition: none;
    }
    .works-item:hover,
    .works-item a:hover .works-item-image img,
    .works-item:hover .works-card-more > span {
        transform: none;
    }
}


/* スクロールバーだけ非表示 */
.works-gallery-track {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.works-gallery-track::-webkit-scrollbar {
    display: none;
}