@charset "Shift_JIS";

/**
 * common.css
 * update : 2014.05.21
 */

/*--------------------------------------------------------------------------------
	reset
--------------------------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,p{margin:0;padding:0;}
img{border:0;vertical-align:top;}li{list-style:none;}

/*--------------------------------------------------------------------------------
	body
--------------------------------------------------------------------------------*/
body {
	font-family: "\30D2\30E9\30AE\30CE\89D2\30B4\20\50\72\6F\20\57\33","Hiragino Kaku Gothic Pro",
	"\30E1\30A4\30EA\30AA",Meiryo,
	"\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF",
	'Droid Sans',sans-serif;
	
	/*font-family: "\30E1\30A4\30EA\30AA",Meiryo,"\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF",'Droid Sans',sans-serif;*/
}

/*--------------------------------------------------------------------------------
	.mod-contentContainer
--------------------------------------------------------------------------------*/
.mod-contentContainer {
	padding-bottom: 60px;
}

/*--------------------------------------------------------------------------------
	classes
--------------------------------------------------------------------------------*/
/* .hover
--------------------------------------------------------------------------------*/
a img.hover {
	transition: opacity 0.2s ease-out;
	-ms-transition: opacity 0.2s ease-out;
	-moz-transition: opacity 0.2s ease-out;
	-webkit-transition: opacity 0.2s ease-out;
}
a:hover img.hover {
	opacity: 0.7;
}
html.no-opacity a:hover img.hover {
	filter: alpha(opacity=70);
}

@media (max-width:640px){
	a img.hover {
		transition: none;
		-ms-transition: none;
		-moz-transition: none;
		-webkit-transition: none;
	}
	a:hover img.hover {
		opacity: 1.0;
	}
}

/* br
--------------------------------------------------------------------------------*/
br.b40 { display: none; }
br.b36 { display: none; }
br.b32 { display: none; }

@media (max-width:400px){
	br.b40 { display: block; }
}
@media (max-width:360px){
	br.b36 { display: block; }
}
@media (max-width:320px){
	br.b32 { display: block; }
}

.clearfix {
	*zoom: 1;
}
.clearfix:after {
	clear: both;
	display: block;
	content: "";
}
.no-space {
	letter-spacing: 0 !important;
}

/*--------------------------------------------------------------------------------
	.head
--------------------------------------------------------------------------------*/
.head {
	position: relative;
	margin-top: 20px;
	*zoom: 1;
}
.head:after {
	clear: both;
	display: block;
	content: "";
}
.head h2 {
	display: inline-block;
	vertical-align: bottom;
	*display: inline;
	*zoom: 1;
}
.head h2 img {
	width: 325px;
	height: auto;
}
.head img.nav {
	margin: 0 0 2px 34px;
	width: 93px;
	height: 12px;
	vertical-align: bottom;
}

@media (max-width:640px){
	.head {
		margin: 20px 5px 0;
	}
	.head h2 {
		display: block;
	}
	.head h2 img {
		width: 100%;
		max-width: 270px;
	}
	.head img.nav {
		margin: 15px 0 5px 0;
	}
}

/*--------------------------------------------------------------------------------
	.title
--------------------------------------------------------------------------------*/
.title h3 {
	margin-top: 10px;
}

@media (max-width:640px){
	.title h3 img {
		width: 100%;
	}
}

/*--------------------------------------------------------------------------------
	.intro
--------------------------------------------------------------------------------*/
.intro {
	margin-top: 85px;
}
.intro .item {
	*zoom: 1;
}
.intro .item:after {
	clear: both;
	display: block;
	content: "";
}
.intro strong {
	display: block;
	margin-bottom: 15px;
	font-size: 218.8%;
	line-height: 1.2;
	color: #555;
}
.intro p {
	font-size: 118.8%;
	line-height: 1.9;
	color: #555;
}
.intro .img-box {
	float: right;
	text-align: center;
}

@media (max-width:640px){
	.intro {
		margin-top: 40px;
	}
	.intro strong {
		margin-bottom: 20px;
		font-size: 162.5%;
	}
	.intro p {
		margin-top: 15px;
		font-size: 100%;
		line-height: 1.8;
	}
	.intro .img-box {
		float: none;
		margin: 0 !important;
		width: auto !important;
	}
}

/*--------------------------------------------------------------------------------
	.contents
--------------------------------------------------------------------------------*/
.contents {
	margin-top: 80px;
	color: #555;
	*zoom: 1;
}
.contents:after {
	clear: both;
	display: block;
	content: "";
}
.contents h4 {
	margin-bottom: 15px;
	padding-top: 2px;
	font-size: 162.5%;
	line-height: 38px;
	color: #fff;
	letter-spacing: 0.07em;
	text-align: center;
}
.contents p {
	font-size: 118.8%;
	line-height: 1.7;
	color: #555;
	letter-spacing: 0.07em;
}
.contents .cnt-box {
	margin-top: 15px;
	*zoom: 1;
}
.contents .cnt-box:after {
	clear: both;
	display: block;
	content: "";
}
.contents .img-box {
	float: left;
	width: 460px;
}
.contents .img-box.flat {
	float: none;
	width: auto;
}
.contents .des-box {
	float: right;
	width: 460px;
}
.contents .des-box.flat {
	float: none;
	margin-top: 40px;
	width: auto;
}
.contents .des-box strong {
	display: block;
	font-size: 143.8%;
	font-weight: 700;
	line-height: 44px;
	text-align: center;
	border: 3px solid #000;
}
.contents .des-box.flat strong {
	line-height: 35px;
}
.contents .des-box .inner {
	padding: 20px 15px 20px 20px;
	border: 3px solid #000;
	border-top: none;
	*zoom: 1;
}
.contents .des-box .inner:after {
	clear: both;
	display: block;
	content: "";
}
.contents .des-box .row,
.contents .des-box .col {
	*zoom: 1;
}
.contents .des-box .row:after,
.contents .des-box .row:after {
	clear: both;
	display: block;
	content: "";
}
.contents .des-box em {
	display: block;
	margin: 7px 0 6px 0;
	text-align: left;
}
.contents .des-box em img {
	width: auto;
	height: 27px;
}
.contents .des-box p {
	font-size: 93.8%;
	line-height: 1.5;
	text-align: left;
}

@media (max-width:640px){
	.contents {
		margin-top: 40px;
	}
	.contents h4 {
		padding: 10px;
		font-size: 131.3%;
		line-height: 1.2;
		letter-spacing: 0.00em;
	}
	.contents p {
		font-size: 100%;
		line-height: 1.6;
		letter-spacing: 0.00em;
	}
	.contents .img-box {
		float: none;
		width: auto;
		text-align: center;
	}
	.contents .img-box img {
		width: 100%;
		height: auto;
		max-width: 460px;
	}
	.contents .des-box {
		float: none;
		margin-top: 15px;
		width: auto;
	}
	.contents .des-box.flat {
		margin-top: 15px;
	}
	.contents .des-box strong,
	.contents .des-box.flat strong {
		display: block;
		padding: 7px 5px;
		font-size: 118.8%;
		line-height: 1.2;
		border: 2px solid #000;
	}
	.contents .des-box .inner {
		padding: 20px;
		border: 2px solid #000;
		border-top: none;
	}
}

/* .row
--------------------------------------------------------------------------------*/
.contents .des-box .row img.sample {
	float: left;
	margin-right: 9px;
	width: 190px;
	height: auto;
}
.contents .des-box .row em img {
	margin-bottom: 10px;
	width: 220px;
	height: auto;
}
.contents .des-box .row.arrow {
	height: 33px;
}

@media (max-width:640px){
	.contents .des-box .row img.sample {
		float: none;
		margin-right: 0;
		width: 100%;
	}
	.contents .des-box .row em {
		display: block;
		margin-top: 10px;
	}
	.contents .des-box .row.arrow {
		height: 40px;
		background-position: center center !important;
	}
}

/* .col
--------------------------------------------------------------------------------*/
.contents .des-box .col {
	float: left;
	width: 195px;
	text-align: center;
}
.contents .des-box .col img.sample {
	width: 118px;
	height: auto;
}
.contents .des-box .col.arrow {
	width: 24px;
	height: 178px;
}

@media (max-width:640px){
	.contents .des-box .col {
		float: none;
		width: auto;
	}
	.contents .des-box .col img.sample {
		float: none;
		margin-right: 0;
		width: 50%;
	}
	.contents .des-box .col.arrow {
		width: auto;
		height: 40px;
	}
}

/* .single
--------------------------------------------------------------------------------*/
.contents .des-box .single {
	text-align: center;
}
.contents .des-box .single img.sample {
	width: 250px;
	height: auto;
}


/*--------------------------------------------------------------------------------
	.column
--------------------------------------------------------------------------------*/
.column {
	margin-top: 80px;
	color: #555;
}
.column .inner {
	padding: 40px;
	*zoom: 1;
}
.column .inner:after {
	clear: both;
	display: block;
	content: "";
}
.column .inner h4 {
	margin-bottom: 30px;
	font-size: 200%;
	line-height: 1.2;
}
.column .inner p {
	font-size: 106.3%;
	line-height: 1.7;
}

@media (max-width:640px){
	.column {
		margin-top: 40px;
	}
	.column .inner {
		padding: 20px 20px 30px;
		text-align: center;
	}
	.column .inner h4 {
		margin-bottom: 15px;
		font-size: 143.8%;
		line-height: 1.4;
		text-align: left;
	}
	.column .inner p {
		margin-top: 15px;
		font-size: 93.8%;
		line-height: 1.7;
		text-align: left;
	}
}
@media (max-width:320px){
	.column .inner h4 {
		font-size: 131.3%;
	}
}

/*--------------------------------------------------------------------------------
	.products
--------------------------------------------------------------------------------*/
.products {
	margin-top: 80px;
	padding: 30px;
	color: #555;
	*zoom: 1;
}
.products:after {
	clear: both;
	display: block;
	content: "";
}
.products .item {
	*zoom: 1;
}
.products .item:after {
	clear: both;
	display: block;
	content: "";
}
.products .item .img-box {
	float: right;
}
.products .item em {
	display: block;
	font-size: 118.8%;
	font-style: normal;
	line-height: 1.4;
}
.products .item p.note {
	margin-top: 5px;
	font-size: 87.5%;
}
.products .item span {
	display: block;
	margin-top: 10px;
	font-size: 100%;
	line-height: 1.4;
}
.products .item h4 {
	font-size: 200%;
	line-height: 1.0;
}
.products .item .btn {
	margin-top: 35px;
	width: 235px;
	transition: opacity 0.2s ease-out;
	-ms-transition: opacity 0.2s ease-out;
	-moz-transition: opacity 0.2s ease-out;
	-webkit-transition: opacity 0.2s ease-out;
	box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.3);
	-o-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.3);
	-ms-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.3);
}
.products .item .btn:hover {
	opacity: 0.7;
}
html.no-opacity .products .item .btn:hover {
	filter: alpha(opacity=70);
}
.products .item .btn a {
	display: block;
	padding-top: 2px;
	font-size: 125%;
	line-height: 34px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	background: url("../img/pdt_btn_arrow.png") no-repeat 27px center;
}

@media (max-width:640px){
	.products {
		margin-top: 40px;
		padding: 25px;
	}
	.products .item {
		float: none !important;
		margin-top: 25px;
		padding-top: 25px;
		width: auto !important;
		border-top: 1px dotted #ccc;
	}
	.products .item:first-child {
		margin-top: 0;
		padding: 0;
		border-top: none;
	}
	.products .item .img-box {
		float: left;
		margin-right: 30px !important;
		margin-bottom: 20px;
		text-align: center;
	}
	.products .item .img-box img {
		width: 100%;
	}
	.products .item .txt-box {
		margin-bottom: 20px;
		overflow: hidden;
	}
	.products .item .txt-box:after {
		clear: both;
		display: block;
		content: "";
	}
	.products .item em {
		font-size: 100%;
	}
	.products .item em br {
		display: none;
	}
	.products .item p.note {
		font-size: 75%;
	}
	.products .item span {
		margin-top: 15px;
		font-size: 100%;
	}
	.products .item h4 {
		font-size: 181.3%;
		line-height: 1.0;
	}
	.products .item .btn {
		clear: both;
		margin-top: 0 !important;
		top: 20px;
		width: auto;
	}
	.products .item .btn a {
		font-size: 112.5%;
	}
}
@media (max-width:320px){
	.products {
		padding: 20px;
	}
	.products .item:first-child {
		margin-top: 10px;
	}
	.products .item .img-box {
		margin-right: 20px !important;
	}
	.products .item em {
		font-size: 87.5%;
	}
	.products .item span {
		margin-top: 15px;
		font-size: 81.3%;
	}
	.products .item h4 {
		font-size: 143.8%;
		line-height: 1.0;
	}
	.products .item .btn a {
		font-size: 100%;
	}
}

/*--------------------------------------------------------------------------------
	hr
--------------------------------------------------------------------------------*/
hr {
	margin: 200px 0 0 0;
	padding: 0;
	height: 40px;
	border: none;
	background: #ccc;
}
.flash hr {
	background: url("../img/flash_hr.gif") repeat-x 0 0;
}
.movie hr {
	background: url("../img/movie_hr.gif") repeat-x 0 0;
}

@media (max-width:640px){
	hr {
		margin: 80px 0 0 0;
		height: 30px;
	}
}