@charset 'UTF-8';
/* CSS Document */

/* z-index

9999	nav ul li ul.sub

*/

/* -------------------------------------------------------- common */
body {
	background: #f2f2f2;
}
body.top {
	background: #fff;
}
div.wrapper {
	box-sizing: border-box;
}
div.inner {
	width: 1200px;
	margin: 0 auto;
}
.fl {
	float: left;
}
.fr {
	float: right;
}
a {
	outline: none;
}
a:focus, *:focus {
	outline: none;
}
.default {
	display: block;
}
.responsive {
	display: none;
}
/* -------------------------------------------------------- header */

header {
	/* border-top: 5px solid #e82d26; */
	position: relative;
	z-index: 9999;
	border-bottom: 1px solid #e7e7e7;
	background: #fff;
}
header div.top div.inner {
	padding: 10px 0;
}
header div.logo {
	float: left;
	width: 240px;
	height: 60px;
	margin-right: 20px;
	padding: 20px 0 0;
}
header div.logo img {
	display: block;
	width: 240px;
	height: 60px;
}
header div.menuButton {
	display: none;
}
/* -------------------------------------------------------- nav */

nav {
	width: 600px;
	position: relative;
	float: left;
	margin-right: 20px;
}
nav ul {
	width: 100%;
	margin: 0 auto;
}
nav ul li {
	color: #333;
	float: left;
	width: 100px;
}
nav ul li a {
	/* color: #003e6c; */
	font-size: 1.4rem;
	line-height: 1.2;
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 1.5em 0;
	transition: all .1s ease-in-out;
	text-align: center;
	text-decoration: none;
	color: #333;
	background: #fff;
}
nav ul li a span {
	display: block;
	font-size: 2.8rem;
	margin-bottom: 10px;
}
nav ul li a span.icon-onsen {
	color: #ff5c63;
}
nav ul li a span.icon-sightseeing {
	color: #ffa63d;
}
nav ul li a span.icon-flag {
	color: #f5cf4a;
}
nav ul li a span.icon-event {
	color: #6bce50;
}
nav ul li a span.icon-model {
	color: #cf8ae5;
}
nav ul li a span.icon-feature {
	color: #40befb;
}
nav ul li a:hover {
	background: #efefef;
}
nav ul li a::before {
	position: absolute;
	top: 50%;
	left: 0;
	width: 1px;
	height: 60px;
	content: '';
	-webkit-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	-o-transform: translate(0, -50%);
	transform: translate(0, -50%);
	background: #e7e7e6;
}
nav ul li:nth-child(6) a::after {
	position: absolute;
	top: 50%;
	right: 0;
	width: 1px;
	height: 60px;
	content: '';
	-webkit-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	-o-transform: translate(0, -50%);
	transform: translate(0, -50%);
	background: #e7e7e6;
}
/* -------------------------------------------------------- div.utilities */

div.utilities {
	width: 320px;
	padding: 1em 0;
	float: left;
	box-sizing: border-box;
}
/* -------------------------------------------------------- div.utilities top */

div.utilities div.top {
	margin-bottom: 8px;
}
div.utilities div.top ul {
	float: left;
	position: relative;
	padding-right: 10px;
	margin-right: 10px;
}
div.utilities div.top ul::before {
	position: absolute;
	top: 50%;
	right: 0;
	width: 1px;
	height: 28px;
	content: '';
	-webkit-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	-o-transform: translate(0, -50%);
	transform: translate(0, -50%);
	background: #e7e7e6;
}
div.utilities div.top ul li {
	float: left;
	width: 28px;
	height: 28px;
	margin-right: 6px;
}
div.utilities div.top ul li:last-child {
	margin-right: 0;
}
div.utilities div.top ul li a {
	width: 28px;
	height: 28px;
	box-sizing: border-box;
	border: 2px solid #e7e7e6;
	border-radius: 100px;
	display: block;
	text-align: center;
	position: relative;
}
div.utilities div.top ul li a:hover {
	background: #efefef;
}
div.utilities div.top ul li a:hover::after {
	border: 6px solid transparent;
	border-bottom-color: #71cee7;
	border-top-width: 0;
	width: 0;
	bottom: -12px;
	content: "";
	height: 0;
	left: 50%;
	margin-left: -6px;
	position: absolute;
	width: 0;
	z-index: 0;
}
div.utilities div.top ul li a:hover::before {
	position: absolute;
	bottom: -2.5em;
	width: 100px;
	text-align: center;
	content: "";
	background: #71cee7;
	border-radius: 10px;
	padding: 0.1em 0.5em;
	box-sizing: border-box;
	display: block;
	z-index: 1000;
	font-size: 1.2rem;
	left: -35px;
	color: #fff;
}
div.utilities div.top ul li a.about:hover::before {
	content: "米子とは？";
}
div.utilities div.top ul li a.onsen:hover::before {
	content: "皆生温泉ガイド";
}
div.utilities div.top ul li a.stay:hover::before {
	content: "宿泊情報";
}
div.utilities div.top ul li a.access:hover::before {
	content: "アクセス情報";
}
div.utilities div.top ul li a.map:hover::before {
	content: "なんでもマップ";
}
div.utilities div.top ul li a span {
	display: block;
	padding: 0.2em;
	color: #1baad1;
}
div.utilities div.top ul li a span.icon-access {
	display: block;
	padding: 0.8em 0.2em;
	font-size: 0.9rem;
}
/* -------------------------------------------------------- 言語選択 */

div.utilities div.top div.language {
	float: left;
}
div.utilities div.top div.language span.icon-language {
	float: left;
	color: #1baad1;
	padding: 0.4em 0 0;
	margin-right: 10px;
}
div.utilities div.top div.language form.form {
	float: left;
}
/* セレクトボックス */

div.utilities div.top div.language .form select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-size: 100%;
	height: 28px;
	border-radius: 5px;
	/* border: 1px solid #ccc; */
	border: none;
	min-width: 80px;
	padding: 0;
	cursor: pointer;
	width: 100%;
	background: #fff;
	font-size: 1.4rem;
}
 div.utilities div.top div.language .form select::-ms-expand {
 display: none;
}
div.utilities div.top div.language .form select:focus {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;/* box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6); */
}
div.utilities div.top div.language .form div.selectWrap {
	position: relative;
	/* width: 50%; */
	height: 28px;
	display: inline-block;
}
div.utilities div.top div.language .form div.selectWrap::after {
	position: absolute;
	top: 55%;
	right: 0;
	display: block;
	content: '';
	width: 0;
	height: 0;
	margin-top: -4px;
	border: 4px solid transparent;
	border-top: 4px solid #888;
}
div.utilities div.top div.language .form label:hover {
	color: #2b91fc;
}
/* --------------------------------------------------------  search サイト内検索 */	

div.utilities div.bottom div.searchWrap {
	position: relative;
}
div.utilities div.bottom span.icon-search {
	position: absolute;
	color: #1baad1;
	right: 5px;
	top: 9px;
}
div.utilities div.bottom .search input {
	border-radius: 5px;
	border: none;
	border: 2px solid #e7e7e6;
	background: #fff;
	transition: all 0.2s ease-in-out;
	padding: 0.1em 2em 0.1em 0.5em;
	box-sizing: border-box;
	width: 100%;
	font-size: 1.4rem;
}
div.utilities div.bottom .search input:focus {
	background: #ffffff;
	outline: none;
	border: none;
	border: 2px solid #e7e7e6;/* box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, .6); */
}
 div.utilities div.bottom .search input::-moz-focus-inner {
 padding: 0;
 border: 0;
}
/* -------------------------------------------------------- section common */

div.wrapper {
/* overflow: hidden; */
}
div.wrapper div.displayWrap {
	display: block;
	height: 100%;
	width: 280px;
	float: left;
	margin-right: 20px;
	position: fixed;
	top: 0;
}
div.wrapper div.overlay {
	display: none;
}
div.wrapper div.display {
	height: 100% !important;
	margin-left: -280px;/* background: url(../../img/display_bg.jpg);
	background-size: 500px 950px;
	background-position: right top; */
}
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ --------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------- 動画調整用 */

.vegas-video {
	object-position: 20% center !important;
}
/* */


div.wrapper div.displaySp {
	display: none;
}
/* effect */
/*
@-webkit-keyframes scale {
  0% {
    background-size: 500px 950px;
  }

  50% {
    background-size: 600px 1140px;
  }

  100% {
    background-size: 500px 950px;
  }

}

@keyframes  scale {
  0% {
    background-size: 500px 950px;
  }

  50% {
    background-size: 600px 1140px;
  }

  100% {
    background-size: 500px 950px;
  }

}

.scale {
  -webkit-animation-name: scale;
          animation-name: scale;
  -webkit-animation-duration: 90s;
          animation-duration: 90s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
*/
/* */

div.wrapper div.displayWrap div.label {
	/* width: 180px;
	height: 180px; */
	width: 180px;
	height: 180px;
	display: block;
	position: absolute;
	z-index: 1000;
	bottom: 150px;
	/* top: 90px;
	left: 0; */
	right: 10px;
	transition: all 0.2s ease-in-out;
	display: none; /* 動画用 */
}
div.wrapper div.displayWrap div.label img {
	width: 180px;
	height: 180px;
	display: block;
	position: absolute;
	z-index: 3000;
}
div.wrapper div.displayWrap div.label div.spin {
	width: 180px;
	height: 180px;
	display: block;
	background: url(../../img/display_label_bg.png);
	background-size: 180px 180px;
	position: absolute;
 z-index:: 2000;
}
.spin {
	animation: 50s linear 0s normal none infinite running spin;
	-moz-animation: 50s linear 0s normal none infinite running spin;
	-webkit-animation: 50s linear 0s normal infinite spin;
	-ms-animation: 50s linear 0s normal none infinite spin;
}

/* effect */

@keyframes spin {
0% {
 transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -webkit-transform: rotate(0deg);
 -ms-transform: rotate(0deg);
}
100% {
 transform: rotate(-360deg);
 -moz-transform: rotate(-360deg);
 -webkit-transform: rotate(-360deg);
 -ms-transform: rotate(-360deg);
}
}
/* */

div.panelWrap {
	width: 900px;
	float: left;
	padding: 10px 0 0 300px;
}
div.wrapper div.inner {
}
div.panel {
	width: 280px;
	height: 280px;
	float: left;
	overflow: hidden;
	margin: 0 20px 20px 0;
	border-radius: 20px;
	transition: all 0.2s ease-in-out;
	/* background: #f1f0ee; */
	background: #fff;
}
body.top div.panel {
	background: #f1f0ee;
}
div.panel a {
	display: block;
	position: relative;
	height: 100%;
}
div.panel a div.picture {
	-webkit-filter: brightness(0.9);
	-moz-filter: brightness(0.9);
	-o-filter: brightness(0.9);
	-ms-filter: brightness(0.9);
	filter: brightness(0.9);
	transition: all .2s ease-in-out;
	text-align: center;
	display: table-cell;
	width: 280px;
	height: 280px;
	vertical-align: middle;
}
div.panel a div.picture:hover {
	-webkit-filter: brightness(1);
	-moz-filter: brightness(1);
	-o-filter: brightness(1);
	-ms-filter: brightness(1);
	filter: brightness(1);
}
div.panel a div.picture img {
	max-width: 100%;
	/* width: 100%; */
	-moz-transition: -moz-transform 10s linear;
	-webkit-transition: -webkit-transform 10s linear;
	-o-transition: -o-transform 10s linear;
	-ms-transition: -ms-transform 10s linear;
	transition: transform 10s linear;
	width: auto;
}
 @media all and (-ms-high-contrast:none) {
 *::-ms-backdrop, div.panel a div.picture img {
width: 100%
} /* IE11 */
}
div.panel a div.picture img:hover {
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-o-transform: scale(1.5);
	-ms-transform: scale(1.5);
	transform: scale(1.5);
}
div.panel a div.label {
	position: absolute;
	width: 40px;
	height: 40px;
	display: block;
	/* background: #ccc; */
	border-radius: 5px;
	top: 10px;
	left: 10px;
}
div.panel a div.label span {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	color: #fff;
	font-size: 2rem;
}
div.panel a div.label::after {
	position: absolute;
	text-align: center;
	bottom: -1.5em;
	font-size: 1.4rem;
	/* content: "Default"; */
	font-weight: bold;
	width: 100%;
	font-family: "Century Gothic";
}
div.panel a div.label.default {
	background: none;
}
div.panel a div.label.default::after {
	content: "";
}
div.panel a div.label.campaign {
	background: #feabca;
}
div.panel a div.label.campaign::after {
	content: "Campaign";
	color: #feabca;
	text-align: center;
}
div.panel a div.label.onsen {
	background: #ff5c63;
}
div.panel a div.label.onsen::after {
	content: "Spa";
	color: #ff5c63;
	text-align: center;
}
div.panel a div.label.sightseeing {
	background: #ffa63d;
}
div.panel a div.label.sightseeing::after {
	content: "Yonago";
	color: #ffa63d;
}
div.panel a div.label.flag {
	background: #f5cf4a;
}
div.panel a div.label.flag::after {
	content: "flag";
	color: #f5cf4a;
}
div.panel a div.label.event {
	background: #78d25f;
}
div.panel a div.label.event::after {
	content: "Event";
	color: #78d25f;
}
div.panel a div.label.model {
	background: #cf8ae5;
}
div.panel a div.label.model::after {
	content: "Model";
	color: #cf8ae5;
}
div.panel a div.label.feature {
	background: #40befb;
}
div.panel a div.label.feature::after {
	content: "Topics";
	color: #40befb;
}
div.panel a div.label.pr {
	background: #40befb;
}
div.panel a div.label.pr::after {
	content: "";
color:;
}
div.panel a div.label.pr span {
	font-weight: bold;
	font-family: "Century Gothic" !important;
}
div.panel a div.title {
	position: absolute;
	bottom: 0;
	background: rgba(0,0,0,0.5);
	width: 100%;
	color: #fff;
	text-align: center;
	padding: 0.2em 0 0.5em;
	box-sizing: border-box;
}
div.panel a div.title h2 {
	color: #fff;
}
/* ランキング */

body.top div.panel.ranking {
	background: #71cee7;
}
div.panel.ranking {
	background: #71cee7;
}
div.panel.ranking a {
	width: 280px;
	height: 280px;
}
div.panel.ranking div.wrap {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	color: #fff;
	text-align: center;
	width: 100%;/* height: 100%; */
}
div.panel.ranking span.icon-ranking {
	font-size: 6rem;
}
div.panel.ranking div.headline {
	padding: 20px 0;
	font-size: 1.8rem;
	font-weight: bold;
}
div.panel.ranking div.btn {
	padding: 0.2em 0.5em;
	border: 2px solid #fff;
	border-radius: 5px;
	display: inline-block;
	font-weight: bold;
}
div.panel.ranking:hover div.btn {
	background: #fff;
	color: #71cee7;
}
/* モデルコース */

body.top div.panel.model {
	background: #cf8ae5;
}
div.panel.model {
	background: #cf8ae5;
}
div.panel.model a {
	width: 280px;
	height: 280px;
}
div.panel.model div.wrap {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	color: #fff;
	text-align: center;
	width: 100%;/* height: 100%; */
}
div.panel.model span.icon-model {
	font-size: 6rem;
}
div.panel.model div.headline {
	padding: 20px 0;
	font-size: 1.8rem;
	font-weight: bold;
}
div.panel.model div.btn {
	padding: 0.2em 0.5em;
	border: 2px solid #fff;
	border-radius: 5px;
	display: inline-block;
	font-weight: bold;
}
div.panel.model:hover div.btn {
	background: #fff;
	color: #cf8ae5;
}
/* 旬情報 */

body.top div.panel.feature {
	background: #40befb;
}
div.panel.feature {
	background: #40befb;
}
div.panel.feature a {
	width: 280px;
	height: 280px;
}
div.panel.feature div.wrap {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	color: #fff;
	text-align: center;
	width: 100%;/* height: 100%; */
}
div.panel.feature span.icon-feature {
	font-size: 6rem;
}
div.panel.feature div.headline {
	padding: 20px 0;
	font-size: 1.8rem;
	font-weight: bold;
}
div.panel.feature div.btn {
	padding: 0.2em 0.5em;
	border: 2px solid #fff;
	border-radius: 5px;
	display: inline-block;
	font-weight: bold;
}
div.panel.feature:hover div.btn {
	background: #fff;
	color: #40befb;
}
/* -------------------------------------------------------- footer */

footer {
	color: #333;
	background: #fff;
	position: relative;
	z-index: 4000;
}
footer a {
	color: #333;
}
/* -------------------------------------------------------- div.contentsmap */

footer div.contentsmap {
	padding: 20px 0;
	border-top: 1px solid #e7e7e6;
	border-bottom: 1px solid #e7e7e6;
}
footer div.contentsmap div.inner {
	padding: 0;
}
footer div.contentsmap div.area {
	width: 200px;
	float: left;
	box-sizing: border-box;
	position: relative;
	padding: 0 20px;
	min-height: 130px;
}
footer div.contentsmap div.area::before {
	position: absolute;
	top: 50%;
	left: 0;
	width: 1px;
	height: 60px;
	content: '';
	-webkit-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	-o-transform: translate(0, -50%);
	transform: translate(0, -50%);
	background: #e7e7e6;
}
footer div.contentsmap div.area:last-child::after {
	position: absolute;
	top: 50%;
	right: 0;
	width: 1px;
	height: 60px;
	content: '';
	-webkit-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	-o-transform: translate(0, -50%);
	transform: translate(0, -50%);
	background: #e7e7e6;
}
footer div.contentsmap div.area div.head {
	font-size: 1.4rem;
	margin-bottom: 0.2em;
}
footer div.contentsmap div.area ul li a, footer div.contentsmap div.area ul.with_a_style li span {
	font-size: 1.3rem;
}
footer div.contentsmap div.area ul li a::before, footer div.contentsmap div.area ul.with_a_style li span::before {
	content: ">";
	color: #00abd2;
	padding-right: 0.3em;
}
footer div.contentsmap div.area div.head a:hover, footer div.contentsmap div.area ul li a:hover {
	color: #00abd2;
}
footer div.inner {
	overflow: hidden;
	padding: 20px 0;
}
footer div.logo {
	width: 240px;
	height: 60px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
}
footer div.logo img {
	display: block;
	width: 240px;
	height: 60px;
}
footer div.information {
	font-size: 1.4rem;
	min-width: 600px;
	max-width: 600px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
}
footer div.information>div {
	width: 50%;
	float: left;
	font-size: 1.2rem;
}
footer div.information>div span.head {
	font-size: 1.3rem;
	/* font-weight: bold; */
	color: #f162a3;
}
footer div.information>div span.place {
	font-size: 1.4rem;/* font-weight: bold; */
}
footer div.contact {
	padding: 0.5em 0;
	font-size: 1.3rem;
	text-align: center;
}
footer div.contact a {
}
footer div.contact a::before {
	content: ">";
	color: #00abd2;
	padding-right: 0.3em;
}
footer ul.link {
	width: 480px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
footer ul.link li {
	display: inline;
	white-space: nowrap;
	padding-right: 1em;
}
footer ul.link li a {
	font-size: 1.3rem;
}
footer ul.link li a::before {
	content: ">";
	color: #00abd2;
	padding-right: 0.3em;
}
footer ul.link li a:hover {
	color: #00abd2;
}
/* footer div.facebook {
	width: 100%;
	height: 55rem;
} */
footer div.copyright {
	font-size: 1.3rem;
	padding: .2em 0;
	text-align: center;
	color: #333;
	background: #fff;
}
/* detail */

div.detail {
	box-sizing: border-box;
	width: 100%;
	margin: 0 auto 40px;/* background: #fff; */
}
/* -------------------------------------------------------- div.pageTop */

div.pageTop {
	position: fixed;
	z-index: 9999;
	right: 0;
	bottom: 0;
	display: block;
	width: 50px;
	height: 50px;
}
div.pageTop a {
	font-family: 'Century Gothic', 'Droid Serif', '游ゴシック', YuGothic, 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', Meiryo, 'メイリオ', serif;
	font-size: 122%;
	font-weight: bold;
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
	text-align: center;
	text-align: center;
	color: #fff;
	background: #71cee7;
}
div.pageTop a::before {
	position: absolute;
	top: 20px;
	left: 20px;
	display: block;
	width: 10px;
	height: 10px;
	content: '';
	transition: all .2s ease-in-out 0s;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	background-size: 45px 45px;
}
div.pageTop a:hover {
	opacity: .8;
}
/* -------------------------------------------------------- contents */

div.contents {
}
div.main {
	float: left;
	width: 880px;
	margin-top: 40px;
}
aside {
	position: relative;
	float: right;
	width: 280px;
	margin-top: 40px;
}
/* -------------------------------------------------------- topicPath */

.topicPath {
	font-size: 1.3rem;
	display: block;
	margin: 0 auto;
	background: #e7e7e6;
}
.topicPath ul {
	padding: 10px;
	list-style: none;
}
.topicPath ul li {
	display: inline;
}
.topicPath ul li a {
	font-weight: bold;
	text-decoration: underline;
	color: #00abd2;
}
.topicPath ul li a:hover {
	text-decoration: none;
}
/* -------------------------------------------------------- categoryheader */

div.categoryheader {
/* background: #fff; */
	/* margin-bottom: 40px; */
}
div.categoryheader div.inner {
	padding: 1em 0;
}
div.categoryheader.default div.inner {
	border-bottom: 2px solid #ff5c63;
}
div.categoryheader.onsen div.inner {
	border-bottom: 2px solid #ff5c63;
}
div.categoryheader.sightseeing div.inner {
	border-bottom: 2px solid #ffa63d;
}
div.categoryheader.flag div.inner {
	border-bottom: 2px solid #f5cf4a;
}
div.categoryheader.event div.inner {
	border-bottom: 2px solid #78d25f;
}
div.categoryheader.model div.inner {
	border-bottom: 2px solid #cf8ae5;
}
div.categoryheader.feature div.inner {
	border-bottom: 2px solid #40befb;
}
div.categoryheader.pr div.inner {
	border-bottom: 2px solid #0befb;
}
div.categoryheader h1, div.categoryheader span {
	font-size: 3.0rem;
	font-weight: bold;
	position: relative;
	z-index: 1;
	display: block;
	color: #888;
	margin-bottom: 0.2em;
}
div.categoryheader.default div.inner h1, div.categoryheader.default div.inner span {
	color: #ff5c63;
}
div.categoryheader.onsen div.inner h1, div.categoryheader.onsen div.inner span {
	color: #ff5c63;
}
div.categoryheader.sightseeing div.inner h1, div.categoryheader.sightseeing div.inner span {
	color: #ffa63d;
}
div.categoryheader.flag div.inner h1, div.categoryheader.flag div.inner span {
	color: #f5cf4a;
}
div.categoryheader.event div.inner h1, div.categoryheader.event div.inner span {
	color: #78d25f;
}
div.categoryheader.model div.inner h1, div.categoryheader.model div.inner span {
	color: #cf8ae5;
}
div.categoryheader.feature div.inner h1, div.categoryheader.feature div.inner span {
	color: #40befb;
}
div.categoryheader.pr div.inner h1, div.categoryheader.pr div.inner span {
	color: #0befb;
}
div.categoryheader div.description {
	font-size: 1.4rem;
	color: #888;
}
/* -------------------------------------------------------- categoryList */

section.categoryList {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	margin: 40px 0;
}
section.categoryList ul li {
	margin-bottom: 20px;
	transition: all .1s ease-in-out 0s;
	background: #fff;
}
section.categoryList ul li:last-child {
	margin-bottom: 0;
}
section.categoryList ul li:hover {
	background: #e7e7e6;
}
section.categoryList ul li a {
	position: relative;
	display: block;
	color: #333;
}
/*
section.categoryList ul li a:hover::after
{
    width: 100%;
}
*/
section.categoryList div.entry {
	box-sizing: border-box;
}
section.categoryList div.entry div.spot {
	float: left;
	width: 240px;
	position: relative;
	/* background: #e7e7e6; */
	overflow: hidden;
	/* background: #f0ede6; */
	box-sizing: border-box;
	border-right: 1px solid #e6e6e6;
}
section.categoryList div.entry div.spot:after {
/* background: #cceeff;
	-webkit-transform: rotate(-45deg) translate(50%, 0);
           -moz-transform: rotate(-45deg) translate(50%, 0);
            -ms-transform: rotate(-45deg) translate(50%, 0);
             -o-transform: rotate(-45deg) translate(50%, 0);
                transform: rotate(-45deg) translate(50%, 0);
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
		
	z-index: 0;
	content:""; */
}
section.categoryList div.entry div.spot span {
	display: table-cell;
	width: 240px;
	height: 240px;
	text-align: center;
	vertical-align: middle;
	background: #e7e7e6;
}
section.categoryList div.entry div.spot span img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 240px;
	margin: 0 auto;
	vertical-align: middle;
	position: relative;
	z-index: 1000;
}
section.categoryList div.entry div.wrap {
	overflow: hidden;
	box-sizing: border-box;
	padding: 1em 1.5em;
}
section.categoryList.clinic div.entry div.headline, section.categoryList.clinic div.entry div.description, section.categoryList.clinic div.entry div.clearfix {
	margin-left: 0;
}
section.categoryList div.entry div.headline h2 {
	font-size: 2.4rem;
	font-weight: bold;
	position: relative;
	padding-bottom: .5em;
	transition: all .1s ease-in-out;
	color: #333;
}
/*
section.categoryList div.entry div.information
{
    font-size: 1.3rem;

    margin-bottom: 10px;

    color: #6c6b6c;
}
*/
section.categoryList div.entry div.description {
	/* font-size: 1.4rem; */
	padding: 0.5em 2em;
	/* background: #f0ede6; */
	background: #fee7f0;
	margin-bottom: 10px;
	/* color: #6c6b6c; */
	color: #f162a3;
	position: relative;
	border-radius: 4px;
}
section.categoryList div.entry div.description:after {
	background: url(../../img/icon_flag.png) no-repeat;
	background-size: 15px 15px;
	background-position: 0 0;
	position: absolute;
	left: 0.8em;
	top: 0.8em;
	content: "";
	width: 15px;
	height: 15px;
}
section.categoryList div.entry div.update {
	font-family: 'Century Gothic', '游ゴシック', YuGothic, 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', Meiryo, 'メイリオ', serif;
	font-size: 3rem;
	padding-right: 1em;
	color: #ccc;
}
/*------------------------------------------------------------ recommended */

section.recommended {
	margin-bottom: 40px;
}
section.recommended div.header {
	margin-bottom: 20px;
}
section.recommended div.header div.inner {
	width: 100%;
	padding: 1em 0;
	border-bottom: 2px solid #1baad1;
}
section.recommended div.header h2 {
	font-size: 3.0rem;
	margin-bottom: 0.2em;
	font-weight: bold;
	position: relative;
	z-index: 1;
	display: block;
	color: #333;
	color: #1baad1;
}
section.recommended div.description {
	font-size: 1.4rem;
}
section.recommended div.panelWrap {
	width: 900px;
	float: none;
	padding: 10px 0 0 0;
}
 section.recommended div.panelWrap div.panel(3n) {
 margin: 0 0 20px 0;
}
/* -------------------------------------------------------- aside */

aside {
}
aside div.panel {
	float: none;
}
aside div.title.ranking {
	font-size: 2.0rem;
	font-weight: bold;
	position: relative;
	z-index: 1;
	display: block;
	padding: 20px;
	color: #fff;
	background: #71cee7;
	width: 280px;
	height: 200px;
	box-sizing: border-box;
	border-radius: 5px 5px 0 0;
}
/* ランキング */

aside div.title.ranking {
	background: #71cee7;
}
aside div.title.ranking a {
	width: 280px;
	height: 280px;
}
aside div.title.ranking div.wrap {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	color: #fff;
	text-align: center;
	width: 100%;/* height: 100%; */
}
aside div.title.ranking span.icon-ranking {
	font-size: 6rem;
}
aside div.title.ranking div.headline {
	padding: 20px 0 0;
	font-size: 1.8rem;
	font-weight: bold;
}
aside div.title a {
	color: #fff;
}
aside ul.ranking {
	margin-bottom: 20px;
}
aside ul.ranking li {
	display: block;
	width: 100%;
}
aside ul.ranking li a {
	font-size: 1.4rem;
	position: relative;
	display: block;
	padding: 1em;
	transition: all .1s ease-in-out;
	color: #333;
	border: 1px solid #e6e6e6;
	border-top: none;
	background: #fff;
}
aside ul.ranking li a div span {
	font-weight: bold !important;
}
aside ul.ranking li a div.first {
	color: #e6c973;
}
aside ul.ranking li a div.second {
	color: #dcdddd;
}
aside ul.ranking li a div.third {
	color: #bc725f;
}
aside ul.ranking li a div.fourth {
	color: #71cee7;
}
aside ul.ranking li a div.fifth {
	color: #71cee7;
}
aside ul.ranking li a:hover {
	background: #efefef;
}
aside div.banner {
}
aside ul.banner li img {
	width: 100%;
	height: auto;
}
aside ul.banner li {
	margin-bottom: 0.5em;
}
/* .yonago-map */

div.yonago-map {
	position: relative;
	float: left;
	margin: 10px 0 10px 300px;
	width: 900px;
}
div.yonago-map div.map-display {
	max-width: 880px;
	/* margin-bottom: 20px; */
	border-radius: 20px;
	overflow: hidden;
	position: relative;
	z-index: 0;
}
div.yonago-map div.map-display img {
	display: block;
	width: 100%;
	max-width: 880px;
	height: auto;
}
div.yonago-map div.spot-display {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
div.yonago-map div.spot-display div.spot {
	position: absolute;
	z-index: 1;
}
div.yonago-map div.spot-display div.spot a {
	display: block;
	background: #fff;
	color: #f162a3;
	font-size: 1.2rem;
	padding: 0 1em;
	border-radius: 1000px;
	border: 2px solid #f0f0f0;/* font-weight: bold; */
}
div.yonago-map div.spot-display div.spot a:hover {
	background: #fff;
	color: #f162a3;
	border: 2px solid #f162a3;
}
div.yonago-map div.spot-display div.spot.spot_01 { /* */
	top: 239px;
	left: 339px;
}
div.yonago-map div.spot-display div.spot.spot_02 { /* */
	top: 155px;
	left: 408px;
}
div.yonago-map div.spot-display div.spot.spot_03 { /* */
	top: 215px;
	left: 502px;
}
div.yonago-map div.spot-display div.spot.spot_04 { /* */
	top: 325px;
	left: 366px;
}
div.yonago-map div.spot-display div.spot.spot_05 { /* */
	top: 320px;
	left: 523px;
}
div.yonago-map div.spot-display div.spot.spot_06 {
	top: 315px;
	left: 180px;
}
div.yonago-map div.spot-display div.spot.spot_07 { /* */
	top: 88px;
	left: 327px;
}
div.yonago-map div.spot-display div.spot.spot_08 {
	top: 60px;
	left: 412px;
}
div.yonago-map div.spot-display div.spot.spot_09 { /* */
	top: 140px;
	left: 195px;
}
div.yonago-map div.spot-display div.spot.spot_10 {  /* */
	top: 268px;
	left: 682px;
}
div.yonago-map div.spot-display div.spot.spot_11 { /* */
	top: 176px;
	left: 65px;
}
div.yonago-map div.spot-display div.spot.spot_12 { /* */
	top: 292px;
	left: 0;
}
div.yonago-map div.spot-display div.spot.spot_13 { /* */
	top: 180px;
	left: 790px;
}
div.yonago-map div.spot-display div.spot.spot_14 { /* */
	top: 44px;
	left: 230px;
}
/* div.yonago-map div.spot-display div.spot.spot_15 {
	top: 240px;
	left: 340px;
}
div.yonago-map div.spot-display div.spot.spot_16 {
	top: 155px;
	left: 410px;
} */


/* */

div.map-information {
}
div.map-information div.spot {
	opacity: 0;
	position: absolute;
	top: 365px;
	left: 50px;
	padding-top: 5px;
	padding-bottom: 5px;
	max-height: 80px;
	box-sizing: border-box;
	width: 780px; /* */
	/* height: 80px; */ /* */
	background: #fff;
	transition: 0.25s all;
}
div.map-information div.spot.active {
	opacity: 1;
}
div.map-information div.spot-name {
	font-size: 1.8rem;
	padding-bottom: 0.25em;
	margin-bottom: 0.25em;
	border-bottom: 1px solid #e7e7e6;
	font-weight: bold;/* padding-left: 0.5em; */
}
div.map-information div.spot-name span.number {
	background: #f162a3;
	border-radius: 1000px;
	position: relative;
	width: 1em;
	height: 1em;
	display: inline-block;
	vertical-align: middle;
	margin-right: 0.25em;
}
div.map-information div.spot-name span.number span {
	position: absolute;
	top: 50%;
	left: 50%;
	color: #fff;
	font-size: 1.1rem;
	transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
}
div.map-information div.data {
	position: relative;
	padding-left: 0.75em;
	font-size: 1.5rem;
	display: inline-block;
}
div.map-information div.alert {
	margin-top: 0.5em;
	font-size: 1.3rem;
	color: #f162a3;
	display: inline-block;
}
div.map-information div.data:before {
	position: absolute;
	width: 0.5em;
	height: 0.5em;
	background: #f162a3;
	border-radius: 1000px;
	content: "";
	display: block;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}
div.map-information div.data span {
	font-size: 1.8rem;
	font-weight: bold;
	padding-left: 0.25em;
	padding-right: 0.25em;
}
/* */
div.sns-wrap {
	padding-bottom: 2rem;
	/* border-bottom: 0.1rem solid #e7e7e6; */
	margin: 0 0 0 300px;
	box-sizing: border-box;
}
div.sns-wrap div.inner {
	width: calc(86rem);
}
div.sns-wrap > div.inner.clearfix > div.instagram-wrap {
	float: left;
	width: 42rem;
	margin-right: 2rem;
	height: 42rem;
	padding-top: 1rem;
	margin-bottom: 5rem;
}
div.sns-wrap > div.inner.clearfix > div.instagram-wrap div.instagram {
	position: relative;
}
div.sns-wrap > div.inner.clearfix > div.facebook-wrap {
	float: left;
	width: 42rem;
	height: 42rem;
	padding-top: 1rem;
	margin-bottom: 4rem;
}
/* */

div.sns-wrap div.instagram-link, div.sns-wrap div.instagram-link a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	transition: 0.25s all;
	background: rgba(255,255,255,0);
}
div.sns-wrap div.instagram-link a:hover {
	background: rgba(255,255,255,0.125);
}
div.sns-wrap div.facebook > .fb-page {
	width: 100% !important;
}
div.sns-wrap div.facebook > .fb-page > span, div.sns-wrap div.facebook iframe {
	height: 42rem !important;
	width: 100% !important;
}
div.sns-wrap div.facebook img {
	display: block !important;
	width: 100% !important;
}
div.sns-wrap div.icon {
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	border-bottom: 0.3rem solid #ccc;
}

div.sns-wrap div.facebook-wrap div.icon { border-bottom: 0.3rem solid #1d7cee; }
div.sns-wrap div.instagram-wrap div.icon { border-bottom: 0.3rem solid #ca2a94; }

div.sns-wrap div.icon img {
	width: 100%;
	max-width: 4rem;
	margin-left: auto;
	margin-right: auto;
	display: block;
}



/* */