@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import "../../css/include/reset.css";
@import "../../css/include/text.css";
@import "../../css/include/layout.css";
@import "../../css/include/deco.css";
@import "../../css/include/list.css";
@import "../../css/include/form.css";
@import "../../css/include/header.css";
@import "../../css/include/footer.css";

:root {
  --max-width: 100%;

  --color-primary: rgba(0, 90, 156, 1);
  --color-secondary: #4477c5;
  --color-accent: #f60;
  --color-tl: #333;
  
  --bgcolor-main: rgba(245, 245, 247, 1);
  --bgcolor-bl: rgb(1, 103, 175);
  --bgcolor-lbl: rgb(109, 181, 240);
  --bgcolor-red: rgb(207, 10, 10);
  --bgcolor-grn: rgb(13, 138, 13);
  --bgcolor-org: rgb(233, 117, 1);
  --bgcolor-gry: rgb(150, 150, 150);
  --bgcolor-lgry: rgb(240, 240, 240);

  --flx-width: 100%;
  --img-size: 100%;
  
  --main-gutter: 3rem;
  --main-padding: 1.5rem;

  --button-radius: 1.8rem;
  --box-radius: .8rem
}

body{
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    font-feature-settings: "palt";
}
header{
    position: relative;
}
section:not(:has(.company_mt1)){
    padding: 3rem 1rem;
    @media screen and (width >= 768px) {
        padding: 5rem 0;
    }
}
.company_mt1{
    padding: 100px 0 100px;
    margin-top: -70px;
    background-color: #fff;
    /*clip-path: polygon(400px 0, 100% 200px, 100% 100%, 0 calc(100% - 100px), 0 150px);*/
    clip-path: polygon(25% 0, 100% 10vh, 100% 100%, 0 calc(100% - 5vh), 0 8vh);
    animation: change-bg linear;
    animation-timeline: scroll(root);
    @media screen and (width >= 768px) {
        padding: 100px 0 200px;
        margin-top: -200px;
        clip-path: polygon(25% 0, 100% 20vh, 100% 100%, 0 calc(100% - 10vh), 0 15vh);
    }
}
section:has(.company_mt1){
    position: relative;
    &::before{
        content: '';
        width: 100%;
        height: calc(100% + 50px);
        background-color: rgba(0, 70, 125, 0.6);
        /*clip-path: polygon(800px 0, 100% 230px, 100% 100%, 0 calc(100% - 130px), 0 300px);*/
        clip-path: polygon(50% 0, 100% 10vh, 100% 100%, 0 calc(100% - 8vh), 0 20vh);
        position: absolute;
        left: 0; top: -25px;
        @media screen and (width >= 768px) {
            height: calc(100% + 100px);
            clip-path: polygon(50% 0, 100% 25vh, 100% 100%, 0 calc(100% - 13vh), 0 30vh);
            top: -50px;
        }
    }
}
.company_menu{
    position: sticky;
    top: 0;
    z-index: 88;
    ul{
        display: flex;
        flex-wrap: wrap;
    }
    li{
        width: 25%;
        background-color: rgba(0, 90, 156, .8);
        backdrop-filter: blur(5px);
        a{
            display: block;
            width: 100%;
            padding: 0.8rem 0;
            text-align: center;
            font-size: 3vw;
            color: #fff;
        }
        &.activ{
            a{
                color: rgba(255, 255, 255, .5);
            }
        }
    }
    @media screen and (width >= 768px) {
        position: fixed;
        top: 5rem;
        right: 2rem;
        animation: change-mn linear;
        animation-timeline: scroll(root);
        ul{
            display: block;
        }
        li{
            width: auto;
            margin-bottom: 1rem;
            border-radius: 2rem;
            transition: all .3s ease-out;
            a{
                display: block;
                width: inherit;
                padding: 0.8rem 8rem 0.8rem 7rem;
                font-size: 1rem;
                position: relative;
                &::after{
                    font-family: "Material Symbols Rounded";
                    content: "\e5c8";
                    font-size: 1.4rem;
                    position: absolute;
                    top: 0.4rem;
                    right: 1rem;
                    transition: all .2s ease-out;
                }
            }
            &:hover{
                background-color: rgba(0, 90, 156, .4);
                a::after{
                    right: .5rem;
                }
            }
            &.activ{
                pointer-events: none;
                a::after{
                    display: none;
                }
            }
        }
    }
}

@keyframes change-bg {
  0% { background-color: rgba(255, 255, 255, 1); /* ページ下部での背景色 */}
  100% { background-color: rgba(255, 255, 255, .6); /* ページ下部での背景色 */}
}
@keyframes change-mn {
  0% { top: 5rem; }
  30% { top: 1rem; }
  100% { top: 1rem; }
}