@charset "utf-8";



#element .item4 .symbol{
    z-index: 1;
    mix-blend-mode: multiply;
}


@media print,
screen and (min-width: 813px) {

    
   
    


    #element{
        background-color: #fff;
        padding-top: 240px;
        padding-bottom: 160px;
    }

    #element h2{
        display: flex;
        justify-content: center;
     }

     #element h2 span{
         display: block;
        font-size: 20px;
        line-height: 1.35em;
        text-align: center;
        border-bottom:1px #C3BFBF solid;
        padding-bottom: 5px;
     }

     #element .shoulder{
         margin-top: 30px;
         display: flex;
         justify-content: center;
     }
     #element .shoulder span{
        display: block;
        font-size: 84px;
        line-height: 1em;
        font-weight: 600;
        color: #30A9D5;
        letter-spacing: 0.05em;
    }



    #element .items{
        margin-top: 100px;
    }

    #element .item{
        margin-top: 40px;
        margin-bottom: 180px;
     }


    #element .item:last-child{
        margin-bottom: 0;
     }

     #element .item .stitle{
         width: 480px;
         height: 480px;
         position: relative;
         margin-left: auto;
         margin-right: auto;
         margin-bottom: 90px;
     }
     #element .item .stitle .back{
        background-size: cover;
        background-position: center center;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        /* clip-path: polygon(0 0, 0 100%, 100% 100%,100% 0); */
     }
     
     #element .item .stitle .mask{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        mix-blend-mode: screen;
     }
     #element .item .stitle .mask .inner{ 
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        filter: blur(36px) contrast(64);
     }
   

     #element .item .stitle .texts{ 
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: #fff;
     }
     #element .item .stitle .texts .en{
        font-size: 20px;
        letter-spacing: 0.05em;
        line-height: 1em;
        font-weight: 500; 
    }
    
    #element .item .stitle .texts h3{
        text-align: center;
        font-size: 28px;
        letter-spacing: 0.05em;
        line-height: 1.5em;
        margin-top: 20px;
    }


    #element .item .body{
        margin-top: 50px;
    }
    #element .item .body p{
        margin-bottom: 20px;
        font-size: 18px;
        line-height: 2.4em;
        text-align: center;
    }





    #element .item1 .stitle .back{
        background-image: url(../img/element_back_1.jpg);
    }
        
    #element .item1 .logo{
        width: 367.87px;
        position: relative;
        margin-left: auto;
        margin-right: auto;
    }
    


    #element .item2 .stitle .back{
        background-image: url(../img/element_back_2.jpg);
    }
       
    #element .item2 .cols{
        width: 848px;
        margin-left: auto;
        margin-right: auto;
    }

    #element .item2 .cols .col{
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }
    #element .item2 .cols .col h3{
        width: 232px;
        background-color: #000;
        display: flex;
    }
    #element .item2 .cols .col h3 span{
        flex:1;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px #fff solid;
        margin: 6px;
        padding: 30px 0px;
        color: #fff;
        text-align: center;
        font-size: 20px;
        line-height: 1.75em;
        font-weight: bold;
    }
    #element .item2 .cols .col .cbody{
        flex:1;
        background-color: #ccc;
        padding: 30px;
        font-size: 18px;
        line-height: 2.4em;
    }


    #element .item2 .cols .col1 h3{
        background-color: rgba(0,127,178,1);
    }
    #element .item2 .cols .col1 .cbody{
        background-color: rgba(0,127,178,0.1);
    }

    #element .item2 .cols .col2 h3{
        background-color: rgba(219,36,34,1);
    }
    #element .item2 .cols .col2 .cbody{
        background-color: rgba(219,36,34,0.1);
    }

    #element .item2 .cols .col3 h3{
        background-color: rgba(71,160,26,1);
    }
    #element .item2 .cols .col3 .cbody{
        background-color: rgba(71,160,26,0.1);
    }

    


      
    #element .item3 .stitle .back{
        background-image: url(../img/element_back_3.jpg);
    }

    #element .item3 .statement{
        background-image: url(../img/element_statement.svg);
        background-size: 100% 100%;
        width: 582.412px;
        height: 50.23px;
        text-indent: -9999px;
        overflow: hidden;
        margin-left: auto;
        margin-right: auto;
    }

 


    #element .item4 .stitle .back{
        background-image: url(../img/element_back_4.jpg);
    }

    #element .item4 .symbol{
        margin-top: -200px;
        margin-bottom: -200px;
        width: calc(1694px / 2);
        margin-left: auto;
        margin-right: auto;
    }


}



@media only screen and (max-width: 812px) {

 
  

    #element{
        background-color: #fff;
        padding-top: 36vw;
        padding-bottom: 24vw;
    }

    #element h2{
        display: flex;
        justify-content: center;
     }

     #element h2 span{
         display: block;
        font-size: 18px;
        line-height: 1.35em;
        text-align: center;
        border-bottom:1px #C3BFBF solid;
        padding-bottom: 5px;
     }

     #element .shoulder{
         margin-top: -8em;
         opacity:0.1;
        align-items: center;
     }
     #element .shoulder span{
         text-align: center;
        display: block;
        font-size: 70px;
        line-height: 1em;
        font-weight: 600;
        color: #30A9D5;
        letter-spacing: 0.05em;
    }




    #element .items{
        margin-top: 100px;
    }

    #element .item{
        margin-top: 40px;
        margin-bottom: 60px;
     }


    #element .item:last-child{
        margin-bottom: 0;
     }
     
     #element .item .stitle{
         width: 480px;
         height: 480px;
         position: relative;
         margin-left: auto;
         margin-right: auto;
         left: calc(50% - 240px);
         transform:scale(0.6);
         /* margin-top: -120px; */
         margin-bottom: -60px;
     }

     #element .item:first-child .stitle{
           margin-top: -120px;
     }
     #element .item .stitle .back{
        background-size: cover;
        background-position: center center;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
     }
     
     #element .item .stitle .mask{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        mix-blend-mode: screen;
     }
     #element .item .stitle .mask .inner{ 
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        filter: blur(36px) contrast(64);
     }
   

     #element .item .stitle .texts{ 
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: #fff;
     }
     #element .item .stitle .texts .en{
        font-size: 20px;
        letter-spacing: 0.05em;
        line-height: 1em;
        font-weight: 500; 
    }
    
    #element .item .stitle .texts h3{
        text-align: center;
        font-size: 28px;
        letter-spacing: 0.05em;
        line-height: 1.5em;
        margin-top: 20px;
    }


    #element .item .body{
        margin-left: 8vw;
        margin-right: 8vw;
        margin-top: 30px;
    }
    #element .item .body p{
        margin-bottom: 20px;
        font-size: 14px;
        line-height: 2.4em;
    }





    #element .item1 .stitle .back{
        background-image: url(../img/element_back_1.jpg);
    }
        
    #element .item1 .logo{
        width: 50vw;
        position: relative;
        margin-left: auto;
        margin-right: auto;
    }
    


    #element .item2 .stitle .back{
        background-image: url(../img/element_back_2.jpg);
    }
       
    #element .item2 .cols{
        margin-left: 8vw;
        margin-right: 8vw;
    }

    #element .item2 .cols .col{
        margin-bottom: 40px;
    }
    #element .item2 .cols .col h3{
        background-color: #000;
        display: flex;
    }
    #element .item2 .cols .col h3 span{
        flex:1;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px #fff solid;
        margin: 6px;
        padding: 4vw 0px;
        color: #fff;
        text-align: center;
        font-size: 15px;
        line-height: 1.75em;
        font-weight: bold;
    }
    #element .item2 .cols .col .cbody{
        flex:1;
        background-color: #ccc;
        padding: 6vw;
        font-size: 14px;
        line-height: 2.4em;
    }


    #element .item2 .cols .col1 h3{
        background-color: rgba(0,127,178,1);
    }
    #element .item2 .cols .col1 .cbody{
        background-color: rgba(0,127,178,0.1);
    }

    #element .item2 .cols .col2 h3{
        background-color: rgba(219,36,34,1);
    }
    #element .item2 .cols .col2 .cbody{
        background-color: rgba(219,36,34,0.1);
    }

    #element .item2 .cols .col3 h3{
        background-color: rgba(71,160,26,1);
    }
    #element .item2 .cols .col3 .cbody{
        background-color: rgba(71,160,26,0.1);
    }

    


      
    #element .item3 .stitle .back{
        background-image: url(../img/element_back_3.jpg);
    }

    #element .item3 .statement{
        background-image: url(../img/element_statement.svg);
        background-size: 100% 100%;
        width: 84vw;
        height: calc(84vw / 582.412 * 50.23 );
        text-indent: -9999px;
        overflow: hidden;
        margin-left: auto;
        margin-right: auto;
    }

 


    #element .item4 .stitle .back{
        background-image: url(../img/element_back_4.jpg);
    }

    #element .item4 .symbol{
        width: 130vw;
        margin-left: -15vw;
        margin-top: -40vw;
        margin-bottom: -35vw;
    }




    
}