﻿@charset "utf-8";

/* CSS Information ==============================
File name: base.css
Editors: naoko inoue,shinji kobayashi
Last Editor: shinji kobayashi
Date: 2010.4.12
TOC:
+signature+
		+top-page+
				+lead-contents+
				+key-contents+
				+main-area+
				+recommend-area+
				+products-contents+
				+supporters-area+
============================================== */

/*====================
 +signature+
====================*/

/*
 +top-page+
====================*/

/* +lead-contents+ */
.lead-contents {
	position: relative;
	margin: 0 0 20px 0;
	}
.lead-contents .main-area div.floating-image {
	position: absolute;
	top: 153px;
	}
.sale-area1,
.sale-area2 {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 250px;
	height: 240px;
	padding: 20px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	}
.sale-area1 {
	background: #fc0;
	}
.sale-area2 {
	background: #9c0;
	}
.sale-area1 h2 {
	height: 42px;
	/*padding-left: 87px;
	background: url(../img/top/recommend-title-bg.gif) left center no-repeat;*/
}
.sale-area1 .off {
	padding: 5px;
	background: #333333;
	color: #fff;
}
.sale-area1 p,
.sale-area2 p {
	margin: 10px 0 0;
	}
.sale-area1 .figure,
.sale-area2 .figure {
	position: relative;
	height: 110px;
	}
.sale-area1 .figure img,
.sale-area2 .figure img {
	border: 0 none;
	}
.sale-area1 .figure .caption,
.sale-area2 .figure .caption {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 240px;
	padding: 5px;
	background: #666;
	background: rgba(0,0,0,0.8);
	color: #fff;
	font-size: 85.7%;
	text-align: right;
	}
.sale-area1.bl-hover,
.sale-area2.bl-hover {
	background: #f60;
	color: #fff;
	opacity: 1.0 !important;
	filter: alpha(opacity=100) !important;
	}
.sale-area1 .bl-hover {
	background: #f60;
	}
.sale-area2 .bl-hover {
	background: #0c3;
	}
.lead-contents .figure {
	width: auto;
	}

/* +key-contents+ */
#key-contents {
	margin: 0 0 30px 0;
	}

/* +main-area+ */
#key-contents .main-area {
	float: left;
	width: 564px;
	}
#key-contents .main-area ul {
	margin: 10px 0 0 0;
	}
#key-contents .main-area li {
	display: inline;
	padding: 0 5px 0 0;
	}
#key-contents .main-area .section {
	margin: 40px 0 10px;
	}
#key-contents .main-area div.first-child {
	min-height: 169px;
	padding: 0 0 0 111px;
	background: url(../img/top/bg_main-area01.jpg) left top no-repeat;
	}
#key-contents .main-area div.first-child p {
	padding: 6px 0 0 23px;
	}
#key-contents .main-area div.first-child ul {
	text-align: right;
	}
#key-contents .main-area div.last-child {
	padding: 0 0 0 78px;
	background: url(../img/top/bg_main-area02.jpg) left top no-repeat;
	}
#key-contents .main-area div.last-child p {
	padding: 6px 0 0 3px;
	}
#twitter-wrapper {
	float: right;
	width: 280px;
	padding: 10px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: #fff;
	font-size: 85.8%;
	}
#twitter-wrapper h2 {
	color: #3676bb;
	font-size: 116.7%;
	}
#twitter-wrapper li {
	margin: 10px 0 0;
	padding: 10px 0 0;
	border-top: 2px dotted #999;
	}
#twitter-area .tweet_avatar {
	display: block;
	float: left;
	}
#twitter-area .tweet_join {
	display: none;
	}
#twitter-area .tweet_time,
#twitter-area .tweet_text {
	display: block;
	margin: 0 0 0 56px;
	}
#twitter-wrapper p {
	margin: 10px 0 0;
	padding: 10px 0 0;
	border-top: 2px dotted #999;
	text-align: right;
	}

/* +recommend-area+ */
#key-contents .recommend-area {
	float: right;
	width: 264px;
	padding: 14px 18px;
	background: #fff;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	}
#key-contents .recommend-area h3 {
	margin: 0 0 14px 0;
	}
#key-contents .recommend-area li {
	margin: 10px 0 0 0;
	cursor: pointer;
	}
#key-contents .recommend-area p.visual {
	float: left;
	width: 120px;
	}
#key-contents .recommend-area dl {
	float: right;
	width: 135px;
	}
#key-contents .recommend-area dl dt img {
	display: block;
	}
#key-contents .recommend-area dl dd {
	text-align: right;
	}

/* +supporters-area+ */
#supporters-area {
	position: relative;
	margin: 65px 0 0 0;
	padding: 20px;
	border: 3px solid #fff;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	}
#supporters-area h2 img {
	position: absolute;
	top: -39px;
	left: 293px;
	width: 311px;
	}
#supporters-area .column {
	position: relative;
	float: left;
	width: 280px;
	margin: 0 18px 0 0;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #fff;
	}
#supporters-area .column .construction {
	position: absolute;
	top: 30px;
	left: 15px;
	}
#supporters-area #gyokaiseikatsu .credit {
	position: absolute;
	top: 0;
	left: 0;
	width: 256px;
	padding: 8px 12px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius: 5px 5px 0 0;
	background: #666;
	background: rgba(0,0,0,0.6);
	color: #fff;
	font-size: 85.8%;
	text-align: right;
	}
#supporters-area #gyokaiseikatsu,
#supporters-area #ryoushi-interview {
	padding: 194px 0 0;
	}
#supporters-area #gyokaiseikatsu {
	background: #009DC3 url(/shared/img/top/bg_gyokaiseikatsu.jpg) left top no-repeat;
	}
#supporters-area #ryoushi-interview {
	background: #009DC3 url(/shared/img/top/bg_ryoushi.jpg) left top no-repeat;
	}
#supporters-area .column-head {
	margin: -86px 0 0;
	padding: 12px 0 12px 16px;
	background: #666;
	background: rgba(0,0,0,0.6);
	color: #fff;
	}
#supporters-area .column-head h3 {
	margin: 0 0 12px;
	}
.recent-entry {
	padding: 10px;
	font-size: 85.8%;
	}
.recent-entry a {
	color: #fff;
	}
.recent-entry a:hover,
.recent-entry a:focus,
.recent-entry a:active {
	color: #ff6;
	text-decoration: none;
	}
.recent-entry img {
	float: left;
	border: 2px solid #515151;
	}
.recent-entry h4,
.recent-entry p {
	margin: 0 0 0 114px;
	}
#supporters-area div.column#pitipiti-musume {
	width: 216px;
	margin-right: 0;
	padding: 14px 20px 19px;
	background: url(../img/top/bg_musume.gif) left top no-repeat;
	}
#pitipiti-musume p {
	margin: 18px 0 0;
	}
#pitipiti-musume .link {
	margin: 35px 0 0;
	text-align: center;
	}

/*
 +window+
====================*/
#window {
	width: 660px;
	margin: 15px auto;
	padding: 20px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: #fff;
	}
#window .section-lv1 {
	margin-top: 0;
	}

/*====================
 +clearfix+
====================*/
#key-contents .main-area:after,
.recent-entry:after {
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
	content: ".";
	}

* html #key-contents .main-area,
* html .recent-entry {
	zoom: 1;
	}
*:first-child+html #key-contents .main-area,
*:first-child+html .recent-entry {
	zoom: 1;
	}

