@charset "UTF-8";
main,
.block-editor-iframe__body > .block-editor-block-list__layout{
    margin-top: 132px;
    letter-spacing: 0.15em;
    overflow: hidden;

    & .page-title{
        text-align: center;
        padding-top:83px;
        margin-bottom:83px;
        & .page-title-title{
            font-size: 1.75rem;
            line-height: 1.5em;
            font-weight: normal;
            margin-bottom: 0.5rem;
            .post-type-archive-work &,
            .single-work &{
                letter-spacing: 1em;
                margin-right: -1em;
            }
        }
        & .page-title-subtitle{
            color: var(--main-color);
            font-size: 0.875rem;
        }
    }
    & .page-mv{
        height: calc(100vw / var(--pc-width) * 350);
        max-height: 350px;
        overflow: hidden;
        & figure{
            width: 100%;
            height: 100%;
            & img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
            }
        }
    }
    @media (max-width:768px){
        & .page-title{
            padding-top: calc(100vw / var(--sp-width) * 84);
        }
        & .page-mv{
            height: calc(100vw / var(--sp-width) * 250);
            max-height: 250px;
        }
    }
    & .page-content,
    .block-editor-iframe__body > .block-editor-block-list__layout {
        margin:118px auto 200px;
        & h2{
            font-size: 2rem;
            margin: 118px auto;
            &:not([class*="has-text-align"]){
                text-align: center;
            }
        }
        
        & h3{
            font-size: 1.625rem;
            font-weight: normal;
            line-height: 1.8em;
            margin-bottom: 45px;
            margin-top: 45px;
            &:first-child{
                margin-top: 0;
            }
        }
        & section{
            margin:118px auto;
            &.has-background{
                padding-top:118px;
                padding-bottom:118px;
            }
        }
        @media (max-width:768px){
            &{
                margin:calc(100vw / var(--sp-width) * 80) auto calc(100vw / var(--sp-width) * 87);
                & h2{
                    font-size: 1.5rem;
                    margin: calc(100vw / var(--sp-width) * 80) auto;
                    &:first-child{
                        margin-top: 0;
                    }
                }
            }
            & section{
                margin:calc(100vw / var(--sp-width) * 80) auto;
                &.has-background{
                    padding-top:calc(100vw / var(--sp-width) * 80);
                    padding-bottom:calc(100vw / var(--sp-width) * 80);
                }
            }
        }

        /* 神代杉とは */
        & .page-about-img01,
        & .page-about-img02{
            position: relative;
            &::before,
            &::after{
                content: "";
                position: absolute;
                width: 100%;
                height: 360px;
                bottom: 0;
                left: 0;
                z-index: -1;
            }
            &::before{
                background:var(--main-color);
            }
            &::after{
                background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.5" numOctaves="3" stitchTiles="stitch" /></filter><rect width="100%" height="100%" filter="url(%23noise)" /></svg>');
                mix-blend-mode: multiply;
                opacity: 0.25; 
                pointer-events: none;
            }
            img{
                position: relative;
            }
        }
        & .page-about-img01{
            padding-right: 68px;
            padding-bottom: 160px;
            &::before,
            &::after{
                bottom: 0;
                left: 0;
            }
        }
        & .page-about-img02{
            padding-left: 71px;
            padding-top: 94px;
            &::before,
            &::after{
                top: 0;
                left: 0;
            }
        }

        & .page-about-img04{
            padding-bottom: 100px;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
            & figure:first-child img{
                width: 66%;
            }
            & figure:nth-child(2) img{
                width: 50%;
                position: absolute;
                right: 0;
                bottom:0;
                z-index: 1;
            }
        }

        & .page-about-img05{
            overflow: hidden;
            & img{
                margin-top:-3%;
            }
        }

        .page-about-title-choukaisan{
            text-orientation: upright;
            writing-mode: vertical-rl;
            text-align: unset;
            text-indent: -4em;
            margin-top: 4em;
            line-height: 1.5em;
            position: absolute;
            right: 0;
            
        }
        @media (max-width:768px){
            & .page-about-img01 {
                padding-right: calc(100vw / var(--sp-width) * 20);
                padding-bottom: calc(100vw / var(--sp-width) * 64);
            }
            & .page-about-img02 {
                padding-left: calc(100vw / var(--sp-width) * 62);
                padding-top: calc(100vw / var(--sp-width) * 66);
            }

            & .page-about-img01 {
                &::before, &::after {
                    height: calc(100vw / var(--sp-width) * 160);
                }
            }

            & .page-about-img02 {
                &::before, &::after {
                    height: calc(100vw / var(--sp-width) * 252);
                }
            }
            & .page-about-img03{
                width: 66.6%;
            }
            & .page-about-title-choukaisan{
                font-size:1.5rem;
                top: calc(100vw / var(--sp-width) * -91);
                right: calc(100vw / var(--sp-width) * 39);
            }
        }
    }
    /* ご注文制作 */
    & .flow-list:not(.wp-block-group),
    & .flow-list.wp-block-group > div{
        display: flex;
        flex-direction: column;
        gap: 140px 0;
        margin-bottom: 140px;
    }
    & .flow-item{
        display: flex;
        gap: 48px;
        align-items: center;
        & figure{
            max-width: 150px;
            height: auto;
            width: 100%;
            position: relative;
            .flow-item:not(:last-child) &::after{
                content: "";
                width: 1px;
                height: 80px;
                background-color: #D9D9D9;
                display: block;
                bottom: -104px;
                left: 77px;
                position: absolute;
            }
        }
        & .flow-item-num{
            font-size: 2rem;
        }
        & .flow-item-detail{
            flex:1;
            display: flex;
            flex-direction: column;
            & .flow-item-detail-title{
                font-size: 1.625rem;
                padding-bottom: 14px;
                &:not(:last-child){
                    border-bottom: 1px solid #D9D9D9;
                    margin-bottom: 14px;
                }
            }
        }
    }
    .note{
        background: #FFFFFF99;
        border-radius: 10px;
        padding: 64px;
        text-align: center;
    }
    @media (min-width:769px){
        & .custom-gift-img{
            margin-right: calc(-50vw + 50%);
            width: calc(50vw + 50%) !important;
            max-width: none;
        }
    }
    @media (max-width:768px){

        & .flow-list:not(.wp-block-group), & .flow-list.wp-block-group > div{
            gap:calc(100vw / var(--sp-width) * 115);
            
        }
        & .flow-item{
            flex-wrap: wrap;
            gap:calc(100vw / var(--sp-width) * 21);
            align-items:unset;
            & .wp-block-image{
                width: 100%;
                & figure{
                    & img{
                        max-width: calc( 100vw / var(--sp-width) * 152);
                        height: auto;
                        margin:0 auto;
                    }
                    .flow-item:not(:last-child) &::after{
                        display: none;
                    }
                }
            }
            & .flow-item-num{
                margin-top: 0.3em;
            }
        }
        .note{
            padding: calc( 100vw / var(--sp-width) * 42);
        }
    }
    /* 作品 */
    & .page-content{
        /*作品一覧*/
        & .work-list{
            & a::after{
                display: none;
            }
            & ul{
                padding-left: unset;
            }
        }
        & .work-list .work-meta{
            text-align: right;
            & time{
                font-size: 0.75rem;
                display: inline-block;
            }
        }
        /*作品詳細ページ*/
        & .work-slider{
            width:706px;
            max-width: 100%;
            margin-right: auto;
            margin-left: auto;

            .swiper-button-next, .swiper-button-prev {
                color:#D9D9D9;
                height: 63px;
                --swiper-navigation-size:34px;
            }
        }
        & .work-slider .swiper-slide{
            height: auto;
        }

        & .work-slider .swiper-slide img{
            /*height: 100%;*/
            width: 100%;
            object-fit:contain;
        }
        & .work-thumb-slider{
            margin-bottom: 122px;
            & .swiper-wrapper{
                justify-content: center;
                gap:40px;
            }
            & .swiper-slide {
            opacity: .5;
            transition: opacity .5s;
            width:92px !important;
            height: 92px;
            cursor: pointer;
                & img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }
        & .work-thumb-slider .swiper-slide:hover,
        & .work-thumb-slider .swiper-slide.swiper-slide-thumb-active {
            opacity: 1;
        }
        .single &{
            & h1{
                font-size: 2rem;
                margin-bottom: 25px;
            }
            & .work-meta,
            & time{
                margin-bottom: 25px;
                display: inline-block;
            }
        }
        & .work-item{
            padding: 30px;
            & .work-img{
                margin-bottom: 18px;
                & img{
                    aspect-ratio: 1;
                    object-fit: cover;
                    width: 100%;
                }
            }
            & .work-title{
                font-size: 1rem;
                margin: 0;
                margin-bottom: 18px;
                letter-spacing: 0.15em;
                line-height: 1.8em;
                text-align: left;
            }
            & .work-year{
                text-align: right;
                font-size: 0.75rem;
                display: block;
            }

        }
        & .archive-list{
            &.news-list{
                max-width: 100%;
                margin-left:auto;
                margin-right: auto;
                @media(max-width:768px){
                    &{
                        flex-wrap:wrap;
                    }
                }
            }
            & .news-meta{
                width: 100%;
            }
        }

        /* ページナビ */
        & .post-navigation{
            border-top: 1px solid #D9D9D9;
            padding-top: 37px;
            padding-bottom:19px;
            display: flex;
            justify-content: space-between;
            & .nav-previous,
            & .nav-next{
                & a{
                    position: relative;
                    display: flex;
                    gap: 10px;
                }
            }
            & .nav-previous{
                & a{
                    &::before{
                        content:'\f053';
                        font-family: "Font Awesome 5 Free";
                        font-weight: 900;
                        font-size: 30px;
                        color: #D9D9D9;
                        transition:all .3s ease;
                    }
                    &::after{
                        display: none;
                    }
                    &:hover::before{
                        transform: translateX(-5px);
                    }
                }
            }
            & .nav-next{
                & a{
                    &::after{
                        content:'\f054';
                        font-family: "Font Awesome 5 Free";
                        font-weight: 900;
                        font-size: 30px;
                        color: #D9D9D9;
                        position: relative;
                        transition:all .3s ease;
                        top:unset;
                        left: unset;
                        background-color: unset;
                        width: unset;
                        height: unset;
                        display: inherit;
                    }
                    &:hover::after{
                        transform: translateX(5px);
                        animation:unset;
                        width: unset;
                    }
                }
            }
        }

    }

}
.slug-profile .page-content{
    position: relative;
    margin-bottom: 0 !important;
    &::before{
        content: "";
        top: -116px;
        right: 0;
        position: absolute;
        background: url(../images/kasou/bg-profile.png) no-repeat right top;
        width: 761px;
        height: 425px;
        background-size: contain;
        max-width: 100%;
        @media (max-width: 768px){
            top: -85px;
        }
    }
}
.slug-custom-made .page-content{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}