/*=======================================================================*/
/*
top.css
トップページ用のCSS
*/
/*=======================================================================*/

/*=======================================================================*/
/* ビルボードエリア */
/*=======================================================================*/

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

	#billboard {
		width: 100%;
		margin: 10px auto;
		display: block;
	}

	#billboard:before, #billboard:after {
		content: "\0020";
		display: block;
		height: 0;
		overflow: hidden;
	}

	#billboard:after {
		clear: both;
	}

	#billTxtArea {
		position: relative;
		width: 98%;
		padding: 10px;
		margin: 0 auto;
		box-sizing: border-box;
		display: block;
		vertical-align: middle;
	}

	#billTxtArea h2 {
		position: relative;
		width: 100%;
		font-family: "Noto Sans", "Noto Sans Japanese", sans-serif;
		font-size: 0.8em;
		line-height: 1.4em;
		font-weight: 700;
		text-align: left;
		color: #5F4C3E;
		letter-spacing: 2px;
	}

	#billTxtArea h2 span {
		display: inline-block;
		margin: 0;
	}

	#billSLDArea {
		position: relative;
		width: 98%;
		max-height: 300px;
		padding: 0;
		margin: 0 auto;
		box-sizing: border-box;
		display: table-cell;
		vertical-align: middle;
		overflow: hidden;
	}

	.billSLDWrap {
		display: none;
	}

	#PhotoSlide {
      width: 98%;
      margin: 0 auto;
      height: auto;
      max-height: 300px;
      overflow: hidden;
	}

}

/* スライドショー(bxslider) */
/*=======================================================================*/

/** VARIABLES
===================================*/
/** RESET AND LAYOUT
===================================*/

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

	.bx-wrapper {
		position: relative;
		margin-bottom: 60px;
		padding: 0;
		*zoom: 1;
		-ms-touch-action: pan-y;
		touch-action: pan-y;
	}

	.bx-wrapper img {
		max-width: 100%;
		height: auto;
		display: block;
	}

	.bxslider {
		margin: 0;
		padding: 0;
	}

	ul.bxslider {
		list-style: none;
	}

	.bx-viewport {
		/* fix other elements on the page moving (in Chrome) */
		-webkit-transform: translateZ(0);
	}

}

/** THEME
===================================*/

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

	.bx-wrapper {
		-moz-box-shadow: none !important;
		-webkit-box-shadow: none !important;
		box-shadow: none !important;
		border: none !important;
		background: none;
	}

	.bx-wrapper .bx-pager,
	.bx-wrapper .bx-controls-auto {
		position: absolute;
		bottom: -30px;
		width: 100%;
		z-index: 2000;
	}

	/* LOADER */
	.bx-wrapper .bx-loading {
		min-height: 50px;
		background: url('images/bx_loader.gif') center center no-repeat #ffffff;
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2000;
	}

	/* PAGER */
	.bx-wrapper .bx-pager {
		text-align: center;
		font-size: .85em;
		font-family: Arial;
		font-weight: bold;
		color: #666;
		padding-top: 20px;
	}

	.bx-wrapper .bx-pager.bx-default-pager a {
		background: #666;
		text-indent: -9999px;
		display: block;
		width: 10px;
		height: 10px;
		margin: 0 5px;
		outline: 0;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}

	.bx-wrapper .bx-pager.bx-default-pager a:hover,
	.bx-wrapper .bx-pager.bx-default-pager a.active,
	.bx-wrapper .bx-pager.bx-default-pager a:focus {
		background: #000;
	}

	.bx-wrapper .bx-pager-item,
	.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
		display: inline-block;
		vertical-align: bottom;
		*zoom: 1;
		*display: inline;
	}

	.bx-wrapper .bx-pager-item {
		font-size: 0;
		line-height: 0;
	}

	/* DIRECTION CONTROLS (NEXT / PREV) */
	.bx-wrapper .bx-prev {
		left: 10px;
		background: url('images/controls.png') no-repeat 0 -32px;
	}

	.bx-wrapper .bx-prev:hover,
	.bx-wrapper .bx-prev:focus {
		background-position: 0 0;
	}

	.bx-wrapper .bx-next {
		right: 10px;
		background: url('images/controls.png') no-repeat -43px -32px;
	}

	.bx-wrapper .bx-next:hover,
	.bx-wrapper .bx-next:focus {
		background-position: -43px 0;
	}

	.bx-wrapper .bx-controls-direction a {
		position: absolute;
		top: 50%;
		margin-top: -16px;
		outline: 0;
		width: 32px;
		height: 32px;
		text-indent: -9999px;
		z-index: 9999;
	}

	.bx-wrapper .bx-controls-direction a.disabled {
		display: none;
	}

	/* AUTO CONTROLS (START / STOP) */
	.bx-wrapper .bx-controls-auto {
		text-align: center;
	}

	.bx-wrapper .bx-controls-auto .bx-start {
		display: block;
		text-indent: -9999px;
		width: 10px;
		height: 11px;
		outline: 0;
		background: url('images/controls.png') -86px -11px no-repeat;
		margin: 0 3px;
	}

	.bx-wrapper .bx-controls-auto .bx-start:hover,
	.bx-wrapper .bx-controls-auto .bx-start.active,
	.bx-wrapper .bx-controls-auto .bx-start:focus {
		background-position: -86px 0;
	}

	.bx-wrapper .bx-controls-auto .bx-stop {
		display: block;
		text-indent: -9999px;
		width: 9px;
		height: 11px;
		outline: 0;
		background: url('images/controls.png') -86px -44px no-repeat;
		margin: 0 3px;
	}

	.bx-wrapper .bx-controls-auto .bx-stop:hover,
	.bx-wrapper .bx-controls-auto .bx-stop.active,
	.bx-wrapper .bx-controls-auto .bx-stop:focus {
		background-position: -86px -33px;
	}

	/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
	.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
		text-align: left;
		width: 80%;
	}

	.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
		right: 0;
		width: 35px;
	}

	/* IMAGE CAPTIONS */
	.bx-wrapper .bx-caption {
		position: absolute;
		bottom: 0;
		left: 0;
		background: #666;
		background: rgba(80, 80, 80, 0.75);
		width: 100%;
	}

	.bx-wrapper .bx-caption span {
		color: #fff;
		font-family: Arial;
		display: block;
		font-size: .85em;
		padding: 10px;
	}

}

/*=======================================================================*/
/* インフォメーションエリア */
/*=======================================================================*/

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

	#topInfo {
		width: 98%;
		margin: 0 auto;
		padding: 0;
		box-sizing: border-box;
	}

	#topInfo:before, #topInfo:after {
		content: "\0020";
		display: block;
		height: 0;
		overflow: hidden;
	}

	#topInfo:after {
		clear: both;
	}

	#whatsNew {
		width: 100%;
		float: none;
		padding: 0 0 10px 0;
		margin: 0;
		box-sizing: border-box;
		background: none;
	}

	#topInfo h2 img {
		max-width: 98%;
		height: auto;
		display: block;
		margin: 0 5px 0 0;
	}

	#topInfo h2 span {
		display: block;
		position: relative;
		width: 100%;
		font-family: "Noto Sans", "Noto Sans Japanese", sans-serif;
		font-size: 0.6em;
		line-height: 1.8em;
		font-weight: 700;
		color: #5F4C3E;
		margin: 0;
		letter-spacing: 1px;
	}

	#whatsNew dl {
		width: 100%;
		border-bottom: 1px solid #DDDDDD;
		padding: 10px 0;
	}

	#whatsNew dl:before, #whatsNew dl:after {
		content: "\0020";
		display: block;
		height: 0;
		overflow: hidden;
	}

	#whatsNew dl:after {
		clear: both;
	}

	#whatsNew dl dt {
		display: block;
		width: 100%;
		margin: 0 10px 0 0;
		float: none;
	}

	#whatsNew dl a dt {
		color: #5EB6E0;
		font-size: 0.8em;
		-webkit-transition: 0.3s ease-in-out;
		-moz-transition: 0.3s ease-in-out;
		transition: 0.3s ease-in-out;
	}

	#whatsNew dl a:hover dt {
		color: #5F4C3E;
	}

	#whatsNew dl dd {
		display: block;
		width: 100%;
		float: none;
	}

	#whatsNew dl a dd {
		color: #5F4C3E;
		font-size: 1em;
		font-weight: bold;
		-webkit-transition: 0.3s ease-in-out;
		-moz-transition: 0.3s ease-in-out;
		transition: 0.3s ease-in-out;
	}

	#whatsNew dl a:hover dd {
		color: #5EB6E0;
	}

	.ListLink {
		width: 100%;
		padding: 5px 0;
		margin: 0;
		text-align: center;
	}

	.ListLink a {
		display: block;
		width: 90%;
		border-radius: 5px;
		margin: 10px auto;
		padding: 10px;
		-webkit-transition: 0.3s ease-in-out;
		-moz-transition: 0.3s ease-in-out;
		transition: 0.3s ease-in-out;
	}
  
  #recoSpot .ListLink a {
    width: 90%;
  }

	a.nlBtn {
		background: #5EB6E0;
		border: 2px solid #5EB6E0;
		color: #FFF;
	}

	a.nlBtn:hover {
		background: #FFF;
		color: #5EB6E0;
	}

	#msReports {
		width: 100%;
		float: none;
		padding: 10px 0;
		margin: 0;
		box-sizing: border-box;
	}

	.msNewsWrap {
		width: 100%;
		margin: 0;
	}

	#msReports dl {
		width: 100%;
		border-bottom: 1px solid #DDDDDD;
		padding: 10px 0;
		display: table;
	}

	#msReports dl:before, #msReports dl:after {
		content: "\0020";
		display: block;
		height: 0;
		overflow: hidden;
	}

	#msReports dl:after {
		clear: both;
	}

	#msReports dl a dt,
	#msReports dl a dd,
	#msReports dl a dt img {
		-webkit-transition: 0.3s ease-in-out;
		-moz-transition: 0.3s ease-in-out;
		transition: 0.3s ease-in-out;
	}

	#msReports dl dt {
		display: table-cell;
		width: 90px;
		height: 90px;
		margin: 0 10px 0 0;
		float: left;
		overflow: hidden;
		border-radius: 90px;
	}

	#msReports dl a:hover dt img {
		opacity: 0.3;
	}

	#msReports dl dt img {
		max-width: 160px;
		height: auto;
	}

	#msReports dl a dt {
		color: #5EB6E0;
		font-size: 1em;
	}

	#msReports dl a dd .date {
		color: #EE8484;
		font-size: 0.8em;
	}

	#msReports dl a:hover dd .date {
		color: #5F4C3E;
	}

	#msReports dl dd {
		display: table;
		width: auto;
		float: none;
		vertical-align: middle;
	}

	#msReports dl a dd {
		color: #5F4C3E;
		font-size: 1em;
		font-weight: bold;
	}

	#msReports dl a:hover dd {
		color: #EE8484;
	}
	
	#msReports h3 {
		font-size: 1em;
	}

	a.mmBtn {
		background: #EE8484;
		border: 2px solid #EE8484;
		color: #FFF;
	}

	a.mmBtn:hover {
		background: #FFF;
		color: #EE8484;
	}

}

/*=======================================================================*/
/* イベントエリア */
/*=======================================================================*/

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

	#EventInfo {
		position: relative;
		width: 100%;
		margin: 0;
		background: rgba(141,194,33, 0.1);
	}

	#EventInfo h2 {
		display: block;
		width: 100%;
		padding: 20px 0 0 0;
		text-align: center;
	}

	#EventInfo h2 img {
		margin: 0;
	}

	#EventInfo h2 span {
		display: block;
		position: relative;
		width: 100%;
		font-family: "Noto Sans", "Noto Sans Japanese", sans-serif;
		font-size: 0.7em;
		line-height: 1.8em;
		font-weight: 700;
		color: #5F4C3E;
		margin: 0 0 10px 0;
		letter-spacing: 1px;
	}

	#EIWrap {
		width: 98%;
		margin: 10px auto;
	}

	#EIWrap:before, #EIWrap:after {
		content: "\0020";
		display: block;
		height: 0;
		overflow: hidden;
	}

	#EIWrap:after {
		clear: both;
	}

	#EveNewsList,
	#EveCalArea {
		display: block;
		width: 98%;
		float: none;
		padding: 10px 0;
		margin: 0;
		box-sizing: border-box;
	}

	#EveNewsList h3,
	#EveCalArea h3 {
		display: block;
		position: relative;
		width: 100%;
		font-family: "Noto Sans", "Noto Sans Japanese", sans-serif;
		font-size: 1.2em;
		line-height: 1.6em;
		font-weight: 700;
		color: #5F4C3E;
		margin: 0;
		letter-spacing: 1px;
	}

	#EveNewsList dl {
		width: 100%;
		border-bottom: 1px solid #FFF;
		padding: 10px 0;
	}

	#EveNewsList dl:before, #EveNewsList dl:after {
		content: "\0020";
		display: block;
		height: 0;
		overflow: hidden;
	}

	#EveNewsList dl:after {
		clear: both;
	}

	#EveNewsList dl a dt,
	#EveNewsList dl a dd {
		-webkit-transition: 0.3s ease-in-out;
		-moz-transition: 0.3s ease-in-out;
		transition: 0.3s ease-in-out;
	}

	#EveNewsList dl dt {
		display: block;
		width: 100%;
		margin: 0 10px 0 0;
		float: none;
	}

	#EveNewsList dl a dt {
		color: #8DC221;
		font-weight: bold;
		font-size: 0.9em;
	}

	#EveNewsList dl a:hover dt {
		color: #1A6600;
	}

	#EveNewsList dl dd {
		display: block;
		width: 100%;
		float: none;
	}

	#EveNewsList dl a dd {
		color: #5F4C3E;
		font-size: 0.9em;
		font-weight: bold;
	}

	#EveNewsList dl a:hover dd {
		color: #8DC221;
	}

	/* イベントカレンダー */

	#EveCalArea h3 {
		text-align: center;
		margin: 0 0 10px 0;
	}

	#EveCalArea nav ul{
		text-align: center;
		padding-bottom: 5px;
	}

	.event-calendar,
	.calendar {
		width: 98%;
		margin: 0 auto;
	}

	#EveCalArea caption {
	    text-align: center;
	}

	#EveCalArea caption a {
		display: block;
		position: relative;
		width: 100%;
		font-family: "Noto Sans", "Noto Sans Japanese", sans-serif;
		font-size: 1.2em;
		line-height: 1.8em;
		font-weight: 700;
		color: #5F4C3E;
		margin: 10px auto;
	}

	#EveCalArea nav ul li {
	    display: inline-block;
	    text-decoration: underline;
	    font-size: 1em;
	}

	#EveCalArea nav ul li a {
		background: #5F4C3E;
		color: #FFF;
		padding: 5px 10px;
		border-radius: 5px;
		text-decoration: none;
		font-size: 0.8em;
		-webkit-transition: 0.3s ease-in-out;
		-moz-transition: 0.3s ease-in-out;
		transition: 0.3s ease-in-out;
	}

	#EveCalArea nav ul li a:hover {
		background: #FFF;
		color: #5F4C3E;
	}

	a.paginate {
		text-decoration: none;
	}

	table.calendar {
		width: 98%;
		background: #8DC221;
		border-radius: 5px;
		border-collapse:collapse;
		box-sizing: border-box;
	}

	table.calendar tbody {
		padding: 5px;
	}

	.unit {
		display: none;
	}


	table.calendar th {
		color: #FFF;
	}

	table.calendar th,
	table.calendar td {
		text-align: center;
		padding: 5px;
		border-bottom: 1px solid #FFF;
	}

	table.calendar td {
		color: #FFF;
		font-size: 0.9em;
		line-height: 1.8em;
	}

	table.calendar td a {
		display: block;
		background: rgba(255,255,255, 0.9);
		color: #8DC221;
	    height: 25px;
	    width: 25px;
	    margin: 0 auto;
	    border-radius: 50%;
	    -moz-border-radius: 50%;
	    -webkit-border-radius: 50%;
		-webkit-transition: 0.3s ease-in-out;
		-moz-transition: 0.3s ease-in-out;
		transition: 0.3s ease-in-out;
	}

	table.calendar td a:hover {
		background: #8DC221;
		color: #FFF;
		border-radius: 3px;
	}

	table.calendar tr {

	}

	a.eveBtn {
		width: 80%;
		background: #5F4C3E;
		border: 2px solid #5F4C3E;
		color: #FFF;
	}

	a.eveBtn:hover {
		background: #FFF;
		border: 2px solid #5F4C3E;
		color: #5F4C3E;
	}

}

/*=======================================================================*/
/* おすすめ情報エリア */
/*=======================================================================*/

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

	#recoSpot {
		position: relative;
		width: 100%;
		margin: 0;
		padding: 10px 0 50px 0;
		background: url(../img/back_reco.png) 0 bottom repeat-x;
	}

	#recoSpot h2 {
		display: block;
		width: 98%;
		padding: 20px 0 0 0;
		text-align: center;
	}

	#recoSpot h2 img {
		margin: 0;
		max-width: 98%;
		height: auto;
	}

	#recoSpot h2 span {
		display: block;
		position: relative;
		width: 100%;
		font-family: "Noto Sans", "Noto Sans Japanese", sans-serif;
		font-size: 0.8em;
		line-height: 1em;
		font-weight: 700;
		color: #5F4C3E;
		margin: 0 0 20px 0;
		letter-spacing: 1px;
	}

	.recoSpotWrap {
		width: 98%;
		margin: 0 auto;
	}

	.recoSpotWrap:before, .recoSpotWrap:after {
		content: "\0020";
		display: block;
		height: 0;
		overflow: hidden;
	}

	.recoSpotWrap:after {
		clear: both;
	}

	.recoSpotWrap ul {
		width: 100%;
	}

	.recoSpotWrap ul li {
		display: table;
		width: 100%;
		margin: 0 0 10px 0;
		float: none;
	}

	.recoPict {
		display: table-cell;
		width: 90px;
		height: 90px;
		margin: 0 0 10px 0;
		padding: 0 10px 0 0;
	    border-radius: 0;
	    -moz-border-radius: 0;
	    -webkit-border-radius: 0;
	    overflow: hidden;
	}

	.recoPict img {
		width: 90px;
		height: 90px;
		object-fit: cover;
	    border-radius: 50%;
	    -moz-border-radius: 50%;
	    -webkit-border-radius: 50%;
		-webkit-transition: 0.3s ease-in-out;
		-moz-transition: 0.3s ease-in-out;
		transition: 0.3s ease-in-out;
	}

	.recoSpotWrap ul li:hover .recoPict img {
		opacity: 0.6;
	}

	.recoTxt {
		display: table-cell;
		width: auto;
		vertical-align: top;
	}

	.recoTxt h3 {
		font-family: "Noto Sans", "Noto Sans Japanese", sans-serif;
		font-size: 1em;
		line-height: 1.6em;
		font-weight: 700;
		color: #5F4C3E;
		-webkit-transition: 0.3s ease-in-out;
		-moz-transition: 0.3s ease-in-out;
		transition: 0.3s ease-in-out;
	}

	.recoSpotWrap ul li:hover .recoTxt h3 {
		color: #8DC221;
	}

	.recoTxt p {
		color: #5F4C3E;
		font-size: 0.8em;
		line-height: 1.4em;
		text-align: left;
		-webkit-transition: 0.3s ease-in-out;
		-moz-transition: 0.3s ease-in-out;
		transition: 0.3s ease-in-out;
	}

	.recoSpotWrap ul li:hover .recoTxt p {
		color: #8DC221;
	}

}