@charset "utf-8";

*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
} 



*:after {
display:block;
clear:both;
} 

element {zoom:1;} /* clearfix IE6, 7 */
element:after {content:"";} /* clearfix */

.cfix{zoom:1;} 
.cfix:after {content:"";}

html, body {
position: relative;
height: 100%;
}

body{
margin:0;
padding:0;
font-family:'Noto Sans JP', "メイリオ", "Meiryo","游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",  sans-serif;
font-weight:400;
color: #000;
width:100%;
background:#fff;

}


#wrap{
position:relative;
overflow:hidden;
width:100%;

}


#wrap {zoom:1;} 
#wrap:after {content:"";}





/*-------------------------------- */
/*.wrapper{
position:relative;
z-index:0;
}*/

#header{
position:fixed;
top:0;
left:0;
z-index:100;
background: -moz-linear-gradient(top, rgba(255,255,255,0.9) 0%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,0.9) 0%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0) 100%);
background: linear-gradient(to bottom,  rgba(255,255,255,0.9) 0%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top,  rgba(255,255,255,0.9) 0%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0) 100%);/*ie*/
padding-bottom:10px;
width:100%;
}

.yscroll#header{
background:rgba(255,255,255,0.9);
box-shadow:#666 0px 0px 10px;
}


header .header_box{
margin:0 auto;
position:relative;
border:1px solid rgba(255,255,255,0);
}


header .logo {
overflow:hidden;
}


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




@media only screen and (max-width: 768px) {/*sp*/
header{
width:100%;
height:80px;
}

header #search{
width:100%;
}
header #search .pc_none{
position:absolute;
top:10px;
right:75px;
z-index: 100;
}

header h1{
width:40%;
max-width:135px;
position:absolute;
top:15px;
left:5px;
z-index:100;
}

header h1 img{
width:100%;
height:auto;

}


#gnavi li{
text-align:center;
}
}

@media only screen and (min-width: 769px) { /*pc*/

header .header_box{
max-width:1170px;
}

header h1{
width:170px;
position:absolute;
top:26px;
left:74px;
z-index:100;
}



header #search{
width:140px;
position:absolute;
top:43px;
right:20px;
z-index:100;
}


}

@media only screen and (min-width: 769px) { /*pc*/


#gnavi{
margin:40px 170px 5px 400px;

}


#gnavi ul{
display:-webkit-box;
display:flex;
flex-flow: row nowrap;
justify-content:flex-end;
}




#gnavi li{
flex: 1 0 auto;/
margin:0 2px;
text-align:center;
font-size:90%;
line-height:100%;
font-weight:bold;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
text-shadow:#fff 0 0 3px,#fff 0 0 5px,#fff 0 0 10px;


}

#gnavi li a{
text-decoration:none;
color:#004DA0;
display:block;
padding:5px 5px 5px;
-moz-transition: 0.3s ease;
-webkit-transition:  0.5s ease;
-o-transition:  0.3s ease;
-ms-transition:  0.3s ease;
transition: 0.3s ease;
}




#gnavi li.nav_sub a{
display:block;
background:url(../img/ic_01.png) center bottom no-repeat;
padding:5px 5px 15px;
text-shadow:#fff 0 0 3px,#fff 0 0 5px,#fff 0 0 10px;


}

#gnavi li.nav_sub:hover a{
background:url(../img/ic_01_over.png) center bottom no-repeat;
}


#gnavi li span.roma{
display:block;
font-size:10px;
font-weight:normal;
color:#666;
line-height:100%;
padding-top:5px;


}


#gnavi li.nav_sub{
position: relative;

}

.sub_box{
position: absolute;
top: 40px;
width: 200px;
background: #fff;
padding-left:1.5em;
padding-top:1em;
border:1px solid #004DA0;
-webkit-transition: .2s ease;
transition: .2s ease;
visibility: hidden;
opacity: 0;
text-align:left;

}

.w_service{
width:350px;
}

#gnavi .sub_box ul{
display:-webkit-box;
display:flex;
flex-flow: column wrap;
justify-content:flex-start;


width:100%;
}




#gnavi .sub_box ul.cate span{
font-weight:bold;
display:block;
margin-bottom:10px;
}

#gnavi .sub_box ul.cate span a{
text-decoration:none;
color:#000;
display:block;
padding:0;
}




#gnavi li.nav_sub:hover > .sub_box {
top: 48px;
visibility: visible;
opacity: 1;
}


#gnavi li .sub_box li{
margin:0 2px;
/*position:relative;*/
text-align:left;
font-size:90%;
line-height:100%;
font-weight:normal;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
width:100%;

}

#gnavi li .sub_box li a,
#gnavi li.nav_sub .sub_box li a{
background:none;
}

#gnavi li .sub_box li a::before{
content:"― ";
}

#gnavi .sub_box ul.cate span a::before{
content:"";
}



}


@media only screen and (min-width: 1170px) { /*pc*/

header{
width:1170px;
margin:0 auto;
}

header .logo {
width:1100px;
margin:0 auto;

}

}




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



#gnavi{
margin: 1em 1em;
}

#gnavi dt img,
#search .pc_none img{
width:50px;
height:50px;
margin-top:5px;}


#gnavi ul{
text-align:center;

flex-flow: row wrap;
background-color:rgba(255,255,255,1);
border:1px solid #004DA0;
margin:0 1em;

}



#gnavi li{
flex: 0 1 100%;
}

#gnavi li a::before{
content:"― ";
}


#gnavi li a{
display:block;
color:#004DA0;
text-decoration:none;
padding:0.5em 2em;
font-size:130%;
text-align:left;
}

#gnavi li span.roma{
display:block;
font-size:80%;
color:#333;
font-weight:normal;
padding-left:1.5em;
}

#gnavi .sub_box{
display:none;
}


#togglemenu{
position:absolute;
top:0px;
right:0px;
z-index:110;

}


#togglemenu dt{
display:block;
cursor:pointer;
padding-right:10px;
text-align:right;
}


#togglemenu dt img{
/*position: fixed;*/
position:absolute;
top: 10px;
right:10px;
z-index: 110;
}


#togglemenu dd.overlay{
position: fixed;
top: 0;
left:0;
z-index: 99;
display: none;
/*overflow: auto;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;*/
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
padding-top:77px;
}


.search_box{
position: fixed;
top: 0;
left:0%;
z-index: 99;
display: none;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
padding-top:100px;
padding-left:10%;
padding-right:10%;
}

#ic_search{
cursor:pointer;

}


}


#togglemenu dd{
margin:0;
}

@media only screen and (min-width: 769px) {


#togglemenu dt{
display:none;

}
#togglemenu dd{
display:block!important;
}


}



article{
width:100%;
margin:0 auto;
border-bottom:1px solid #fff;

}

@media only screen and (min-width: 1170px) { /*pc*/

.inner{
max-width:1170px;
/*max-width:1095px;*/
margin:0 auto;
}

}

article {zoom:1;} 
article:after {content:"";} 





/** page top ***/

#page_top{
position: fixed;
right: 5px;
bottom: -50px;
}
#page_top a{
position: relative;
display: inline-block;
width: 50px;
height: 50px;
text-decoration: none;
opacity: 0.8;
}

#page_top a:hover{
opacity: 1;
}



footer{
width:100%;
padding:0;
margin:0px auto;
overflow:hidden;
position:relative;
border-top:1px solid #ccc;

}


#footer{
padding:20px 0 0;
text-align:center;
}


#footer #topicpath{
text-align:left;
margin:1em;
font-size:80%;
}

#footer .footer_nav{
text-align:left;
margin:1em 1em 2em;
float:left;
width:100%;
}

#footer .footer_nav a{
display:block;
text-decoration:none;
padding-top:0.2em;
padding-bottom:0.2em;
}

.cate span{
display:block;
padding-top:0.2em;
padding-bottom:0.2em;
}

#footer .footer_nav .fnav_sub a {
color:#004DA0;
}

#footer .footer_nav .fnav_sub a:hover {
color:#999;
}

#footer .footer_nav .fnav_sub li{
position:relative;
padding-left:1.2em;
}

#footer .footer_nav .fnav_sub li::before{
content :"― ";
color:#004DA0;
display:block;
/*border:1px solid #cc0;*/
position:absolute;
top:0.3em;
left:0;
}

#footer .footer_nav .fnav_sub li a{
color:#000;
}

#footer .footer_nav .fnav_sub li a:hover{
color:#999;
}



#footer .footer_nav .fnav_sub li li::before{
content :"";
padding-left:1.2em;
}


#footer .footer_nav .fnav_sub li{
text-decoration:none;
color:#000;
}






.group_logo{
clear:both;
margin-top:20px;
padding:20px 30px;
background-color:#F2F2F2;
margin-bottom:0;
}

.group_logo .cnci{
width:230px;
height:110px;
float:left;
}

.group_logo .cnci img{
margin-top:25px;
}

.gbox{
margin-left:230px;
text-align:left;
}

.group_logo .g{
display:inline-block;
padding:10px 17px;
}

.group_logo .g img{
height:42px;
width:auto;
vertical-align:middle;
}

.group_logo .katch img{
height:20px;
width:auto;
}

.group_logo .ctk img,
.group_logo .starcat img{
height:28px;
width:auto;
}


.group_logo .himawari img,
.group_logo .ccnc img,
.group_logo .ccn img{
height:30px;
width:auto;
}


.group_logo .sky1 img{
height:20px;
width:auto;
}


.group_logo .ccnet img,
.group_logo .greencity img{
height:25px;
width:auto;

}

small{
/*display:block;*/
display:inline-block;
width:100%;
padding:10px;
font-size:70%;
background-color:#004DA0;
color:#fff;
margin:0;
}




@media only screen and (min-width: 769px) { /*pc*/


.fbox1{
width:20%;
float:left;
}


.fbox2{
width:56%;
float:left;
}

.fbox3{
width:23%;
float:left;
}

.fbox2 .fnav_sub a{
width:100%;
}


.fsub_box1{
width:45%;
float:left;
}


.fsub_box2{
width:55%;
float:left;
}

.fbox3 li:nth-last-child(2){
margin-top:1em;
}
}



@media only screen and (min-width: 769px) and (max-width: 1169px) {



.fbox1{
width:25%;
float:left;
}


.fbox2{
width:40%;
float:left;
}

.fbox3{
width:35%;
float:left;
}


.fsub_box1{
width:100%;
float:left;
}


.fsub_box2{
width:100%;
float:left;
}

.fbox3 li:nth-last-child(2){
margin-top:1em;
}

}

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

#footer ul li{
width:49%;
float:left;
padding-right:10px;
}

#footer ul ul{
display:none;
}

.group_logo{
display:none;
}
}