@charset "utf-8"; 

.content {

}

.spNone{    /*スマホの時削除*/
	display:none;
}


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

h1{
	padding:15px 0 0;
}

.pcNone{    /*PCの時削除*/  /*トップ左ナビ画像 3つ　*/
	display:none;
}

/*PC用のc-fixを作成*/
.pcClear:after{
	display:block;
	clear:both;
	height:0;
	visibility:hidden;
	content:".";
	line-height:0;
}

.pcClear{
	display:inline-block;
	min-height:1%;
	display:block;
}

/*外国語サイト*/
.langPC{
	display:block;
}
.langSp{
	display:none;
}
.headerInner{
	display:none;
}


}

@media screen and (max-width: 979px) {

h1{
	margin:15px 0 20px 70px !important;
	float:left;
	padding-top:0;
}
.headerInner h1 img{
	padding:0 0 0 20px;
}
	
/*外国語サイト*/
.langPC{
	display:none;
}
.langSp{
	display:block;
	float:right;
}
.headerInner{
	display:block;
}
/*外国語リスト　始まり*/

.langTitle{
	background:#a9a494;
	width:40px;
	height:40px;
	border-radius:3px;
	margin:3px 3px 0 0;
	padding:2px 0 2px 2px;
	font-size:10px;
	line-height:1;
	border-bottom: 2px solid #7b776a;
	border-right: 2px solid #7b776a;
    box-shadow: 0 2px 2px rgba(210,203,182,1);
}
.langTitle a:link{
	text-decoration:none;
	color:#fff !important;
}

#open01,
#open02 {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
}
 
.close_overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 80%;
    display: block;
    text-indent: -9999px;
    position: absolute;
    background: #000;
    opacity: 0.5;
    z-index: 10000;
}
 
.modal_window {
    top: 5%;
    left:70%;
    margin: 0;
    width: 110px;
    text-align: left;
    display: block;
    background: rgba(255,255,255,0.8);
    position: absolute;
    z-index: 100000;
}

.modal_window p {
    padding:2px;
}

.modal_window p.closeBtn{
	padding:3px;
	background:#4b4840;
	border:solid 1px #fff;
	font-size:11px;
	color:#fff;
	margin:3px 0 0 0;
	text-align:center;
}
.modal_window p.closeBtn a{
	color:#fff !important;
}
 
 
/* CSS3 ModalWindow SET
-------------------------- */

div#modal div:target {
    -webkit-animation-name: modalFadeIn; 
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    opacity: 1;
    display:block;
}
/*外国語リスト　終わり*/

	
.spSpace{
		margin:1.5em;
}
#side-top{
	display:none;
}
#side{
	display:none;
}
.area2Table{
	width:100%;
	padding:0;
	background:#faf4df;
}
.area2Table img{  /*area2*/
	width:100%;
}
#main-img{
	width:100%;
}
.mainBg{    /*sp時に今月のおすすめと緊急情報とアクセスランキングをまとめる*/
	width:100%;
	padding:100px 20px 0;
	background:#faf4df;
}

/******************************************************************************
banner-area1 下バナー変更
******************************************************************************/

#banner-area1{
	margin:0 auto 20px;
	padding:0 15px 0 15px;
	clear:both;
}


/******************************************************************************
ad-area
******************************************************************************/

#ad-area{
	background: url(../../../../../resource/image/another/contents/bg-ad.gif) repeat;
}



/*ギャラリーのデモ*/
.demo{
	display:none;
}
/*下の流れる広告を消す*/
/*#banner-area .fade-set{
	display:none;
}*/

/*#banner-area{
	display:none;
}*/

}

@media screen and (max-width:640px){	
	
.headerInner h1 img{
	max-width:300px;
	padding:0 0 0 20px;
}
	
.footerBlock{   /*footerを2つに分ける*/
	clear:both;	
}

.sNone{  /*640pxまでは消す*/
	display:none;
}

/*ランキングのテーブル　2列にする*/
#accessBox1{
	display: block;
	float:left;
	width:48%;
}
#accessBox2{
	display: block;
	float:right;
	width:48%;
}
#accessBox1 thead,#accessBox2 thead{
	display: none;
}
#accessBox1 tbody,#accessBox2 tbody{
	display: block;
}
#accessBox1 tbody tr,#accessBox2 tbody tr{
	display: block;
	margin: 0.5em 0;
}
#accessBox1 tbody th,#accessBox2 tbody th,
#accessBox1 tbody td,#accessBox2 tbody td{
	display: list-item;
	border: none;
}
#accessBox1 tbody th,#accessBox2 tbody th{
	list-style-type: none;
	background: #fff;
	
}
#accessBox1 tbody td,#accessBox2 tbody td{
	margin: 0;
	padding: 0.3em 0;
	list-style-type: none;
}
#accessBox1 tbody td:nth-of-type(1):before { content: "[1位] "; }
#accessBox1 tbody td:nth-of-type(2):before { content: "[2位] "; }
#accessBox1 tbody td:nth-of-type(3):before { content: "[3位] "; }
#accessBox1 tbody td:nth-of-type(4):before { content: "[4位] "; }
#accessBox1 tbody td:nth-of-type(5):before { content: "[5位] "; }
#accessBox2 tbody td:nth-of-type(1):before { content: "[6位] "; }
#accessBox2 tbody td:nth-of-type(2):before { content: "[7位] "; }
#accessBox2 tbody td:nth-of-type(3):before { content: "[8位] "; }
#accessBox2 tbody td:nth-of-type(4):before { content: "[9位] "; }
#accessBox2 tbody td:nth-of-type(5):before { content: "[10位] "; }
}


@media screen and (max-width:480px){

.headerInner h1{
	margin-left: 55px;
}
.headerInner h1 img{
	max-width:260px;
	padding:0;
}

/*外国語リスト*/
.modal_window {
    top: 5%;
    left:50%;
    margin: 0;
    width: 110px;
}


/*おススメコンテンツのテーブル 1列にする*/

#area2Box{
	display: block;
	/*float:left;*/
	width:100%;
}
#area2Box thead{
	display: none;
}
#area2Box tbody{
	display: block;
	padding:0 20px 20px;
	background:#faf4df;
}

#area2Box tbody td{
	display: list-item;
	border: none;
	margin: 0;
	list-style-type: none;
}


}

@media screen and (max-width:440px){

.headerInner h1 img{
	max-width:250px;
}
}

@media screen and (max-width:420px){

.headerInner h1{
	margin-left: 50px;
}
.headerInner h1 img{
	max-width:240px;
}
}
@media screen and (max-width:400px){

.headerInner h1 img{
	max-width:230px;
}
}
@media screen and (max-width:379px){  /*iPhone 380px～*/

.headerInner h1 img{
	max-width:220px;
}
}
@media screen and (max-width:372px){ 
.headerInner h1{
	margin-left: 40px;
}
.headerInner h1 img{
	max-width:220px;
}
}
@media screen and (max-width:360px){

.headerInner h1 img{
	max-width:200px;
}
}
@media screen and (max-width:340px){

.headerInner h1 img{
	max-width:180px;
}
}

@media screen and (max-width:320px){

.headerInner h1 img{
	max-width:170px;
}
}
@media screen and (max-width:310px){

.headerInner h1 img{
	max-width:160px;
}
}

/*IE7以下用 cmn.css と同じ記述をコピー*/

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


/******************************************************************************
common
******************************************************************************/

body{
	color:#262626;
	font-family:sans-serif;
	background:#faf4df;
	margin:0;
	padding:0;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
	
a:link{
	color:#231815;
	text-decoration:underline;
}
	
a:visited{
	color:#231815;
	text-decoration:underline;
}
	
a:active,
a:hover{
	text-decoration:none;	
}

/*#all{
	height:100%;
	margin:0;
	padding:0;
	min-width:960px;
}*/

/*******************************************************************************
class
*******************************************************************************/

/* float
-----------------------------------------------------------------------------*/

.f-left{float:left !important;}
.f-right{float:right !important;}

/* align
-----------------------------------------------------------------------------*/

.al-left{text-align:left !important;}
.al-right{text-align:right !important;}
.al-center{text-align:center !important;}
	
/* color
-----------------------------------------------------------------------------*/

.cl-red{color:#bb0000 !important;}
.cl-blue{color:#0000bb !important;}
.cl-green{color:#00bb00 !important;}
.cl-purple{color:#660099 !important;}
.cl-yellow{color:#bbcc00 !important;}

/* etc
-----------------------------------------------------------------------------*/

.fade{ /* fade rollover */}
.imgover{ /*rollover.js*/ }
.rollover-set{ /*rollover.js*/ }
.bg-none{ background:none !important; }
.relative{ position:relative; }

/* radius
-----------------------------------------------------------------------------*/

.radius{
	position:relative;
	border-radius:6px;
}

.msie6 .radius,
.msie7 .radius,
.msie8 .radius{
	behavior: url(/javascript/another/PIE.htc);
}

/* margin
-----------------------------------------------------------------------------*/

.mb-0{margin:0!important;}
.mb-5{margin:0 0 5px 0 !important;}
.mb-10{margin:0 0 10px 0 !important;}
.mb-15{margin:0 0 15px 0 !important;}
.mb-20{margin:0 0 20px 0 !important;}
.mb-25{margin:0 0 25px 0 !important;}
.mb-30{margin:0 0 30px 0 !important;}
.mb-35{margin:0 0 35px 0 !important;}
.mb-40{margin:0 0 40px 0 !important;}

/* font
-----------------------------------------------------------------------------*/

.font-08{font-size:0.8em !important;}
.font-09{font-size:0.9em !important;}
.font-10{font-size:1.0em !important;}
.font-11{font-size:1.1em !important;}
.font-12{font-size:1.2em !important;}
.font-13{font-size:1.3em !important;}
.font-14{font-size:1.4em !important;}
.font-15{font-size:1.5em !important;}
.font-16{font-size:1.6em !important;}
.font-18{font-size:1.8em !important;}
.font-20{font-size:2.0em !important;}

/* hide-html
-----------------------------------------------------------------------------*/

.hide-html{
	display:none !important;
}

/* title
-----------------------------------------------------------------------------*/

.title-01{
	position: relative;
	height:54px;
	margin:0 0 10px 0;
}

.title-01 h2{
	position: absolute;
	left:-10px;
	top:0;
}

/* button
-----------------------------------------------------------------------------*/

.bt-list{
	text-align:right;
}

.bt-list a{
	display:inline-block;
	color:#fff !important;
	padding:5px 10px;
	background:#222 center no-repeat;
	font-weight:bold;
	text-decoration:none;
	border-radius:4px;
}

.msie7 .bt-list a,
.msie6 .bt-list a{
	display:inline;
	zoom:1;
}

.bt-list a:hover{
	background:#d53e1b;
}

/******************************************************************************
noscript
******************************************************************************/

#error{
	background:#ff0000;
	text-align:center;
	color:#fff;
	padding:10px;
	position:fixed;
	bottom:0;


	width:100%;
	font-size:1.2em;
	font-weight:bold;
	display:block;
}

*html #error{
	position:absolute;
	top:0;
}

/******************************************************************************
#header
******************************************************************************/

#header{
	width:980px;
	margin:0 auto;
	padding:20px 0;
	position: relative;
	line-height:1.5;
}

#header .lang-list{
	position: absolute;
	top:0;
	right:0;
}

#header .lang-list li{
	float:left;
	margin:0 0 0 1px;
}

#header .social-list{
	position: absolute;
	right:365px;
	bottom:20px;
}

#header .social-list li{
	float:left;
	margin:0 0 0 15px;
}

#header .social-list li.first{
	margin:0;
}

.msie6 #header .social-list li.last,
.msie7 #header .social-list li.last{
	display:none;
}

#header .site-search{
	position: absolute;
	right:0;
	bottom:20px;
	width:345px;
}

#header .site-search form{
	position: relative;
	height:100%;
}

#header .site-search .text{
	background:#fff;
	border-radius:6px;
	height:31px;
	width:218px;
	border:1px solid #e5dfc9;
	position:relative;
}

.msie6 #header .site-search .text,
.msie7 #header .site-search .text,
.msie8 #header .site-search .text{
	behavior: url(/javascript/another/PIE.htc);
}

#header .site-search .text input{
	padding:7px;
	width:200px;
	border:0;
	outline:0;
	background:none;
	color:#969696;
}

#header .site-search .bt-search{
	position: absolute;
	right:0;
	top:0;
}

/******************************************************************************
global
******************************************************************************/

.inside .main-area{
	background: url(../../../../../../resource/image/another/header/bg-main.gif) repeat;
	padding:0;
}

.inside .main-area .wrap-in{
	width:980px;
	margin:0 auto;
}
.inside .main-area2{
	padding:0;
}

.inside .main-area2 .wrap-in{
	width:980px;
	margin:0 auto;
}

#global{
	margin:0 0 20px 0;
	position: relative;
}

#global ul{
	float:left;
}

#global li{
	float:left;
	margin:0 1px 0 0;
	font-size:0;
	line-height:0;
	vertical-align:middle;
}

#global li.last{
	margin:0;
}

/* .box-weather
-----------------------------------------------------------------------------*/

.box-weather{
	background:#fff;
	padding:3px 10px;
	height:54px;
	float:right;
	width:135px;
	border-radius:6px;
	position:relative;
}

.msie6 .box-weather,
.msie7 .box-weather,
.msie8 .box-weather{
	behavior: url(/javascript/another/PIE.htc);
}

.box-weather{
	position: relative;
}

.box-weather dl{
	font-size:1.2em;
}

.box-weather dl strong{
	font-size:1.3em;
	font-family: "Times New Roman", Times, serif;
}

.box-weather dl dt,
.box-weather dl dd{
	float:left;
}

.box-weather dl dt{
	font-weight:bold;
}

.box-weather dl.icon dt{
	padding:5px 10px 0 0;
	font-size:12px;
}

.box-weather dl.date{
	position: absolute;
	top:34px;
	left:10px;
	z-index: 9999;
}

.box-weather dl.date dd{
	padding:2px 0 0 0;
}

.box-weather .bt-week{
	position: absolute;
	right:10px;
	bottom:-16px;
	width: 73px;
	height: 16px;
}

/******************************************************************************
content-area
******************************************************************************/

#contents-area{
	width:980px;
	margin:0 auto;
	padding:25px 0 20px 0;
	line-height:1.5;
}

/******************************************************************************
side
******************************************************************************/
#side{
	width:190px;
	float:left;
	font-size:1.2em;
	line-height:1.5;
}
#side-top{
	width:240px;
	float:left;
	font-size:1.2em;
	line-height:1.5;
}

#side h3,
#side-top h3{
	margin:0 0 3px 0;
}

#side ul{
	margin:0;
}
#side-top ul{
	margin:0 0 20px 0;
}

#side li,
#side-top li{
	list-style:none inside;
	zoom:1;
	margin-bottom:5px;
}

#side li.dot,
#side-top li.dot{
	background: url(../../../../../resource/image/another/contents/dot-1.gif) left bottom repeat-x;
}

/*#side li.indent{
	padding:0 0 0 16px;
}*/

#side li a,
#side-top li a{
	display:block;
	padding:7px 0;
	text-decoration:underline;
}
#side li a:hover,
#side-top li a:hover{
	text-decoration:none;
	color:#BF0028;
}

#side li a.blank,
#side-top li a.blank{
	background: url(../../../../../resource/image/another/contents/ic-blank.gif) left 0.95em no-repeat;
	padding:7px 0 7px 18px;
}
#side li a.no-blank,
#side-top li a.no-blank{
	padding:7px 0 7px 18px;
}

#side .ordered-list{
	margin:0 0 20px 0;
}

#side .ordered-list li a{
	background-repeat: no-repeat;
	background-position:left center;
	padding:7px 0 7px 25px;
}

#side .ordered-list .num-1 a{ background-image: url(../../../../../resource/image/another/side/rank-1.gif); }
#side .ordered-list .num-2 a{ background-image: url(../../../../../resource/image/another/side/rank-2.gif); }
#side .ordered-list .num-3 a{ background-image: url(../../../../../resource/image/another/side/rank-3.gif); }
#side .ordered-list .num-4 a{ background-image: url(../../../../../resource/image/another/side/rank-4.gif); }
#side .ordered-list .num-5 a{ background-image: url(../../../../../resource/image/another/side/rank-5.gif); }

/******************************************************************************
cont
******************************************************************************/

#cont{
	width:770px;
	float:right;
	padding:0 0 20px 0;
}

#right_column{
	font-size:12pt;
	line-height:1.5;
	margin:0 !important;
}

/******************************************************************************
banner-area
******************************************************************************/

#banner-area{
	width:950px !important;
	height:64px;
	margin:0 auto;
	padding:0 15px 20px 15px;
	clear:both;
	position:relative;
	overflow:hidden;
}

#banner-area ul{
	width:980px;
}

#banner-area .recontents_bnr{
	margin:0 !important;
}

.jcarousel-skin-tango .jcarousel-clip{
}

.jcarousel-prev{
	background-image: url(../../../../../resource/image/another/footer/bt-prev.gif);
	background-position:0 0;
	background-repeat:no-repeat;
	position: absolute;
	left:0px;
	top:0;
	width:12px;
	height:64px;
	display:block;
	z-index:9999;
	text-indent:-9999em;
	cursor:pointer;
}

.jcarousel-next{
	background-image: url(../../../../../resource/image/another/footer/bt-next.gif);
	background-position:0 0;
	background-repeat:no-repeat;
	position: absolute;
	right:0;
	top:0;
	width:12px;
	height:64px;
	display:block;
	z-index:9998;
	text-indent:-9999em;
	cursor:pointer;
}

.jcarousel-next a{
	z-index:9999;
}

.jcarousel-prev:hover,
.jcarousel-next:hover{
	background-position:-12px 0;
}

#banner-area ul{
	height:64px;
	overflow:hidden;
}

#banner-area li{
	width:159px;
	float:left;
	height:64px;
	zoom:1;
	font-size:0;
	line-height:0;
	vertical-align:bottom;
}

#banner-area ul img{
	width:154px;
	height:64px;
}

/******************************************************************************
banner-area1 下バナー変更
******************************************************************************/

#banner-area1{
	margin:0 auto;
	padding:0 15px 20px 15px;
	clear:both;
}


/******************************************************************************
banner-area2
******************************************************************************/

#banner-area2{
	width:980px;
	margin:0 auto 50px;
}
#banner-area2 h2{
	margin-bottom:20px;
}
#banner-area2 table{
	border-collapse: collapse;
	border:none;
	width:980px;
}
#banner-area2 table td {
	text-align: left;
	vertical-align: middle;
	width:316px;
	padding-left:16px;
	padding-bottom:10px;
}
#banner-area2 table td.f01 {
	padding-left:0;
}
#banner-area2 a:hover img{
	filter:alpha(opacity=80) !important;
	-ms-filter: "alpha(opacity=80)" !important;
	-moz-opacity: 0.8;
	opacity: 0.8;
}

/******************************************************************************
ad-area
******************************************************************************/

#ad-area{
	background: url(../../../../../resource/image/another/contents/bg-ad.gif) repeat;
	padding:40px 0 30px 0;
}

#ad-area .wrap-in{
	width:980px;
	margin:0 auto;
	position: relative;
}

#ad-area ul{
	padding:0 0 0 60px;
}

#ad-area h3{
	position: absolute;
	left:0;
	top:0;
}

#ad-area li{
	float:left;
	margin:0 10px 10px 0;
	font-size:0;
	line-height:0;
	vertical-align: bottom;
}

#ad-area li.clear{
	margin:0 0 10px 0;
}

/******************************************************************************
footer
******************************************************************************/

#footer{
	background:#222;
	color:#fff;
	padding:40px 0;
	font-size:1.2em;
	line-height:1.7;
}

#footer a{
	color:#fff;
}

#footer .wrap-in{
	width:980px;
	margin:0 auto;
}

#footer .column{
	float:left;
}

#footer h4{
	font-size:1.2em;
	margin:0 0 3px 0;
}

#footer h5{
	background: ;
}

#footer ul{
	margin:0 0 20px 0;
}

#footer .column{
	padding:10px 20px 0 0;
	margin:0 20px 30px 0;
	border-right:1px solid #444;
	width:214px;
	zoom:1;
}

#footer .column.last{
	margin:0;
	padding:0;
	border:0;
}

#footer .column li a{
	background: url(../../../../../resource/image/another/footer/arrow.gif) left 5px no-repeat;
	padding:0 0 0 15px;
	display:inline-block;
}

#footer .column li a.blank{
	background: url(../../../../../resource/image/another/footer/ic-blank.gif) left 5px no-repeat;
}

#footer .column li a.pdf{
	background: url(../../../../../resource/image/another/footer/ic-pdf.gif) left 3px no-repeat;
	padding:0 0 0 22px;
}


#footer .column li.indent{
	padding:0 0 0 15px;
}

#footer .column li.indent a{
	background: url(../../../../../resource/image/another/footer/list.gif) left center no-repeat;
	padding:0 0 0 10px;
}

#footer .box-address{
	clear:both;
	border-top:1px solid #444;
	padding:30px 0 0 0;
	zoom:1;
}


/*******************************************************************************
  追加 PC 
*******************************************************************************/

#header{
	width:980px;
	margin:0 auto;
	padding:0 0; /*追加*/
	position: relative;
	line-height:1.5;
}

/*おススメコンテンツ 画像*/

#banner-area2 h2.recommend{
	background:url(../../../../../resource/image/top/ttl-recommend.gif) no-repeat;
	width:980px;
	height:56px;
	text-indent:-9999px;
}

}

/*外国語リスト部分*/
@-webkit-keyframes modalFadeIn {
    0% {opacity:0;display:block;}
    100% {opacity:1;}
}



/*トップへ戻る 追加*/
#scrollUp {
    bottom: 0;
    right: 40px;
    width: 50px;
    height: 50px;
	border-radius:5px 5px 0 0;
    margin-bottom: -20px;
    padding: 10px;
    font: 13px/18px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align: center;
	font-weight:bold;
    text-decoration: none;
    text-shadow: 0 1px 0 #fff;
    color: #fff;
    -webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
	background: #000000; 
	background: rgba(0, 0, 0, 0.5);
    background-repeat: repeat-x;
    -webkit-transition: margin-bottom 300ms linear;
    -moz-transition: margin-bottom 300ms linear;
    -o-transition: margin-bottom 300ms linear;
    transition: margin-bottom 300ms linear;
}

#scrollUp:hover {
    margin-bottom: 0;
}

@media screen and (max-width: 979px) {

/*トップへ戻る 追加*/
#scrollUp {
    bottom: 0;
    right: 20px;
    width: 60px;
    height: 70px;
    margin-bottom: -20px;
    padding: 10px;
}

}