/*■■■■■■■■■■■test■■■■■■■■■■■*/
#wrapper {
    /* width:50%;
    margin:0 auto; */
}

#scene-container {
    position: relative;
    width: 500px;
    aspect-ratio: 0.7846153;
}

.ourService_image_svg {
    position: absolute;
    width: 100%;
    overflow: visible;
    opacity: 0.5;
}

#scene-container canvas {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* background-color: #0044ff33; */
}

.lil-gui {
    transform: scaleX(1);
    /* ← GUI全体を1.5倍に拡大 */
    transform-origin: top left;
    opacity: 1
}

/*■■■■■■■■■■■test■■■■■■■■■■■*/
.noto-sans-jp {
    font-family: "YakuHanRP", "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.2em;
}

.outfit {
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-weight:350;
    font-style: normal;
    letter-spacing: 0em;
}

html {
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%; /* もしくは none */
    text-size-adjust: 100%;
}

@property --default-text-color {
    syntax: '<color>';
    inherits: true;
    initial-value: #56616B; 
}

:root {
    --default-text-color: #56616B;
}

body {
    font-family: "Outfit", "YakuHanRP", "Noto Sans JP", sans-serif;
    font-size: 1.6rem;
    width: 100vw;
    overflow-x: hidden;
    color:var(--default-text-color);
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

* {
    box-sizing: content-box;
}

#fixed_area {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: -5;
    #background_animation {
        position: absolute;
        /* opacity: 0; */
        bottom: 0;
        z-index: -5;
        width: 100vw;
    }
}

.fixed_scroll{
    position: fixed;
    bottom: 4.16666vh;
    left:50%;
    transform:translateX(-50%);
    z-index: 11;
    width: 44.4444vh;
}



#wrapper {
    position: relative;
    width:100vw;
    /* touch-action: pan-y pinch-zoom; */
}

#horizontal_wrapper {
    position: sticky;
    top: 0;
    width: 100vw;
    height:100vh;
    display: inline-flex;
    overflow-x: hidden; 
    overflow-y: hidden;
    /* pointer-events: none; */
}



/* flexで横並びさせた上でサイズ変更させない */
#horizontal_wrapper>* {
    flex-shrink: 0;
    flex-grow: 0;
}

@property --button-height-A {
    syntax: '<length>';
    inherits: true;
    initial-value: 3.6rem; 
}
@property --button-height-B {
    syntax: '<length>';
    inherits: true;
    initial-value: 3.6rem; 
}
header {
    position: fixed;
    display:flex;
    justify-content:space-between;
    align-items:center;
    width: 100vw;
    height:10rem;
    padding:0 3.6rem;
    box-sizing:border-box;
    /* backdrop-filter: blur(4px); */
    /* background-color:#ffff3320; */
    z-index: 10;
    pointer-events: none;
    h1 {
        height: 3.6rem;
        margin-left: 0 0 0 3.6rem;
        pointer-events: auto;
        a {
            height: 100%;
            img {
                height: 100%;
            }
        }
    }
    a{
        display:block;
        line-height:3.6rem;
        font-size:1.5rem;
        text-decoration: none;
        font-weight:200;
        color: #89C8E9;
    }
    .header_right{
        /* background-color:#ff33ff20; */
        display:flex;
        align-items:center;
        width:max-content;
        /* height:3.6rem; */
        font-size:1.5rem;
        cursor: pointer;
        pointer-events: auto;
        overflow-x:clip ;
        padding-left: 30px;
        .header_right_style{
            padding:0 3rem;
            height:100%;
            background: rgba(255, 255, 255, 0.7);
            box-shadow: 0px 0px 2.2222vh rgba(109, 183, 222, 0.15);
            backdrop-filter: blur(2.5px);
            -webkit-backdrop-filter: blur(2.5px);
            border-radius: 2.4em;
            font-weight:200;
        }
        .contact_button{
            height:
                max(
                    var(--button-height-A, 3.6rem),
                    var(--button-height-B, 3.6rem)
                );
            line-height:
                max(
                    var(--button-height-A, 3.6rem),
                    var(--button-height-B, 3.6rem)
                );
            margin-right:3.6rem;
            padding:0 3rem;
        }
        .nav_wrapper{
            height: 
                max(
                    var(--button-height-A, 3.6rem),
                    var(--button-height-B, 3.6rem)
                );
            /* max-height:6rem; */
            display:flex;
            .nav_icon{
                position:relative;
                height:100%;
                aspect-ratio:1;
                background-color: transparent;
                border-color:transparent;
                padding-block:0;
                padding-inline: 0;
                border:none;
                svg{
                    height:100%;
                    aspect-ratio:1;
                    position:absolute;
                    left:50%;
                    transform:translateX(-50%);
                }
            }
            .nav_icon_sp{ 
                display:none; 
            }
            nav {
                height:100%;
                pointer-events: none;
                ul {
                    height:100%;
                    display: flex;
                    /* gap:7rem; */
                    justify-content: start;
                    li{
                        padding:0 3.5rem;
                        border-radius:6rem;
                        position:relative;
                        height:100%;
                        width:auto;
                        a {
                            display:flex;
                            height:100%;
                            width:fit-content;
                            align-items:center;
                            font-weight:200;
                            gap:0.375em;
                            span{
                                position:relative;
                                height:100%;
                                .drop_down_icon{
                                    height:100%;
                                }
                            }
                        }
                        & .wrapper{
                            position:absolute;
                            transform:translateX(-36.6863%);
                            top:100%;
                            .drop_down_menu{
                                position:relative;
                                opacity:0;
                                top:2.2222vh;
                                display: flex;
                                flex-direction:column;
                                height:auto;
                                align-items:flex-end;
                                padding:5.6666vh 0 5.6666vh 0;
                                cursor: pointer;
                                pointer-events: auto;
                                li{
                                    padding:0 8.2222vh 0 6vh;
                                    a{ line-height:270%; }
                                }
                            }
                            .nav_selector_icon{
                                position:absolute;
                                top:0;
                                height:0.3125em;
                                right:5.5555vh;
                            }
                        }
                    }
                }
            }
        }
    }
}

#nav_sp{
    position:fixed;
    margin:0 auto;
    top:50%;
    transform:translateY(-50%);
    pointer-events:none;
    display:none;
    align-items:center;
    flex-direction:column;
    justify-content:center;
    height:max-content;
    padding:15.9090vw 0;
    width:73.6363vw;
    popover:auto;
    background:#ffffff;
    border-radius:36px;
    box-sizing:border-box;
    ul{
        position:relative;
        display:flex;
        align-items:flex-start;
        flex-direction:column;
        margin:0 auto;
        width:min-content;
        /* background-color:#33ffff20; */
        margin-bottom:8.1818vw;
        li{
            a{
                font-size:clamp(1.6rem, 5.2272vw, 5.2272vw);
                line-height:256.5217%;
                padding:0 4.7rem;
            }
            width:fit-content;
            /* background-color:#ff33ff20; */
            text-align:center;
            /* padding:0 3.1rem; */
        }
    }
    .contact{
        font-size:clamp(1.6rem, 5.2272vw, 5.2272vw);
        line-height:256.5217%;
        display:block;
        background:#89C8E9;
        color:white;
        padding:0 4.7rem;
        line-height:7rem;
        border-radius:2em;
    }
    &::backdrop{
        background:var(--backdrop-color, #153D5200);
    }
}

/* #region ■■■■■■■■■■■■■■■■ splash ■■■■■■■■■■■■■■■■*/
#splash {
    position: relative;
    height: auto;
    margin: 0 auto;
    width: 100vw;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    .main {
        position: relative;
        height: 100vh;
        width: 100vw;
        /* z-index: 1; */
        .copy_container {
            position: absolute;
            right: 0;
            width: 100vw;
            height: 100vh;
            &.moved{
                height: 12.5rem;
                top:50%;
                width:41.03389%;
                transform: translateY(-78.4272%);
            }
            .copy {
                writing-mode: horizontal-tb;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: var(--default-text-color); 
                font-size: 6.666vh;
                font-weight: 600;
                white-space: nowrap;
                opacity: 0;
                &.moved {
                    position: absolute;
                    left: 50%;
                    top:0;
                    transform: translateX(-50%);
                    font-family: 'Noto Sans JP';
                    font-style: normal;
                    font-weight: 400;
                    font-size: 23px;
                    font-size: clamp(2.3rem, 1.5972vw, 2.3rem);
                    line-height: 100%;
                    text-align: right;
                    letter-spacing: 0.0376em;
                    color: #74BEE4;
                }
            }
        }
        #animations {
            position: absolute;
            top: 50%;
            left: 50%;
            height: 55.555%;
            aspect-ratio: 0.608;
            opacity: 0;
            display: none;
            .heart {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                height: 20.8%;
                aspect-ratio: 1;
                &.left {
                    transform: translateY(-50%) rotate(270deg);
                    transform-origin: 50% 50%;
                }
                &.right {
                    transform: translateY(-50%) rotate(270deg);
                    transform-origin: 50% 50%;
                }
            }
            svg {
                position: absolute;
                left: 34.210%;
                opacity: 0;
            }
            .logo {
                position: absolute;
                height: 20.8%;
                aspect-ratio: 4.20554;
                top: 50%;
                left: 0;
                opacity: 0;
                transform: translateY(-50%);
                .mark_wrapper{
                    position: absolute;
                    height: 100%;
                    aspect-ratio:1.4469;
                    .mark {
                        height: 100%;
                        max-width: none;
                        display:block;
                        object-position:right;
                        /*この要素のみエリアを超過して配置させる*/
                    }
                    .splash_loop_images {
                        height: 55.71813403416557%;
                        aspect-ratio:1;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        right: 0;
                        border-radius:50%;
                        overflow:hidden;
                        picture{
                            display:block;
                            height: 100%;
                                width:auto;
                            img {
                                /* SVGデータをマスク画像として指定 */
                                position: absolute;
                                object-fit:cover;
                                max-width: none;
                                height: 100%;
                                top: 50%;
                                transform: translateY(-50%);
                                right: 0;
                                opacity: 0;
                            }
                        }
                    }
                }
                .type {
                    /* background:#33ffff22; */
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    height: 100%;
                    width: 100%;
                    right: 0;
                    opacity: 0;
                    .title {
                        position: absolute;
                        bottom: 50%;
                        right: 0;
                        transform: translateY(50%);
                        height: 51.4880%;
                        -webkit-filter: drop-shadow(0px 0px 10px #fff);
                        filter: drop-shadow(0px 0px 10px #fff);
                    }
                }
            }
        }
    }
}




/* #endregion ■■■■■■■■■■■■■■■■ splash ■■■■■■■■■■■■■■■■*/

.blur_change_area{
    height: 100vh;
    width:100vh;
    mask-image:linear-gradient(to right, #ffff 0%, #0000 100%);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* region ■■■■■■■■■■■■■■■■ second_view ■■■■■■■■■■■■■■■■ */
@property --mask-position {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 0%; 
}
#second_view {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-grow: 1;
    flex-shrink: 0;
    height: 100vh;
    /* width:300vw; */
    .flex-container {
        display: flex;
        position:sticky;
        left:0;
        justify-content:center;
        align-items: center;
        height: 100%;
        width: 100vw;
        .left_area{
            height:100vh;
            width:50vw;
            position:relative;
            ul{
                height: 100%;
                width: 100%;
                li{
                    position: absolute;
                    top:0;
                    height: 100%;
                    width: 100%;
                    .circle_image {
                        position: absolute;
                        top:50%;
                        max-width: 490px;
                        width:min(34.4705vw, 68.4615vh);
                        aspect-ratio:1;
                    }
                    picture{
                        img{
                            -webkit-mask-image:radial-gradient(50% 50% at 50% 50%, #FFFFFF 74.04%, -webkit-rgba(255, 255, 255, 0.8) 87.5%, rgba(255, 255, 255, 0.57) 94%, rgba(255, 255, 255, 0.62) 97%, rgba(255, 255, 255, 0.45) 99.5%, rgba(255, 255, 255, 0) 100%);
                            -webkit-mask-size: 95% 95%;
                            -webkit-mask-position: 50% var(--mask-position, 0%);
                            -webkit-mask-repeat: no-repeat;
                            mask-image:radial-gradient(50% 50% at 50% 50%, #FFFFFF 74.04%, rgba(255, 255, 255, 0.8) 87.5%, rgba(255, 255, 255, 0.57) 94%, rgba(255, 255, 255, 0.62) 97%, rgba(255, 255, 255, 0.45) 99.5%, rgba(255, 255, 255, 0) 100%);
                            mask-size: 95% 95%;
                            mask-position: 50% var(--mask-position, 0%);
                            mask-repeat: no-repeat;
                            height:100%;
                            object-fit: cover;
                        }
                    }
                }
            }
        }
        .right_area {
            position: relative;
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur(3px);
            width:50vw;
            height:100vh;
            /* background-color:#ffaaaa20; */
            background: rgba(255, 255, 255, 0.36);
            border-left:1px solid ;
            border-image:linear-gradient(180deg, rgba(196, 227, 233, 0.2) 0%, rgba(124, 188, 223, 0.3) 49.52%, rgba(196, 227, 233, 0.2) 100%);
            border-image-slice: 1;
            mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, #FFFFFF 25.13%, #FFFFFF 75.45%, rgba(0, 0, 0, 0.6) 100%);
            .content_wrapper{
                position: relative;
                            /* background-color:#ffff3320; */
                .introduction{
                    display: flex;
                    flex-direction:column;
                    align-items:flex-start;
                    width: max-content;
                    gap:15em;
                    margin:0 auto;
                    padding-top:100vh;
                    padding-bottom:15.75rem;
                            /* background-color:#33ffff20; */
                    p {
                        font-weight:350;
                        font-size:1.6rem;
                        line-height: 8em;
                        letter-spacing: 0.2em;
                        color: var(--default-text-color);
                        .br_intro{
                            display:initial;
                        }
                    }
                }
                .stories{
                    /* background-color:#ff33ff20; */
                    li{
                        box-sizing:border-box;
                        height:100vh;
                        width:100%;
                        padding:0 2rem;
                    }
                }
            }
        }
    }
}


.story_description{
    .image_vertical{
        display:none; /*縦スクロール時のみ*/
    }
    display:block;
    position:relative;
    top:50%;
    transform:translateY(-50%);
    text-decoration:none;
    .description {
    /* background-color:#ff33ff20; */
        height:fit-content;
        max-width:586px;
        position:relative;
        margin:0 auto;
        .top{
            margin-left:5.5rem;
        }
        .title_box{
            display:flex;
            align-items:center;
            gap:calc(5.5rem - clamp(2rem, 2.6666vh, 2.4rem));
            margin-top:clamp(2rem, 2.6666vh, 2.4rem);
            margin-bottom:clamp(2.7rem, 3.4444vh, 3.6rem);
            .hover_icon{
                height: clamp(2rem, 2.6666vh, 2.4rem);
                aspect-ratio:1;
            }
            h3 {
                /* letter-spacing: 0.06em; */
                font-size: clamp(2rem, 2.8888vh, 2.6rem);
                color: var(--default-text-color);
                line-height:150%;
            }
        }
        .tag{
            /* Frame 176 */
            display:flex;
            gap:1.2rem;
            margin-left:5.5rem;
            margin-bottom:clamp(4.7777vh, 4.7777vh, 4.3rem);
            font-size:clamp(1.4rem, 1.0416vw, 1.5rem);
            line-height:1em;
            font-weight:400;
            
            word-break: keep-all;
            /* letter-spacing: 0.06em; */
            color:rgba(116, 190, 228, 0.72);
            span{
                border: 1px solid rgba(116, 190, 228, 0.72);
                border-radius:1em;
                padding:0.55rem 1.4rem;
            }
        }
        .main_wrapper{
            display:flex;
            gap:8rem;
            align-items:center;
            width:fit-content;
            .main{
                flex-shrink:0;
                margin-left:5.5rem;
                font-weight:350;
                width:30rem;
                font-size:1.4rem;
                line-height:2em;
                letter-spacing: 0.06em;
                color: var(--default-text-color);
                text-align:left;
            }
            .arrow{
                height:5.3rem;
                aspect-ratio:1;
            }
        }
        &::before{
            content:"";
            position:absolute;
            border-radius:100%;
            left:9.5rem;
            top:50%;
            transform:translateY(-50%);
            height:47.5655vh;
            aspect-ratio:1;
            z-index:-1;
            background: rgba(173, 221, 255, 0.21);
        }
    }
}



.top{
    display:flex;
    color:var(--default-text-color);
    font-size:1.777vh;
    font-size:1.6rem;
    font-weight:350;
    .industry{ 
        border-right: 1px solid var(--default-text-color);29;
        padding-right:1em;
    }
    .name{ 
        padding-left:1em;
    }
}



.details_button {
    display: block;
    position: absolute;
    bottom: 0;
    right: -5rem;
    width: 200px;
    height: 42px;
    overflow: hidden;
}

.details_button span {
    background: url('../image/background.jpg');
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    letter-spacing: 0.2em;
    overflow: hidden;
}

.details_button .details_button svg {
    position: absolute;
}

.details_button .wrapper {
    display: flex;
    position: absolute;
    margin-left: 2rem;
    margin-top: 0.8rem;
    font-size: 1.8rem;
    line-height: 2.6rem;
}

.details_button svg {
    position: absolute;
    left: -25px;
    bottom: 0;
    width: 100%;
    height: 100%;
    transition: 200ms;
}

.details_button svg:hover {
    left: 0;
    transition: 200ms;
    transition-timing-function: cubic-bezier(0.08, 0.87, 0.33, 1);
}


/* endregion ■■■■■■■■■■■■■■■■ second_view ■■■■■■■■■■■■■■■■ */

@property --article-margin {
    syntax: '<length>';
    inherits: true;
    initial-value: 50vh; 
}
@property --section-margin {
    syntax: '<length>';
    inherits: true;
    initial-value: 30vh; 
}
@property --article-margin-vertical {
    syntax: '<length>';
    inherits: true;
    initial-value: 50vw; 
}
@property --section-margin-vertical {
    syntax: '<length>';
    inherits: true;
    initial-value: 30vw; 
}

.article-margin{
    padding-right:var(--article-margin);
}
.section-margin{
    margin-right:var(--section-margin);
}

#stories {
    padding-left:40vh;
    padding-right:80vh;
    position: relative;
    /* width:100vw; */
    overflow:hidden;
    bottom: 0;
    opacity: 1;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    .stories_list {
        position:relative;
        top:50%;
        transform:translateY(-50%);
        overflow-x: visible;
        display: flex;
        align-items: center;
        .carousel{
            padding-right:31.1111vh;
            li{
                padding-bottom:7.4444vh;
                width:23vh;
                aspect-ratio:1;
                align-self:flex-start;
                
            }
        }
    }
}

.story_image{
    display:block;
    overflow:hidden;
    border-radius:100%;
    backGround-color:#fff;
    opacity:0.8;
    width:100%;
    aspect-ratio:1;
    img{
        -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #FFFFFF 74.04%, rgba(255, 255, 255, 0.8) 87.5%, rgba(255, 255, 255, 0.57) 94%, rgba(255, 255, 255, 0.62) 97%, rgba(255, 255, 255, 0.45) 99.5%, rgba(255, 255, 255, 0) 100%);
        -webkit-mask-size: 100% 100%;
        -webkit-mask-position: 50% var(--mask-position, 0%);
        -webkit-mask-repeat: no-repeat;
        mask-image: radial-gradient(50% 50% at 50% 50%, #FFFFFF 74.04%, rgba(255, 255, 255, 0.8) 87.5%, rgba(255, 255, 255, 0.57) 94%, rgba(255, 255, 255, 0.62) 97%, rgba(255, 255, 255, 0.45) 99.5%, rgba(255, 255, 255, 0) 100%);
        mask-size: 100% 100%;
        mask-position: 50% var(--mask-position, 0%);
        mask-repeat: no-repeat;
        width:100%;
        aspect-ratio:1;
        object-fit:cover;
    }
}

.view_all_button{
    position:relative;
    display:block;
    height:17.1111vh;
    aspect-ratio:1;
    filter: drop-shadow(0px 0px 4vh rgba(109, 183, 222, 0.30));
    .button_back{
        width:119%;
        height:119%;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%, -50%);
        svg{
            height:100%;
            width:100%;
        }
    }
    p{
        position:absolute;
        top:50%;
        left:50%;
        font-size:2.2222vh;
        transform:translate(-50%, -50%);
        text-decolation:none;
        font-weight:200;
        color:#74BEE4;
    }
}


#stories_home {
    #stories_page{
        padding:0;
        width:200vw;
        .stories_list{
            position:sticky;
            left:0;
            width:100vw;
            height:100vh;
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur(3px);
            transform:translateY(0); 
            overflow:hidden;
            /* background-color:#ffff3333; */
            .area_wrapper{
                width:auto;
                margin:0 auto;
                /* background-color:#ffff3333; */
                display:flex;
                align-items:center;
                justify-content:center;
                gap:20.2222vh;
                .left_area{
                    position:relative;
                    top:50%;
                    height:50vh;
                            width:24.1111vh;
                    /* background-color:#33ffff33; */
                    .carousel{
                        padding-right:0;
                        position:absolute;
                        left:50%;
                        display:flex;
                        flex-direction:column;
                        gap:7.4444vh;
                        li{
                            width:24.1111vh;
                            a{
                                border-radius:100%;
                                display:block;
                                svg{
                                    position:absolute;
                                    height:100%;
                                    aspect-ratio:1;
                                    top:0;
                                }
                            }
                            .top{
                                position: absolute;
                                bottom: 0;
                                left:50%;
                                transform:translateX(-50%);
                                padding-bottom:13.3410%;
                                width: 100%;
                                line-height:100%;
                                font-weight: 350;
                                text-shadow: 0px 0px 4px #FFFFFF;
                                font-size:clamp(1.5rem,1.5555vh,1.5555vh);
                                opacity:0.8;
                                pointer-events:none;
                                span{
                                    white-space:nowrap;
                                    width: 100%;
                                    text-align:center;
                                }
                                .industry{ 
                                    border:none;
                                    padding:0;
                                }
                            }
                        }
                        li:last-child {
                            margin-bottom:0;
                        }
                    }
                }
                .right_area{
                    position:relative;
                    height:100vh;
                    width:40.3472vw;
                    /* background-color:#ff33ff11; */
                    .section_title{
                        height:3.8rem;
                        width:auto;
                        aspect-ratio:auto;
                        background:none;
                        line-height:100%;
                    }
                    .inner{
                        position:absolute;
                        top:50%;
                        transform:translateY(-50%);
                        height:70vh;
                        width:100%;
                        /* background-color:#33ff3350; */
                        ul{
                            padding:0;
                        /* background-color:#ffff3311; */
                            position:absolute;
                            width:100%;
                            height:100%;
                            top:50%;
                            transform:translateY(-50%);
                            li{
                                position:absolute;
                                left:50%;
                                top:50%;
                                height:fit-content;
                                width:auto;
                                /* background-color:#ff33ff11; */
                                transform:translate(-50%, -50%);
                                .description {
                                    /* background-color:#ff33ff20; */
                                    height:min-content;
                                    max-width:586px;
                                    position:relative;
                                    margin:0 auto;
                                    .title_box{
                                        .hover_icon{
                                            display:none;
                                        }
                                        .icon_vertical{
                                            flex-grow:0;
                                            flex-shrink:0;
                                            display:block; /*縦スクロール時のみ*/
                                            height:clamp(2rem, 2.6666vh, 2.4rem);
                                            aspect-ratio:1;
                                        }
                                    }
                                    .more_button{
                                        display:none;
                                    }
                                }
                            }
                        }
                        .description_back{
                            height:100%;
                            margin:0 auto;
                            /* background-color:#33ffff50; */
                            .section_title{
                                width:fit-content;
                                &::before{
                                    opacity:0;
                                }
                            }
                            .guidance{
                            /* background-color:#33ffff50; */
                                z-index:-1;
                                position:absolute;
                                top:50%;
                                left:50%;
                                transform:translate(-50%, -50%);
                                display:flex;
                                align-items:center;
                                gap:4.1rem;
                                width:max-content;
                                img{
                                    height:11rem;
                                    &.horizontal{display:block;}
                                    &.vertical{display:none;}
                                }
                                .text{
                                    font-size:1.6rem;
                                    line-height:3.5em;
                                    letter-spacing: 0em;
                                    font-weight: 350;
                                    flex-shrink:0;
                                    color: #74BEE4;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

#standby{
    will-change:cx, cy, scale,opacity, fill, fillOpacity;
}

.back_button_area{
    position:relative;
    height:100vh;
    width:50vh;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    .view_all_button{
        display:block;
        position:absolute;
        top:50%;
        left:0%;
        transform:translateY(-50%);
    }
}

#stories_case{
    font-weight: 350;
    line-height: 250%;
    color: var(--default-text-color);
    span{
        letter-spacing: 0em;
    }

    /* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
    backdrop-filterを発動させるためだけのエリア。
    フィルタ対象がデバイスの最大テクスチャサイズを超えると、
    GPUが高い負荷を回避するために自動的にフィルタ処理を放棄してしまう。
    画面に追従してフィルタをかけることで、flex要素の大きなサイズでも対応できる 
    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★*/
    .glass{
        height:100vh;
        width:100vw;
        position:sticky;
        backdrop-filter: blur(3px)!important; 
        -webkit-backdrop-filter: blur(3px); 
        /* background: rgba(255, 255, 255, 0.36);  */
        z-index:-1;
        left:0;
    }
    
    
    #content{
        margin-left:-100vw;/* glass分の空白エリアをつぶす */
        display: flex;
        position: relative;
        section{
            min-width: 1px; 
            min-height: 1px;
            display:flex;
            align-items:center;
            justify-content:left;
            width:max-content; 
        }
    }
    
    .case_image{
        position:relative;
        border-radius:1.3333vh;
        overflow:hidden;
        img{
            height:100%;
        }
    }
    #content section.main {
        display:flex;
        position:relative;
        margin-right:var(--margin-num-large);
        height:100vh;
        width:max-content; 
        background: rgba(255, 255, 255, 0.11);
        overflow: hidden;
        #animations{
            position:relative;
            display:block;
            height: 100%;
            flex-shrink: 0; 
            width: 99.2833vh;
            top: 0;
            left: 0;
            opacity:1;
            .logo {
                position:absolute;
                height: 160.9819vh;
                transform:translate(-57.3240%,-50%);
                width: auto;
                aspect-ratio:1.4469536;
                opacity:1;
                top: 50%;
                .mark_wrapper{
                    position: absolute;
                    height: 100%;
                    aspect-ratio:1.4469;
                    .mark {
                        /* height: 100%;
                        max-width: none;
                        display:block;
                        object-position:right; */
                        /*この要素のみエリアを超過して配置させる*/
                    }
                    .splash_loop_images {
                        height: 55.71813403416557%;
                        aspect-ratio:1;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        right: 0;
                        border-radius:50%;
                        overflow:hidden;
                        img { height: 100%; }
                    }
                }
            }
        }
        
        .description{
            margin-right:var(--margin-num-middle);
            margin-left:8.8888vh;
            h3{
                margin:-6.8rem 0 0 6.2rem;
                font-weight: 500;
                font-size: 2.3rem;
                line-height: 100%;
                color: var(--default-text-color);
            }
            .text{
                /* background:#33ffff33; */
                margin:6.4rem 0 0 6.2rem;
                width:53.6666vh;
            }
            .more_button_wrapper{
                margin-top:6.6666vh;
                width:100%;
                text-align:right;
            }
        }
        .case_image{
            &:nth-of-type(1){
                height:32.1111vh;
                aspect-ratio:1;
                margin:0 0 31vh 0;
            }
            &:nth-of-type(2){
                height:42.4444vh;
                aspect-ratio:1.6125;
                margin:20.6666vh 0 0 10.3333vh;
            }
            &:nth-of-type(3){
                width:113.5555vh;
                aspect-ratio:1.6699;
                padding:20.6666vh 0 0 10.3333vh;
            }
        }
    }
    #content section.topic{
        /* background:#33ffff35; */
        height:100%;
        .wrapper{
            display:flex;
            flex-direction:column;
            height:fit-content;
            gap:5vh;
            h3{
                font-size:10.7777vh;
                font-weight: 100;
                line-height: 100%;
                color: var(--default-text-color);
                opacity: 0.11;
                margin-bottom:1.2222vh;
            }
            p{
                /* margin-left: 4.1111vh; */
                /* margin-left:26.4933vh; */
                font-size:clamp(1.4rem, 1.5555vh, 1.6rem);
                margin-left:16.2222vh;
                width:max(61.5555vh,450px);
                span{ text-wrap:nowrap; }
            }
        }
        &.beginning{
            margin-right:var(--margin-num-large);
            .wrapper{
                align-self:flex-end;
                margin-bottom:13.3333vh;
            }
            .case_image{
                align-self:flex-end;
                margin:0 var(--margin-num-middle) 13.3333vh var(--margin-num-middle);
                img{
                    height:100%;
                }
                &:nth-of-type(1){
                    height:62.7777vh;
                }
                /* &:nth-of-type(2){
                    height:100vh;
                    img{ height:100%; }
                } */
            }
        }
        &.design{
            .wrapper{
                align-self:flex-start;
                margin-top:13.3333vh;
                &:nth-of-type(2){
                    align-self:center;
                    margin-top:0;
                }
            }
            /* p:nth-of-type(3){
                margin-left: 0;
                padding-bottom:18vh;
            } */
            .case_image{
                img{
                    width:100%;
                }
                &:nth-of-type(1){
                    width:143.1111vh;
                    margin:0 var(--margin-num-large) 13.3333vh var(--margin-num-middle);
                }
                &:nth-of-type(2){
                    height:100vh;
                    img{ height:100%; }
                }
                &.middle{

                align-self:flex-start;
                    margin-top:13.3333vh;
                }
            }

            .wrapper.middle{
                margin:0 var(--margin-num-large)  0 0;
            }

            .image_wrapper_1{
                /* background:#33ffff35; */
                align-self:center;
                display:flex;
                width:max-contents;
                align-items:center;
                margin-right:var(--margin-num-small);
                height:61.7777vh;
                .case_image{
                    margin-right:var(--margin-num-small);
                    &:nth-child(1){
                        width:auto;
                        height:100%;
                        margin:0 var(--margin-num-small)  0 0;
                        align-self:center;
                    }
                }
                .image_wrapper_2{
                    /* background:#33ffff35; */
                    display:inline-flex;
                    flex-direction:column;
                    justify-content:space-between;
                    height:100%;
                    .case_image.small{
                        flex-grow:0;
                        &:nth-child(1){
                            display:block;
                            height:26.4vh;
                            width:auto;
                            margin:0;
                            img{ height:100%; }
                        }
                        &:nth-child(2){
                            align-self:center;
                            margin:0;
                            display:block;
                            height:26.4vh;
                            width:auto;
                            img{ height:100%; }
                        }
                    }
                }
            }
            .wrapper.last{
                align-self:center;
                        margin:0 var(--margin-num-large) 0 var(--margin-num-large);
            }
        }
        &.information{
                /* font-size:clamp(1.4rem, 1.5555vh, 1.6rem); */
            margin:0 var(--margin-num-large) 0 0 ;
            .wrapper{
                .info_wrapper{
                    display:flex;
                    flex-direction:column;
                    align-self:center;
                    gap:4.2rem;
                    .info_group{
                        line-height:2.3em;
                        margin-left:26.4933vh;
                        dl{
                            display:flex;
                            flex-direction:column;
                            padding-top:1.4444vh;
                            margin-left:3.5288vh;
                            dt{
                                
                            }
                            dd{
                                margin-left:11em;
                                margin-top:-2.3em;
                            }
                        }
                    }
                }
            }
            h4{
                display:flex;
                align-items:center;
                gap:1.1111vh;
                font-size:clamp(1.8rem,2.4444vh,2.2rem);
                opacity:0.5;
                svg{
                    height:1.0622vh;
                }
            }
        }
    }
}

@property --margin-num-large {
    syntax: '<length>';
    inherits: true;
    initial-value: 70vh; 
}
@property --margin-num-middle {
    syntax: '<length>';
    inherits: true;
    initial-value: 40vh; 
}
@property --margin-num-small {
    syntax: '<length>';
    inherits: true;
    initial-value: 15vh; 
}

.margin-large{
    margin-right:var(--margin-num-large);
}

.padding-large{
    padding-right:var(--margin-num-large);
}

.margin-middle{
    margin-right:var(--margin-num-middle);
}

.margin-small{
    margin-right:var(--margin-num-small);
}

#solution_page{
    font-size:clamp(1.4rem, 1.5555vh, 1.6rem);
    font-weight: 350;
    line-height: 250%;
    color: var(--default-text-color);
    span{
        letter-spacing: 0em;
    }
    /* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
    backdrop-filterを発動させるためだけのエリア。
    フィルタ対象がデバイスの最大テクスチャサイズを超えると、
    GPUが高い負荷を回避するために自動的にフィルタ処理を放棄してしまう。
    画面に追従してフィルタをかけることで、flex要素の大きなサイズでも対応できる 
    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★*/
    .glass{
        height:100vh;
        width:100vw;
        position:sticky;
        backdrop-filter: blur(3px)!important; 
        -webkit-backdrop-filter: blur(3px); 
        /* background: rgba(255, 255, 255, 0.36);  */
        z-index:-1;
        left:0;
    }

    #content{
        margin-left:-100vw;
        display: flex;
        position: relative;
        section{
            display:flex;
            align-items:center;
            justify-content:left;
            width:max-content; 
            &.main {
                display:flex;
                position:relative;
                /* margin-right:var(--margin-num-large); */
                height:100vh;
                width:max-content; 
                background: rgba(255, 255, 255, 0.11);
                overflow: hidden;
                #animations{
                    position:relative;
                    display:block;
                    height: 100%;
                    flex-shrink: 0; 
                    width: 99.2833vh;
                    top: 0;
                    left: 0;
                    opacity:1;
                    .logo {
                        position:absolute;
                        height: 160.9819vh;
                        transform:translate(-57.3240%,-50%);
                        width: auto;
                        aspect-ratio:1.4469536;
                        opacity:1;
                        top: 50%;
                        .mark_wrapper{
                            position: absolute;
                            height: 100%;
                            aspect-ratio:1.4469;
                            .mark {
                                height: 100%;df
                                max-width: none;df
                                display:block;df
                                object-position:right; df
                            }
                            .splash_loop_images {
                                height: 55.71813403416557%;
                                aspect-ratio:1;
                                position: absolute;
                                top: 50%;
                                transform: translateY(-50%);
                                right: 0;
                                border-radius:50%;
                                overflow:hidden;
                                img { height: 100%; }
                            }
                        }
                    }
                }
                
                .description{
                    /* margin-right:var(--margin-num-middle); */
                    margin-left:8.8888vh;
                    h3{
                        margin:-6.8rem 0 0 6.2rem;
                        font-weight: 500;
                        font-size: 2.3rem;
                        line-height: 100%;
                        color: var(--default-text-color);
                    }
                    .wrapper{
                        margin:-5.7rem 0 0 6.2rem;
                        display:flex;
                        flex-direction:column;
                        gap:3.8rem;
                        .text{
                            width:61.5555vh;
                        }
                    }
                }
            }
        }
        .slides{
            display:flex;
            width:400vw;
            ul{
                position:sticky;
                left:0%;
                /* background:#33ffff20; */
                height:100vh;
                width:100vw;
                li{
                    position:absolute;
                    top:50%;
                    left:50%;
                    transform:translateY(-50%);
                    /* background:#33ffff20; */
                    display:flex;
                    height:71vh;
                    width:125vh;
                    justify-content:space-between;
                    will-change:filter;
                    .image_wrapper{
                        flex-shrink:0;
                        aspect-ratio:1;
                        align-self:end;
                        height:97.0266%;
                        img{
                            position:absolute;
                            height:100%;
                            will-change:transform, opacity;
                        }
                    }
                    .steps_description{
                        display:flex;
                        flex-direction:column;
                        height:fit-content;
                        align-self:start;
                        gap:5vh;
                        margin-top:6.6666vh;
                        h3{
                            display:inline-flex;
                            align-items:baseline;
                            justify-content:space-between;
                            /* background:#33ffff20; */
                            color: #74BEE4;
                            overflow:hidden;
                            span{
                            font-style: normal;
                                font-weight: 200;
                                font-size: 5vh;
                                line-height: 100%;
                                    display:inline-block;
                            }
                            .japanese{
                                font-weight: 350;
                                font-size: 1.5555vh;
                                line-height: 100%;
                                text-align: right;
                            }
                        }
                        p{
                            width:45.1111vh;
                        }
                    }
                    &.cycle{
                        img{
                            position:absolute;
                    height:71vh;
                            left:50%;
                            transform:translateX(-50%);
                        }
                    }
                }
            }
        }
        .steps_description_last{
            display:flex;
            flex-direction:column;
            height:100vh;
            justify-content:center;
            align-self:start;
            gap:5vh;
            margin-right:var(--margin-num-large);
            p{
                width:45.1111vh;
                word-break:keep-all;
            }
        }
    }
}

.scroll_down_wrapper{
    position:absolute;
    /* right:6.6666vh; */
    left:0vh;
    bottom:0;
    height:15vh;
    /* background-color:#33ffff33; */
    #scroll_down{
        z-index:-1;
        height:100%;
    }
}

.more_button{
    display:inline-block;
    text-decoration:none;
    color:#74BEE4;
    font-size:clamp(1.4rem,  2.2222vh, 2.1rem);
    font-weight:200;
    height:9.4rem;
    line-height:4.4761em;
    aspect-ratio:1.128;
    filter: drop-shadow(0px 0px 4vh rgba(109, 183, 222, 0.30));
    line-height:9.4rem;
    text-align:center;
    position:relative;
    .button_back{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%, -50%);
        height:100%;
        aspect-ratio:1;
        z-index:-1;
    }
}

#service{
    display:flex;
    align-items:center;
    padding-right:var(--article-margin);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    .intro_image{
        display:flex;
        align-items:center;
        padding-right:var(--article-margin);
        height:100%;
        p{
            padding-right:var(--section-margin);
            margin-bottom:5vh;/* 縦位置調整 */
            font-size:1.6666vh;
            font-weight:350;
            line-height:3.5em;
            letter-spacing: 0.2em;
        }
        .service_image{
            .horizontal{ display:block; }
            .vertical{ display:none; }
            height:78.6666vh;
            picture, img{
                height:100%;
            }
        }
    }
    .main_contents{
        display:flex;
        align-items:center;
        position:relative;
        height:100%;
        /* background-color:#33ffff10; */
        width:max-content;
        .section_title{
            margin-bottom:5.2rem;
        }
        .content{
            display:flex;
            align-items:center;
            width:max-content;
            height:100%;
            .description{
                position: relative;
                width:max-content;
                padding-bottom:13rem;
                h3{
                    position:relative;
                    height:auto;
                    margin-bottom:1.9rem;
                    /* background-color:#33ffff10; */
                    .background{
                        font-size:15.3333vh;
                        line-height:100%;
                        font-weight:100;
                        letter-spacing: -0.04em;
                        background: linear-gradient(180deg, #7BAAD5 15.58%, #B4CFE7 54.49%);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                        background-clip: text;
                        text-fill-color: transparent;
                        opacity: 0.1;
                    }
                    .main{
                        position:absolute;
                        bottom:0;
                        left:0;
                        display:inline-flex;
                        align-items:center;
                        font-size:2.888vh;
                        font-weight:600;
                        line-height:120%;
                        margin-left:-7.262rem;
                        word-break: keep-all;
                        svg{
                            margin-right:2.57rem;
                            height:1em;
                            aspect-ratio:1.2875;
                        }
                    }
                }
                ul{
                    display:inline-flex;
                    width:max-content;
                    overflow:hidden;
                    font-size:1.4rem;
                    color: rgba(137, 201, 233, 0.6);
                    margin-bottom:3.9444vh;
                    font-weight:350;
                    li{
                        line-height:150%;
                        margin-right:1em;
                    }
                }
                .description_text{
                    max-width:350px;
                    width:38.8888vh;
                    font-size:1.6666vh;
                    line-height:3em;
                    letter-spacing: 0.12em;
                    font-weight:350;
                    font-size: 14px;
                    line-height: 250%;
                    color: var(--default-text-color);
                }
            }
            .images{
                display:flex;
                align-items:center;
                width:max-content;
                height:100%;
                /* background-color:#33ffff20; */
                picture{
                    overflow:hidden;
                    border-radius: 1.7777vh;
                    flex-shrink:0;
                    img{
                        object-fit:cover;
                        height:100%;
                    }
                }
                .small_images{
                    position:relative;
                    .back{
                        position:absolute;
                        z-index:0;
                        height:53.5168%;
                    }
                }
            }
        }
        & .service_A .images {
            margin-right:var(--article-margin);
            .main{
                height:52.2222vh;
                aspect-ratio:1.0388;
                align-self:flex-end;
                margin-left:16.2222vh;
                margin-bottom:16.6666vh;
            }
            & .small_images{
                align-self:flex-start;
                margin-top:14.2222vh;
                margin-left:11.5555vh;
                height:49.4444vh;
                aspect-ratio:1.4898;
                .back{
                    top:28.1258%;
                    left:26.7797%;
                }
                & picture:nth-of-type(1){
                    position:absolute;
                    top:0;
                    height:63.3550%;
                }
                & picture:nth-of-type(2){
                    position:absolute;
                    right:0;
                    bottom:0;
                    height:53.0337%;
                }
            }
        }
        & .service_B .images {
            .main{
                height:50.53vh;
                aspect-ratio:1.1331;
                align-self:flex-start;
                margin-left:16.2222vh;
                margin-top:10.5555vh;
            }
            & .small_images{
                align-self:flex-end;
                margin-bottom:14.2222vh;
                margin-left:11.5555vh;
                height:52vh;
                aspect-ratio:1.4038;
                .back{
                    top:28.1258%;
                    left:26.7797%;
                }
                & picture:nth-of-type(1){
                    position:absolute;
                    bottom:0;
                    height:55.4978%;
                }
                & picture:nth-of-type(2){
                    position:absolute;
                    right:0;
                    top:0;
                    height:63.8888%;
                }
            }
        }
    }
}

.br_span{
display: inline-block;
}

.service_content_margin{
    left:26.8012%;
}


#solution{
    display:flex;
    align-items:center;
    width:max-content;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    height:100vh;
    padding-right:60vh;
    .description{
        display:flex;
        flex-direction:column;
        flex-shrink:0;
        margin-bottom:5vh;/* 縦位置調整 */
        .description_text{
            /* margin-left:10.4444vh; */
            margin-left:16.2rem;
            /* margin-bottom:4.3333vh; */
            margin-top:-7.4rem;
            font-size:1.5555vh;
            line-height:3.5em;
            letter-spacing: 0.2em;
            font-weight:350;
            span{
                letter-spacing: 0.1em;
            }
        }
        .more_button{
            align-self:flex-end;
            margin-top:1.6rem;
        }
    }
    img{
        margin-left:21.6666vh;
        height:56.2222%;
        aspect-ratio:1;/* solution_image */
        filter: drop-shadow(0px 0px 6.6666vh rgba(109, 183, 222, 0.15));
    }
}


/* 共通セクションタイトル */
.section_title {
    position:relative;
    width: 24rem;
    aspect-ratio:1;
    border-radius:100%;
    z-index:-1;
    /* background: radial-gradient(49.73% 57.34% at 59.74% 33.37%, rgba(221, 241, 255, 0.2385) 64.42%, rgba(221, 241, 255, 0.53) 97.12%); */
    &::before{
        content:"";
        position:absolute;
        border-radius:100%;
        height:100%;
        z-index:-1;
        width:100%;
        background: rgba(173, 221, 255, 0.18);
        background: radial-gradient(49.73% 57.34% at 59.74% 33.37%, rgba(221, 241, 255, 0.2385) 64.42%, rgba(221, 241, 255, 0.53) 97.12%);
    }
    h2 {
        /* background-color:#ff33ff10; */
        width:100%;
        font-size: 3.8rem;
        font-weight: 200;
        line-height:24rem;
        letter-spacing: -0.016em;
        text-align:center;
        color: #74BEE4;
        overflow: hidden;
        span{
            display:inline-block;
        }
    }
}

.section_title.white{
    h2 {
        color: #ffffff;
    }
}

.section_title_with_japanese{
    .section_title{
        .title_text{
            gap:2.655rem;
            display:flex;
            .japanese{
                color: #74BEE4;
                position:absolute;
                top:0.4rem;
                left:20.4rem;
                white-space:nowrap;
                font-weight:350;
                font-size: 2.2rem;
                line-height: 24rem;
                height: 24rem;
                text-box-trim: trim-end;
                @media screen and (max-width:440px){
                    /* position:absolute;
                    margin: 0;
                    top:9rem;
                    left: 8.35rem;
                    font-size:1.6rem;
                    line-height: 100%; */
                }
            }
        }
    }
}

#philosophy{
    position:relative;
    height:100vh;
    width:500vw;
    overflow:clip;
    .content{
        .section_title {
            z-index:1;
            &::before{
                display:none;
            }
        }
        position:sticky;
        left:0;
        display:flex;
        align-items:center;
        height:100%;
        width:100vw;
        .section_title{
            position:absolute;
            right:72%;
            margin-bottom:5.2rem;
        }
        picture{
            position:absolute;
            height:100%;
            width:100%;
            z-index:-1;
            overflow:hidden;
            img{
                position:absolute;
                top:50%;
                left:50%;
                transform:translate(-50%, -50%) scale(1.1);
                height:100%;
                width:100%;
                object-fit:cover;
            }
        }
    }
    .description_wrapper{
        height:100vh;
        width:100vw;
        position:sticky;
        margin-top:-100vh;
        left:0;
        .description{
            position:absolute;
            top:50%;
            padding:0 13vh;
            right:18vh;
            height:100%;
            font-weight:350;
            font-size: 1.4rem;
            line-height: 8em;
            letter-spacing: 0.2em;
            color: #FFFFFF;
            span{ letter-spacing: 0em; }

            background: rgba(65, 87, 98, 0.14);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            overflow:hidden;
            .text_wrapper{
                margin-top:100vh;
                padding-bottom:calc((100vh - 24em) / 2);
                p{
                    margin-bottom:10em;
                    &:last-child {
                        margin-bottom:0;
                    }
                }
            }
        }
    }
}


#members{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    height:100vh;
    /* width:100vw; */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    width: fit-content;
    padding:0 var(--article-margin);
    .message{
        flex-shrink:0;
        flex-grow:0;
        margin-right:21.4444vh;
        margin-bottom:5vh;
        .description{
            .text{
                /* margin-left:10.4444vh; */
                margin-left:16.2rem;
                margin-top:-7.4rem;
                font-size:1.5555vh;
                line-height:3.5em;
                letter-spacing: 0.2em;
                font-weight:350;
                span{
                    letter-spacing: 0.1em;
                }
            }
            .more_button_wrapper{
                margin-top:1.6rem;
                width:100%;
                text-align:right;
            }
        }
    }
    .scroll_wrapper {
        width:300vw;
        height:100vh;
        .joinus{
            position:sticky;
            left:0;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            height:100%;
            width:100vw;
            .gap{
                width:15vh;
                height:100%;
                flex-shrink:1;
            }
            .description_container{
                display:inline-flex;
                align-items:center;
                justify-content:center;
                height:100%;
                gap:6.1111vh;
                .wrapper{
                    position:relative;
                    height:32.1111vh;
                    aspect-ratio:1.0761;
                    .lid{
                        position:absolute;
                        bottom:0;
                        left:0;
                        height:100%;
                        width:100%;
                        overflow:hidden;
                        border-radius:8.8888vh 8.8888vh 8.8888vh 2.7777vh / 
                        8.8888vh 8.8888vh 8.8888vh 2.7777vh;
                        .image{
                            position:absolute;
                            bottom:0;
                            background-color:#89C9E9;
                            height:32.1111vh;
                            aspect-ratio:1.0761;
                            opacity:0.7;
                            img{
                                position:absolute;
                                left:50%;
                                transform:translateX(-50%);/* human */
                                &:nth-of-type(1){
                                    height:75.7785%;
                                    bottom:0;
                                }
                                &:nth-of-type(2){
                                    height:79.4676%;
                                    top:8.7452%;
                                    opacity:0;
                                }
                            }
                        }
                    }
                }
                .description{
                    width:34.3333vh;
                    .image_vertical{
                        display:none;
                    }
                    h2{
                        display: flex;
                        margin-bottom: 3.3vh;
                        font-weight:100;
                        font-size:6.4444vh;
                        letter-spacing: -0.016rem;
                        color:#56B2E0;
                    }
                    .text{
                        font-size:1.5555vh;
                        line-height:3em;
                        letter-spacing: 0.2em;
                        font-weight:350;
                    }
                    .more_button_wrapper{
                        margin-top:3.3333vh;
                        width:100%;
                        text-align:left;
                    }
                }
                & .description:nth-of-type(3){
                    display:none;
                    &p{
                        opacity:0;
                    }
                    h2{
                        color:rgb(242, 177, 87);
                    }
                    .more_button{
                        p{ color:rgb(242, 177, 87); }
                    }
                }
            }
        }
    }
}

.members_carousel{
    position:relative;
    height:100%;
    width:43.5555vh;
    flex-shrink:0;
    /* background:#33ffff33; */
    ul{
        position:absolute;
        height:auto;
        /* background:#33ffff33; */
        left:50%;
        li{
            position:relative;
            height:29.7777vh;
            margin-bottom:11.6666vh;
            aspect-ratio:1;
            overflow:hidden;
            right:0;
            picture{
                display:block;
                mask-image:url(../image/work_mask.svg);
                mask-size: 100%;
                mask-position: 50% var(--mask-position, 0%);
                mask-repeat: no-repeat;
                height:100%;
                img{
                    height:100%;
                    object-fit:cover;
                }
            }
            .decoration{
                position:absolute;
                height:100%;
                top:0;
            }
        }
    }
}

#members_page{
    article{
        padding-right:var(--margin-num-large);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        display:flex;
        align-items:center;
        /* width: */
        .title{
            width:auto;
            padding-right:var(--margin-num-middle);
            padding-left:38.8888vh;
        }
        .member_list{
            ul{
                display:flex;
                align-items:center;
                gap:30.7777vh;
                li{
                    /* background-color:#33ffff10; */
                    cursor: pointer;
                    max-width:100vw;
                    flex-shrink:1;
                    color: var(--default-text-color);
                    details{
                        display:flex;
                        align-items:center;
                        gap:var(--vh-gap, 0);
                        summary{
                            position:relative;
                            width:var(--vh-width, 31.6666vh);
                            height:var(--vh-height, 54.4444vh);
                            list-style: none;
                            /* max-width:36.9649vw; */
                            max-height:none; /* ★★★ */
                            picture{
                                position:relative;
                                display:block;
                                margin-bottom:6.1111vh;
                                width:var(--vh-width, 31.6666vh);
                                height:var(--vh-height, 31.6666vh);
                                max-width:36.9649vw;
                                max-height:36.9649vw;
                                flex-shrink:1;
                                overflow:hidden;
                                backGround-color:#fff;
                                /* img{
                                    height:100%;
                                    object-fit:cover;
                                } */
                                -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #FFFFFF 74.04%, rgba(255, 255, 255, 0.8) 87.5%, rgba(255, 255, 255, 0.57) 94%, rgba(255, 255, 255, 0.62) 97%, rgba(255, 255, 255, 0.45) 99.5%, rgba(255, 255, 255, 0) 100%);
                                -webkit-mask-size: 100% 100%;
                                -webkit-mask-position: 50% var(--mask-position, 0%);
                                -webkit-mask-repeat: no-repeat;
                                mask-image: radial-gradient(50% 50% at 50% 50%, #FFFFFF 74.04%, rgba(255, 255, 255, 0.8) 87.5%, rgba(255, 255, 255, 0.57) 94%, rgba(255, 255, 255, 0.62) 97%, rgba(255, 255, 255, 0.45) 99.5%, rgba(255, 255, 255, 0) 100%),
                                linear-gradient(to right, 
                                rgba(255, 255, 255, var(--mask-opacity,0)) 0%, 
                                rgba(255, 255, 255, var(--mask-opacity,0)) 100% );
                                mask-size: 100% 100%;
                                mask-position: 50% var(--mask-position, 0%);
                                mask-repeat: no-repeat;

                                img{
                                    height:100%;
                                    aspect-ratio:1;
                                    object-fit:cover;
                                }
                            }
                            .decoration{
                                position:absolute;
                                width:100%;
                                aspect-ratio:1;
                                top:0;
                            }
                            .thumbnail_content{
                                display:flex;
                                flex-direction:column;
                                height:max-contents;
                                align-items:flex-start;
                                margin-left:2vh;
                                .voice{
                                    font-size:1.4rem;
                                    white-space: nowrap;
                                }
                            }
                        }
                        .about{
                            margin-bottom:3.3022vh;
                            h3{
                                font-size:clamp(1.8rem,2.4444vh,2.2rem);
                                margin-bottom:1.0644vh;
                                display:flex;
                                align-items:center;
                                svg{
                                    margin-left:1.2rem;
                                    height:0.805em;
                                }
                            }
                            .sub{
                                white-space: nowrap;
                                display:flex;
                                font-size:1.4rem;
                                font-weight: 350;
                                .name_eng{ 
                                    border-right: 1px solid var(--default-text-color);29;
                                    padding-right:10px;
                                }
                                .position{ 
                                    padding-left:10px;
                                }
                            }
                        }
                        
                        .hider{
                            width:var(--vh-width, auto);
                            .main_contents_wrapper{
                                position:relative;
                                /* background-color:#ff33ff10; */
                                width:77.7777vh;
                                height:52.7777vh;
                                max-width:54.4747vw;
                                max-height:54.4747vw;
                                max-height:36.9649vw;/* ★★★ */
                                border-left:1px solid #C5D6E5;
                                .close{
                                    position:absolute;
                                    right:0;
                                    top:0;
                                    height:6.7777vh;
                                }
                                .main_contents{
                                /* background-color:#33ffff10; */
                                    position:absolute;
                                    top:50%;
                                    left:50%;
                                    transform:translate(-50%,-50%);
                                    width:44.4444vh;
                                    .about h3 svg{
                                        margin-left:2.8888vh;
                                    }
                                    dl{
                                        margin-bottom:7.5555vh;
                                        font-size:clamp(1.2rem, 1.5555vh,1.4rem);
                                        line-height:200%;
                                        font-weight: 350;
                                        color:var(--default-text-color);
                                        dd{
                                            margin-left:8em;
                                            margin-top:-2em;
                                        }
                                    }
                                    .message{
                                        font-size:clamp(1.2rem, 1.5555vh,1.4rem);
                                        line-height:200%;
                                        font-weight: 350;
                                    }
                                }
                            }
                        }
                        
                        summary::-webkit-details-marker {
                            display: none;
                        }
                    }
                }
            }
        }
    }
}

@property --job_info_horizontal_gap {
    syntax: '<number>';      /* 単位のない数値 */
    inherits: true;          
    initial-value: 10.5555; 
}


#joinus_page{
    .firstView{
        position:relative;
        height:100vh;
        width:400vw;
        margin-right: var(--margin-num-middle);
        .section_wrapper{
            position:sticky;
            height:100%;
            width:100vw;
            left:0;
            overflow:hidden;
        }
        .back{
            position:absolute;
            height:100%;
            width:100%;
            .first_image{
                position:absolute;
                left:0;
                width:100vw;
                height:100vh;
                top:50%;
                transform:translateY(-50%);
                img{ 
                    position:absolute;
                    top:50%;
                    transform:translateY(-50%);
                    width:100%;
                    min-height:100vh;
                    object-fit:cover;
                    object-position:center top;
                }
                &.ribbon img{ 
                    top: 77.6111vh; 
                    min-height:auto;
                    mask-image: linear-gradient(
                        to right, black 0%, 
                        black var(--mask-width_ribbon, 0%), 
                        transparent var(--mask-width_ribbon, 0%));
                }
            }
            .catch_copy{
                position:absolute;
                z-index:0;
                top:15vh;
                left:50%;
                transform:translateX(-50%);
                font-size:15.4444vh;
                font-weight: 600;
                color: #FFFFFF;
                opacity: 0.85;
                display:inline-flex;
                flex-direction:column;
                filter: drop-shadow(0px 0px 1vh rgba(24, 91, 129, 0.13));
                .animation{
                    p{
                        height:16.7777vh;
                        display:inline-flex;
                        align-items:center;
                        width:max-content;
                        &>* {
                            flex-shrink: 0;
                        }
                        .element_2{ //a
                            display:block;
                            margin-left:3vh;
                        }
                        .element_3{ //vibrant
                            height:27.5555vh;
                            margin-left:6.8888vh;
                            mask-image: linear-gradient(
                                to right, black 0%, 
                                black var(--mask-width_vibrant, 0%), 
                                transparent var(--mask-width_vibrant, 0%));
                            -webkit-mask-image: linear-gradient(
                                to right, black 0%, 
                                black var(--mask-width_vibrant, 0%), 
                                transparent var(--mask-width_vibrant, 0%));
                            img{ height:100%; object-fit: cover}
                        }
                        .element_5{ //happy
                            height:33.1111vh;
                            margin-left:2.7777vh;
                            mask-image: linear-gradient(
                                to right, black 0%, 
                                black var(--mask-width_happy, 0%), 
                                transparent var(--mask-width_happy, 0%));
                            -webkit-mask-image: linear-gradient(
                                to right, black 0%, 
                                black var(--mask-width_happy, 0%), 
                                transparent var(--mask-width_happy, 0%));
                            img{ height:100%; object-fit: cover}
                        }
                    }
                }
                .catch_copy_img{
                    display:none;
                }
            }
            .scroll_down{
                position:absolute;
                bottom:0;
                right:20.5882vw;
                height:134px;
                width:65px;
            }
        }
        .message_area{
            position:absolute;
            height:100%;
            width:100%;
            /* backdrop-filter:blur(23px); */
            filter: drop-shadow(0px 0px 3px rgba(66, 98, 146, 0.3));
            background: rgba(65, 87, 98, 0.1);
            display:flex;
            .left_area{
                position:relative;
                height:100%;
                width:57%;
                /* background:#33ffff10; */
                .wrapper{
                    position:absolute;
                    top:50%;
                    left:50%;
                    transform:translate(-50%,-50%);
                    /* background:#33ffff10; */
                    height:44.4444vh;
                    width:40vw;
                    color: #FFFFFF;
                    & .section_title_with_japanese {
                        .section_title{
                            &::before{ 
                                background: rgba(221, 241, 255, 0.19);
                            }
                        }
                        .japanese{
                            color: #FFFFFF;
                        }
                        h3{
                            word-break:keep-all;
                            position:absolute;
                            top:17rem;
                            left:min(11rem,7.6388vw);
                            font-size:clamp(2.5rem,3.4444vh,3.1rem);
                            font-weight:350;
                            line-height: 137%;
                        }
                    }
                }
            }
            .right_area{
                position:relative;
                height:100%;
                width:43%;
                .message{
                    position:absolute;
                    top:100%;
                    display:flex;
                    gap:18em;
                    padding:0 0 23.3333vh 0;
                    flex-direction:column;
                    p{
                        font-weight:350;
                        font-size: 1.6666vh;
                        line-height: 8em;
                        letter-spacing: 0.2em;
                        color: #FFFFFF;
                        span{ letter-spacing: 0em; }
                    }
                }
            }
        }
    }
    .recruit_info{
        /* backdrop-filter:blur(4px); */
        height:100%;
        display:flex;
        align-items:center;
        width:max-content;
        .jobs{
            height:100%;
            display:flex;
            align-items:center;
            width:max-content;
            .section_title_with_japanese{
                .section_title{
                    color: #74BEE4;
                    margin-right:20.3333vh;
                }
            }
            ul{
                display:flex;
                width:max-content;
                align-items:center;
                .job_info{
                    cursor: pointer;
                    margin-left:-1px;
                    --job_info_horizontal_gap: 10.5555; /* ← 初期値を設定 */
                    --unit_vh : 1vh;
                    --job_info_width_offset : 0vh;
                    position:relative;
                    border-left: 1px solid #d8e1e9;
                    border-right: 1px solid #d8e1e9;
                    /* width:calc(var(--recruit_info_width) + var(--job_info_width_offset)); */
                    width:var(--recruit_info_width, 18.5555vh);
                    height:var(--recruit_info_height, 54.3333vh);
                    background:#ffffff;
                    details{
                        height:auto;
                        width:100%;
                        /* background:#33ffff10; */
                        summary{
                            position:absolute;
                            height:100%;
                            width:var(--recruit_info_width, auto);
                            list-style: none;
                            .first_title{
                                writing-mode: vertical-rl;
                                position:absolute;
                                top:19.2229%;
                                left:50%;
                                transform:translateX(-50%);
                                font-weight: 400;
                                font-size:2.2222vh;
                                color: #74BEE4;
                            }
                            &::-webkit-details-marker {
                                display: none !important;
                            }
                        }
                        .content_wrapper{
                            position:relative;
                            padding:8.5vh calc(var(--job_info_horizontal_gap) * var(--unit_vh));
                            /* background:#ff33ff10; */
                            height:100%;
                            .second_title{
                                font-weight: 400;
                                font-size: 2.6666vh;
                                line-height: 100%;
                                text-wrap:nowrap; 
                                color: #74BEE4;
                            }
                            .info{
                                margin-top:11.1111vh;
                                padding-left:9.3333vh;
                                display:flex;
                                flex-flow:column wrap;
                                height:51.7777vh;
                                width:max-content;
                                column-gap:11.1111vh;
                                li{
                                    /* background:#ff33ff10; */
                                    h4{
                                        padding: 0.8888vh 3.8888vh;
                                        display:inline-block;
                                        background: #74BEE4;
                                        color:white;
                                        font-size: 2vh;
                                        border-radius: 3.6666vh;
                                    }
                                    .content_text{
                                        margin:4.1666vh 0 4.1666vh 3.6111vh;
                                        max-width:51.8311vh;
                                        font-weight: 400;
                                        font-size: 1.7777vh;
                                        line-height: 150%;
                                        color: var(--default-text-color);
                                    }
                                    &.button_area{
                                        position:relative;
                                        width:17.1111vh;
                                        height:100%;
                                        .view_all_button{
                                            position:relative;
                                            bottom:0;
                                            width:100%;
                                            p{
                                                width:100%;
                                                text-align:center;
                                                letter-spacing: 0;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        .gap{ /* paddingを使用するとbeforeのレイアウトや幅計算で不便なため */
            width:55.5555vh;
            height:100%;
        }
        .last_image{
            display:flex;
            align-items:center;
            height:100%;
            position:relative;
            .message_carousel{
                writing-mode: vertical-rl;
                text-wrap:nowrap; 
                align-self:flex-start;
                font-weight: 600;
                font-size:20vh;
                color: #74BEE4;
                opacity: 0.06;
                margin-left:11.1111vh;
                /* transform: rotate(180deg); */
            }
            .last_message{
                position: relative;
                z-index: 1;
                display:flex;
                align-items:center;
                margin-left:15.5555vh;
                gap:14.5rem;
                .text{
                    color: var(--default-text-color);
                    letter-spacing: 0.2em;
                    font-weight: 400;
                    line-height: 300%;
                    font-size:1.6666vh;
                }

                .view_all_button{
                    align-self:flex-end;
                }
            }
            
            &::before {
                position:absolute;
                content: "";
                height:100%;
                width:100%;
                mask-image:linear-gradient(to right, #ffffff00 0%, #ffffffff 30% );
                backdrop-filter: blur(4px);
                -webkit-backdrop-filter: blur(4px);
            }
        }
    }
    
    .back_button_area{
        width:100vh;
        .view_all_button{
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
        }
    }
}


#news{
    position:relative;
    display:flex;
    align-items:center;
    height:100vh;
    aspect-ratio:1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding-right:var(--article-margin);
    section{
        position:absolute;
        top:50%;
        transform:translateY(-60%);
        .section_title{
            &::before{display:none;}
        }
        ul{
            margin-left:16.2rem;
            margin-top:-7.4rem;
            li{
                background:rgba(255, 255, 255, 0.6);
                border-bottom: solid 1px rgba(116, 190, 228, 0.4);
                &:nth-of-type(3){
                    border-bottom: none;
                }
                a{
                    position:relative;
                    display:flex;
                    align-items:center;
                    height:6.1428em;
                    padding:0 2.8571em;
                    font-size:1.5555vh;
                    letter-spacing: 0.2em;
                    font-weight:350;
                    text-decoration:none;
                    color:#89C8E9;
                    .date{
                        letter-spacing: 0em;
                    }
                    .contents{
                        margin-left:2.8571em;
                        padding-left:2.8571em;
                        border-left:solid 1px rgba(116, 190, 228, 0.4);
                        line-height:1.5em;
                        flex-shrink: 1;
                        flex-grow: 1;
                    }
                    .hover_icon{
                        margin-left:2.8571em;
                        height:1em;
                    }
                }
            }
        }
        .more_button_wrapper{
            margin-top:1.6rem;
            width:100%;
            text-align:right;
        }
    }
}

#contact_page{
    article{
        backdrop-filter:blur(2.5px);
        -webkit-backdrop-filter: blur(2.5px);
        aspect-ratio:1;
        width:100vw;
        padding-top:20vh ;
        .title{
            width:auto;
            margin:0 0 15.5555vh 25.3333vh;
            .note{
                margin-left:10.5555vh;
                line-height: 300%;
                /* または45px */
                letter-spacing: 0.2em;
                font-weight:350;
                font-size:clamp(1.4rem, 1.1111vw, 1.6rem);
                color: var(--default-text-color);
            }
            @media screen and (max-width:900px){
                margin:18rem 0 14rem clamp(5rem, 16.6666vw, 15rem);
                .note{
                    margin-left:0;
                    word-break: keep-all;
                }
            }
        }
        .main_area{
            display:flex;
            justify-content:flex-end;
            flex-direction:row-reverse;
            /* background:#33ffff30; */
            width:100vw;
            position:relative;
            @media screen and (max-width:1080px){
                display:block;
                width:100%;
            }
            .step_indicator_wrapper{
                display:flex;
                flex-direction:column;
                /* background:#ff33ff10; */
                width:24.8611%; /*358px / 1440px*/
                @media screen and (max-width:1080px){
                    width:clamp(5rem, 16.6666vw, 15rem);
                    height:100%;
                    position:absolute;
                    top:0;
                }
                .step_indicator{
                    position:sticky;
                    top:33.8888vh;
                    align-self:flex-start;
                    display:flex;
                    width:100%;
                    /* background:#ff33ff10; */
                    font-weight: 400;
                    color: #D3D3D3;
                    font-size:clamp(1.4rem, 1.25vw, 1.8rem);
                    line-height:2.2777em;
                    @media screen and (max-width:1080px){
                        justify-content:center;
                    }
                    .allow{
                        position:relative;
                        @media screen and (max-width:440px){
                            display:none;
                        }
                        height:2.2777em;
                        /* background:#ffff3330; */
                        .bar{
                            height:100%;
                            width:100%;
                        }
                        .point{
                            position:absolute;
                            right:0;
                            height:100%;
                        }
                        
                        @media screen and (max-width:1080px){
                            aspect-ratio:0.2439;
                            /* margin-left:3.5rem; */
                            .bar{
                                width:0;
                            }
                        }
                    }
                    ul{
                        /* background:#ffff3330; */
                        margin:0 3.5rem;
                        
                        @media screen and (max-width:1080px){
                            margin:0 0 0 1.8rem;
                        }
                        @media screen and (max-width:440px){
                            margin:0;
                        }
                        .now{
                                color:#74BEE4;
                        }
                        li{
                            white-space:nowrap;
                        }
                    }
                }
            }
            .contact_form_wrapper{
                display:flex;
                flex-direction:column;
                flex-shrink:0;
                width:75.1388%;
                /* min-width:100vh; */
                min-width:900px;
                @media screen and (max-width:1080px){
                    min-width:0;
                    width:100%;
                }
                .contact_form{
                    align-self:center;
                    width:61.1413%;
                    box-sizing: border-box;
                    /* min-width:100vh; */
                    min-width:900px;
                    max-width:75.1388%; /*100% - 24.8611%*/
                    padding: 17rem clamp(5rem, 16.6666vw, 15rem) 18rem;
                    background: #ffffff;
                    /* white_shadow */
                    box-shadow: 0px 0px 6.666vh rgba(109, 183, 222, 0.15);
                    border-radius: 3rem;
                    font-weight: 450;
                    font-size:clamp(1.4rem, 1.1111vw, 1.6rem);
                    line-height: 1em;
                    letter-spacing: 0.05em;
                    color: var(--default-text-color);
                    @media screen and (max-width:1080px){
                        width:100%;
                        max-width:none;
                        min-width:0;
                    }
                    ul{
                        display:flex;
                        flex-direction:column;
                        gap:6.4444vh;
                        li{
                            .contact_type{
                                display:flex;
                                gap:3.8rem;
                                flex-wrap:wrap;
                            }
                            color: #2C3A46;
                            .form_name{
                                margin-bottom:1.8rem;
                            }
                            .contact_type_radio{
                                position: absolute;
                                white-space: nowrap;
                                border: 0;
                                clip: rect(0 0 0 0);
                                clip-path: inset(50%);
                                overflow: hidden;
                                height: 1px;
                                width: 1px;
                                margin: -1px;
                                padding: 0;
                                flex-shrink:0;
                                &:checked + .contact_type_label::after { 
                                    background: url(../image/radio_button_checked.svg) no-repeat;
                                }
                                /* 参考：https://kiomiru.co.jp/blog/coding/radio-checkbox/ */
                            }
                            .contact_type_label {
                                position: relative;
                                padding: 0 2.2rem 0 4.1rem;
                                line-height:7.6rem;
                                display:inline-block;
                                height:7.6rem;
                                border-bottom: 1px solid #C5D6E5;
                                cursor: pointer;
                                flex-shrink:1;
                                white-space:nowrap;
                                &::before, &::after{
                                    content: "";
                                    width: 2.731rem;
                                    height: 2.731rem;
                                    display: block;
                                    position: absolute;
                                    left: 0;
                                    top: 50%;
                                    transform:translateY(-50%);
                                    background-size:2.731rem 2.731rem;
                                }
                                &::before {
                                    background: url(../image/radio_button.svg) 
                                    no-repeat;
                                }
                            }
                            .contact_type_check{
                                position: relative;
                                width: 2.7rem;
                                height: 2.7rem;
                                clip: rect(0 0 0 0);
                                clip-path: inset(50%);
                                overflow: hidden;
                                height: 1px;
                                width: 1px;
                                margin: -1px;
                                padding: 0;
                                background: url(../image/checkbox.svg);
                                box-shadow: 0 0 0 0 transparent;
                                /* チェックマーク */
                                &:checked + .label_checkbox::after { 
                                    background: url(../image/checkbox_checked.svg) no-repeat;
                                }
                            }
                            
                            .label_checkbox {
                                position: relative;
                                padding: 0 2.2rem 0 4.1rem;
                                margin-right:3.8rem;
                                line-height:2.7rem;
                                display:inline-block;
                                height:2.7rem;
                                cursor: pointer;
                                &::before, &::after{
                                    content: "";
                                    width: 2.7rem;
                                    height: 2.7rem;
                                    display: block;
                                    position: absolute;
                                    left: 0;
                                    top: 50%;
                                    transform:translateY(-50%);
                                    background-size:2.7rem 2.7rem;
                                }
                                &::before {
                                    background: url(../image/checkbox.svg) no-repeat;
                                }
                            }
                            .text_form{
                                width: 100%;
                                height: 5.4rem;
                                background: #F2F4F8;
                                border-radius: 0.5rem;
                                border:none;
                                padding:0 2.64rem;
                                color: #ADB5B9;
                                box-sizing: border-box;
                                &:focus{
                                    outline: 2px solid #2C3A46;
                                    color: #2C3A46;
                                }
                            }
                            .textarea{
                                padding:2.3rem 2.64rem;
                                height:auto;
                                line-height:160%;
                                resize: vertical;
                                /* &::-webkit-resizer {
                                    border: 2px solid black;
                                    width:22px;
                                    background:  url(../image/resizer.svg) ;
                                    background-size:22px 22px;
                                } */
                            }
                            &.last_area{
                                padding-top:9.6rem;
                                button{
                                    box-sizing: border-box;
                                    width: 100%;
                                    height: 10.2rem;
                                    font-size:clamp(1.4rem, 1.3888vw, 2rem);
                                    background: #74BEE4;
                                    /* border: 1px solid #C5D6E5; */
                                    border:none;
                                    border-radius: 0.5rem;
                                    margin-top:6.75rem;
                                    cursor:pointer;
                                    transition:300ms;
                                    p{
                                        /* color: #2C3A46; */
                                        color:#fff;
                                    }
                                    &:hover{
                                        background: #7ecaf0ff;
                                        transition:200ms;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

footer{
    height:100vh;
    width:100vw;
    display:grid;
    grid-template-columns:22.2222vh auto;
    grid-template-rows:22.2222vh auto 8.3333vh;
    .wrapper{
        position:relative;
        grid-area: 2 / 2 ;
        font-size: 1.7777vh;
        line-height: 100%;
        color: #89C8E9;
        .logo{
            position:absolute;
            bottom:12vh;
            right:0;
            height:4.8888vh;
            width:max-content;
            .type{
                height:100%;
                margin-right:11.1111vh;
            }
        }
        .nav_wrapper{
            position:absolute;
            width:20.7777vh;
            top:0;
            right:0;
            ul{
                margin-right:11.1111vh;
                li{
                    margin-bottom:1.5em;
                    a{
                        display:block;
                        text-decoration:none;
                        color: #89C8E9;
                        text-align:right;
                        font-weight: 200;
                    }
                }
            }
            .back_to_top{
                display:block;
                text-decoration:none;
                color: #89C8E9;
                margin-top:2em;
                padding-left:5.5555vh;
                height:2.25em;
                line-height:2.25em;
                font-weight: 200;
                border-radius: 2.25em 0px 0px 2.25em;
                background: rgba(255, 255, 255, 0.7);
                border: 1px solid rgba(176, 196, 222, 0.23);
                backdrop-filter: blur(2px);
                -webkit-backdrop-filter: blur(2px);
            }
        }
        .bottom_text{
            position:absolute;
            right:11.1111vh;
            bottom:0;
            display:flex;
            small{ font-weight: 200; }
            span{ margin-left:1em; }
            .address{ margin-right:6em; }
        }
    }
    .banner{
        grid-area:3/2;
        position:relative;
        a{
            position:absolute;
            bottom:0;
            right:0;
        }
    }
    &::before { /* ぼかしの緩和 */
        content: "";
        height:100vh;
        width:100vw;
        mask-image:linear-gradient(to right, #ffffffff 0%, rgba(0, 0, 0, 0) 60%);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
}


@property --vertical-margin-small {
    syntax: '<length>';
    inherits: true;
    initial-value: 25vw; 
}
@property --vertical-margin-middle {
    syntax: '<length>';
    inherits: true;
    initial-value: 35vw; 
}
@property --vertical-margin-large {
    syntax: '<length>';
    inherits: true;
    initial-value: 60vw; 
}
@property --vertical-margin-small_SP {
    syntax: '<length>';
    inherits: true;
    initial-value: 25vh; 
}
@property --vertical-margin-middle_SP {
    syntax: '<length>';
    inherits: true;
    initial-value: 35vh; 
}
@property --vertical-margin-large_SP {
    syntax: '<length>';
    inherits: true;
    initial-value: 60vh; 
}

body[data-layout="vertical"]{

    #wrapper {
        width:100vw;
    }

    /* 縦スクロール時はsticky解除　wapperと同じ高さ  */
    #horizontal_wrapper {
        position: relative;
        top: 0;
        width: 100vw;
        height:auto;
        display: block;
        overflow-x: visible; 
        overflow-y: visible;
    }

    
    /* 共通セクションタイトル */
    .section_title {
        /* position:relative; */
        width: 21rem;
        height: 21rem;
        /* border-radius:100%; */
        /* z-index:-1; */
        /* background: radial-gradient(49.73% 57.34% at 59.74% 33.37%, rgba(221, 241, 255, 0.2385) 64.42%, rgba(221, 241, 255, 0.53) 97.12%); */
        /* background: rgba(173, 221, 255, 0.18); */
        h2 {
            /* background-color:#ff33ff10; */
            /* width:100%; */
            font-size: 3.2rem;
            /* font-weight: 200; */
            line-height:21rem;
            /* letter-spacing: -0.016em; */
            /* text-align:center; */
            /* color: #74BEE4; */
            /* overflow: hidden; */
        }
    }

    .section_title_with_japanese{
        .section_title{
            .title_text{
                /* gap:2.655rem;
                display:flex; */
                .japanese{
                    /* color: #74BEE4; */
                    /* position:absolute; */
                    /* top:0.4rem; */
                    /* left:20.4rem; */
                    /* white-space:nowrap; */
                    /* font-weight:350; */
                    font-size: 1.8rem;
                    line-height: 21rem;
                    height: 21rem;
                    /* text-box-trim: trim-end; */
                    @media screen and (max-width:440px){
                        /* position:absolute;
                        margin: 0;
                        top:9rem;
                        left: 8.35rem;
                        font-size:1.6rem;
                        line-height: 100%; */
                    }
                }
            }
        }
    }

    #splash {
        .main {
            .copy_container {
                /* background:#33ffff22; */
                &.moved{
                    height: 12.5rem;
                    width:44.8237%;
                    top:min(102.8621vw, 68.0368vh);
                    left: 50%;
                    transform: translateX(-50%);
                }
                .copy {
                    &.moved {
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        font-size: clamp(2rem, 2.9976vw, 2.3rem);
                        font-weight: 400;
                        text-align: center;
                        letter-spacing: 0.0376em;
                        color: #74BEE4;
                    }
                }
            }
            #animations {
                /* background:#ff33ff22; */
                .logo {
                    /* background:#33ffff22; */
                    .mark_wrapper{
                        /* background:#ff33ff22; */
                        max-width:var(--maxWidthMark, none);
                        max-height:var(--maxHeightMark, none);
                        height: 100%;
                        .mark {
                            /* background:#ffff3322; */
                            width: 100%;
                        }
                    }
                    .type {
                        /* background:#33ffff22; */
                        position: absolute;
                        bottom: 0;
                        height: 100%;
                        width: 100%;
                        right: 0;
                        opacity: 0;
                        .title {
                        }
                    }
                }
            }
        }
    }

    .blur_change_area{
        display:none;
    }
    
    #second_view {
        /* position: relative;
        display: inline-flex; */
        flex-direction:column;
        /* background-color:#ffaaaa20; */
        align-items:flex-start;
        /* align-items: center; */
        /* flex-grow: 1; */
        /* flex-shrink: 0; */
        width: 100vw;
        height: auto;
        /* width:300vw; */
        overflow-x:hidden;
        .flex-container {
            /* background-color:#ffaaaa20; */
            flex-direction:column;
            /* display: flex;
            position:sticky;
            left:0;
            justify-content:center;
            align-items: center; */
            height: auto;
            width: 100vw;
            .left_area{/* 縦レイアウトでは上部*/
                display:none;
                height: auto;
                width:100vw;
                /* background-color:#ffaaaa20; */
                position:sticky;
                top:0;
                z-index:1;
                pointer-events: none;
                ul{
                    li{
                        width:52.0335vw;
                        width:36.3450vh;
                        aspect-ratio:1;
                        position: absolute;
                        left:50%;
                        top:5.7738vh;
                        transform:translate(-50%, 0);
                        .circle_image {
                            position: relative;
                            top:0;
                            left:0;
                            /* max-width: 490px; */
                            /* minwidth:350 */
                            width:100%
                        }
                        picture{
                            /* border-radius:50%;
                            overflow:hidden; */
                            /* box-shadow:0px 0px 4vh rgba(109, 183, 222, 0.15); */
                            /* mask-image:url(../image/work_mask.svg);
                            mask-size: 95%;
                            mask-position: 50% var(--mask-position, 0%);
                            mask-repeat: no-repeat;
                            img{
                                height:100%;
                                object-fit: cover;
                            } */
                        }
                    }
                }
            }
            .right_area {/* 縦レイアウトでは画面全体 */
                /* position: relative;
                backdrop-filter: blur(3px);
                -webkit-backdrop-filter: blur(3px); */
                width:100vw;
                height:auto;
                background: rgba(255, 255, 255, 0.36);
                /* background-color:#ffaaaa20; */
                border-left:none;
                border-top:1px solid ;
                mask-image: none;
                .content_wrapper{
                    position: relative;
                    /* background-color:#ffff3320; */
                    .introduction{
                        display: flex;
                        flex-direction:column;
                        align-items:center;
                        width: max-content;
                        gap:15em;
                        margin:0 auto;
                        padding-top:100vh;
                        padding-bottom:15.75rem;
                                /* background-color:#33ffff20; */
                        p {
                            font-weight:350;
                            font-size:1.5rem;
                            line-height: 8em;
                            letter-spacing: 0.2em;
                            color: var(--default-text-color);
                            text-align:center;
                                /* background-color:#ff33ff20; */
                        }
                    }
                    .stories{
                        /* background-color:#ff33ff20; */
                        li{
                            /* background-color:#ff33ff20; */
                            /* box-sizing:border-box;
                            height:100vh;
                            width:100%;
                            padding:0 2rem; */
                            margin-bottom:var(--section-margin-vertical);
                            
                        }
                    }
                }
            }
        }
    }

    .story_description{
        a{
            text-decoration:none;
        }
        /* background-color:#ff33ff20; */
        .image_vertical{
            margin:0 auto 7.1942vw;
            display:block;
            height:48.5611vw;
            aspect-ratio:1;
            picture{
                img{
                    -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #FFFFFF 74.04%, rgba(255, 255, 255, 0.8) 87.5%, rgba(255, 255, 255, 0.57) 94%, rgba(255, 255, 255, 0.62) 97%, rgba(255, 255, 255, 0.45) 99.5%, rgba(255, 255, 255, 0) 100%);
                    -webkit-mask-size: 95%;
                    -webkit-mask-position: 50% var(--mask-position, 0%);
                    -webkit-mask-repeat: no-repeat;
                    mask-image: radial-gradient(50% 50% at 50% 50%, #FFFFFF 74.04%, rgba(255, 255, 255, 0.8) 87.5%, rgba(255, 255, 255, 0.57) 94%, rgba(255, 255, 255, 0.62) 97%, rgba(255, 255, 255, 0.45) 99.5%, rgba(255, 255, 255, 0) 100%);
                    mask-size: 95% 95%;
                    mask-position: 50% var(--mask-position, 0%);
                    mask-repeat: no-repeat;
                    height:100%;
                    object-fit: cover;
                }
            }
        }
        /* position:relative;
        top:50%;
        transform:translateY(-50%); */
        .description {
            /* height:fit-content; */
            max-width:434px;
            width:min-content;
            /* position:relative;
            margin:0 auto; */
            .top{
            }
            .title_box{
                /* display:flex;
                align-items:center; */
                /* justify-content:start; */
                margin-top:clamp(1.4rem, 2.0383vw, 1.7rem);
                margin-bottom:clamp(2.7rem, 3.717vw, 3.1rem);
                .hover_icon{
                    /* width:5%; */
                    height:clamp(2rem, 2.8776vw, 2.4rem);
                }
                h3 {
                    /* word-break: keep-all; */
                    /* letter-spacing: 0.06em; */
                    font-size: clamp(2rem, 3.1175vw, 2.6rem);
                    /* color: var(--default-text-color); */
                }
            }
            
            .main_wrapper{
                display:flex;
                gap:3rem;
                flex-direction:column;
                align-items:center;
                margin:0 auto;
                .main{
                    /* flex-shrink:0; */
                    /* margin-left:5.5rem; */
                    font-weight:350;
                    /* width:30rem; */
                    /* font-size:1.4rem; */
                    /* line-height:2em; */
                    /* letter-spacing: 0.06em; */
                    /* color: var(--default-text-color); */
                    /* text-align:left; */
                }
                .arrow{
                    height:8.5rem;
                    /* aspect-ratio:1; */
                }
            }
            &::before{
                /* content:""; */
                /* position:absolute; */
                /* border-radius:100%; */
                left:50%;
                top:50%;
                transform:translate(-50%,-50%);
                height:auto;
                width:72.9496vw;
                /* aspect-ratio:1; */
                /* z-index:-1; */
                /* background: rgba(173, 221, 255, 0.21); */
            }
        }
    }
    .view_all_button{
        height:18rem;
        .button_back{
            width:100%;
            height:100%;
            /* position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%, -50%); */
        }
        p{
            /* position:absolute;
            top:50%;
            left:50%;
            font-size:2.2222vh;
            transform:translate(-50%, -50%);
            text-decolation:none;
            font-weight:200;
            color:#74BEE4; */
        }
    }
    
    #stories {
        padding:0 0 var(--article-margin-vertical);
        .stories_list {
            left:50%;
            transform:translateX(-50%);
            padding:0 ;
            flex-direction:column;
            width:100vw;
            .carousel{
                width:max-content;
                display: flex;
                align-items: center;
                padding:0 0 31.1111vh;
                li{
                    padding:0 7.4444vh 0 0 ;
                }
            }
        }
    }

    #service{
        /* display:flex;
        align-items:center; */
        flex-direction:column;
        /* backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px); */
        padding:0 0 var(--article-margin-vertical) 0;
        .intro_image{
            /* display:flex;
            align-items:center; */
            flex-direction:column;
            padding:0 0 var(--article-margin-vertical) 0;
            width:100%;
            /* background-color:#33ffff20; */
            p{
                /* background-color:#ff33ff20; */
                -ms-writing-mode: tb-rl;
                writing-mode: vertical-rl;
                font-family: "Noto Sans JP";
                font-size:1.5rem;
                padding:0 0 var(--section-margin-vertical) 0;
                margin:0 auto;
            }
            .service_image{
                .horizontal{ display:none; }
                .vertical{ display:block; }
                margin:0 auto;
                height:auto;
                width:67.3357vw;
                picture, img{
                    width:100%;
                }
            }
        }
        .main_contents{
            /* display:flex;
            align-items:center;
            position:relative; */
            flex-direction:column;
            height:100%;
            /* background-color:#33ffff10; */
            width:max-content;
            .section_title{
                margin:0 0 7.15rem 0;
            }
            .content{
                /* background-color:#33ffff20; */
                display:flex;
                align-items:center;
                flex-direction:column;
                height:100%;
                .description{
                    /* background-color:#ff33ff20; */
                    position: relative;
                    width:max-content;
                    padding-bottom:12.6rem;
                    h3{
                        position:relative;
                        height:auto;
                        margin-bottom:1.9rem;
                        /* background-color:#33ffff10; */
                        .background{
                            margin-left:7.262rem;
                            font-size:13.0695vw;
                            /* line-height:100%;
                            font-weight:100;
                            letter-spacing: -0.04em;
                            background: linear-gradient(180deg, #7BAAD5 15.58%, #B4CFE7 54.49%);
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                            background-clip: text;
                            text-fill-color: transparent;
                            opacity: 0.1; */
                        }
                        .main{
                            /* background-color:#ffff3320; */
                            /* position:absolute;
                            bottom:0;
                            left:0;
                            display:inline-flex;
                            align-items:center;
                            font-size:2.888vh;
                            font-weight:600;
                            line-height:120%; */
                            margin-left:0;
                            /* svg{
                                margin-right:2.57rem;
                                height:1em;
                                aspect-ratio:1.2875;
                            } */
                        }
                    }
                    ul{
                        margin-left:7.262rem;
                        /* display:inline-flex;
                        width:max-content;
                        overflow:hidden;
                        font-size:1.4rem;
                        color: rgba(137, 201, 233, 0.6);
                        margin-bottom:3.9444vh;
                        font-weight:350;
                        li{
                            line-height:150%;
                            margin-right:1em;
                        } */
                    }
                    .description_text{
                        margin-left:7.262rem;
                        /* max-width:350px;
                        width:38.8888vh;
                        font-size:1.6666vh;
                        line-height:3em;
                        letter-spacing: 0.12em;
                        font-weight:350;
                        font-size: 14px;
                        line-height: 250%;
                        color: var(--default-text-color); */
                    }
                }
                .images{
                    display:flex;
                    align-items:center;
                    flex-direction:column;
                    height:100%;
                    /* background-color:#33ffff20; */
                    picture{
                        /* overflow:hidden;
                        border-radius: 1.7777vh;
                        flex-shrink:0; */
                        img{
                            object-fit:cover;
                            width:100%;
                        }
                    }
                    .small_images{
                        position:relative;
                        height:auto;
                        width:79.4832vw;
                        aspect-ratio:1.4034;
                        .back{
                            position:absolute;
                            z-index:0;
                            height:53.5168%;
                        }
                    }
                }
            }
            & .service_A .images {
                margin-right:0;
                margin-bottom:var(--article-margin-vertical);
                .main{
                    width:58.5491vw;
                    margin:0 auto 9.5923vw;
                }
                & .small_images{
                    align-self:center;
                    margin:0;
                    width:79.4832vw;
                    aspect-ratio:1.4898;
                    & picture:nth-of-type(1){
                        width:59.9622%;
                    }
                    & picture:nth-of-type(2){
                        width:49.8262%;
                    }
                }
            }
            & .service_B .images {
                margin-right:0;
                margin-bottom:var(--article-margin-vertical);
                .main{
                    width:58.5491vw;
                    margin:0 auto 9.5923vw;
                }
                & .small_images{
                    align-self:center;
                    margin:0;
                    & picture:nth-of-type(1){
                        top:0;
                        width:48.7931%;
                    }
                    & picture:nth-of-type(2){
                        right:0;
                        top:auto;
                        bottom:0;
                        width:63.2352%;
                    }
                }
            }
        }
    }

    #solution{
        /* display:flex;
        align-items:center; */
        flex-direction:column;
        height:auto;
        width:100vw;
        padding:0 0 var(--article-margin) 0 ;
        .description{
            display:flex;
            flex-direction:column;
            /* flex-shrink:0; */
            align-items:center;
            /* padding-bottom:2.4444vh;中央寄せ用 */
            .section_title{
                margin:0;
            }
            .description_text{
                /* margin-left:10.4444vh;
                margin-bottom:4.3333vh; */
                margin:73.2613vw 0 0 0;
                /* font-size:1.5555vh; */
                font-size:1.4rem;
                line-height:3.5em;
                letter-spacing: 0.2em;
                font-weight:350;
                span{
                    letter-spacing: 0.1em;
                }
            }
            .more_button{
                align-self:center;
            }
        }
        img{
            margin:41.1270vw 0 0 0;
            width:51.7985vw;
            height:51.7985vw;
            position:absolute;
        }
    }

    #philosophy{
        /* position:relative; */
        height:auto;
        width:100vw;
        .content{
            /* position:sticky; */
            top:0;
            /* display:flex; */
            /* align-items:center; */
            height:100vh;
            width:100%;
            .section_title{
                /* position:absolute; */
                right:50%;
                transform:translateX(50%);
                margin-bottom:5.2rem;
            }
            picture{
                position:absolute;
                height:100%;
                width:100%;
                z-index:-1;
                overflow:hidden;
                img{
                    position:absolute;
                    top:50%;
                    left:50%;
                    transform:translate(-50%, -50%) scale(1.1);
                    height:100%;
                    width:100%;
                    object-fit:cover;
                }
            }            
        }
        .description_wrapper{
            height:auto;
            width:100vw;
            position:relative;
            top:0;
            margin-top:-25vh;
            .description{
                position:relative;
                /* top:0; */
                /* transform:none; */
                /* padding:0; */
                right:0;
                left:50%;
                width:fit-content;
                

                background: rgba(65, 87, 98, 0.14);
                backdrop-filter: blur(6px);
                -webkit-backdrop-filter: blur(6px);
                overflow:hidden;
                border-radius:1.8em;
                .text_wrapper{
                    margin:0;
                    padding:6rem 0 var(--article-margin-vertical);
                    p{
                        margin-bottom:10em;
                        &:last-child {
                            margin-bottom:0;
                        }
                    }
                }
            }
        }
    }


    #members{
        display:flex;
        align-items:center;
        flex-direction:column;
        width:100vw;
        height: fit-content;
        padding:var(--article-margin-vertical) 0;
        /* background-color:#33ffff20; */
        .message{
            /* background-color:#33ffff20; */
            flex-shrink:0;
            flex-grow:0;
            /* margin-right:10vh; */
            margin:0 0 9.8321vw 0;
            .description{
                /* background-color:#ff33ff20; */
                .section_title{
                    margin:0 auto 10rem;
                }
                .text{
                    /* margin-left:10.4444vh; */
                    /* margin:16.2rem;
                    margin-top:-7.4rem; */
                    margin:0;
                    font-size:1.4rem;
                    /* line-height:3.5em;
                    letter-spacing: 0.2em;
                    font-weight:350;
                    span{
                        letter-spacing: 0.1em;
                    } */
                }
                .more_button_wrapper{
                    .more_button{
                        display:block;
                        margin:0 auto;
                    }
                }
            }
        }
        .scroll_wrapper {
            width:100vw;
            height:auto;
            .joinus{
                flex-direction:column;
                position:relative;
                /* left:0;
                display:inline-flex; */
                align-items:center;
                justify-content:center;
                height:100%;
                width:100vw;
                .gap{
                    width:23.1111vh;
                    height:100%;
                    flex-shrink:1;
                }
                .description_container{
                    /* display:inline-flex; */
                    flex-direction:column;
                    /* align-items:center;
                    justify-content:center; */
                    justify-content:start;
                    width:100%;
                    gap:0;
                    .wrapper{
                        display:none;/* 
                        position:relative;
                        height:32.1111vh;
                        aspect-ratio:1.0761;
                        .lid{
                            position:absolute;
                            bottom:0;
                            left:0;
                            height:100%;
                            width:100%;
                            overflow:hidden;
                            border-radius:8.8888vh 8.8888vh 8.8888vh 2.7777vh / 
                            8.8888vh 8.8888vh 8.8888vh 2.7777vh;
                            .image{
                                position:absolute;
                                bottom:0;
                                background-color:#89C9E9;
                                height:32.1111vh;
                                aspect-ratio:1.0761;
                                opacity:0.7;
                                img{
                                    position:absolute;
                                    left:50%;
                                    transform:translateX(-50%);
                                    &:nth-of-type(1){
                                        height:75.7785%;
                                        bottom:0;
                                    }
                                    &:nth-of-type(2){
                                        height:79.4676%;
                                        top:8.7452%;
                                        opacity:0;
                                    }
                                }
                            }
                        } */
                    }
                    .description{
                        position:relative;
                        display:flex;
                        flex-direction:column;
                        align-items:center;
                        width:52.0383vw;
                        height:max-content;
                        /* background:#33ffff33; */
                        .image_vertical{
                            display:block;
                            position:relative;
                            width:34.0527vw;
                            aspect-ratio:1;
                            opacity:0.7;
                            margin-bottom:2.5179vw;
                            mask-position: center;
                            mask-size: contain;
                            mask-repeat:no-repeat;
                            mask-image: url("data:image/svg+xml,%3Csvg width='285' height='285' viewBox='0 0 285 285' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M284.01 142.011C284.15 165.761 282.42 190.031 273.64 212.331C256.44 256.721 217.79 278.751 171.78 282.871C161.93 283.821 151.95 284.041 142.01 284.021C132.07 284.041 122.09 283.821 112.24 282.871C66.2298 278.751 27.5798 256.721 10.3798 212.331C1.5998 190.031 -0.130204 165.761 -0.00020407 142.011C-0.140204 118.261 1.5898 93.9912 10.3698 71.6912C27.5698 27.3012 66.2198 5.27121 112.23 1.15121C122.08 0.201211 132.06 -0.0187833 142 0.00121667C151.94 -0.0187833 161.92 0.201211 171.77 1.15121C217.78 5.27121 256.43 27.3012 273.63 71.6912C282.41 93.9912 284.14 118.261 284 142.011H284.01Z' fill='%230000FF'/%3E%3C/svg%3E%0A");
                            img{
                                position:absolute;
                                left:50%;
                                transform:translateX(-50%);
                            }
                        }
                        h2{
                            display: flex;
                            margin-bottom: 3.3vh;
                            /* font-weight:100; */
                            font-size:6.9544vw;
                            /* letter-spacing: -0.016rem; */
                            color:#56B2E0;
                        }
                        .text_wrapper{
                            display:flex;
                            flex-direction:column;
                            width:max-content;
                            align-items:center;
                            text-align:center;
                        }
                        .text{
                            font-size:1.5555vh;
                            line-height:3em;
                            letter-spacing: 0.2em;
                            font-weight:350;
                        }
                        .more_button_wrapper{
                            margin-top:3.3333vh;
                            width:auto;
                        }
                    }
                    & .description:nth-of-type(2){
                        margin-bottom:var(--section-margin-vertical);
                        .image_vertical{
                            background:#89C9E9;
                            img{
                                bottom:0;
                                height:79.4676%;
                            }
                        }
                    }
                    & .description:nth-of-type(3){
                        .image_vertical{
                            background:#F2B157;
                            img{
                                height:79.4676%;
                                top:8.7452%;
                            }
                        }
                        .text_wrapper{
                            h2{ color:#F2B157; }
                        }
                    }
                }
            }
        }
    }

    .members_carousel{
        /* flex-shrink:0; */
        /* position:relative; */
        width:100vw;
        overflow:hidden;
        height:57.3141vw;
        /* margin-bottom:23.9808vw; */
        ul{
            position:absolute;
            display:flex;
            height:32.1342vw;
            li{
                /* height:100%; */
                /* position:relative; */
                /* margin-bottom:4vh; */
                /* border-radius:100%; */
                /* overflow:hidden; */
                height:100%;
                /* width:32.1342vw; */
                margin:0 12.5899vw 0 0;
                right:0;
                picture{
                    display:block;
                    mask-image:url(../image/work_mask.svg);
                    mask-size: 100%;
                    mask-position: 50% var(--mask-position, 0%);
                    mask-repeat: no-repeat;
                    height:100%;
                    img{
                        width:100%;
                        object-fit:cover;
                    }
                }
                .decoration{
                    position:absolute;
                    height:100%;
                    top:0;
                }
            }
        }
    }

    #news{
        /* position:relative; */
        width:100vw;
        height:83.9328vw;/* 何故子要素から絶対に高さを取れないのか */
        /* height:fit-content; */
        aspect-ratio:auto;
        /* backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px); */
        /* background:#ffff3333; */
        padding:0 0 var(--article-margin-vertical);
        section{
            /* background:#33ffff33; */
            width:100%;
            display:inline-flex;
            align-items:center;
            flex-direction:column;
            /* height:max-content; */
            .section_title{
                /* height:3.8rem;
                background:transparent;
                margin-bottom:107222rem;
                h2{ 
                    text-align:center; 
                    line-height:3.8rem;
                } */
            }
            .section_title{
                margin-bottom:9.65rem;
                background:transparent;
                h2{ text-align:center; }
            }
            /* position:absolute; */
            top:auto;
            transform:none;
            ul{
                margin-left:0;
                li{
                    /* background:rgba(255, 255, 255, 0.6);
                    border-bottom: solid 1px rgba(116, 190, 228, 0.4);
                    &:nth-of-type(3){
                        border-bottom: none;
                    } */
                    a{
                        /* position:relative;
                        display:flex;
                        align-items:center;
                        height:6.1428em; */
                            /* background:#33ffff33; */
                        max-width:500px;
                        padding:0 2.1em;
                        font-size:1.5555vh;
                        letter-spacing: 0.2em;
                        font-weight:350;
                        text-decoration:none;
                        .date{
                            letter-spacing: 0em;
                            /* background:#ff33ff33; */
                        }
                        .contents{
                            /* margin-left:2.8571em;
                            padding-left:2.8571em; */
                            /* border-left:solid 1px rgba(116, 190, 228, 0.4); */
                            /* line-height:1.5em;
                            flex-shrink: 1;
                            flex-grow: 1; */
                            /* background:#ffff3333; */
                            letter-spacing: 0em;
                        }
                        .hover_icon{
                            display:none;
                            /* margin-left:2.8571em;
                            height:1em; */
                        }
                    }
                }
            }
            .more_button_wrapper{
                margin-top:7rem;
                width:auto;
                text-align:right;
            }
        }
    }

    footer{
        &::before {
            mask-image:linear-gradient(to bottom, #ffffffff 0%, rgba(0, 0, 0, 0) 60%);
        }
    }

    &#stories_home {
        #stories_page {
            /* background-color:#33ffff11; */
            /* padding:0; */
            width:100vw;
            .stories_list {
                position:relative;
                /* left:0; */
                width:100vw;
                height:100svh;
                /* transform:translateY(0);  */
                overflow:hidden;
                /* background-color:#ffff3333; */
                .area_wrapper{
                    width:100%;
                    /* margin:0 auto; */
                    /* background-color:#ffff3311; */
                    display:block;
                    /* align-items:center; */
                    /* justify-content:center; */
                    /* gap:20.2222vh; */
                    .left_area{/* 縦レイアウトでは画面全体*/
                        position:absolute;
                        top:0;
                        left:0;
                        height:53.6013svh;
                        width:100%;
                        z-index:1;
                        /* background-color:#33ff9920; */
                        overflow-x: scroll;
                        overflow-y: visible;
                        /* ---  Chrome, Safari, Edge --- */
                        /* &::-webkit-scrollbar {
                            display: none; 
                        } */
                        /* Firefox*/
                        /* scrollbar-width: none; */
                        .carousel{
                            /* background-color:#33ff9910; */
                            padding:0 11.9904vw;
                            /* padding-right:0; 229338*/
                            /* position:absolute; */
                            height:41.8465vw;
                            left:0%;
                            bottom:0;
                            display:flex;
                            flex-direction:row;
                            align-items:flex-start;
                            gap:8.0335vw;
                            li{
                                margin-top:12.9496vw;
                                width:23.3812vw;
                                height:23.3812vw;
                                /* a{
                                    border-radius:100%;
                                    display:block;
                                    svg{
                                        position:absolute;
                                        height:100%;
                                        aspect-ratio:1;
                                        top:0;
                                    }
                                }
                                .top{
                                    position: absolute;
                                    bottom: 0;
                                    left:50%;
                                    transform:translateX(-50%);
                                    padding-bottom:13.3410%;
                                    width: 100%;
                                    line-height:100%;;
                                    font-weight: 350;
                                    text-shadow: 0px 0px 4px #FFFFFF;
                                    font-size:clamp(1.5rem,1.5555vh,1.5555vh);
                                    opacity:0.8;
                                    pointer-events:none;
                                    span{
                                        white-space:nowrap;
                                        width: 100%;
                                        text-align:center;
                                    }
                                    .industry{ 
                                        border:none;
                                        padding:0;
                                    }
                                } */
                            }
                            /* li:last-child {
                                margin-bottom:0;
                            } */
                        }
                    }
                    .right_area{
                        position:relative;
                        height:100svh;
                        width:100vw;
                        /* background-color:#ff33ff11; */
                        .section_title{
                            margin:0 auto;
                            top:10%;
                            h2{
                                line-height:100%;
                            }
                        }
                        .inner{
                            position:absolute;
                            top:0%;
                            transform:translateY(0%);
                            height:100svh;
                            width:100%;
                            /* background-color:#33ffff10; */
                            ul{
                                /* padding:0; */
                            /* background-color:#ffff3311; */
                                position:absolute;
                                width:100%;
                                height:100%;
                                top:0%;
                                transform:translateY(0%);
                                li{
                                    /* position:absolute; */
                                    /* left:50%; */
                                    top:56.5326%;
                                    /* left:50%; */
                                    transform:translate(-50%, 0%);
                                    /* height:fit-content; */
                                    /* background-color:#ff33ff11; */
                                    .description {
                                        position:relative;
                                        margin:0 auto;
                                        z-index:11;
                                        width:fit-content;
                                        /* background-color:#ff33ff20; */
                                        height:max-content;
                                        max-width:59.9520vw;
                                        .top{
                                            margin-left:0;
                                            span{
                                            }
                                            .industry{ 
                                            }
                                        }
                                        .title_box{
                                            gap:1.3rem;
                                            h3{word-break:keep-all;}
                                        }
                                        .tag{
                                            margin-left:0;
                                        }
                                        .main{ display:none }
                                        .more_button{
                                            display:block;
                                            margin:0 auto;
                                        }
                                        &::before{
                                            display:none;
                                        }
                                    }
                                }
                            }
                            .description_back{
                                /* height:100%;
                                margin:0 auto; */
                                /* background-color:#33ffff50; */
                                /* .section_title{
                                    height:3.8rem;
                                    width:min-content;
                                    h2{
                                        height:3.8rem;
                                        line-height:3.8rem;
                                    }
                                } */
                                .guidance{
                                    /* background-color:#33ffff50; */
                                    /* position:absolute; */
                                    top:auto;
                                    bottom:15svh;
                                    /* left:50%; */
                                    transform:translate(-50%, 0%);
                                    /* display:flex; */
                                    /* align-items:center; */
                                    /* gap:4.1rem; */
                                    /* width:max-content; */
                                    flex-direction:column;
                                    gap:2.1875em;
                                    font-size:clamp(1.4rem,1.9184vw,1.6rem);
                                    img{
                                        height:3.4375em;
                                        &.horizontal{display:none;}
                                        &.vertical{display:block;}
                                    }
                                    .text{
                                        font-size:clamp(1.4rem,1.9184vw,1.6rem);
                                        /* line-height:3.5em;
                                        letter-spacing: 0.2em;
                                        font-weight: 350;
                                        flex-shrink:0; */
                                        /* color: #74BEE4; */
                                        /* span{
                                            letter-spacing: 0em;
                                        } */
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        .back_button_area{
            height:var(--article-margin-vertical);
            width:100vw;
            .view_all_button{
                top:0;
                left:50%;
                transform: translateX(-50%);
            }
        }
    }

    &#stories_case{
        font-size:clamp(1.4rem, 1.9184vw, 1.6rem);

        /* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
        backdrop-filterを発動させるためだけのエリア。
        フィルタ対象がデバイスの最大テクスチャサイズを超えると、
        GPUが高い負荷を回避するために自動的にフィルタ処理を放棄してしまう。
        画面に追従してフィルタをかけることで、flex要素の大きなサイズでも対応できる 
        ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★*/
        .glass{
            /* height:100vh;
            width:100vw; */
            /* position:sticky; */
            /* backdrop-filter: blur(3px)!important;  */
            /* -webkit-backdrop-filter: blur(3px);  */
            z-index:-1;
            left:auto;
            top:0;
        }
        
        
        #content{
            margin:0;
            display: flex;
            flex-direction:column;
            position: relative;
            /* section{
                display:flex;
                align-items:center;
                justify-content:left;
                width:max-content; 
            } */
        } 
        
        .case_image{
            position:relative;
            border-radius:1.3333vh;
            overflow:hidden;
            img{
                height:100%;
            }
        }
        #content section.main {
            margin-top:-100vh;/* glass分の空白エリアをつぶす */
            margin-bottom:var(--vertical-margin-middle);

            height:max-content;
            width:100vw; 
            /* display:flex; */
            flex-direction:column;
            /* position:relative; */
            /* overflow: hidden; */
            #animations{
                /* position:relative;
                display:block;
                width: 100%;
                flex-shrink: 0;  */
                height: 103.4532vw;
                transform:translate(0,-4.8999%);
                width:100%;
                top: 0;
                left: 0;
                opacity:1;
                .logo {
                    position:absolute;
                    height: 100;
                    width:100%;
                    transform:translate(-50%, 0);
                    aspect-ratio:auto;
                    opacity:1;
                    top: 0%;
                    left:50%;
                    .mark_wrapper{
                        position: absolute;
                        right:max(18.9598vw, 18.9598vw + calc(100vw - 69.8492vh) * 0.314356);
                        width: 160.97242vw;
                        height: 111.3872vw;
                        max-width:112.4380vh;
                        max-height:77.8031vh;
                        aspect-ratio:auto;
                        .mark {
                            /* height: 100%;
                            max-width: none;
                            display:block;
                            object-position:right; */
                            /*この要素のみエリアを超過して配置させる*/
                        }
                        .splash_loop_images {
                            height: 55.71813403416557%;
                            aspect-ratio:1;
                            position: absolute;
                            top: 50%;
                            transform: translateY(-50%);
                            right: 0;
                            border-radius:50%;
                            overflow:hidden;
                            img { height: 100%; }
                        }
                    }
                }
            }
            
            .description{
                margin:0 0 var(--vertical-margin-middle)  0;
                display: flex;
                flex-direction:column;
                align-items:center;
                .section_title{
                        height:11.2rem;
                    h2{
                        line-height:11.2rem;
                    }
                    &::before{
                        height:24rem;
                        width:24rem;
                        left:50%;
                        top:50%;
                        transform:translate(-50%,-50%);
                        z-index:-1;
                    }
                }
                h3{
                    margin:0 0 6.4rem 0;
                    font-weight: 500;
                    font-size: 2.3rem;
                    line-height: 100%;
                    color: var(--default-text-color);
                }
                .text{
                    /* background:#33ffff33; */
                    margin:0 0 00;
                    width:min(432px,90vw);
                }
                /* .more_button_wrapper{
                    margin-top:6.6666vh;
                    width:100%;
                    text-align:right;
                } */
            }
            .case_image{
                &:nth-of-type(1){
                    align-self:flex-start;
                    width:32.7338vw;
                    height:auto;
                    /* aspect-ratio:1; */
                    margin:0 0 16.0239vw 14.0287vw;
                }
                &:nth-of-type(2){
                    width:68.9424vw;
                    align-self:flex-end;
                    height:auto;
                    /* aspect-ratio:1.6125; */
                    margin:0 9.3525vw 16.0239vw 0;
                }
                &:nth-of-type(3){
                    width:113.5555vh;
                    aspect-ratio:1.6699;
                    padding:20.6666vh 0 0 10.3333vh;
                }
            }
        }
        #content section.topic{
            /* background:#33ffff35; */
            flex-direction:column;
            height:auto;
            width:100%;
            .wrapper{
                display:flex;
                flex-direction:column;
                height:fit-content;
                gap:5.6rem;
                h3{
                    font-size:11.6306vw;
                    font-weight: 100;
                    line-height: 100%;
                    color: var(--default-text-color);
                    opacity: 0.11;
                    margin-bottom:0;
                }
                p{
                    font-size:clamp(1.4rem,1.6786vw,1.6rem);
                    margin:0;
                    width:min(432px,90vw);
                    span{ text-wrap:nowrap; }
                }
            }
            &.beginning{
                width:100%;
                margin-right:0;
                /* background:#33ffff35; */
                margin:0 0 var(--vertical-margin-large) 0;
                .wrapper{
                    width:100%;
                    margin-right:0;
                    align-self:center;
                    margin:0 0 0 0;
                    h3{
                        align-self:flex-start;
                        margin:0 0 4.4rem 9.3525vw;
                    }
                    p{
                        align-self:center;
                    }
                    &:nth-of-type(1){
                        margin:0 0 var(--vertical-margin-small) 0;
                    }
                }
                .case_image{
                    align-self:center;
                    margin:0 0 var(--vertical-margin-middle) 0;
                    width:90.2877vw;
                    height:auto;
                    img{
                        width:100%;
                    }
                    /* 
                    &:nth-of-type(1){
                        height:62.7777vh;
                    }
                    /* &:nth-of-type(2){ */
                        /* height:100vh;
                        img{ height:100%; }
                    } */ 
                }
            }
            &.design{
                margin:0 0 var(--vertical-margin-large) 0;
                .wrapper{
                    flex-direction:column;
                    width:100%;
                    margin:0 0 var(--vertical-margin-small) 0;
                    align-self:flex-end;
                    h3{
                        align-self:flex-end;
                        margin:0 9.3525vw 4.4rem 0;
                    }
                    p{
                        align-self:center;
                    }
                    &:nth-of-type(2){
                        align-self:center;
                    }
                }
                /* p:nth-of-type(3){
                    margin-left: 0;
                    padding-bottom:18vh;
                } */
                .case_image{
                    img{
                        height:100%;
                    }
                    &:nth-of-type(1){
                        align-self:center;
                        margin:0 0 var(--vertical-margin-small) 0;
                        width:90.2877vw;
                        height:auto;
                        img{
                            width:100%;
                        }
                    }
                    &:nth-of-type(2){
                        height:100vh;
                        img{ height:100%; }
                    }
                    &.middle{
                        margin:0 0 var(--vertical-margin-middle) 0;
                        align-self:flex-center;
                    }
                }



                .image_wrapper_1{
                    /* background:#33ffff35; */
                    /* align-self:center; */
                    /* display:flex; */
                    height:max-contents;
                    width:100%;
                    align-items:center;
                    flex-direction:column;
                    width:81.2949vw;
                    height:auto;
                    margin:0 0 0 0;
                    .case_image{
                        &:nth-child(1){
                            width:auto;
                            height:100%;
                            margin:0 0 var(--vertical-margin-small) 0;
                            align-self:center;
                        }
                        &:nth-child(2){
                        }
                    }
                    .image_wrapper_2{
                        /* background:#33ffff35; */
                        /* display:inline-flex; */
                        /* flex-direction:column; */
                        /* justify-content:space-between; */
                        width:100%;
                        .case_image.small{
                            margin:0 0 var(--vertical-margin-small) 0;
                            /* flex-grow:0; */
                            &:nth-child(1){
                                align-self:flex-start;
                                display:block;
                                height:auto;
                                width:59.2673vw;
                                margin:0 0 11.8261vw 0;
                                img{ width:100%; }
                            }
                            &:nth-child(2){
                                align-self:flex-end;
                                margin-right:0;
                                display:block;
                                height:auto;
                                width:59.2673vw;
                                img{ width:100%; }
                            }
                        }
                    }
                }
                .wrapper.last{
                    align-self:center;
                    width:100%;
                    height:auto;
                    margin:0;
                }
            }
            &.information{
                width:100%;
                .wrapper{
                width:100%;
                    h3{
                        margin:0 0 0 9.3525vw;
                    }
                    .info_wrapper{
                        .info_group{
                            line-height:230%;
                            margin:0;
                            dl{
                                padding-top:1.4444vh;
                                margin-left:3.5288vh;
                                dt{
                                    
                                }
                                dd{
                                    margin-left:16.6666vh;
                                    margin-top:-3.5555vh;
                                }
                            }
                        }
                    }
                    
                    h4{
                        display:flex;
                        align-items:center;
                        gap:1.1111vh;
                        font-size:2.4444vh;
                        opacity:0.5;
                        svg{
                            height:1.0622vh;
                        }
                    }
                }
            }
            #last_image{
                margin:0 0 var(--vertical-margin-middle) 0;
                width:81.2949vw;
            }
        }
        
        .back_button_area{
            height:80vh;
            width:100vw;
            .view_all_button{
                top:50%;
                left:50%;
                transform:translate(-50%,-50%);
            }
        }
    }


    &#solution_page{
        font-size:clamp(1.4rem, 1.9184vw, 1.6rem);

        /* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
        backdrop-filterを発動させるためだけのエリア。
        フィルタ対象がデバイスの最大テクスチャサイズを超えると、
        GPUが高い負荷を回避するために自動的にフィルタ処理を放棄してしまう。
        画面に追従してフィルタをかけることで、flex要素の大きなサイズでも対応できる 
        ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★*/
        .glass{
            /* height:100vh;
            width:100vw; */
            /* position:sticky; */
            /* backdrop-filter: blur(3px)!important;  */
            /* -webkit-backdrop-filter: blur(3px);  */
            z-index:-1;
            left:auto;
            top:0;
        }
        
        
        #content{
            margin:0;
            display: flex;
            flex-direction:column;
            position: relative;
            /* section{
                display:flex;
                align-items:center;
                justify-content:left;
                width:max-content; 
            } */
        } 
        
        
        #content{
            /* margin:0;glass分の空白エリアをつぶす */
            /* display: flex; */
            flex-direction:column;
            /* position: relative; */
            section{
                /* min-width: 1px;  */
                /* min-height: 1px; */
                /* display:flex; */
                /* align-items:center; */
                /* justify-content:left; */
                /* width:max-content;  */
                &.main {
                    margin-top:-100vh;/* glass分の空白エリアをつぶす */
                    margin-bottom:var(--vertical-margin-middle);
                    height:max-content;
                    width:100vw; 
                    display:flex;
                    flex-direction:column;
                    /* position:relative; */
                    /* overflow: hidden; */
                    #animations{
                        /* position:relative;
                        display:block;
                        width: 100%;
                        flex-shrink: 0;  */
                        height: 103.4532vw;
                        transform:translate(0,-4.8999%);
                        width:100%;
                        top: 0;
                        left: 0;
                        opacity:1;
                        .logo {
                            position:absolute;
                            height: 100;
                            width:100%;
                            transform:translate(-50%, 0);
                            aspect-ratio:auto;
                            opacity:1;
                            top: 0%;
                            left:50%;
                            .mark_wrapper{
                                position: absolute;
                                right:max(18.9598vw, 18.9598vw + calc(100vw - 69.8492vh) * 0.314356);
                                width: 160.97242vw;
                                height: 111.3872vw;
                                max-width:112.4380vh;
                                max-height:77.8031vh;
                                aspect-ratio:auto;
                                .mark {
                                    /* height: 100%;
                                    max-width: none;
                                    display:block;
                                    object-position:right; */
                                    /*この要素のみエリアを超過して配置させる*/
                                }
                                .splash_loop_images {
                                    height: 55.71813403416557%;
                                    aspect-ratio:1;
                                    position: absolute;
                                    top: 50%;
                                    transform: translateY(-50%);
                                    right: 0;
                                    border-radius:50%;
                                    overflow:hidden;
                                    img { height: 100%; }
                                }
                            }
                        }
                    }
                    
                    .description{
                        margin:0 0 var(--vertical-margin-middle)  0;
                        display: flex;
                        flex-direction:column;
                        align-items:center;
                        .section_title{
                            height:11.2rem;
                            h2{
                                line-height:11.2rem;
                            }
                            &::before{
                                height:24rem;
                                width:24rem;
                                left:50%;
                                top:50%;
                                transform:translate(-50%,-50%);
                                z-index:-1;
                            }
                        }
                        .wrapper{
                            margin:0;
                            .text{
                                /* background:#33ffff33; */
                                margin:0 0 0 0;
                                width:min(432px,90vw);
                                .br_horizontal{
                                    display:none;
                                }
                            }
                        }
                    }
                }
            }
            .slides{
                /* display:flex; */
                flex-direction:column;
                width:100vw;
                height:max-content;
                ul{
                    position:relative;
                    /* left:0%; */
                    /* background:#33ffff20; */
                    height:auto;
                    width:100vw;
                    li{
                        flex-direction:column;
                        position:relative;
                        top:0%;
                        left:0%;
                        transform:translateY(0%);
                        /* background:#33ffff20; */
                        /* display:flex; */
                        height:max-content;
                        width:100vw;
                        justify-content:space-between;
                        will-change:filter;
                        margin-bottom:var(--vertical-margin-middle);
                        .image_wrapper{
                            /* flex-shrink:0; */
                            /* aspect-ratio:1; */
                            position:relative;
                            height:auto;
                            width:74.3405vw;
                            img{
                                /* position:absolute; */
                                height:auto;
                                width:100%;
                                /* will-change:transform, opacity; */
                            }
                        }
                        .steps_description{
                            display:flex;
                            flex-direction:column;
                            /* height:fit-content; */
                            /* align-self:center; */
                            gap:4rem;
                            margin-top:0;
                            h3{
                                display:inline-flex;
                                align-items:baseline;
                                justify-content:space-between;
                                /* background:#33ffff20; */
                                color: #74BEE4;
                                overflow:hidden;
                                span{
                                font-style: normal;
                                    font-weight: 200;
                                    font-size: 5.3956vw;
                                    line-height: 100%;
                                        display:inline-block;
                                }
                                .japanese{
                                    font-weight: 350;
                                    font-size: 1.4rem;
                                    line-height: 100%;
                                    text-align: right;
                                }
                            }
                            p{
                                width:52.0383vw;
                                min-width:434px;
                            }
                        }
                        &.cycle{
                            margin:0;
                            img{
                                position:relative;
                                height:auto;
                                width:74.3405vw;
                                /* left:50%; */
                                /* transform:translateX(-50%); */
                            }
                            &:nth-of-type(1){
                                display:none;
                            }
                        }
                        &:nth-of-type(2), &:nth-of-type(4){
                            .image_wrapper{
                                align-self:flex-start;
                                margin-left:4.7961vw;
                            }
                            .steps_description{
                                align-self:flex-end;
                                margin-right:12.7098vw;
                            }
                        }
                        &:nth-of-type(3){
                            .image_wrapper{
                                align-self:flex-end;
                                margin-right:4.7961vw;
                            }
                            .steps_description{
                                align-self:flex-start;
                                margin-left:12.7098vw;
                            }
                        }
                    }
                }
            }
            .steps_description_last{
                /* display:flex; */
                /* flex-direction:column; */
                margin:0;
                height:auto;
                width:100vw;
                /* justify-content:center; */
                align-self:center;
                gap:5vh;
                p{
                    align-self:center;
                    width:fit-content;
                }
            }
        }
        
        
        .back_button_area{
            height:80vh;
            width:100vw;
            .view_all_button{
                top:50%;
                left:50%;
                transform:translate(-50%,-50%);
            }
        }
    }

    &#members_page{
        article{
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            /* display:flex; */
            flex-direction:column;
            align-items:center;
            margin:0;
            padding:0;
            height:100vh;
            /* width: */
            .title{
                width:100vw;
                height:auto;
                margin:12.5628svh 0 0 0;
                .section_title{
                    margin:0 auto;
                    height:3.8rem;
                    h2{ line-height:3.8rem; }
                    &::before{ display:none; }
                }
            }
            .member_list{
                /* background-color:#33ffff10; */
                position:absolute;
                height:100svh;
                width:100%;
                ul{
                    /* display:block; */
                    align-items:normal;
                    gap:normal;
                    width:var(--vw-width, 38.7290vw);
                    height:100%;
                    li{
                        /* background-color:#33ffff10; */
                        cursor: pointer;
                        max-width:100vw;
                        color: var(--default-text-color);
                        width:auto;
                        padding:0 var(--vw-padding, 9.5923vw);
                        details{
                            /* background-color:#ff33ff10; */
                            display:block;
                            /* align-items:center; */
                            position:relative;
                            top:50%;
                            transform:translateY(-50%);
                            gap:0;
                            width:var(--vw-width, 38.7290vw);
                            summary{
                                /* position:relative; */
                                /* list-style: none; */
                                width:var(--vw-width, 38.7290vw);
                                height:100%;
                                max-width:none;
                                max-height:none;
                                picture{
                                    /* position:relative; */
                                    /* display:block; */
                                    margin-bottom:6.5947vw;
                                    width:var(--vw-width, 38.7290vw);
                                    height:var(--vw-height, 38.7290vw);
                                    max-width:none;
                                    max-height:none;
                                    flex-shrink:0;
                                    /* overflow:hidden; */
                                    /* backGround-color:#fff; */
                                    /* img{
                                        height:100%;
                                        object-fit:cover;
                                    } */
                                    /* -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #FFFFFF 74.04%, rgba(255, 255, 255, 0.8) 87.5%, rgba(255, 255, 255, 0.57) 94%, rgba(255, 255, 255, 0.62) 97%, rgba(255, 255, 255, 0.45) 99.5%, rgba(255, 255, 255, 0) 100%);
                                    -webkit-mask-size: 100% 100%;
                                    -webkit-mask-position: 50% var(--mask-position, 0%);
                                    -webkit-mask-repeat: no-repeat;
                                    mask-image: radial-gradient(50% 50% at 50% 50%, #FFFFFF 74.04%, rgba(255, 255, 255, 0.8) 87.5%, rgba(255, 255, 255, 0.57) 94%, rgba(255, 255, 255, 0.62) 97%, rgba(255, 255, 255, 0.45) 99.5%, rgba(255, 255, 255, 0) 100%),
                                    linear-gradient(to right, 
                                    rgba(255, 255, 255, var(--mask-opacity,0)) 0%, 
                                    rgba(255, 255, 255, var(--mask-opacity,0)) 100% );
                                    mask-size: 100% 100%;
                                    mask-position: 50% var(--mask-position, 0%);
                                    mask-repeat: no-repeat; */

                                    /* img{
                                        height:100%;
                                        aspect-ratio:1;
                                        object-fit:cover;
                                    } */
                                }
                                .thumbnail_content{
                                    /* display:flex; */
                                    /* flex-direction:column; */
                                    /* height:max-contents; */
                                    /* align-items:flex-start; */
                                    margin-left:2vh;
                                    .voice{
                                        font-size:1.4rem;
                                        white-space: nowrap;
                                    }
                                }
                            }
                            .about{
                                h3{
                                    font-size:clamp(1.8rem,2.4444vh,2.2rem);
                                    margin-bottom:1.0644vh;
                                    display:flex;
                                    align-items:center;
                                    svg{
                                        margin-left:1.2rem;
                                        height:0.805em;
                                    }
                                }
                                .sub{
                                    white-space: nowrap;
                                    display:flex;
                                    font-size:1.4rem;
                                    font-weight: 350;
                                    .name_eng{ 
                                        border-right: 1px solid var(--default-text-color);29;
                                        padding-right:10px;
                                    }
                                    .position{ 
                                        padding-left:10px;
                                    }
                                }
                            }
                            
                            .hider{
                                width:49.7601vw;
                                height:var(--vw-height, 0);
                                .main_contents_wrapper{
                                    position:relative;
                                    width:100%;
                                    height:100%;
                                    max-width:auto;
                                    max-height:auto;
                                    border-left:none;
                                    .close{
                                        display:none;
                                    }
                                    .main_contents{
                                    /* background-color:#33ffff10; */
                                        position:relative;
                                        top:0;
                                        left:0%;
                                        transform:none;
                                        width:100%;
                                        .about {
                                            margin-bottom:0;
                                            h3{ display:none; }
                                            .sub{ display:none; }
                                        }
                                        dl{
                                            margin-bottom:4.8561vw;
                                            font-size:1.2rem;
                                            /* line-height:200%; */
                                            /* font-weight: 350; */
                                            /* color:var(--default-text-color); */
                                            dd{
                                                /* margin-left:8em; */
                                                /* margin-top:-2em; */
                                            }
                                        }
                                        .message{
                                            font-size:clamp(1.2rem, 1.5555vh,1.4rem);
                                            line-height:200%;
                                            font-weight: 350;
                                        }
                                    }
                                }
                            }
                            
                            summary::-webkit-details-marker {
                                display: none;
                            }
                        }
                    }
                }
            }
        }
        
        
        
        .back_button_area{
            height:80vh;
            width:100vw;
            .view_all_button{
                top:50%;
                left:50%;
                transform:translate(-50%,-50%);
            }
        }
    }


        /* .description_wrapper{
            height:auto;
            width:100vw;
            position:relative;
            top:0;
            margin-top:-25vh;
            .description{
                position:relative;
                right:0;
                left:50%;
                width:fit-content;
                

                background: rgba(65, 87, 98, 0.14);
                backdrop-filter: blur(6px);
                -webkit-backdrop-filter: blur(6px);
                overflow:hidden;
                border-radius:1.8em;
                .text_wrapper{
                    margin:0;
                    padding:6rem 0 var(--article-margin-vertical);
                    p{
                        margin-bottom:10em;
                        &:last-child {
                            margin-bottom:0;
                        }
                    }
                }
            }
        } */
    &#joinus_page{
        .firstView{
            /* position:relative; */
            height:fit-content;
            width:100vw;
            margin:0;
            .section_wrapper{
                /* position:sticky; */
                height:mox-content;
                width:100%;
                bottom:0;
                overflow:visible;
                .back{
                    position:sticky;
                    bottom:0;
                    height:100svh;
                    /* height:100%; */
                    /* width:100%; */
                    .first_image{
                        /* background:#33ffff11; */
                        /* position:absolute; */
                        /* left:0; */
                        /* width:100vw; */
                        height:100svh;
                        top:0%; 
                        transform:translateY(0%);
                        overflow:hidden;
                        img{ 
                            /* background:#ff33ff33; */
                            position:absolute;
                            top:0%; 
                            transform:translateY(0%);
                            width:auto;
                            height:100%;
                            min-width:100vw;
                            /* object-fit:cover; */
                            /* object-position:center top; */
                        }
                        &.ribbon img{ 
                            top: 58.6264svh; 
                            left:0;
                            height:12.4790svh;
                            width:127.6978vw;
                            min-height:none;
                            max-width:none;
                            object-fit:fill;
                            object-position:1% top;
                            mask-image: linear-gradient(
                                to right, black 0%, 
                                black var(--mask-width_ribbon, 0%), 
                                transparent var(--mask-width_ribbon, 0%));
                        }
                    }
                    .catch_copy{
                        position:absolute;
                        /* z-index:0; */
                        top:24.5393svh;
                        /* left:50%; */
                        /* transform:translateX(-50%); */
                        /* font-size:15.4444vh; */
                        /* font-weight: 600; */
                        /* color: #FFFFFF; */
                        /* opacity: 0.85; */
                        display:block;
                        /* flex-direction:column; */
                        width:73.8908vw;
                        filter: drop-shadow(0px 0px 1vh rgba(24, 91, 129, 0.13));
                        .animation{
                            display:none;
                        }
                        .catch_copy_img{
                            display:block;
                            width:100%;
                        }
                    }
                    /* .scroll_down{
                        position:absolute;
                        bottom:0;
                        right:20.5882vw;
                        height:134px;
                        width:65px;
                    } */
                }
                .message_area{
                    position:relative;
                    height:max-content;
                    width:100%;
                    /* backdrop-filter:blur(23px); */
                    background: rgba(21, 61, 82, 0.5);
                    backdrop-filter: blur(3px);
                    /* display:flex; */
                    flex-direction:column;
                    .left_area{
                        position:relative;
                        height:auto;
                        width:100%;
                        margin-bottom:17.4rem;
                        /* background:#33ffff10; */
                        .wrapper{
                            position:relative;
                            top:0;
                            left:0;
                            transform:translate(0);
                            /* background:#33ffff10; */
                            height:100%;
                            width:100%;
                            color: #FFFFFF;
                            & .section_title_with_japanese {
                                .section_title{
                                    position:relative;
                                    margin-top:21.5827vw;
                                    left:50%;
                                    transform:translateX(-50%);
                                    height:21rem;
                                    width:21rem;
                                    &::before{ 
                                        height:21rem;
                                        width:21rem;
                                    }
                                    .title_text{
                                        position:relative;
                                        width:100%;
                                        h2{
                                            line-height:21rem;
                                        }
                                        .japanese{
                                            position:absolute;
                                            top:0;
                                            left:0;
                                            line-height:100%;
                                            top:68.9074%;
                                            width:100%;
                                            text-align:center;
                                            font-size:1.6rem;
                                            /* color: #FFFFFF; */
                                        }
                                    }
                                }
                                h3{
                                    word-break:keep-all;
                                    position:relative;
                                    margin-top:4.5rem;
                                    top:0;
                                    left:0;
                                    font-size:clamp(2.5rem,3.4444vh,3.1rem);
                                    font-weight:350;
                                    line-height: 137%;
                                    width:100%;
                                    text-align:center
                                }
                            }
                        }
                    }
                    .right_area{
                        position:relative;
                        height:auto;
                        left:50%;
                        transform:translateX(-50%);
                        width:fit-content;
                        .message{
                            position:relative;
                            top:0;
                            display:flex;
                            gap:10.7rem;
                            padding:0 0 23.3333vh 0;
                            flex-direction:column;
                            p{
                                /* font-weight:350; */
                                font-size: clamp(1.4rem, 1.9184vw, 1.6rem);
                                /* line-height: 8em; */
                                /* letter-spacing: 0.2em; */
                                /* color: #FFFFFF; */
                                /* span{ letter-spacing: 0em; } */
                            }
                            .br_wide{
                                display:none;
                            }
                        }
                    }
                }
            }
            
        }
        .recruit_info{
            /* backdrop-filter:blur(4px); */
            /* display:flex; */
            /* align-items:center; */
            height:max-content;
            width:100%;
            flex-direction:column;
            .jobs{
                /* display:flex; */
                height:max-content;
                width:100%;
                flex-direction:column;
                align-items:center;
                .section_title_with_japanese {
                    margin-bottom:12.8297vw;
                    .section_title{
                        color: #74BEE4;
                        position:relative;
                        margin:21.5827vw 0 0 0;
                        left:50%;
                        transform:translateX(-50%);
                        height:21rem;
                        width:21rem;
                        &::before{ 
                            height:21rem;
                            width:21rem;
                        }
                        .title_text{
                            position:relative;
                            width:100%;
                            h2{
                                line-height:21rem;
                            }
                            .japanese{
                                position:absolute;
                                top:0;
                                left:0;
                                line-height:100%;
                                top:68.9074%;
                                width:100%;
                                text-align:center;
                                font-size:1.6rem;
                                /* color: #FFFFFF; */
                            }
                        }
                    }
                }
                ul{
                    /* display:flex; */
                    width:100%;
                    height:max-content;
                    /* align-items:center; */
                    flex-direction:column;
                    .job_info{
                        --job_info_vertical_gap: 9.4316; /* ← 初期値を設定 */
                        --unit_vw : 1vw;
                        --job_info_width_offset : 0vh;
                        /* cursor: pointer; */
                        margin-left:0;
                        margin-top:-1px;
                        /* position:relative; */
                        border-left: none;
                        border-right: none;
                        border-top: 1px solid #C5D6E5;
                        border-bottom: 1px solid #C5D6E5;
                        /* width:calc(var(--recruit_info_width) + var(--job_info_width_offset)); */
                        width:86.3309vw;
                        height:var(--recruit_info_height, 16.6666vw);
                        /* background:#ffffff; */
                        details{
                            width:100%;
                            /* background:#33ffff10; */
                            summary{
                                width:100%;
                                /* position:absolute; */
                                /* height:100%; */
                                height:var(--recruit_info_height, 16.6666vw);
                                /* list-style: none; */
                                .first_title{
                                    writing-mode: horizontal-tb;
                                    /* position:absolute; */
                                    line-height:var(--recruit_info_height, 16.6666vw);
                                    top:0;
                                    left:50%;
                                    transform:translateX(-50%);
                                    /* font-weight: 400; */
                                    font-size:clamp(1.8rem, 2.3980vw, 2rem);
                                    /* color: #74BEE4; */
                                }
                            }
                            .content_wrapper{
                                position:relative;
                                padding:calc(var(--job_info_vertical_gap) * var(--unit_vw)) 11.9904vw;
                                /* background:#ff33ff10; */
                                height:100%;
                                width:auto;
                                display:flex;
                                flex-flow:column;
                                align-items:center;
                                .second_title{
                                    /* font-weight: 400; */
                                    width:100%;
                                    text-align:left;
                                    font-size:clamp(1.8rem, 2.3980vw, 2rem);
                                    /* 高さ計算簡素化のためinfoにめり込ませる */
                                    margin-bottom:clamp(-1.8rem, -2.3980vw, -2rem);
                                    /* line-height: 100%; */
                                    /* text-wrap:nowrap;  */
                                    /* color: #74BEE4; */
                                }
                                .info{
                                    margin: 0;
                                    padding:6.7rem 0 0 0;
                                    display:flex;
                                    flex-flow:column nowrap;
                                    /* background:#ff33ff10; */
                                    height:max-content;
                                    width:100%;
                                    gap:8.4rem;
                                    li{
                                        width:100%;
                                        h4{
                                            padding: 0.8888vh 3.8888vh;
                                            display:inline-block;
                                            background: #74BEE4;
                                            color:white;
                                            font-size: 2vh;
                                            border-radius: 3.6666vh;
                                        }
                                        .content_text{
                                            margin:3.7rem 0 0 0;
                                            width:100%;
                                            /* font-weight: 400; */
                                            font-size: clamp(1.4rem, 1.9184vw, 1.6rem);
                                            /* line-height: 150%; */
                                            /* color: var(--default-text-color); */
                                        }
                                        
                                        &.button_area{
                                            /* position:relative; */
                                            height:17.1111vh;
                                            width:100%;
                                            .view_all_button{
                                                /* position:relative; */
                                                left:50%;
                                                transform:translateX(-50%);
                                                height:100%;
                                                width:17.1111vh;
                                                p{
                                                    width:100%;
                                                    text-align:center;
                                                    letter-spacing: 0;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .gap{ /* paddingを使用するとbeforeのレイアウトや幅計算で不便なため */
                width:100%;
                height:45.5635vw;
            }
            .last_image{
                /* display:flex; */
                flex-direction:column;
                align-items:center;
                height:auto;
                width:100%;
                overflow:hidden;
                /* position:relative; */
                .members_carousel{
                    height:32.1342vw;
                    margin-bottom:7.6175vw;
                }
                .message_carousel{
                    writing-mode: horizontal-tb;
                    /* text-wrap:nowrap;  */
                    /* align-self:flex-start; */
                    /* font-weight: 600; */
                    font-size:21.7026vw;
                    /* color: #74BEE4; */
                    /* opacity: 0.06; */
                    margin:0 0 17.9856vw 0;
                    /* transform: rotate(180deg); */
                }
                .last_message{
                    /* position: relative; */
                    /* z-index: 1; */
                    /* display:flex; */
                    flex-direction:column;
                    align-items:center;
                    margin:0;
                    gap:14.5rem;
                    .text{
                        /* color: var(--default-text-color);
                        letter-spacing: 0.2em;
                        font-weight: 400;
                        line-height: 300%; */
                        font-size: clamp(1.4rem, 1.9184vw, 1.6rem);
                    }

                    .view_all_button{
                        /* align-self:center; */
                    }
                }
                
                &::before {
                    /* position:absolute; */
                    /* content: ""; */
                    /* height:100%; */
                    /* width:100%; */
                    mask-image:linear-gradient(to bottom, #ffffff00 0%, #ffffffff 30% );
                    /* backdrop-filter: blur(4px); */
                    /* -webkit-backdrop-filter: blur(4px); */
                }
            }
        }
        
        .back_button_area{
            height:100vw;
            width:100%;
            .view_all_button{
                top:50%;
                left:50%;
                transform:translate(-50%,-50%);
            }
        }
    }








} /*body[data-layout="vertical"]{    end*/


body[data-device="SP"]{
    header {
        /* position: fixed; */
        /* display:flex; */
        /* justify-content:space-between; */
        /* align-items:center; */
        /* width: 100vw;
        height:10rem; */
        /* box-sizing:border-box; */
        /* backdrop-filter: blur(4px); */
        /* background-color: #ffffff13; */
        /* background-color:#ffff3320; */
        /* z-index: 10; */
        /* pointer-events: none; */
        padding:0 8.1818vw;
        .header_right{
            /* background-color:#ff33ff20;
            display:flex;
            align-items:center;
            width:max-content;
            font-size:1.5rem;
            cursor: pointer;
            pointer-events: auto; */
            height:auto;
            .header_right_style{
                padding:0;
            }
            .contact_button{ display:none; }
            .nav_wrapper{
                height:3.8rem;
                .nav_icon{ display:none; }
                .nav_icon_sp{ 
                    height:3.8rem;
                    display:block; 
                    button{
                        height:100%;
                        aspect-ratio:1;
                        border:none; 
                        background:none;
                        padding:0;
                    }
                }
            }
        }
        h1 {
            flex-shrink:0;
            height: 3.8rem;
            /* margin-left: 0 0 0 3.6rem; */
            /* pointer-events: auto; */
            /* a {
                height: 100%;
                img {
                    height: 100%;
                }
            } */
        }
        a{
            display:block;
            line-height:3.6rem;
            flex-shrink:01;
            font-size:1.5rem;
            text-decoration: none;
            font-weight:200;
            color: #89C8E9;
        }
    }

    #nav_sp{ 
        display:flex; 
    }

    #splash {
        .main {
            .copy_container {
                /* background:#ff33ff22; */
                &.moved{
                    height: 10rem;
                    width:61.5909%;
                    top:min(130vw, 65.0564vh);
                    /* top:65.0564vh; */
                    left: 50%;
                    transform: translateX(-50%);
                }
                .copy {
                    writing-mode: vertical-rl;
                    font-size:10vw;
                    font-family:"Noto Sans JP";
                    /* background:#33ffff22; */
                    &.moved {
                        writing-mode: horizontal-tb;
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        font-size: 1.6rem;
                        font-weight: 400;
                        text-align: center;
                        letter-spacing: 0.0376em;
                        color: #74BEE4;
                    }
                }
            }
            #animations {
                height: auto;
                width:42.2727vw;
                .logo {
                    height: auto;
                    width:61.1159vw;
                    type{
                        top:min(130vw, 65.0564vh);
                    }
                }
            }
        }
    }

    .blur_change_area{
        display:none;
    }
    
    #second_view {
        /* flex-direction:column; */
        /* background-color:#ffaaaa20; */
        /* align-items:flex-start; */
        /* width: 100vw; */
        /* height: auto; */
        /* width:300vw; */
        .flex-container {
            /* background-color:#ffaaaa20; */
            /* flex-direction:column; */
            /* height: auto; */
            /* width: 100vw; */
            .left_area{/* 縦レイアウトでは上部*/
                /* display:none; */
                /* height: auto; */
                /* width:100vw; */
                /* background-color:#ffaaaa20; */
                /* position:sticky; */
                /* top:0; */
                /* z-index:1; */
                /* pointer-events: none; */
                width:100vw;
                ul{
                    li{
                        /* width:52.0335vw; */
                        /* width:36.3450vh; */
                        /* aspect-ratio:1; */
                        /* position: absolute; */
                        /* left:50%; */
                        /* top:5.7738vh; */
                        /* transform:translate(-50%, 0); */
                        .circle_image {
                            /* position: relative; */
                            /* top:0; */
                            /* left:0; */
                            /* width:100% */
                        }
                        /* picture{
                        } */
                    }
                }
            }
            .right_area {/* 縦レイアウトでは画面全体 */
                /* width:100vw; */
                /* height:auto; */
                background: rgba(255, 255, 255, 0.36);
                /* background-color:#ffaaaa20; */
                /* border-left:none; */
                /* border-top:1px solid ; */
                /* mask-image: none; */
                .content_wrapper{
                    /* position: relative; */
                    /* background-color:#ffff3320; */
                    .introduction{
                        /* display: flex; */
                        /* flex-direction:column; */
                        /* align-items:center; */
                        /* width: max-content; */
                        gap:13.4em;
                        /* margin:0 auto; */
                        /* padding-top:100vh; */
                        /* padding-bottom:15.75rem;
                                /* background-color:#33ffff20; */
                        p {
                            line-height: 4em;
                            width:73.6363vw;
                            /* font-weight:350; */
                            font-size:1.5rem;
                            font-size: 1.4rem;
                            /* line-height: 8em; */
                            /* letter-spacing: 0.2em; */
                            color: var(--default-text-color);
                            text-align:left;
                                /* background-color:#ff33ff20; */
                            /* word-break: keep-all; */
                            .br_intro{
                                display:none;
                            }
                        }
                    }
                    .stories{
                        /* background-color:#ff33ff20; */
                        li{
                            /* background-color:#ff33ff20; */
                            margin-bottom:var(--article-margin-vertical);
                        }
                    }
                }
            }
        }
    }
    .story_description{
        /* background-color:#ff33ff20; */
        .image_vertical{
            margin:0 auto 10.2181vw;
            /* display:block; */
            height:81.2227vw;
            /* aspect-ratio:1; */
            picture{
                img{
                    /* -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #FFFFFF 74.04%, rgba(255, 255, 255, 0.8) 87.5%, rgba(255, 255, 255, 0.57) 94%, rgba(255, 255, 255, 0.62) 97%, rgba(255, 255, 255, 0.45) 99.5%, rgba(255, 255, 255, 0) 100%);
                    -webkit-mask-size: 95%;
                    -webkit-mask-position: 50% var(--mask-position, 0%);
                    -webkit-mask-repeat: no-repeat;
                    mask-image: radial-gradient(50% 50% at 50% 50%, #FFFFFF 74.04%, rgba(255, 255, 255, 0.8) 87.5%, rgba(255, 255, 255, 0.57) 94%, rgba(255, 255, 255, 0.62) 97%, rgba(255, 255, 255, 0.45) 99.5%, rgba(255, 255, 255, 0) 100%);
                    mask-size: 95% 95%;
                    mask-position: 50% var(--mask-position, 0%);
                    mask-repeat: no-repeat;
                    height:100%;
                    object-fit: cover; */
                }
            }
        }
        .description {
            /* background-color:#ff33ff20; */
            max-width:none;
            width:73.6363vw;
            .top{
                font-size:1.2rem;
                margin-left:0;
            }
            .title_box{
            /* background-color:#ff33ff20; */
                margin-top:2rem;
                margin-bottom:3rem;
                width:max-content;
                /* justify-content:end;
                gap:1.3rem; */
                .hover_icon{
                    display:none;
                }
                h3 {
                    font-size: 2.3rem;
                    width:73.6363vw;
                }
            }
            .tag{ 
                justify-content:start;
                margin-left:0;
                font-size:1.4rem;
            } 
            .main_wrapper{
                display:flex;
                gap:3.2;
                align-items:center;
                flex-direction:column;
                .main{
                    /* flex-shrink:0; */
                    margin-left:0;
                    font-weight:350;
                    width:73.6363vw;
                    /* font-size:1.4rem; */
                    /* line-height:2em; */
                    /* letter-spacing: 0.06em; */
                    /* color: var(--default-text-color); */
                    /* text-align:left; */
                }
                .arrow{
                    /* height:27.2727vw; */
                    /* aspect-ratio:1; */
                }
            }
            &::before{
                /* content:""; */
                /* position:absolute; */
                /* border-radius:100%; */
                left:50%;
                top:50%;
                transform:translate(-50%,-50%);
                height:auto;
                width:141.9795vw;
                /* aspect-ratio:1; */
                /* z-index:-1; */
                /* background: rgba(173, 221, 255, 0.21); */
            }
        }
    }

    .view_all_button{
        height:15.3rem;
        /* aspect-ratio:1; */
        filter: drop-shadow(0px 0px 4.5454vw rgba(109, 183, 222, 0.16));
        .inner{
            /* height:100%; */
            background-color:#33ffff;
            
            svg{
                /* width:119%;
                height:119%;
                position:absolute;
                top:50%;
                left:50%;
                transform:translate(-50%, -50%); */
            }
            p{
                /* position:absolute;
                top:50%;
                left:50%;
                font-size:2.2222vh;
                transform:translate(-50%, -50%);
                text-decolation:none;
                font-weight:200;
                color:#74BEE4; */
            }
        }
    }

    /* 共通セクションタイトル */
    .section_title {
        /* position:relative; */
        width: 21rem;
        height: 21rem;
        /* border-radius:100%; */
        /* z-index:-1; */
        /* background: radial-gradient(49.73% 57.34% at 59.74% 33.37%, rgba(221, 241, 255, 0.2385) 64.42%, rgba(221, 241, 255, 0.53) 97.12%); */
        /* background: rgba(173, 221, 255, 0.18); */
        h2 {
            /* background-color:#ff33ff10; */
            /* width:100%; */
            font-size: 3.2rem;
            /* font-weight: 200; */
            line-height:21rem;
            /* letter-spacing: -0.016em; */
            /* text-align:center; */
            /* color: #74BEE4; */
            /* overflow: hidden; */
        }
    }

    .section_title.white{
        h2 {
            color: #ffffff;
        }
    }

    
    #stories {
        /* padding:0 0 var(--article-margin-vertical); */
        .stories_list {
            /* left:50%; */
            /* transform:translateX(-50%); */
            /* padding:0 ;
            flex-direction:column;
            width:100vw; */
            .carousel{
                /* width:max-content;
                display: flex;
                align-items: center; */
                padding:0 0 27.2727vw;
                li{
                    width:44.3181vw;
                    padding:0 15.2272vw 0 0 ;
                }
            }
        }
    }

    #service{
        /* flex-direction:column;
        padding:0 0 var(--article-margin-vertical) 0; */
        .intro_image{
            /* flex-direction:column;
            padding:0 0 var(--article-margin-vertical) 0;
            width:100%; */
            /* background-color:#33ffff20; */
            p{
                /* background-color:#ff33ff20; */
                /* -ms-writing-mode: tb-rl;
                writing-mode: vertical-rl;
                font-family: "Noto Sans JP"; */
                /* font-size:1.5rem; */
                /* padding:0 0 var(--section-margin-vertical) 0; */
                /* margin:0 auto; */
            }
            /* .service_image{
                margin:0 auto;
                height:auto;
                width:67.3357vw;
                picture, img{
                    width:100%;
                }
            } */
        }
        .main_contents{
            /* flex-direction:column;
            height:100%; */
            /* background-color:#33ffff10; */
            width:73.6363vw;
            .section_title{
                margin:0 0 7.15rem 0;
            }
            .content{
                /* background-color:#33ffff20; */
                /* display:flex;
                align-items:center;
                flex-direction:column;
                height:100%; */
                .description{
                    /* background-color:#ff33ff20; */
                    /* position: relative; */
                    width:73.6363vw;
                    /* padding-bottom:12.6rem; */
                    h3{
                        /* position:relative; */
                        /* height:auto; */
                        /* margin-bottom:1.9rem; */
                        /* background-color:#33ffff10; */
                        svg{
                            margin-right:1.89rem;
                            aspect-ratio:1;
                            height:1em;
                        }
                        .background{
                            margin-left:0;
                            font-size:24.7727vw;
                        }
                        .main{
                            /* background-color:#ffff3320; */
                            /* margin-left:0; */
                        }
                    }
                    ul{
                        margin-left:0;
                        width:73.6363vw;
                    }
                    .description_text{
                        margin-left:0;
                    }
                }
                .images{
                    /* display:flex; */
                    /* align-items:center; */
                    /* flex-direction:column; */
                    /* background-color:#33ffff20; */
                    picture{
                        img{
                            object-fit:cover;
                            width:100%;
                        }
                    }
                    .main{
                        width:100vw;
                        height:100vw;
                        margin:0 auto 19.7727vw;
                        border-radius:0;
                    }
                    .small_images{
                        /* position:relative; */
                        /* height:auto; */
                        width:100vw;
                        aspect-ratio:0.9034;
                        picture{
                            width:68.1818vw;
                            aspect-ratio:1.1538;
                            &:nth-of-type(1){
                                border-radius:0 3.6363vw 3.6363vw 0;
                                width:68.1818vw;
                                height:59.3181vw;
                            }
                            &:nth-of-type(2){
                                border-radius:3.6363vw 0 0 3.6363vw;
                                width:68.1818vw;
                                height:59.3181vw;
                            }
                        }
                        .back{
                            /* position:absolute; */
                            /* z-index:0; */
                            height:43.1314%;
                        }
                    }
                }
            }
            & .service_A .images {
                /* margin-right:0;
                margin-bottom:var(--article-margin-vertical); */
                /* .main{
                    width:58.5491vw;
                    margin:0 auto 9.5923vw;
                } */
                /* & .small_images{
                    align-self:center;
                    margin:0;
                    width:79.4832vw;
                    aspect-ratio:1.4898;
                    & picture:nth-of-type(1){
                        width:59.9622%;
                    }
                    & picture:nth-of-type(2){
                        width:49.8262%;
                    }
                } */
            }
            & .service_B .images {
                /* margin-right:0;
                margin-bottom:var(--article-margin-vertical); */
                /* .main{
                    width:58.5491vw;
                    margin:0 auto 9.5923vw;
                } */
                /* & .small_images{
                    align-self:center;
                    margin:0;
                    & picture:nth-of-type(1){
                        top:0;
                        width:48.7931%;
                    }
                    & picture:nth-of-type(2){
                        right:0;
                        top:auto;
                        bottom:0;
                        width:63.2352%;
                    }
                } */
            }
        }
    }

    #solution{
        /* display:flex;
        align-items:center; */
        flex-direction:column;
        height:auto;
        width:100vw;
        padding:0 0 var(--article-margin) 0 ;
        .description{
            display:flex;
            flex-direction:column;
            /* flex-shrink:0; */
            align-items:center;
            /* padding-bottom:2.4444vh;中央寄せ用 */
            .section_title{
                margin:0;
            }
            .description_text{
                /* background:#33ffff33; */
                /* margin-left:10.4444vh;
                margin-bottom:4.3333vh; */
                margin:115.0181vw 0 6.8rem 0;
                /* font-size:1.5555vh; */
                font-size:1.4rem;
                line-height:3.5em;
                letter-spacing: 0.2em;
                font-weight:350;
                /* span{
                    letter-spacing: 0.1em;
                } */
            }
            .more_button{
                /* align-self:center; */
            }
        }
        img{
            margin:78.0840vw 0 0 0;
            width:69.1295vw;
            height:69.1295vw;
            /* position:absolute; */
        }
    }

    #philosophy{
        /* position:relative; */
        height:max-content;
        width:100vw;
        .content{
            position:sticky;
            top:0;
            /* display:flex; */
            /* align-items:center; */
            width:100%;
            .section_title{
                position:absolute;
                right:68.3823%;
                margin-bottom:5.2rem;
            }
            picture{
                position:absolute;
                height:100%;
                width:100%;
                z-index:-1;
                overflow:hidden;
                img{
                    position:absolute;
                    top:50%;
                    left:50%;
                    transform:translate(-50%, -50%) scale(1.1);
                    height:100%;
                    width:100%;
                    object-fit:cover;
                }
            }            
        }
        .description_wrapper{
            /* height:fit-content; */
            width:100vw;
            position:relative;
            top:0;
            /* margin-top:-25vh; */
            .description{
                position:relative;
                /* top:0; */
                /* transform:none; */
                /* padding:0; */
                right:0;
                left:50%;
                width:fit-content;
                height:fit-content;
                

                background: rgba(65, 87, 98, 0.14);
                backdrop-filter: blur(6px);
                -webkit-backdrop-filter: blur(6px);
                overflow:hidden;
                border-radius:1.8em;
                .text_wrapper{
                    margin:0;
                    padding:6rem 0 var(--article-margin-vertical);
                    p{
                        line-height: 4em;
                        width:73.6363vw;
                        /* font-weight:350; */
                        font-size:1.5rem;
                        font-size: 1.4rem;
                        /* line-height: 8em; */
                        /* letter-spacing: 0.2em; */
                        /* color: var(--default-text-color); */
                        text-align:left;
                        margin-bottom:10em;
                        &:last-child {
                            margin-bottom:0;
                        }
                        .br_intro{
                            display:none;
                        }
                    }
                }
            }
        }
    }


    #members{
        display:flex;
        align-items:center;
        flex-direction:column;
        width:100vw;
        height: fit-content;
        padding:var(--article-margin-vertical) 0 80vw;
        /* background-color:#33ffff20; */
        .message{
            /* background-color:#33ffff20; */
            flex-shrink:0;
            flex-grow:0;
            /* margin-right:10vh; */
            margin:0 0 9.8321vw 0;
            .description{
                /* background-color:#ff33ff20; */
                .section_title{
                    margin:0 auto 7.8rem;
                }
                .text{
                    /* margin-left:10.4444vh; */
                    /* margin:16.2rem;
                    margin-top:-7.4rem; */
                    margin-bottom:6.8rem;
                    font-size:1.4rem;
                    width:73.6363vw;
                    .br_wide{
                        display:none;
                    }
                    /* line-height:3.5em;
                    letter-spacing: 0.2em;
                    font-weight:350;
                    span{
                        letter-spacing: 0.1em;
                    } */
                }
                .more_button_wrapper{
                    .more_button{
                        display:block;
                        margin:0 auto 11rem;
                    }
                }
            }
        }
        .scroll_wrapper {
            width:100vw;
            height:auto;
            .joinus{
                flex-direction:column;
                position:relative;
                /* left:0;
                display:inline-flex; */
                align-items:center;
                justify-content:center;
                height:100%;
                width:100vw;
                .gap{
                    width:23.1111vh;
                    height:100%;
                    flex-shrink:1;
                }
                .description_container{
                    /* display:inline-flex; */
                    flex-direction:column;
                    /* align-items:center;
                    justify-content:center; */
                    justify-content:start;
                    width:100%;
                    gap:0;
                    .wrapper{
                        display:none;/* 
                        position:relative;
                        height:32.1111vh;
                        aspect-ratio:1.0761;
                        .lid{
                            position:absolute;
                            bottom:0;
                            left:0;
                            height:100%;
                            width:100%;
                            overflow:hidden;
                            border-radius:8.8888vh 8.8888vh 8.8888vh 2.7777vh / 
                            8.8888vh 8.8888vh 8.8888vh 2.7777vh;
                            .image{
                                position:absolute;
                                bottom:0;
                                background-color:#89C9E9;
                                height:32.1111vh;
                                aspect-ratio:1.0761;
                                opacity:0.7;
                                img{
                                    position:absolute;
                                    left:50%;
                                    transform:translateX(-50%);
                                    &:nth-of-type(1){
                                        height:75.7785%;
                                        bottom:0;
                                    }
                                    &:nth-of-type(2){
                                        height:79.4676%;
                                        top:8.7452%;
                                        opacity:0;
                                    }
                                }
                            }
                        } */
                    }
                    .description{
                        position:relative;
                        display:flex;
                        flex-direction:column;
                        align-items:center;
                        width:52.0383vw;
                        height:max-content;
                        /* background:#33ffff33; */
                        .image_vertical{
                            /* display:block; */
                            /* position:relative; */
                            width:70.4545vw;
                            /* aspect-ratio:1; */
                            /* opacity:0.7; */
                            margin-bottom:10.2272vw;
                        }
                        h2{
                            /* display: flex; */
                            margin-bottom: 1rem;
                            /* font-weight:100; */
                            font-size:13.1818vw;
                            /* letter-spacing: -0.016rem; */
                            /* color:#56B2E0; */
                        }
                        /* .text_wrapper{
                            display:flex;
                            flex-direction:column;
                            width:max-content;
                            align-items:center;
                            text-align:center;
                        } */
                        .text{
                            font-size:1.4rem;
                            /* line-height:3em; */
                            /* letter-spacing: 0.2em; */
                            /* font-weight:350; */
                        }
                        .more_button_wrapper{
                            margin-top:6.8rem;
                            width:auto;
                        }
                    }
                    & .description:nth-of-type(2){
                        margin-bottom:var(--article-margin-vertical);
                        .image_vertical{
                            background:#89C9E9;
                            img{
                                bottom:0;
                                height:79.4676%;
                            }
                        }
                    }
                    & .description:nth-of-type(3){
                        .image_vertical{
                            background:#F2B157;
                            img{
                                height:79.4676%;
                                top:8.7452%;
                            }
                        }
                        .text_wrapper{
                            h2{ color:#F2B157; }
                        }
                    }
                }
            }
        }
    }

    .members_carousel{
        /* flex-shrink:0; */
        /* position:relative; */
        /* width:100vw;
        overflow:hidden; */
        height:60.9090vw;
        /* background:#33ffff33; */
        /* margin-bottom:23.9808vw; */
        margin-bottom:31.3636vw;
        ul{
            height:100%;
            li{
                height:100%;
                margin:0 23.8636vw 0 0;
                /* background:#33ffff33; */
                /* position:relative; */
                /* border-radius:100%; */
                /* overflow:hidden; */
                /* right:0; */
                /* picture{
                    display:block;
                    mask-image:url(../image/work_mask.svg);
                    mask-size: 100%;
                    mask-position: 50% var(--mask-position, 0%);
                    mask-repeat: no-repeat;
                    height:100%;
                    img{
                        width:100%;
                        object-fit:cover;
                    }
                }
                .decoration{
                    position:absolute;
                    height:100%;
                    top:0;
                } */
            }
        }
    }

    #news{
        /* position:relative; */
        width:100vw;
        height:83.9328vw;/* 何故子要素から絶対に高さを取れないのか */
        /* height:fit-content; */
        /* aspect-ratio:auto; */
        /* backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px); */
        /* background:#ffff3333; */
        /* padding:0 0 var(--article-margin-vertical); */
        section{
            /* background:#33ffff33; */
            width:100%;
            display:inline-flex;
            align-items:center;
            flex-direction:column;
            /* height:max-content; */
            .section_title{
                /* height:3.8rem;
                background:transparent;
                margin-bottom:107222rem;
                h2{ 
                    text-align:center; 
                    line-height:3.8rem;
                } */
            }
            .section_title{
                height:3.8rem;
                margin-bottom:5rem;
                background:transparent;
                h2{ text-align:center; }
            }
            /* position:absolute; */
            top:auto;
            transform:none;
            ul{
                width:73.6363vw;
                li{
                    /* background:rgba(255, 255, 255, 0.6);
                    border-bottom: solid 1px rgba(116, 190, 228, 0.4);
                    &:nth-of-type(3){
                        border-bottom: none;
                    } */
                    a{
                        height:10rem;
                        /* position:relative;
                        display:flex;
                        align-items:center;
                        height:6.1428em; */
                        /* background:#33ffff33; */
                        flex-direction:column;
                        align-items:flex-start;
                        justify-content:center;
                        max-width:none;
                        padding:0 2rem;
                        /* font-size:1.5555vh; */
                        letter-spacing: 0.2em;
                        /* font-weight:350; */
                        /* text-decoration:none; */
                        color:#89C8E9;
                        .date{
                            letter-spacing: 0em;
                            font-size:1.2rem;
                            margin-bottom:0.6rem;
                            /* background:#ff33ff33; */
                        }
                        .contents{
                            border:none;
                            margin:0;
                            padding:0;
                            line-height:120%;
                            font-size:1.4rem;
                            font-weight: 500;
                            word-break:keep-all;
                            flex-grow:0;
                            /* margin-left:2.8571em;
                            padding-left:2.8571em; */
                            /* border-left:solid 1px rgba(116, 190, 228, 0.4); */
                            /* line-height:1.5em;
                            flex-shrink: 1;
                            flex-grow: 1; */
                            /* background:#ffff3333; */
                            /* letter-spacing: 0em; */
                        }
                        &::after{
                            content: "";
                            width: 3.9rem;
                            height: 3.9rem;
                            display: block;
                            position: absolute;
                            right: 2rem;
                            top: 50%;
                            transform:translateY(-50%);
                            background-image: url(../image/news_icon_sp.svg);
                        }
                        /* .hover_icon{
                            margin-left:2.8571em;
                            height:1em;
                        } */
                    }
                }
            }
            .more_button_wrapper{
                margin-top:6.8rem;
                /* width:auto;
                text-align:right; */
            }
        }
    }


    footer{
        .wrapper{
            font-size:1.6rem;
            /* background:#33ffff33; */
            .nav_wrapper{
                ul{ margin-right:10.9090vw; }
            }
            .logo{ 
                img{ margin-right:10.9090vw; }
            }
            .bottom_text{
                /* position:absolute; */
                right:0; 
                /* bottom:0; */
                /* display:flex; */
                line-height:120%;
                text-align:right;
                flex-direction:column;
                word-break:keep-all;
                width:75.9090vw;
                /* span{
                    margin-left:1em;
                }*/
                .address{
                    margin-bottom:2rem;
                } 
                small{
                    font-size:1.2rem;
                    margin-right:10.9090vw;
                }
            }
        }
    }

    &#stories_home {
        #stories_page {
            /* width:100vw; */
            .stories_list {
                /* position:relative;
                width:100vw;
                height:100vh;
                overflow:hidden; */
                .area_wrapper{
                    /* width:100%;
                    display:block; */
                    .left_area{/* 縦レイアウトでは画面全体*/
                        /* background-color:#ff33ff11; */
                        /* position:absolute;
                        top:0;
                        left:0;
                        height:100vh;
                        width:100%;
                        z-index:1;
                        overflow-x: scroll;
                        overflow-y: visible;
                        box-sizing:border-box;
                        &::-webkit-scrollbar {
                            display: none; 
                        }
                        scrollbar-width: none; */
                        height:54.9163svh;
                        .carousel{
                            padding:0 11.9904vw;
                            left:0%;
                            bottom:0:0;
                            height:62.9545vw;
                            /* transform:translateY(-50%); */
                            /* display:flex; */
                            /* flex-direction:row; */
                            gap:15.2272vw;
                            li{
                                margin-top:9.7727vw;
                                width:44.3181vw;
                                height:44.3181vw;
                            }
                        }
                    }
                    .right_area{
                        /* position:relative;
                        height:100vh;
                        width:100vw; */
                        /* background-color:#ff33ff11; */
                        .section_title{
                            top:12.5523%;
                        }
                        .inner{
                            /* position:absolute; */
                            /* top:0%; */
                            /* transform:translateY(0%); */
                            /* height:100vh; */
                            /* width:100%; */
                            /* background-color:#33ffff10; */
                            ul{
                                /* padding:0; */
                            /* background-color:#ffff3311; */
                                /* position:absolute;
                                width:100%;
                                height:100%;
                                top:0%;
                                transform:translateY(0%); */
                                li{
                                    /* position:absolute; */
                                    /* left:50%; */
                                    top:58.8692svh;
                                    /* left:50%; */
                                    /* transform:translate(-50%, -50%); */
                                    /* height:fit-content; */
                                    /* background-color:#ff33ff11; */
                                    .description {
                                        width:min-content;
                                        /* background-color:#ff33ff20; */
                                        /* height:max-content; */
                                        /* max-width:59.9520vw; */
                                        /* position:relative; */
                                        /* margin:0 auto; */
                                        .top{
                                            font-size:clamp(1.2rem,1.4644svh,1.4rem);
                                            /* margin-left:0; */
                                            span{
                                            }
                                            .industry{ 
                                            }
                                        }
                                        .title_box{
                                            margin:clamp(1.2rem,1.7259svh,1.65rem) 0;
                                            gap:1.3rem;
                                            h3{
                                                font-size:clamp(1.4rem,2.4058svh,2.3rem);
                                                word-break: keep-all;
                                                margin-right:0;
                                            }

                                        }
                                        .tag{
                                            font-size:clamp(1.2rem, 1.5690svh, 1.5rem);
                                            margin-bottom:3.6087svh;
                                            /* margin-left:0; */
                                        }
                                        /* .main{display:none}*/
                                        .more_button{
                                            display:block;
                                            margin:auto;
                                        }
                                    } 
                                }
                            }
                            .description_back{
                                .guidance{
                                    /* background-color:#33ffff50; */
                                    bottom:15svh;
                                    transform:translate(-50%, 0);
                                    flex-direction:column;
                                    gap:2.1875em;
                                    font-size:clamp(1.4rem,1.9184vw,1.6rem);
                                    img{
                                        height:3.4375em;
                                        &.horizontal{display:none;}
                                        &.vertical{display:block;}
                                    }
                                    .text{
                                        font-size:clamp(1.4rem,1.9184vw,1.6rem);
                                        /* line-height:3.5em; */
                                        /* letter-spacing: 0.2em; */
                                        /* font-weight: 350; */
                                        /* flex-shrink:0; */
                                        /* color: #74BEE4; */
                                        /* span{ */
                                            /* letter-spacing: 0em; */
                                        /* } */
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    &#stories_case{
        /* font-size:clamp(1.4rem, 1.9184vw, 1.6rem); */
        /* font-weight: 350; */
        /* line-height: 250%; */
        /* color: var(--default-text-color); */
        /* span{
            letter-spacing: 0em;
        } */

        /* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
        backdrop-filterを発動させるためだけのエリア。
        フィルタ対象がデバイスの最大テクスチャサイズを超えると、
        GPUが高い負荷を回避するために自動的にフィルタ処理を放棄してしまう。
        画面に追従してフィルタをかけることで、flex要素の大きなサイズでも対応できる 
        ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★*/
        .glass{
            /* height:100vh;
            width:100vw;
            position:sticky;
            backdrop-filter: blur(3px)!important; 
            -webkit-backdrop-filter: blur(3px); 
            z-index:-1;
            left:auto;
            top:0; */
        }
        
        
        #content{
            margin:0;/* glass分の空白エリアをつぶす */
            /* display: flex;
            flex-direction:column;
            position: relative; */
            section{
                /* min-width: 1px; 
                min-height: 1px;
                display:flex;
                align-items:center;
                justify-content:left;
                width:max-content;  */
            }
        }
        
        .case_image{
            /* position:relative; */
            border-radius:2.7272vw;
            /* overflow:hidden; */
            /* img{
                height:100%;
            } */
        }
        #content section.main {
            /* margin-top:-100vh; */
            margin-bottom:var(--vertical-margin-large_SP);
            /* height:max-content; */
            /* width:100vw;  */
            /* flex-direction:column; */
            #animations{
                transform:translate(0,-3.1190%);
                height: 123.8636vw;
                /* width:100%; */
                /* top: 0;
                left: 0; */
                /* opacity:1; */
                .logo {
                    /* position:absolute; */
                    /* height: 100%; */
                    /* width:100%; */
                    /* transform:translate(-50%,-50%); */
                    /* aspect-ratio:auto; */
                    /* opacity:1; */
                    /* top: 50%; */
                    /* left:50%; */
                    height:100%;
                    .mark_wrapper{
                        /* position: absolute; */
                        right:9.3863vw;
                        top:0%;
                        width: 210.6090vw;
                        height: 150vw;
                        max-width:auto;
                        max-height:auto;
                        aspect-ratio:auto;
                        .mark {
                            height: 100%;
                            /* max-width: none;
                            display:block;
                            object-position:right; */
                            /*この要素のみエリアを超過して配置させる*/
                        }
                        .splash_loop_images {
                            /* height: 55.71813403416557%;
                            aspect-ratio:1;
                            position: absolute;
                            top: 50%;
                            transform: translateY(-50%);
                            right: 0;
                            border-radius:50%;
                            overflow:hidden;
                            img { height: 100%; } */
                        }
                    }
                }
            }
            
            .description{
                margin:16.8954vw 0 var(--vertical-margin-small_SP)  0;
                display: flex;
                flex-direction:column;
                align-items:center;
                .section_title{
                    /* height:11.2rem; */
                    h2{
                        /* line-height:11.2rem; */
                    }
                    &::before{
                        height:21rem;
                        width:21rem;
                        /* left:50%;
                        top:50%;
                        transform:translate(-50%,-50%);
                        z-index:-1; */
                    }
                }
                h3{
                    /* margin:0 0 6.4rem 0;
                    font-weight: 500;
                    font-size: 2.3rem;
                    line-height: 100%; */
                    /* color: var(--default-text-color); */
                }
                .text{
                    /* background:#33ffff33; */
                    margin:0 0 0 0;
                    width:73.6363vw;
                }
                /* .more_button_wrapper{
                    margin-top:6.6666vh;
                    width:100%;
                    text-align:right;
                } */
            }
            .case_image{
                &:nth-of-type(1){
                    /* align-self:flex-start; */
                    width:31.3636vw;
                    /* height:auto; */
                    /* aspect-ratio:1; */
                    margin:0 0 16.0239vw 8.9295vw;
                }
                &:nth-of-type(2){
                    width:66.3636vw;
                    /* align-self:flex-end; */
                    /* height:auto; */
                    /* aspect-ratio:1.6125; */
                    margin:0 6.6409vw 0 0;
                }
                /* &:nth-of-type(3){
                    width:113.5555vh;
                    aspect-ratio:1.6699;
                    padding:20.6666vh 0 0 10.3333vh;
                } */
            }
        }
        #content section.topic{
            /* background:#33ffff35; */
            /* flex-direction:column; */
            /* height:auto; */
            /* width:100%; */
            .wrapper{
                /* display:flex; */
                /* flex-direction:column; */
                /* height:fit-content; */
                gap:11.4rem;
                h3{
                    font-size:18.4090vw;
                    /* font-weight: 100; */
                    /* line-height: 100%; */
                    /* color: var(--default-text-color); */
                    /* opacity: 0.11; */
                    /* margin-bottom:0; */
                }
                p{
                    font-size:clamp(1.4rem,3.4090vw,1.5rem);
                    /* margin:0; */
                    width:73.6363vw;
                    /* span{ text-wrap:nowrap; } */
                }
            }
            &.beginning{
                /* width:100%; */
                /* margin-right:0; */
                /* background:#33ffff35; */
                margin:0 0 var(--vertical-margin-large_SP) 0;
                .wrapper{
                    /* width:100%; */
                    /* margin-right:0; */
                    /* align-self:center; */
                    /* margin:0 0 0 0; */
                    h3{
                        /* align-self:flex-start; */
                        margin:0 0 -7.1rem 9.3525vw;
                    }
                    p{
                        /* align-self:center; */
                    }
                    &:nth-of-type(1){
                        margin:0 0 var(--vertical-margin-small_SP) 0;
                    }
                }
                .case_image{
                    /* align-self:center; */
                    margin:0 0 var(--vertical-margin-middle_SP) 0;
                    width:100vw;
                    border-radius:0;
                    /* height:auto;
                    img{
                        width:100%;
                    } */
                    /* 
                    &:nth-of-type(1){
                        height:62.7777vh;
                    }
                    /* &:nth-of-type(2){ */
                        /* height:100vh;
                        img{ height:100%; }
                    } */ 
                }
            }
            &.design{
                margin:0 0 var(--vertical-margin-large_SP) 0;
                .wrapper{
                    flex-direction:column;
                    width:100%;
                    margin:0 0 var(--vertical-margin-small_SP) 0;
                    align-self:flex-end;
                    h3{
                        align-self:flex-end;
                        margin:0 9.3525vw -7.1rem 0;
                    }
                    /* p{
                        align-self:center;
                    } */
                    /* &:nth-of-type(2){
                        align-self:center;
                    } */
                }
                /* p:nth-of-type(3){
                    margin-left: 0;
                    padding-bottom:18vh;
                } */
                .case_image{
                    /* img{
                        height:100%;
                    } */
                    &:nth-of-type(1){
                        /* align-self:center; */
                        margin:0 0 var(--vertical-margin-small_SP) 0;
                        border-radius:0;
                        width:100vw;
                        height:auto;
                        img{
                            width:100%;
                        }
                    }
                    /* &:nth-of-type(2){
                        height:100vh;
                        img{ height:100%; }
                    } */
                    &.middle{
                        margin:0 0 var(--vertical-margin-middle_SP) 0;
                        align-self:flex-center;
                    }
                }



                .image_wrapper_1{
                    /* background:#33ffff35; */
                    /* align-self:center; */
                    /* display:flex; */
                    /* height:max-contents;
                    width:100%;
                    align-items:center;
                    flex-direction:column; */
                    width:73.6363vw;
                    height:auto;
                    margin:0 0 0 0;
                    .case_image{
                        &:nth-child(1){
                            width:100vw;
                            height:auto;
                            border-radius:0;
                            margin:0 0 29.3181vw 0;
                            /* align-self:center; */
                        }
                    }
                    .image_wrapper_2{
                        /* background:#33ffff35; */
                        /* display:inline-flex; */
                        /* flex-direction:column; */
                        /* justify-content:space-between; */
                        width:100%;
                        .case_image.small{
                            margin:0 0 29.3181vw 0;
                            /* flex-grow:0; */
                            &:nth-child(1){
                                /* align-self:flex-start;
                                display:block;
                                height:auto; */
                                border-radius:2.7272vw;
                                width:59.2673vw;
                                margin:0 0 11.8261vw 0;
                                /* img{ width:100%; } */
                            }
                            &:nth-child(2){
                                /* align-self:flex-end; */
                                /* margin-right:0; */
                                /* display:block; */
                                /* height:auto; */
                                width:59.2673vw;
                                /* img{ width:100%; } */
                            }
                        }
                    }
                }
                .wrapper.last{
                    align-self:center;
                    width:100%;
                    height:auto;
                    margin:0;
                }
            }
            &.information{
                /* width:100%; */
                .wrapper{
                    /* width:100%; */
                    h3{
                        margin:0 0 -7.1rem 12.7272vw;
                        font-size:14.0909vw;
                    }
                    .info_wrapper{
                        .info_group{
                            line-height:230%;
                            margin:0;
                            dl{
                                padding-top:1.4444vh;
                                margin-left:3.5288vh;
                                dt{
                                    
                                }
                                dd{
                                    margin-left:16.6666vh;
                                    margin-top:-3.5555vh;
                                }
                            }
                        }
                    }
                    
                    h4{
                        display:flex;
                        align-items:center;
                        gap:1.1111vh;
                        font-size:2.4444vh;
                        opacity:0.5;
                        svg{
                            height:1.0622vh;
                        }
                    }
                }
            }
            #last_image{
                margin:0 0 var(--vertical-margin-middle_SP) 0;
                width:100vw;
                border-radius:0;
                height:auto;
            }
        }
        
        .back_button_area{
            height:80vh;
            width:100vw;
            .view_all_button{
                top:50%;
                left:50%;
                transform:translate(-50%,-50%);
            }
        }
    }

    
    &#solution_page{
        /* font-size:clamp(1.4rem, 1.9184vw, 1.6rem); */

        /* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
        backdrop-filterを発動させるためだけのエリア。
        フィルタ対象がデバイスの最大テクスチャサイズを超えると、
        GPUが高い負荷を回避するために自動的にフィルタ処理を放棄してしまう。
        画面に追従してフィルタをかけることで、flex要素の大きなサイズでも対応できる 
        ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★*/
        .glass{
            /* height:100vh;
            width:100vw; */
            /* position:sticky; */
            /* backdrop-filter: blur(3px)!important;  */
            /* -webkit-backdrop-filter: blur(3px);  */
            /* z-index:-1;
            left:auto;
            top:0; */
        }
        
        
        #content{
            /* margin:0;
            display: flex;
            flex-direction:column;
            position: relative; */
            /* section{
                display:flex;
                align-items:center;
                justify-content:left;
                width:max-content; 
            } */
        } 
        
        
        #content{
            /* margin:0;glass分の空白エリアをつぶす */
            /* display: flex; */
            /* flex-direction:column; */
            /* position: relative; */
            section{
                /* min-width: 1px;  */
                /* min-height: 1px; */
                /* display:flex; */
                /* align-items:center; */
                /* justify-content:left; */
                /* width:max-content;  */
                &.main {
                    /* margin-top:-100vh; */
                    margin-bottom:var(--vertical-margin-large_SP);
                    /* height:max-content; */
                    /* width:100vw;  */
                    /* flex-direction:column; */
                    #animations{
                        transform:translate(0,-3.1190%);
                        height: 123.8636vw;
                        /* width:100%; */
                        /* top: 0;
                        left: 0; */
                        /* opacity:1; */
                        .logo {
                            /* position:absolute; */
                            /* height: 100%; */
                            /* width:100%; */
                            /* transform:translate(-50%,-50%); */
                            /* aspect-ratio:auto; */
                            /* opacity:1; */
                            /* top: 50%; */
                            /* left:50%; */
                            height:100%;
                            .mark_wrapper{
                                /* position: absolute; */
                                right:9.3863vw;
                                top:0%;
                                width: 210.6090vw;
                                height: 150vw;
                                max-width:auto;
                                max-height:auto;
                                aspect-ratio:auto;
                                .mark {
                                    height: 100%;
                                    /* max-width: none;
                                    display:block;
                                    object-position:right; */
                                    /*この要素のみエリアを超過して配置させる*/
                                }
                                .splash_loop_images {
                                    /* height: 55.71813403416557%;
                                    aspect-ratio:1;
                                    position: absolute;
                                    top: 50%;
                                    transform: translateY(-50%);
                                    right: 0;
                                    border-radius:50%;
                                    overflow:hidden;
                                    img { height: 100%; } */
                                }
                            }
                        }
                    }
                
                    .description{
                        margin:16.8954vw 0 var(--vertical-margin-small_SP)  0;
                        display: flex;
                        flex-direction:column;
                        align-items:center;
                        .section_title{
                            /* height:11.2rem; */
                            h2{
                                /* line-height:11.2rem; */
                            }
                            &::before{
                                height:21rem;
                                width:21rem;
                                /* left:50%;
                                top:50%;
                                transform:translate(-50%,-50%);
                                z-index:-1; */
                            }
                        }
                        h3{
                            /* margin:0 0 6.4rem 0;
                            font-weight: 500;
                            font-size: 2.3rem;
                            line-height: 100%; */
                            /* color: var(--default-text-color); */
                        }
                        .wrapper{
                            .text{
                                /* background:#33ffff33; */
                                margin:0 0 0 0;
                                width:73.6363vw;
                            }
                        }
                        /* .more_button_wrapper{
                            margin-top:6.6666vh;
                            width:100%;
                            text-align:right;
                        } */
                    }
                }
            }
            .slides{
                /* display:flex; */
                /* flex-direction:column; */
                /* width:100vw; */
                /* height:max-content; */
                ul{
                    /* position:relative; */
                    /* left:0%; */
                    /* background:#33ffff20; */
                    /* height:auto; */
                    /* width:100vw; */
                    li{
                        /* flex-direction:column; */
                        /* position:relative; */
                        /* top:0%; */
                        /* left:0%; */
                        /* transform:translateY(0%); */
                        /* background:#33ffff20; */
                        /* display:flex; */
                        /* height:max-content; */
                        /* width:100vw; */
                        /* justify-content:space-between; */
                        /* will-change:filter; */
                        margin-bottom:var(--vertical-margin-middle);
                        .image_wrapper{
                            /* flex-shrink:0; */
                            /* aspect-ratio:1; */
                            /* position:relative; */
                            /* height:auto; */
                            width:89.0909vw;
                            img{
                                /* position:absolute; */
                                /* height:auto; */
                                /* width:100%; */
                                /* will-change:transform, opacity; */
                            }
                        }
                        .steps_description{
                            /* display:flex; */
                            /* flex-direction:column; */
                            /* height:fit-content; */
                            /* align-self:center; */
                            /* gap:4rem; */
                            /* margin-top:0; */
                            h3{
                                /* display:inline-flex; */
                                /* align-items:baseline; */
                                /* justify-content:space-between; */
                                /* background:#33ffff20; */
                                /* color: #74BEE4; */
                                /* overflow:hidden; */
                                span{
                                    /* font-style: normal; */
                                    /* font-weight: 200; */
                                    font-size: 10.2272vw;
                                    /* line-height: 100%; */
                                    /* display:inline-block; */
                                }
                                .japanese{
                                    /* font-weight: 350; */
                                    /* font-size: 1.4rem;
                                    line-height: 100%;
                                    text-align: right; */
                                }
                            }
                            p{
                                width:73.6363vw;
                                min-width:auto;
                            }
                        }
                        &.cycle{
                            /* margin:0; */
                            img{
                                /* position:relative; */
                                /* height:auto; */
                                width:89.0909vw;
                                /* left:50%; */
                                /* transform:translateX(-50%); */
                            }
                            &:nth-of-type(1){
                                display:none;
                            }
                        }
                        &:nth-of-type(2), &:nth-of-type(3), &:nth-of-type(4){
                            .image_wrapper{
                                align-self:center;
                                margin:0;
                            }
                            .steps_description{
                                align-self:center;
                                margin:0;
                            }
                        }
                    }
                }
            }
            .steps_description_last{
                /* display:flex; */
                /* flex-direction:column; */
                /* height:auto; */
                /* width:100vw; */
                /* justify-content:center; */
                /* align-self:center; */
                gap:5vh;
                p{
                    width:73.6363vw;
                    word-break:break-word;
                }
            }
        }
        
        
        .back_button_area{
            height:80vh;
            width:100vw;
            .view_all_button{
                top:50%;
                left:50%;
                transform:translate(-50%,-50%);
            }
        }
    }


    &#members_page{
        article{
            /* backdrop-filter: blur(4px); */
            /* -webkit-backdrop-filter: blur(4px); */
            /* flex-direction:column; */
            /* align-items:center; */
            /* margin:0; */
            /* padding:0; */
            /* height:100vh; */
            /* width: */
            .title{
                /* width:100vw; */
                /* height:auto; */
                margin:12.5628svh 0 0 0;
                .section_title{
                    margin:0 auto;
                    height:3.8rem;
                    h2{ line-height:3.8rem; }
                    &::before{ display:none; }
                }
            }
            .member_list{
                /* background-color:#33ffff10; */
                /* position:absolute; */
                height:100svh;
                /* width:100%; */
                ul{
                    /* display:block; */
                    /* align-items:normal; */
                    /* gap:normal; */
                    width:var(--vw-width, 52.0454vw);
                    /* height:100%; */
                    li{
                        /* background-color:#33ffff10; */
                        /* cursor: pointer; */
                        /* max-width:100vw; */
                        /* color: var(--default-text-color); */
                        /* width:auto; */
                        padding:0 var(--vw-padding, 10.4545vw);
                        details{
                            /* background-color:#ff33ff10; */
                            /* display:block; */
                            /* position:relative; */
                            /* top:50%; */
                            /* transform:translateY(-50%); */
                            /* gap:0; */
                            width:var(--vw-width, 52.0454vw);
                            summary{
                                width:var(--vw-width, 52.0454vw);
                                /* height:100%; */
                                /* max-width:none; */
                                /* max-height:none; */
                                picture{
                                    margin-bottom:6.5947vw;
                                    width:var(--vw-width, 52.0454vw);
                                    height:var(--vw-height, 52.0454vw);
                                    /* max-width:none; */
                                    /* max-height:none; */
                                    /* flex-shrink:0; */
                                    
                                }
                                .thumbnail_content{
                                    margin-left:2vh;
                                    .voice{
                                        color: #8ba4bbff;
                                        font-size:1.2rem;
                                        white-space: wrap;
                                    }
                                }
                            }
                            .about{
                                h3{
                                    font-size:clamp(2.2rem,5.9090vw,2.6rem);
                                    margin-bottom:0.8rem;
                                    /* display:flex; */
                                    /* align-items:center; */
                                    /* svg{
                                        margin-left:1.2rem;
                                        height:0.805em;
                                    } */
                                }
                                .sub{
                                    /* display:flex; */
                                    flex-direction:column;
                                    /* font-size:1.4rem; */
                                    /* font-weight: 350; */
                                    .name_eng{ 
                                        /* color: #8ba4bbff; */
                                        border-right: none;
                                        padding:0 0 2.1rem 0;
                                    }
                                    .position{ 
                                        white-space: wrap;
                                        padding-left:0;
                                    }
                                }
                            }
                            
                            .hider{
                                width:73.1818vw;
                                height:var(--vw-height, 0);
                                .main_contents_wrapper{
                                    /* position:relative; */
                                    /* width:100%; */
                                    /* height:100%; */
                                    max-width:none; 
                                    max-height:none; 
                                    /* border-left:none; */
                                    .close{
                                        /* display:none; */
                                    }
                                    .main_contents{
                                    /* background-color:#33ffff10; */
                                        /* position:relative; */
                                        /* top:0; */
                                        /* left:0%; */
                                        /* transform:none; */
                                        /* width:100%; */
                                        .about {
                                            /* margin-bottom:0; */
                                            /* h3{ display:none; } */
                                            /* .sub{ display:none; } */
                                        }
                                        dl{
                                            width:100%;
                                            margin-bottom:4.8561vw;
                                            font-size:1.2rem;
                                            line-height:1.3em;
                                            dd{
                                                margin-left:4em;
                                                margin-top:-1.3em;
                                            }
                                        }
                                        .message{
                                            font-size:1.2rem;
                                            line-height:1.5em;
                                            font-weight: 350;
                                        }
                                    }
                                }
                            }
                            
                            summary::-webkit-details-marker {
                                display: none;
                            }
                        }
                    }
                }
            }
        }
        .back_button_area{
            height:80vh;
            width:100vw;
            .view_all_button{
                top:50%;
                left:50%;
                transform:translate(-50%,-50%);
            }
        }
    }


    &#joinus_page{
        .firstView{
            /* height:fit-content; */
            /* width:100vw; */
            .section_wrapper{
                /* height:mox-content; */
                /* width:100%; */
                /* bottom:0; */
                /* overflow:visible; */
                .back{
                    /* position:sticky; */
                    /* bottom:0; */
                    /* height:100vh; */
                    /* height:100%; */
                    /* width:100%; */
                    .first_image{
                        /* background:#33ffff11; */
                        /* position:absolute; */
                        /* left:0; */
                        /* width:100vw; */
                        /* height:100vh;
                        top:0%; 
                        transform:translateY(0%); */
                        img{ 
                            /* background:#ff33ff33; */
                            /* position:absolute; */
                            /* top:0%;  */
                            /* transform:translateY(0%); */
                            /* width:auto; */
                            /* height:100%; */
                            /* min-width:100vw; */
                            /* object-fit:cover; */
                            /* object-position:center top; */
                        }
                        &.ribbon img{ 
                            /* top: 58.6264vh; 
                            left:0;
                            height:12.4790vh;
                            width:127.6978vw;
                            min-height:none;
                            max-width:none;
                            object-fit:fill;
                            object-position:1% top;
                            mask-image: linear-gradient(
                                to right, black 0%, 
                                black var(--mask-width_ribbon, 0%), 
                                transparent var(--mask-width_ribbon, 0%)); */
                        }
                    }
                    .catch_copy{
                        position:absolute;
                        /* z-index:0; */
                        top:23.0889svh;
                        /* left:50%; */
                        /* transform:translateX(-50%); */
                        /* font-size:15.4444vh; */
                        /* font-weight: 600; */
                        /* color: #FFFFFF; */
                        /* opacity: 0.85; */
                        /* display:block; */
                        /* flex-direction:column; */
                        width:73.8908vw;
                        /* filter: drop-shadow(0px 0px 1vh rgba(24, 91, 129, 0.13)); */
                        .animation{
                            /* display:none; */
                        }
                        .catch_copy_img{
                            /* display:block; */
                            /* width:100%; */
                        }
                    }
                    /* .scroll_down{
                        position:absolute;
                        bottom:0;
                        right:20.5882vw;
                        height:134px;
                        width:65px;
                    } */
                }
                .message_area{
                    /* position:relative; */
                    /* height:max-content; */
                    /* width:100%; */
                    /* backdrop-filter:blur(23px); */
                    /* background: rgba(21, 61, 82, 0.5); */
                    /* backdrop-filter: blur(3px); */
                    /* display:flex; */
                    flex-direction:column;
                    .left_area{
                        /* position:relative; */
                        /* height:auto; */
                        /* width:100%; */
                        margin-bottom:12.4em;
                        /* background:#33ffff10; */
                        .wrapper{
                            /* position:relative; */
                            /* top:0; */
                            /* left:0; */
                            /* transform:translate(0); */
                            /* background:#33ffff10; */
                            /* height:100%; */
                            /* width:100%; */
                            /* color: #FFFFFF; */
                            & .section_title_with_japanese {
                                .section_title{
                                    position:relative;
                                    margin-top:21.5827vw;
                                    left:50%;
                                    transform:translateX(-50%);
                                    height:21rem;
                                    width:21rem;
                                    &::before{ 
                                        height:21rem;
                                        width:21rem;
                                    }
                                    .title_text{
                                        position:relative;
                                        width:100%;
                                        h2{
                                            line-height:21rem;
                                        }
                                        .japanese{
                                            position:absolute;
                                            top:0;
                                            left:0;
                                            line-height:100%;
                                            top:68.9074%;
                                            width:100%;
                                            text-align:center;
                                            font-size:1.6rem;
                                            /* color: #FFFFFF; */
                                        }
                                    }
                                }
                                h3{
                                    /* word-break:keep-all; */
                                    /* position:relative; */
                                    margin:4.5rem auto 0;
                                    /* top:0; */
                                    /* left:0; */
                                    font-size:clamp(2.5rem,3.4444vh,3.1rem);
                                    /* font-weight:350; */
                                    /* line-height: 137%; */
                                    width:73.6363vw;
                                    /* text-align:center */
                                }
                            }
                        }
                    }
                    .right_area{
                        /* position:relative; */
                        /* height:auto; */
                        /* left:50%; */
                        /* transform:translateX(-50%); */
                        /* width:fit-content; */
                        .message{
                            /* position:relative; */
                            /* top:0; */
                            /* display:flex; */
                            gap:10.7rem;
                            padding:0 0 23.3333vh 0;
                            /* flex-direction:column; */
                            p{
                                width:73.6363vw;
                                /* font-weight:350; */
                                font-size: 1.4rem;
                                line-height: 6.2em;
                                /* letter-spacing: 0.2em; */
                                /* color: #FFFFFF; */
                                /* span{ letter-spacing: 0em; } */
                            }
                        }
                    }
                }
            }
            
        }
        .recruit_info{
            /* backdrop-filter:blur(4px); */
            /* display:flex; */
            /* align-items:center; */
            /* height:max-content; */
            /* width:100%; */
            /* flex-direction:column; */
            .jobs{
                /* display:flex; */
                /* height:max-content; */
                /* width:100%; */
                /* flex-direction:column; */
                /* align-items:center; */
                .section_title_with_japanese {
                    /* margin-bottom:12.8297vw; */
                    .section_title{
                        color: #74BEE4;
                        position:relative;
                        margin:21.5827vw 0 0 0;
                        left:50%;
                        transform:translateX(-50%);
                        height:21rem;
                        width:21rem;
                        &::before{ 
                            height:21rem;
                            width:21rem;
                        }
                        .title_text{
                            position:relative;
                            width:100%;
                            h2{
                                line-height:21rem;
                            }
                            .japanese{
                                position:absolute;
                                top:0;
                                left:0;
                                line-height:100%;
                                top:68.9074%;
                                width:100%;
                                text-align:center;
                                font-size:1.6rem;
                                /* color: #FFFFFF; */
                            }
                        }
                    }
                }
                ul{
                    /* display:flex; */
                    /* width:100%; */
                    /* height:max-content; */
                    /* align-items:center; */
                    /* flex-direction:column; */
                    .job_info{
                        --job_info_vertical_gap: 14.0909; /* ← 初期値を設定 */
                        /* --unit_vw : 1vw; */
                        /* --job_info_width_offset : 0vh; */
                        /* cursor: pointer; */
                        /* margin-left:0; */
                        /* margin-top:-1px; */
                        /* position:relative; */
                        /* border-left: none; */
                        /* border-right: none; */
                        /* border-top: 1px solid #C5D6E5; */
                        /* border-bottom: 1px solid #C5D6E5; */
                        /* width:calc(var(--recruit_info_width) + var(--job_info_width_offset)); */
                        width:100vw;
                        height:var(--recruit_info_height, 31.8181vw);
                        /* background:#ffffff; */
                        details{
                            /* width:100%; */
                            /* background:#33ffff10; */
                            summary{
                                /* width:100%; */
                                /* position:absolute; */
                                /* height:100%; */
                                height:var(--recruit_info_height, 31.8181vw);
                                /* list-style: none; */
                                .first_title{
                                    /* writing-mode: horizontal-tb; */
                                    /* position:absolute; */
                                    line-height:var(--recruit_info_height, 31.8181vw);
                                    /* top:0; */
                                    /* left:50%; */
                                    /* transform:translateX(-50%); */
                                    /* font-weight: 400; */
                                    font-size:clamp(1.8rem, 4.5454vw, 2rem);
                                    /* color: #74BEE4; */
                                }
                            }
                            .content_wrapper{
                                position:relative;
                                padding:calc(var(--job_info_vertical_gap) * var(--unit_vw)) 12.7272vw;
                                /* background:#ff33ff10; */
                                /* height:100%; */
                                /* width:auto; */
                                /* display:flex; */
                                /* flex-flow:column; */
                                /* align-items:center; */
                                .second_title{
                                    /* font-weight: 400; */
                                    /* width:100%; */
                                    /* text-align:left; */
                                    font-size:clamp(1.8rem, 4.5454vw, 2rem);
                                    /* 高さ計算簡素化のためinfoにめり込ませる */
                                    margin-bottom:clamp(-1.8rem, -4.5454vw, -2rem);
                                    /* line-height: 100%; */
                                    /* text-wrap:nowrap;  */
                                    /* color: #74BEE4; */
                                }
                                .info{
                                    margin: 0;
                                    padding:6.7rem 0 0 0;
                                    display:flex;
                                    flex-flow:column nowrap;
                                    /* background:#ff33ff10; */
                                    height:max-content;
                                    width:100%;
                                    gap:8.4rem;
                                    li{
                                        width:100%;
                                        h4{
                                            padding: 0.8888vh 3.8888vh;
                                            display:inline-block;
                                            background: #74BEE4;
                                            color:white;
                                            font-size: 2vh;
                                            border-radius: 3.6666vh;
                                        }
                                        .content_text{
                                            margin:3.7rem 0 0 0;
                                            width:100%;
                                            /* font-weight: 400; */
                                            font-size: clamp(1.4rem, 1.9184vw, 1.6rem);
                                            /* line-height: 150%; */
                                            /* color: var(--default-text-color); */
                                        }
                                        
                                        &.button_area{
                                            /* position:relative; */
                                            height:17.1111vh;
                                            width:100%;
                                            .view_all_button{
                                                /* position:relative; */
                                                left:50%;
                                                transform:translateX(-50%);
                                                height:100%;
                                                width:17.1111vh;
                                                p{
                                                    width:100%;
                                                    text-align:center;
                                                    letter-spacing: 0;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .gap{ /* paddingを使用するとbeforeのレイアウトや幅計算で不便なため */
                /* width:100%; */
                height:72.7272vw;
            }
            .last_image{
                /* display:flex; */
                /* flex-direction:column; */
                /* align-items:center; */
                /* height:auto; */
                /* width:100%; */
                /* position:relative; */
                .members_carousel{
                    height:61.3636vw;
                    margin-bottom:12.5vw;
                }
                .message_carousel{
                    writing-mode: horizontal-tb;
                    /* text-wrap:nowrap;  */
                    /* align-self:flex-start; */
                    /* font-weight: 600; */
                    font-size:40.9090vw;
                    /* color: #74BEE4; */
                    /* opacity: 0.06; */
                    margin:0 0 26.8181vw 0;
                    /* transform: rotate(180deg); */
                }
                .last_message{
                    /* position: relative; */
                    /* z-index: 1; */
                    /* display:flex; */
                    flex-direction:column;
                    align-items:center;
                    margin:0;
                    gap:14.5rem;
                    .text{
                        /* color: var(--default-text-color);
                        letter-spacing: 0.2em;
                        font-weight: 400;
                        line-height: 300%; */
                        font-size: clamp(1.4rem, 1.9184vw, 1.6rem);
                    }

                    .view_all_button{
                        /* align-self:center; */
                    }
                }
                
                &::before {
                    /* position:absolute; */
                    /* content: ""; */
                    /* height:100%; */
                    /* width:100%; */
                    /* mask-image:linear-gradient(to right, #ffffff00 0%, #ffffffff 30% ); */
                    /* backdrop-filter: blur(4px); */
                    /* -webkit-backdrop-filter: blur(4px); */
                }
            }
        }
        
        .back_button_area{
            /* height:100vw;
            width:100%;
            .view_all_button{
                top:50%;
                left:50%;
                transform:translate(-50%,-50%);
            } */
        }
    }

} /*body[data-device="SP"]{    end*/


#stories .stories_list .flex_container .wrapper .servece_card {
    height: 57.7777vh;
    aspect-ratio: 1.6153;
    background-image: url(../image/note.svg);
    background-position: center center;
    filter: drop-shadow(10px 10px 10px #001d4a4c);
    border-radius: 5.7777vh;
    -moz-border-radius: 5.7777vh;
    -webkit-border-radius: 5.7777vh;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#about_our_stories {
    position: sticky;
    width: 100vw;
    height: 100vh;
    /* background-color: #33ffff33; */
}



#about_our_stories .image {
    position: relative;
    width: 100%;
    height: 100%;
    /* background-color: #33ffff33; */
    overflow: hidden;
}

#fixed_area .heart_before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    height: 19.1113vh;
    aspect-ratio: 1;
    opacity: 0;
}

/* 移動後 */
#about_our_stories .image .heart_after {
    position: absolute;
    top: 22.2222vh;
    right: 0;
    width: 61.8029vw;
    height: 100%;
    /* transform: translate(100%,-10%); */
}

#about_our_stories .image .heart_after picture {
    position: absolute;
    width: 100%;
}

#about_our_stories .image .heart_after picture img {
    width: 100%;
}














/* SP用 */
@media screen and (min-width:440px){
	
}