/* --------------------
  全体
-------------------- */
h2{
    font-size: 2.5rem;
    margin-bottom: 3.5rem;
    line-height: 3.925rem;
    letter-spacing: .25rem;
    @media (max-width: 768px) {
        font-size: 1.5rem;
        line-height: 150%;
        margin-bottom: 2rem;
    }
    .underline{
        background-image: linear-gradient(to right, var(--yellow), var(--yellow));
        background-repeat: no-repeat;
        background-size: 100% 30%;
        background-position: bottom;
    }
}

h2 + p{
    font-size: 1.125rem;
    font-weight: bold;
    margin-bottom: 5rem;

    @media (max-width: 768px) {
        line-height: 180%;
        margin-bottom: 3rem;
    }
}
h3{
    font-size:2rem;
    letter-spacing: .1rem;
    line-height: 180%;
    margin-bottom:3.75rem;
    font-weight: 700;
    @media (max-width: 768px) {
        font-size:1.5rem;
        margin-bottom: 1.4rem;
    }
}
section{
    margin:auto;
    position: relative;
    @media (max-width: 768px) {
        width: 100%;
    }
    .inner{
        width: 59.5rem;
        margin: auto;
        position: relative;
        @media (max-width: 768px) {
            width: 100%;
        }
    }
}


.scroll-hide-button{
    position: fixed;
    z-index: 9999;
    top:50%;
    right:0;
    transform: translate(0,-50%);
    a{
        writing-mode: vertical-rl;
        padding:1.75rem 1.875rem;
        background-color: var(--orange);
        color:var(--white);
        font-size:1.25rem;
        font-weight: bold;
        box-shadow: 0 1.25rem 0 var(--orangedark);
        border-radius: .625rem 0 0 .625rem;
        letter-spacing: .25rem;
        position: relative;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease, visibility 0s linear 0.5s; /* visibilityを遅延させる */
    }
    a.is-visible{
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transition: opacity 0.5s ease, visibility 0s;
    }
    a::after{
        content: "";
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        background-color:var(--white);
        width: .75rem; height: calc(.75rem * 0.6);
        position: absolute;
        left: 50%;
        bottom: -.85rem;
        transform: translateX(-50%);
    }
    a:hover{
        background:var(--orangedark);
    }
    @media (max-width: 768px) {
        display: none;
    }
}
main.onetems{
    margin:7rem 0 0 0;
    @media (max-width: 768px) {
        margin:calc(2.4rem + 1.75rem) 0 0 0;
    }
}
/* --------------------
  section_top
-------------------- */

#section_top{
    background:var(--yellow);
    width: 100%;
    padding:2.75rem 0;
    overflow: hidden;
    .mv-title{
        display:flex;
        justify-content: center;
        flex-direction: column;
        gap:2.375rem;
        margin-bottom:3.125rem;
        @media (max-width: 768px) {
            gap: 1.8rem;
        }
        .mv-title__catchcopy{
            display:flex;
            justify-content: center;
            flex-direction: column;
            gap:.375rem;
            font-size:3rem;
            line-height: 150%;
            font-weight: bold;
            @media (max-width: 768px) {
                font-size: 2rem;
                line-height: 130%;
            }
            small{
                font-size:2.2rem;
                line-height: 150%;
                @media (max-width: 768px) {
                    font-size: 1.25rem;
                }
            }
        }
        .mv-title__logo{
            width:26.875rem;
            margin:0 auto;
            @media (max-width: 768px) {
                width:80%;
            }
        }
    }
    .mv-content{
        display: flex;
        justify-content: center;
        align-items: center;
        gap:3.5rem;
        @media (max-width: 768px) {
            flex-direction: column-reverse;
            gap: 2rem;
        }
        .mv-content__left{
            width: 19.75rem;
            display: flex;
            flex-direction: column;
            gap:1.625rem;
            @media (max-width: 768px) {
                width:80%
            }
            .register-button{
                a{
                    background-color:var(--red);
                    color:var(--white);
                    padding:.1875rem;
                    line-height: 240%;
                    font-size:1.5rem;
                    letter-spacing: 10%;
                    border-radius: .625rem;
                    display: block;
                }
            }
        }
        .mv-content__right{
            width: 30rem;
            @media (max-width: 768px) {
                    width: 85%;
            }
            picture{
                width: inherit;
                display: inline-block;
            }
        }
    }
}
#section_top::before,
#section_top::after{
    content: "";
    position: absolute;
    width: max(27.875rem, 35%);
    height: max(20.625rem, 100%);
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../img/about/onetems/onetems-mv-bg.png);
    @media (max-width: 768px) {
        display: none;
    }
}
#section_top::before{
    top: 9rem;
    left: -13.5rem;
}
#section_top::after{
    top: 13rem;
    right: -16rem;
}

/* --------------------
  section_about
-------------------- */

#section_about{
    padding: 5rem 0 7.5rem;
    @media (max-width: 768px) {
        padding:2.5rem 1.3333rem 2.5rem;
    }
    .about_lists{
        width: 59.5rem;
        margin: 0 auto 5rem;
        display: flex;
        flex-direction: column;
        gap:2.875rem;
        @media (max-width: 768px) {
            width: 100%;
            margin: 0 auto 3rem;

        }
      }
    .about_list{
        display: flex;
        align-items: center;
        gap:6.8125rem;
        @media (max-width: 768px) {
            flex-direction: column-reverse;
            gap: 1.6rem;
        }
        .about_textarea{
            flex:1;
            .label{
                display: inline-block;
                border-radius: 3.125rem;
                padding: .3rem 1rem;
                font-size: 1.25rem;
                font-weight: 700;
                line-height: 1.4rem;
                background-color: var(--yellow);
                margin-bottom: 1.6875rem;
                @media (max-width: 768px) {
                    margin-bottom: 1.2rem;
                }
            }
            .title{
                font-weight: 700;
                font-size: 1.5rem;
                line-height: 2.1875rem;
                margin-bottom: 1rem;
                @media (max-width: 768px) {
                    font-size: 1.2rem;
                    line-height: 1.6rem;
                    margin-bottom: 0.7rem;
                }
            }
            .text{
                font-size: .9375rem;
                line-height: 1.375rem;
                @media (max-width: 768px) {
                    font-size: .9375rem;
                    line-height: 1.375rem;
                }
            }
        }
        picture{
            width:23.5625rem;
            height: 17rem;
            background-color: #C9C9C9;
            @media (max-width: 768px) {
                width:100%;
            }
            /*
            img{
                display: none;
            }
                */
        }
    }
    .about_video{
        width: 59.5rem;
        @media (max-width: 768px) {
            width: 100%;
        }
        iframe{
            width: 100%;
            @media (max-width: 768px) {
                height: 15rem;
            }
        }
    }
}

/* --------------------
  section_banner_01
  section_banner_02
-------------------- */

.banner{
    background-color: var(--yelloworange);
    padding:1rem 0;
    width: 100%;
    @media (max-width: 768px) {
        padding:2rem 1.3333rem;
    }
    .banner__content{
        display:flex;
        justify-content: space-between;
        align-items: center;
        padding:0 3.1875rem;

        @media (max-width: 768px) {
            padding: 0;
            display: grid;
            grid-template-areas:
            "device logo"
            "device access";
            grid-template-columns:  1fr 1.7fr;
            grid-template-rows: auto auto;
            place-items: center;
            column-gap: 1rem;
        }
        picture{display: inline-block;}
        .device{
            width: 8.25rem;
            @media (max-width: 768px) {
                grid-area: device;
                width: auto;
            }
        }
        .logo{
            width: 21.75rem;
            height: 4.59rem;
            @media (max-width: 768px) {
                grid-area: logo;
                width: auto;
                display: flex;
                align-items: center;
            }
        }
        .access{
            width: 16.625rem;
            @media (max-width: 768px) {
                grid-area: access;
                width: auto;
            }
            .banner__register-button{
                a{
                    background-color: var(--black);
                    display:flex;
                    align-items: center;
                    justify-content: center;
                    width: fit-content;
                    gap:1rem;
                    border-radius: .625rem;
                    padding:.75rem 1.625rem;
                    color:var(--white);
                    line-height: 1.44;
                    position: relative;
                    border:1px solid var(--black);
                    margin: 1rem auto 0;
                }
                a::after{
                    content: "";
                    clip-path: polygon(0 0, 100% 50%, 0 100%);
                    background-color:var(--white);
                    width: calc(.75rem * 0.6); height: .75rem;
                }
                a:hover{
                    background:var(--gray);
                }
            }
        }
    }
}

/* --------------------
  section_feature
-------------------- */

#section_feature{
    padding:6.25rem 0;
    @media (max-width: 768px) {
        padding:3rem 1.3333rem;
    }
    h2{
        margin-bottom:5rem;
        @media (max-width: 768px) {
            margin-bottom:3rem;
        }
    }
    .feature_icons{
        display:grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2,1fr);
        justify-items: center;
        row-gap: 5rem;
        margin-bottom:6.25rem;
        @media (max-width: 768px) {
            row-gap: 2.2rem;
            margin-bottom:3rem;
            grid-template-rows: repeat(3,auto);
            grid-template-columns: repeat(3, 1fr);
        }
        > li{
            text-align: center;
            .icon{
                display: inline-block;
                width: 8.125rem;
                height: 6.25rem;
                @media (max-width: 768px) {
                    width: 65%;
                    height: auto;
                }
            }
            .label{
                text-align: center;
                font-size:1.125rem;
                line-height: 150%;
                font-weight: 700;
                @media (max-width: 768px) {
                    font-size:0.9rem;
                }
            }
        }
    }
    .feature_checklists{
        > li{
            display: flex;
            align-items: center;
            gap:.875rem;
            .icon{
                display: inline-block;
                width:2.375rem;
                height: 2rem;
                @media (max-width: 768px) {
                    width:1.8rem;
                    height: 1.5rem;
                }
            }
            .check-title{
                font-size: 1.5rem;
                line-height: 180%;
                padding:.962rem 0;
                border-bottom:1px dashed var(--lightgray03);
                flex:1;
                font-weight: 700;
                @media (max-width: 768px) {
                    font-size: 1rem;
                    padding: .75rem 0;
                }
            }
        }
    }
}
@media screen and (max-width: 768px) {
    .pcver { display: none; }
}