@charset "shift_jis";

/* ----------------------------------------------------------- 
CSS Information  

Site URL:	http://www.cosme.net/xxxxx
File name:      cpn.css
Created:        2011-2-1
Last update:    2011-3-7 by takano
by Author Style Info: evt
----------------------------------------------------------- */ 
/* -----------------------------------------------------------

Table of Contents
 * common style ----------- 共通css
 * top -------------------- topページ
 * 第2階層　common style -- 第2階層共通css
 * vol1 ------------------- vol1用CSS
 * vol1-2 ----------------- vol1-2用CSS
 * vol2 ------------------- vol2用CSS
 * vol2-2 ----------------- vol2-2用CSS
 * vol3 ------------------- vol3用CSS
 * vol3-2 ----------------- vol3-2用CSS
	
----------------------------------------------------------- */


/* ----------------------------------------------------------- 
 common style
----------------------------------------------------------- */ 
/* set up ----------------------------- */
.clearfix { zoom:1; }
.clearfix:after { content:"."; display:block; height:0px; clear:both; visibility:hidden; }

/* section ----------------------------- */
#inner {
	margin-bottom: 20px;
	background: url("images/inner_bg.jpg") repeat-y 0 0;
	zoom: 1;
}

/* page-top ----------------------------- */
#page-top {
	text-align: right;
	font-weight: bold;
}
#page-top a {
	display: inline-block;
	padding-left: 13px;
	background: url("images/comon_pagetop_bg.png") no-repeat 0 4px;
	color: #6f172d;
}
#page-top a:hover {
	color: #a72344;
	background-position: 0 -51px;
}
#page-top a:hover span {
	text-decoration: none;
}

/* ----------------------------------------------------------- 
 top
----------------------------------------------------------- */ 
/* nav ---------------------------- */
#top-nav {
	padding: 7px 0 30px 13px;
}
#top-nav li {
	float: left;
}
#top-nav li a,
#top-nav li span {
	overflow: hidden;
	display: inline-block;
	width: 199px;
	height: 0;
	margin-right: 6px;
	padding-top: 217px;
	background-image: url("images/top_nav_btn.jpg");
	background-repeat: no-repeat;
	background-position: 0 0;
	line-height: 2;
}
#top-nav .vol1 a {
	background-position: 0 0;
}
#top-nav .vol2 a {
	background-position: -199px 0;
}
#top-nav .vol3 a {
	background-position: -398px 0;
}
#top-nav .vol1 a:hover {
	background-position: 0 -217px;
}
#top-nav .vol2 a:hover {
	background-position: -199px -217px;
}
#top-nav .vol3 a:hover{
	background-position: -398px -217px;
}
#inner #top-nav .vol2 span {
	background-position: -199px -434px;
}
#inner #top-nav .vol3 span {
	background-position: -398px -434px;
}

/* ----------------------------------------------------------- 
 第2階層　common style
----------------------------------------------------------- */ 
/* nav ---------------------------- */
#second-nav {
	padding-left: 8px;
	margin-bottom: 20px;
}
#second-nav li {
	float: left;
}
#second-nav li a,
#second-nav li span {
	overflow: hidden;
	display: inline-block;
	width: 207px;
	height: 0;
	padding-top: 67px;
	background: url("images/second_nav_btn.jpg") no-repeat;
	line-height: 2;
}
#second-nav .vol1 a {
	background-position: 0 0;
}
#second-nav .vol2 a {
	background-position: -207px 0;
}
#second-nav .vol3 a {
	background-position: -414px 0;
}
#second-nav .vol1 a:hover,
#second-nav .vol1 .current {
	background-position: 0 -67px;
}
#second-nav .vol2 a:hover,
#second-nav .vol2 .current {
	background-position: -207px -67px;
}
#second-nav .vol3 a:hover,
#second-nav .vol3 .current {
	background-position: -414px -67px;
}
#second-nav .vol2 span {
	background-position: -207px -134px;
}
#second-nav .vol3 span {
	background-position: -414px -134px;
}

/* ----------------------------------------------------------- 
 vol1
----------------------------------------------------------- */
#vol1 {
	padding: 0 13px 26px 13px;
}
#vol1 .head {
	margin-bottom: 20px;
	min-height: 195px;
	* html height: 195px;
	background: url("images/vol1_head_bg.png") no-repeat 0 bottom;
}
#vol1 .head p {
	padding: 6px 244px 31px 23px;
	line-height: 1.6;
	font-weight: bold;
	color: #450000;
}
#vol1 .head p span {
	display: block;
	margin-bottom: 4px;
	line-height: 1.5;
	font-weight: normal;
}
#vol1 .section {
	margin-bottom: 13px;
	padding-bottom: 17px;
	background: url("images/comon_section_bg.png") no-repeat 0 bottom;
}
#vol1 .section .article {
	padding-top: 11px;
	padding-bottom: 28px;
	background-color: #fff;
}
#vol1 .section .read {
	margin-bottom: 20px;
	padding: 0 80px 0 38px;
	color: #450000;
	line-height: 1.5;
}
#vol1 .section .image {
	margin-bottom: 20px;
}
#vol1 .section .btn {
	text-align: center;
	color: #2d292c;
}
#vol1 .section .btn a {
	overflow: hidden;
	display: block;
	width: 278px;
	height: 0;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5px;
	padding-top: 39px;
	background: url("images/vol1_section_btn.png") no-repeat 0 0;
	line-height: 2;
}
#vol1 .section .btn a:hover {
	filter: alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
}

/* page-btn ------------------------ */
#vol1 .page-btn {
	margin-bottom: 9px;
	text-align: right;
}
#vol1 .page-btn a {
	overflow: hidden;
	display: inline-block;
	width: 218px;
	height: 0;
	padding-top: 42px;
	background: url("images/vol1_page_next_btn.png") no-repeat 0 0;
	line-height: 2;
}
#vol1 .page-btn a:hover {
	background-position: 0 -42px;
}


/* ----------------------------------------------------------- 
 vol1-2
----------------------------------------------------------- */
/* sprite */
#vol1-2 .article1 .btn a,
#vol1-2 .article3 .btn a {
	background-image: url("images/vol1_2_section_btn.png");
	background-repeat: no-repeat;
}

#vol1-2 {
	padding: 0 13px 26px 13px;
}
#vol1-2 .section {
	margin-bottom: 13px;
	padding-bottom: 17px;
	background: url("images/comon_section_bg.png") no-repeat 0 bottom;
	color: #450000;
	line-height: 1.5;
}

/* article1 ------------------------ */
#vol1-2 .article1 {
	padding: 11px 10px 32px 38px;
	background-color: #fff;
	zoom: 1;
}
#vol1-2 .article1 .read {
	margin-bottom: 14px;
	padding-right: 28px;
}
#vol1-2 .article1 .btn {
	text-align: right;
}
#vol1-2 .article1 .btn a {
	overflow: hidden;
	display: inline-block;
	width: 336px;
	height: 0;
	padding-top: 32px;
	background-position: 0 0;
	line-height: 2;
}
#vol1-2 .article1 .btn a:hover {
	filter: alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
}

/* article2 ------------------------ */
#vol1-2 .article2 {
	padding: 0 20px 14px 20px;
	background-color: #fff;
	zoom: 1;
}
#vol1-2 .article2 .text {
	float: left;
	width: 337px;
}
#vol1-2 .article2 .text h3 {
	margin-bottom: 3px;
}
#vol1-2 .article2 .text .read {
	padding: 9px;
}
#vol1-2 .article2 .image {
	float: right;
	width: 232px;
	padding-top: 12px;
}
#vol1-2 .article2 .image img {
	margin-bottom: 3px;
}
#vol1-2 .article2 .image p {
	padding-left: 8px;
	font-size: 95%;
}

/* article3 ------------------------ */
#vol1-2 .article3 {
	padding: 0 20px 30px 20px;
	background-color: #fff;
	zoom: 1;
}
#vol1-2 .article3 h3 {
	margin-bottom: 17px;
}
#vol1-2 .article3 .text {
	margin-bottom: 11px;
}
#vol1-2 .article3 .text p {
	float: left;
	width: 284px;
}
#vol1-2 .article3 .text img {
	float: left;
}
#vol1-2 .article3 .text span {
	display: inline-block;
	width: 124px;
	padding: 10px 5px 5px;
	font-size: 95%;
	line-height: 1.4;
}
#vol1-2 .article3 .read {
	margin-bottom: 10px;
	padding-right: 5px;
}
#vol1-2 .article3 .btn {
	text-align: right;
}
#vol1-2 .article3 .btn a {
	overflow: hidden;
	display: inline-block;
	width: 357px;
	height: 0;
	padding-top: 32px;
	background-position: 0 -32px;
	line-height: 2;
}
#vol1-2 .article3 .btn a:hover {
	filter: alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
}

/* page-btn ------------------------ */
#vol1-2 .page-btn {
	margin-bottom: 9px;
}
#vol1-2 .page-btn li,
#vol1-2 .page-btn li a,
#vol1-2 .page-btn li span {
	width: 218px;
}
#vol1-2 .page-btn .prev {
	float: left;
}
#vol1-2 .page-btn .next {
	float: right;
}
#vol1-2 .page-btn a,
#vol1-2 .page-btn span {
	overflow: hidden;
	display: inline-block;
	height: 0;
	padding-top: 42px;
	background-image: url("images/vol1_2_page_btn.png");
	background-repeat: no-repeat;
	line-height: 2;
}
#vol1-2 .page-btn .prev a {
	background-position: 0 0;
}
#vol1-2 .page-btn .next a {
	background-position: -218px 0;
}
#vol1-2 .page-btn .prev a:hover {
	background-position: 0 -42px;
}
#vol1-2 .page-btn .next a:hover {
	background-position: -218px -42px;
}
#vol1-2 .page-btn .next span {
	background-position: -218px -84px;
}

/* ----------------------------------------------------------- 
 vol2
----------------------------------------------------------- */
#vol2 {
	padding: 0 13px 26px 13px;
}
#vol2 .section {
	margin-bottom: 13px;
	padding-bottom: 17px;
	background: url("images/comon_section_bg.png") no-repeat 0 bottom;
}
#vol2 .section .article {
	padding: 11px 20px 32px 20px;
	background-color: #fff;
}
#vol2 .section .read {
	margin-bottom: 8px;
	color: #450000;
	line-height: 1.5;
}

/* page-btn ------------------------ */
#vol2 .page-btn {
	margin-bottom: 9px;
}
#vol2 .page-btn li,
#vol2 .page-btn li a {
	width: 218px;
}
#vol2 .page-btn .prev {
	float: left;
}
#vol2 .page-btn .next {
	float: right;
}
#vol2 .page-btn a {
	overflow: hidden;
	display: inline-block;
	height: 0;
	padding-top: 42px;
	background-image: url("images/vol2_page_btn.png");
	background-repeat: no-repeat;
	line-height: 2;
}
#vol2 .page-btn .prev a {
	background-position: 0 0;
}
#vol2 .page-btn .next a {
	background-position: -218px 0;
}
#vol2 .page-btn .prev a:hover {
	background-position: 0 -42px;
}
#vol2 .page-btn .next a:hover {
	background-position: -218px -42px;
}

/* ----------------------------------------------------------- 
 vol2-2
----------------------------------------------------------- */
#vol2-2 {
	padding: 0 13px 26px 13px;
}
#vol2-2 .section {
	margin-bottom: 13px;
	padding-bottom: 17px;
	background: url("images/comon_section_bg.png") no-repeat 0 bottom;
	color: #450000;
	line-height: 1.5;
}

/* article1 ------------------------ */
#vol2-2 .article1 {
	padding: 11px 19px 15px 20px;
	background-color: #fff;
	zoom: 1;
}

/* article2 ------------------------ */
#vol2-2 .article2 {
	position: relative;
	min-height: 287px;
	padding: 0 20px;
	background-color: #fff;
}
* html #vol2-2 .article2 {
	height: 287px;
}
#vol2-2 .article2 h4,
#vol2-2 .article2 .read {
	margin-left: 306px;
}
#vol2-2 .article2 h4 {
	margin-bottom: 7px;
	padding-top: 33px;
}
#vol2-2 .article2 .read {
	padding: 0 5px 5px 9px;
}
#vol2-2 .article2 .image {
	position: absolute;
	top: 0;
	left: 20px;
}

/* article3 ------------------------ */
#vol2-2 .article3 {
	position: relative;
	min-height: 310px;
	padding: 0 20px;
	background-color: #fff;
}
* html #vol2-2 .article3 {
	height: 310px;
}
#vol2-2 .article3 h4,
#vol2-2 .article3 .read {
	position: relative;
	margin-right: 309px;
	z-index: 2;
}
#vol2-2 .article3 h4 {
	margin-bottom: 14px;
	padding-top: 22px;
}
#vol2-2 .article3 .read {
	padding: 0 20px 25px 1px;
}
#vol2-2 .article3 .image {
	position: absolute;
	top: 0;
	right: 20px;
	z-index: 1;
}

/* article4 ------------------------ */
#vol2-2 .article4 {
	padding: 0 20px 45px;
	background-color: #fff;
	zoom: 1;
}
#vol2-2 .article4 .read {
	position: relative;
	margin-top: -15px;
	z-index: 3;
}
#vol2-2 .article4 .note {
	position: relative;
	margin-top: -23px;
	padding: 0 105px 0 39px;
	font-size: 95%;
	z-index: 4;
}

/* page-btn ------------------------ */
#vol2-2 .page-btn {
	margin-bottom: 9px;
}
#vol2-2 .page-btn li,
#vol2-2 .page-btn li a,
#vol2-2 .page-btn li span {
	width: 218px;
}
#vol2-2 .page-btn .prev {
	float: left;
}
#vol2-2 .page-btn .next {
	float: right;
}
#vol2-2 .page-btn a,
#vol2-2 .page-btn span {
	overflow: hidden;
	display: inline-block;
	height: 0;
	padding-top: 42px;
	background-image: url("images/vol2_2_page_btn.png");
	background-repeat: no-repeat;
	line-height: 2;
}
#vol2-2 .page-btn .prev a {
	background-position: 0 0;
}
#vol2-2 .page-btn .next a {
	background-position: -218px 0;
}
#vol2-2 .page-btn .prev a:hover {
	background-position: 0 -42px;
}
#vol2-2 .page-btn .next a:hover {
	background-position: -218px -42px;
}
#vol2-2 .page-btn .next span {
	background-position: -218px -84px;
}


/* ----------------------------------------------------------- 
 vol3
----------------------------------------------------------- */
#vol3 {
	padding: 0 13px 26px 13px;
	color: #450000;

}
#vol3 .section .attention a {
	color: #ff3366;
}

#vol3 .section .attention a:hover {
	color: #ff3366;
}

#vol3 .section {
	margin-bottom: 13px;
	padding-bottom: 17px;
	background: url(images/comon_section_bg.png) no-repeat 0 bottom;
}
#vol3 .section .article {
	padding: 11px 20px 32px 20px;
	background-color: #fff;
}
#vol3 .section .read {
	margin-bottom: 8px;
	color: #450000;
	line-height: 1.5;
}
#vol3 .section .image {
	position: relative;
	height: 344px;
	width: 570px;
}
#vol3 .section .attention {
	display: block;
	width: 270px;
	right: 10px;
	position: absolute;
	bottom: 15px;
	font-size: 93%;
	line-height: 1.5;
}
#vol3 .section .attention span {
	font-weight: bold;
	color: #ff3366;
}

#vol3 .article2 {
	background: url(images/vol3_article2_image.jpg) no-repeat top;
	position: relative;
	height: 340px;
	width: 570px;
	line-height: 1.3;
	margin-bottom: 15px;
}
#vol3  .article2  .detail_01  {
	position: absolute;
	width: 270px;
	bottom: 20px;
	left: 32px;
}
#vol3 .article2 .detail_02 {
	position: absolute;
	width: 210px;
	bottom: 5px;
	right: 23px;
}


/* page-btn ------------------------ */
#vol3 .page-btn {
	margin-bottom: 9px;
}
#vol3 .page-btn li,
#vol3 .page-btn li a {
	width: 218px;
}
#vol3 .page-btn .prev {
	float: left;
}
#vol3 .page-btn .next {
	float: right;
}
#vol3 .page-btn a {
	overflow: hidden;
	display: inline-block;
	height: 0;
	padding-top: 42px;
	background-image: url("images/vol3_page_btn.png");
	background-repeat: no-repeat;
	line-height: 2;
}
#vol3 .page-btn .prev a {
	background-position: 0 0;
}
#vol3 .page-btn .next a {
	background-position: -218px 0;
}
#vol3 .page-btn .prev a:hover {
	background-position: 0 -42px;
}
#vol3 .page-btn .next a:hover {
	background-position: -218px -42px;
}


/* ----------------------------------------------------------- 
 vol3-2
----------------------------------------------------------- */
/* sprite */

#vol3-2 {
	padding: 0 13px 26px 13px;
}
#vol3-2 .section {
	margin-bottom: 13px;
	padding-bottom: 17px;
	background: url("images/comon_section_bg.png") no-repeat 0 bottom;
	color: #450000;
	line-height: 1.5;
}

/* article1 ------------------------ */
#vol3-2 .article1 {
	padding: 11px 10px 32px 38px;
	background-color: #fff;
	zoom: 1;
}
#vol3-2 .article1 .read {
	margin-bottom: 5px;
	padding-right: 28px;
}


/* article2 ------------------------ */
#vol3-2 .article2 {
	padding: 0 20px 14px 20px;
	background-color: #fff;
	zoom: 1;
}
#vol3-2 .article2 .text {
	float: left;
	width: 337px;
}
#vol3-2 .article2 .text h3 {
	margin-bottom: 3px;
}
#vol3-2 .article2 .text .read {
	padding: 9px;
}
#vol3-2 .article2 .image {
	float: right;
	width: 232px;
	padding-top: 12px;
}
#vol3-2 .article2 .image img {
	margin-bottom: 3px;
}
#vol3-2 .article2 .image p {
	padding-left: 8px;
	font-size: 95%;
}

/* article3 ------------------------ */
#vol3-2 .article3 {
	padding: 0 20px 30px 20px;
	background-color: #fff;
	zoom: 1;
}
#vol3-2 .article3 h3 {
	margin-bottom: 10px;
}
#vol3-2 .article3 .text {
	margin-bottom: 11px;
}
#vol3-2 .article3 .cosmestore {
	float: left;
	width: 260px;
	_margin-right: 15px;
	margin-right: 10px;
}
#vol3-2 .article3 .cosmestore ul {
	font-weight: bold;
	margin: 5px 0px 15px 10px;
}
#vol3-2 .article3 .cosmestore li {
	font-size: 85%;
	font-weight: normal;
}
#vol3-2  .article3 .cosmestore .photo img {
	float: left;
	width: 148px;
	height: 123px;
	padding-right: 5px;
}
#vol3-2 .article3 .cosmestore .photo-text {
	font-size: 85%;
	margin-left: 5px;
}
#vol3-2 .article3 .cosmestore .btn {
	margin-left: 5px;
	margin-top: 17px;
	_margin-top: 34px;
	clear: both;
}
/* IE7のみ ------------- */
*:first-child+html #vol3-2 .article3 .cosmestore .btn {
	margin-left: 5px;
	margin-top: 34px;
} 
/* ------------------- */

#vol3-2 .article3 .cosmecom {
	float: right;
	width: 260px;
	margin-right: 10px;
	_margin-right: 5px;
	margin-left: 10px;
}
#vol3-2 .article3 .cosmecom ul {
	font-weight: bold;
	margin: 5px 0px 15px 10px;
}
#vol3-2 .article3 .cosmecom li {
	font-size: 85%;
	font-weight: normal;
}
#vol3-2  .article3 .cosmecom .photo img {
	float: left;
	width: 149px;
	height: 125px;
	padding-right: 5px;
}
#vol3-2 .article3 .cosmecom .photo-text {
	font-size: 85%;
	margin-left: 5px;
	margin-bottom: 16px;
}
#vol3-2 .article3 .cosmecom .btn span{
	margin-left: 5px;
	margin-top: 15px;
	clear: both;
	font-weight: bold;
	color: #ff6699;
}

#vol3-2 .article3 .cosmecom .btn img {
	margin-left: 5px;
}


/* page-btn ------------------------ */
#vol3-2 .page-btn {
	margin-bottom: 9px;
	text-align: left;
}
#vol3-2 .page-btn a {
	overflow: hidden;
	display: inline-block;
	width: 218px;
	height: 0;
	padding-top: 42px;
	background: url("images/vol3_2_page_back_btn.png") no-repeat 0 0;
	line-height: 2;
}
#vol3-2 .page-btn a:hover {
	background-position: 0 -42px;
}