@charset "UTF-8";

:root {
    --maincolor:#d9d6ea;
}

html, body, div, span, a, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent
}

h1 {
    font-size: 2.25vw;
}

h2 {
    font-size: 2vw;
}

p {
    font-size: 1.3vw;
}

ul, ol {
    list-style: none
}

.mainVisual_Gallery {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: -2;
}

.mainVisual_Gallery_image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -2;
    transition: opacity 2s linear;
    background-size: cover;
    background-position: center;
}

.mainVisual::after{
    content:"";
    width: 100vw;
    height: 100vh;
    display:block;
    position: fixed;
    background-image: linear-gradient(#d9d6ea 0%, #f0f3ff 30%, #f0fff4 60%, #fffee2 100%);
    opacity:.15;
    z-index:-2
}

main {
    z-index:0;
    padding-top: 3vw;
    padding-bottom:12vw;
    background-image: linear-gradient(#d9d6ea 0%, #f0f3ff 30%, #f0fff4 60%, #fffee2 100%);
}

.gallery_exp_img {
    width: 100vw;
    height: 45vw;
    position: sticky;
    top: 0;
    clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
}

.glass_morphism {
    width: 100vw;
    height:100vh;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-right-color: rgba(255, 255, 255, 0.2);
    border-bottom-color: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 5px 20px rgba(255, 152, 79, 0.5);
    z-index: 1;
    overflow-x: hidden; /* 横スクロールを制限 */
}

.gallery_exp {
    height: 45vw;
    clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
    margin-bottom: 15vh;
}

.gallery_exp_sentence {
    transform: translate(10%, 40%);
    color: #fff;
}

.gallery_exp_sentence h1 {
    font-size: 12vw;
    margin-bottom:2vh;
}

.gallery_exp_sentence p {
    line-height:1.4;
    margin-bottom:1vh;
}

/* あとでportfolio.cssに移動かcssごとマージする */
.mainPortfolio {
    margin-top: 10vh;
}

.portfolio_exp_sentence {
    transform: translate(10%, 40%);
    color: #fff;
}

.portfolio_exp_sentence h1 {
    font-size: 12vw;
    margin-bottom:2vh;
}

.portfolio_exp_sentence p {
    line-height:1.4;
    margin-bottom:1vh;
}


.mainGallery {
    width:80vw;
    margin:0 auto 2vw;
    line-height:3vw;
}

.gallery_grid {
    width: 80vw;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    column-gap: 2vw;
    row-gap: 3vw;
    justify-content: space-between;
}

.gallery_grid_inner {
    background-color: #2d2d2d;
    border: double 5px #4ec4d3;
    border-radius: 2vw;
    width: 24vw;
    height: 25vw;
    overflow: hidden;
}

.gallery_grid_inner :hover {
    cursor : pointer;
}

.hoverText {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    color: white;
    opacity: 0;
    transition: opacity 0.8s;
    pointer-events: none;
    font-size: 2.5vw;
    line-height: 1.2;
    -webkit-box-reflect: below -10px -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0) 10%,rgba(0,0,0,.6));
    margin-bottom: calc(1em + 20px);
}

.gallery_grid_inner :hover .gallery_grid_items_img{
    opacity: .8;
    transform: scale(1.1);
}

.gallery_grid_inner :hover .hoverText{
    opacity: 1;
}

.gallery_grid_items {
    position:relative;
    display: flex;
    flex-direction: column;
}

.gallery_grid_items_img {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 18vw;
    object-fit: cover;
    /* border-radius: 2vw; */
    transition: transform .8s ease;
    z-index: 1; /* 追加 */
    position: relative; /* 追加 */
}

.gallery_grid_items_sentence ::before{
    content:"";
    background-color: #2d2d2d;
}
.gallery_grid_items_sentence{
    padding: 1.5vw 1vw;
    margin:0;
    color: #fff;
    z-index: 2; /* 追加 */
    position: relative; /* 追加 */
    background-color: #2d2d2d;
}

.gallery_grid_items_sentence h1{
    font-size: 1.5vw;
}

.gallery_grid_items_sentence p{
    color: #bababa;
}

@media screen and (max-width: 1024px) {
    .mainVisual_Gallery_image {
        position: absolute; /* positionをfixedからabsoluteに変更 */
        top: 0;
        left: 0;
        width: 100vw;
        height: 60vh;
        object-fit: contain; /* 画像をサイズに応じて縮小する設定 */
        background-repeat: no-repeat;
        z-index: -1; /* z-indexを-2から-1に変更 */
        transition: opacity 2s linear;
    }

    h1 {
        font-size: 3.2vw;
    }

    h2 {
        font-size: 2.25vw;
    }

    p {
        font-size: 1.7vw;
    }

    .mainVisual {
        height:60vh;
    }
    .mainVisual_inner {
        top:25%;
        -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
    }
    .mainVisual_Gallery {
        height: 60vh;
    }
    .gallery_grid {
        column-gap: 1vw;
        row-gap: 4.5vw;
    }
    .gallery_grid_inner {
        width: 38vw;
        height: 37vw;
    }
    .hoverText {
        font-size: 3vw;
        line-height: 1.4;
    }
    .gallery_grid_items_img {
        height: 28vw;
    }
    .gallery_grid_items_sentence h1{
        font-size: 2.5vw;
    }

    /* ガラスを消す */
    .gallery_exp_img {
        height:0;
        position: static;
        top: initial;
        clip-path: none;
    }
    .glass_morphism {
        height: 40vh; /* デフォルトの高さに戻す */
        background-color: initial; /* デフォルトの背景色に戻す */
        background-color:#000;
        border: none; /* 枠線を削除 */
        -webkit-backdrop-filter: none; /* ブラー効果を削除 */
        backdrop-filter: none; /* ブラー効果を削除 */
        box-shadow: none; /* シャドウ効果を削除 */
    }
    .gallery_exp_sentence {
        transform: translate(10%, 10%);
    }
    .gallery_exp_sentence h1 {
        font-size: 14vw;
        margin-bottom:1vh;
    }
    .gallery_exp_sentence p {
        line-height:1.2;
        margin-bottom:1vh;
    }
    .gallery_exp {
        clip-path: none;
        background-color: rgba(255, 255, 255, 0.2); /* 半透明の白色背景 */
        background-image: url('../images/dress_about2.jpeg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        position: relative;
        z-index: 1;
    }
    .gallery_exp::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: inherit;
        filter: blur(10px);
        box-shadow: 0 5px 20px rgba(255, 152, 79, 0.5);
        z-index: -1;
    }
    .gallery_exp::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255,0.1);
        z-index: 0;
    }
    .portfolio_exp_sentence {
        transform: translate(10%, 10%);
    }
    .portfolio_exp_sentence h1 {
        font-size: 14vw;
        margin-bottom:1vh;
    }
    .portfolio_exp_sentence p {
        line-height:1.2;
        margin-bottom:1vh;
    }
}
@media screen and (max-width: 768px) {
    h1 {
        font-size: 3.5vw;
    }

    h2 {
        font-size: 3.2vw;
    }

    p {
        font-size: 2.2vw;
    }

    .mainVisual {
        height:50vh;
    }
    .mainVisual_inner {
        top:20%;
        transform: translate(-50%, 0);
        /* -webkit-transform: translate(-50%, -400%);
        -ms-transform: translate(-50%, -400%);
        transform: translate(-50%, -400%) */
    }
    .mainVisual_Gallery {
        height: 35vh;
    }
    .mainGallery h1{
        width:60vw;
        margin:2vh auto 1vh;
    }
    .gallery_grid {
        width: 60vw;
        row-gap: 5.5vw;
    }

    .gallery_grid_inner {
        width: 60vw;
        height: 56vw;
    }
    .gallery_grid_items_img {
        height: 43vw;
    }
    .gallery_grid_items_sentence {
        margin-top:1vw;
    }
    .gallery_grid_items_sentence h1{
        font-size: 3.5vw;
    }
    .gallery_grid_items_sentence p{
        font-size: 2.2vw;
    }
    /* ガラスを消す */
    .glass_morphism {
        height: 50vh; /* デフォルトの高さに戻す */
    }
    .portfolio_exp_sentence {
        transform: translate(10%, 40%);
    }
    .gallery_exp_sentence {
        transform: translate(10%, 40%);
    }
}