/*
     FILE ARCHIVED ON 4:58:52 1 20, 2013 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 8:35:47 12 17, 2013.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
@charset "UTF-8";
@import url(common.css);


/* -----------------------------------------------
CSS INFO


 File name:      layout.css
 Site name:		 miil
 Author:         Kazu [Minimal Design]
 Style Info:     パーツごとのCSS設定
 last update:    2012.07.05


1.index
2.inner common
3.プライバシー等
4.お問い合わせ
5.single page
6.よくある質問
7.おすすめユーザー一覧
8.4コマ漫画


clearfix

----------------------------------------------- */



/* ============================================================================================

	1.index

============================================================================================ */
.ranking {
	width:606px;
	background: url(../images/bg_rank.png) 0 bottom no-repeat;
	float:left;
}

.ranking .ttl_rank span {
	background:url(../images/bg_ranking.png) right 0 no-repeat;
	padding-right:135px;
	width:260px;
	font-size:16px;
	font-weight:700;
	color:#fff;
}

.ranking .data {
	text-align:right;
	padding-right:16px;
}

.ranking .inner_rank {
	padding:25px 0 0;
}

.ranking .rank_box {
	position:relative;
	float:left;
	width:167px;
	height:253px;
	margin:0 0 0 25px;
}

:first-child+html .ranking .rank_box {
	height:231px;
}

.ranking .rank_box .bg {
	background:url(../images/bg_photo.png) 0 0 no-repeat;
	width:167px;
	height:231px;
}

.ranking .rank_box .icon_rank {
	position:absolute;
	top:-18px;
	left:6px;
}

.ranking .rank_box .tape {
	position:absolute;
	top:-10px;
	left:59px;
}

.ranking .rank_box .photo {
	padding:5px 0 0 7px;
	margin:0;
}

.ranking .rank_box .person {
	overflow:hidden;
	margin:0 0 0 8px;
}

.ranking .rank_box .person .photo {
	border:1px solid #C3C3C3;
	background-color:#fff;
	width:46px;
	float:left;
	padding:2px;
}

.ranking .rank_box .person .name {
	float:right;
	width:90px;
	margin:0 7px 0 0;
}

.ranking .rank_box .person .name .rank_name {
	font-weight:700;
	word-wrap:break-word;
	line-height:1.2em;
	margin-bottom:3px;
}

.ranking .rank_box .person .name .like {
	background:url(../images/icon_heart.png) 0 2px no-repeat;
	padding:0 0 0 18px;
}

.ranking .btn_change {
	text-align:right;
	padding:10px 16px 15px 0;
}



.img_iphone{float:right;width:228px;margin:10px 40px 0 0;}
.img_iphone .iphone{width:228px;height:506px;position: relative;background: url(../images/img_iphone.png) 0 0 no-repeat;}
.img_iphone .iphone .thumbnail{width:189px;overflow: hidden;height:284px;position: absolute;top:78px;left:19px;}
.img_iphone .iphone .thumbnail ul{width:1000px;position: relative;}
.img_iphone .iphone .thumbnail li{position: absolute;top:0;}
.img_iphone .iphone .thumbnail .img01{left:0;}
.img_iphone .iphone .thumbnail .img02{left:189px;}
.img_iphone .iphone .thumbnail .img03{left:378px;}
.img_iphone .iphone .thumbnail .img04{left:567px;}
.img_iphone .btn_app{text-align:center;margin:10px 0 0;}





.enjoyArea {
	width:auto;
	clear:both;
	padding:40px 0;
}

.enjoyArea li {
	float:left;
	padding:0 5px;
}

.mangaArea {
	width:630px;
	height:264px;
	background:url(../images/bg_4coma.png) 0 0 no-repeat;
	float:left;
	position:relative;
}

.mangaArea a {
	width:302px;
	height:0;
	background:url(../images/btn_4coma.png) no-repeat 0 0;
	display:block;
	overflow:hidden;
	position:absolute;
	top:187px;
	left:235px;
	padding-top:52px;
}

.mangaArea a:hover {
	background-position:0 -52px;
}


.enjoyArea h2,
.recommendUserArea h2,
.newsArea h2 {
	clear:both;
	margin-bottom:20px;
}


.newsArea {
	width:auto;
	clear:both;
	padding:0 0 40px 0;
}

.newsArea article {
	width:913px;
	height:auto;
	background:url(../images/bg_news_top.png) 0 0 no-repeat;
	position:relative;
	padding-top:26px;
	margin-left:26px;
}

.newsArea article dl {
	width:853px;
	height:auto;
	background:url(../images/bg_news.png) left bottom no-repeat;
	position:relative;
	padding:24px 100px 40px 100px;
}


.newsArea article dt {
	width:86px;
	background:url(../images/icon_news.png) 0 2px no-repeat;
	float:left;
	clear:both;
	padding:0 0 15px 14px;
}

.newsArea article dd {
	width:auto;
	margin-left:100px;
	padding:0 110px 15px 0;
}


.newsArea aside {
	width:auto;
	clear:both;
}

.newsArea aside h3 {
	width:533px;
	height:95px;
	margin:0 auto;
}

.newsArea aside h3 a {
	width:533px;
	height:0;
	background:url(../images/btn_blog.png) no-repeat 0 0;
	display:block;
	overflow:hidden;
	padding-top:95px;
}

.newsArea aside h3 a:hover {
	background-position:0 -95px;
}



.recommendUserArea {
	width:960px;
	padding:0 0 40px 0;
}


.recommendUserArea dl {
	width:150px;
	height:222px;
	background:url(../images/bg_user2.png) no-repeat 0 0;
	font-size:14px;
	float:left;
	padding:10px 9px 0 11px;
	margin:0 10px 20px 10px;
}

.recommendUserArea dd h3 {
	font-weight:bold;
	margin-bottom:5px;
}



a.moreBtn {
	width:95px;
	height:0;
	background:url(../images/btn_more2.jpg) no-repeat 0 0;
	display:block;
	overflow:hidden;
	clear:both;
	padding-top:27px;
	margin-left:865px;
}

a.moreBtn:hover {
	opacity:0.7;
	filter: alpha(opacity=70);
}



.indexBnrArea {
	width:auto;
	height:100px;
	clear:both;
	padding:40px 0 0 0;
}

.indexBnrArea li {
	float:left;
	padding:0 10px;
}

.indexBnrArea li a:hover img {
	opacity:0.8;
	filter: alpha(opacity=80);
}




/* ============================================================================================

	2.inner common

============================================================================================ */
.contactWrapper #container,
.termsWrapper #container,
.privacyWrapper #container,
.faqWrapper #container,
.guideWrapper #container,
.newsWrapper #container,
.singleWrapper #container,
.userWrapper #container {
	padding-top:20px;
}


.contactWrapper #container h2,
.termsWrapper #container h2,
.privacyWrapper #container h2,
.faqWrapper #container h2,
.guideWrapper #container h2,
.newsWrapper #container h2,
.mangaWrapper #container h2,
.mangaSingleWrapper #container h2,
.contentTtl {
	width:915px;
	height:34px;
	background:url(../images/ttl_04.jpg) 0 0 no-repeat;
	font-size:18px;
	color:#FFF;
	padding:13px 0 0 50px;
	margin-bottom:20px;
}

.contentTtl {
	background:url(../images/ttl_07.jpg) 0 0 no-repeat;
}



/* ============================================================================================

	3.プライバシー等

============================================================================================ */
.termsWrapper #container h3,
.privacyWrapper #container h3 {
	font-size:14px;
	font-weight:bold;
	margin-bottom:5px;
}

.termsWrapper ol {
	margin:0 0 10px 30px;
}

.termsWrapper ol li {
	margin-bottom:5px;
}






/* ============================================================================================

	4.お問い合わせ

============================================================================================ */
.contactWrapper #container dl {
	width:auto;
	padding:15px;
}

.contactWrapper #container dt {
	width:auto;
	font-weight:bold;
	margin-bottom:3px;
}

.contactWrapper #container dd {
	width:auto;
	line-height:150%;
	margin-bottom:20px;
}


.contactWrapper #container dd input,
.contactWrapper #container dd textarea,
p.submitBtn input {
	border:1px solid #CCC;
	background:#fff;
	background:-webkit-gradient(linear, left top, left 25, from(#fff), color-stop(6%, #eee), to(#fff));
	background:-moz-linear-gradient(top, #fff, #eee 2px, #fff 25px);
	box-shadow:rgba(0,0,0, 0.1) 0px 0px 3px;
	-moz-box-shadow:rgba(0,0,0, 0.1) 0px 0px 3px;
	-webkit-box-shadow:rgba(0,0,0, 0.1) 0px 0px 3px;
	padding:5px;
}

.contactWrapper #container dd input {
	width:300px;
}

.contactWrapper #container dd textarea {
	width:500px;
	height:70px;
	margin-bottom:5px;
}

.contactWrapper #container p.submitBtn input {
	width:150px;
	cursor:pointer;
}

p.submitBtn input:hover {
	background:#fff;
	background:-webkit-gradient(linear, left top, left 25, from(#eee), color-stop(6%, #fff), to(#eee));
	background:-moz-linear-gradient(top, #eee, #fff 2px, #eee 25px);
}

.contactWrapper #container dd input:focus,
.contactWrapper #container dd textarea:focus,
p.submitBtn  input:focus {
	background:#fff;
}


.contactWrapper #container dd.shortW input {
	width:50px;
}

.contactWrapper #container dd.notW input {
	width:auto;
}

.contactWrapper #container span {
	color:#F00;
}



.wpcf7-list-item,
.wpcf7-list-item-label {
	padding-right:10px;
}

.brLabel .wpcf7-list-item {
	display:block;
	margin-bottom:5px;
}





/* ============================================================================================

	5.single page

============================================================================================ */
.singleWrapper #container article {
	width:690px;
	float:left;
	padding-bottom:50px;
}

#sideNavArea {
	width:250px;
	float:right;
	padding-bottom:50px;
}

.singleWrapper #container article h2 {
	width:640px;
	height:34px;
	background:url(../images/ttl_06.jpg) 0 0 no-repeat;
	font-size:18px;
	color:#FFF;
	padding:13px 0 0 50px;
	margin-bottom:20px;
}

#sideNavArea h2 {
	width:200px;
	height:34px;
	background:url(../images/ttl_05.jpg) 0 0 no-repeat;
	font-size:18px;
	color:#FFF;
	padding:13px 0 0 50px;
	margin-bottom:20px;
}



#sideNavArea li {
	width:auto;
	border-bottom:1px dashed #999999;
	padding:0 5px 10px 5px;
	margin-bottom:10px;
}

.singleWrapper #container article section {
	font-size:14px;
	line-height:160%;
}






/* ============================================================================================

	6.よくある質問

============================================================================================ */
.faqWrapper #container article {
	font-size:16px;
}

.faqWrapper h3 {
	width:auto;
	background:url(../images/ico_heart2.jpg) 0 0 no-repeat;
	font-size:16px;
	font-weight:bold;
	padding:0 0 0 25px;
	margin-bottom:5px;
}

.faqWrapper h3.ttlQh3 {
	background:url(../images/ico_q.jpg) 0 0 no-repeat;
}


.faqAnsArea,
.accordion li {
	width:auto;
	background:url(../images/bg_faq.jpg) repeat 0 0;
	padding:20px 20px 5px 20px;
	margin-bottom:40px;
}

.accordion h4 {
	width:auto;
	background:url(../images/ico_q2.jpg) 0 0 no-repeat;
	padding:0 0 7px 25px;
}

.accordion .active h4 a {
	text-decoration:none;
}

.accordion .panel {
	width:auto;
	line-height:160%;
	padding:0 0 20px 13px;
}



.faqBtnArea a {
	width:500px;
	height:0;
	background:url(../images/btn_faq.jpg) 0 0 no-repeat;
	display:block;
	overflow:hidden;
	padding-top:70px;
	margin:0 auto;
}

.faqBtnArea a:hover {
	opacity:0.8;
	filter: alpha(opacity=80);
}



/* ============================================================================================

	7.おすすめユーザー一覧

============================================================================================ */
.userWrapper #container dl {
	width:460px;
	height:150px;
	background:url(../images/bg_user01.jpg) repeat 0 0;
}





/* ============================================================================================

	8.4コマ漫画

============================================================================================ */
.mangaWrapper article ul {
	width:auto;
	margin-left:-15px;
}

.mangaWrapper article li {
	width:180px;
	float:left;
	padding:0 0 30px 15px;
}

.mangaBtn01 a,
.mangaBtn02 a,
.mangaBtn03 a,
.mangaBtn04 a,
.mangaBtn05 a,
.mangaBtn06 a,
.mangaBtn07 a,
.mangaBtn08 a,
.mangaBtn09 a,
.mangaBtn10 a {
	width:180px;
	height:0;
	background:url(../images/btn_manga.jpg) no-repeat;
	display:block;
	overflow:hidden;
	padding-top:161px;
	margin-bottom:5px;
}
.mangaBtn01 a {
	background-position:0 0;
}
.mangaBtn02 a {
	background-position:-180px 0;
}
.mangaBtn03 a {
	background-position:-360px 0;
}
.mangaBtn04 a {
	background-position:-540px 0;
}
.mangaBtn05 a {
	background-position:-720px 0;
}
.mangaBtn06 a {
	background-position:-900px 0;
}
.mangaBtn07 a {
	background-position:-1080px 0;
}
.mangaBtn08 a {
	background-position:-1260px 0;
}
.mangaBtn09 a {
	background-position:-1440px 0;
}
.mangaBtn10 a {
	background-position:-1620px 0;
}

.mangaBtn01 a:hover {
	background-position:0 -161px;
}
.mangaBtn02 a:hover {
	background-position:-180px -161px;
}
.mangaBtn03 a:hover {
	background-position:-360px -161px;
}
.mangaBtn04 a:hover {
	background-position:-540px -161px;
}
.mangaBtn05 a:hover {
	background-position:-720px -161px;
}
.mangaBtn06 a:hover {
	background-position:-900px -161px;
}
.mangaBtn07 a:hover {
	background-position:-1080px -161px;
}
.mangaBtn08 a:hover {
	background-position:-1260px -161px;;
}
.mangaBtn09 a:hover {
	background-position:-1440px -161px;
}
.mangaBtn10 a:hover {
	background-position:-1620px -161px;
}


.mangaWrapper article li span {
	font-size:16px;
	background:url(../images/ico_heart2.jpg) no-repeat 0 0;
	padding:0 0 0 25px;
}





.leftImageArea {
	width:600px;
	float:left;
}

.rightTxtArea {
	width:344px;
	font-size:18px;
	line-height:160%;
	float:right;
	padding:145px 0 0 0;
}

.rightTxtArea p {
	margin-bottom:2em;
}

.rightAppDlArea {
	width:auto;
	padding:50px 0 0 0;
}

.rightAppDlArea ul {
	width:322px;
	height:58px;
	background:url(../images/bg_app.png) no-repeat 0 0;
	padding:46px 0 0 22px;
}

.rightAppDlArea ul li {
	float:left;
	padding:0 15px;
}



.pageNavArea {
	width:auto;
	clear:both;
	font-size:18px;
	position:relative;
	padding:40px 0 0 0;
}

.nextPage {
	float:right;
}

.prevPage {
	float:left;
}

.backToArchive {
	width:100px;
	text-align:center;
	position:absolute;
	top:40px;
	left:420px;
}



/* ============================================================================================

	clearfix

============================================================================================ */
#container:after,
.enjoyArea:after,
.recommendUserArea:after {
	content: ".";
	display: block;
	visibility: hidden;
	height: 0.1px;
	font-size: 0.1em;
	line-height: 0;
	clear: both;
}

#container,
.enjoyArea,
.recommendUserArea {
	zoom:100%;
}

* html #container,
* html .enjoyArea,
* html .recommendUserArea {
	height:1%;
}