@charset "UTF-8";

main{
    margin: 110px 0 5%;
    padding: 0;
}
.access main{
    background: url(/images/access/title.png);
    background-size: cover;
    background-position: center;
}
.business_intro main{
    background: url(/images/business/title_intro.png);
    background-size: cover;
    background-position: center;
}
.business_industry main{
    background: url(/images/business/title_industry.png);
    background-size: cover;
    background-position: center;
}
.business_fiber main{
    background: url(/images/business/title_fiber.png);
    background-size: cover;
    background-position: center;
}
.business_metal main{
    background: url(/images/business/title_metal.png);
    background-size: cover;
    background-position: center;
}
.business_resin main{
    background: url(/images/business/title_resin.png);
    background-size: cover;
    background-position: center;
}
.eco main{
    background: url(/images/eco/title.png);
    background-size: cover;
    background-position: center;
}
.company main{
    background: url(/images/company/title1.png);
    background-size: cover;
    background-position: center;
}
.message main{
    background: url(/images/message/title.png);
    background-size: cover;
    background-position: center;
}
.news main{
    background: url(/images/news/title.png);
    background-size: cover;
    background-position: center;
}
.policy main{
    background: url(/images/privacy/title.png);
    background-size: cover;
    background-position: center;
}
.recruit main{
    background: url(/images/recruit/title.png);
    background-size: cover;
    background-position: center;
}
.sitemap main,
.error main{
    background: url(/images/sitemap/title.png);
    background-size: cover;
    background-position: center;
}
main .inner{
    width: 100%;
    margin: 0 auto;
    padding: 8% 0 9%;
    position: relative;
}
main .inner h2{
    background: var(--colorW);
    border-radius: 0 20px 0 0;
    color: var(--color01);
    font-size: var(--font32-50);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-width: 650px;
    padding: 2% 5% 2% 11%;
    position: absolute;
    bottom: 0;
    left: 0;
}
.eco main .inner h2{
    min-width: 1020px;
    padding: 2% 1% 2% 11%;
}
.eco main .inner h2 .innergroup{
    display: flex;
    flex-wrap: wrap;
}
.eco main .inner h2 i{
    font-style: normal;
    padding: 0 0 0 10px;
}
main .inner h2 span{
    font-size: 1rem;
    padding: 0 0 0 5%;
}
main .inner h2:after{
    content: "";
    background:url(/images/common/low_curve.svg);
    background-size:100%;
    background-repeat: no-repeat;
    background-position: bottom left;
    width: 32px;
    height: 32px;
    position: absolute;
    bottom: 0;
    right:-32px;
}

.content{
    max-width: var(--width01);
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
/*----------------------------
* サイトマップ
*----------------------------*/
.sitemap .content{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1080px;
    width: 90%;
    margin: 0 auto 6%;
    overflow: hidden;
}
.sitemap .content ul{
    width: 46%;
    margin: 0 0 2%;
}
.sitemap .content ul li{
    background:#e6e6e6;
    margin: 0 0 4%;
    transition: all ease 0.5s;
}
.sitemap .content ul li:hover{
    background:#9c9b9b;
}
.sitemap .content ul li a{
    display: block;
    color: var(--color01);
    padding: 4% 3% 4% 12%;
    position: relative;
}
.sitemap .content ul li:hover a{
    color:var(--colorW);
}
.sitemap .content ul li a:before{
    content: "";
    background: url(/images/icon_arrow1.svg);
    background-size:100%;
    background-repeat: no-repeat;
    width: 15px;
    height: 10px;
    position: absolute;
    top:50%;
    left: 6%;
    transform: translate(0,-50%);
}
.sitemap .content ul li a:hover:before{
    background: url(/images/icon_arrow2.svg);
    background-size:100%;
    background-repeat: no-repeat;
    width: 12px;
    height: 10px;
}
/*----------------------------
* エラーページ
*----------------------------*/
.error .content{
    line-height: 1.4em;
    max-width: 1080px;
    width: 90%;
    margin: 0 auto 6%;
    overflow: hidden;
}
.error .content p{
    margin: 0 auto 5%;
}
.error .content dl{
    background: #eee;
    padding: 2% 3% 3%;
 
    dt{
        text-align: center;
        padding: 0 0 20px;
        color: var(--color01);
    }
    
    dd{
         a{
            color: var(--color01);
            font-size: var(--font30-40);
            text-align: center;
            display: block;
            padding: 1% 0 0;
            position: relative;

            span{
                font-family: var(--fontS);
                position: relative;
                padding: 0 0 0 35px;

                &:before{
                    content: "";
                    background: url(/images/icon_phone1.svg);
                    background-size: 100%;
                    background-repeat: no-repeat;
                    width: 28px;
                    height: 27px;
                    position: absolute;
                    top: 52%;
                    left: 0;
                    transform: translate(0, -50%);
                }
            }
         }
    }
}

/*----------------------------
* プライバシーポリシー
*----------------------------*/
.policy #policy_inner.content{
    color: var(--color01);
}
.policy #policy_inner.content h2{
    font-size: 20px;
    margin: 0 auto 3%;
    padding: 2% 0 2% 80px;
    position: relative;
    width: 100%;
}
.policy #policy_inner.content h2:before{
    content: "";
    background: url(/images/common/icon_title.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 60px;
    height: 70px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
}
.policy #policy_inner.content p.caption{
    width: 90%;
    margin: 0 auto 2%;
}
.policy #policy_inner.content dl{
    line-height: 1.6em;
    width: 90%;
    margin: 0 auto;
}
.policy #policy_inner.content dl dt{
    margin: 0 0 1%;
}
.policy #policy_inner.content dl dd{
    margin: 0 0 2%;
}
.policy #policy_inner.content dl.attention{
    background: var(--color05);
    padding: 3% 5% 1%;
}
.policy #policy_inner.content dl ol{
    padding: 2%;
}

/*----------------------------
* メニュー
*----------------------------*/
#menu01.content,
#menu02.content{
    display: flex;
    flex-wrap: wrap;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5%;
    margin: 5% auto 2%;
}
#menu01.content a,
#menu02.content a{
    max-height: 180px;
    height: 12vw;
    width: 23%;
    position: relative;
    overflow: hidden;
}
#menu01.content a:before,
#menu02.content a:before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left:0;
    transform: scale(1);
    transition: all ease 0.8s;
}
#menu01.content a:hover:before,
#menu02.content a:hover:before{
    transform: scale(1.15);
}
#menu01.content a.list01:before{
    background: url(/images/common/menu01.png);
    background-repeat:no-repeat;
    background-size:cover;
    background-position: center;
}
#menu01.content a.list02:before{
    background: url(/images/common/menu02.png);
    background-repeat:no-repeat;
    background-size:cover;
    background-position: center;
}
#menu01.content a.list03:before{
    background: url(/images/common/menu03.png);
    background-repeat:no-repeat;
    background-size:cover;
    background-position: center;
}
#menu01.content a.list04:before{
    background: url(/images/common/menu04.png);
    background-repeat:no-repeat;
    background-size:cover;
    background-position: center;
}
#menu02.content a.list01:before{
    background: url(/images/business/intro_img01.png);
    background-repeat:no-repeat;
    background-size:cover;
    background-position: center;
}
#menu02.content a.list02:before{
    background: url(/images/business/intro_img02.png);
    background-repeat:no-repeat;
    background-size:cover;
    background-position: center;
}
#menu02.content a.list03:before{
    background: url(/images/business/intro_img03.png);
    background-repeat:no-repeat;
    background-size:cover;
    background-position: center;
}
#menu02.content a.list04:before{
    background: url(/images/business/intro_img04.png);
    background-repeat:no-repeat;
    background-size:cover;
    background-position: center;
}
#menu01.content a p,
#menu02.content a p{
    background: var(--clear01);
    color: var(--color01);
    font-weight: 600;
    display: flex;
    align-items: center;
    width: 100%;
    height: 46px;
    margin: auto auto 0;
    padding: 10px 20px;
    position: absolute;
    bottom:0;
    left: 0;
}
#menu01.content a p span,
#menu02.content a p span{
    background: var(--color01);
    width: 30px;
    height: 30px;
    position: absolute;
    top:50%;
    right:0;
    transform: translate(0,-50%);
}
#menu01.content a p span:after,
#menu02.content a p span:after{
    content:"";
    background: url(/images/icon_arrow2.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 13px;
    height: 12px;
    position: absolute;
    top:50%;
    right:0;
    transform: translate(-50%,-50%);
}

@media all and (min-width:1661px) {
    .eco main .inner h2{
        min-width: 1200px;
    }
}

@media all and (min-width: 769px) and (max-width: 1199px) {
    .eco main .inner h2{
        min-width: unset;
        width: 74%;
        padding: 2% 1% 2% 11%;
    }
    .eco main .inner h2 i{
        font-size: 16px;
        padding: 0;
    }
}

@media all and (min-width:769px){
}
@media all and (min-width:769px) and (max-width:1100px){
    main {
        margin: 160px 0 5%;
    }
    main .inner{
        padding: 12% 0 14%;
    }
}
@media all and (max-width:768px){
    main,
    .content{
        width: 100%;
        overflow: hidden;
    }
    main{
        margin: 80px 0 5%;
    }
    main .inner{
        padding: 16% 0 18%;
    }
    main .inner h2{
        min-width: unset;
        width: 75%;
        padding: 4% 5% 4% 5%;
    }
    .eco main .inner h2{
        min-width: unset;
        width: 85%;
        padding: 2% 1% 2% 5%;
    }
    .eco main .inner h2 .innergroup{
        display: flex;
        flex-wrap: wrap;
        width: 56%;
    }
    .eco main .inner h2 i{
        font-size: 14px;
        padding: 0;
    }
    .eco main .inner h2 span{
        font-size: 12px;
        padding: 0 0 0 1%;
    }

    /*----------------------------
    * サイトマップ
    *----------------------------*/
    .sitemap .content ul{
        width: 100%;
        margin: 0 0 0;
    }
    .sitemap .content ul li{
        margin: 0 0 4%;
    }
    .sitemap .content ul li a{
        padding: 4% 3% 4% 15%;
    }
    /*----------------------------
    * エラーページ
    *----------------------------*/

    .error .content dl{
        background: #eee;
        padding: 5% 3% 6%;
    }

    /*----------------------------
    * プライバシーポリシー
    *----------------------------*/
    .policy main{
        background: url(/images/privacy/title_sp.png);
        background-size: cover;
        background-position: center;
    }
    .policy #policy_inner.content{
        margin: 0 0 12%;
    }
    .policy #policy_inner.content h2{
        width: 90%;
        margin: 0 auto 8%;
    }
    .policy #policy_inner.content p.caption{
        margin: 0 auto 4%;
    }
    .policy #policy_inner.content dl dd{
        margin: 0 0 4%;
    }
    /*----------------------------
    * メニュー
    *----------------------------*/
    #menu01.content a,
    #menu02.content a{
        max-height: 120px;
        width: 46%;
        height: 30vw;
        margin: 0 0 3%;
    }
    #menu01.content a p,
    #menu02.content a p{
        height: 36px;
    }
    #menu01.content a p span,
    #menu02.content a p span{
        width: 22px;
        height: 22px;
    }
    #menu01.content a p span:after,
    #menu02.content a p span:after{
        width: 11px;
        height: 9px;
    }
}