@import url("/css/gnav.css");
@import url("/css/gfooter.css");

#gnv1004 .gnav-in {
width:985px!important;
}

/* ALL
---------------------------------------------------------------------------------------------- */
body {
margin:0px;
padding:0px;
color:#444;
font-family:'メイリオ',"ＭＳ Ｐゴシック","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","Lucida Grande",sans-serif;
background:url(//image.itmedia.co.jp/makoto/images/body_bg2.gif) repeat-y center top #EEE;
text-align:center;
}
a:link {
color:#037;
text-decoration:none;
}
a:visited {
color:#800080;
text-decoration:none;
}
a:hover {
color:#C00;
text-decoration:underline;
}
hr {
visibility:hidden;
clear:both;
}
a img {
border:0px solid #FFF;
}
input.txt {
background:url(//image.itmedia.co.jp/makoto/images/txtbox_bg.gif) repeat-x 0px -15px #FFF;
border:1px solid #AA9;
color:#333;
font-size:12px;
}
.l50,.r50 {width:49%;}
.l50 {float:left;}
.r50 {float:right;}

.outBody {
width:100%;
}
.inBody {
width:990px;
background:#FFF;
text-align:left;
margin:0px auto;
}

/* HEADER
---------------------------------------------------------------------------------------------- */
.header {}
.header .tagline ul {
float:right;
margin:0px;
padding-right:5px;
}
.header .logoarea {
margin:0px;
color:#FFF;
font-size:12px;
}
.header .logoarea strong {
float:left;
display:block;
width:365px;
height:76px;
margin:0px;
padding:0px;
background:url(//image.itmedia.co.jp/enterprise/images/mailmag_logo_ep.gif) no-repeat 15px 23px;
font-size:12px;
}
.header .logoarea strong a {
display:block;
width:200px;
height:53px;
margin:23px 0px 0px 15px;
text-indent:-9999px;
}

/* NAVIGATION
---------------------------------------------------------------------------------------------- */
.richNav {
height:35px;
background:url(//image.itmedia.co.jp/images/richNavBg.gif) repeat-x 0px 0px;
position:relative;
font-size:12px;
z-index:500;
margin-bottom:10px;
}
.richNav .sel {
margin:0px;
padding:0px;
list-style:none;
white-space:nowrap;
}
.richNav li {
float:left;
background:url(//image.itmedia.co.jp/images/richNav1.gif) no-repeat 0px 0px;
}
.richNav .sel a {
display:block;
height:35px;
float:left;
background: url(//image.itmedia.co.jp/images/richNavBg.gif) no-repeat 0px 0px;
padding:0px 0px 0px 15px;
text-decoration:none;
line-height:33px;
white-space:nowrap;
color:#FFF;
}
.richNav .sel a strong {
display:block;
padding:0px 30px 0px 15px;
background:url(//image.itmedia.co.jp/images/richNavBg.gif) no-repeat right top;
}
.richNav .sel a:hover, 
.richNav .sel li:hover a {
background: url(//image.itmedia.co.jp/images/richNav1.gif) no-repeat 0px 0px;
padding:0px 0px 0px 15px;
cursor:pointer;
color:#FD0;
}

.richNav .sel a:hover strong, 
.richNav .sel li:hover a strong {
display:block;
padding:0px 30px 0px 15px;
background:url(//image.itmedia.co.jp/images/richNav1.gif) no-repeat right top;
cursor:pointer;
}
/* IE6 only */
.richNav table {
border-collapse:collapse;
margin:-1px;
font-size:12px;
width:0;
height:0;
}

/* ACTIVE
---------------------------------------------------------------------------------------------- */
.top .richNav .sel .top a {
background: url(//image.itmedia.co.jp/images/richNav1.gif) no-repeat 0px 0px;
padding:0px 0px 0px 15px;
cursor:pointer;
color:#FD0;
}
.top .richNav .sel .top a strong {
display:block;
padding:0px 30px 0px 15px;
background:url(//image.itmedia.co.jp/images/richNav1.gif) no-repeat right top;
cursor:pointer;
}

.edit .richNav .sel .edit a {
background: url(//image.itmedia.co.jp/images/richNav1.gif) no-repeat 0px 0px;
padding:0px 0px 0px 15px;
cursor:pointer;
color:#FD0;
}
.edit .richNav .sel .edit a strong {
display:block;
padding:0px 30px 0px 15px;
background:url(//image.itmedia.co.jp/images/richNav1.gif) no-repeat right top;
cursor:pointer;
}

.check .richNav .sel .check a {
background: url(//image.itmedia.co.jp/images/richNav1.gif) no-repeat 0px 0px;
padding:0px 0px 0px 15px;
cursor:pointer;
color:#FD0;
}
.check .richNav .sel .check a strong {
display:block;
padding:0px 30px 0px 15px;
background:url(//image.itmedia.co.jp/images/richNav1.gif) no-repeat right top;
cursor:pointer;
}

.faq .richNav .sel .faq a {
background: url(//image.itmedia.co.jp/images/richNav1.gif) no-repeat 0px 0px;
padding:0px 0px 0px 15px;
cursor:pointer;
color:#FD0;
}
.faq .richNav .sel .faq a strong {
display:block;
padding:0px 30px 0px 15px;
background:url(//image.itmedia.co.jp/images/richNav1.gif) no-repeat right top;
cursor:pointer;
}

.backnumber .richNav .sel .backnumber a {
background: url(//image.itmedia.co.jp/images/richNav1.gif) no-repeat 0px 0px;
padding:0px 0px 0px 15px;
cursor:pointer;
color:#FD0;
}
.backnumber .richNav .sel .backnumber a strong {
display:block;
padding:0px 30px 0px 15px;
background:url(//image.itmedia.co.jp/images/richNav1.gif) no-repeat right top;
cursor:pointer;
}

/* MAIN CONTENTS
---------------------------------------------------------------------------------------------- */
.maincol {
clear:both;
padding:0px 10px;
}
.l700 {
clear:both;
float:left;
width:660px;
position:relative;
}
.subcol {
width:300px;
float:right;
}


.l700 h2 {
background:url(//image.itmedia.co.jp/makoto/images/r500_h2bg_02.gif) repeat-x 0px bottom;
padding:5px 5px 6px 13px;
margin:0px;
line-height:120%;
color:#012;
font-size:100%;
}
.index h3 {
font-size:84%;
border:1px solid #CCC;
background:#EEE;
color:#332;
margin-bottom:10px;
padding:2px 5px;
}
.index h4 {
margin-bottom:10px;
color:#333;
font-size:84%;
}

.index p {
margin-bottom:10px;
color:#333;
font-size:84%;
}
.index ul {
clear:both;
margin:0px 0px 10px;
}
.index ul li {
background:url(//image.itmedia.co.jp/makoto/images/ulli_08.gif) no-repeat 0px 3px;
margin:0px 0px 5px;
padding:3px 0px 3px 20px;
color:#333;
border-bottom:1px dotted #EEE;
font-size:84%;
}
.index ol li {
color:#333;
font-size:84%;
}
.index .tbl {
margin:0px auto 10px;
padding:3px;
border:1px solid #CCC;
background:#EEE;
}
.index table {
border-collapse:collapse;
background:#FFF;
}
.index table caption {
font-size:10px;
text-align:right;
caption-side:bottom;
padding-top:4px;
}
.index table caption span {
color:#C00;
}
.index table th,
.index table td {
padding:4px 5px;
border:1px solid #CCC;
font-size:84%;
font-weight:normal;
}
.index table th {
background:#EEE;
}
.index table thead th {
background:#666;
font-weight:bold;
color:#FFF;
}
.index table tfoot td {
padding:10px 5px;
}
.archive {
list-style:none;
margin:0px;
padding:0px;
}
.archive li {
clear:both;
line-height:130%;
border-bottom:1px dotted #EEE;
margin-bottom:5px;
padding:0px 0px 3px 21px;
background:url(//image.itmedia.co.jp/makoto/images/ulli_08.gif) no-repeat 0px 0px;
height:1%;
}

/* HEADLINE
---------------------------------------------------------------------------------------------- */
.headline {
position:relative;
margin-bottom:10px;
}
.headline h1 {
background:url(//image.itmedia.co.jp/makoto/images/r500_h2bg_02.gif) repeat-x 0px bottom;
padding:5px 5px 5px 13px;
margin:0px;
line-height:120%;
color:#012;
font-size:100%;
}

/* APPLY
---------------------------------------------------------------------------------------------- */
.apply {margin:20px 0px;}
.apply h3 {margin:0px 0px 10px;text-align:center;}
.apply p {margin:0px 0px 10px;font-size:12px;}
.apply .btnNewEntry {
display:block;
width:180px;
height:42px;
margin:0px auto;
background:url(//image.itmedia.co.jp/images/btn_newentry.gif) repeat-x 0px top;
text-indent:-9999px;
}
.apply a:hover.btnNewEntry {
background:url(//image.itmedia.co.jp/images/btn_newentry.gif) repeat-x 0px bottom;
}
.apply .btnApply {
display:block;
width:180px;
height:42px;
margin:0px auto;
background:url(//image.itmedia.co.jp/images/btn_apply.gif) repeat-x 0px top;
text-indent:-9999px;
}
.apply a:hover.btnApply {
background:url(//image.itmedia.co.jp/images/btn_apply.gif) repeat-x 0px bottom;
}

/* ABOUT ITM ID
---------------------------------------------------------------------------------------------- */
#aboutITMID {
margin:0px 0px 30px 0px;
border:1px solid #CCC;
}
#aboutITMID .inner {
display:block;
height:1%;
padding:0px 10px;
border:3px solid #EEE;
}
#aboutITMID h4 {
margin:5px 0px;
}
#aboutITMID p {
margin:5px 0px;
}

/* FOOTER
---------------------------------------------------------------------------------------------- */
.footer {
display:table;
width:100%;
margin:10px 0px;
padding:10px 0px;
font-size:12px;
text-align:left;
background-color:#FFF;
clear:both;
}

.itmFooter {padding:10px 10px 0px 10px;line-height:150%;}
.itmFooter table {width:100%;}
.itmFooter p {font-size:12px;font-family:'MS UI Gothic',"ＭＳ Ｐゴシック","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","Lucida Grande",sans-serif!important;}
.itmFooter p.itmIncLogo {margin:0px 0px 10px;}
.itmFooter p.itmIncLogo img {margin:0px 0px 3px;}
.itmFooter p.itmIncLinkLst {margin:0px;color:#999;}
.itmFooter td.itmIncMedia {text-align:right;vertical-align:bottom;}

.h90px {
height:90px;
}

/* SPV
---------------------------------------------------------------------------------------------- */
@media (max-width:767px){
	body {
	background:none #FFF;
	font-size:14px;
	line-height:18px;
	}
	.inBody {
	width:100%;
	}
	.richNav form {
	display:none;
	}
	.l700 {
	width:100%;
	float:none;
	}
	.subcol {
	float:none;
	margin:0 auto 20px;
	}
	#globalFooterMediaListIn {
	width:100%;
	}
	#globalFooterCorpIn {
	width:auto;
	}
	.l700 h2 {
	background:none;
	}
	.apply.r50,
	.apply.l50 {
	margin:20px auto;
	float:none;
	width:300px;
	}
	.headline h1 {
	background:none;
	text-indent:0;
	font-size:18px;
	height:auto;
	padding:5px;
	}
	.l700 h2 {
	padding:5px;
	}
}
@media (max-width:420px) {
	body {
	min-width:300px;
	}
	#globalFooterMediaList .mediaList {
	width:155px;
	}
	#globalFooter {
	line-height:24px;
	}
	.richNav .sel a,
	.richNav .sel a:hover, 
	.richNav .sel li:hover a,
	.top .richNav .sel .top a,
	.faq .richNav .sel .faq a,
	.backnumber .richNav .sel .backnumber a {
	padding:0 0 0 10px;
	}
	.richNav .sel a strong,
	.richNav .sel a:hover strong, 
	.richNav .sel li:hover a strong,
	.top .richNav .sel .top a strong,
	.faq .richNav .sel .faq a strong,
	.backnumber .richNav .sel .backnumber a strong {
	padding:0px 20px 0px 10px;
	}

	.header .logoarea strong {
	background-size:300px 45px;
	background-position:15px 15px;
	width:300px;
	height:62px;
	}
	.header .logoarea strong a {
	margin:11px 0 0 15px;
	width:155px;
	height:34px;
	}
	.h90px {
	height:62px;
	}
}