@charset 'utf-8';
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font:12px sans-serif;*font-size:small;*font:x-small; vertical-align: baseline; }
*{ margin: 0; padding: 0; }
:focus { outline: 0; }
ol, ul { list-style: none; }
li img, dt img, dd img { vertical-align: bottom; }
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
.clearfix:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }
.clearfix { min-height: 1px; }
.clearboth { clear: both; height: 1px; }
* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}
body {
	background: #fff;
	-webkit-text-size-adjust: 100%;
	font-family: 'Noto Sans',YuGothic,'Hiragino Kaku Gothic Pro',Arial, sans-serif;
	background: url(../images_sp/bg.png) top center repeat-y #ececec;
	background-size: 100% auto;
}
a#top { position: absolute; top:0; }

/* ---------------------------------- header & nav -------------------------------- */

header { position: relative; margin: 0; padding: 0; width: 100%; }
header .sony a {
	float: left;
	background: url(../images_sp/logo_sony.png) top left no-repeat; width: 100px;
	height: 0;
	padding: 45px 0 0;
	overflow: hidden;
	background-size: 100% auto;
}
header .headphones a {
	float: right;
	background: url(../images_sp/logo_headphonespark.png) top left no-repeat; width: 190px;
	height: 0;
	padding: 45px 0 0;
	overflow: hidden;
	background-size: 100% auto;
}

#menu { width: 100%;
	background: #000;
}
#menu .menuOpen {
	background-image: url(../images_sp/btn_menu.png);
	background-position: top left;
	background-repeat: no-repeat; width: 40px;
	height: 0px;
	padding: 45px 0 0;
	overflow: hidden;
	background-size: 100% auto;
	display: block;
}

#menu ul#menuInternal {
	position: absolute; width: 100%;
	display: none;
}
#menu ul#menuInternal li {
	list-style-type: none; width: 100%;
}
#menu ul#menuInternal li a { display: block; }

.fixed {
	position: fixed;
	top: 0;
	left: 0;
}

/* -------------------------------- product link -------------------------------- */

#productLink { width: 100%; z-index: 999; }
#productLink ul li {
	float: left; width: 50%;
	margin: 30px 0 0;
}
#productLink ul li a { display: block; }

/* ----------------------------------- footer ----------------------------------- */

#hires {
	position: fixed;
	bottom: -1px;
	left: 0; width: 100%;
	background: #000;
	text-align: center;
	box-shadow: 0 -1px 1px rgba(0,0,0,.4);
}

footer {
	box-shadow: 0 -1px 1px rgba(0,0,0,.4);
	padding: 0 0 45px; width: 100%;
	background: #000;
}
footer .copy {
	max-width: 182px;
	margin: 0 0 10px 2%;
}
footer ul { width: 100%;
	margin: 0 0 10px;
	padding: 10px 0 0;
}
footer ul li {
	float: left;
	min-width: 30%;
	max-width: 50%;
}

/* ----------------------------------- common ----------------------------------- */

section { width: 96%;
	margin: 0 2%;
	padding: 50px 0 0;
}
section a { display: block; }

#title h1 {
	width: 96.87%;
	margin: 0 auto 17px;
}
#title h1.story {
	width: 96.87%;
	margin: 0 auto 17px;
	padding: 0 0 13%;
}
#title p {
	margin: 0 0 40px;
}
section h2, section h3 { 
	width: 100%;
	margin: 0 auto 20px;
}
section .sep {
	margin: 30px 0 0;
}
section .btn {
	margin: 0 0 15px;
}

#history .desc {
	margin: 20px 0 15px;
}

#banner { width: 98%;
	margin: 33px auto 37px;
	text-align: center;
}
#banner.withclose {
	margin: 33px auto 0;
}

section p.image {
	padding: 15px 2% 0;
/*	margin: 15px 0 0; */
}
section p.image.main {
	margin: 0 auto;
}

section.close { width: 10%;
	margin: 20px auto;
}

/* ----------------------------------- inside story ----------------------------------- */

section.theme {
	margin: 0 2%;
	padding: 43px 0 0;
	border: solid 2px #b2b4bf;
}
section.theme .date { width: 22%;
	margin: -25% auto 5px;
}
section.theme .sub {
	text-align: center;
	font-size: small;
	margin: 0 0 10px;
}

section.theme p.text {
	padding: 15px 2% 0;
	font-size: small;
	line-height: 2.0em;
}
section.theme p.caption {
	padding: 0 2%;
	font-size: x-small;
	line-height: 2.0em;
}

section.theme p.btnMore {
	padding: 0 4%;
	background-image: url(../images_sp/story_z7/btn_more.png);
	background-position: top left;
	background-repeat: no-repeat;
	background-size: 100% auto;
	display: block;
	margin: 0 auto;
}
section.theme p.btnMore.active {
	padding: 0 4%;
	background-image: url(../images_sp/story_z7/btn_close.png);
	background-position: top left;
	background-repeat: no-repeat;
	background-size: 100% auto;
	display: block;
	margin: 0 auto;
}

section.theme .more {
	display: none;
}

.story { width: 100%;
	background: url(../images_sp/story_z7/bg_line.png) top center repeat-y;
	background-size: 100% auto;
}
.story div.date {
	padding: 3px 0 10px;
}
.story div.date.lst {
	padding: 3px 0 15%;
}
.story p.date { width: 22%;
	margin: 5px auto;
}
.story p.sub {
	text-align: center;
	background: url(../images_sp/bg.png) top center repeat-y #ececec;
	background-size: 100% auto;
	padding: 2px 0;
}

section.product, section.profile {
	margin: 0 2%;
	padding: 17px 0 0;
	border: 2px solid #b2b4bf;
}
section.product .sub {
	width: 96%;
	margin: 0 auto 4px;
	text-align: center;
}
section.product .btn {
	width: 96.25%;
	margin: 0 auto;
}
section.product .linkbtn {
	width: 96.25%;
	margin: 0 auto 3px;
}

section.profile p.number {
	margin: 0 0 4px;
	text-align: center;
	font-size: x-small;
}
section.profile dl { width: 93.75%;
	margin: 0 auto 9px;
}

/* ------------------------------------ review ----------------------------------- */

section.review {
	width: 91%;
	margin: 0 2%;
	padding: 17px 2% 0;
	border: solid 2px #b2b4bf;
}
section.review p.sub {
	text-align: center;
	margin: 0 auto;
}

div.review {
	background: url(../images_sp/review_z5/bg_line.png) top center repeat-y;
	text-align: center;
}

div.review.space {
	height: 17px;
}

div.pagetop {
	width: 15%;
	margin: 20px auto;
}

div.pagetop p {
	text-align: center;
}

section a { display: block; }

section #title a {
	width: 95%;
	margin: 0 auto;
}

section.profile dl.review {
	padding: 0 5px;
}
section.profile dl.review dt {
	margin: 10px 0 7px;
}
section.profile dl.review dd {
	text-align: left !important;
	line-height: 2.0em;
}

/* ------------------------------------ history ----------------------------------- */

section.history {
	width: 96%;
	margin: 0 2%;
	padding: 40px 0 0;
}

section.history p.copy, section.history p.sub {
	margin: 0 0 10px;
}
section.history p.text {
	font-size: small;
	line-height: 1.8em;
}


/* ----------------------------------- fitting ----------------------------------- */

.fPC { display: none !important; }
.flr { float: left; }
.tac { text-align: center; }
.caption { font-size: x-small; color: #666666; }
.mb15 { margin: 0 0 15px; }