@charset "UTF-8";
/* LESS Document */


/* 変数ファイルインポート */
@import "variable.less";

.keyFrame{
    
    transition: @keyFrame;

}
.opacity{
    
    opacity: 0.8;

}


/* 共通 */
body{
	background:#ffffff;
	font-size:16px;
	line-height:1.6;
	font-weight: 400;
	color:#555;
    font-family: 'Noto Sans JP', sans-serif;
    overflow-x: hidden;
}

p{
    text-align: justify;
    margin-top:1rem;
}
.center{
    text-align: center;
}
.flex{
    display: flex;
}

h1,h2,h3,h4,h5,h6{  
}

img{
    max-width:100%;
    height: auto;
}

a:link{
	color:@linkColor;
	transition:@keyFrame;
    text-decoration: none;
}
a:visited{
	color:@linkColor;
    text-decoration: none;
	}

a:hover{
	color:@linkColor;
    text-decoration: underline;
	}

a:active{
	color:@linkColor;
    text-decoration: underline;
	}

.btn01{

}



.btn02:link,
.btn02:visited,
.btn02:hover,
.btn02:active{
    text-decoration: none;
    display: block;
    line-height: 3.5;
    border: 1px solid @keyColor;
    background-color: #fff;
    color:@keyColor;
    max-width:100%;
    width:400px;
    text-align: center;
    margin:auto;
    position: relative;
}
.btn02:hover{
    background-color: @keyColor;
    color: #fff;
}

.btn02::after {
    transition: @keyFrame;
    background-color:@keyColor;
    content: '';
    -webkit-mask-image: url(../image/arrow_right.svg);
    mask-image: url(../image/arrow_right.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    position: absolute;
    width: 40px;
    height: 8px;
    margin: auto;
    top: 0;
    bottom: 3px;
    right: 1.3em;
}
.btn02:hover::after {
    background-color:#fff;
    right: 0.8em;
}



.tag{
                    font-size: 0.9rem;
                    display: block;
                    border-radius: 2px;
                    color:#fff;
                    width:140px;
                    text-align: center;
                    height: 26px;
                    line-height: 24px;
                    padding:0 10px;
                    box-sizing: border-box;
                    
                    }
                    .cat_itsolution{
                        background-color: @itColor;
                    }
                    .cat_document{
                        background-color: @docColor;

                    }
                    .cat_security{
                        background-color: @secColor;

                    }
                    .cat_other{
                        background-color: @otherColor;

}

a.tag:link,
a.tag:visited,
a.tag:hover,
a.tag:active{
    text-decoration: none;
    color:#fff;
    .keyFrame;
}
a.tag:hover,
a.tag:active{
    .opacity;
}




footer{
    background-color: @bgColor;
    
    #footer_menu{
        padding-left: @gridSpace - 15;
        padding-right:@gridSpace - 15;
    
    ul {
         margin-bottom:10px;
        li{
         box-sizing: border-box;
         margin-bottom:24px ;
         display: flex;
         align-items: center;
         height: auto;
         padding:0 12px;
         
        section{
            background-color: #fff;
            color:#fff;
            width: 100%;
            height: 100%;
            padding:50px 0;
            box-sizing: border-box;
            text-align: center;
            border-radius: 4px;
                   
                span{
                
                width:65px;
                height:65px;
                background-color: #fff;
                display: block;
                margin: auto;
                position: relative;
                border-radius: 50%;
                transition: @keyFrame;
                
                    img{
                    position: absolute;
                    top:0;
                    bottom:0;
                    margin:auto;
                    width:auto;
                    height: auto;
                    max-width:65%;
                    max-height:65%;
                    left:0;
                    right:0;
                    }
                    //視覚調整
                    img.it_icon{
                    top:2px;
                    }
                    img.doc_icon{
                    left:5px;
                    max-width:68%;
                    max-height:68%;
                    }
                    img.sec_icon{
                    top:2px;
                    max-width:62%;
                    max-height:62%;
                    }
                    img.other_icon{
                    max-width:54%;
                    max-height:54%;
                    }
                }
                h4{
                font-size:1.3rem;
                font-weight: 500;
                margin-top:0.5rem;
                }

                a,a:link,a:visited,a:hover,a:active{
                    color:#fff;
                    text-decoration: none;
       
                }
                p{
                text-align: center;
                margin-top:0.5rem;
                }
        }
        .it_fm{
            background-color: @itColor;
        }
        .doc_fm{
            background-color: @docColor;
        }
        .sec_fm{
            background-color: @secColor;
        }
        .other_fm{
            background-color: @otherColor;
        }
    }
   }
 }
 
  .link:hover{
        box-shadow: 0 0 10px rgba(0,0,0,0.4);
        
        span{
        transform:scale(1.15);
        }
  }
 
 #info{
 background-color: #fff;
 text-align: center;
 padding-top:40px;
 padding-bottom:40px;
 
     ul{
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
         li{
         
         }
         li + li:before{
         content: "｜";
         margin-left:10px;
         margin-right:10px;
         
         }
     }
 
     img{
         width:120px;
         height:auto;
     }
 }
 .logo{
     display: flex;
     justify-content: center;
     align-content: center;
     align-items: center;
     border-top:1px solid @bgColor;
     margin-top: 40px;
     padding-top:40px;
     p{
     text-align: justify;
     margin: 0;
     margin-left: 25px;
     }
 }
 
 #copyright{
 background-color:#141423;
 text-align: center;
 padding-bottom:35px;
 padding-top:35px;
 font-size: 0.9rem;
 }
 
}


.pagenation{
    text-align: center;
    margin-top:6em;

}

.pankuzu{
    font-size: 0.85rem;
    background: @bgColor;
    
    ul{
        padding-bottom:0.75em;
        padding-top:0.75em;
        display: flex;
        flex-wrap: wrap;
        
        li{
            margin-right:15px;
        }
        li + li:before{
            content:"〉";
            margin-right:6px;
        }
    }
}

#pagetop{
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: block;
    background:#4d4455;
    width: 55px;
    height: 55px;
    z-index: 100;
    
    a{
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
    }
    
    a::after {
        position: absolute;
        content: "";
        display: block;
        width: 12px;
        height: 12px;
        margin: auto;
        border-top: 1.5px solid #fff;
        border-right: 1.5px solid #fff;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        top:23px;
        left:0;
        right:0;
    }
    
}

#pagetop:hover{
    opacity:0.8;
}

.new-post{
    .tag;
    background-color:#EE3D22;
    font-size:0.85rem;
    height: 20px;
    padding:0 8px;
    line-height: 18px;
    position: relative;
    width:auto;
    display: inline-block;
    bottom:0px;
    border-radius: 0;
    margin-left:1em;
}
#page .new-post{ //視覚調整
    bottom:4px;
}

.right{
    text-align: right;
}