@charset "utf-8";
@import url(reset.css);
@import url(base.css);
@import url(common.css);


.loveletter #maintitle,
.loveletter #container {
	background:#ffddd9;
}

.loveletter #container {
	padding:100px 0 0;
}


/*-------------------------------------------------------------------
	maintitle
-------------------------------------------------------------------*/

.loveletter #maintitle:before {
	background:#c8161d;
}

.loveletter #maintitle:after {
	background:#c8161d;
}

.loveletter #maintitle .titlebox h2 {
	color:#a07619;
	text-shadow:2px 2px 3px #fff;
}

.loveletter #maintitle .titlebox:after {
	background:#c8161d;
}

/*-------------------------------------------------------------------
	love
-------------------------------------------------------------------*/

#love {
	color:#231815;
}

#love .read {
	width:94%;
	margin:0 auto 100px;
	text-align:center;
	line-height:2.0;
}

#container #love h3.red {
	color:#c8161d;
}


#love .first {
	width:960px;
	margin:0 auto 150px;
}

#love .first .box {
	position:relative;
}

#love .first .box .text {
	width:450px;
}


/* box01 */

#love .first .box01 {
	margin:0 0 100px;
}

#love .first .box.box01 .text,
#love .first .box.box03 .text {
	position:absolute;
	top:50%;
	right:0;
	transform:translateY(-50%);
}


#love .first .box01 .photo {
	width:430px;
	position:relative;
	text-align:center;
	padding:100px 0 0;
}

#love .first .box01 .photo .number {
	position:absolute;
	top:0;
	left:0;
}

#love .first .box01 .photo .redtxt {
	position:absolute;
	top:0;
	left:150px;
}

#love .first .box01 .arrow {
	position:absolute;
	bottom:-25px;
	right:360px;
}


/* box02 */

#love .first .box02 {
	margin:0 0 20px;
}

#love .first .box.box02 .text {
	position:absolute;
	top:50%;
	left:0;
	transform:translateY(-50%);
}


#love .first .box02 .photo {
	width:500px;
	position:relative;
	text-align:right;
	float:right;
}

#love .first .box02 .photo .number {
	position:absolute;
	top:0;
	left:0;
}

#love .first .box02 .photo .redtxt {
	position:absolute;
	bottom:0;
	right:0;
}

#love .first .box02 .arrow {
	position:absolute;
	bottom:-140px;
	right:400px;
}



/* box03 */

#love .first .box03 .photo {
	width:520px;
	position:relative;
	text-align:center;
	padding:0 0 90px;
}

#love .first .box03 .photo .number {
	position:absolute;
	top:0;
	left:0;
}

#love .first .box03 .photo .redtxt {
	position:absolute;
	bottom:0;
	right:0;
}

#love .bg01 {
	background:url(../image/good/love_bg.jpg) center center no-repeat;
	background-size:cover;
	background-attachment:fixed;
	height:200px;
	margin:0 0 50px;
}


#love .price {
	width:600px;
	margin:0 auto;
	padding:20px 0;
	text-align:center;
	border-top:1px solid #c5b776;
	border-bottom:1px solid #c5b776;
	font-size:1.6em;
}

#love .white {
	background:#FFF;
	padding:100px 0;
	margin:100px 0 0;
}

#love .white .inner {
	width:980px;
	margin:0 auto;
}

#love .white .inner .center {
	text-align:center;
	margin:0 0 50px;
}

#love .white .inner dl dt {
	text-align:center;
}

#love .white .inner dl dt iframe {
	width:90% !important;
	height:500px;
	margin:0 auto;
}

#love .white .inner dl dd {
	margin-top:30px;
}




/*===============================================
  画面の横幅が1024px以下に適用
===============================================*/
@media screen and (max-width: 1024px){
	
	/* love */


	#love .first {
		width:94%;
	}

	#love .first .box {
		position:relative;
	}

	#love .first .box .text {
		width:auto;
	}
	
	#love .first .box .ill {
		text-align:center;
	}	
	
	#love .first .box .ill img {
		max-width:80%;
	}	


	/* box01 */

	#love .first .box01 {
		margin:0 0 50px;
	}

	#love .first .box.box01 .text,
	#love .first .box.box03 .text {
		position:static;
		transform:none;
	}


	#love .first .box01 .photo {
		width:auto;
		position:relative;
		text-align:center;
		padding:50px 0 20px;
	}


	#love .first .box01 .photo .redtxt {
		top:auto;
		left:auto;
		right:0;
		bottom:20px;
	}

	#love .first .box01 .arrow {
		display:none;
	}

	/* box02 */

	#love .first .box02 {
		margin:0 0 50px;
	}

	#love .first .box.box02 .text {
		position:static;
		transform:none;
	}


	#love .first .box02 .photo {
		width:auto;
		position:relative;
		text-align:center;
		float:none;
		padding:0 0 20px;
	}
	
	#love .first .box02 .photo .redtxt {
		bottom:20px;
	}



	#love .first .box02 .arrow {
		display:none;
	}


	/* box03 */

	#love .first .box03 .photo {
		width:auto;
		position:relative;
		text-align:center;
		padding:0 0 30px;
	}
	
	#love .first .box03 .photo .redtxt {
		bottom:20px;
	}



	#love .bg01 {
		background-attachment:scroll;
	}


	#love .price {
		width:80%;
	}



	#love .white .inner {
		width:94%;
	}

	
}

/*===============================================
  画面の横幅が768px以下に適用
===============================================*/
@media screen and (max-width: 768px){
	
	
}

/*===============================================
  画面の横幅が640px以下に適用
===============================================*/
@media screen and (max-width: 640px){
	
	.loveletter #container {
		padding:50px 0 0;
	}
	
	
	#love .first .box .ill img {
		max-width:70%;
	}	
	
	#love .white {
		padding:50px 0;
		margin:50px 0 0;
	}
	
	#love .white .inner dl dt iframe {
		width:100% !important;
		height:200px;
	}
	
	
}

/*===============================================
  画面の横幅が380px以下に適用
===============================================*/
@media screen and (max-width: 380px){
	
}