@charset "utf-8";

/* 個別ページ（/tenponaisou/case/{slug}/） */
.case-single .container {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 18px;
}

.case-single-header {
    padding: 24px 0 8px;
}

.case-single-header__content {
    display: grid;
    gap: 12px;
}

.case-single-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.case-single-badge {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--brand-green);
    color: #fff;
    font-size: 12px;
}

.case-single-meta__right {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.case-single-meta__tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.case-tag {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border: 1px solid #ddd;
    border-radius: 999px;
    background: #fff;
    color: var(--black);
    text-decoration: none;
    font-size: 12px;
}

.case-tag:hover {
    text-decoration: underline;
}

.case-single-meta__date {
    font-size: 12px;
    color: #6b7280;
}

.case-single-title {
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.4;
}

.case-slider {
    padding: 10px 0 0;
    /* PCの矢印スペース（外側配置用） */
    --case-slider-nav-space: 52px;
}

.case-slider + .case-slider {
    margin-top: 18px;
}

.case-slider .container {
    /* 画像の見た目サイズを変えずに、矢印分だけ外側にスペースを確保 */
    max-width: calc(980px + (var(--case-slider-nav-space) * 2));
}

.case-slider__shell {
    position: relative;
    border-radius: 12px;
    /* 画像周りに不要な背景が見えないようにする */
    background: transparent;
    /* 左右ボタンを画像の外側に出すため、親のクリップを無効化 */
    overflow: visible;
    /* ボタンが見切れないように、左右に“逃げ”を作る（PC） */
    padding-left: var(--case-slider-nav-space);
    padding-right: var(--case-slider-nav-space);
}

.case-slider__main {
    position: relative;
    /* 画像の外側にボタンを“はみ出し”配置（見た目を変えない） */
}

.case-slider__viewport {
    width: 100%;
    overflow: hidden;
    touch-action: pan-y;
    /* 角丸はviewport側で担保（shellはoverflow:visibleにするため） */
    border-radius: 12px;
}

.case-slider__track {
    display: flex;
    transition: transform 220ms ease;
    will-change: transform;
}

.case-slider__slide {
    flex: 0 0 100%;
}

.case-slider__imgbtn {
    appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    background: transparent;
    cursor: zoom-in;
    display: block;
}

.case-slider__imgbtn img {
    width: 100%;
    height: min(520px, 60vh);
    display: block;
    object-fit: cover;
}

.case-slider__btn {
    /* 画像の外側に配置：ボタン自体は「＜ ＞」文字のみ（背景なし） */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    z-index: 3;
    padding: 10px 12px;
    font-size: 34px;
    line-height: 1;
    color: #111;
    box-shadow: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}

.case-slider__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.case-slider__btn--prev {
    left: calc(var(--case-slider-nav-space) * -1);
}

.case-slider__btn--next {
    right: calc(var(--case-slider-nav-space) * -1);
}

.case-slider__thumbs {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 10px 10px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge(legacy) */
    background: rgba(255, 255, 255, 0.8);
}

.case-slider__thumbs::-webkit-scrollbar {
    display: none;
}

.case-slider__thumb {
    flex: 0 0 auto;
    width: 96px;
    height: 64px;
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    padding: 0;
    cursor: pointer;
}

.case-slider__thumb.is-active {
    border-color: var(--brand-green);
}

.case-slider__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Lightbox */
.case-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.case-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
}

.case-lightbox__dialog {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
}

.case-lightbox__img {
    max-width: min(1100px, 96vw);
    max-height: 86vh;
    width: auto;
    height: auto;
    display: block;
    border-radius: 10px;
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.35);
}

.case-lightbox__close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 26px;
    cursor: pointer;
}

.case-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 28px;
    cursor: pointer;
}

.case-lightbox__nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.case-lightbox__nav--prev {
    left: 16px;
}

.case-lightbox__nav--next {
    right: 16px;
}

.case-lightbox-open {
    overflow: hidden;
}

.case-single-cover {
    padding: 14px 0 0;
}

.case-single-cover__img-el {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

.case-spec {
    width: 100%;
    margin: 20px 0 0;
    margin-bottom: 18px;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.case-spec-heading {
    margin-top: 24px;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
}

.case-spec th,
.case-spec td {
    padding: 12px 14px;
    border-bottom: 1px solid #f1f1f1;
    vertical-align: top;
    font-size: 14px;
}

.case-spec a {
    color: #0099cc;
    text-decoration: underline;
}

.case-spec a:hover {
    opacity: 0.8;
}

.case-spec tr:last-child th,
.case-spec tr:last-child td {
    border-bottom: 0;
}

.case-spec th {
    width: 120px;
    background: #fafafa;
    color: #6b7280;
    font-weight: 600;
    text-align: left;
}

.case-body {
    margin-top: 18px;
}

@media (max-width: 768px) {
    /* SP: 矢印は不要。横スクロール（スクロールバー）で見せる */
    .case-slider {
        --case-slider-nav-space: 0px;
    }
    .case-slider__shell {
        padding-left: 0;
        padding-right: 0;
    }
    .case-slider__btn {
        display: none;
    }

    /* 横スクロール + スナップ */
    .case-slider__viewport {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        /* 縦スクロールも殺さない */
        touch-action: pan-x pan-y;
        padding: 0 12px 10px;
        scrollbar-width: thin; /* Firefox */
        /* 上部大画像は角丸にしない */
        border-radius: 0;
    }
    .case-slider__track {
        transition: none;
        transform: none !important;
        /* 1枚ずつ区切れて見えるように間隔を付ける */
        gap: 18px;
        padding-bottom: 8px; /* iOSのスクロールバー領域 */
    }
    .case-slider__slide {
        flex: 0 0 calc(100% - 24px); /* 左右に少し余白 */
        scroll-snap-align: start;
    }
    /* 上の大画像：枠サイズを統一（切り取り無しで中に収める）
       4:3 / 基本 320×240（小さい画面でははみ出さない範囲で縮小） */
    .case-slider__imgbtn {
        width: 320px;
        height: 240px;
        max-width: 100%;
        margin: 0 auto;
        background: transparent;
        border-radius: 0;
    }
    .case-slider__imgbtn img {
        /* 切り取り防止：SPは拡大しない（全体が見える） */
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: transparent;
        border-radius: 0;
    }

    /* サムネを下に表示（横スクロール） */
    .case-slider__thumbs {
        display: flex;
        gap: 10px;
        justify-content: flex-start;
        padding: 10px 12px 12px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        /* スクロールはできるが、バーは出さない */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge(legacy) */
        background: transparent;
    }
    .case-slider__thumbs::-webkit-scrollbar {
        display: none;
    }
    .case-slider__thumb {
        width: 76px;
        height: 52px;
    }
    .case-spec th {
        width: 92px;
    }
    .case-spec th,
    .case-spec td {
        padding: 10px 12px;
        font-size: 13px;
    }
}