@charset "utf-8";

/* -----------------------------------------
 * 1. インナーページ共通
 * 2. WEBサイト構築
 * 3. ネットワーク構築
 * 4. 弥生サービス
 * 5. 実績紹介
 * 8. サイトマップ


 * ?. @media
 * ----------------------------------------*/

/* -----------------------------------------
 * 1. インナーページ共通
 * ----------------------------------------*/
 /* midashi / title */

blockquote{
	margin: 0;
	padding: 1em;
	background: #fafafa;
	border-radius: 5px;
	border:1px solid #dddddd;
}

blockquote h3{
	font-weight: bold;
	font-size: 1.2em;
}

/* 1字下げる */
.cap{
	padding-left:1em;
	text-indent:-1em;
	}

/* topにもどる */
#main .back a {
  background: url(img/icon_pc.png) no-repeat -74px -68px;
  padding: 0 0 0 10px;
  display: inline-block;
}

/* お問い合わせはこちら */
#main.corp_inf .contactbanner{
	margin:1em auto;
	border-radius: 5px;
	border:2px solid #efefef;
	background: #E7878B;
 	background: -moz-linear-gradient(top, #fcfcfc, #f0f0f0 100%);
	background: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), color-stop(1.0, #f0f0f0));
	background: linear-gradient(to bottom, #fcfcfc, #f0f0f0);
	overflow:hidden;
}


#main.corp_inf .contactbanner p{
	margin:5px;
}


#main.corp_inf a.contact:hover{ text-decoration:none; }
.contactimage{
	border-radius: 0 5px 5px 0;
	border-top:2px solid #f9f9f9;
	border-right:2px solid #f9f9f9;
	border-bottom:2px solid #f9f9f9;
	float:right;
	width:35%;
	height:35%;
	margin-left:10px;
}
#main .contactbanner h2{
	margin: 0.8em 0 0.3em ;
	padding: 0.4em 0.5em 0.3em;
	position: inherit;
	background:#2b80d5;
	color:#ffffff;
	font-size: 1.4em !important;
	font-weight:bold;
}

#main.corp_inf .contacttel{
	margin-left:0.6em !important;
	color:#2b80d5;
	font-size: 1.5em !important;
}
#main.corp_inf p.contacttime{margin-left:0.8em !important;}
#main.corp_inf p.contactform{
	margin-left:0.8em;
	border-radius:10px;
	border:2px solid #e5e5e5;
	background:#ff9600;
 	background: -moz-linear-gradient(top, #f9f9f9, #f1f1f1 100%);
	background: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), color-stop(1.0, #f1f1f1));
	background: linear-gradient(to bottom, #f9f9f9, #f1f1f1);
	overflow: hidden;
}

#main.corp_inf p.contactform a{ padding:1em; display:block; }

#main.corp_inf p.contactform:hover{
	background:#ff9600;
 	background: -moz-linear-gradient(top, #f9f9f9, #f2f9ff 100%);
	background: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), color-stop(1.0, #f2f9ff));
	background: linear-gradient(to bottom, #f9f9f9, #f2f9ff);
}

#main.corp_inf p.contactform:hover a:hover{}

@media screen and (max-width:450px){
 	.contactimage{ border:none; float:none; margin:1em auto 0; text-align:center; display:block; width:200px; height:200px; border-radius:50%; }
 	#main.corp_inf p.contactform{ margin:0; padding:0.4em 0; width:100%; text-align:center; }
}

/* -----------------------------------------
 * 2. WEBサイト構築
 * ----------------------------------------*/

#main.topics .info ul {
	margin: 0 0 30px;
	_width: 100%;/* forIE */
	_overflow: hidden;/* forIE */
}
#main .info ul li {
	height: 270px;
	margin: 0 10px 10px 0;
	border: 1px solid #E5E5E5;
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFEFEFEF', endColorstr='#FFFFFFFF');
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#FFEFEFEF, endcolorstr=#FFFFFFFF))";
	background: linear-gradient(to bottom, #EFEFEF, #FFF);
 	background: -moz-linear-gradient(top, #EFEFEF, #FFF 30%, #FFF 100%);
	background: -webkit-gradient(linear, left top, left bottom, from(#EFEFEF), color-stop(0.3, #FFF), color-stop(1.0, #FFF));
    float: left;
}

#main .info ul li a {
	display: block;
	padding: 15px 10px 15px 15px;
	color: #333;
	text-decoration: none;
}
#main .info ul li a div.cf_icon {
	float: left;
	margin: 0 10px 0 0;
}
#main .info ul li a dl dt {
	font-size: 1.2em;
	font-weight: bold;
}
#main .info ul li a dl dd {
	font-weight: bold;
}
#main .info ul li a dl dd p {
	margin: 5px 0 8px;
}

#main .info ul li dl dd p.link {
	font-weight: bold;
	text-align: right;
}

#main .info ul li a:hover .link {
	text-decoration: underline;
}

#main .info ul li dl dd .link span {
	background: url(../img/icon_pc.png) no-repeat -74px -65px;
	background-size: 79px auto;
	padding: 0 0 0 10px;
}


/* -----------------------------------------
 * 2. WEBサイト構築 - hosting
 * ----------------------------------------*/

div.hostinglist{
	margin-right:0.5em;
	padding:0.5em;
	border-radius:5px;
	border:2px solid #ffdd9a;
	width:340px;
	float:left;
	background:#ffffe8;
}

@media screen and (max-width:757px){
 	div.hostinglist{ margin:0 auto 1em; width: 98%; float:none;}
}

div.hostinglist h3{
	padding:0.3em 0.2em;
	background:#ff9600;
 	background: -moz-linear-gradient(top, #ffa800, #ff9600 100%);
	background: -webkit-gradient(linear, left top, left bottom, from(#ffa800), color-stop(1.0, #ff9600));
	background: linear-gradient(to bottom, #ffa800, #ff9600);
	border-radius:5px;
	color:#fff;
	font-weight:bold;
	font-size:1.2em;
}

div.hostinglist:nth-child(2n){
	margin-right:0;
	border:2px solid #e9e9e9;
	background:#fafafa;
}

div.hostinglist:nth-child(2n) h3{
	padding:0.3em 0.2em;
	background:#222;
 	background: -moz-linear-gradient(top, #bbbbbb, #ababab 100%);
	background: -webkit-gradient(linear, left top, left bottom, from(#bbbbbb), color-stop(1.0, #ababab));
	background: linear-gradient(to bottom, #bbbbbb, #ababab);
	border-radius:5px;
	color:#fff;
	font-weight:bold;
	font-size:1.2em;
}

table.plan{
	width:100%;
	max-width:100%;
	border-collapse:collapse;
}
table.plan th,table.plan td{
	padding:0.5em;
	text-align:left;
	border:1px solid #dddddd;
}
table.plan th{
	background:#fafafa;
	width:140px;
}

* -----------------------------------------
 * 2. WEBサイト構築 - SEO
 * ----------------------------------------*/

ul.featurelist:after{ content:""; clear:both;overflow: hidden;}

.featurelist li{
	margin:0.2em;
	padding-top:35px;
	float:left;
	width: 170px;
	height: 141px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	border: 2px solid #4c85be;
	text-shadow: 1px 1px 1px #345a81;
	background: #6ba0d5;
	color:#ffffff;
	text-align:center;
	font-size:1.2em;
	font-weight:bold;
}
.featurelist li i{ display:block; font-size:3em; }

.checklist{ margin: 0 0 15px 0; padding:0.5em 1em 1em; background:url(../img/note.jpg) repeat 0 0; }
.checklist h3{
	font-weight: bold;
	font-size: 1.4em;
	margin: 25px 20px 10px 0;
	position: relative;
	padding: 0 0 0 15px;
	text-align:center;
}
.checklist ul{ padding:0.5em 1em 1em; }
.checklist li{ padding:0.3em; border-bottom:1px solid #bbb; font-size:1.3em; }
.checklist .fa-check-square-o{ color:#cd1422; }


/* -----------------------------------------
 * 3. システム開発
 * ----------------------------------------*/

 .arrow1 li{ margin: 3px 3px 3px 0; padding-left: 14px; background: url(../img/arrow1.png) no-repeat 0 5px; font-size: 1.1em;}

/* -----------------------------------------
 * 4. 弥生サービス
 * ----------------------------------------*/

 #page-header{
	margin: 0 auto 1.5em;
	padding: 1.5em 0;
	background: #eef8fe;
	border-bottom: 1px solid #e4f5fe;
}
#page-header .head-title{
		margin: 0 auto 0;
		padding-left: 10px;
		border-left: 5px solid #0084df;
		width:965px;
		position:relative;
		text-align:left;
		font-size: 2em;
		font-weight: bold;
}
#page-header .head-title small{
	display: block;
	font-size: 0.8em;
}

 .yayoi{
 	margin: 1em auto;
 }

 .yayoi #main{float:none; width: 100%;}
 .yayoi ol.banner:after{
  content: "";
  display: block;
  clear: both;
 }

 .yayoi h2{
 }
 .item-menu{padding: 0.8em 0;}
 .item-menu li{ margin: 3px 3px 3px 0; padding-left: 12px; background: url(../img/arrow.png) no-repeat 0 5px; display: inline; font-size: 1.1em;}
 .item-menu h2{margin: 0; font-size: 1.15em; font-weight: bold;}
 .item-menu a:link{ text-decoration: underline; }
 .item-menu a:hover{ text-decoration: none; }
.yayoi ul.item-list
.yayoi ul li{margin:5px; background:#fafafa !important; border-bottom: 1px dotted #dddddd !important;}


.yayoi .works{ margin-right: 0; }
.yayoi .works h3{margin-bottom:1em; padding: 0.7em ; font-weight: bold; color: #fff; font-size: 1.3em;}

.kaikei h3{ background: #2ca6dc; }
.kakutei h3{ background: #3fc0f0; }
.kyuyo h3{ background: #59bb6c;}
.hanbai h3{ background: #ed889d;}
.mitsumori h3{ background: #f27588;}
.kokyaku h3{ background: #eb8f1a;}
.workseminar h3{ background: #a0755a; }
.support h3{ background: #4f9867; }

ul.item-list{overflow:hidden;}
ul.item-list li{width: 32%; float: left; text-align:center;}
ul.item-list li img{margin: 0 auto; text-align: center;}
ul.item-list li dl{margin: 0.5em;}
ul.item-list li dl dt{text-align: center;}
ul.item-list li dl dd{text-align:left;}
.seminar-list{
	float: left;
	width: 33.333%;
}
table.seminar-table{
	border: 1px solid #fff;
	border-collapse: collapse;
	width: 100%;
}
table.seminar-table thead td{ padding:8px; background: #ddd; border-bottom: none; }
table.seminar-table thead td h4{font-size: 130%; font-weight: bold;}
table.seminar-table th,table.seminar-table td{ padding:8px; background: #fff; border-bottom: 1px solid #ddd; }

@media screen and (max-width:950px){
	#page-header .head-title{width: 100%;}
}

@media screen and (min-width:700px){
 	.yayoi #main .yayoicontent{width: 700px; float:left; margin-right: 22px;}
}
@media screen and (max-width:450px){
	#page-header{max-width:100%;}
	#page-header .head-title{max-width:100%;}
	#page-header .head-title small{display: inherit;}
	div.item-list div{width: 100%; float: none;}
	ul.item-list li{width: 100%; float: none; text-align:center;}
}

/* -----------------------------------------
 * 5. 実績紹介
 * ----------------------------------------*/
.works{margin:1.5em 0 1.5em 0; padding:2em; border:3px solid #efefef; overflow:hidden; position:relative;}
.w-image{float:left; margin-right:1em;}
.w-description dt{margin-bottom:0.5em;font-weight:bold; font-size:120%; overflow:hidden;}
.w-description dt small{margin-top:0.1em; float:right;}
ul.w-content{list-style-type:none; overflow:hidden;}
ul.w-content li{ margin:0.2em 0.2em 0.2em 0; padding:0.3em; overflow:hidden; float:left; border-radius:3px; background:#16a085; color:#ffffff;}
ul.w-content li.w-web{background:#e73c78;}
ul.w-content li.w-net{background:#e67e22;}
#main.corp_inf .w-description p{margin:1em auto;}


dl.category dt{ padding: 8px; border-left: 3px solid #48b5b2; background: #eff9f5;}
dl.category dd{ padding: 1px 8px; background: #fff;}

/* -----------------------------------------
 * 会社概要
 * ----------------------------------------*/
#main.corp_inf {
  font-size: 1.3em;
  line-height: 1.5;
}

#main.corp_inf p{
  margin: 25px 0 10px 0 ;
}

@media screen and (max-width:770px){
	#main dl.table {
		max-width:100%;
	}
	#main dl.table dt {
		width:100%;
		max-width:100%;
		background:#efefef;
	}
	#main dl.table dd {
		width:94%;
		max-width:100%;
		background:#fff;
	}
}

#main .back {
	margin: 30px 0;
	line-height: 1!Important;
	vertical-align: top;
}
#main .back a {
	background: url(../img/icon_pc.png) no-repeat -74px -68px;
	padding: 0 0 0 10px;
	*line-height: 1.5;
	display: inline-block;
}


/* 共有フォルダサービス */
#kaiin{
	padding:8px 25px;
	background:#e1e7eb;
	border-radius:5px;
	border:1px solid #9ea7ab;
	font-size:1.8em;
	color:#1280af;
	font-weight:bold;
	margin:0 auto;
}

#kaiin:hover{
	background:#bfdcf1;
	cursor: hand;
	text-decoration:none;
}
#kaiin:active{
	background:#94cdf9;
	text-decoration:none;
}


@media screen and (min-width:700px){
.features{
	display:flex;
	justify-content:space-between;
	font-size:1.2em;
}

.features > div{
	padding:15px;
	border:4px solid #a6d0e0;
	background:#edf7fb;
	width:44%;
	border-radius:5px;
}
}

@media screen and (max-width:699px){
.features > div{
	padding:15px;
	border:4px solid #a6d0e0;
	background:#edf7fb;
	border-radius:5px;
	margin-bottom:20px;
}
}

.features h4{
	font-size:1.2em;
	font-weight:bold;
	text-align:center;
	margin:10px 0;
}


/* -----------------------------------------
 * IT導入補助
 * ----------------------------------------*/
.it_hojo {
  font-size: 1.2em;
  line-height: 1.7;
}

table.it{
	width:100%;
	max-width:100%;
	border-collapse:collapse;
	font-size:1.2em;
}
table.it th,table.it td{
	padding:0.5em;
	text-align:left;
	border:1px solid #dddddd;
}
table.it th{
	background:#fafafa;
}

table.plan2{
	width:100%;
	max-width:100%;
	border-collapse:collapse;
}
table.plan2 th{
	padding:0.5em;
	text-align:center;
	border:1px solid #dddddd;
}
table.plan2 th{
	background:#fafafa;
	width:140px;
}

table.plan2 td{
	padding:0.5em;
	text-align:left;
	border:1px solid #dddddd;
}

table.plan2 td.yen{
	text-align:right;
}


a.button {
  font-size:1.5em;
  background-color: #f2552c;
  color: #fff;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  outline: none;
  padding:15px 60px;
}
.button::before,
.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button,
.button::before,
.button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.button:hover {
  background-color: #f8a18a;
}

ul.itlist1{
	margin-left:20px;
	}

ul.itlist1 li{
	position:relative;
	font-size:1.3em;
	margin-bottom:15px;
	}

ul.itlist1 li::after {
  display: block;
  content: '';
  position: absolute;
  top: .5em;
  left: -1em;
  width: 10px;
  height: 10px;
  background-color: #2B80D5;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

ul.itlist1 li ul li{
	padding-left:15px;
	font-size:0.9em;
	margin-bottom:0px;
	}

ul.itlist1 li ul li::after{
  display:none;
  }

ul.itlist1 li ul li::before{
  display: block;
  content: '－';
  position: absolute;
  left: -0.5em;
  width: 10px;
  height: 10px;
  }

ul.itlist1 li ul li ul li::before{
  display: block;
  content: '・';
  position: absolute;
  left: -0.5em;
  width: 5px;
  height: 5px;
  }

ul.itlist2{
	margin-left:30px;
	}

ul.itlist2 li{
	list-style:disc;
	}


/* -----------------------------------------
 * サイトマップ
 * ----------------------------------------*/
 ul.sitemap{}
 ul.sitemap li{ margin-left:1em; }


/* -----------------------------------------
 * ?. @media
 * ----------------------------------------*/

@media screen and (max-width:1000px){
	#main .main_ttl {
		background: #FAFAFA;
		filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFFFF', endColorstr='#FFE7E7E7');
		-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#FFFFFFFF, endcolorstr=#FFE7E7E7))";
	 	background: -moz-linear-gradient(top, #FFF, #E7E7E7 100%);
		background: -webkit-gradient(linear, left top, left bottom, from(#FFF), color-stop(1.0, #E7E7E7));
		background: linear-gradient(to bottom, #FFF, #E7E7E7);
		border: 1px solid #DFDFDF;
		padding: 12px 10px 10px 28px;
		margin: 0 0 15px 0;
		font-size: 1.5em;
		position: relative;
	}

	#main .main_ttl .bar {
		display: block;
		width: 3px;
		height: 40px;
		background: #E7878B;
		filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#60B251');
		-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#FFFFFF, endcolorstr=#60B251))";
	 	background: -moz-linear-gradient(top, #FFF, #60B251 100%);
		background: -webkit-gradient(linear, left top, left bottom, from(#FFF), color-stop(1.0, #60B251));
		background: linear-gradient(to bottom, #FFF, #60B251);
		position: absolute;
		left: 15px;
		_left: -10px;
		top: 0;
	}

	#main.topics .info ul li,
	#main.topics .info ul li a dl{
		width: 100%;
		min-width:100%;
	}

	.works{margin:0 0 2em; overflow:hidden;}
}

@media screen and (min-width:1001px){
	#main .main_ttl {
		background: #FAFAFA;
		filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFFFF', endColorstr='#FFE7E7E7');
		-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#FFFFFFFF, endcolorstr=#FFE7E7E7))";
	 	background: -moz-linear-gradient(top, #FFF, #E7E7E7 100%);
		background: -webkit-gradient(linear, left top, left bottom, from(#FFF), color-stop(1.0, #E7E7E7));
		background: linear-gradient(to bottom, #FFF, #E7E7E7);
		border: 1px solid #DFDFDF;
		padding: 12px 10px 10px 28px;
		margin: 0 0 15px 0;
		font-size: 1.5em;
		position: relative;
	}

	#main .main_ttl .bar {
		display: block;
		width: 3px;
		height: 40px;
		background: #E7878B;
		filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#60B251');
		-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#FFFFFF, endcolorstr=#60B251))";
	 	background: -moz-linear-gradient(top, #FFF, #60B251 100%);
		background: -webkit-gradient(linear, left top, left bottom, from(#FFF), color-stop(1.0, #60B251));
		background: linear-gradient(to bottom, #FFF, #60B251);
		position: absolute;
		left: 15px;
		_left: -10px;
		top: 0;
	}

	#main.topics .info ul li {
		float: left;
	}
	#main.topics .info ul li a dl{
		width: 328px;
		*width: 195px;/* forIE */
		_width: auto;/* forIE */
	}
}

@media screen and (max-width:450px){

	.w-image{ float:none; margin:1em auto; text-align:center;}
	.w-description h4{margin-bottom:0.5em;font-weight:bold; font-size:120%;}
	ul.w-content{list-style-type:none; overflow:hidden;}
	ul.w-content li{ margin:0.2em 0.2em 0.2em 0; padding:0.3em; overflow:hidden; float:left; border-radius:3px; background:#16a085; color:#ffffff;}
	ul.w-content li.w-web{background:#e73c78;}
	ul.w-content li.w-net{background:#e67e22;}
	#main.corp_inf .w-description p{margin:1em auto;}
}