@charset "UTF-8";

/*

	[SITE] commmonsmart
	[FILE] /peep/css/peep.css

*/

/*==================================================
【#004】PEEPING commmons artist　@2010.01.07up
==================================================*/
#peep004 {
	width:860px;
	background:#FF1800;
}

#peep004 h2 {
	margin:0;
}

/*
メッセージ
--------------------------------------------------*/
#peep004 .message,
#peep004 .messageTop {
	margin:10px 21px 0;
}
#peep004 .message2 {
	border-top:2px solid #FF1800;
	margin:0 21px;
}
#peep004 .message3 {
	border-top:2px solid #FF1800;
	margin:0 21px;
	background:#fff;
}
#peep004 .messageA,
#peep004 .messageB {
	margin:0 16px;
}
#peep004 .message h3,
#peep004 .message2 h3,
#peep004 .message3 h3,
#peep004 .messageTop h3 {
	padding-top:8px;
}
#peep004 .message .ftr,
#peep004 .message3 .ftr,
#peep004 .messageTop .ftr {
	width:818px;
	height:6px;
	font-size:0;
	background:url(../images/vol004/bg_artist_ftr.gif) no-repeat 0 0;
}

#peep004 #artist01 { background:#fff url(../images/vol004/bg_artist-01.jpg) no-repeat 0 0; }
#peep004 #artist02 { background:#fff url(../images/vol004/bg_artist-02.jpg) no-repeat 0 0; }
#peep004 #artist03 { background:#fff url(../images/vol004/bg_artist-03.jpg) no-repeat 0 0; }
#peep004 #artist04 { background:#fff url(../images/vol004/bg_artist-04.jpg) no-repeat 0 0; }
#peep004 #artist05 { background:#fff url(../images/vol004/bg_artist-05.jpg) no-repeat 0 0; }
#peep004 #artist06 { background:#fff url(../images/vol004/bg_artist-06.jpg) no-repeat 0 0; }
#peep004 #artist07 { background:#fff url(../images/vol004/bg_artist-07.jpg) no-repeat 0 0; }
#peep004 #artist08 { background:#fff url(../images/vol004/bg_artist-08.jpg) no-repeat 0 0; }
#peep004 #artist09 { background:#fff url(../images/vol004/bg_artist-09.jpg) no-repeat 0 0; }
#peep004 #artist10 { background:#fff url(../images/vol004/bg_artist-10.jpg) no-repeat 0 0; }

/*
LISTENING
-------------------------*/
#peep004 .messageA .mListening {
	float:left;
	width:610px;
}
#peep004 .messageB .mListening {
	float:right;
	width:610px;
}
#peep004 .mListening h4 {
	margin-top:10px;
	padding-bottom:6px;
}

#peep004 .mListening .wrap {
	border-top:1px solid #FF1800;
	border-bottom:1px solid #FF1800;
}

/* Q1・Q2 */
#peep004 .mListening .textAreaA {
	float:left;
	width:448px;
}
#peep004 .mListening .textAreaA .set {
	padding:7px 0;
}
#peep004 .mListening .textAreaA p {
	float:right;
	width:408px;
	line-height:1.4;
	letter-spacing:0.05em;
}

/* only ASA-CHANG */
#peep004 .mListening .textAreaA .set .set {
	padding:0;
}
#peep004 .mListening .textAreaA p.textA {
	float:left;
	width:110px;
}
#peep004 .mListening .textAreaA p.textB {
	float:right;
	width:288px;
	line-height:1.6;
	padding-top:2px;
}

#peep004 .mListening .textAreaA .q1 {
	background:url(../images/vol004/bg_listening.gif) repeat-x 0 100%;
}
#peep004 .mListening .textAreaA .q1 span {
	font-size:10px;
}
/* Q3 */
#peep004 .mListening .textAreaB {
	width:610px;
	padding:7px 0 10px;
}
#peep004 .mListening .textAreaA h5,
#peep004 .mListening .textAreaB h5 {
	float:left;
	width:40px;
}
#peep004 .mListening .textAreaB p {
	float:right;
	width:570px;
	line-height:1.4;
	letter-spacing:0.05em;
}

/* CD */
#peep004 .mListening .photoArea {
	float:right;
	width:151px;
	padding:10px 0;
}
#peep004 .mListening .photoArea .jacket {
	float:left;
	width:92px;
}
#peep004 .mListening .photoArea .jacket img {
	border:1px solid #ccc;
}
#peep004 .mListening .photoArea .button {
	float:right;
	width:50px;
}
#peep004 .mListening .photoArea .button img {
	margin-top:4px;
}
#peep004 .mListening .photoArea .button .typeA img { margin-top:39px; }
#peep004 .mListening .photoArea .button .typeB img { margin-top:58px; }
#peep004 .mListening .photoArea .button .typeC img { margin-top:77px; }

/*
CREATION
-------------------------*/
#peep004 .mCreation {
	float:left;
	width:444px;
	padding-bottom:6px
}
#peep004 .mCreation h4 {
	padding-bottom:6px;
}
#peep004 .message3 .mCreation h4 {
	padding-top:8px;
	padding-bottom:6px;
}

#peep004 .mCreation .hdr {
	width:444px;
	height:2px;
	font-size:0;
	background:url(../images/vol004/bg_creation_hdr.gif) no-repeat 0 0;
}
#peep004 .mCreation .ftr {
	width:444px;
	height:2px;
	font-size:0;
	background:url(../images/vol004/bg_creation_ftr.gif) no-repeat 0 0;
}

#peep004 .mCreation .wrap {
	padding:8px 10px;
	background:#CDF1F8;
}

#peep004 .mCreation .photoArea {
	float:left;
	width:92px;
}
#peep004 .mCreation .photoArea img {
	border:1px solid #ccc;
}

#peep004 .mCreation .textArea {
	float:right;
	width:320px;
}
#peep004 .mCreation .textArea p {
	letter-spacing:0.05em;
}
#peep004 .mCreation .textArea p.text {
	font-size:10px;
}
#peep004 .mCreation .textArea p.moreDetail {
	text-align:right;
	margin-top:10px;
}

/*
CONTENTS
-------------------------*/
#peep004 .mContents {
	float:right;
	width:328px;
}
#peep004 .mContents h4 {
	padding-bottom:6px;
}
#peep004 .message3 .mContents h4 {
	padding-top:8px;
	padding-bottom:6px;
}

/* 特集リンク */
#peep004 .mContents .hdr {
	width:328px;
	height:2px;
	font-size:0;
	background:url(../images/vol004/bg_contents_hdr.gif) no-repeat 0 0;
}
#peep004 .mContents .ftr {
	width:328px;
	height:2px;
	font-size:0;
	background:url(../images/vol004/bg_contents_ftr.gif) no-repeat 0 0;
}
#peep004 .mContents .mContentsA {
	padding:8px 10px;
	background:#ECECEC;
}
#peep004 .mContents .mContentsA p.readMore {
	text-align:right;
	margin-top:15px;
}

/* その他の商品 */
#peep004 .mContents .mContentsB {
	margin:10px 0 0;
}
#peep004 .mContents .mContentsB h5 {
	float:left;
	width:77px;
	padding:1px 0;
}
#peep004 .mContents .mContentsB .linkArea {
	float:right;
	width:237px;
}

/* リンクアイコン */
#peep004 .mContents ul li {
	min-height:15px;
	.height:15px;
	font-size:12px;
	letter-spacing:0.05em;
	background:url(../images/vol004/ico_link.gif) no-repeat 2px 2px;
	padding-left:22px;
}
#peep004 .mContents ul li a {
	color:#000;
	text-decoration:none;
}
#peep004 .mContents ul li a:hover {
	text-decoration:underline;
}


/*==================================================
【#003】peeping Vincent Gallo　@2009.07.21up
==================================================*/
#peep003 {
	width:860px;
	background:#fff;
}

#peep003 h2 {
	margin:0;
}

/*
リード
--------------------------------------------------*/
#peep003 #lead {
	margin-left:30px;
}

#peep003 #lead p {
	padding:19px 0 19px 16px;
	background:#4A4535;
}

/*
タイトル・ページ誘導
--------------------------------------------------*/
/*
1ページ目
-------------------------*/
#peep003 #titleAreaA {
	position:relative;
}
#peep003 #titleAreaA h3 {
	margin:27px 0 0 30px;
}
#peep003 #titleAreaA p {
	position:absolute;
	top:-79px;
	.top:-52px;
	left:750px;
}

/*
2ページ目
-------------------------*/
#peep003 #titleAreaB {
	margin:30px 0 0;
}
#peep003 #titleAreaB h3 {
	float:left;
	width:169px;
	margin:4px 0 0 30px;
}
#peep003 #titleAreaB p {
	float:right;
	width:223px;
}

/*
テキストエリア
--------------------------------------------------*/
/*
1・2ページ共通
-------------------------*/
#peep003 #textAreaA,
#peep003 #textAreaB {
	width:800px;
	margin:12px 30px 0;
}

/*
1ページ目
-------------------------*/
#peep003 #textAreaA .qa {
	background:url(../../common/images/line/line_dot_a04.gif) repeat-x 0 0;
}

/* Q&A訳 */
#peep003 #textAreaA .qa dl {
	float:left;
	width:430px;
}
#peep003 #textAreaA .qa dl dt {
	line-height:1.8;
	letter-spacing:0.1em;
	padding-top:12px;
}
#peep003 #textAreaA .qa dl dd {
	line-height:1.8;
	letter-spacing:0.1em;
	padding:18px 0 10px;
}

/* Q&A手描き */
#peep003 #textAreaA .qa div {
	float:right;
	width:360px;
}
#peep003 #textAreaA .qa div#qa1 img { margin:22px 0 0 57px; }
#peep003 #textAreaA .qa div#qa2 img { margin:12px 0 0; }
#peep003 #textAreaA .qa div#qa3 img { margin:12px 0 0 20px; }
#peep003 #textAreaA .qa div#qa4 img { margin:22px 0 0 148px; }
#peep003 #textAreaA .qa div#qa5 img { margin:18px 0 0 68px; }
#peep003 #textAreaA .qa div#qa6 img { margin:12px 0 0 4px; }
#peep003 #textAreaA .qa div#qa7 img { margin:18px 0 0 51px; }
#peep003 #textAreaA .qa div#qa8 img { margin:18px 0 0 22px; }

#peep003 #textAreaA .qa div img {
	padding-bottom:12px;
}

/*
2ページ目
-------------------------*/
#peep003 #textAreaB .list {
	background:url(../../common/images/line/line_dot_a04.gif) repeat-x 0 0;
}

/* 音楽エリア */
#peep003 #textAreaB .list .music {
	float:left;
	width:375px;
	padding-top:10px;
}

/* 音楽エリア　番号 */
#peep003 #textAreaB .list .music .musicNumber {
	float:left;
	width:38px;
}

/* 音楽エリア　タイトル */
#peep003 #textAreaB .list .music .musicTitle {
	float:right;
	width:337px;
}
#peep003 #textAreaB .list .music .musicTitle p {
	margin-top:5px;
}
#peep003 #textAreaB .list .music .musicTitle div img {
	margin:5px 10px 10px 0;
}

/* コメント手描き */
#peep003 #textAreaB .list .comment {
	float:right;
	width:425px;
}
#peep003 #textAreaB div#comment1 img { margin:10px 0 0 97px; }
#peep003 #textAreaB div#comment2 img { margin:10px 0 0 37px; }
#peep003 #textAreaB div#comment3 img { margin:10px 0 0 67px; }
#peep003 #textAreaB div#comment4 img { margin:10px 0 0 47px; }
#peep003 #textAreaB div#comment5 img { margin:10px 0 0 67px; }
#peep003 #textAreaB div#comment6 img { margin:10px 0 0 50px; }
#peep003 #textAreaB div#comment7 img { margin:10px 0 0 147px; }
#peep003 #textAreaB div#comment8 img { margin:10px 0 0 77px; }
#peep003 #textAreaB div#comment9 img { margin:10px 0 0 109px; }
#peep003 #textAreaB div#comment10 img { margin:10px 0 0 72px; }
#peep003 #textAreaB div#comment11 img { margin:10px 0 0 107px; }
#peep003 #textAreaB div#comment12 img { margin:10px 0 0 119px; }
#peep003 #textAreaB div#comment13 img { margin:10px 0 0 61px; }
#peep003 #textAreaB div#comment14 img { margin:10px 0 0 81px; }
#peep003 #textAreaB div#comment15 img { margin:10px 0 0 61px; }
#peep003 #textAreaB div#comment16 img { margin:10px 0 0 127px; }
#peep003 #textAreaB div#comment17 img { margin:10px 0 0 90px; }
#peep003 #textAreaB div#comment18 img { margin:10px 0 0 47px; }
#peep003 #textAreaB div#comment19 img { margin:10px 0 0 77px; }
#peep003 #textAreaB div#comment20 img { margin:10px 0 0 100px; }

#peep003 #textAreaB .comment p {
	text-align:center;
	font-size:10px;
	letter-spacing:0.03em;
	padding-top:8px;
	padding-bottom:8px;
}

/*
PROFILE
--------------------------------------------------*/
#peep003 #profile {
	margin:30px 0 0;
	padding:15px 15px 10px 30px;
	background:#4c4c4c;
}

/*「PROFILE」*/
#peep003 #profile h3 {
	float:left;
	width:70px;
}

/* PROFILEテキスト */
#peep003 #profile .textArea {
	float:right;
	width:715px;
}
#peep003 #profile .textArea p {
	color:#fff;
	font-size:10px;
	line-height:1.8;
	letter-spacing:0.1em;
}
#peep003 #profile .textArea p span {
	font-size:12px;
	font-weight:bold;
}
#peep003 #profile .textArea p.guideLink {
	text-align:right;
	margin-top:5px;
}
#peep003 #profile .textArea p.guideLink a {
	color:#fff;
	text-decoration:underline;
}
#peep003 #profile .textArea p.guideLink a:hover {
	text-decoration:none;
}



/*==================================================
【#001＋α】PEEPING PEEP　@2009.07.10up
==================================================*/
#peep001a {
	width:860px;
	background:#000;
}

#peep001a h2 {
	margin:0;
}

#peep001aWrap {
	margin:0 30px;
	padding:20px 20px 0;
	background:#fff;
}

/*
テキストエリア
--------------------------------------------------*/
#peep001a #textArea {
	float:left;
	width:505px;
}

#peep001a #textArea h3 {
	border-bottom:1px solid #000;
	margin-top:25px;
	padding-bottom:7px;
}
#peep001a #textArea h3.top {
	margin:0;
}

#peep001a #textArea p {
	line-height:1.8;
	letter-spacing:0.1em;
	margin-top:15px;
}

/*
喜びの声
-------------------------*/
#peep001a #textArea #voice h4 {
	background:url(../../common/images/line/line_dot_a04.gif) repeat-x 0 100%;
	margin-top:25px;
	padding-bottom:7px;
}

#peep001a #textArea #voice p {
	background:url(../../common/images/line/line_dot_a04.gif) repeat-x 0 100%;
	margin-top:10px;
	padding-bottom:10px;
}
#peep001a #textArea #voice p.extra {
	background-image:none;
	padding-bottom:0;
}

/*
ページ誘導
-------------------------*/
#peep001a #textArea .pageGuideA {
	border-bottom:1px solid #000;
	margin:10px 0 0;
	padding-bottom:15px;
}

#peep001a #textArea .pageGuideB {
	background:url(../../common/images/line/line_dot_a04.gif) repeat-x 0 0;
	padding:15px 0 25px;
	margin:15px 0 0;
}

/*2009.07.13@TC*/
#peep001a #textArea .pageGuideA .title {
	float:left;
	width:205px;
}

#peep001a #textArea .pageGuideA h5 {
	/*float:left;2009.07.13@TC削除*/
	/*width:205px;2009.07.13@TC削除*/
	font-weight:normal;
	margin-top:5px;
}

#peep001a #textArea .pageGuideA ul {
	float:right;
	width:300px;
}
#peep001a #textArea .pageGuideA ul li,
#peep001a #textArea .pageGuideB ul li {
	text-align:right;
	padding-bottom:10px;
}
#peep001a #textArea .pageGuideA ul li img,
#peep001a #textArea .pageGuideB ul li img {
	vertical-align:middle;
}


/*
サイドエリア
--------------------------------------------------*/
#peep001a #sideArea {
	float:right;
	width:228px;
}

/*
写真/movie
-------------------------*/
#peep001a #sideArea #photo div,
#peep001a #sideArea #movie {
	margin:15px 0 0;
}
#peep001a #sideArea #photo div.top {
	margin:0;
}

#peep001a #sideArea #photo p,
#peep001a #sideArea #movie p {
	font-size:10px;
	line-height:1.4;
	letter-spacing:0.1em;
	margin-top:3px;
}



/*==================================================
R31 @2009.03
==================================================*/
#r31 {
	background:#BD2510;
}

#r31 h2 {
	margin:0;
}

#r31 p.notice {
	font-size:10px;
	/*text-align:right;削除2009.03.04@TC*/
	/*padding-right:30px;削除2009.03.04@TC*/
	padding-left:20px;/*追加2009.03.04@TC*/
}

#r31 .message {
	background:#fff url(../images/vol002/bg_bdr_mdl.gif) repeat-y 0 0;
	margin:8px 18px 0 20px;
}

#r31 .hdr { background:#fff url(../images/vol002/bg_bdr_hdr.gif) no-repeat 0 0; height:5px; font-size:0; }
#r31 .ftr { background:#fff url(../images/vol002/bg_bdr_ftr.gif) no-repeat 0 0; height:7px; font-size:0; }

/*
サムネイルあり
--------------------------------------------------*/
/*
サムネイル
-------------------------*/
#r31 .messageB .thumbnailA01 {
	float:left;
	width:115px;
	color:#999;
	font-size:10px;
	margin:8px 0 0;
	padding:0 0 0 13px;
}
#r31 .messageB .thumbnailA01 img {
	margin-bottom:5px;
}

/*
人名・Q
-------------------------*/
#r31 .messageB .text {
	float:right;
	width:680px;
	margin:8px 0 0;
}

/* 人名・番号 */
#r31 .messageB .text .num {
	float:right;
	width:40px;
	padding:0 14px 0 0;
}
#r31 .messageB .text .h3 {
	float:left;
	width:640px;
}

/* Q */
#r31 .message .text dl {
	clear:both;
	margin:12px 0 0;
}
#r31 .message .text dl div.set {
	border-bottom:1px solid #BD2510;
	margin:0 5px 0 0;
	padding:5px 0;
}
#r31 .message .text dl div.extraBorder {
	border:none;
	margin:0 5px 0 0;
	padding:5px 0;
}
#r31 .message .text dl dt {
	clear:left;
	float:left;
	width:30px;
	background:#369;
}
#r31 .message .text dl dd {
	float:left;
	width:635px;
	line-height:1.4;
}
#r31 .message .text dl dd div {
	float:left;
	width:440px;
	font-weight:bold;
	line-height:1.4;
}
#r31 .message .text dl dd div span {
	line-height:1.4;/*2009.03.03@TC*/
	font-weight:normal;
}
#r31 .message .text dl dd p.guideBuy {
	float:right;
	width:180px;
	text-align:right;
}
#r31 .message .text dl dd p.guideBuy img {
	padding-left:10px;
}

/* siteURL */
#r31 .message .text p.site {
	text-align:right;
	padding:5px 15px 2px 0;
}
#r31 .message .text p.site a {
	text-decoration:none;
}
#r31 .message .text p.site a:hover {
	text-decoration:underline;
}


/*
サムネイルなし
--------------------------------------------------*/
/*
サムネイル
-------------------------*/
#r31 .messageB .thumbnailA01 {
	float:left;
	width:115px;
	margin:8px 0 0;
	padding:0 0 0 13px;
}

/*
人名・Q
-------------------------*/
#r31 .messageA .text {
	width:795px;
	margin:8px 0 0;
	padding:0 14px 0 13px;
}

/* 人名・番号 */
#r31 .messageA .text .num {
	float:right;
	width:40px;
}
#r31 .messageA .text .h3 {
	float:left;
	width:768px;
}

#r31 .messageA .text dl div.set {
	margin:0;
}

#r31 .messageA .text dl dd {
	width:760px;
}

#r31 .messageA .text dl dd div {
	width:565px;
}

/* siteURL */
#r31 .messageA .text p.site {
	padding:5px 10px 2px 0;
}

