@charset "utf-8";

/******************************************************************
 * ベース
 *****************************************************************/

html {
	font-size: 100%;
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%; 
	-ms-text-size-adjust: 100%; 
}

body,
button,
input,
select,
textarea {
	font-family:Verdana,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}

/* Micro clearfix */

.cf { zoom: 1; }
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }

/* 必要要素の初期設定 */

html {
	 font-size: 62.5%;
}

/* IE7のpadding設定 */
*:first-child+html body {
	padding-left: 1px;
}
 
/* IE6のpadding設定 */
*html body {
	padding-left: 1px;
}

body {
	font-size:15px;
	font-size: 1.5rem;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	padding: 0;
	color:#333;
	background-color: #FFF;
}

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
	margin:0;
	line-height: normal;
	letter-spacing:-1px;
	font-weight:normal;
}
p {
	text-align:left;
	margin:0 0 25px;
	line-height:2.0;
}

img {border:0;}

ul,
ol {
  list-style: none;
  list-style-image: none;
  word-spacing: -1em;
  display: table;
  margin-left: 0;
  padding: 0;
}

dd {
  margin: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* リンク */

a {
	color: #0000FF;
	text-decoration: none;
	cursor:pointer;
}

a:focus {
  outline: thin dotted;
	color: #CC0000;
	text-decoration: none;
}

a:hover,
a:active {
  outline: 0;
	color: #CC0000;
	text-decoration: none;
}

.linkOver:hover {
	opacity:0.8;
	filter:alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";
}


/******************************************************************
 * ヘッダー
 *****************************************************************/



#headerNavi{
	width: 35%;
    position: fixed;
	top:-6px;
	right:3px;
    z-index: 10000;
	margin:0 auto;
	width:106px;
	height:49px;
}
#toggle{
}
#toggle a{
	display: block;
	position: relative;
	color: #fff;
	text-align: left;
	text-decoration: none;
}
#toggle a img{
}
#toggle:before{
	display: block;
	content: "";
	position: absolute;
    z-index: 10000;
	top: 50%;
	right:0;
	margin-top: -10px;
	background: #fff;
}
#toggle a:before, #toggle a:after{
	display: block;
	content: "";
	position: absolute;
}
#toggle a:before{
	margin-top: -6px;
}
#toggle a:after{
	margin-top: 2px;
}

#menu{
	display: none;
	position:absolute;
	right:0;
	width: 220px;
	margin: 0 auto;
	padding: 0;
    border-radius: 6px;        /* CSS3草案 */  
    -webkit-border-radius: 6px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 6px;   /* Firefox用 */ 
}
#menu li{
	display: block;
	border-bottom:#dadada 1px solid;
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	opacity:0.97;
	filter:alpha(opacity=97);
	-ms-filter: "alpha( opacity=97 )"
}
#menu li a{
	display: block;
	padding: 13px 0 13px;
	font-size:14px;
	font-size: 1.4rem;
	border-left:#FFF 1px solid;
	border-right:#dfdfdf 1px solid;
	color: #333;
	text-align: center;
	text-decoration: none;
}
#menu li.style1 a{
	background-color: #FFF;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#fbfbfb));
	background-image: -webkit-linear-gradient(#FFF, #fbfbfb);
	background-image: linear-gradient(#FFF, #fbfbfb);
}
#menu li.style2 a{
	background-color: #fefec8;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffe0), to(#fefec8));
	background-image: -webkit-linear-gradient(#ffffe0, #fefec8);
	background-image: linear-gradient(#ffffe0, #fefec8);
	color:#F00;
}
#menu li a:hover{
	background-color: #ffd700;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#fedc23), to(#ffd700));
	background-image: -webkit-linear-gradient(#fedc23, #ffd700);
	background-image: linear-gradient(#fedc23, #ffd700);
}



#WRAP {
	background:url(../img/bg_body.png) repeat-x;
	width: 100%;
}

#headerNavi {
}

#HEADER {
	position:relative;
	width:100%;
	height:210px;
	text-align:center;
	margin:0 auto 25px;
	padding:0;
}

#TITLE {
	position:relative;
	top:50px;
	text-align:center;
	margin:0px auto;
}
#HEADER h1 {
	display:block;
	text-align:center;
	margin:0 auto;
	font-size: 20px;
	font-size: 2.0rem;
	font-weight:bold;
	margin-bottom:18px;
	color:#333;
}
#LOGO a img {
	text-align:center;
	margin:0 auto;
	width:97%;
	height:auto;
}


/******************************************************************
 * メイン
 *****************************************************************/

div.main h2 {
	font-size: 22px;
	font-size: 2.2rem;
	line-height:1.2;
	text-align:left;
	margin: 0 0 15px;
	padding:18px 5px 18px 12px;
	background:#e2e2e2;
	border-left:#6699cc solid 10px;
	font-weight:bold;
}
div.main h3 {
	font-size: 18px;
	font-size: 1.8rem;
	text-align:left;
	margin: 0 0 20px;
	padding:0 0 0 23px;
	background: url(../img/bg_h3.png) no-repeat;
	background-position:10px 50%;
	font-weight:bold;
}

#common-contents {
	width: 96%;
	margin: 0 auto 20px;
	text-align:left;
}
div.main {
	font-size:16px;
	font-size: 1.6rem;
	width: 100%;
	margin: 0 0 25px;
}

.pagetop {
	width: 100%;
}
.pagetop a {
	display:block;
	float:right;
	background:#6699cc;
	color:#FFF;
	text-decoration:none;
	font-size:13px;
	font-size: 1.3rem;
	width: 160px;
	padding:15px 0 15px 10px;
}
.pagetop a:hover, .pagetop a:active, .pagetop a:focus {
	color:#ffff99;
}


#contentsMenu {
	background:#6699cc;
	font-size: 14px;
	font-size: 1.4rem;
	margin-top:15px;
	margin-bottom:15px;
	padding-top:6px;
	padding-bottom:6px;
	text-align: center;
	min-height:38px;
    border-radius: 6px;        /* CSS3草案 */  
    -webkit-border-radius: 6px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 6px;   /* Firefox用 */ 
}
.contentsLink {
	margin:0 10px;
}
.contentsLink ul {
	margin: 0px -10px 0px 0px;
}
.contentsLink ul li {
	margin: 0px 10px 0 0px;
	float:left;
}
.contentsLink ul a {
	display:block;
	text-align:left;
	color:#FFF;
	background: url(../img/bg_contentsmenu.png) no-repeat;
	background-position:0px 50%;
	padding:10px 10px 10px 22px;
	line-height:1.2;
}
.contentsLink ul a:hover, .contentsLink ul a:active, .contentsLink ul a:focus {
	background: url(../img/bg_contentsmenu_over.png) no-repeat;
	background-position:0px 50%;
	color:#ffff99;
}


/******************************************************************
 * サイドメニュー
 *****************************************************************/
 
#sideR {
    width: 100%;
	margin: 0 auto 25px;
	text-align:center;
}

ul.sidemenu {
    width: 100%;
    list-style: none;
	line-height:normal;
	margin-bottom:15px;
}

ul.sidemenu li {
    width: 100%; 
    margin:0;
	padding:0;
	float:left;
}

ul.sidemenu li.category a {
	display:block;
	background:#6699cc url(../img/bg_sidemenu1.png) no-repeat;
	background-position:98% 50%;
	color:#fff;
	font-size: 18px;
	font-size: 1.8rem;
	text-decoration:none;
	text-align:left;
	padding:15px 0 15px 17px;
	line-height:1.2;
}

ul.sidemenu li.sub a {
	background:#f7f7dd url(../img/bg_sidemenu2.png) no-repeat;
	background-position:17px 50%;
	color:#6699cc;
	font-size: 16px;
	font-size: 1.6rem;
	text-decoration:none;
	text-align:left;
	padding:10px 0 10px 35px;
	display:block;
	line-height:1.2;
}

ul.sidemenu li.category a:hover, ul.sidemenu li.category a:active,ul.sidemenu li.category a:focus {
	background:#568cc2 url(../img/bg_sidemenu1.png) no-repeat;
	background-position:98% 50%;
	color:#ffff99;
}

ul.sidemenu li.sub a:hover, ul.sidemenu li.sub a:active, ul.sidemenu li.sub a:focus {
	background:#f2f2c9 url(../img/bg_sidemenu2.png) no-repeat;
	background-position:17px 50%;
	color:#ea5532;
}


/******************************************************************
 * フッター
 *****************************************************************/

#FOOTER {
	background:#6699cc;
	font-size: 14px;
	font-size: 1.4rem;
	margin-bottom:10px;
	padding-top:20px;
	padding-bottom:15px;
	text-align: center;
}
#FOOTER div {
	margin-bottom:15px;
}

.footerLinkTOP {
	margin:0 10px;
}
.footerLinkTOP ul {
	margin: 0px -7px 0px 0px;
}
.footerLinkTOP ul li {
	margin: 0px 7px 5px 0px;
	float:left;
	width:96%;
}
.footerLinkTOP ul a {
	display:block;
	text-align:left;
	color:#FFF;
	background:#6699cc url(../img/bg_sidemenu1.png) no-repeat;
	background-position:96% 50%;
	border:#99ccff solid 1px;
	padding:14px 10px;
}
.footerLinkTOP ul a:hover, .footerLinkTOP ul a:active, .footerLinkTOP ul a:focus {
	background:#568cc2 url(../img/bg_sidemenu1.png) no-repeat;
	background-position:96% 50%;
	color:#ffff99;
}

.footerLinkBOTTOM {
	border-bottom:#99ccff 1px solid;
	padding:0 10px 15px 10px;
}
.footerLinkBOTTOM a {
	padding-left:15px;
	background:url(../img/bg_footer-link.png) no-repeat;
	background-position:0 50%;
	color:#FFF;
}
#FOOTER a:hover, #FOOTER a:active, #FOOTER a:focus {
	color:#ffff99;
}


/******************************************************************
 * バナー
 *****************************************************************/


.banner-sideTop {
	height:250px;
	margin-bottom:15px;
}

.banner-main {
	display: none;
}
.banner-main img {
	width:100%;
	height:auto;
}


.adsenseM-RWD {
	text-align:center;
	margin-bottom:15px;
}
.adsenseM-link {
	display:none;
	text-align:center;
	margin-bottom:25px;
}
.adsenseSR {
	margin-bottom:15px;
}
.adsenseSR-link {
	text-align:left;
}
.adsenseF-RWD {
	max-width:970px;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:15px;
}
.adsenseF-link {
	display:none;
	text-align:center;
	margin-bottom:15px;
}

.ad-banner {
	text-align: center;
	margin-bottom: 5px;
}
.ad-banner-s {
	display: none;
}
.ad-text {
	text-align: center;
	font-size: 95%;
	margin-bottom: 30px;
}


/* 画像のスタイル指定 */
	
#common-banner {
	 margin: 0 0 2em;
}
img.adjust {
	 width: 100%;
	 max-width:100%;
	 height: 41px;
	 border: none;
}
img.mainimg {
	 width: 100%;
	 max-width:100%;
	 height: auto;
	 border: none;
	 padding-bottom:10px;
}




/* Media Queries による切り替え */

@media only screen and (min-width: 411px) {

	#TITLE {
	width:400px;
	max-width:400px;
	}
	#LOGO a img {
	width:100%;
	}
	.footerLinkTOP ul li {
	float:left;
	width:187px;
	}
	
}

@media only screen and (min-width: 680px) {

	#headerNavi {
	position: absolute;
	top:28px;
		right:0;
	}
	#HEADER {
		background:url(../img/bg_header-woman.jpg) left bottom no-repeat;
	}
	div.main {
	width: 51%;
	float: left;
	}
	#sideR {
	float: right;
	width:300px;
	display:block;
	}
	.banner-main {
	display:block;
	}
	
}

@media only screen and (min-width: 728px) {

	div.main {
	width: 54%;
	}
	.adsenseF-link {
	display: block;
	}

}

@media only screen and (min-width: 800px) {

	div.main {
	width: 58%;
	}
	
}

@media only screen and (min-width: 845px) {

	.adsenseM-link {
	display: block;
	}
	
}

@media only screen and (min-width: 900px) {

	#common-contents {
	width: 96%;
	margin: 0 auto 2em;
	}
	div.main {
	width: 63%;
	}

}

@media only screen and (min-width: 970px) {

	#WRAP {
	width: 100%;
	margin: 0 auto;
	text-align:center;
	}
	#HEADER {
	width:970px;
	}
	#common-contents {
	width:970px;
	margin: 0 auto 2em;
	padding: 0;
	}
	div.main {
	float: left;
	width: 640px;
	}
	.footerLinkTOP,.footerLinkBOTTOM,.pagetop {
	width:970px;
	margin: 0 auto;
	}
	.footerLinkTOP ul {
	margin: 0px -5px 0px 0px;
	}
	
}


@media only screen and (max-width: 650px) {
	.ad-banner {
		display: none;
	}
	.ad-banner-s {
		display: block;
		text-align: center;
		margin-bottom: 5px;
	}
}