@charset "utf-8";
/*=================================================
 * ブラウザのデフォルトのスタイルをリセットする
 * ================================================= */

html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p,
header, hgroup, section, article, aside, hgroup, footer, figure, figcaption, nav {
 margin: 0;
 padding: 0;
 font-size: 100%;
}

body {
 line-height: 1.0;
 -webkit-text-size-adjust: none;
}

article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary { 
 display:block;
}

img {
 border: 0;
 vertical-align: bottom;
}

ul, ol {
 list-style: none;
}

table {
 border-spacing: 0;
 empty-cells: show;
}




/* ======================================
Intefe001 dafault css
01:BASE
02:BASE TEXT
03:BASE PARTS
04:HEADER
05:SIDE
06:TOP
07:CATEGORY
====================================== */
/* CSS Document */
*{
	color:#333;
	font-family: "ＭＳゴシック", Osaka, "ヒラギノ角ゴ Pro W3";

}


/*ベース*/

/* 01:BASE --------------------------- */

body{
	text-align:center;
	background:#ffffff;
	filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#ffffff',EndColorStr='#00ffff');
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#ffffff',EndColorStr='#00ffff')";
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff),to(#000045),color-stop(0.5, #00ffff),color-stop(0.5, #00ffff));
	background-image: -moz-linear-gradient(top,#ffffff,#00ffff 50%,#000045);
	background: linear-gradient(top,#ffffff,#000045);

}

a{color:#009;text-decoration:none;
}
a:hover{color:#f00;text-decoration:none;
}

#body{
      background:url(image/back_body.gif) repeat-y;
	text-align:left;
	width:800px;
	margin:0px auto;
	border-right:1px #ccc solid;
	border-left:1px #ccc solid;
}

/*レイアウト*/

/*ヘッド*/
.atama{
width:792px;margin-left:4px;
	background:url(./image/kanban_web.gif) 0px 20px; no-repeat; 
height:180px;
border-bottom:8px #3333aa solid;
}


h1{
      border:0;background:#000045;height:20px;
	height:19px;
	line-height:19px;
	font-size:12px;
	text-align:right;
	font-weight:normal;
	padding-right:10px;
	border-bottom:1px solid #999;
}
h1 a{color:#ffffff; font-weight:bold;}


#content h2{
      margin-right:10px;
      margin-bottom:10px;
      height:29px;
      background:url(image/45.gif) repeat-x;
      border-bottom:2px solid #66c;
	font-size:11pt;
	padding-left:1em;
 	color:#000;
 	text-shadow:0.25em 0.25em 2px #666;
}

h3{
	font-size:10pt;
    border-bottom:#ff0000 solid 1px;
	border-left:#ff0000 solid 1em;
	height:19px;
	margin-top:20px ;
	margin-bottom:10px ;
	padding-left:5px;
	padding-bottom:5px;
	color:#000;
	text-shadow:0.25em 0.25em 2px #888;
}
h4{
	font-size:10pt;
    border-bottom:#0000a0 solid 1px;
	border-left:#0000a0 solid 1em;
	height:19px;
	margin-top:20px ;
	margin-bottom:10px ;
	padding-left:5px;
	padding-bottom:5px;
	color:#000;
	text-shadow:0.25em 0.25em 2px #888;
}

#TB{
	color:#616161;
	font-size:13px;
}
#TB h5 {
	font-size:14px;
	border-bottom:#616161 dotted 1px;
	border-left:#616161 solid 1em;
	height:19px;
	margin-bottom:20px ;
	padding-left:5px;
	color:#616161;
}

.TBh5 {
	font-size:14px;
	border-bottom:#616161 dotted 1px;
	border-left:#616161 solid 1em;
	height:19px;
	margin-bottom:20px ;
	padding-left:5px;
	color:#616161;
}



.formbutton{
	display:block;
	background: white;
	color: #333;
	border: 1px solid #868686;
	border-color:#D4D2CF #868686 #868686 #D4D2CF;
}
.searchform .formfield{
	width: 135px;
	margin: 11px 0 0 10px;
	display:inline;
}
.searchform .formbutton{
	width: 50px;
	margin: 10px 0 0 5px;
	display:inline;
	height:21px;
}

#panKuz{
	line-height:1.0;
	font-size:10pt;
	margin:10px auto 10px 230px;
}

/*コンテンツ*/
#content {float:right; text-align:left; font-size:10pt;line-height:1.7em;
width:520px;}

#wrap {margin-top:0px;margin-right:28px;
margin-left:auto;}

.left {text-align:left; font-size:10pt;float:left;width:220px;
}

.left dl dt{
      height:60px;
      margin:0;
}
.left dl dd{
      height:30px;
      margin:0;
font-size:9pt;
}


.left dl dt a{
	display:block;

	padding-left:5px;
	line-height:60px;
	font-weight:bold;
	color:#454545;
}

.left dl dd a{
	display:block;

	line-height:30px;
	font-weight:bold;
	padding-left:15px;
	color:#565656;
font-size:9pt;
}

img {border:none}

/*============================
　アサイドメニュー（イメージスワップ）
==============================*/
.left dl{background:none;border-right:none;}
.left dl dt a{background:url(image/back_b.gif) no-repeat;}
.left dl dt a:hover{background:url(image/backon_b.gif) no-repeat;}
.left dl dd a{background:url(image/back_s.gif) no-repeat;}
.left dl dd a:hover{background:url(image/backon_s.gif) no-repeat;}
.left dl dd.ima a{color:#c00}

#home dl dt.home a,
#html5_css3 dl dt.html5_css3 a,
#semantics dl dt.semantics a,
#menu dl dt.menu a,
#facebook dl dt.facebook a,
#mobile dl dt.mobile a,
#netshop dl dt.netshop a,
#cms dl dt.cms a,
#labo dl dt.labo a,
#option dl dt.option a,
#corp dl dt.corp a,
#support dl dt.support a{background:url(image/backon_b.gif) no-repeat;color:#f00;}

#html5_css3 dl dd.html5 a,
#html5_css3 dl dd.sphone a,
#html5_css3 dl dd.html5_pc a,

#semantics dl dd.semantics a,
#semantics dl dd.iphone_ a,
#semantics dl dd.mobile_intafe a,

#menu dl dd.hp a,
#menu dl dd.system a,
#menu dl dd.rss a,
#security dl dd.security a,

#facebook dl dd.company a,
#facebook dl dd.wall a,
#facebook dl dd.social a,
#facebook dl dd.youtube a,
#facebook dl dd.fan a,
#facebook dl dd.special a,

#mobile dl dd.sumart_ec a,
#mobile dl dd.mobile_web a,
#mobile dl dd.keitai_ec a,
#mobile dl dd.moblog a,

#netshop dl dd.shop a,
#netshop dl dd.mobile a,
#netshop dl dd.download a,
#netshop dl dd.market a,

#cms dl dd.nucleus a,
#cms dl dd.MT a,
#cms dl dd.zencart a,
#labo dl dd.foocus a,
#labo dl dd.croud a,
#labo dl dd.anq a,
#labo dl dd.mark a,
#labo dl dd.pdf a,
#labo dl dd.ranking a,
#labo dl dd.flash a,

#option dl dd.sample a,
#option dl dd.seo a,
#option dl dd.seo_taisaku a,
#option dl dd.rental a,
#corp dl dd.summary a,
#corp dl dd.ceo a,

#support dl dd.flow a,
#support dl dd.nda a,
#support dl dd.contact a{background:url(image/backon_s.gif) no-repeat;}

#aboutus dl dd.summary a,
#web203 dl dd.html5 a,
#web204 dl dd.sphone a,
#web205 dl dd.html5_pc a,

#web206 dl dd.semantics a,
#web208 dl dd.iphone_ a,
#web207 dl dd.mobile_intafe a,

#web1 dl dd.hp a,
#web36 dl dd.system a,
#web195 dl dd.twitter a,
#web190 dl dd.rss a,
#web219 dl dd.security a,
#web220 dl dd.security a,
#web221 dl dd.security a,
#web222 dl dd.security a,
#web223 dl dd.security a,
#web224 dl dd.security a,
#web225 dl dd.security a,
#web226 dl dd.security a,
#web227 dl dd.security a,
#web228 dl dd.security a,
#web229 dl dd.security a,

#web210 dl dd.sumart_ec a,
#web209 dl dd.mobile_web a,
#web211 dl dd.keitai_ec a,
#web118 dl dd.moblog a,

#web24 dl dd.shop a,
#web196 dl dd.mobile a,
#web198 dl dd.download a,
#web197 dl dd.market a,

#web56 dl dd.nucleus a,
#web64 dl dd.MT a,
#web194 dl dd.zencart a,

#web218 dl dd.company a,
#web213 dl dd.wall a,
#web214 dl dd.social a,
#web215 dl dd.youtube a,
#web216 dl dd.fan a,
#web217 dl dd.special a,

#web72 dl dd.foocus a,
#web92 dl dd.croud a,
#web97 dl dd.anq a,
#web104 dl dd.mark a,
#web189 dl dd.pdf a,
#web192 dl dd.ranking a,
#web193 dl dd.flash a,

#web38 dl dd.seo a,
#web199 dl dd.seo_taisaku a,
#web82 dl dd.sample a,
#web101 dl dd.rental a,

#web76 dl dd.summary a,
#web77 dl dd.ceo a,
#web81 dl dd.privacy a,
#web147 dl dd.legal a,

#web142 dl dd.flow a,
#web79 dl dd.contact a{background:url(image/backon_s.gif) no-repeat;color:#f00;}

#boxBot dl{
	width:240px;
	height:110px;
	float:left;
	margin:0 10px 10px 0;
	border-right:2px #dedede solid;
	border-bottom:2px #dedede solid;
	line-height:20px;
}
#boxBot dl dt{border-bottom:1px #ccc solid;}
#boxBot dl dt a{display:block;font-weight:bold;color:#dedede;padding-left:10px;background:#333;}
#boxBot dl dt a:hover{color:#fff;}
#boxBot dl dd{padding:0 5px;margin:5px 0 0 0;font-size:0.9em;line-height:18px;}
#boxBot dl dd span.tuduki{display:block;text-align:right;}

#boxBot dl dt a{background:#009;}
#boxBot dl dt a:hover{color:#fff;}

#boxBot:after{
	content:'';
	display:block;
	clear:both;
}

.news {
	font-size:10pt;
       margin-left:10px;
       margin-right:20px;
       padding-left:0;
       text-decoration:none;
       line-height:1.4;
}

.left_under {
	font-size:10pt;
       margin-left:10px;
       margin-right:20px;
       padding-left:0;
       text-decoration:none;
       line-height:1.4;
}

.news ul{
	margin:0 5px 5px 0px;
}
.news ul li span{
	padding-left:0;
}

.news ul li{
	list-style:none;
}
.news ul li a{
	margin-left:0;
      font-weight:bold;
}
h5.news_left {
	border-bottom:#000080 solid 1px;
	border-left:#000080 solid 1em;
	font-size:10pt;
	line-height:1.4;
	color:#000;
       padding-left:5px;
}
#footer {
font-size:10pt;
font-weight:bold;
clear:both;
line-height:1.6;
background:#000045;
text-align:right; 
color:#ffffff;
width:792px;margin-left:4px;
}
#footer a{ color:#ffffff; font-weight:bold;
}
#footer a:hover{color:#f00;
}

#topc {float:right; text-align:left; font-size:10pt;line-height:1.7em;
width:520px;}

.flow_title{ font-size:11pt; background:url(image/flow.gif) left center no-repeat; line-height:2.8; font-weight:bold; padding-left:14px;
}
.flow_txt{ padding-left:40px;
}
.cartex{　background-color:#c0c0c0; line-height:1.4;
}
.bextitl{ background-color:#808080; line-height:1.6; color:white; font-weight:bold;
}

#tag-cloud{ margin:5px 10px; line-height:1.8;
}
#tag-cloud ul {margin:0;}
#tag-cloud li { 
display:inline;
background:none;
list-style-type:none;
margin:0;
padding:0 5px;
}

.declare{
 margin-bottom: 15px;
 padding: 0 5px;
 height: 18px;
 overflow:hidden;
 font-size: 15px;
 text-align: left;
 color:#000000;
 font-weight:bold;
 text-shadow:3px 3px 2px #555;
}


.declare li {
 height: 18px;
 line-height: 18px;

}


@-webkit-keyframes ticker {
/* 1行目 */
 0% { opacity: 0; -webkit-transform: translateY(0); transform: translateY(0);
}
 10% {
 opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);
}
 20% {
 opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);
}
 32% {
 opacity: 0; -webkit-transform: translateY(0); transform: translateY(0);
}

/* 2行目 */
 33% {
 opacity: 0; -webkit-transform: translateY(-18px); transform: translateY(0);
}
 43% {
 opacity: 1; -webkit-transform: translateY(-18px); transform: translateY(0);
}
 53% {
 opacity: 1; -webkit-transform: translateY(-18px); transform: translateY(0);
}
 65% {
 opacity: 0; -webkit-transform: translateY(-18px); transform: translateY(0);
}

/* 3行目 */
 66% {
 opacity: 0; -webkit-transform: translateY(-36px); transform: translateY(-32px);
}
 76% {
 opacity: 1; -webkit-transform: translateY(-36px); transform: translateY(-32px);
}
 86% {
 opacity: 1;-webkit-transform: translateY(-36px); transform: translateY(-32px);
}
 100% {
 opacity: 0; -webkit-transform: translateY(-36px); transform: translateY(-32px);
}
}

.anim-ticker {
 -webkit-animation: ticker 45s infinite;
}


.kin { background:url(image/kin.png) top left no-repeat; padding-left:20px; font-size:100%; line-height:48px; height:48px; color:#ff0000;
}
.gin { background:url(image/gin.png) top left no-repeat; padding-left:20px; font-size:100%; line-height:48px; height:48px;
}
.dou { background:url(image/dou.png) top left no-repeat; padding-left:20px; font-size:100%; line-height:48px; height:48px;
}

.logo_web{
 width:100px;
 text-align:left;
}
.banner{
 position: relative;
 height: 80px;
 -webkit-perspective: 80px;
}
.banner li{
 margin-left: -50px;
 width: 100px;
 position: absolute;
 left: 50%;
 text-align: center;
 -webkit-transform-style: preserve-3d;
 -webkit-backface-visibility: hidden;
}

.banner a {
 display: block;
 width:100px;
}

@-webkit-keyframes flipFront {
 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg);
}
 45% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg);
}
 55% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg);
}
 100% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg);
}
}

@-webkit-keyframes flipBack {
 0% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg);
}
 45% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg);
}
 55% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg);
}
 100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg);
}
}

.anim-flip-front {
 -webkit-animation: flipFront 10s infinite alternate;
}

.anim-flip-back {
 -webkit-animation: flipBack 10s infinite alternate;
}

.iphone{
	width:290px;
	height:540px;
	background:url(image/sp3.gif) no-repeat;
	text-align:left;
}
.iphone iframe {
	margin-left:23px;
	margin-top:95px;
}

.mobile_intafe{
	width:220px;
	height:330px;
	background:url(image/220.gif) no-repeat;
	text-align:left;
}
.mobile_intafe iframe {
	margin-left:10px;
	margin-top:32px;
}