@charset "UTF-8";

/* work css */

/* header */
.top-heder {
    align-items: center;

}

.header-nav {
    position: fixed;
    top: 20px;
    left: 100px;
    z-index: 1000;
    transition: transform 0.4s ease, opacity 0.3s ease;
}

/* スクロール時に非表示にするクラス */
.header-nav.hide {
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
}

/* 表示状態 */
.header-nav.show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}


.header-ul {
    display: flex;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-nav a {
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.header-nav a:hover {
    color: #888;
}

/* ----------------- */





/* ----main----- */

/* hederとの感覚 */
.work-main {
    padding-top: 130px;
}

/* セクション全体 */
.the-work {
    max-width: 1100px;
    margin: 0 auto;
    padding: 3rem 1rem;
    box-sizing: border-box;

}

/* タイトル */
.the-work h2 {
    font-size: 2rem;
    margin-bottom: 60px;
    text-align: left;
    border-left: 5px solid #333;
    padding-left: 15px;
}




/* 作品 */
/* 作品　横並び→狭くなったら縦並び */
.work-item,
.work-item-reverse {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 6.25rem;
    flex-wrap: wrap;
    margin-top: 3rem;
    font-size: 1rem;
    flex: 0 1 clamp(160px, 32%, 420px);
}

/* ----------------------- */

.work-item-reverse {
    flex-direction: row-reverse;
}

.work-item a,
.work-item-reverse a {

    margin: 0 0 .5rem;
    font-weight: 700;
    font-size: 1.2rem;
    transition: border-color 0.3s;
}

.work-item a:hover,
.work-item-reverse a:hover {
    color: #C0C0C0;
    transition: color 0.4s ease;
}

.work-item ul,
.work-item-reverse ul {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #333;
}

.work-item ul li,
.work-item-reverse ul li {
    margin-bottom: 1rem;
}



/* 作品の画像 */
.work-item img,
.work-item-reverse img {
    display: block;
    max-width: 400px;
    width: 100%;
    height: auto;
    object-fit: cover;
    display: inline-block;
    border-radius: 6px;
    transition: transform 0.3s ease-in-out;
}

.work-jewelry img {
    border: solid 1px;
}

/* ---------- モーダル（レスポンシブ／画像右上固定） ---------- */
.img-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 1rem;
    box-sizing: border-box;
}

/* show クラスで表示 */
.img-modal.show {
    display: flex;
}

/* 画像ラッパー（画像サイズに追従） */
.img-modal-content {
    position: relative;
    /* ← ボタンはこの中で絶対配置される */
    display: inline-block;
    max-width: 94%;
    box-sizing: border-box;
}

/* 拡大画像 */
.img-modal-img {
    display: block;
    max-width: 100%;
    max-height: 85vh;
    /* ビューポート基準で高さ制限 */
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
}

/* 閉じるボタン：常に画像の右上に固定 */
.img-modal-close {
    position: absolute;
    top: 8px;
    /* 画像の内側からの距離（調整可） */
    right: 8px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    border: none;
    font-size: 1.2rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

/* クリックしやすいタップ領域（擬似要素で拡張） */
.img-modal-close::after {
    content: "";
    position: absolute;
    inset: -6px;
    /* 見た目は小さく、タップ領域は広げる */
}


/* workのホバー */
.work-item img:hover,
.work-item-reverse img:hover {
    transform: scale(1.03);
    opacity: 0.6;
    transition: transform .25s ease, opacity .25s ease;
}



/* 説明テキスト　ul li a */
.work-item ul li,
.work-item-reverse ul li {
    padding-bottom: 10px;
}

.work-item ul li a,
.work-item-reverse ul li a {
    color: #000;
    text-decoration: none;
}

/* -------------- */




/* ----contact------*/

.top-main3 {
    padding-top: 200px;
    background: rgba(200, 200, 200, 0.1);
}


/* ------------- */





@media(max-width:896px) {

    /* ---header--- */
    .header-nav {
        display: none;
    }

    .top-heder {
        display: flex;
        flex-direction: column;
        /* 縦積み */
        justify-content: center;
        /* 縦中央 */
        align-items: center;
        /* 横中央 */
        text-align: center;
        padding: 2rem 1rem;
        height: auto;
    }

    .top-heder-h1 {
        position: relative;
        margin: 0;
        z-index: 2;
        font-size: clamp(1.6rem, 6.5vw, 2.4rem);
        background: rgba(0, 0, 0, 0.35);
        /* 任意：可読性のため */
        padding: .4rem .6rem;
        border-radius: 6px;
        left: 0;
    }

    /* ------------------ */




    /* main */
    .work-item,
    .work-item-reverse {
        width: 100%;
        flex-direction: column;
        align-items: center;
        text-align: left;
    }

    .work-item img:hover {
        transform: scale(1.03);
        filter: brightness(.85);
        transition: transfrom .25s ease, filter .25s ease;
    }


}

/* モバイル調整 */
@media (max-width: 540px) {
    .img-modal {
        padding: .6rem;
    }

    .img-modal-img {
        max-height: 78vh;
    }

    .img-modal-close {
        top: 6px;
        right: 6px;
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
}

/* 横向きで高さが小さい端末の微調整 */
@media (orientation: landscape) and (max-height: 500px) {
    .img-modal-img {
        max-height: 90vh;
        max-width: 88%;
    }
}

/* 背景スクロールロック用（JSで body に .modal-open を付与/削除） */
body.modal-open {
    overflow: hidden;
    height: 100%;
}