@charset "utf-8";

/*
 * Theme Name:  JOYSOUND Company Shop
 * Description: Theme for JOYSOUND company shop.
 * Version:     2.2
 * Author:      Munenaga Ohtsuka
 * Author URI:  http://www.it-strategy.jp/
 ----------------------------------------*/


/*-------------------------------------------------------------------
     General setting
 -------------------------------------------------------------------*/

/* Reset   ---------------*/

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form,
fieldset, textarea, p, blockquote, th, td, img, fieldset, abbr, acronym,
address, caption, cite, code, dfn, em, strong, th, var {
	margin: 0;
	padding: 0;
	border: 0;
	font: normal normal normal 100%/normal inherit;
	outline: 0;
	zoom: 1;
}

img { border: none; }

ul,
li { list-style: none; }


/* Base   ---------------*/

body {
	background: #fff;
	color: #333;
	font-size: 12px;
}

a:link { color: #08c; }
a:visited { color: #08c; }
a:hover {
	text-decoration: none;
	color: #d70c18;
}
a:active {
	text-decoration: none;
	color: #d70c18;
}

.left { float: left; }
.right { float: right; }


/* micro Clearfix   ---------------*/

.clear:before,
.clear:after {
	display: table;
	content: "";
}

.clear:after { clear: both; }
 
	/* For IE6/7 */
	.clear { zoom: 1; }


/*-------------------------------------------------------------------
     Header
 -------------------------------------------------------------------*/

header {
	background-color: #d70c18;
	margin-bottom: 25px;
}


/*  Header   ---------------*/

	#header {
		position: relative;
		width: 960px;
		height: 103px;
		margin: 0 auto;
		padding: 15px 0;
	}
		#header p {
			position: absolute;
			right: 0;
			bottom: 25px;
		}


/*   Header Contents   ---------------*/

#headerContentsBackground {
	background: -moz-linear-gradient(#B90B13, #d70c18);
	background: -webkit-gradient(linear, left top, left bottom, from(#B90B13), to(#d70c18));
	background: linear-gradient(#B90B13, #d70c18);
}

	#headerContents {
		width: 960px;
		margin: 0 auto;
		padding: 20px 0;
	}
	
	#headerContents > div:first-of-type { float: left; }

	#headerContents > div:last-of-type { float: right; }
	#headerContents > div:last-of-type p { margin-top: 3px; }
	#headerContents ul { margin-top: 10px; }
	#headerContents li:first-of-type {
		float: left;
		width: 296px;
		height: 70px;
	}

	#headerContents li:last-of-type {
		float: right;
		width: 296px;
		height: 70px;
	}


/*   Global navigation   ---------------*/

.navFixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}

#headerNavBackground {
	z-index: 9999;
	background: url(images/common/bg_globalnavi.png) repeat-x;
}

	header nav {
		width: 960px;
		height: 62px;
		margin: 0 auto;
	}
	
	header nav li {
		display: inline-block;
		height: 62px;
	}
	
	header nav li:nth-of-type(1),
	header nav li:nth-of-type(2),
	header nav li:nth-of-type(3) {
		width: 138px;
		height: 62px;
	}
	
	header nav li:nth-of-type(4),
	header nav li:nth-of-type(6) {
		width: 137px;
		height: 62px;
	}
	
	header nav li:nth-of-type(5),
	header nav li:nth-of-type(7) {
		width: 136px;
		height: 62px;
	}

header nav li a { display: block; }



/*   Breadcrumb   ---------------*/

	header nav:nth-of-type(2) ul {
		padding: 15px 20px 18px;
		background: #d80c18;
		color: #ddd;
	}

		header nav:nth-of-type(2) li { display: inline-block; }
	
		header nav:nth-of-type(2) a { color: #fff; }
		
		header nav:nth-of-type(2) a:hover { color: #ff0; }


/*-------------------------------------------------------------------
     Main
 -------------------------------------------------------------------*/

body.home #main {
	width: 960px;
	margin: 25px auto 50px;
}

body:not(.home) #main {
	width: 960px;
	margin: 0 auto 50px;
}

body.home #main h1 { margin-bottom: 10px; }


/*   Contents   ---------------*/

#contents {
	float: right;
	width: 700px;
	margin-left: 20px;
}

#contents > section,
#contents > div { margin-bottom: 25px; }

#contents > section:last-of-type { margin-bottom: 0; }


/*   ページタイトル   */

#contents > h1 {
	width: 684px;
	_width: 660px;
	height: 28px;
	margin-bottom: 30px;
	padding: 0 20px 0 33px;
	background: url(images/common/ico_pagetitle.png) no-repeat;
	font-weight: bold;
	font-size: 25px;
	line-height: 28px;
}

#contents > section > h1 {
	width: 700px;
	height: 38px;
	margin-bottom: 10px;
	background: url(images/common/bg_title.png) no-repeat;
	color: #eee;
	font-size: 15px;
}

#contents > section > h1 span {
	margin: 0 10px 0 20px;
	color: #eee;
	font-size: 14px;
	font-weight: bold;
	text-shadow: #333 1px 1px 1px;
	letter-spacing: 0.1em;
	line-height: 38px;
}


/*   パンくず   */

#breadcrumb {
	font-size: 11px;
	margin-bottom: 10px;
}

#breadcrumb li { display: inline-block; }

#breadcrumb li a { color: #555; }
	
#breadcrumb li span { margin: 0 4px; }


/*   ソーシャルボタン   */

.socialButton {
	height: 20px;
	margin-bottom: 30px;
	padding-bottom: 15px;
	border-bottom: 1px dotted #999;
}

.socialButton div {
	float: right !important;
	margin-left: 10px;
}

.twitter { width: 96px; }

.facebook { width: 96px; }

/*   フッターリンク   */

.contentsFooterLink {
	width: 700px;
	margin-top: 20px;
	text-align: center;
}

.contentsFooterLink a { display: inline-block; }


/*   Sidebar   ---------------*/

#main > aside {
	float: left;
	width: 240px;
}

#main > aside section:first-of-type { margin: 0 0 40px 20px; }

#main > aside section:first-of-type a {
	padding: 17px 0 ;
	display: block;
	font-size: 13px;
	line-height: 1.2;
	text-align: center;
	color: #fff;
	background: url(images/common/bnr_reserve.png) no-repeat;
	text-decoration: none;
}

#main > aside section:first-of-type a:hover { color: #fffe88; transition: .3s; }

#main > aside section:first-of-type a strong {
	margin-left: -8px;
	font-size: 30px;
}

#main > aside section:first-of-type a strong span {
	font-size: 26px; vertical-align: baseline;
}

#main > aside section:first-of-type a:first-of-type { margin-bottom: 10px; }

#main > aside section:nth-of-type(2) {
	margin-bottom: 50px;
	padding: 10px 20px 0;
	border-top: 1px dotted #555;
}

#main > aside section:nth-of-type(2) h1 {
	margin-bottom: 10px;
	text-align: center;
}

#main > aside section:last-of-type {
	margin-bottom: 50px;
	padding: 7px 20px 0;
	border-top: 1px dotted #555;
	text-align: center;
}

#main > aside section:last-of-type h1 {
	margin-bottom: 9px;
	font-size: 13px;
	text-align: center;
	color: #666;
}

#main > aside section:last-of-type p { margin-bottom: 8px; }


/*-------------------------------------------------------------------
     Footer
 -------------------------------------------------------------------*/

footer { border-top: 1px solid #555; }


/*   Link in page   ---------------*/

	footer > p:first-of-type {
		width: 960px;
		height: 30px;
		margin: 0 auto;
		text-align: right;
		line-height: 30px;
	}


/*   Footer navigation   ---------------*/

	footer > section {
		height: 246px;
		background: url(images/common/bg_footer_upper.png) repeat-x;
	}
		footer > section > div {
			width: 960px;
			margin: 0 auto;
		}
		
	footer div > section {
		float: left;
		width: 180px;
		padding-top: 40px;
	}
		
	footer div > section:last-of-type {
		float: right;
		width: 130px;
		padding-top: 180px;
	}
		
	footer h1 { margin-bottom: 10px; }
				
	footer li { margin-bottom: 10px; }
				
	footer li a:link, footer li a:visited { color: #ddd; }


/*   Copyright   ---------------*/
footer > p:last-of-type {
	height: 72px;
  background: url(images/common/bg_footer_lower.png) repeat-x;
  background-size: auto 105%;
}
footer small {
	display: block;
	position: relative;
	top: 5px;
	width: 960px;
	margin: 0 auto;
	color: #555;
	font-size: 10px;
}

/*-------------------------------------------------------------------
     OHTERS
 -------------------------------------------------------------------*/

/* メガトン非対応の注意書き */
#megaton_annotation { padding: 20px 20px 0; }

#megaton_annotation p {
	margin-bottom: 10px !important;
	font-size: 13px;
}

#megaton_annotation dt {
	clear: left;
	float: left;
	width: 6em;
}

#megaton_annotation dd { margin: 0 0 5px 6em; }


#megaton_unsupported { padding: 20px 20px 0; }

#megaton_unsupported p {
	margin-bottom: 10px !important;
	font-size: 13px;
}

#megaton_unsupported dt {
	clear: left;
	float: left;
	width: 6em;
}

#megaton_unsupported dd { margin: 0 0 5px 6em; }

#megaton_unsupported li {
	display: inline-block;
	padding-right: 10px;
}


/*   実施、未実施   ---------------*/
.campaign_annotation {
	padding: 0 10px 20px;
	font-size: 12px;
}


.campaign_annotation dt {
	clear: left;
	float: left;
	width: 6.5em;
}

.campaign_annotation dd { margin: 0 0 0 6.5em; }

.campaign_annotation li {
	display: inline-block;
	padding-right: 10px;
}