@charset "utf-8";

/*//////////// 基本サイズ18px  ////////////
表示サイズ　指定する値
10px　63%
11px　69%
12px　75%
13px　82%
14px　88%
15px　94%			29px　181%
16px　100%		30px　187%
17px　107%		31px　193%
18px　113%		32px　200%
19px　119%		33px　206%
20px　125%		34px　212%
21px　132%		35px　218%
22px　138%		36px　224%
23px　144%		37px　230%
24px　150%		38px　236%
25px　157%		39px　242%
26px　163%		40px　248%
27px　169%		41px　254%
28px　175%		42px　260%
//////////////////////////////*/


/*************************************************"
			default
*************************************************/
body {margin: 0px;padding: 0px;font-size:16px;color:#000;position: relative;height: 100%;background-color:#fff;letter-spacing:0.05em;
			text-size-adjust: none;
			-webkit-text-size-adjust: none;/*iphoneの文字サイズの自動調整解除*/
			-webkit-font-smoothing: antialiased;	/*OSXでのフォントのレンダリング方法を調整*/
			/*Macでは普通の游ゴシックが適用され、Windowsでは「 游ゴシック Medium」になる*/
		font-family: Roboto, Hiragino Kaku Gothic Pro, "ヒラギノ角ゴ Pro W3" , "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
			-webkit-font-feature-settings: 'palt' 1;	/*fontの自動カーニング*/
			font-feature-settings: 'palt' 1;}}

@media all and (-ms-high-contrast:none) {
body{font-family: "メイリオ", Meiryo, sans-serif !important;}		/*IE11でline-heightがずれるための処置*/
}



@font-face {
	font-display:swap;
	font-family: "centurygothic";
	src: url("../webfont/centurygothic.woff") format('woff');
}





.minfont{font-family:"ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "游明朝 Medium", "Yu Mincho Medium", "游明朝体" , "YuMincho" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;}
/*
.minfont300{font-family:'Noto Serif JP', serif;font-weight:300;}
.minfont500{font-family:'Noto Serif JP', serif;font-weight:500;}
*/


/*Google Fonts をWeb Font Loadeスクリプトで非同期で読み込む--Noto Serif JPの、light300、Medium 500*/
/*font-family:'Noto Serif JP', serif;font-weight:500;*/
/*font-family:'Noto Serif JP', serif;font-weight:300;*/

/*Noto Sans JP - Bold　weight:700を、Google Fonts をWeb Font Loadeスクリプトで非同期で読み込んでいる*/


a         {color: #3155a4;text-decoration:none;transition: 0.8s;}/*hover ゆっくり変わる*/
a:link    {color: #3155a4;text-decoration:none;}
a:visited {color: #5C93AD;text-decoration:none;}
a:active  {color: #3155a4;text-decoration: underline;}
a:hover   {color: #FF9900;text-decoration: underline;}


h1,h2,h3,h4,h5,p,ol,ul,li,span,dl,dt,dd {margin:0;padding:0;font-weight:normal;}
	
img {border:none;margin:0;padding:0;vertical-align:middle;}
a:hover img {opacity: 0.7;-webkit-transition: 0.3s ease-in-out;transition: 0.3s ease-in-out;}

ul {margin:0px;padding:0px;list-style:none none outside;}
ol{margin:0;padding:0;}

p.clear		{clear:both;line-height:0px;display:block;}
div.clear {clear:both;}

hr{ border:none;border-top:1px solid #ccc;height:1px;}
/*hr{background:url(../images/hr_bg.png) repeat-x 0 0;height:10px;border: 0;}*/

.dotline{border-top: 1px dotted #aaa;line-height: 1px;height: 1px;}
.solidline{border-top: 1px solid #bbb;line-height: 1px;height: 1px;}

.strong{font-weight:bold;}

table{border-collapse: collapse;}


/*padding や border-width がwidth内に収まる*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}


/*clearfix--------------------*/
.cf:before,
.cf:after {content: " ";display: table;} 
.cf:after {clear: both;} 
.cf{*zoom: 1;}



/*---電話番号用---768px以上の解像度だけpointer-eventsを無効にして、PCのときはTELクリックの反応なし---*/
@media screen and (min-width: 768px) {	
	a[href^="tel:"] {pointer-events: none;}
}



/*----トップローディング ---------------------*/
#loader {position: fixed;z-index:900;top: 0;text-align: center;width: 100%;height: 100%;background:#003e75;}
#load-text {position: absolute;font-size:11px;color: #fff;text-align: center;width: 100%;top:40%;padding-top: 90px;height:115px;display: block;
						background:url(../js/loading.png) no-repeat center center,url(../js/loading.svg) no-repeat center top;background-size: 230px,auto;}
/*横に伸びるバー
#bar {width: 100%;height: 1px;font-size: 2px;position: absolute;top: 50%;}
#bar span {display: block;width: 0px;height: 1px;background: #c3bbb5;}*/





/* ページの各セクション-------------------*/
.section{padding:70px 0 70px 0;}


/*全ページ共通のテーブル構造　-------------------*/
#wrapper{position: relative;z-index:1;width:100%;background:#fff;}
.container {width:1100px;margin:0 auto;padding:0;font-size:98%;line-height:1.9;text-align:center;}



/*ページ上部右の出てくるナビmenu---*/
#menubtn{display:none;}
#navi_sp{display:none;}




/*///////////////////////////////////////////////////////////////////////////////
 全ページ共通のheader
///////////////////////////////////////////////////////////////////////////////*/
#header{position: fixed;top: 0;z-index:60;width:100%;border-bottom:4px solid #323743;background-color:#fff;webkit-transition: 0.5s;transition: 0.5s;}
#header.smaller {top:-75px !important;}

.head-cont{width:1100px;margin:0 auto;position:relative;height: 75px;}

.head-right{float:right;margin-top:22px;}
.head-rogo{float:right;}
.head-rogo a{background:url(../img/rogo.png) no-repeat 0 top;background-size:contain;width:196px;height:24px;text-indent:-8989px;display:block;overflow:hidden;}
.head-rogo a:hover{opacity:0.6;}
.head-rogo p{font-size:9px;line-height:1;margin-left: 33px;color: #666;}

.head-left{float:left;margin-top:18px;}
.head-left a{color:#000;text-decoration:none;}
.head-left a:hover{opacity:0.5;}
.head-left ul{line-height: 1;min-width: 240px;}
.head-left ul li{}
.head-left ul li.head-ul-com1{font-size:17px;text-align: center;white-space: nowrap;font-weight: bold;color: #444;}
.head-left ul li.head-ul-com2{font-size: 14px;padding:2px 0 3px 0;letter-spacing: 0.8em;font-weight: bold;background-color: #888;color: #fff;text-align: center;margin-top: 6px;}



/* ==================== 横メニュー ==================== */
.yokomenu-bg{width: 100%;text-align: center;background-color:#003e75;}

ul#yoko-menu{width:1100px;margin:0 auto;}
ul#yoko-menu > li{position:relative;float:left;}
ul#yoko-menu > li.yokomenu1{width:5%;background:none;}
ul#yoko-menu > li.yokomenu2{width:10%;}
ul#yoko-menu > li.yokomenu3{width:16%;}
ul#yoko-menu > li.yokomenu4{width:14%;}
ul#yoko-menu > li.yokomenu5{width:15%;}
ul#yoko-menu > li.yokomenu6{width:16%;}
ul#yoko-menu > li.yokomenu7{width:14%;}
ul#yoko-menu > li.yokomenu8{width:10%;}

ul#yoko-menu > li a{text-decoration:none;color:#fff;height:75px;width: inherit;display:table-cell;vertical-align:middle;text-align: center;font-size:93%;line-height: 1.3;/*background:url(../img/yokomenu_bar.png) no-repeat left center;*/}
ul#yoko-menu > li:last-child a{/*background:url(../img/yokomenu_bar.png) no-repeat left center, url(../img/yokomenu_bar.png) no-repeat right center;*/}

ul#yoko-menu > li a:hover,
ul#yoko-menu > li.current > a{background-color:#000;}
ul#yoko-menu > li a:hover img{opacity:1;}


/*カレント表示用----*/
body#business ul#yoko-menu li.yokomenu2,	/*事業内容*/
body#website ul#yoko-menu li.yokomenu3,	/*ホームページ制作*/
body#system ul#yoko-menu li.yokomenu4,	/*システム開発*/
body#system-management ul#yoko-menu li.yokomenu4,	/*システム開発 建築業向け 業務管理システム*/
body#web-advertising ul#yoko-menu li.yokomenu5,　/*Webセキュリティ診断サービス*/
body#web-advertising ul#yoko-menu li.yokomenu6,　/*インターネット広告*/
body#works ul#yoko-menu li.yokomenu7,/*制作実績一例　ホームページ制作実績*/
body#system-works ul#yoko-menu li.yokomenu7,/*制作実績一例　システム開発実績*/
body#toiawase ul#yoko-menu li.yokomenu8{background-color:#323743;}	/*お知らせ*/
				


/*プルダウンのサブメニュー*/
/*三角の表示用
ul#yoko-menu ul li:first-child a:after {content: '';position: absolute;width: 0;height: 0;left:45%;top: -9px;border-left: 7px solid transparent;border-right: 7px solid transparent;border-bottom: 10px solid #53912b;}
*/
ul#yoko-menu li ul {position: absolute;background-color:#0e4878;z-index:200;list-style-type: none;top:85%;left:0;margin-top: 1px;width:160%;margin: 0 0 0 -30%;padding: 0;opacity:0;visibility:hidden;transition: 0.5s ease-in-out;}

ul#yoko-menu li:hover ul,
ul#yoko-menu li ul.focused{visibility:visible;opacity:1;top:100%;}


ul#yoko-menu li ul > li {overflow: hidden;line-height:1.1;text-align:center;background-image:none;width: 100%;}
ul#yoko-menu li ul > li a{font-size:90%;font-weight:normal;line-height:1.2;color:#ddd;text-decoration:none;display:block;height:auto;padding:15px 5px 15px 5px;background-image: none !important;margin: 0;letter-spacing: 0;border-top: 1px dashed #777;}
ul#yoko-menu li ul > li:first-child a{border-top:none;}


ul#yoko-menu > li:hover > a {   }
ul#yoko-menu > li:hover li > a:hover {color:#fff;background-color:#0470c8;}
ul#yoko-menu li:hover > ul > li {overflow: visible;border-right:none;}

/*subsubmenu
ul#yoko-menu li ul li ul {top: 0;left: 100%;}
ul#yoko-menu li:last-child ul li ul {left: -100%;width: 100%;}
ul#yoko-menu li ul li ul li:first-child a:after{border:none;}
ul#yoko-menu li:hover ul li ul li:hover > a {}
ul#yoko-menu li ul li ul:before							{position: absolute;content: "";top:18px;left: -15px;width: 0;height: 0; border: 5px solid transparent;border-left-color:#fff;}三角の表示用
ul#yoko-menu li:last-child ul li ul:before	{position: absolute;content: "";top:18px;left: 200%;margin-left: -20px;border: 5px solid transparent; border-right-color:#fff;}
*/







/*///////////////////////////////////////////////////////////////////////////////
 main
///////////////////////////////////////////////////////////////////////////////*/
/*全ページ共通のページ下部の上部へ戻る */
#pagetop {position:relative;width:100%;margin:0 auto;z-index:50;}
#pagetop a {position: fixed;bottom:30px;right:20px;display: block;background:url(../img/pagetop.png) no-repeat 0px top;width:75px;height:75px;text-indent:-8989px;display:block;overflow:hidden;opacity:0.4;background-size: contain;}
#pagetop a:hover {opacity:1;}




/*///////////////////////////////////////////////////////////////////////////////
 全ページ共通のフッター
///////////////////////////////////////////////////////////////////////////////*/
#footer{width:100%;text-align:center;border-top:20px solid #003e75;margin-top: 90px;}

.footer-cont1{width:1100px;margin:0 auto;text-align:left;}

.footer-img{float:right;}

#footer-link{padding:32px 50% 0 0;}
#footer-link ul.first{float:left;width:40%;}
#footer-link ul.second{padding:0 0 0 50%;}

#footer-link ul li{margin-bottom:10px}
#footer-link ul li.before-line{border-top:1px solid #ccc;padding-top: 10px;}
#footer-link ul li.after-line{border-bottom:1px solid #ccc;padding-bottom: 12px;}
#footer-link ul li a{font-size:86%;line-height:1.2;color:#444;background: url(../img/arrow_blue5-9.png) no-repeat 0 center;padding-left: 9px;}
#footer-link ul li span.cursor-none{display:block;background: url(../img/arrow_dotglay4-4.png) no-repeat 0 center;padding-left: 9px;font-size: 86%;line-height: 1.2;}
#footer-link ul li a:hover{color: #3155a4;text-decoration: underline;}

.footer.btn-sougou{font-size:93%;margin-top:20px;}

#footer-link ul li ul.sub-menu{margin-left:13px;line-height: 1.2;margin-top: 1px;}
#footer-link ul li ul.sub-menu li{margin-bottom: 0;}
#footer-link ul li ul.sub-menu li a{font-size:79%;line-height:1.2;color:#444;background: url(../img/arrow_blue4-5.png) no-repeat 0 center;padding-left: 7px;}
#footer-link ul li ul.sub-menu li a:hover{color: #3155a4;}

#footer-link ul li ul.sub-menu.outlink{margin-left:0;line-height:1;margin-top: 7px;}
#footer-link ul li ul.sub-menu.outlink li a{font-size:10px;background: url(../img/arrow_blue4-5.png) no-repeat 0 center;padding-left: 7px;}

.footer-zip-cont{background-color:#e5eef6;padding: 35px 0 35px 0;}
.footer-zip-cont-inner{font-size:93%;width:1000px;margin:0 auto;text-align:left;}

.footer-zip-cont-left{float:left;width: 320px;padding-left: 2%;margin-top: -5px;}
.footer-zip-cont-right{/*! padding:0 0 0 370px; */letter-spacing: 0.04em;float: right;}

.footer-zip-cont-left .rogo-cap{width:241px;width: 70%;/*! vertical-align: bottom; */margin-left: 7px;}
.footer-zip-cont-left .rogo{width:230px;}
.footer-zip-cont-left img{width:100%;height:auto;vertical-align: bottom;}
.footer-zip-cont-left .rogo-cap-text{font-size:10px;line-height:1.2;padding:3px 0 0 32px;}

.footer-zip{margin-top: 12px;font-size: 84%;line-height: 1.4;letter-spacing: 0.05em;}
.footer-zip span{padding:0 7px 0 0;}

.footer-zip-cont-right dl{font-size:86%;line-height:1.4;}
.footer-zip-cont-right dl dt{float:left;width:80px;}
.footer-zip-cont-right dl dd{font-size:93%;padding-left:90px;margin-bottom:7px;} 
.footer-zip-cont-right dl dd span{padding-right: 7px;}
.footer-zip-cont-right dl dd span.zip{position:relative;width:190px;display: inline-block;}
.footer-zip-cont-right dl dd span.zip .zip-cap{position:absolute;top:1.3em;}

.footer-zip-cont-right dl dd span.span-tel{}

.copyright{font-size:69%;color:#fff;line-height:1.2;background-color:#003e75;text-align:center;padding:13px 0;}






/*印刷しない--------------------*/
@media print {
#pagetop,
#pagetop a{display:none;}
#header{position: absolute;}
}