@charset "UTF-8";

* { 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	}
	
/* Outline style
-------------------------------------*/
html,
body {
	height: 100%;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
	}
body {
	font-size: 14px; 
	line-height: 1.6;
	}
#wrapper {
	width: 100%;
	margin: 0 auto;
	position: relative;
	}
body > #wrapper {
	height: auto;
	}
.clearfix:after {
    visibility: hidden;
    display: block;
    content: " ";
    clear: both;
    height: 0;
    }
#screen {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 200;
	}
@media print {
	html,
	html body{ *zoom: 0.65;}
	}
#main_inner {
	width: 1000px;
	margin: 0 auto;
	}
	
	
/* Accessibility style
-------------------------------------*/

.guidance {
	left:-999px;
	position:absolute;
	width:990px;
	}
img {max-width: 100%;height: auto;vertical-align: bottom;} /* Responsive Correspondence */
img {
	vertical-align: bottom;
	box-shadow: #000 0 0 0; /* Roll over Correspondence */
	}
img, x:-moz-any-link, x:default {
    box-shadow: #000 0 0 0; /* IE7 Correspondence */
	}
		
/* link style
-------------------------------------*/
a:link    {color:#333; text-decoration: none;}
a:visited {color:#333; text-decoration: none;}
a:hover   {color:#333; text-decoration: underline;}
a:active  {color:#333; text-decoration: underline;}

.mincho{
	font-family: "FOT-筑紫明朝 Pr6 L","TsukuMinPr6-L","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","TakaoEx明朝",TakaoExMincho,"MotoyaLCedar","Droid Sans Japanese","HGS明朝E","ipamin","ＭＳ Ｐ明朝",serif;
	position: relative;
	font-weight: normal;
	}

.box {cursor:pointer;}

.box:hover,
.topics:hover,
header ul#tnav li:hover,
#ranking .content ol li:hover {
	/* background: #eee!important; */
	-ms-filter: "alpha(opacity=60)";
	-moz-opacity:0.6;
	-khtml-opacity: 0.6;
	opacity: 0.6;
	}

.box a {
	display: block;
/* 	padding: 15px 0; */
	text-decoration: none;
	}
.topics {cursor: pointer;}
.topics a {
	display: block;
	text-decoration: none;
	}	


	

/* CLEARFIX */
.container:after,
.row:after, 
.col:after {content: "";display: table;clear: both;}

.container {width: 100%;max-width: 1000px;margin: 0 auto;position: relative;}

/* Block relationship style
-------------------------------------*/

.row {padding-bottom: 0em;}		
.col {display: block;float: left;width: 100%;margin: 0 1%;line-height: 1.5;}
.col:first-child {margin-left: 0;}
.col:last-child {margin-right: 0;}
	
/* grid Configuration style
-------------------------------------*/
.span_1 {width: 6.25%;}
.span_2 {width: 15%;}
.span_3 {width: 23.5%;}
.span_4 {width: 32%;}
.span_5 {width: 40.5%;}
.span_6 {width: 49%;}
.span_7 {width: 57.5%;}
.span_8 {width: 66%;}
.span_9 {width: 74.5%;}
.span_10 {width: 83%;}
.span_11 {width: 91.5%;}
.span_12 {width: 100%;}
    	
/* site_title style
-------------------------------------*/
#site_title {
	overflow: hidden;
	margin-top: 8px;
	float: left;
	}

/* path style
-------------------------------------*/
#path {
	margin: 10px auto 30px;
	font-size: 12px;
	overflow: hidden;
	width: 1000px;
	}
	#path li {
		float: left;
		margin-right: 10px;
		}
	#path li:after {
		content: ">";
		margin-left: 10px;
		color: #333;
		}
	#path li:last-child:after {content: "";}


		
/* header style
-------------------------------------*/
header {
	width: 100%;              	/* 横幅100%　*/
	background: #fff;
	position: relative;
    position: fixed;            /* ヘッダーの固定 */
    top: 0px;                   /* 位置(上0px) */
    left: 0px;                  /* 位置(右0px) */
    z-index: 99999;             
	}
	#header_inner {
		height: 71px;
		border-bottom: 1px solid #CCC; 
		}	
	header .border {
		width:100%;
		height: 6px;
		background:#005AAC url("/-/Media/coco/common/image/header_border.jpg") no-repeat scroll left top;
		}
#searchform {
	width: 27%;
	position: relative;
	margin: 25px 0 0 40px;
	float: left;
	}  
#keywords {  
    width: 200px;  
    height: 30px;  
    border: 1px solid  #ccc;  
    padding: 4px;  
	}  
#searchbtn {  
    position: absolute;  
    top: 0;  
    right: 0;
    background: #666;
    width: 75px;
    height: 30px;
    padding: 8px 10px;
	}  
*:first-child + html #searchbtn{  
    top: 1px;  
	}  	
header ul#tnav {
	overflow: hidden;
	position: absolute;
	right: 0;
	top: 0;
	}
	header ul#tnav li {
		float: right;
		text-indent: -9999px;
		cursor: pointer;
		}
	header ul#tnav li.menu {
		display: block;
		width: 76px;
		height: 70px;
		background: #fff url(/-/Media/coco/common/image/menu_pc.png) no-repeat left top;
		z-index: 2000;
		}
	header ul#tnav li.registration {
		width: 76px;
		height: 70px;
		background: #fff url(/-/Media/coco/common/image/mem_reg_pc.png) no-repeat left top;
		z-index: 2000;
		}
		header ul#tnav li.registration a {
			display: block;
			height: 70px;
			}
	header ul#tnav li.login {
		width: 76px;
		height: 70px;
		background: #fff url(/-/Media/coco/common/image/header_login_pc.png) no-repeat left top;
		z-index: 2000;
		}
		header ul#tnav li.login a {
			display: block;
			height: 70px;
			}
	header ul#tnav li.mypage {
		width: 76px;
		height: 70px;
		background: #fff url(/-/Media/coco/common/image/header_mypage_pc.png) no-repeat left top;
		z-index: 2000;
		}
		header ul#tnav li.mypage a {
			display: block;
			height: 70px;
			}
		
#c_navi {
	background-color: #005AAC;
	overflow: hidden;
	padding: 5px 0;
	}
	#c_navi ul {
		text-align: center;
		width: 1000px;
		margin: 0 auto;
		overflow: hidden;
		}
	#c_navi li {
		display: inline-block;
		margin-right: 50px;
		color: #fff;
		line-height: 1.6;
		font-size: 13px;
		}	
	#c_navi li:last-child {margin-right: 0;}
	#c_navi li a {color: #fff;}
	
	
	
#___gcse_0{
    width:27%;
    margin:25px 0 0 40px ;
    position:relative;
    float: left;
}
#___gcse_0 .gsc-control-cse, 
#___gcse_0 .gsc-control-cse-ja,
#___gcse_0 .gsib_a{
    margin:0 !important;
    padding:0 !important;
}
/* テキスト入力フォームとボタンの位置 */
#___gcse_0 table.gsc-search-box td,
#___gcse_0 table.gsc-search-box input {
    vertical-align: top !important;
}
/* テキスト入力フォーム */
#___gcse_0 input[type="text"]{
    border: 1px solid #ccc !important;
    height:30px !important;
}
#___gcse_0 input[type="text"]:focus {
    border: 1px solid #008ee1 !important;
    outline: 0;  /*safariの自動フォーカスを切る */
}
/* テキスト入力フォームの影を消す */
#___gcse_0 #gsc0-iw-id1{
    border:none !important;
}
/* テキスト入力フォームの背景画像位置調整 */
#___gcse_0 #gs_tti0 input{
    background-position:5px 5px !important;
}
/* ボタンの色 */
#___gcse_0 input.gsc-search-button {
background: #666 !important;
background: -ms-linear-gradient(top,  #666 0%,#666 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666', endColorstr='#666',GradientType=0 ); /* IE6-9 */
border: 2px solid #666 !important;
}
/* ボタンの位置調整と角丸消し */
#___gcse_0 .gsc-search-button{
    margin:0 0 0 -16px !important;
    border-radius:0;
}
/* 入力時に出る「×」ボタンの位置調整 */
#___gcse_0 .gsib_b a{
    position:absolute;
    top:3px;
    /* left:185px; */
    right: 27%;
}
/* 入力時に出る×ボタン -- Firefox位置調整 -- */
#___gcse_0 .gsib_b span{
        box-sizing: border-box;
   -moz-box-sizing: border-box;
        padding:2px 0 0 0;
        color: #ccc;
}
input.gsc-search-button {
  box-sizing: content-box; }
 
table.gsc-search-box td {
  vertical-align: top!important; }
 
.gsc-input-box {
  height: 27px!important; }
 
input.gsc-search-button-v2 {
  margin-top: 0!important; }
.gsc-input-box {border: none;}

#gsc-iw-id1 {border: none;}


/*
#___gcse_0 .gsc-search-button input[type="image"] {
    background: #666 url(../image/form_btn.png) no-repeat scroll left top!important;
    color: #FFFFFF;
    float: right;
    height: 30px;
    margin-left: 0 !important;
    width: 75px;
}
*/
input.gsc-input {background-image:none !important;}
	




/* #today style
-------------------------------------*/
#today {
	width: 100%;
	overflow: hidden;
	border-bottom: 1px solid #ccc; 
	padding: 10px 0;
	overflow: hidden;
	}
	#today .title {
		float: left;
		color: #FF6666;
		font-weight: bold;
		margin-right: 30px;
		}
	#today .txt {
		display: block;
		text-decoration: underline;
		cursor: pointer;
		overflow: hidden;
		}
	#today .txt_today {
		display: none;
		padding: 10px 0;
		}
		#today .txt_today .close {
			width: 64px;
			margin: 10px auto 0;
			cursor: pointer;
			}


		
/* gnav style
-------------------------------------*/
#gnav {
	display: none;
	position: absolute;
	top: 71px;
	right: 0;
	/* overflow: hidden; */
	z-index: 1000;
    -moz-box-shadow: 1px 0px 5px #666;
    -webkit-box-shadow: 1px 0px 5px #666;
    box-shadow: 1px 0px 5px #666;	
	}
	#gnav li img,
	#gnav p img {width: 320px;}
	#gnav p {cursor: pointer;}

	
	
	
	

/* pagenav style
-------------------------------------*/
#pagenav {
	width: auto;
	padding: 60px 0 0;
	margin: 0 auto;
	line-height: 30px;
	overflow: hidden;
	display: table;
	margin-left: auto;
	margin-right: auto;
	}
		#pagenav ol {
			margin: 0 auto;
			overflow: hidden;
			float: left;
			}
			#pagenav ol li {
				float: left;
				width: 50px;
				height: 50px;
				background: #ccc;
				border: 1px solid #ccc;
				margin-right: -1px;
				color: #000;
				text-align: center;
				line-height: 50px;
				}
			#pagenav ol li:last-child {margin-right: 0;}
				#pagenav ol li a {
					display: block;
					background: #fff;
					height: 48px;
					color: #000;
					}
				#pagenav ol li a:hover {
					background: none;
					color: #fff;
					text-decoration: none;
					}
		#pagenav .prev,
		#pagenav .next {
			width: 110px;
			height: 50px;
			background: #FF6600;
			border: 1px solid #FF6600;
			margin-right: -1px;
			color: #fff;
			text-align: center;
			float: left;
			line-height: 50px;
			}
		#pagenav .next {left: inherit;}
		#pagenav .prev:before {
			content: "<";
			margin-right: 5px;
			color: #fff;
			}
		#pagenav .next:after {
			content: ">";
			margin-left: 5px;
			color: #fff;
			}
		#pagenav .prev a,
		#pagenav .next a {
		color: #fff;
		text-decoration: none;
		cursor: pointer;
		}
		#pagenav .back {
			width: 270px;
			margin: 0 auto;
			color: #fff;
			}

/* side style
-------------------------------------*/
#side {
	float: right;
	width: 26%;
	overflow: hidden;
	background-color: #fff;
	}
	.mainVisual_area02 h3 {
		width: 44%;
		margin: 15px auto;
		}
	.mainVisual_area02 {
		width: 100%;
		background-color: #fff;
		overflow: hidden;
		margin: 0 auto;
		padding-bottom: 20px;
		}

/* mainVisual02 style
-------------------------------------*/
	#mainVisual02 {
		width: 90.9%;
		max-width: 240px;
		margin: 0 auto 20px;
		position: relative;
		}
		#mainVisual02 .slider {padding-left: 0;}
		#mainVisual02 a.bx-prev,
		#mainVisual02 a.bx-next {
			display: block;
			width: 17px;
			height: 17px;
			position: absolute;
			z-index: 100;
			top: 50%;
			margin-top: -10px;
			text-indent: -9999px;
			outline: none;
			}
			#mainVisual02 a.bx-prev {
				background: url(/-/Media/coco/common/image/arrow_visual01.png) no-repeat left top;
				background-size: 17px 17px;
				left: -10px;
				}
			#mainVisual02 a.bx-next {
				background: url(/-/Media/coco/common/image/arrow_visual02.png) no-repeat left top;
				background-size: 17px 17px;
				right: -10px;
				}
			#mainVisual02 .bx-pager {
				float: left;
				position: relative;
				top: 10px;
				left: 50%;
				}
				#mainVisual02 .bx-pager-item {
					float: left;
					position: relative;
					left: -50%;
					width: 10px;
					height: 10px;
					margin: 0 5px;
					text-indent: -9999px;
					}
					#mainVisual02 .bx-pager-item a {
						display: block;
						background: url(/-/Media/coco/common/image/slider_page01.png) no-repeat left top;
						background-size: 10px 10px;
						outline: none;
						}
					#mainVisual02 .bx-pager-item a.active {
						background: url(/-/Media/coco/common/image/slider_page02.png) no-repeat left top;
						background-size: 10px 10px;
						}	
						
						
/* keyword style
-------------------------------------*/
#keyword {
	background-color: #FAFAFA;
	overflow: hidden;
	padding: 10px 0;
	}
#keyword h3 {
	text-align: center;
	margin: 0 auto 15px;
	width: 150px;
	}
	#keyword ul {
		width: 90.9%;
		margin: 0 auto;
		overflow: hidden;
		}
		#keyword li {
			font-size: 14px;
			border: 1px solid #ccc;
			padding: 2px 7px;
			margin: 0 2px 6px 0;
			display: inline-block;
			}
		#keyword li:last-child {margin-right: 0;}
		#keyword li a {
			display: block;
			text-decoration: none;
			}
		#keyword li:hover {background: #eee;}


/* ranking style
-------------------------------------*/
#ranking {
	overflow: hidden;
	padding: 0;
	}
#ranking .tab {
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	}
	/*#ranking .content > li.hide {display:none;}*/
	#ranking .tab li {
		float: left;
		text-indent: -9999px;
		height: 44px;
		width: 50%;
		cursor: pointer;
		}
	#ranking .tab li.tub1 {
		background: url("/-/Media/coco/common/image/tub_ranking.png") no-repeat scroll center top;
		background-size: 100% 100%;
		}
	#ranking .tab li.tub2 {
		background: url("/-/Media/coco/common/image/tub_recommend.png") no-repeat scroll center top;
		background-size: 100% 100%;
		}
	#ranking .tab li.tub1.select {
		background: url("/-/Media/coco/common/image/tub_ranking_active.png") no-repeat scroll center top;
		background-size: 100% 100%;
		}
	#ranking .tab li.tub2.select {
		background: url("/-/Media/coco/common/image/tub_recommend_active.png") no-repeat scroll center top;
		background-size: 100% 100%;
		}
	#ranking .content {
		width: 100%;
		background: url("/-/Media/coco/common/image/ranking_bg.png") repeat scroll left top;
		overflow: hidden;
		margin: 0 auto;
		}
	#ranking .content.tab2 {
		background: url("/-/Media/coco/common/image/recommend_bg.png") repeat scroll left top;
		}
	#ranking .content > li {
		width: 100%;
		margin: 0 auto;
		}
	#ranking .content ol li {
		width: 90%;
		position: relative;
		margin: 0 auto;
		padding: 10px 0 ;
		border-bottom: 1px solid  #ccc;
		overflow: hidden;
		}
	#ranking .content ol li:last-child {border-bottom: none;}
		#ranking .content li p {
			overflow: hidden;
			float: left;
			}
		#ranking .content li .rank {
			width: 20px;
			position: absolute;
			top: 10px;
			left: 0px;
			float: none;
			}
		#ranking .content ol li .photo {
			margin: 0 10px 0 0;
			width: 36.84%;
			}
		#ranking .content ol li .txt {
			font-size: 14px;
			line-height: 1.4;
			width: 52.63%;
			}
			
/* benefits style
-------------------------------------*/
#benefits{
	width: 100%;
	margin: 0 auto;
	background-color: #fff;
	overflow:hidden;
	padding-bottom: 20px;
	}			
	#benefits h3 {
		margin: 20px auto 10px;
		width: 73%;
		}
	#benefits table {
		border-top: 1px solid #ccc;
		width: 90.9%;
		margin: 0 auto;
		}
		#benefits table th {
			width: 13%;
			color: #FF6600;
			font-size: 14px;
			padding: 10px 0;
			border-bottom: 1px solid #ccc;
			}
		#benefits table td {
			width: 87%;
			font-size: 14px;
			padding: 10px 10px 10px 0;
			border-bottom: 1px solid #ccc;
			}
	#benefits ul.btn_area {
		overflow: hidden;
		width: 90.9%;
		margin: 0 auto;
		}
	#benefits ul.btn_area li.catch{
		color: #333;
		font-size: 12px;
		font-weight: bold;
		margin: 10px auto;
		float: none;
		text-align: center;
		}
	#benefits ul.btn_area li.benefits_btn {
		margin: 0 auto;
		float: none;
		width: 80%;
		}
	#benefits ul.btn_area li.benefits_btn img {width: 100%;}
				
/* benefits_login style
-------------------------------------*/
#benefits {
	width: 100%;
	margin: 0 auto;
	background-color: #fff;
	overflow:hidden;
	padding-bottom: 20px;
	}			
	#benefits .benefits_inner.login_disp h3 {
		margin: 20px auto 10px;
		width: 73%;
		}
	#benefits .benefits_inner.login_disp table {
		border-top: 1px solid #ccc;
		width: 90.9%;
		margin: 0 auto 15px;
		}
		#benefits .benefits_inner.login_disp table th {
			width: 13%;
			color: #2CB37F;
			font-size: 14px;
			padding: 10px 0;
			border-bottom: 1px solid #ccc;
			}
		#benefits .benefits_inner.login_disp table td {
			width: 87%;
			font-size: 14px;
			padding: 10px 10px 10px 0;
			border-bottom: 1px solid #ccc;
			}
	#benefits .benefits_inner.login_disp ul.btn_area {
		overflow: hidden;
		width: 90.9%;
		margin: 0 auto;
		}
	#benefits ul.btn_area li.catch{
		color: #333;
		font-size: 12px;
		font-weight: bold;
		margin: 10px auto;
		float: none;
		text-align: center;
		}
	#benefits ul.btn_area li.benefits_btn {
		margin: 0 auto;
		float: none;
		width: 80%;
		}
	#benefits_login ul.btn_area li.benefits_btn img {width: 100%;}


				
/* benefits_login marketo style
-------------------------------------*/		
#benefits .marketo {
	background: url(http://cp-coco.rohto.com/rs/074-TOY-537/images/benefits_mk_bg.png) repeat scroll left top;
	margin: 0 auto;
	overflow:hidden;
	padding: 20px 5%;
	}			
	#benefits .marketo h3 {
			margin: 0 auto 10px;
			width: 85%;
			}
	#benefits .marketo .catch {
		font-size: 12px;
		font-weight: bold;
		margin: 10px auto;
		text-align: center;
		}
	#benefits .marketo .benefits_marketo_btn {
		margin: 0 auto;
		float: none;
		width: 70%;
		}
		
		
				
				
/* contents_list style
-------------------------------------*/
#contents_list {display: none;}		

/* footer style
-------------------------------------*/
footer {
	width: 100%;
	background: #eee;
	padding: 0 0 15px;
	clear: both;
	overflow: hidden;
	border-top: 1px solid #ccc;
	}
#site_btn {
	background-color: #fff;
	padding: 20px 0;
	}
	#site_btn ul {
		margin: 20px auto 0;
		overflow: hidden;
		width: 1000px;
		}
		#site_btn ul li {
				margin: 0 11px 20px 0;
				float: left;
				width: 326px;
				}
		#site_btn ul li:nth-child(3n) {margin-right: 0;}
#footer_inner {
	width: 1000px;
	margin: 25px auto 0;
	overflow: hidden;
	}
	#footer_inner .fnav {overflow: hidden;}
		#footer_inner .fnav ul {
			width: 33%;
			float: left;
			margin-bottom: 50px;
			}
			#footer_inner .fnav ul li {margin-bottom: 10px;}
			#footer_inner .fnav ul li.external:after {
				content:url(/-/Media/coco/common/image/footer_icon.png);
				margin-left: 10px;
				}
	#footer_inner .footer_logo {
		text-align: center;
		width: 155px;
		margin: 0 auto 15px;
		}
		
	#footer_inner .fnav02 {overflow: hidden;}
		#footer_inner .fnav02 > ul {
			width: 100%;
			margin-bottom: 50px;
			text-align: center;
			}
			#footer_inner .fnav02 > ul > li {
				margin: 0 50px 0 0;
				display: inline-block;
				}
			#footer_inner .fnav02 > ul > li:last-child {margin-right: 0;}
			#footer_inner .fnav02 > ul > li.external:after {
				content:url(/-/Media/coco/common/image/footer_icon.png);
				margin-left: 10px;
				}
		
/* pagetop style
-------------------------------------*/
.pagetop {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 2000;
	}
/* Copyright style
-------------------------------------*/
#copyright {
	font-size: 11px;
	color: #666;
	clear: both;
	text-align: center;
	}



/* 中面特典エリア非表示 */
#side #benefits {display: none !important;}

/* Content AI
-------------------------------------*/
.RTP_RCMD2 {margin-top: 20px !important;}
.rtp_rcmd2_label a {
    font-size: 14px !important;
    color: #014d93 !important;
    line-height: 1.4 !important;
    max-height: none !important; 
	}
.rtp_rcmd2_item {margin-right: 0 !important;}			
.rtp_rcmd2_link_container {text-align: right !important;}





/* ▼▼▼ 1000px
=====================================*/
@media screen and (max-width: 1000px) {

	#main_inner {width: 95%;}
	
/* footer style
-------------------------------------*/
#site_btn {
	background-color: #fff;
	padding: 20px 0;
	}
	#site_btn ul {
		margin: 20px auto 0;
		overflow: hidden;
		width: 95%;
		}
		#site_btn ul li {
				margin: 0 2% 20px 0;
				float: left;
				width: 32%;
				}
		#site_btn ul li:nth-child(3n) {margin-right: 0;}

}


/* ▼▼▼ 〜960px
=====================================*/
@media screen and (max-width: 960px) {	

#c_navi ul {
	text-align: center;
	width: 100%;
	padding: 0 15px;
	}
	#c_navi li {
		display: inline;
		margin-right: 0;
		width: 33%;
		float: left;
		}	
	#c_navi li:last-child {margin-right: 0;}

#today {padding: 10px 15px;}

#searchform {
	width: 170px;
	margin-left: 10px;
	}

#keywords {  
    width: 120px;   
	} 

/* pagenav style
-------------------------------------*/
#pagenav {
	width: auto;
	padding: 40px 0;
	margin: 0 auto;
	line-height: 30px;
	overflow: hidden;
	display: table;
	margin-left: auto;
	margin-right: auto;
	}
		#pagenav ol {
			margin: 0 auto;
			overflow: hidden;
			float: left;
			}
			#pagenav ol li {
				float: left;
				width: 40px;
				height: 40px;
				background: #ccc;
				border: 1px solid #ccc;
				margin-right: -1px;
				color: #000;
				text-align: center;
				line-height: 50px;
				line-height: 40px;
				}
				#pagenav ol li a {
					height: 38px;
					}
			#pagenav ol li.no {display: none;}
			#pagenav ol li:last-child {margin-right: 0;}
				.pagenav ol li a {
					display: block;
					background: #fff;
					height: 38px;
					color: #000;
					}
				#pagenav ol li a:hover {
					background: none;
					color: #fff;
					text-decoration: none;
					}
		#pagenav .prev,
		#pagenav .next {
			width: 80px;
			height: 40px;
			background: #FF6600;
			border: 1px solid #FF6600;
			margin-right: -1px;
			color: #fff;
			text-align: center;
			float: left;
			line-height: 40px;
			}
		#pagenav .next {left: inherit;}
		#pagenav .prev:before {
			content: "<";
			margin-right: 5px;
			color: #fff;
			}
		#pagenav .next:after {
			content: ">";
			margin-left: 5px;
			color: #fff;
			}
		#pagenav .prev a,
		#pagenav .next a {color: #fff;}
		#pagenav .back {
			width: 270px;
			margin: 0 auto;
			color: #fff;
			}

}

					
/* ▼▼▼ 480px~768px
=====================================*/
@media screen and (max-width: 768px) {	

#wrapper {width: 100%;}
#screen {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color:rgba(0,0,0,0.6);
	z-index: 200;
	}
.span_1,.span_2,.span_3,.span_4,.span_5,.span_6,.span_7,.span_8,.span_9,.span_10,.span_11,.span_12{width: 100%;}
.col {margin: 0;}

.box:hover,
.topics:hover,
header ul#tnav li:hover,
#ranking .content ol li:hover {
	/* background: #eee!important; */
	-ms-filter: "alpha(opacity=100)";
	-moz-opacity:1;
	-khtml-opacity: 1;
	opacity: 1;
	}
	.topics a,
	header ul#tnav li a,
	#ranking .content ol li a {text-decoration: underline;}
	
.spmain{
margin-top: 63px;
}	
	
	
	
/* site_title style
-------------------------------------*/
#site_title {
	overflow: hidden;
	width: 175px;
	height: auto;
	/* margin-left: 15px; */
	margin: 15px 0 0 15px;
	}
		
/* path style
-------------------------------------*/
#path {
	margin: 0 auto 0;
	overflow: hidden;
	width: 100%;
	background-color: #fff;
	}
	#path ol {
	width: 100%;
	margin: 0 auto;
	}
	#path li {
		height: 30px;
		margin-right: 0;
		padding: 0;
		background-color: #eee;
		position: relative;
		line-height: 30px;
		}
	#path li:after {
		content: "";
		background: #fff url(/-/Media/coco/common/image/path_bg.png) no-repeat left center;
		background-size: 5px 30px;
		margin-left: 10px;
		color: #333;
		position: absolute;
		top: 0;
		right: 0;
		width: 5px;
		height: 30px;
		}
	#path li:last-child {
		background-color: #fff;
		padding: 0 10px;
		}
	#path li:last-child:after {
		content: "";
		background: none;
		}
		#path li a {
			display: block;
			padding: 0 15px 0 10px;
			line-height: 30px;
			}
			
			
/*
#path {
	margin: 0 auto 0;
	overflow: hidden;
	width: 100%;
	background-color: #fff;
	}
	#path ol {
	width: 100%;
	margin: 0 auto;
	}
	#path li {
		height: 30px;
		margin-right: 0;
		padding: 0;
		background-color: #fff;
		position: relative;
		line-height: 30px;
		}
	#path li:after {
		content: "";
		background: #fff url(/-/Media/coco/common/image/path_bg.png) no-repeat left center;
		background-size: 5px 30px;
		margin-left: 10px;
		color: #333;
		position: absolute;
		top: 0;
		right: 0;
		width: 5px;
		height: 30px;
		}
	#path li:first-child {background:#eee; }
	#path li:first-child:after {
		content: "";
		background: #fff url(/-/Media/coco/common/image/path_bg_first.png) no-repeat left center;
		background-size: 5px 30px;
		margin-left: 10px;
		color: #333;
		position: absolute;
		top: 0;
		right: 0;
		width: 5px;
		height: 30px;
		}
	#path li:last-child {
		background-color: #fff;
		padding: 0 10px;
		}
	#path li:last-child:after {
		content: "";
		background: none;
		}
		#path li a {
			display: block;
			padding: 0 15px 0 10px;
			line-height: 30px;
			}
*/

			
			
			
			

		
/* header style
-------------------------------------*/
header {
	width: 100%;              	/* 横幅100%　*/
	height: 61px;
	background: #fff;
	padding: 0;
	position: relative;
    position: fixed;            /* ヘッダーの固定 */
    top: 0px;                   /* 位置(上0px) */
    left: 0px;                  /* 位置(右0px) */
    z-index: 99999;             
	}
	header .border {
		width:100%;
		height: 3px;
		background:#005AAC url("/-/Media/coco/common/image/header_border.jpg") no-repeat scroll left top;
		}
#header_inner {
	height: 61px;
	background: #fff;
	}
	header ul#tnav li {float: right;}
	header .search {display: none;}
#home header {height: 63px;}
	header ul#tnav li.menu {
		display: block;
		width: 61px;
		height: 60px;
		background: #fff url(/-/Media/coco/common/image/menu_sp.png) no-repeat left top;
		background-size: 60px 60px;
		z-index: 2000;
		text-indent: -9999px;
		}
	header ul#tnav li.registration {display: none;}
	header ul#tnav li.login {
		display: block;
		width: 61px;
		height: 60px;
		background: #fff url(/-/Media/coco/common/image/header_login_sp.png) no-repeat left top;
		background-size: 60px 60px;
		z-index: 2000;
		text-indent: -9999px;
		}
	header ul#tnav li.mypage {
		display: block;
		width: 61px;
		height: 60px;
		background: #fff url(/-/Media/coco/common/image/header_mypage_sp.png) no-repeat left top;
		background-size: 60px 60px;
		z-index: 2000;
		text-indent: -9999px;
		}
		
		
		
		

/* #today {margin-top: 63px;}		 */
#c_navi {display: none;}


/* google search
-------------------------------------*/
#___gcse_0{
    width:100%;
    margin:15px 0;
    padding: 0 1.5%;
    position:relative;
    float: left;
}



	
/* gnav style
-------------------------------------*/
#gnav {
	width: 100%;
	height: auto;
/* 	height: calc( 100vh - 100px ); */
/* 	overflow: auto; */
	margin: 0;
	position: absolute;
	top: 61px;
	left: 0;
	z-index: 1000;
	background: #fff;
	}
	#gnav ul {
		width: 100%;
		border-top: 1px solid #ccc;
		/* overflow: hidden; */
		}
	#gnav ul > li {
		float: none;
		width: 100%!important;
		max-width: 100%!important;
		height: auto;
		text-indent: 0;
		background-color: #fff;
		}
		#gnav ul > li img {width: 100%;}
	#gnav > p {width: 100%!important;}
	#gnav > p > img {width: 100%;}
#gnav #searchform {
	float: none;
	width: 95%;
	margin: 15px auto;
	}
#gnav #keywords {  
    width: 100%;  
    font-size: 16px; 
	} 	
	
	
/* side style
-------------------------------------*/
#side {
	float: none;
	width: 100%;
	overflow: hidden;
	background-color: #fff;
	padding-bottom: 0;
	margin-top: 20px;
	}

/* mainVisual_area02 style
-------------------------------------*/
.mainVisual_area02 {
	width: 100%;
	background-size: 3px 6px;
	overflow: hidden;
	border-bottom: none;
	margin-bottom: none;
	overflow: hidden;
	}
#mainVisual02 {
	width: 100%;
	max-width: 90.6vw;
	margin: 0 auto 70px;
	position: relative;
	background-color: #fff;
	}
.mainVisual_area02 h3 {
	text-align: center;
	margin: 30px auto;
	width: 43.43vw;
	}
	#mainVisual02 .slider {padding-left: 0;}
	#mainVisual02 a.bx-prev,
	#mainVisual02 a.bx-next {
		display: block;
		width: 25px;
		height: 25px;
		position: absolute;
		z-index: 100;
		top: 50%;
		margin-top: -15px;
		text-indent: -9999px;
		outline: none;
		}
		#mainVisual02 a.bx-prev {
			background: url(/-/Media/coco/common/image/arrow_visual01_sp.png) no-repeat left top;
			background-size: 25px 25px;
			left: -10px;
			}
		#mainVisual02 a.bx-next {
			background: url(/-/Media/coco/common/image/arrow_visual02_sp.png) no-repeat left top;
			background-size: 25px 25px;
			right: -10px;
			}
		#mainVisual02 .bx-pager {
			float: left;
			position: relative;
			top: 22px;
			left: 50%;
			}
			#mainVisual02 .bx-pager-item {
				float: left;
				position: relative;
				left: -50%;
				width: 15px;
				height: 15px;
				margin-right: 10px;
				text-indent: -9999px;
				}
				#mainVisual02 .bx-pager-item a {
					display: block;
					background: url(/-/Media/coco/common/image/slider_page01_sp.png) no-repeat left top;
					background-size: 10px 10px;
					outline: none;
					}
				#mainVisual02 .bx-pager-item a.active {
					background: url(/-/Media/coco/common/image/slider_page02_sp.png) no-repeat left top;
					background-size: 10px 10px;
					}	

/* keyword style
-------------------------------------*/
#keyword {
	background-color: #fff;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	overflow: hidden;
	padding: 20px 0 10px;
	}
#keyword h3 {
	text-align: center;
	margin-bottom: 15px;
	width: 52.34vw;
	}
	#keyword ul {
		width: 90.6vw;
		margin: 0 auto;
		overflow: hidden;
		text-align: center;
		}
		#keyword li {
			font-size: 3.43vw;
			border: 1px solid #ccc;
			margin: 0 10px 10px 0;
			display: inline-block;
			padding: 2px 5px;
			}
		#keyword li:last-child {margin-right: 0;}
		
		
/* ranking style
-------------------------------------*/
#ranking {
	overflow: hidden;
	padding: 0;
	border-bottom: 1px solid #ccc;
	}
#ranking .tab {
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	}
	#ranking .tab li {
		float: left;
		text-indent: -9999px;
		height: 12.5vw;
		width: 50%;
		}
	#ranking .tab li.tub1 {
		background: url("/-/Media/coco/common/image/tub_ranking_sp.png") no-repeat scroll left top;
		background-size: 100% 12.5vw;
		}
	#ranking .tab li.tub2 {
		background: url("/-/Media/coco/common/image/tub_recommend_sp.png") no-repeat scroll left top;
		background-size: 100% 12.5vw;
		}
	#ranking .tab li.tub1.select {
		background: url("/-/Media/coco/common/image/tub_ranking_sp_active.png") no-repeat scroll left top;
		background-size: 100% 12.5vw;
		}
	#ranking .tab li.tub2.select {
		background: url("/-/Media/coco/common/image/tub_recommend_sp_active.png") no-repeat scroll left top;
		background-size: 100% 12.5vw;
		}
	#ranking .content {
		width: 100%;
		overflow: hidden;
		margin: 0 auto;
		padding: 25px 0;
		border-top: none;
		border-bottom: none;
		}
	#ranking .content > li {
		width: 90.6vw;
		margin: 0 auto;
		}
	#ranking .content > li.hide {display:none;}
	#ranking .content ol li {
		width: 90.6vw;
		float: none;
		position: relative;
		margin: 0 auto;
		border-bottom: 1px solid #ccc;
		overflow: hidden;
		padding: 30px 0;
		}
		#ranking .content ol li:last-child {
			margin-right: auto;
			border-bottom: none;
			}
		#ranking .content li .rank {
			width: 8.75vw;
			position: absolute;
			top: 10px;
			left: 0;
			}
		#ranking .content ol li .photo {
			float: left;
			width: 31.25vw;
			margin: 0 2.34vw 0 0 ; 
			}
		#ranking .content ol li .txt {
			margin-bottom: 10px;
			font-size: 4.06vw;
			line-height: 1.4;
			float: left;
			width: 54.68vw;
			}

/* benefits style
-------------------------------------*/
#benefits{
	width: 100%;
	margin: 0 auto;
	float: none;
	padding-left: 0;
	overflow: hidden;
	background-color: #EFEDD8;
	padding: 30px 0;
	}			
#benefits .benefits_inner{
	background-color: #fff;
	width: 90.6vw;
	margin: 0 auto;
	overflow: hidden;
	}
	#benefits .benefits_inner h3 {
		margin: 25px auto 20px;
		width: 73.43vw;
		}
	#benefits table {
		border-top: 1px solid #ccc;
		width: 78.12vw;
		margin: 0 auto;
		margin-bottom: 25px;
		}
	#benefits table th {
		width: 13%;
		color: #FF6600;
		font-size: 4.06vw;
		padding: 20px 0;
		border-bottom: 1px solid #ccc;
		}
	#benefits table td {
		width: 87%;
		font-size: 4.06vw;
		padding: 20px 20px 20px 0;
		border-bottom: 1px solid #ccc;
		}
	#benefits ul.btn_area {
		width: 90.6vw;
		margin: 0 auto;
		}
	#benefits ul.btn_area li.catch{
		font-size: 4.06vw;
		text-align: center;
		}
	#benefits ul.btn_area li.benefits_btn {
		margin: 0 auto;
		width: 78.12vw;
		}
		
		
/* benefits_login style
-------------------------------------*/
#benefits_login {
	width: 100%;
	margin: 0 auto;
	float: none;
	padding-left: 0;
	overflow: hidden;
	background-color: #EFEDD8;
	padding: 30px 0;
	}			
#benefits_login .benefits_inner{
	background-color: #fff;
	width: 90.6vw;
	margin: 0 auto;
	overflow: hidden;
	}
	#benefits_login .benefits_inner h3 {
		margin: 25px auto 20px;
		width: 73.43vw;
		}
	#benefits_login table {
		border-top: 1px solid #ccc;
		width: 78.12vw;
		margin: 0 auto;
		margin-bottom: 25px;
		}
	#benefits_login table th {
		width: 13%;
		font-size: 4.06vw;
		padding: 20px 0;
		border-bottom: 1px solid #ccc;
		}
	#benefits_login table td {
		width: 87%;
		font-size: 4.06vw;
		padding: 20px 20px 20px 0;
		border-bottom: 1px solid #ccc;
		}
	#benefits_login ul.btn_area {
		width: 90.6vw;
		margin: 0 auto;
		}
	#benefits_login ul.btn_area li.catch{
		font-size: 4.06vw;
		text-align: center;
		}
	#benbenefits_loginefits ul.btn_area li.benefits_btn {
		margin: 0 auto;
		width: 75%;
		}
		
		
/* benefits_login marketo style
-------------------------------------*/		
#benefits .marketo {
	float: none;
	padding: 20px 4%;
	width: 100%;
	margin: -30px 0;
	}
	#benefits .marketo .benefits_inner {
		background: none;
	    margin: 0 auto;
	    overflow: hidden;
	    width: 90.6vw;
		}	
		#benefits .marketo h3 {
				margin: 0 auto 20px;
				width: 80%;
				}
		#benefits .marketo h3 img {width: 100%;}
		#benefits .marketo .catch {
			font-size: 4.06vw;
			margin: 15px auto 15px;
			}
		#benefits .marketo .benefits_marketo_btn {
			margin: 0 auto;
			float: none;
			width: 78.12vw;
			}
		
		
			
			
/* contents_list style
-------------------------------------*/
#contents_list {display: block;}
	#contents_list p.contents_list_title {
		padding: 20px 0;
		border-bottom: 4px solid #005AAC;
		margin: 0 auto;
		text-align: center;
		}	
	#contents_list ul li img {width: 100%;}
				

/* footer style
-------------------------------------*/
footer {
	width: 100%;
	border-top: none;
	}
	#site_btn {
	background-color: #fff;
	padding: 15px 0;
	}
	#site_btn ul {
		margin: 15px auto;
		overflow: hidden;
		width: 90.6vw;
		}
		#site_btn ul li {
				margin: 0 auto 15px;
				float: none;
				width: 90.6vw;
				}
		#site_btn ul li:nth-child(3n) {margin-right: auto;}
		#site_btn ul li img {width: 100%;}
#footer_inner {
	width: 90.6vw;
	margin: 20px auto 0;
	overflow: hidden;
	}
	#footer_inner .fnav {
		overflow: hidden;
		margin-bottom: 30px;
		}
		#footer_inner .fnav ul {
			width: 100%;
			float: none;
			margin-bottom: 10px;
			}
		#footer_inner .fnav ul.anothersite {
		margin-top: 20px;
		border-top: 1px solid  #ccc;
		padding-top: 10px;
		}
			#footer_inner .fnav ul li {
			margin-bottom: 10px;
			font-size: 4.06vw;
			}
			#footer_inner .fnav ul li.external:after {
				content:url(/-/Media/coco/common/image/footer_icon.png);
				margin-left: 10px;
				}
	#footer_inner .footer_logo {
		text-align: center;
		margin-bottom: 15px;
		width: 42%;
		margin: 0 auto 10px;
		}
		
		#footer_inner .fnav02 > ul {
			width: 100%;
			margin-bottom: 10px;
			text-align: left;
			}
			#footer_inner .fnav02 > ul > li {
				margin: 0 0 10px 0;
				display: block;
				font-size: 4.06vw;
				}
			#footer_inner .fnav02 > ul > li:last-child {margin-bottom: 0;}
			#footer_inner .fnav02 > ul > li.external:after {
				content:url(/-/Media/coco/common/image/footer_icon.png);
				margin-left: 10px;
				}
/* pagetop style
-------------------------------------*/
.pagetop {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 2000;
	width: 40px;
	}
/* Copyright style
-------------------------------------*/
#copyright {
	font-size: 11px;
	color: #666;
	clear: both;
	text-align: center;
	}
	

/* Content AI
-------------------------------------*/
.RTP_RCMD2 {margin-top: 20px !important;}
.rtp_rcmd2_label a {font-size: 15px !important;}
.rtp_rcmd2_description_container {font-size: 13px !important;}			
.rtp_rcmd2_link_container a	{font-size: 13px !important;}
.rtp_rcmd2_item {max-width: 100% !important;}	
	
	

}