@media screen and (min-width: 980px) {/*ウィンドウ幅が980px以上の場合に適用*/
@charset "utf-8";
/* CSS Document */
body {
    overflow-x: auto;
    overflow-y: scroll;
	font-family: メイリオ,meiryo,ヒラギノ角ゴ pro w3,hiragino kaku gothic pro,sans-serif;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
	margin: 0;
	padding: 0;
	font-size:16px;
	/*line-height:20px;*/
}

.pc_none{
	display:none
}

img {
    border-style:none;
}

a img {
    border-style:none;
}

#wrapper{
	width:100%;
}

/*---------------------------ヘッダー---------------------------*/
#header{
	overflow: hidden;
}

#header .logo{
	float:left;
	padding:15px 10px 0 15px;
}

#header .menu{
	overflow:hidden;
	float:right;
}

#header .menu ul li{
	float:left;
	list-style:none;
	padding:30px 35px 0;
	height:53px;
	text-align:center;
	/*display: -webkit-box;  safari, Chrome */
	/*-webkit-box-align: center;  safari, Chrome */
}

#header .menu ul li a{
	color:#000000;
	text-decoration:none;
	display: block;
}

#header .menu ul li a:hover{
	color:#41c3eb;
}


#header .menu ul li.contact{
	background:url(../images/btn_menu_contact_bg.png) no-repeat;
	width:166px;
	height:53px;
	padding:30px 0 0 0px;
	text-align:center;
}

#header .menu ul li.contact a{
	color:#FFFFFF;
	text-align:center;
}

/*#header .menu ul li.contact a:hover{
	color:#CCCCCC;
}*/


.nav-button {
  display: none;
}
  .nav-wrap {
    display: block !important;
  }

/*---------------------------トップメイン---------------------------*/

/*トップページ用メイン画像*/
#main{
	clear:both;
	padding-bottom:80px;
}

#main .top_main_img{
	color:#ffffff;
	background:url(../images/34338748_m.jpg) center center no-repeat;
	clear:both;
	height:300px;
	width:100%;
	background-size: cover;
	text-align:center;
	font-size:40px;
	padding:195px 0 0 0;
	line-height:40px;
	background-position:center;
}

/*ニュース*/
#main .news{
	margin:0 auto 100px;
	width:1000px;
	padding-top:50px;
}

#main .news h1{
	font-size:30px;
	text-align:center;
	padding:0 0 15px 0;
	line-height:25px;
}

#main .news h1 .news_subtit{
	font-size:12px;
}

#main .news .n_bg_g{
	background-color:#F2F2F2;
	padding:30px 40px;
	clear:both;
	overflow: hidden;
}

#main .news .n_bg_w{
	background-color:#ffffff;
	padding:30px 40px;
	clear:both;
	overflow: hidden;
}

#main .news .date{
	float:left;
	padding:0 35px 0 0;
}

#main .news .n_tit{
	float:left;
}

/*トップページメインコンテンツ*/
#main .top_section{
	width:1000px;
	margin:0 auto;
	overflow: hidden;
}

/*新北海道スタイル安心宣言*/
#main .top_section .anshin_style{
	clear:both;
	overflow: hidden;
	margin-bottom:50px;
}

#main .top_section .anshin_style .img{
	float:left;
}

/*#main .top_section .anshin_style .img img{
	width:500px;
}*/

#main .top_section .anshin_style h2{
	font-weight:normal;
	font-size:36px;
	margin-bottom:20px;
}

#main .top_section .anshin_style .content{
	float:right;
	width:440px;
	padding:20px 30px;
}

#main .top_section .anshin_style .content .btn{
	margin:20px 0 0;
	text-align:center;
}	

/*サイバーセキュリティ*/
#main .top_section .cyber_securit{
	clear:both;
	overflow: hidden;
}

#main .top_section .cyber_security .img{
	float:right;
}

/*#main .top_section .cyber_security .img img{
	width:500px;
}*/

#main .top_section .cyber_security h2{
	font-weight:normal;
	font-size:26px;
	margin-bottom:30px;	
}

#main .top_section .cyber_security .content{
	float:left;
	width:460px;
	padding:30px 20px;
}


/*---------------------------フッター---------------------------*/
#footer{
	background-color:#909090;
	color:#FFFFFF;
	/*padding:20px 26px 30px;*/
	overflow: hidden;
	clear:both;
}

#footer .f_company{
	float:left;
	padding:20px 5px 30px 26px;
}

#footer address{
	font-style:normal;
	font-size:14px;
	padding-top:10px;
}

#footer .f_menu{
	float:right;
	padding:20px 40px 50px 5px;
}

#footer .f_menu ul li{
	font-size:14px;
	list-style:none;
	padding-bottom:5px;
}

#footer .f_menu li a{
	text-decoration:none;
	color:#ffffff;
}

#footer .copyright{
	clear:both;
	border-top:#ffffff solid 1px;
	padding:10px;
	text-align:center;
}

}


/*---------------------------------------------------------ここからスマホ---------------------------------------------------------------*/


@media screen and (max-width: 980px) {/*ウィンドウ幅が980px以下の場合に適用*/
@charset "utf-8";
/* CSS Document */

.sp_none{
	display:none
}

body {
    overflow-x: auto;
    overflow-y: scroll;
	font-family: メイリオ,meiryo,ヒラギノ角ゴ pro w3,hiragino kaku gothic pro,sans-serif;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
	margin: 0;
	padding: 0;
	font-size:16px;
	/*line-height:20px;*/
}

img {
    border-style:none;
	
}

a img {
    border-style:none;
}

#wrapper{
	width:100%;
}

/*---------------------------ヘッダー---------------------------*/
#header{
	overflow: hidden;
	position: fixed;
	background-color:#ffffff;
	width:100%;
	
}

#header .logo{
	float:left;
	padding:12px 10px 10px 5px;
}

#header .logo img{
	width:60%;
}

/*---------------------------トップメイン---------------------------*/

/*トップページ用メイン画像*/
#main{
	clear:both;
	padding-bottom:50px;
	padding-top:65px;
}

#main .top_main_img{
	color:#ffffff;
        background:url(../images/34338748_m.jpg) center center no-repeat;
/*	background:url(../images/img_main_sp.png) center center no-repeat;*/
	clear:both;
	height:155px;
	width:100%;
	background-size: cover;
	text-align:center;
	font-size:25px;
	padding:85px 0 0 0;
	line-height:35px;
	background-position:center;
}

/*ニュース*/
#main .news{
	margin:0 auto 50px;
	width:100%;
	padding-top:30px;
}

#main .news h1{
	font-size:23px;
	text-align:center;
	padding:0 0 5px 0;
	line-height:22px;
}

#main .news h1 .news_subtit{
	font-size:14px;
	font-weight:normal;
}

#main .news .n_bg_g{
	background-color:#F2F2F2;
	padding:17px 20px;
	clear:both;
	overflow: hidden;
}

#main .news .n_bg_w{
	background-color:#ffffff;
	padding:30px 40px;
	clear:both;
	overflow: hidden;
}

#main .news .date{
	/*float:left;*/
	padding:0 20px 0 0;
}

#main .news .n_tit{
	/*float:left;*/
}

/*トップページメインコンテンツ*/
#main .top_section{
	width:100%;
	margin:0 auto;
	overflow: hidden;
}

/*新北海道スタイル安心宣言*/
#main .top_section .anshin_style{
	clear:both;
	overflow: hidden;
	margin-bottom:25px;
}

#main .top_section .anshin_style .img img{
	width:100%;
}

#main .top_section .anshin_style h2{
	/*font-weight:normal;*/
	font-size:26px;
	margin-bottom:20px;
	text-align:center;
}

#main .top_section .anshin_style .content{
	margin:0 auto;
	width:85%;
	padding:20px 0px;
}

#main .top_section .anshin_style .content .btn{
	margin:20px 0 0;
	text-align:center;
}

#main .top_section .anshin_style .content .btn img{
	margin:0 auto;
	width:300px;
	image-rendering: -webkit-optimize-contrast;
}

/*サイバーセキュリティ*/
#main .top_section .cyber_securit{
	clear:both;
	overflow: hidden;
}

#main .top_section .cyber_security .img img{
	width:100%;
}

#main .top_section .cyber_security h2{
	/*font-weight:normal;*/
	font-size:18px;
	margin-bottom:20px;
	text-align:center;
}

#main .top_section .cyber_security .content{
	margin:0 auto;
	width:85%;
	padding:20px 0px;
}


/*---------------------------フッター---------------------------*/
#footer{
	background-color:#909090;
	color:#FFFFFF;
	/*padding:20px 26px 30px;*/
	overflow: hidden;
	clear:both;
}

#footer .f_company{
	padding:15px 5px 5px 20px;
}

#footer .f_company img{
	image-rendering: -webkit-optimize-contrast;
}

#footer address{
	font-style:normal;
	font-size:14px;
	padding-top:10px;
}

#footer .f_menu{
	padding:20px 0px 0px;
}

#footer .f_menu ul li{
	font-size:14px;
	list-style:none;
	padding:0px;
	border-bottom:1px solid #CCC;
}

#footer .f_menu li a{
	text-decoration:none;
	color:#ffffff;
	display:block;
	padding:12px 20px;
}

#footer .f_menu ul li.sp_top{
	border-top:1px solid #CCC;
}

#footer .copyright{
	clear:both;
	border-top:#ffffff solid 1px;
	padding:10px;
	text-align:center;
	font-size:10px;
}


/*---------------------------上部メニュー------------------------------*/
#header .btn-gNav{
  position: fixed;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 24px;
  z-index: 3;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-transition: all 400ms;
  transition: all 400ms;
}

#header .btn-gNav span{
  position: absolute;
  width: 100%;
  height: 4px;
  background: #666;
  border-radius: 10px;
  -webkit-transition: all 400ms;
  transition: all 400ms;
}
#header .btn-gNav span:nth-child(1) {
  top:0;
}
#header .btn-gNav span:nth-child(2) {
  top:10px;
}
#header .btn-gNav span:nth-child(3) {
  top:20px;
}
#header .btn-gNav.open span:nth-child(1){
  background: #fff;
  top: 6px;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}
#header .btn-gNav.open span:nth-child(2),#header .btn-gNav.open span:nth-child(3){
  top: 6px;
  background :#fff;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}
#gNav{
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 70%;
  background: #444;
  font-size: 16px;
  box-sizing: border-box;
  z-index: 2;
  padding-top: 50px;
  transition: .3s;
}
#gNav.open{
  right: 0px;
}
#gNav .gNav-menu{
  width: 100%:;
  height:100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  /*justify-content: center;*/
}
#gNav .gNav-menu li{
  display: block;
  padding : 20px 30px;
}
#gNav .gNav-menu li a{
  color: #ddd;
  text-decoration: none;
}


}

/*---------------------------トップへ戻るボタン-----------------------------*/
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #0079C4;
  opacity: 0.6;
  border-radius: 50%;
  margin:0 10px 10px 0;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}