﻿@charset "utf-8";

/**
 * Setup
 */
*,body { font-family: "游ゴシック", "Yu Gothic", YuGothic, "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif; font-size: 16px; background: #E8E8E8;}
h1,h2,h3,h4,h5,h6{ font-weight: normal;}
a { color: #000; text-decoration: none;}
a:hover { text-decoration: underline; opacity: 0.8;}
a:visited {} 
img{ max-width: 100%;}
input[type="text"],input[type="password"],textarea{ border: 1px solid #ccc;}
li{ list-style: none;}
hr{ border: 1px solid #ddd;}
div,p{ word-break: break-all;}
strong{}
em{ font-style: normal;}
table{ border-collapse: collapse;}
th{ vertical-align: top; font-weight: normal; text-align: left;}
td{ vertical-align: top;}
p+p{ margin-top: 1em;}



/*
 * BACKGROUND Rules = #ffffff or #000000
 * TEXT Rules = #fefefe or #010101
*/



/**
 * clearfix
 */
.clearfix:after{ visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}



/**
 * Font color, Text align
 */
.red{ color: #E60012;}
.blue{ color: #33B3FF;}
.green{ color: #89BD00;}
.orange{ color: #ffcc00;}
.pink{ color: #F85291;}
.glay{ color: #999966;}
.bold{ font-weight: bold;}
.small{ font-size:77%;}
.right{ text-align: right;}
.left{ text-align: left;}
.center{ text-align: center;}



/**
 * List Style
 */
.decimal,.circle,.disc,.upper_roman,.lower_roman,.lower-latin{ margin-left: 20px;}
.decimal>li{ list-style-type: decimal;}
.circle>li{ list-style-type: circle;}
.disc>li{ list-style-type: disc;}
.upper_roman>li{ list-style-type: upper-roman;}
.lower_roman>li{ list-style-type: lower-roman;}
.lower-latin>li{ list-style-type: lower-latin;}



/**
 * Basic Table Style
 */
.table{ border-top: 1px solid #ccc; border-left: 1px solid #ccc;}
.table th,.table td{ padding: 10px; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc;}
.table th{ background: #eeeeee;}



/**
 * Font size
 */
.f10 { font-size:65%; }
.f12 { font-size:82%; }
.f14 { font-size:100%; }
.f16 { font-size:115%; }
.f18 { font-size:125%; }
.f20 { font-size:150%; }
.f22 { font-size:165%; }
.f24 { font-size:175%; }
.f25 { font-size:185%; }
.f26 { font-size:195%; }



/**
 * Margin
 */
.mb5{ margin-bottom: 5px;}
.mb10{ margin-bottom: 10px;}
.mb15{ margin-bottom: 15px;}
.mb20{ margin-bottom: 20px;}
.mb25{ margin-bottom: 25px;}
.mb30{ margin-bottom: 30px;}
.mb35{ margin-bottom: 35px;}
.mb40{ margin-bottom: 40px;}



/**
 * Padding
 */
.pd5{ padding: 5px;}
.pd10{ padding: 10px;}
.pd15{ padding: 15px;}
.pd20{ padding: 20px;}
.pd25{ padding: 25px;}
.pd30{ padding: 30px;}
.pd35{ padding: 35px;}
.pd40{ padding: 40px;}



/**
 * Layout
 */
#wrapper{
	background: url("../img/bg_spark.png") top center no-repeat;
}

#contents{
}

.header .logo{
	width: 950px;
	margin: 0 auto;
	padding: 20px 0;
}

.header .logo a{
	width: 242px;
	height: 62px;
	margin: 0 auto;
	display: block;
	background: url("../img/pic_logo.png") left top no-repeat;
	text-indent: -9999px;
}

.gnavi{
	margin-bottom: 30px;
	background: rgba(255,255,255,0.5);
}

.gnavi .links{
	width: 950px;
	margin: 0 auto;
	overflow: hidden;
}

.gnavi .links ul{
	float: left;
	width: 750px;
	overflow: hidden;
}

.gnavi .links li{
	float: left;
	padding: 9px 0 0;
	font-weight: bold;
}

.gnavi .links li+li{
	margin-left: 20px;
}

.gnavi .links .btn{
	float: right;
	width: 200px;
}

.gnavi .links .btn a{
	width: 200px;
	padding: 5px 0;
	display: inline-block;
	background: #E43705;
	text-align: center;
	color: #fefefe;
}

.gnavi .links .btn a:hover{
	text-decoration: none;
}

.gnavi .links .btn span{
	min-height: 23px;
	padding-left: 32px;
	line-height: 23px;
	display: inline-block;
	background: url("../img/ico_feed_navi.png") left 50% no-repeat;
	font-size: 18px;
}

.footer{
	padding: 30px;
	background: #343426;
	text-align: center;
	font-size: 12px;
	color: #ddd;
}

.footer a{
	color: #ddd;
}

.footer .link{
	margin-bottom: 30px;
}

.footer .link ul{
	text-align: center;
}

.footer .link li{
	display: inline-block;
}

.footer .link li+li{
	margin-left: 25px;
}


 /**
 * Common Style
 */
#breadcrumb{
}

#pagetitle{
}

#globalnavi{
}

.pager{
	margin-bottom: 30px;
	padding: 10px 0;
	background: rgba(255,255,255,0.5);
	text-align: center;
}

.btn_ping a{
	width: 600px;
	margin: 0 auto;
	padding: 12px 0;
	display: block;
	background: #E43705;
	text-align: center;
	color: #fefefe;
}

.btn_ping a:hover{
	text-decoration: none;
}

.btn_ping span{
	min-height: 34px;
	padding-left: 42px;
	line-height: 34px;
	display: inline-block;
	background: url("../img/ico_feed.png") left 50% no-repeat;
	font-size: 24px;
}

.btn_link a{
	width: 520px;
	margin: 0 auto;
	padding: 12px 40px;
	display: block;
	background: #333326;
	text-align: center;
	color: #fefefe;
}

.btn_link a:hover{
	text-decoration: none;
}

.btn_link span{
	line-height: 34px;
	display: block;
	background: url("../img/ico_arrow.png") right 50% no-repeat;
	font-size: 24px;
}

.ttl{
	max-width: 950px;
	margin: 0 auto 30px;
	font-size: 40px;
	font-weight: bold;
}

.ttl span{
	display: block;
	font-size: 20px;
}

.ttl_sub{
	margin: 40px 0 15px;
	line-height: 130%;
	font-size: 18px;
	font-weight: bold;
}





.entry_title{
	font-weight: bold;
}

.entry_date{
	font-weight: bold;
	font-size: 12px;
}

.entry_blog{
	margin-left: 10px;
	display: inline-block;
	font-size: 12px;
}

.entry_blog a {
	padding: 3px 8px;
	display: inline-block;
	background: #f9f9f9;
	border-radius: 5px;
}

.entry_text{
	line-height: 130%;
	font-size: 12px;
}




.adv{
	width: 950px;
	margin: 0 auto 50px;
}

.adv ul{
	text-align: center;
}

.adv li{
	display: inline-block;
}

.adv li+li{
	margin-left: 25px;
}

.adv li a{
	display: inline-block;
	font-size: 14px;
}

.adv li a:before{
	margin-right: 3px;
	padding: 0 3px;
	content: "PR";
	background: #000;
	color: #fefefe;
}





.gadv{
	margin: 50px 0;
	text-align: center;
}

/**
 * Development
 */

#top #wrapper_top{
	background: url("../img/bg_mainv.png") top center no-repeat;
}

#top .header_top{
	margin-bottom: 100px;
	padding-top: 20px;
}

#top .header_top .logo{
	width: 950px;
	margin: 0 auto;
}

#top .header_top .logo span{
	width: 242px;
	height: 62px;
	margin-bottom: 45px;
	display: block;
	background: url("../img/pic_logo.png") left top no-repeat;
	text-indent: -9999px;
}

#top .header_top .write,
#top .header_top .blog{
	width: 850px;
	margin: 0 auto;
	min-height: 90px;
	padding-left: 100px;
}

#top .header_top .write em,
#top .header_top .blog em{
	margin-bottom: 10px;
	display: block;
	font-size: 20px;
}
#top .header_top .write strong,
#top .header_top .blog strong{
	font-size: 60px;
}

#top .header_top .write span,
#top .header_top .blog span{
	font-size: 40px;
}

#top .header_top .write{
	margin-bottom: 25px;
	background: url("../img/ico_write.png") left 50% no-repeat;
}

#top .header_top .blog{
	margin-bottom: 55px;
	background: url("../img/ico_blog.png") left 50% no-repeat;
}

#top .header_top .message{
	padding: 20px 0;
	background: rgba(255,255,255,0.5);
	text-align: center;
}

#top .header_top .message p{
	margin-bottom: 20px;
	font-size: 20px;
	font-weight: bold;
}

#top .about{
	margin-bottom: 100px;
	text-align: center;
}

#top .about p{
	margin-bottom: 20px;
	line-height: 180%;
}

#top .merit{
	margin-bottom: 80px;
	background: url("../img/pic_logo_spark.png") center bottom no-repeat;
	text-align: center;
}

#top .merit p{
	line-height: 180%;
}

#top .merit .btn_ping{
	margin-top: 350px;
}

#top .news{
	margin-bottom: 50px;
}

#top .news .ttl{
	text-align: center;
}

#top .news .list{
	padding: 10px 0 20px;
	background: #F1F1F1;
}

#top .news dl{
	width: 950px;
	margin: 0 auto;
}

#top .news dt{
	padding: 15px 0;
	position: absolute;
}

#top .news dd{
	padding: 15px 0 15px 140px;
	border-bottom: 1px dotted #ccc;
}

#top .articles{
	padding-top: 60px;
	background: url("../img/bg_line.png") top left repeat-x;
}





.articles{
	min-height: 500px;
	margin-bottom: 100px;
}

.articles .ttl{
	line-height: 120%;
	text-align: center;
}

.articles .ttl a{
	margin-bottom: 10px;
	padding: 20px 0;
	display: inline-block;
}

.articles .ttl span{
	margin-bottom: 20px;
	font-size: 40px;
}

.articles .ttl p{
	line-height: 140%;
	font-weight: normal;
}

.articles .ttl_pinglist{
	max-width: 950px;
	margin: 0 auto 30px;
	text-align: center;
}

.articles .ttl_pinglist span{
	display: inline-block;
	font-size: 18px;
	font-weight: bold;
}

.articles ul{
	margin-bottom: 60px;
}

.articles li{
	padding: 20px 0;
	display: block;
}

.articles li:nth-child(odd){
	background: #F1F1F1;
}

.articles li p{
	width: 950px;
	margin: 0 auto;
}

.articles li p+p{
	margin-top: 10px;
}





.information{
	width: 890px;
	margin: 0 auto 50px;
	padding: 30px;
	overflow: hidden;
	background: rgba(255,255,255,0.5);
}

.information .main_area{
	float: right;
	width: 710px;
	min-height: 500px;
}

.information .sidebar{
	float: left;
	width: 180px;
	line-height: 250%;
}

.information .sidebar li{
	line-height: 250%;
}





.site_adv .main_area p{
	line-height: 180%;
}





.rss_list p{
	margin-bottom: 30px;
}

.rss_list .list li{
	line-height: 130%;
}

.rss_list .list li+li{
	margin-top: 1em;
}

.rss_list .list li span{
	font-weight: bold;
}





.agreement p{
	margin-bottom: 20px;
	line-height: 130%;
}

.agreement li{
	line-height: 130%;
}




.company table{
	width: 100%;
	margin: 0 0 10px 0;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
}

.company table th,
.company table td{
	padding: 10px 5px;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	vertical-align: middle;
}

.company table th{
	width: 25%;
	background: #eee;
	font-weight: bold;
}





.contact table{
	width: 100%;
	margin: 0 0 20px 0;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
}

.contact table th,
.contact table td{
	padding: 10px 5px;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	vertical-align: middle;
}

.contact table th{
	width: 25%;
	background: #eee;
	font-weight: bold;
}

.contact p{
	margin-bottom: 10px;
	line-height: 180%;
}

.contact input[type="text"]{
	width: 80%;
	padding: 10px;
}

.contact textarea{
	width: 80%;
	height: 150px;
	padding: 10px;
}

.contact select{
	padding: 10px;
}

.contact .submit{
	text-align: center;
}

.contact .submit input{
	padding: 5px 30px;
	font-size: 20px;
}





.site_list .main_area p{
	margin-bottom: 20px;
}

.site_list .main_area ul{
	overflow: hidden;
}

.site_list .main_area li{
	float: left;
	width: 170px;
	margin-right: 10px;
}

.site_list .main_area li:nth-child(4n){
	margin-right: 0 !important;
}

.site_list .main_area li:nth-child(n+5){
	margin-top: 10px;
}




.about p{
	line-height: 180%;
}




.ping_queueing{
	width: 890px;
	margin: 0 auto 50px;
	padding: 30px;
	overflow: hidden;
	background: rgba(255,255,255,0.5);
}

.ping_queueing .ttl{
	text-align: center;
}

.ping_queueing .input_block{
	width: 580px;
	margin: 0 auto 30px;
	text-align: center;
}

.ping_queueing .input_block p{
	margin-bottom: 10px;
	line-height: 180%;
}

.ping_queueing .input_block input{
	width: 560px;
	padding: 10px;
	font-size: 20px;
}

.ping_queueing #ping_send{
	padding: 0 10px;
	font-size: 24px;
}

.ping_queueing .atte_block{
	width: 540px;
	margin: 0 auto 30px;
	padding: 10px;
	line-height: 180%;
	border: 1px solid #ccc;
}

.ping_queueing .atte_block input[type="text"]{
	width: 520px;
	margin: 10px 0;
	padding: 10px;
	font-size: 18px;
}

.ping_queueing .atte_block input[type="button"]:hover{
	cursor: pointer;
}

.ping_queueing a{
	text-decoration: underline;
}

.ping_queueing a:hover{
	text-decoration: none;
}

.ping_queueing .ping_submit{
	text-align: center;
}

.ping_queueing .ping_submit input{
	cursor: pointer;
}

.ping_queueing .none{
	display: none;
}

.ping_queueing .loading{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.7);
	overflow: hidden;
	z-index: 10000;
	color: #fefefe;
}

.ping_queueing .loading span{
	position: absolute;
	top: 50%;
	left: 50%;
	line-height: 150%;
	display: inline-block;
	text-align: center;
}





.photos{
	margin-bottom: 50px;
	text-align: center;
}

.photos span,
.photos a{
	display: inline-block;
}

.photos span{
	width: 18%;
	margin: 10px 5px;
}











