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


/*-------------------------------------------------------------------
	greeting
-------------------------------------------------------------------*/

#greeting {
}

#greeting .box01 {
	overflow:hidden;
	zoom:1;
	width:960px;
	margin:0 auto 100px;
}

#greeting .box02 {
	width:960px;
	margin:0 auto 100px;
}

#greeting .box02 p {
	margin:0 0 30px;
}

#greeting .box02 p:last-child {
	margin:0;
}


#greeting .box01 .photo {
	float:left;
}

#greeting .box01 .texts {
	margin-left:350px;
}

#greeting .box01 .texts p:last-child {
	margin-top:30px;
}

#greeting .bg01 {
	background:url(../image/greeting/kumo.jpg) center center no-repeat;
	background-size:cover;
	background-attachment:fixed;
	height:200px;
	margin:0 0 100px;
}

#greeting .bg02 {
	background:url(../image/greeting/inori.jpg) center center no-repeat;
	background-size:cover;
	background-attachment:fixed;
	height:200px;
	margin:0 0 100px;
}

#greeting .bg03 {
	background:url(../image/greeting/omote.jpg) center center no-repeat;
	background-size:cover;
	background-attachment:fixed;
	height:200px;
}

/*-------------------------------------------------------------------
	profile01
-------------------------------------------------------------------*/

#profile01 {
	width:960px;
	margin:0 auto;
}

#profile01 .box01 {
	overflow:hidden;
	zoom:1;
	margin:0 0 100px;
}

#profile01 .box01 .photo {
	float:left;
	width:305px;
	background:#dcdddd;
	text-align:center;
}

#profile01 .box01 .texts {
	margin-left:350px;
}

#profile01 .profile {
	background:#edece3;
	padding:20px;
	margin:0 0 100px;
}

#profile01 .profile .into {
	border:1px solid #a7a7a7;
	padding:40px 20px;
}

#profile01 .profile .into dl {
	overflow:hidden;
	zoom:1;
	border-bottom:1px solid #a7a7a7;
	padding:0 10px 5px;
	margin:0 0 10px;
}

#profile01 .profile .into dl:last-child {
	margin:0;
}

#profile01 .profile .into dl dt {
	float:left;
}

#profile01 .profile .into dl dd {
	margin-left:90px;
}

#profile01 .textarea {
	width:840px;
	margin:0 auto 100px;
}

#profile01 .textarea.end {
	margin:40px auto 0;
}


/*-------------------------------------------------------------------
	profile02
-------------------------------------------------------------------*/

#profile02 {
	width:960px;
	margin:0 auto;
}

#profile02 .box01 {
	overflow:hidden;
	zoom:1;
	margin:0 0 100px;
}

#profile02 .box01 .photo {
	float:left;
	width:305px;
	background:#dcdddd;
	text-align:center;
}

#profile02 .box01 .texts {
	margin-left:350px;
}

#profile02 .profile {
	background:#edece3;
	padding:20px;
	margin:0 0 100px;
}

#profile02 .profile .into {
	border:1px solid #a7a7a7;
	padding:40px 20px;
}

#profile02 .profile .into dl {
	overflow:hidden;
	zoom:1;
	border-bottom:1px solid #a7a7a7;
	padding:0 10px 5px;
	margin:0 0 10px;
}

#profile02 .profile .into dl:last-child {
	margin:0;
}

#profile02 .profile .into dl dt {
	float:left;
}

#profile02 .profile .into dl dd {
	margin-left:90px;
}

#profile02 .imgbox {
	text-align:center;
}


#profile02 .imgbox li {
	display:inline-block;
	margin-right:50px;
}

#profile02 .imgbox li:last-child {
	margin-right:0;
}



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

.story {
	background:url(../image/greeting/story_bg.jpg) repeat;
}

.story #container {
	padding:70px 0 100px
}

#story {
	width:960px;
	margin:0 auto;
}

#story .box {
	background:#fffde5;
	padding:30px;
	margin:0 0 150px;
	position:relative;
}

#story .box:after {
	width: 40px;
  height: 40px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(-45deg) translateY(-50%);
	position:absolute;
	bottom:-100px;
	left:50%;
	content:'';
}


#story .box.last {
	margin:0;
}

#story .box.last:after {
	display:none;
}


#story .box .same {
	overflow:hidden;
	zoom:1;
}

#story .box .same.left .photo {
	float:left;
	width:450px;
}

#story .box .same.right .photo {
	float:right;
	width:450px;
}

#story .box .same .photo.gray {
	width:450px;
	text-align:center;
	background:#dcdddd;
}

#story .box .same .photo.gray img {
	width:auto;
}

#story .box .same .photo img {
	width:100%;
}

#story .box .same.left .texts {
	margin-left:490px;
}

#story .box .same.right .texts {
	margin-right:490px;
}

/*===============================================
  画面の横幅が1024px以下に適用
===============================================*/
@media screen and (max-width: 1024px){
	
	/* greeting */
	
	#greeting .box01 {
		width:94%;
	}

	#greeting .box02 {
		width:94%;
	}
	
	#greeting .bg01,
	#greeting .bg02,
	#greeting .bg03 {
		background-attachment:scroll;
	}
	
	
	/* profile01 */

	#profile01 {
		width:94%;
	}
	
	
	/* profile01 */

	#profile02 {
		width:94%;
	}
	
	#profile02 .imgbox li {
		width:30%;
		margin-right:3%
	}
	
	/* story */
	#story {
		width:94%;
	}
}

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

/*===============================================
  画面の横幅が640px以下に適用
===============================================*/
@media screen and (max-width: 640px){
	
	#greeting .box01 {
		margin:0 auto 50px;
	}

	#greeting .box02 {
		margin:0 auto 50px;
	}

	#greeting .box02 p {
		margin:0 0 20px;
	}

	#greeting .box02 p:last-child {
		margin:0;
	}

	#greeting .box01 .photo {
		float:none;
		text-align:center;
	}

	#greeting .box01 .texts {
		margin:20px 0 0;
	}

	#greeting .box01 .texts p:last-child {
		margin-top:20px;
	}

	#greeting .bg01 {
		height:150px;
		margin:0 0 50px;
	}

	#greeting .bg02 {
		height:150px;
		margin:0 0 50px;
		background-position:center right;
	}

	#greeting .bg03 {
		height:150px;
	}
	
	/* profile01 */

	#profile01 .box01 {
		overflow:hidden;
		zoom:1;
		margin:0 0 50px;
	}

	#profile01 .box01 .photo {
		float:none;
		width:auto;
		margin:0 0 20px;
	}

	#profile01 .box01 .texts {
		margin-left:0;
	}

	#profile01 .profile {
		background:#edece3;
		padding:5%;
		margin:0 0 50px;
	}

	#profile01 .profile .into {
		padding:4% 2%;
	}


	#profile01 .profile .into dl dd {
		margin-left:60px;
	}

	#profile01 .textarea {
		width:auto;
		margin:0 auto 50px;
	}

	#profile01 .textarea.end {
		margin:20px auto 0;
	}
	
	
	/* profile02 */

	#profile02 .box01 {
		overflow:hidden;
		zoom:1;
		margin:0 0 50px;
	}

	#profile02 .box01 .photo {
		float:none;
		width:auto;
		margin:0 0 20px;
	}

	#profile02 .box01 .texts {
		margin-left:0;
	}

	#profile02 .profile {
		background:#edece3;
		padding:5%;
		margin:0 0 50px;
	}

	#profile02 .profile .into {
		padding:4% 2%;
	}


	#profile02 .profile .into dl dd {
		margin-left:60px;
	}
	

	#profile02 .imgbox li {
		display:block;
		width:auto;
		margin:0 0 30px;
	}

	#profile02 .imgbox li:last-child {
		margin:0;
	}

	
	/* story */
	
	#story .box {
		padding:5%;
		margin:0 0 80px;
	}

	#story .box:after {
		width: 20px;
  	height: 20px;
  	bottom:-50px;
	}


	#story .box .same.left .photo {
		float:none;
		text-align:center;
		width:auto;
	}

	#story .box .same.right .photo {
		float:none;
		text-align:center;
		width:auto;
	}

	#story .box .same .photo.gray {
		width:auto;
	}

	#story .box .same.left .texts {
		margin:30px 0 0;
	}

	#story .box .same.right .texts {
		margin:30px 0 0;
	}



}

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