@charset "Shift_JIS";

/**
 * home.css <www.sony.jp/camera/playmemories/css/>
 * update : 2013.10.24
 * update : 2014.02.04
 */

/*--------------------------------------------------------------------------------
	.intro
--------------------------------------------------------------------------------*/
.intro {
	margin: 44px auto 90px;
	width: 940px;
	text-align: center;
}
.intro h3 {
	margin-top: 15px;
	line-height: 0;
}
.intro .txt {
	margin-top: 32px;
}
.intro .img {
	display: block;
	margin-top: 29px;
}
.intro .btn {
	margin-top: 7px;
}

@media(max-width:640px){
	.intro {
		margin: 30px 20px 40px;
		width: auto;
	}
	.intro em img {
		width: 65%;
		max-width: 300px;
	}
	.intro h3 img {
		width: 100%;
		max-width: 940px;
	}
	.intro .txt {
		margin-top: 25px;
		width: 95%;
		max-width: 655px;
	}
	.intro .img {
		width: 100%;
	}
	.intro .btn img {
		width: 100%;
	}
}
@media(max-width:480px){
	.intro {
		margin: 30px 15px 40px;
	}
	.intro .txt {
		margin-top: 15px;
		width: 100%;
	}
}

/*--------------------------------------------------------------------------------
	.features
--------------------------------------------------------------------------------*/
.features .section {
	position: relative;
	margin: 0 auto;
	width: 940px;
	height: 374px;
	zoom: 1;
}
.features .section:after {
	clear: both;
	display: block;
	content: "";
}
.features .section .inner {
	float: right;
	width: 396px;
}
.features .section h4 {
	margin-bottom: 20px;
}
.features .section h4 img {
	width: 95%;
	max-width: 396px;
}
.features .section p {
	font-size: 93.8%;
	line-height: 1.8;
	color: #555;
}
.features .section p.note {
	margin-top: 7px;
	font-size: 68.8%;
	line-height: 1.4;
}

@media(min-width:1400px){
	.features {
		background-size: cover !important;
	}
}

@media(max-width:640px){
	.features {
		margin-top: 0 !important;
		background-size: 210% !important;
		background-position: left 0 !important;
		border-bottom: 1px solid #e0ebeb;
	}
	.features .section {
		padding-top: 50%;
		width: auto;
		height: auto;
	}
	.features .section .inner {
		float: none;
		margin: 0 !important;
		padding: 20px 20px 40px;
		width: auto;
		background-color: #f8f9f9;
	}
	.features .section p {
		line-height: 1.6;
	}
	.features .section .btn {
		text-align: center;
	}
	.features .section .btn img {
		width: 100%;
		max-width: 397px;
	}
}

/* .calendar
--------------------------------------------------------------------------------*/
.features.calendar {
	background: url("../img/home/feat_calendar_bg.jpg") no-repeat center 0 #f8f9f9;
}
.features.calendar .section .inner {
	margin-top: 60px;
}
.features.calendar  .section .btn.flow {
	margin-top: 80px;
}

@media(max-width:640px){
	.features.calendar  .section .btn.flow {
		margin-top: 20px;
	}
}

/* .cloud
--------------------------------------------------------------------------------*/
.features.cloud {
	margin-top: 6px;
	background: url("../img/home/feat_cloud_bg.jpg") no-repeat center 0 #f3f4f4;
}
.features.cloud .section .img {
	float: left;
	margin: 38px 0 0 -27px;
}
.features.cloud .section .inner {
	margin-top: 45px;
}
.features.cloud .section .btn.flow {
	margin-top: 20px;
}
.features.cloud .section .btn.regist {
	margin-top: 7px;
}

@media(max-width:640px){
	.features.cloud .section .img {
		position: absolute;
		left: 0;
		top: 0;
		float: none;
		margin: 0;
		width: 100%;
		text-align: center;
	}
	.features.cloud .section .img img {
		margin-top: 5%;
		width: 70%;
		max-width: 453px;
	}
}

/*--------------------------------------------------------------------------------
	.function
--------------------------------------------------------------------------------*/
.function {
	margin: 35px auto 0;
	width: 940px;
	zoom: 1;
}
.function:after {
	clear: both;
	display: block;
	content: "";
}
.function .section {
	float: left;
	margin: 65px 0 0 0;
	width: 424px;
	text-align: center;
}
.function .section.rw,
.function .section.view {
	margin-right: 92px;
}
.function .section p {
	margin-top: 20px;
	font-size: 87.5%;
	line-height: 1.7;
	color: #5a5a5a;
}

.function .section.rw .img {
	margin-top: 4px;
	text-align: left;
}
.function .section.rw .img img {
	margin-left: -19px;
	width: 100%;
	max-width: 392px;
}

.function .section.edit .img {
	margin-top: 35px;
}
.function .section.edit .img img {
	width: 100%;
	height: 232px;
	max-width: 325px;
}

.function .section.view .img {
	margin-top: 35px;
}
.function .section.view .img img {
	width: 100%;
	height: 241px;
	max-width: 278px;
}

.function .section.share .img {
	margin-top: 20px;
}
.function .section.share .img img {
	margin-top: 16px;
	margin-left: -3px;
	width: 100%;
	max-width: 427px;
}

.function .btn {
	clear: both;
	padding-top: 40px;
	text-align: center;
}
.function .btn a {
	display: block;
	width: 940px;
	height: 40px;
	background: url("../img/home/func_btn_detail.gif") no-repeat;
}
.function .btn span {
	display: none;
}
.function .btn span br {
	display: none;
}

.function .btn-PMH {
	margin-top: 30px;
	text-align: center;
}

@media(max-width:640px){
	.function {
		margin: 35px 20px 0;
		width: auto;
	}
	.function .section {
		float: none;
		margin: 25px 0 0 0;
		padding-bottom: 25px;
		width: auto;
		border-bottom: 1px dotted #d5e1e1;
	}
	.function .section.rw,
	.function .section.view {
		margin-right: 0;
	}
	.function .section h4 img {
		width: 100%;
		max-width: 424px;
	}
	.function .section p {
		margin-top: 15px;
		line-height: 1.5;
		text-align: left;
	}
	.function .section p br {
		display: none;
	}
	.function .section.edit .img img {
		height: auto;
	}
	.function .section .img {
		margin-top: 15px !important;
		text-align: center !important;
	}
	
	.function .section.rw .img img {
		margin-left: 0;
	}
	
	.function .btn a {
		padding: 14px 10px;
		width: auto;
		height: auto;
		border: 1px solid #d6e3e3;
		border-radius: 4px;
		background: linear-gradient(top, #f5f5f5, #dce5e5);
		background: -o-linear-gradient(top, #f5f5f5, #dce5e5);
		background: -ms-linear-gradient(top, #f5f5f5, #dce5e5);
		background: -moz-linear-gradient(top, #f5f5f5, #dce5e5);
		background: -webkit-linear-gradient(left, #f5f5f5, #dce5e5);
		background: -webkit-gradient(linear,left top, left bottom, from(#f5f5f5), to(#dce5e5));
		
	}
	.function .btn span {
		display: block;
		font-size: 87.5%;
	}

	.function .btn-PMH img {
		text-align: center;
		width: 100%;
}
}

@media(max-width:320px){
	.function .btn a {
		padding: 6px 10px;
	}
	.function .btn span br {
		display: block;
	}
}

/*--------------------------------------------------------------------------------
	.cordi
--------------------------------------------------------------------------------*/
.cordi {
	margin: 85px auto 0;
	padding-top: 100px;
	background: url("../img/home/cordi_line.gif") repeat-x;
}
.cordi .inner {
	margin: 0 auto;
	width: 959px;
	zoom: 1;
}
.cordi .inner:after {
	clear: both;
	display: block;
	content: "";
}
.cordi .inner h4 {
	margin-bottom: 70px;
	text-align: center;
}
.cordi .inner .section {
	position: relative;
	float: left;
	width: 464px;
	min-height: 316px;
	_height: 316px;
}
.cordi .inner .section h5 {
	position: absolute;
	z-index: 1;
}
.cordi .inner .section p {
	position: relative;
	z-index: 1;
	margin: 178px 0 0 32px;
	*padding-top: 178px;
	width: 400px;
	font-size: 87.5%;
	line-height: 1.6;
	color: #5a5a5a;
}
.cordi .inner .section .note {
	display: block;
	margin-top: 8px;
	font-size: 62.5%;
	line-height: 1.4;
}
.cordi .inner .section .bg {
	position: absolute;
	z-index: 0;
	left: 0;
	top: 0;
}
.cordi .inner .section .btn {
	position: relative;
	z-index: 1;
	margin-top: 15px;
	text-align: center;
}
.cordi .inner .section .btn img {
	background-color: #d1d9de;
}
.cordi .inner .btn2 {
	position: absolute;
	z-index: 1;
	bottom: 20px;
	right: 13px;
}

/* .main
--------------------------------------------------------------------------------*/
.cordi .inner .main {
	margin-left: -35px;
	position: relative;
}

/* .xperia
--------------------------------------------------------------------------------*/
.cordi .inner .section.xperia h5 {
	left: -8px;
	top: -9px;
}

/* .bravia
--------------------------------------------------------------------------------*/
.cordi .inner .section.bravia {
	margin-left: 31px;
}
.cordi .inner .section.bravia h5 {
	left: -16px;
	top: -25px;
}

/* .camera
--------------------------------------------------------------------------------*/
.cordi .inner .section.camera {
	margin-top: 30px;
	margin-left: 31px;
}
.cordi .inner .section.camera h5 {
	left: -8px;
	top: -9px;
}

@media(max-width:640px){
	.cordi {
		margin: 40px auto 0;
		padding-top: 50px;
	}
	.cordi .inner {
		margin: 0 20px;
		width: auto;
	}
	.cordi .inner h4 {
		margin-bottom: 30px;
	}
	.cordi .inner h4 img {
		width: 100%;
		max-width: 589px;
	}
	.cordi .inner .section {
		float: none;
		margin: 25px 0 0 0 !important;
		padding-bottom: 25px;
		width: auto;
		height: auto;
		min-height: 0;
		border-bottom: 1px dotted #d5e1e1;
		overflow: hidden;
	}
	.cordi .inner .section h5 {
		position: static !important;
	}
	.cordi .inner .section h5 img {
		width: 105%;
		max-width: 491px;
	}
	.cordi .inner .section .bg {
		display: none;
	}
	.cordi .inner .section p {
		position: static !important;
		margin: 15px 0 0 0;
		width: auto;
	}
	.cordi .inner .section .btn {
		position: relative;
		z-index: 1;
		margin-top: 15px;
		text-align: center;
	}
	.cordi .inner .section .btn img {
		width: 100%;
		max-width: 391px;
		background-color: #fff;
	}
	.cordi .inner .btn2 {
		position: relative;
		z-index: 1;
		margin-top: 15px;
		text-align: center;
	}
	.cordi .inner .btn2 img {
		width: 100%;
		max-width: 391px;
	}
}

/*--------------------------------------------------------------------------------
	thickbox .detail
--------------------------------------------------------------------------------*/
.detail {
	position: relative;
	display: inline-block;
	*display: inline;
	zoom: 1;
	padding: 3px;
	background: #000000;
}
.detail .inner {
	padding: 40px 45px 50px;
	border: 2px solid #505050;
}
.detail .btn-close {
	position: absolute;
	right: 5px;
	bottom: 5px;
}
.detail .ss-visible {
	display: none;
}

@media(max-width:640px){
	.detail .inner {
		padding: 30px 30px 40px;
		border: 2px solid #505050;
	}
	.detail .ss-invisible {
		display: none;
	}
	.detail .ss-visible {
		display: block;
	}
	.detail .btn-close {
		display: none;
	}
}

/* .home-calendar
--------------------------------------------------------------------------------*/
.detail.home-calendar .flow-img {
	margin-top: -6px;
}

@media(max-width:640px){
	.detail.home-calendar h4 img {
		width: 100%;
		height: auto;
		max-width: 206px;
	}
	.detail.home-calendar .ss-visible {
		margin-top: 35px;
	}
	.detail.home-calendar .ss-visible img {
		width: 100%;
		height: auto;
	}
}

/* .home-cloud
--------------------------------------------------------------------------------*/
.detail.home-cloud .flow-img {
	margin-top: 17px;
}

@media(max-width:640px){
	.detail.home-cloud h4 img {
		width: 100%;
		height: auto;
		max-width: 432px;
	}
	.detail.home-cloud .ss-visible {
		margin-top: 35px;
	}
	.detail.home-cloud .ss-visible img {
		width: 100%;
		height: auto;
	}
}