@charset "utf-8";

/* グレーの背景のエリア */
main{
    margin:0 240px;
    @media screen and (max-width: 1550px){
    margin:0 100px;
    background-color: var(---bg-color);
    }
    @media screen and (max-width: 1032px){
        margin: 0  auto;
        height:100dvh;
    }
    #footercontents{
         grid-area: main;
         @media screen and (max-width: 1032px){
         overflow-y:scroll;
         border-radius:40px 40px 0px 0px ;
         margin-top:100px;
         position:sticky;
         }
        @media screen and (max-width: 575px){
         border-radius:30px 30px 0px 0px ;
         margin-top:60px;
    }
    .contents_area{
        min-height: 100vh;
        border-radius: 30px;
        box-shadow: 0px 0px 7px #00000033;
        @media screen and (max-width: 1032px){
            padding: 0 20px;
            box-shadow:none;
            background-color: var(--bg-color);
            border-radius: 30px 0 0;
        }
        @media screen and (max-width: 575px){
            padding:0px;
        }
        .heading_area{
           padding:40px;
           @media screen and (max-width: 1550px){
            padding:20px;
           }
           @media screen and (max-width: 1032px){
            padding-top:40px;
           }
           @media screen and (max-width: 575px){
            padding:40px 20px;
           }
            h2{
                width:100%;
                border-radius: 22px;
                background:var(--sub-color);
                color:var(--main-color);
                display: flex;
                align-items: center;
                height: 44px;
                font-size: 26px;
                font-weight:700;
                padding-left:24px;
                margin-bottom:40px;
                @media screen and (max-width: 1199px){
                    font-size: 1.5em;
                }
                @media screen and (max-width: 1032px){
                    height: 32px;
                    border-radius: 16px;
                    scroll-margin-top:20px;
                    font-size: clamp(1rem, 0.572rem + 1.37vw, 1.25rem);
                    margin-bottom:20px;
                    &::before{
                        width: 70px;
                    }
                }
            }
        }}
        .contents_inner{
            height: calc(100% - 100px);
            padding: 7px 1rem 7px 7px;
            @media screen and (max-width: 1399px){
                height: calc(100% - 200px);
            }
            @media screen and (max-width: 575px){
                padding: 7px 7px 7px 7px;
            }
            .lead {
                margin-bottom: 10px;
                font-size: clamp(1rem, 0.572rem + 1.37vw, 1.25rem);
                line-height: 1.7;
                @media screen and (max-width: 1399px){
                    font-size:  clamp(1rem, 0.572rem + 1.37vw, 1.1rem);
                }
                @media screen and (max-width: 575px){
                    font-size:clamp(rem, 0.572rem + 1.37vw, 1.1rem);
                }
            }
            @media screen and (max-width: 575px){
                height: calc(100% - 140px);
            }
            .indent{
                padding-left:2.5rem;
            }
            .solidbox{
                border: 1px solid var(--text-color);
                padding:20px;
            }
            .httitle {
                margin-bottom: 5px;
                font-size: clamp(1rem, 0.572rem + 1.37vw, 1.38rem);
                font-weight:bold;
                line-height:1.7;
                text-indent: -1.8em;
                padding-left: 1.8em;
                @media screen and (max-width: 1032px){
                    font-size: clamp(1rem, 0.592rem + 1.57vw, 1.3rem);
                }
            }
            .httitle:first-child::first-letter{
                color:red;
                padding-right:1rem;
             }
             .howto{
                margin-top:12px;
             }
             .unitys{
                margin-top:40px;
                @media screen and (max-width: 575px){
                margin-top:20px;
                }}
             .unity{
                margin-top:80px;
                @media screen and (max-width: 575px){
                margin-top:50px;
                }
                li{
                    font-size: clamp(1rem, 0.572rem + 1.37vw, 1.25rem);  
                    list-style-type:disc;
                    margin-left:4rem;
                    line-height:1.7;
                    @media screen and (max-width: 575px){
                        margin-left:2rem;
                }}
                }
                }
                }}
            .footer{
                grid-area: footer;
                margin:40px; 
                height:50px;
                text-align:center;
                @media screen and (max-width: 1032px){
                            display:none;
                             }}
            .mb{
                display:none;
                @media screen and (max-width: 1032px){
                display:block;
                margin: 20px 0;
                    }}
            .footer img{
                width:105px;
                overflow:hidden;
                        }

            .linkurl{
                color:var(--main-color);
                overflow-wrap:break-word;
                    a:hover {
                        text-decoration: underline; 
                        text-decoration-color: var(--mouseover-color);
                            }}