@charset "UTF-8";

/* ****************************************************************** 

	--style.css--

	1. Style setting
		1-1. FontColor styles

	2. Layout setting
		2-1. Base styles
		2-2. Header styles
		2-3. Navi styles
		2-4. Main styles
		2-5. Footer styles
		2-6. PC styles
		2-7. Tablet styles
		2-8. Mobile styles

****************************************************************** */

/*==================================================================
	1. Style setting
===================================================================*/

/* ------------------------------------------------------------------
	1-1. FontColor styles
-------------------------------------------------------------------*/

a {
	color:#0093d8;
	text-decoration:none;
}

a:hover {
	color:#0093d8;
	text-decoration:underline;
}



/*==================================================================
	2. Layout setting
===================================================================*/

/* ------------------------------------------------------------------
	2-1. Base styles
-------------------------------------------------------------------*/

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

html {
	height:100%;
}

body {
	background:url(/img/common/bg_main.gif) center top;
	height:100%;
	font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}


/* ------------------------------------------------------------------
	2-2. Header styles
-------------------------------------------------------------------*/

#telBox .seoTxt {
	color:#878787;
	font-size:10px;
	padding-top:5px;
}


/* ------------------------------------------------------------------
	2-3. Navi styles
-------------------------------------------------------------------*/

#navi {
	background:url(/img/common/bg_gnav.gif) center bottom repeat-x;
	background-color:#f5f5f5;
	font-size:12px;
	line-height:20px;
	padding-bottom:2px;
	position:relative;
}

#worksArea {
	position:absolute;
	top:10px;
	text-align:right;
	right:23px;
}

#navi ul {
	padding:10px 10px 10px 28px;
}

#navi ul li {
	cursor:pointer;
	float:left;
	margin-right:22px;
}

#navi ul li img {
	padding-right:12px;
}

#navi ul li a {
	color:#232323;
}

.hiddenBox {
	background-color:#e2e2e2;
	display:none;
	padding:10px 10px 10px 28px;
}

.hiddenBox dt {
	display:none;
}

.hiddenBox dd {
	background:url(/img/common/ico_arrow_b.gif) left top no-repeat;
	float:left;
	padding-left:9px;
	margin-right:15px;
}

.hiddenBox dd a {
	color:#232323;
	text-decoration:underline;
}


/* ------------------------------------------------------------------
	2-4. Main styles
-------------------------------------------------------------------*/

#content {
	margin:0 auto;
	padding:33px 5px 39px 20px;
	width:auto;
}

#content ul li {
	background:url(/img/common/bg_shadow.gif) center bottom repeat-x;
	background-color:#fff;
	color:#676767;
	float:left;
	margin:0 15px 14px 0;
	padding-bottom:4px;
	width:228px;
}

#content ul li section {
	padding:15px 8px 19px 8px;
}

#content ul li h2 {
	background:url(/img/common/bg_dottedline.gif) left bottom repeat-x;
	padding-bottom:11px;
	margin-bottom:11px;
}

#content ul li h2 a {
	color:#0093d8;
	font-weight:bold;
}

#content ul li section table {
	width:100%;
}

#content ul li section p {
	font-size:75%;
	padding:2px 5px 3px 5px;
}

#content ul li section table {
	width:100%;
}

#content ul li section table th {
	font-size:11px;
	padding:2px 0 3px 5px;
	text-align:right;
	width:62px;
	vertical-align:top;
}

#content ul li section table td {
	font-size:11px;
	padding:2px 5px 3px 5px;
	vertical-align:top;
	width:140px;
}

#content .thumnailBox {
	position:relative;
	height:129px;
	overflow:hidden;
	width:228px;
}

#content .thumnailBox p {
	position:absolute;
	right:0;
	width:74px;
	z-index:9998;
}

#content .thumnailBox img {
	width:100%;
}

#content .thumnailBox p.abBig {
	top:0;
}

#content .thumnailBox p.abInterview {
	bottom:0;
}

#content .numberTxt {
	font-size:12px;
	float:right;
	text-align:right;
	width:50%;
	padding-bottom:15px;
}

#content .numberTxt span {
	color:#d90000;
	font-weight:bold;
}

#content h1.searchHeader {
	float:left;
	text-align:left;
	width:50%;
	font-size:14px;
	padding-bottom:10px;
}

#content h1.searchHeader span {
	font-weight:bold;
}


/* ------------------------------------------------------------------
	2-5 Footer styles
-------------------------------------------------------------------*/

footer {
	background:url(/img/common/bg_footer.gif) center top repeat-x;
	padding:25px 10px;
}

footer p {
	float:left;
	width:auto;
}

footer p#copyrightArea {
	float:right;
}


/* ------------------------------------------------------------------
	2-6 PC styles
-------------------------------------------------------------------*/

@media screen and (min-width: 960px), print {
body {
	position:relative;
	padding:127px 0 100px 0;
}
header {
	position:fixed;
	top:0;
	width:100%;
	z-index:9999;
}
#navi {
	position:fixed;
	top:87px;
	width:100%;
	z-index:9999;
}
footer {
	position:fixed;
	bottom:0;
	width:100%;
	z-index:9999;
}
header {
	border-top:4px solid #0093d8;
	background-color:#fff;
	padding:21px 10px 19px 10px;
}

.logoFix {
	float:left;
	width:346px;
}

#rightArea {
	float:right;
	width:592px;
}

#telBox {
	float:left;
	text-align:right;
	width:338px;
}

#contactBtn {
	float:right;
	padding:3px 0 4px 0;
	width:235px;
}
#contactBtn img:hover {
	opacity: 0.7;
}
#contactBtn02 img:hover {
	opacity: 0.7;
}
.spDisplay {
	display:none;
}
}


/* ------------------------------------------------------------------
	2-7 Tablet styles
-------------------------------------------------------------------*/

@media screen and (min-width: 700px) and (max-width: 959px) {
body {
	position:relative;
	padding:147px 0 100px 0;
}
header {
	position:fixed;
	top:0;
	width:100%;
	z-index:9999;
}
#navi {
	position:fixed;
	top:109px;
	width:100%;
	z-index:9999;
}
footer {
	position:fixed;
	bottom:0;
	width:100%;
	z-index:9999;
}
header {
	border-top:4px solid #0093d8;
	background-color:#fff;
	padding:11px 10px 19px 10px;
}

.logoFix {
	float:left;
	padding-top:15px;
	width:346px;
}
#rightArea {
	float:right;
	width:338px;
}

#telBox {
	text-align:right;
	width:338px;
}

#contactBtn {
	text-align:right;
	padding:5px 0 4px 0;
	width:338px;
}
.spDisplay {
	display:none;
}
}


/* ------------------------------------------------------------------
	2-7 Mobile styles
-------------------------------------------------------------------*/

@media screen and (max-width: 699px) {
body {
	position:relative;
	padding-top:35%;
}
header {
	position:fixed;
	top:0;
	width:100%;
	z-index:9999;
	border-top:4px solid #0093d8;
	background-color:#fff;
	height:45px;
	text-align:center;
	padding:10px;
}
header .logoFix {
	float:left;
	width:60%;
}
#telBox {
	padding:5px 0;
}

#worksArea {
	position:absolute;
	top:10px;
	text-align:right;
	right:10px;
}
#navi {
	position:fixed;
	top:45px;
	width:100%;
	z-index:9999;
}
#navi ul {
	padding:10px;
	width:75%;
}

#navi ul li {
	margin-right:5%;
	width:45%;
}
.hiddenBox {
	padding:8px 12px;
}
.pcDisplay {
	display:none;
}
#rightSp {
	float:right;
	width:36%;
}
.callBtn {
	float:left;
	width:26%;
}
.contactBtn {
	float:right;
	width:68%;
}
#content {
	padding:10px;
}
#content ul li {
	width:100%;
}
#content .thumnailBox {
	height:180px;
	overflow:hidden;
	width:100%;
}
#content .thumnailBox img {
	width:100%;
}
footer {
	padding:10px;
	text-align:center;
}

footer p {
	float:none;
	width:auto;
}

footer p#copyrightArea {
	float:none;
	padding-top:5px;
}
}