@charset "utf-8";


.invisible-style{
  display: none!important;
}


:root {
    --vw: 1vw;
    --font-main: "Zen Old Mincho", serif;
    --font-en: "Pinyon Script", cursive;
    --tangaroa: #031F2D;
    --swamp: #00141F;
}

h1,
h2,
h3,
h4 {
    text-wrap:unset;
}

html {
    font-size: 1px;
    margin: 0;
}

.container {
    max-width: none;
    padding: 0;
    margin: 0;
}


@media screen and (min-width: 1024px) {
    html {
        font-size: clamp(0.9px, calc(100vw / 1920), 1px);
    }
}

@media (max-width: 900px) {
    html {
        font-size: clamp(1px, calc(100vw / 390), 1.5px);
    }
}

body {
    font-family: var(--font-main);
}

.w1344 {
    max-width: 1344rem;
    width: 90%;
    margin: 0 auto;
}

.w1152 {
    max-width: 1152rem;
    width: 90%;
    margin: 0 auto;
}

a {
    cursor: pointer;
    color: initial;
}

a:hover {
    text-decoration: none;
}

img.w100 {
    max-width: 100%;
    height: auto;
}

img.mail {
    max-width: 37rem;
    width: 100%;
    height: auto;

    @media screen and (max-width: 900px) {
        max-width: 24rem;
    }
}

img.arrow {
    max-width: 73rem;
    width: 100%;
    height: auto;

    @media screen and (max-width: 900px) {
        max-width: 48rem;
    }
}

img.tel {
    max-width: 29rem;
    width: 100%;
    height: auto;

    @media screen and (max-width: 900px) {
        max-width: 19rem;
    }
}

body.no-scroll {
    overflow: hidden;
    height: 100%;
    position: relative;
}

.menuitem {
    a {
        transition: all .4s ease;
    }

    .ttl-en {
        font-family: var(--font-main);
        font-weight: 700;
        font-size: 24rem;
        color: #fff;
    }

    .ttl-ja {
        font-family: var(--font-main);
        font-weight: 700;
        font-size: max(12px, 14rem);
        color: #fff;
        white-space: pre;

        @media (max-width: 900px) {
            text-align: center;
        }
    }

    .parent {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .child {
        display: block;
        margin-top: 19rem;
    }
}

.menuitem a:hover {
    filter: opacity(50%);
    transition: all .4s ease;

}

.sec-head {
    position: relative;

    .line-l {
        width: 215rem;
        height: 217rem;
        top: 147rem;
        right: calc(100% + 7rem);
        position: absolute;
        z-index: -1;

        @media screen and (max-width: 1370px) {
            width: 106rem;
            height: 107rem;
            right: calc(100% + 3rem);
            top: 69rem;

            @media screen and (max-width: 900px) {
                width: 106px;
                height: 107px;
                top: 69px;
            }
        }

        .diagonal {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 303rem;
            height: 2px;
            background: #FFF;
            transform: translate(-50%, -50%) rotate(-45deg);
            transform-origin: center;

            @media screen and (max-width: 1370px) {
                width: 149rem;
            }

            @media screen and (max-width: 900px) {
                width: 149px;
            }
        }
    }

    .line-r {
        width: 243rem;
        height: 242rem;
        top: -153rem;
        left: calc(100% + 10rem);
        position: absolute;
        z-index: -1;

        @media screen and (max-width: 1370px) {
            width: 121rem;
            height: 114rem;
            left: calc(100% + 7rem);
            top: -73rem;
        }

        @media screen and (max-width: 900px) {
            width: 121px;
            height: 114px;
            top: -73px;
        }

        .diagonal {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 303rem;
            height: 2px;
            /* 線の太さ */
            background: #FFF;
            transform: translate(-50%, -50%) rotate(-45deg);
            transform-origin: center;

            @media screen and (max-width: 1370px) {
                width: 169rem;
            }

            @media screen and (max-width: 900px) {
                width: 169px;
            }
        }
    }
}

.sectionwrapper {
    background-color: var(--tangaroa);
    position: relative;
    overflow: hidden;
    padding-bottom: 120rem;
    z-index: 5;


    .sec-ttl {
        font-family: var(--font-en);
        font-weight: 400;
        font-size: max(92px, 198rem);
        transform: scaleX(0.9);
        color: #fff;
        position: relative;

        @media (max-width: 1023px) {
            font-size: 92rem;
        }

        @media (max-width: 900px) {
            font-size: 92px;
        }

    }

    .sec-ttl.middle {
        font-size: 102rem;

        @media (max-width: 1023px) {
            font-size: 92rem;
        }

        @media (max-width: 900px) {
            font-size: 92px;
        }
    }
}

.sectionwrapper::before,
.sectionwrapper::after {
    content: "";
    background: url(/system_panel/uploads/images/sidedeco-right.png) repeat-y top/100% auto;
    position: absolute;
    width: 294rem;
    height: 100%;
    right: 0;
    top: 0;
    z-index: -1;

    @media (max-width: 1023px) {
        width: 106rem;
    }


}

.sectionwrapper::after {
    background-image: url(/system_panel/uploads/images/sidedeco-left.png);
    left: auto;
    left: 0;
    width: 286rem;

    @media (max-width: 1023px) {
        width: 73rem;
    }


}


.yajibtn {
    max-width: 247rem;
    width: 100%;
    display: block;
    transition: all .4s ease;

    @media screen and (max-width: 900px) {
        max-width: 247px;
    }

    .linktext {
        font-family: var(--font-main);
        font-weight: 700;
        font-size: max(15px, 18rem);
        color: #fff;

        @media (max-width: 900px) {
            font-size: 18rem;
        }
    }
}

.yajibtn:hover {
    filter: opacity(50%);
    transform: translateX(4px);
    transition: all .4s ease;
}

.newsItem {
    border: 1px solid #FFF;
    padding: 24rem 32rem;
    transition: all .4s ease;
    position: relative;

    a {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
    }

    @media (max-width: 1023px) {
        padding: 16rem 22rem;
    }

    .newsItemText {
        margin-bottom: 10rem;

        .column {
            max-width: none;
            width: 100%;
            padding: 0;
            display: flex;
            flex-direction: row;
            gap: 19rem;
            align-items: center;
            margin-bottom: 8rem;
        }
    }

    .newsItemCate {
        font-family: var(--font-main);
        font-weight: 700;
        font-size: max(14px, 16rem);
        color: #fff;

        @media (max-width: 1023px) {
            font-size: 14rem;
        }
    }

    .newsItemTit {
        font-family: var(--font-main);
        font-weight: 700;
        font-size: max(14px, 18rem);
        line-height: 26rem;
        color: #fff;
        margin-bottom: 14rem;
        text-wrap: unset;

        @media (max-width: 1023px) {
            font-size: 14rem;
            line-height: 20rem;
        }

    }

    .newsItemTime {
        font-family: var(--font-en);
        font-weight: 400;
        font-size: max(14px, 20rem);
        color: #ffba00;

        @media (max-width: 1023px) {
            font-size: 14rem;
        }

    }

    .newsTextWrap {
        .yajibtn {
            max-width: none;
            width: auto;
            display: flex;
            gap: 7rem;
            justify-content: flex-end;
            align-items: flex-end;
            margin-left: auto;
            transition: all .4s ease;

            @media (max-width: 1023px) {
                width: 94rem;
                align-items: center;
            }

            .linktext {
                font-size: max(18px, 14rem);

                @media (max-width: 900px) {
                    font-size: 14rem;
                }
            }
        }
    }
}

.webgene-blog:hover {
    filter: opacity(50%);
    transition: all .4s ease;

    .yajibtn {
        transform: translateX(4px);
        transition: all .4s ease;
    }
}



@media (max-width: 1023px) {
    .sec-title {
        display: flex;
        flex-direction: column;

        .tit-en {
            font-size: 40rem;
        }
    }
}



.gjs-dashed {
    p {
        font-size: 16px !important;
    }

    .sectionwrapper::before,
    .sectionwrapper::after {
        z-index: -1 !important;
    }
}