@SPSize: 768px;
@design-width: 375;

@px: 1vw / (@design-width / 100);

@media screen and (max-width: @SPSize){
    body {
        max-width: 100vw;
        overflow-x: hidden;
    }
    #app {

        width: 100vw;
        margin: 0 auto;
        padding-top: 0;
        overflow-x: hidden;
    }

    .header{

        .logo {
            width: 146 * @px;
            height: 18 * @px;
            margin-left: 30 * @px;
            margin-top: 6.333333vw;
            margin-bottom: 20 * @px;
        }
    }

    .body{

        .top-banner {
            @logoSize: 14vw;
            width: @logoSize * 3 + 2vw * 8;
            height: 16vw;
            margin: 0;
            margin-left: 20 * @px;
            z-index: 12;
            position: relative;
            

            .logo-list {
                padding-left: 2vw;
                padding-top: 0;
                font-size: 0;
                
                img {
                    width: @logoSize;
                    height: @logoSize;
                    margin: 2vw;
                }
            }
    
            .share-wrap{
                display: none;
    
               
            }
        }
    
        .big-banner {
            width: 100vw;
            height: 1525 * @px;
    
            .title-wrap {
                display: none;
                .title {
                    
                }
            }
    
            .news-wrap {

                width: 315 * @px;
                height: 261 * @px;
                margin-left: -(315 * @px) / 2;
                top: 151.866667vw;
                border-radius: 3vw;
    
                .title {
                    font-size: 4.4vw;
                    line-height: 2em;
                    margin: 5vw;
                    margin-left: 6vw;
                    margin-bottom: 3vw;
                }
    
                ol {
                    position: relative;
                    top: 0;
                    right: 0;
                    left: 33 * @px;
                    margin-left: -3vw;
                    padding-top: 0;
                    height: 45vw;
                    width: 70vw;
                    padding-right: 13px;
                    margin-top: 20px;
                    li {
                        //padding-right: 20px;

                        .date {
                            float: none;
                        }
                        .text {
                            .disc {
                                display: contents;
                            }
                            .news-title {
                                display: contents;
                            }
                        }

                        a {
                            font-size: 4vw;
                            line-height: 2em;
                        }
                    }
                }
            }
    
            .info-wrap {
                width: 315 * @px;
                height: auto;
                position: absolute;
                z-index: 11;
                left: 50%;
                margin-left: -(315 * @px) / 2;
                top: 240.666667vw;
                h2{
                    font-size: 8vw;
                    width: 100%;
                    font-weight: normal;
                    margin: 0;
                    line-height: 1.4em;
                }
    
                p {
                    margin-top: 2vw;
                    font-size: 16 * @px;
                    line-height: 30 * @px;
                    color: #3B4043;
                    text-align: left;
                }
            }
    
    
            .e1 {
                background-image: url(img/sp/header.png);
                width: 733.54 * @px;
                height: 1525 * @px;
                left: -50%;
                top: -4.2%;
            }
        }
    
        .categories {
            margin-top: 9vw;
            ol {
    
                li {

                    width: 320 * @px;
                    height: 68.466667vw;
    
                    a {
                        border-radius: 6vw;
                        width: 63vw;
                        line-height: 21vw;
                        font-size: 4.8vw;
                    }
    
                    &::after {
                    }
    
                    &.s2 {
                        margin-bottom: 7vw;
    
                        a {
                        }
    
                        &::after {
                        }
    
                    }
    
                    &.s3 {
                        height: 81vw;
    
                        a {
                        }
    
                        &::after {
                        }
    
                    }
    
                    &.s4 {
    
                        a {
                        }
    
                        &::after {
                        }
    
                    }
                }
            }
        }
    
        .section {
            
            padding-bottom: 580px;
            &::before {
                width: 100vw;
            }
    
            &::after {
                content: '';
                display: inline-block;
                background-position: center;
                background-size: contain;
                background-repeat: no-repeat;
                position: absolute;
                background-image: url(img/pc/oisix_fix_22+.png);
                width: 97vw;
                height: 100vw;
                margin-left: -50%;
                top: -163vw;
                left: 52%;
                z-index: 10;
            }
        
            .inner {
                width: 340 * @px;
                padding-bottom: 40px;
                &>h1 {
                    font-weight: bold;
                }
    
                &>p{
                }

                .descript {
                    left: 0;
                    right: 0;
                    top: -72vw;
                    margin-bottom: 20px;

                    h1 {
                        margin-left: auto;
                        margin-right: auto;
                        text-align: center;
                        font-size: 10.5vw;
                        svg {
                            height: 36.44px;
                        }
                    }

                    p {
                        font-size: 3.5vw;
                        margin-top: -5vw;
                        line-height: 2em;
                        padding-left: 0;
                    }
                }
    
                .block {
                    .title {
                        font-size: 5.5vw;
                        text-align: center;
                        line-height: 2.2em;
                        font-weight: bold;
    
                        &.sub {
                            font-size: 4.4vw;
                            line-height: 2.2em;
                            padding-top: 6vw;
                            padding-left: 0;

                            &.anno {
                                line-height: 1em;
                            }
                        }

                        &.main {
                            font-size: 8.6vw;
                            padding-top: 0vw;
                            padding-bottom: 0vw;
                            line-height: 1em;
                        }

                        &>span {
                            display: inline-block;
                            color: #fff;
                            background-color: #2E210E;
                            margin: 5vw auto 0;
                            padding: 6px 44px;
                            border-radius: 4vw;
                            min-width: 66vw;
                            text-align: center;
                            padding: 0;
                            max-width: 69vw;
                            padding: 0 1em;
                            line-height: 58px;
                        }
                    }
    
                    .list {
                        text-align: left;
                        margin-top: 4vw;
                        padding: 0 0vw;
    
                        .item {
                            width: 80vw;
                            min-height: 400px;
                            &:nth-child(3n) {
                                margin-right: 15px;
                            }
                            .cover {
                                margin: 5vw auto;
                                width: 71vw;
                                height: 48vw;

                                .date {
                                    padding: 2vw 6vw;
                                    font-size: 4vw;
                                }
                            }
    
                            .title {
                                font-size: 5vw;
                                //line-height: 2.5em;
                            }
    
                            p {
                                font-size: 4vw;
                                margin: 0 auto;
                                width: 100%;
                                color: #3B4043;
                                text-align: left;
                                margin-top: 1em;
                                line-height: 1.6em;
                            }
    
                            .link {
                                position: unset;
                                margin: 30px auto;
                                bottom: 7vw;
                                left: 9%;
                                a {
                                    font-size: 3.8vw;
                                    line-height: 1em;
                                }
                            }
                        }
                    }
    
                    
                }
    
            }
    
            &.s2 {
                &::before {
                }
                &::after {
                    background-image: url(img/pc/oisix_fix_21.png);
                }
                .inner {
                    h1 {
                    }
                }
            }
    
            &.s3 {
                &::before {
                }
                &::after {
                    background-image: url(img/pc/oisix_fix_-5.png);
                }
                .inner {
                    h1 {
                    }
                }
            }
    
            &.s4 {
                &::before {
                }
                &::after {
                    width: 100vw;
                    background-image: url(img/pc/oisix_fix_01.png);
                }
                .inner {
                    h1 {
                    }
                }
            }
    
            
        }
    
        .intro {
            padding: 120px 14px 50px;
            .title1 {
            }

    
            .list {
    
                .item {

                    .cover {
    
                    }
    
                    h3 {
                    }
    
                    .title {
                    }
    
                    p {
    
                    }
    
                    .more {
                        //position: unset;
                        //text-align: center;
                        //margin: 30px auto;
                    }
                }
            }
    
        }
    }
    .page_top_btn {
        display: inline-block;
        position: absolute;
        bottom: 1vw;
        right: 20 * @px;
        z-index: 100;
        width: 60 * @px;
        height: 60 * @px;
        margin-left: 0;
        left: auto;
    }
    
    .footer {
    }
    
    .more {
    
        &::after {
        }
    }

    .menu-btn {
        font-size: 0;
        display: inline-block;
        position: fixed;
        top: 25 * @px;
        right: 20 * @px;
        z-index: 100;
        background-image: url(img/sp/menu.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 60 * @px;
        height: 60 * @px;
    }

    .menu {
        position: fixed;
        right: -100vw;
        width: 100vw;
        height: 100vh;
        top: 0;
        z-index: 1000;
        transition: all 0.2s ease-in-out;
        background-color: #F3F1E8;
        opacity: 0;


        &.show {
            right: 0vw;
            opacity: 1;
        }

        .menu-close-btn {
            font-size: 0;
            display: inline-block;
            position: absolute;
            top: 25 * @px;
            right: 20 * @px;
            z-index: 100;
            background-image: url(img/sp/close.png);
            background-size: contain;
            background-repeat: no-repeat;
            width: 60 * @px;
            height: 60 * @px;

        }

        .category-navigate-wrap {
            padding-top: 82 * @px;

            .category-navigate {
                display: block;
                margin: 5 * @px auto;
                width: 249 * @px;
                border-radius: 100 * @px;
                border: 1.5 * @px solid #000000;
                text-align: center;
                padding: 24 * @px 0 22 * @px;

                img {
                    height: 17.12 * @px;

                    &.active {
                        display: none;
                    }
                }

                

                &:hover {

                    border-color: #78C7E5;
                    background-color: #78C7E5;

                    img {
                        &.active {
                            display: inline-block;
                        }
                        &.normal {
                            display: none;
                        }
                    }
                }
            }


        }

        .link {
            margin-top: 32 * @px;
            display: block;
            text-align: center;

            //img {
            //    height: 19.94 * @px;
            //}
        }

        .share-wrap {
            width: 227 * @px;
            background-color: #fff;
            margin: 36 * @px auto 0;
            text-align: center;
            padding-bottom: 28 * @px;

            .title  {
                display: block;
                color: #000;
                font-weight: 700;
                letter-spacing: 0.1em;
                line-height: 1em;
                font-size: 14 * @px;
                padding: 28 * @px;
            }

            a {
                display: inline-block;
                font-size: 0;
                background-image: url(img/header_sns_fb.png);
                background-size: contain;
                width: 60px;
                height: 60px;
                vertical-align: middle;
                opacity: 1;
                transition: all 0.2s ease;

                &.is {
                    background-image: url(img/header_sns_is.png);
                }

                &.tw {
                    background-image: url(img/header_sns_x.png?1);
                    width: 40px;
                    height: 40px;
                    padding-left: 15px;
                }
            }
        }
    }

    .design-wrap {
        position: absolute;
        z-index: 9999;
        opacity: .6;
        width: 100vw;
        .design {
            width: 100%;
        }
    }
}