@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/* 企業情報トップ */

/* common setting */

/* 画像リンク */
#main a:hover img {
    opacity:0.7;
    filter:alpha(opacity=70);
    -ms-filter:"alpha( opacity=70 )";
}

#navHeader {
    margin-bottom:0 !important;
}

#main a {color:#555555;text-decoration:none;}
#main a:hover {color:#555555;text-decoration:underline;}

/* breadcrumb footer */
#breadcrumb_sp {display:none;}


/* common setting END */


/* PCレイアウト */
/*-------------------------------------------------------------------------------------------*/

/* main contents */
#main {
    overflow:hidden;
    width:950px;
    margin:0 auto 50px;
    padding:0;
    font-family:"Noto Sans CJK JP","Noto Sans","メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
    text-align:center;
    font-size:1.2em;
}




/* gray area */
#main h1 {
}

#main #main_pc {display:block;}
#main #main_sp {display:none;}

.grayArea {
    width:100%;
    background:#555555;
    padding:22px 0 0;
}

/* info nav */
.grayArea ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width:calc(100% - 44px);
    margin:0 auto;
}
.grayArea ul li {
    position:relative;
    width:286px;
    background-color:#ffffff;
    margin-bottom: 22px;
    text-align:center;
    box-sizing:border-box;
}
#main .grayArea ul a {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index: 1;
}
#main .grayArea ul li:hover span {
    background-color:#e94709;
    color:#ffffff;
}

#main .grayArea ul li img {
    display: block;
    transition: all .3s ease;
}
#main .grayArea ul li a:hover ~  img {
    opacity:0.8;
}
.grayArea ul li span {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 6em;
    transition: all .3s ease;
}

.grayArea ul li.logo {
    display: flex;
    align-items: center;
}



/* 949px以下 */
/*-------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 949px) {

img, object, embed, video {
    width:100%;
    height:auto;
}

/* main contents */
#main {
    width:100%;
    font-size:1.0em;
}

/* gray area */
.grayArea {
    padding:2% 0 0;
}

/* nav */
.grayArea ul {
    width:96%;
}
.grayArea ul li {
    width:32%;
    margin-bottom: 2%;
}



}
/*-------------------------------------------------------------------------------------------*/
/* 949px以下 END */



/* 768px以下 */
/*-------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 768px) {

#main {
    margin-bottom:0;
}

/* breadcrumb footer */
#breadcrumb_sp {
    display:block;
    width:100%;
    padding:2em 5%;
    border-top:50px solid #eeeeee;
    border-bottom:50px solid #eeeeee;
    text-align:left;
    font-size:1.0em;
    box-sizing:border-box;
}

#breadcrumb_sp a:link {color:#1380cc;text-decoration:none;}
#breadcrumb_sp a:active {color:#1380cc;text-decoration:underline;}
#breadcrumb_sp a:visited {color:#1380cc;text-decoration:none;}
#breadcrumb_sp a:hover {color:#1380cc;text-decoration:underline;}

#pankuzu {display:none;}

#footer .pagetop p a {display: none;}

}
/*-------------------------------------------------------------------------------------------*/
/* 768px以下 END */



/* 640px以下 */
/*-------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 640px) {


#main {
}
#main #main_pc{ display:none;}
#main #main_sp{ display:block;}


/* nav */
.grayArea ul li {
    width:49%;
}
.grayArea ul li span {
    height: 5em;
}



}
/*-------------------------------------------------------------------------------------------*/
/* 640px以下 END */



/* - 480px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 480px) {


/* nav */
.grayArea ul li {
    font-size:0.85em;
}




}
/* - 480px end */