/* CSS Document */

#contents_area_birth img { vertical-align: text-bottom; max-width: 100%; }


#contents_area_birth {
	background: url(../../../birthtree/img/back.jpg) repeat 50% 0;
	max-width:980px;
	margin:auto auto 0px auto;
	padding:10px 0 0px 0 ;
	border-radius: 6px;        /* CSS3 */  
	-webkit-border-radius: 6px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 6px;   /* Firefox用 */
}
/* #contents_area_birth h2 img { width: 100%;} */

#birth_head {
	max-width: 830px;
	margin:auto;
	display:block;
	margin: 0 auto 20px auto;	
}
#birth_head .birth_lead {
	margin: 0 0 40px 0;	
	border-bottom: 1px solid #3e1907;
	padding-bottom: 20px;
}
#birth_head .birth_lead p {
	font-size:12px;
	line-height:25px;
	text-align: left;
	width: 47%;
	float: left;
	margin-top: 0 !important;
}
#birth_head .birth_lead .birth_video {
	position: relative;
	width: 415px;
	height: 233px;
	float: right;
}
#birth_head .birth_lead .birth_video iframe{
	position: absolute;
	top: 0;
	right :0;
	width: 100%;
	height: 100%;
}
@media screen and (max-width: 480px) {
	#birth_head {
		margin: 0 auto 20px;
	}
	#birth_head .birth_lead {
		width: 95%;
		margin: 20px auto 20px auto;	
	}
	#birth_head .birth_lead p {
		float: none;
		width: 100%;
		margin: 0 auto 20px auto;	
	}
	#birth_head .birth_lead .birth_video {
		float: none;
		width: 95%;
		height: auto;
		padding-top: 56%;
		margin: auto;	
	}
}


.birth_title {
	max-width: 830px;	
	font-size: 12px;
	letter-spacing: -1px;
	line-height: 25px;
	margin-bottom: 20px;
}
.birth_title img {
	max-width: 467px;	
}
.birth_title p {
	text-indent: -8px;
}
@media screen and (max-width: 480px) {
	.birth_title {
		width: 95%;	
		margin: auto;
	}
}

#tree { overflow: hidden; position: relative;}
#tree .img {
	float: left;
	width: 48%;
	margin: 0;
}
#tree .click {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	width: 169px;
}
#tree ul {
	margin: 60px 0 0;
	padding: 0;
	float: right;
	width: 48%;
	list-style: none;
	text-shadow: 1px 1px 1px #666;
	background-color: rgba(74,44,0,0.15);
	border-top: 1px solid #2e1100;
}
#tree ul li {
	border: 1px solid #2e1100;
	border-top: none;
}
#tree ul li a {
	background: url(../../../birthtree/img/sp_birth_07.png) no-repeat 95% 50%;
	display: block;
	padding: 5px 20px;
	font-size: 18px;
}
#tree ul li:nth-child(1) a {color:#1b256d;}
#tree ul li:nth-child(2) a {color:#84256d;}
#tree ul li:nth-child(3) a {color:#c4477f;}
#tree ul li:nth-child(4) a {color:#ea4312;}
#tree ul li:nth-child(5) a {color:#f46a1e;}
#tree ul li:nth-child(6) a {color:#ff901c;}
#tree ul li:nth-child(7) a {color:#9c3e05;}
#tree ul li:nth-child(8) a {color:#625b00;}
#tree ul li:nth-child(9) a {color:#166e22;}
#tree ul li:nth-child(10) a {color:#49b622;}
#tree ul li:nth-child(11) a {color:#00bdc1;}
#tree ul li:nth-child(12) a {color:#218ad5;}

@media screen and (max-width: 480px) {
	#tree .img {
		float: none;
		width: 90%;
		margin: 0 auto;
	}
	#tree .click {
		position: static;
		margin: 0 auto;
	}	
	#tree ul {
		float: none;
		width: 90%;
		margin: 0 auto;
	}
}

/* カーボンオフセット、木のたまご */

.carbon_offset {
	max-width: 100%;
	margin: 0 auto 10px auto;	
	font-size: 12px;
	border: 2px solid #c79d73;
	padding: 10px;
	clear: both;
}
.carbon_offset .co_logo {
	width: 23%;	
	float: left;
	padding-top:10px;
	padding-left:5px;
	text-align:center;
}
.carbon_offset .notes {
	width: 72%;	
	float: left;
	margin: 0 0 0 4%;
}
.carbon_offset .notes p { margin:0;}

.kinotamago {
	max-width: 100%;
	margin: 0 auto 10px auto;	
	font-size: 12px;
	border: 2px solid #c79d73;
	padding: 10px;
	clear: both;
}
.kinotamago .img {
	width: 23%;	
	float: left;
}
.kinotamago .notes {
	width: 38%;	
	float: left;
	margin: 0 4%;
}
.kinotamago .notes h2 {
	margin: 0 0 10px 0;	
}
.kinotamago .notes p { margin: 0;	}
.kinotamago ul {
	margin: 0;
	padding: 0;
	width: 31%;
	float:left;
	list-style: none;
}
.kinotamago ul li:nth-of-type(1) {
	margin-bottom: 24px;	
}
.banner_area {
	clear: both;
	max-width: 830px;
	font-size: 14px;
	padding-top: 20px;
	margin: 20px auto;
}
.banner_area h3 {
	border-bottom: 1px solid #73ae30;
	max-width: 830px;	
}
.banner_area h3 img {
	max-width: 588px;	
}
.banner_area .gendai {
	width: 34%;
	float: left;
}
.banner_area .shop_banner {
	width: 57%;
	float: right;
	margin-bottom: 20px;
}
.banner_area p a:hover {
	opacity: 0.8;	
}
@media only screen and (max-width: 780px) and (min-width: 481px) {
	.carbon_offset {
		max-width: 100%;
		margin: 0 auto 10px auto;	
		font-size: 12px;
		border: 2px solid #c79d73;
		padding: 10px;
		clear: both;
	}
	.carbon_offset .co_logo { width: 35%;	}
	.carbon_offset .notes { width: 63%; margin: 0 1%;}
	.kinotamago .img { display: none;}
	.kinotamago .notes {
		width: 55%;	
		float: left;
		margin: 0 10% 0 0;
	}
	.kinotamago ul { width: 35%;}
}
@media only screen and (max-width: 480px) {
	.banner_area {
		width: 95%;
		margin: auto;
		float: none;	
	}
	.banner_area .gendai {
		width: 95%;
		margin: 0 auto 10px auto;
		float: none;	
	}
	.banner_area .shop_banner {
		width: 95%;
		margin: 0 auto 10px auto;
		float: none;	
	}
	.kinotamago .img { display: none;}
	.kinotamago .notes {
		float: none;
		width: auto;
		margin: 0;
	}
	.kinotamago ul {
		float: none;
		width: auto;
	}
}

/* 誕生木に関するお問い合わせ */
#birth_contact h2 {
	font-size:20px;
	font-weight:bold;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#fff;
	background-color:#333;
	padding:5px 0 5px 10px;
	margin-bottom: 20px;
}
#birth_contact .left {
	float: left;
	width: 34.38%;
	max-width: 337px;
	padding: 20px 0;
}
#birth_contact .right {
	float:right;
	width: 60%;
	max-width: 588px;
	padding-top:10px;
	font-size:12px;
}
#birth_contact .right p { margin: 0;}
#birth_contact .right dl { margin: 1.5em 0 0;}
#birth_contact .right dt { margin-bottom: 1.5em; font-weight: bold; font-size: 14px;}
#birth_contact .right dd { margin: 0;}
#birth_contact .footimage {
	margin: 0;
	text-align: center;
}
#birth_contact .footimage img {
	width: 100%;
	max-width: 980px;
}
@media screen and (max-width: 480px) {
	#birth_contact .left {
		float: none;
		width: auto;
		max-width: 337px;
		margin: 0 auto;
		padding: 0;
	}
	#birth_contact .right {
		float: none;
		width: 95%;
		max-width: none;
		margin: 0 auto;
		padding: 0;
	}
}

/* 詳細ページ */
#birth_detail {
	max-width: 820px;
	margin: 20px auto;
	overflow: hidden;
	font-size: 13px;
	letter-spacing: .1em;
	line-height: 1.7;
}
#birth_detail h1 { margin-bottom: 15px; border-bottom: 1px solid #000;}
#birth_detail h2 {
	max-width: 108px;
	margin: 0 0 15px;
	color: #fff;
	text-align: center;
	font-size: 15px;
	font-weight: bold;
	letter-spacing: .5em;
}
#birth_detail p { margin: 0;}

#birth_detail .wood_word {
	margin: 0 0 45px;
	padding: 0;
}
#birth_detail .wood_word dt {
	display: inline-block;
	margin: 0 10px 0 0;
	font-size: 20px;
}
#birth_detail .wood_word dd {
	display: inline-block;
	background: url(../../../birthtree/img/icon_arrow.png) no-repeat 0 4px;
	background-size: 14px;
	margin: 0 1em 0 0;
	padding-left: 20px;
	font-size: 14px;
}

#birth_detail .photo { width: 45.36%; float: right; margin-bottom: 50px;}

#birth_detail .feature {
	float: left;
	width: 49.39%;
	margin: 0 0 50px;
}
#birth_detail .feature h2 { background: #1b256d;}

#birth_detail .wood_story {
	clear: both;
	margin-bottom: 50px;
}
#birth_detail .wood_story h2 { background: #9c3e05;}

#birth_detail .example h2 { background: #625b00;}
#birth_detail .example ul {
	margin: 0;
	padding: 0 0 0 25px;
}
#birth_detail #birth_pagenavi {
	margin: 120px auto 0;
	padding: 0;
	max-width: 740px;
	list-style: none;
	overflow: hidden;
	text-align: center;
}
#birth_detail #birth_pagenavi li { display: inline-block; margin: 5px 0 0;}
#birth_detail #birth_pagenavi img { width: 116px;}

#birth_detail .birth_return { margin: 40px 0;}
#birth_detail .birth_return a {
	display: block;
	background: #333;
	max-width: 240px;
	padding: 10px 0;
	margin: 0 auto;
	color: #fff;
	text-decoration: none;
	text-align: center;
}

@media screen and (max-width: 480px) {
	#birth_detail {
		width: 95%;
		margin: 0 auto;
		font-size: 14px;
	}
	#birth_detail .wood_word { margin-bottom: 30px;}
	#birth_detail .wood_word dt {
		display: block;
		margin: 0;
		font-size: 18px;
	}
	#birth_detail .photo {
		width: auto;
		float: none;
		margin-bottom: 30px;
	}
	#birth_detail .feature {
		width: auto;
		float: none;
		margin-bottom: 10px;
	}
	#birth_detail .wood_story {
		margin-bottom: 30px;
	}
	#birth_detail #birth_pagenavi { margin-top: 60px;}
}