@charset "utf-8";

/* モバイルファースト */
#pixc > section > div::before{background-image:url(../slideimgs/photo4.jpg);}
#linkc ul li:nth-of-type(1) a{background-image:url(../images/photo1.jpg);}
#linkc ul li:nth-of-type(2) a{background-image:url(../images/photo2.jpg);}
#linkc ul li:nth-of-type(3) a{background-image:url(../images/photo3.jpg);}

#pixc > section > div::before,
#linkc a{background-repeat:no-repeat; background-size:cover;}

#pixc > section > div::before,
#linkc ul li,
#linkc a,
#linkc a span{display:block;}

#nws h2,
#linkc a{display:-webkit-flex; display:flex;}
#nws h2{-webkit-justify-content:space-between; justify-content:space-between;}
#nws h2,
#linkc a{-webkit-align-items:center; align-items:center;}

#linkc a{position:relative;}
#linkc a::after,
#linkc a span::before,
#linkc a span::after{position:absolute;}
#linkc a span::before,
#linkc a span::after{z-index:2;}
#linkc a::after{z-index:1;}

#linkc a span,
#linkc a span::before,
#linkc a span::after{-webkit-transition-duration:.2s; transition-duration:.2s;}
#linkc a{-webkit-transition-property:transform; transition-property:transform;}
#linkc a span{-webkit-transition-property:background-color, width, padding; transition-property:background-color, width, padding;}
#linkc a span::before,
#linkc a span::after{-webkit-transition-property:background-color; transition-property:background-color;}

#pixc > section > section > div > div{background-color:#FFF;}
#linkc a::after{background-color:#F9F9FB;}
#linkc a span{background-color:rgba(0,0,0,.33);}
#linkc a span::before,
#linkc a span::after{background-color:#009da5;}
/* hover */
#linkc a:hover span{background-color:rgba(0,0,0,1);}
#linkc a:hover span::before,
#linkc a:hover span::after{background-color:#20B1FF;}

#linkc a{color:#FFF;}

#linkc a span{text-align:left;}
.pixcbtn{text-align:right;}

#linkc a span{line-height:2;}

#pixc > section > div::before{content:"";}

#pixc > section > div > div,
#linkc a span{box-sizing:border-box;}

/* */

main p:not(.err)+p:not(.err).pixcbtn{margin-top:30px;}

#linkc a:hover{-webkit-transform:translate(3px,3px); transform:translate(3px,3px);}
#linkc a::after{right:0; bottom:0; width:100px; height:70px; content:""; -webkit- transform:skewY(-35deg);  transform:skewY(-35deg); -webkit-transform-origin:100% 0%; transform-origin:100% 0%;}
#linkc a{background-position:center center; overflow:hidden;}
#linkc a span{width:80%; padding-left:20px;}
#linkc a span::before,
#linkc a span::after{content:"";}
#linkc a span::before,
#linkc a span::after{right:20px; width:4px; height:8px;}
#linkc a span::before{-webkit-transform-origin:100% 100%; transform-origin:100% 100%; -webkit-transform:skewX(30deg); transform:skewX(30deg); bottom:18px;}
#linkc a span::after{-webkit-transform-origin:100% 0%; transform-origin:100% 0%; -webkit-transform:skewX(-30deg); transform:skewX(-30deg); bottom:10px;}
#linkc a:hover span{width:100%; padding-left:50px;}

@media all and (max-width:567px){ /* ～567px スマホ横未満 */
#linkc a{height:150px; font-size:1.6rem;}
}
@media (min-width:568px){ /* 568px～ スマホ横以上すべて */}
@media (min-width:568px) and (max-width:767px){ /* 568px～767px スマホ横以上～タブレット縦未満 */}
@media (min-width:568px) and (max-width:979px){ /* 568px～979px スマホ横以上～デスクトップ未満 */
#linkc a{height:180px; font-size:1.9rem;}
}

@media all and (max-width:767px){ /* ～767px タブレット縦未満すべて */
#pixc > section > div::before{padding-top:150px;}
#pixc > section > div > div{padding-top:30px; padding-right:10px; padding-left:10px;}
}
@media (min-width:768px){ /* 768px～ タブレット縦以上すべて */
#pixc > section > div{display:-webkit-flex; display:flex;}
#pixc > section > div::before{background-position:right top; width:50%;}
#pixc > section > div > div{width:50%; padding-right:30px;}
}
@media (min-width:768px) and (max-width:979px){ /* の中でデスクトップ未満まで */
#pixc > section > div > div{padding-left:30px;}
}

@media all and (max-width:979px){ /* ～979px デスクトップ未満すべて */}

@media (min-width:980px){ /* 980px～ デスクトップ以上すべて */
#slideshow{margin-top:50px;}
#pixc > section > div > div{height:350px; padding-left:50px;}
#linkc a{height:260px; font-size:2.3rem;}
}

@media (max-width:1230px){/* ～1230px コンテンツマックスサイズ未満微調整 */}

/* End CSS */