@charset "UTF-8";
/* popular.css */

/* Clearfix
---------------------------------------------------------- */
.clearfix,
#featured-Area,
#New-ArticleTab,
#New-ArticleTab ul,
#Aacilities-RankingTab ul li,
#sideM {
	display: block;
	min-height: 1%;
}
.clearfix:after,
#featured-Area:after,
#New-ArticleTab:after,
#New-ArticleTab ul:after,
#Aacilities-RankingTab ul li:after,
#sideM:after {
	clear: both;
	content:".";
	display: block;
	height: 0;
	visibility: hidden;
}
* html .clearfix,
* html #featured-Area,
* html #New-ArticleTab,
* html #New-ArticleTab ul,
* html #Aacilities-RankingTab ul li,
* html #sideM {
	height: 1%;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}

.lDef #main {
	float: right;
	width: 760px;
}
@media only print, screen and (max-width: 40.063em) {
.lDef #main {
	float: none;
	width: 100%;
}
}



/* ===============================
header
================================ */
header.featured-Area_ttl { }
header.featured-Area_ttl h1 {
	width: 660px;
	/*height: 300px;*/
	margin: 0 0 2%;
	padding: 0;
}
header.featured-Area_ttl h1 img { width: 100%;}
.featured-Area_copy {
	margin: 0 0 3%;
	font-size: 116%;
}
@media only print, screen and (max-width: 40.063em) {
header.featured-Area_ttl { }
header.featured-Area_ttl h1 {
	width: 100%;
	height: auto;
	margin: 0 0 2%;
	padding: 0;
}
header.featured-Area_ttl h1 img {}
.featured-Area_copy {
	margin: 0 0 3%;
	padding: 2%;
	font-size: 90%;
}

}


/* ===============================
Keyword
================================ */
.KeywordBox { border: solid 1px #333;}
.KeywordBox p {
	border-bottom: solid 2px #333;
	color: #333;
	background: #FFF;
}
.KeywordBox ul {}
.KeywordBox ul li {}
.KeywordBox ul li a {
	max-width: 30%;
	border: solid 1px #CCC;
	border-radius: 6px;
	color: #333;
	background: #FFF;
}
.KeywordBox ul li a:hover {
	color: #FFF;
	background: #CCC;
}
	.KeywordBox ul.displayword li:nth-of-type(n+4) { display: inline;}

@media only print, screen and (max-width: 40.063em) {
.KeywordBox { border: none;}
.KeywordBox p {
	border-bottom: none;
	color: #FFF;
	background: #61C8CB;
}
.KeywordBox ul { margin: 5% 0 0; padding: 0 2%;}
.KeywordBox ul li {}
.KeywordBox ul li a {
	max-width: 60%;
	color: #333;
	border: none;
	background: rgba(97,200,203,0.3);
}
.KeywordBox ul li a:hover {
	color: #FFF;
	background: #CCC;
}
	.KeywordBox ul.displayword li:nth-of-type(n+4) { display: none;}

.KeywordBtn { width: 80%;}
.KeywordBtn a {
	color: #61C8CB;
	border: solid 1px #61C8CB;
	background: #FFF;
	display: block;
}
.KeywordBox ul li a:hover {}
}




/* ===============================
Tab
================================ */
#featuredTab ul.featuredTab-Navi {}
#featuredTab ul.featuredTab-Navi li {}
#featuredTab ul.featuredTab-Navi li a {
	width: 35%;
	color: #333;
	border-top: solid 1px #333;
	border-left: solid 1px #333;
	border-right: solid 1px #333;
}
#featuredTab ul.featuredTab-Navi li a:hover {
	color: #FFF;
	border-top: solid 1px #AAA;
	border-left: solid 1px #AAA;
	border-right: solid 1px #AAA;
	background: #AAA;
}

/*featuredTab-Area*/
#featuredTab-Area {
	padding: 3% 0 0;
	border-top: solid 1px #333;
}
#New-ArticleTab {}
#New-ArticleTab ul {}
#New-ArticleTab ul li {
	width: 47%;
	margin: 0 0 4%;
}
#New-ArticleTab ul li:nth-child(odd) {}
#New-ArticleTab ul li:nth-child(even) {}
#New-ArticleTab ul li a dl {}
#New-ArticleTab ul li a dt { width: 100%;}
#New-ArticleTab ul li a dt img { width: 100%;}
#New-ArticleTab ul li a dd {
	padding: 3% 4%;
	font-size: 116%;
	color: #333;
	background: #FFF4E7;
}
#New-ArticleTab ul li a {}
#New-ArticleTab ul li a:hover dd { background: #FFE1B9;}



#Aacilities-RankingTab {}
#Aacilities-RankingTab ul {}
#Aacilities-RankingTab ul li {
	width: 100%;
	margin: 0 0 2%;
	padding: 0 0 2%;
	border-bottom: solid 1px #CCC;
}
#Aacilities-RankingTab ul li a dl { padding: 0 2%;}
#Aacilities-RankingTab ul li a dt {
	width: 160px;
	height: 128px;
	margin-bottom: 10px;
	vertical-align: top;
	overflow: hidden;
	position: relative;
	object-fit: contain;
	float: left;
	clear: both;
}
#Aacilities-RankingTab ul li a dt img {
	width: auto;
	  height: auto;
	  max-width: 100%;
	  max-height: 100%;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  -webkit-transform: translate(-50%, -50%);
	  -ms-transform: translate(-50%, -50%);
	  transform: translate(-50%, -50%);
}
#Aacilities-RankingTab ul li a dd {
	width: 73%;
	margin: 0 auto;
	padding: 0 0 0 2%;
	display: inline-block;
}
#Aacilities-RankingTab ul li a dd.Aacilities-Rankingttl {
	font-size: 126%;
	font-weight: bold;
	color: #333;
}
#Aacilities-RankingTab ul li a dd.Aacilities-Rankingttl p { font-size: 116%; line-height: 1.3;}
#Aacilities-RankingTab ul li a dd.Aacilities-Rankingtxt {
	margin: 1% 0 0;
	font-size: 108%;
	font-weight: normal;
	color: #888;
}


#Aacilities-RankingTab ul li a { display: block;}
#Aacilities-RankingTab ul li a:hover {
	opacity: 0.6;
	filter: alpha(opacity=60);
	-ms-filter: "alpha(opacity=60)";
}

#Aacilities-RankingTab ul li:first-child a dd.Aacilities-Rankingttl:before { margin: 0 1% 0 0; content: url(../images/icon003.png);}
#Aacilities-RankingTab ul li:nth-child(2) a dd.Aacilities-Rankingttl:before { margin: 0 1% 0 0; content: url(../images/icon004.png);}
#Aacilities-RankingTab ul li:nth-child(3) a dd.Aacilities-Rankingttl:before { margin: 0 1% 0 0; content: url(../images/icon005.png);}



/* Tab */
#SpotTabBox {
	min-width: 320px;
	max-width: 660px;
	background: #fff;
}

#SpotTabBox section {
	padding: 20px 0 0;
	border-top: 1px solid #333;
}
#SpotTabBox input { display: none;}

#SpotTabBox label {
	width: 49.6%;
	color: #bbb;
	border: 1px solid transparent;
}

#SpotTabBox label[for*='1']:before {
	content: url(../images/icon001.png);
	position: absolute;
	top: 30%;
	left: 30%;
}
#SpotTabBox label[for*='2']:before {
	content: url(../images/icon002.png);
	position: absolute;
	top: 30%;
	left: 16%;
}

#SpotTabBox label:hover {
	color: #888;
	cursor: pointer;
	border-top: solid 1px #CCC;
	border-left: solid 1px #CCC;
	border-right: solid 1px #CCC;
}

#SpotTabBox input:checked + label {
	color: #555;
	border: 1px solid #333;
	border-top: 1px solid #333;
	border-bottom: 1px solid #fff;
}

@media only print, screen and (max-width: 40.063em) {
#featuredTab ul.featuredTab-Navi li a {
	width: 48%;
	font-size: 108%;
	font-weight: bold;
	color: #333;
}
#featuredTab ul.featuredTab-Navi li:first-child {
	border-top: solid 1px #333;
	border-right: solid 1px #333;
	border-bottom: none;
}
#featuredTab ul.featuredTab-Navi li:last-child {
	border-top: solid 1px #333;
	border-left: solid 1px #333;
	border-bottom: none;
}
#featuredTab ul.featuredTab-Navi li a:hover {
	font-weight: normal;
	color: #FFF;
	border-top: solid 1px #AAA;
	border-left: solid 1px #AAA;
	border-right: solid 1px #AAA;
	background: #AAA;
}

/*featuredTab-Area*/
#featuredTab-Area { border-top: solid 1px #333;}
#New-ArticleTab {}
#New-ArticleTab ul {}
#New-ArticleTab ul li {
	width: 100%;
	margin: 2% 0;
	padding: 2% 0;
	border-bottom: solid 1px #CCC;
}
#New-ArticleTab ul li a dt {
	width: 100px;
	height: 80px;
	margin-bottom: 10px;
}
#New-ArticleTab ul li a dt img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#New-ArticleTab ul li a dd {
	width: 70%;
	padding: 0 0 0 2%;
	font-size: 100%;
	color: #333;
	background: none;
}
#New-ArticleTab ul li a:hover dd { background: #FFF;}

@media only print, screen and (max-width: 20em) {
#New-ArticleTab ul li a dd {
	width: 65%;
	font-size: 95%;
}
}

/* MORE Button */
.New-Article-MORE {
	width: 80%;
	margin: 6% auto 0;
	padding: 2% 0;
	font-size: 95%;
	line-height: 2.5;
	border: solid 1px #333;
	position: relative;
}


#Aacilities-RankingTab {}
#Aacilities-RankingTab ul {}
#Aacilities-RankingTab ul li {
	width: 100%;
	border-bottom: solid 1px #CCC;
}
#Aacilities-RankingTab ul li a dt {
	width: 100px;
	height: 80px;
	margin-bottom: 10px;
}
#Aacilities-RankingTab ul li a dt img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#Aacilities-RankingTab ul li a dd { width: 72%;}
@media only print, screen and (max-width: 20em) {
#Aacilities-RankingTab ul li a dd { width: 67%;}
}

#Aacilities-RankingTab ul li a dd.Aacilities-Rankingttl { color: #333;}
#Aacilities-RankingTab ul li a dd.Aacilities-Rankingtxt { color: #999;}

#Aacilities-RankingTab ul li a { display: block;}

#Aacilities-RankingTab ul li:first-child a dd.Aacilities-Rankingttl:before { margin: 0 2% 0 0; content: url(../images/icon003.png);}
#Aacilities-RankingTab ul li:nth-child(2) a dd.Aacilities-Rankingttl:before { margin: 0 2% 0 0; content: url(../images/icon004.png);}
#Aacilities-RankingTab ul li:nth-child(3) a dd.Aacilities-Rankingttl:before { margin: 0 2% 0 0; content: url(../images/icon005.png);}


/* Tab */
#SpotTabBox {
	min-width: 100%;
	max-width: 100%;
	margin: 10% auto 8%;
}
#SpotTabBox label { width: 49.25%;}
@media only print, screen and (max-width: 20em) {
#SpotTabBox label { width: 49.1%;}
}


#SpotTabBox label[for*='1']:before { content: none;}
#SpotTabBox label[for*='2']:before { content: none;}
#SpotTabBox label:hover {
	color: #888;
	cursor: pointer;
	border-top: solid 1px #CCC;
	border-left: solid 1px #CCC;
}
#SpotTabBox input:checked + label[for*='1'] {
	color: #555;
	border: 1px solid #333;
	border-top: 1px solid #333;
	border-bottom: 1px solid #fff;
	border-left: none;
}
#SpotTabBox input:checked + label[for*='2'] {
	color: #555;
	border: 1px solid #333;
	border-top: 1px solid #333;
	border-bottom: 1px solid #fff;
	border-right: none;
}

/* Keyword */
.hidden_box label {
    width: 80%;
	margin: 5% auto 0;
	padding: 2%;
	color: #61C8CB;
	border: solid 1px #61C8CB;
	position: relative;
}
.hidden_box label::after {
  content: '';
  width: 10px;
  height: 10px;
  border: 0px;
  border-top: solid 1px #61C8CB;
  border-right: solid 1px #61C8CB;
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  position: absolute;
  top: 38%;
  left: 30%;
}
.hidden_box label:hover { background: #FFF;}
.hidden_box .hidden_show {
    height: 0;
	border-bottom: solid 3px #61C8CB;
}
.hidden_box input:checked ~ .hidden_show {
    height: auto;
    opacity: 1;
}
}

.hidden_box label::after { content: none;}
.New-Article-MORE::after { content: none;}
@media only print, screen and (max-width: 40.063em) {
.hidden_box label::after {
  content: '';
  width: 10px;
  height: 10px;
  border: 0px;
  border-top: solid 1px #61C8CB;
  border-right: solid 1px #61C8CB;
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  position: absolute;
  top: 38%;
  left: 30%;
}
.New-Article-MORE::after {
  content: '';
  width: 10px;
  height: 10px;
  border: 0px;
  border-top: solid 1px #333;
  border-right: solid 1px #333;
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  position: absolute;
  top: 38%;
  left: 30%;
}
}
/* ===============================
SpotBox
================================ */
.SpotBox h1 span { color: #FFCE45;}
.SpotBox .retune-TOP a {
	width: 40%;
	color: #FFF;
	background: #d75354;
	position: relative;
}
.SpotBox .retune-TOP a::after {
  content: '';
  width: 12px;
  height: 12px;
  border: 0px;
  border-top: solid 2px #FFF;
  border-right: solid 2px #FFF;
  -ms-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  position: absolute;
  top: 38%;
  left: 24%;
}
.SpotBox .retune-TOP a:hover { color: #888; background: rgba(97,200,203,0.5);}
.SpotBox .retune-TOP a:hover::after {
  content: '';
  width: 12px;
  height: 12px;
  border: 0px;
  border-top: solid 2px #888;
  border-right: solid 2px #888;
  -ms-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  position: absolute;
  top: 38%;
  left: 24%;
}

.SpotList ul li dl dt.SpotList-title {
	border-bottom: solid 1px #d75354;
	border-top: solid 3px #d75354;
}

.SpotList ul li dl.SpotData { background: #FFF4E7;}
.SpotList ul li dl.SpotData dd.SpotLink a {
	width: 35%;
	color: #333;
	border: solid 1px #333;
	position: relative;
}
.SpotList ul li dl.SpotData dd.SpotLink a::after {
  content: '';
  width: 12px;
  height: 12px;
  border: 0px;
  border-top: solid 1px #333;
  border-right: solid 1px #333;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 38%;
  left: 18%;
}
.SpotList ul li dl.SpotData dd.SpotLink a:hover {
	color: #FFF;
	border: solid 1px #666;
	background: #666;
}
.SpotList ul li dl.SpotData dd.SpotLink a:hover::after {
  content: '';
  width: 12px;
  height: 12px;
  border: 0px;
  border-top: solid 1px #FFF;
  border-right: solid 1px #FFF;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 38%;
  left: 18%;
}

.imgType01 {text-align: center;}
.small1 { max-width: 480px;}
.medium { max-width: 560px;}


@media only print, screen and (max-width: 40.063em) {
.SpotBox .retune-TOP a {
	width: 70%;
	color: #FFF;
	background: #d75354;
	position: relative;
}
.SpotBox .retune-TOP a::after {
  content: '';
  width: 10px;
  height: 10px;
  border: 0px;
  border-top: solid 2px #FFF;
  border-right: solid 2px #FFF;
  -ms-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  position: absolute;
  top: 38%;
  left: 30%;
}
.SpotBox .retune-TOP a:hover::after {
  content: '';
  width: 10px;
  height: 10px;
  border: 0px;
  border-top: solid 2px #888;
  border-right: solid 2px #888;
  -ms-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  position: absolute;
  top: 38%;
  left: 30%;
}

.SpotList ul li dl dt.SpotList-title {
	border-bottom: solid 1px #d75354;
	border-top: solid 3px #d75354;
}
.SpotList ul li dl.SpotData { background: #FFF4E7;}
.SpotList ul li dl.SpotData dd.SpotLink a {
	width: 80%;
	color: #333;
	border: solid 1px #333;
	position: relative;
}
.SpotList ul li dl.SpotData dd.SpotLink a::after {
  display: block;
  content: '';
  position: absolute;
  top: 39%;
  left: 28%;
  width: 9px;
  height: 9px;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.SpotList ul li dl.SpotData dd.SpotLink a::after {
  content: '';
  width: 10px;
  height: 10px;
  border: 0px;
  border-top: solid 1px #333;
  border-right: solid 1px #333;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 38%;
  left: 28%;
}
.SpotList ul li dl.SpotData dd.SpotLink a:hover {
	color: #FFF;
	background: #333;
}
.SpotList ul li dl.SpotData dd.SpotLink a:hover::after {
  content: '';
  width: 10px;
  height: 10px;
  border: 0px;
  border-top: solid 1px #FFF;
  border-right: solid 1px #FFF;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 38%;
  left: 28%;
}

.small1 { max-width: 80%;}
.medium { max-width: 100%;}
}



/* Ranking */
/*side*/
#RankingBox .rank03 ul li .imgRank01 {
			width: 62px;
			height: 50px;
		}
#RankingBox .rank03 ul li .imgRank01 img { width: 62px;}

@media only print, screen and (max-width: 40.063em) {
	#RankingBox .rank03 ul li .imgRank01 {
			width: 25%;
			height: auto;
	}
	#RankingBox .rank03 ul li .imgRank01 img { width: 100%;}
			#RankingBox .rank03 ul li .imgRank01 .img03 {
				border: 1px solid #ccc;
				width: 25%;
				height: auto;
				background: #000;
			}
			#RankingBox .rank03 ul li .imgRank01 .img03 { background: #fff;}
		#RankingBox .rank03 ul li dl {
			width: 72%;
		}
}