@charset "utf-8";

@media screen and (max-width: 1300px) {
	/*============　事業内容  business/　=============*/
	body.naka .section.business-bg1,
	body.naka .section.business-bg2,
	body.naka .section.business-bg3,
	body.naka .section.business-bg4,
	body.naka .section.business-bg5{background:none;}
	
	.container.business {width: 97%;}
	.business-box {margin: 0 auto;}
	
	.business-box dl dt {width: 57%;}
	.business-box dl dd {width: 52%;}

	/*=====　システム開発＞建築業向け 業務管理システム  system-management/　======*/
	.parallax-inner {width: 90%;}


}



@media screen and (max-width: 1150px) {
	/*============　事業内容  business/　=============*/	
	.business-box dl dd {padding:35px 40px 25px 45px;}
	.business-box dl dd.right,
	.business-box dl dd.left{min-height: 300px;}
	.business-box dl dd .midashi {height: 70px;}
}





@media screen and (max-width: 1100px) {
	/*パンくず------------*/
	.breadcrumb-box{width: 97%;}

	/*============　ホームページ制作  website/　=============*/
	dl.website-teian-waku {width: 96%;}
}




@media screen and (max-width: 1000px) {
	/* =============中ページ共通のスタイル================== */
	h2 {font-size: 180%;margin: 10px 0 30px 0;}
		
	/*============　事業内容  business/　=============*/	
	.business-box dl dt {width: 90%;}
	.business-box dl dt.left {float: none;}
	.business-box dl dd {width: 90%;}
	.business-box dl dd.right,
	.business-box dl dd.left {min-height: unset;}
	.business-box dl dd.right {float: right;position: relative;top: -30px;}
	.business-box dl dd.left {float: left;position: relative;top: -30px;}
	
	body.naka .section.business-bg2,
	body.naka .section.business-bg3,
	body.naka .section.business-bg5{padding: 40px 0 50px 0;}
	body.naka .section.business-bg4{padding: 40px 0 0 0;}
	
	/*============　ホームページ制作  website/　=============*/
	ul.system-ul li {width: 37%;margin: 0 2%;}
	ul.system-ul li:nth-child(3) {margin-top: -20px;}
	dl.website-teian-waku dd {width: 49%;}
}





@media screen and (max-width: 940px) {
	body.naka #headerimgs {height: 150px;background-size: cover !important;}
	
	/*=====　システム開発＞建築業向け 業務管理システム  system-management/　======*/
	.parallax-inner {width: 94%;padding: 50px 40px 10px 40px;}
	.parallax-inner h2 {margin: 0 0 20px 0;}
	table.system-m-table {margin-bottom: 20px;}
	
	/*============　ホームページ制作実績一覧  works/　=============*/
	.works-box article {margin: 0 3% 30px 0 !important;width: 29% !important;}
	
	/*============　システム開発実績一覧  system-works/　=============*/
	.works-box .noimgs-box article {margin: 0 3% 0 0;}

	/*============　Webセキュリティ診断サービス  web-security/　=============*/
	ul.security-flow-ul li {min-height: 430px;margin-right: 2.5%;padding: 1.3em 0.8em;font-size: 95%;}
	
	/*==========　お問合せ   toiawase/  ==========*/
	#chuui-waku{width:96%;}
	#toiawase-form {width: 100%;}
}





@media screen and (max-width: 850px) {
	/*============　システム開発  system/　=============*/
	.system-dl-waku {display: block;border-spacing: 0;}
	dl.system-dl {display: block;width:94%;margin: 0 auto 25px auto;min-height: 150px;}
	.system-dl-waku-tr {display: block;}
	.system-dl-waku.ri05 {margin:0 auto;display: block;border-spacing: 0;}
	dl.system-dl dd {padding: 0 0 0 120px;}
	.section.system2-bg {background-size: cover;}

	/*============　ホームページ制作  website/　=============*/
	ul.system-ul li {width: 44%;margin: 0 1.5%;}
	dl.website-teian-waku dd {width: 40%;}
	dl.website-teian-waku dt .title {font-size: 143%;}
	dl.website-teian-waku dt {padding: 0;}
	dl.website-teian-waku dt .title {border-left: 4px solid #003e75;height: 60px;line-height: 60px;}
	dl.website-teian-waku dt .com {margin-top: 15px;}
	
	/*============　Webセキュリティ診断サービス  web-security/　=============*/
	ul.security-flow-ul li::after {right: -20%;}
	ul.security-flow-ul li.dan2::after {right: -12%;}
}






@media screen and (max-width: 760px) {
	/*============　事業内容  business/　=============*/
	.business-box dl dt {margin: 0 auto;}
	.business-box dl dt.right {float: none;}
	.business-box dl dd.right {position: unset;float: none;}
	.business-box dl dd.left	{position: unset;float: none;}
	.business-box dl dd {width: 100%;padding: 35px 30px 25px 35px;}
	.business-box dl dd .midashi {height: 50px;font-size: 143%;letter-spacing: 0.2em;padding-left: 25px;}
	
	/*============　ホームページ制作実績一覧  works/　=============*/
	ul.works-wake-ul li {width: 100%;display: block;margin: 0 0 20px 0 !important;}


	/*============　ホームページ制作  website/　=============*/
	dl.website-teian-waku dt {float: none;width: 85%;margin: 0 auto 0 auto;}
	dl.website-teian-waku dd {float: none;width: 85%;margin: 20px auto 0 auto;}
	
	/*============　Webセキュリティ診断サービス  web-security/　=============*/
	body.naka#websecurity dl.website-teian-waku dt {width: 100%;}
	body.naka#websecurity dl.website-teian-waku dd {width: 80%;}
	body.naka#websecurity dl.website-teian-waku dt ul {margin-top: 20px;}
	.websecurity2 {float: none;width: 40%;margin: 30px auto 0 auto;}
	.security-midashi2-box {padding: 0;}
	.section.security-flow {background-size: 70px;}
	ul.security-flow-ul li {min-height: 400px;margin-right: 2.3%;padding: 1em 0.5em;font-size: 90%;}
}





@media screen and (max-width: 640px) {
		/* =============中ページ共通のスタイル================== */
	body.naka #headerimgs {height: 120px;}
	body.naka #headerimgs ul li h1 {font-size: 156%;}
	
	body.naka .section {padding: 30px 0 50px 0;}

	h2 {font-size:156%;margin: 10px 0 20px 0;}
	
	/*============　事業内容  business/　=============*/	
	.business-box dl dd {padding: 30px 20px 20px 25px;}
	.business-box dl dd .midashi {height: 40px;}
	.business-box dl dd .com {margin-top: 10px;}
	
	/*============　ホームページ制作  website/　=============*/
	ul.system-ul {margin: 20px auto 0 auto !important;}
	ul.system-ul li {width:94%;margin:0 auto 25px auto !important;}
	ul.system-ul li div {border-radius: 50px;padding: 20px 20px;}
	ul.system-ul li div .ri-no {position: unset;width:65px;margin: 0 auto 10px auto;}
	ul.system-ul li div .com {position: unset;text-align: left;line-height: 1.4;}
	ul.system-ul li div .com br{display:none;}
	
	/*============　システム開発  system/　=============*/
	dl.system-dl {padding: 20px 15px 15px 20px;}
	dl.system-dl dt {width:65px;padding-top: 3px;}
	dl.system-dl dd {padding: 0 0 0 95px;}

	/*=====　システム開発＞建築業向け 業務管理システム  system-management/　======*/
	ul.system-m-ul2 li {width: 90%;}
	ul.system-m-ul2 li:nth-child(2) {margin-left: 0;}
	.system-m-harf {float: none;width: 100%;margin-right: 0;}
	.system-m-harf ul.system-m-ul2 li {width: 90%;}
	.system-m-ukidashi {margin: 50px 4% 0 4%;}
	.system-m-ukidashi p {font-size: 129%;letter-spacing: 0.3em;}
	.parallax-window {padding: 90px 0;}
	.parallax-inner {width: 96%;padding: 40px 20px 1px 20px;}
	.parallax-inner.kinou {width: 96%;padding: 40px 20px 20px 20px;}
	
	/*============　インターネット広告  web-advertising/　=============*/
	.hp-koukoku-table2-waku {padding: 12px 15px 1px 15px;}
	#hp-koukoku-table2 th {width: 45px;background-size: auto 95px;padding: 20px 8px 15px 0;font-size: 35px;}
	#hp-koukoku-table2 td span {padding: 5px 0 0 0px;}
	
	/*============　ホームページ制作実績一覧  works/　=============*/
	.works-box article {margin: 0 4.5% 20px 0 !important;width: 44% !important;}
	.works-box article dl.hpworks-dl {padding-top: 25px;}
	.ajaxLoad {margin: 20px auto 20px auto;}
	
	/*==========　お問合せ   toiawase/  ==========*/
	h2.toiawase-title {font-size: 150%;}
	#toiawase-form dt.title {width: 100%;float: none;padding: 13px 0 3px 42px;line-height: 1;height: 35px;}
	#toiawase-form dt.title.need 		{background: url(../img/toiawase_hitu.png) no-repeat left 2px top 12px;}
	#toiawase-form dt.title.unneed 	{background: url(../img/toiawase_nin.png) no-repeat left 2px top 12px;}	
	#toiawase-form dl dd {padding:5px 0 15px 5px;}
	.form-submit input {width:60%;}
	/*.form-submit input.reset {width:24%;margin-left: 5%;}	*/	
	/* 内容確認用のスタイル----*/
	#toiawase-form.kakunin dd {padding: 5px 0px 9px 20px;}
	/*完了ページ*/
	.kanryou-waku {padding:0;}
	.kanryou-waku .form-kanryo1 {font-size: 115%;margin-bottom: 20px;}
	.kanryou-waku .form-kanryo2{text-align: left;}
	.kanryou-waku .form-kanryo2 span {display: inline;}
}






@media screen and (max-width:560px) {
	/*============　Webセキュリティ診断サービス  web-security/　=============*/
	h2.security-flow {font-size: 150%;}
	/*縦文字を横文字に*/
	ul.security-flow-ul{margin:10px 0 0 0 !important;}
	ul.security-flow-ul li {min-height: unset;margin-right: 0;padding: 0.5em 1em;font-size: 90%;writing-mode: unset;display: table;width: 100%;font-feature-settings: unset;margin-bottom: 20px !important;}
	ul.security-flow-ul li dl {line-height: 1.2;}
	ul.security-flow-ul li dl dt {padding: 0 0.5em 0 0;}
	ul.security-flow-ul li::after {top: unset;right: 0;content: url(../img/arrow_down_blue9-5.png);width: 9px;left: 0;bottom: -18px;margin: 0 auto;}
	ul.security-flow-ul li.dan2::after {right: 0;}
	.websecurity4 {margin-top: 10px;}
}






@media screen and (max-width: 540px) {
	/* =============中ページ共通のスタイル================== */
	h2 {font-size: 136%;}
	h2 br{display:none;}
	h4 {font-size: 129%;}
	
	.naka-kuwashii {margin-top: 30px;}

	/*============　ホームページ制作  website/　=============*/
	.website-com span{display:inline;}
	h3.website-red {font-size: 122%;}
	h3.website-red br{display:none;}
	dl.website-teian-waku dt {width:96%;}
	dl.website-teian-waku dd {width:96%;}
	
	/*============　Webセキュリティ診断サービス  web-security/　=============*/
	.security-com1 {margin:15px 0 0 0;}
	.security-com2 {margin: 0;}
	.security-box1 {margin: 5px 0 0 0;}
	.websecurity2 {width: 55%;margin: 15px auto 0 auto;}
}





@media screen and (max-width: 460px) {
	/* =============中ページ共通のスタイル================== */
	body.naka #headerimgs ul li h1 {font-size: 136%}
	.naka-kuwashii a {padding: 19px 35px 19px 50px;background: #040429 url(../img/arrow_boldwhite15-17.png) no-repeat 17px center;}
		
	/*============　ホームページ制作  website/　=============*/

	
	/*=====　システム開発＞建築業向け 業務管理システム  system-management/　======*/
	.system-m-ukidashi {margin: 40px 2% 0 2%;}
	.system-m-ukidashi p {letter-spacing: 0.15em;}
	ul.system-m-ul2 li {width: 100%;}
	.system-m-harf ul.system-m-ul2 li {width: 100%;}
	dl.system-m-dl dt span{font-size: 60px;}
	dl.system-m-dl dt {padding-left: 50px;}
	dl.system-m-dl dd {padding-left: 50px;}
	
	/*============　ホームページ制作実績一覧  works/　=============*/
	ul.works-wake-ul li .midashi {width: 94%;min-width: unset;}
	.works-box {width: 100%;}
	.works-box article {margin: 0 auto 20px auto !important;width: 75% !important;display: block !important;}
	.ajaxLoad{width:90%;}
	.ajaxLoad a {margin-right:0;}
	
	/*============　システム開発実績一覧  system-works/　=============*/
	.works-box .noimgs-box article {margin: 0 auto;display: block;}
}





@media screen and (max-width: 400px) {
	/*============　システム開発  system/　=============*/
	dl.system-dl {padding: 13px 15px 13px 15px;border: 4px solid #fff;box-shadow: 0 0 0 1px #ccc, 0 0 0 4px #fff, 0 0 0 5px #ccc;}
	dl.system-dl dt {width: 50px;}
	dl.system-dl dd {padding: 0 0 0 72px;}
	dl.system-dl dd .midashi {font-size: 108%;}
	dl.system-dl dd .com {margin-top:10px;}
	ul.system-ul li div {padding: 13px 20px;border: 4px solid #fff;box-shadow: 0 0 0 1px #ccc, 0 0 0 4px #fff, 0 0 0 5px #ccc;}
	
	/*============　ホームページ制作  website/　=============*/
	ul.system-ul li div .ri-no {width: 50px;}

	/*=====　システム開発＞建築業向け 業務管理システム  system-management/　======*/
	.system-m-ukidashi p {letter-spacing: 0.05em;}
	
	/*============　インターネット広告  web-advertising/　=============*/
	#hp-koukoku-table2 th {width: 35px;background-size: auto 85px;padding: 15px 6px 15px 0;}
	#hp-koukoku-table2 td {padding: 0 0 20px 10px;}
	
	/*============　Webサポート情報  support/　=============*/
	.serverinfo-waku dl dd{width: auto;}

	/*============　Webセキュリティ診断サービス  web-security/　=============*/
	body#websecurity.naka #headerimgs ul li h1 {font-size: 125%;letter-spacing: 0.1em;}
}