/*
	$Id: common_contents.css,v2.5 $

/*===========================================================================

  メインイメージ設定　ここから

===========================================================================*/
#background article#mainImage {
	margin: 0 0 30px 0;
}
#background article#mainImage section {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	border: none;
}
#background #mainImage figure {
	width: 50%;
	float: left;
}
#background #mainImage figure figcaption {
	position: absolute;
	top: 55%; left: 50px;
	display: block;
	padding: 10px 15px 10px 15px;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	color: #fff;
	border: 2px solid #fff;
	background: rgba(0,0,0,0.3);
	z-index: 10;
}
#background #mainImage figure:first-of-type figcaption {
	right: 50px; left: auto;
}
#background #mainImage span {
	display: block;
	text-align: center;
}
#background #mainImage:before {
	display: block; content: " ";
	width: 100%; height: 100%;
	min-width: 1200px;
	position: absolute;
	top: 0; left: 0;
	background: url(./images/main_line.png) no-repeat 50% 100%;
	background-size: 101% auto;
	z-index: 10;
}
/** スマートフォン用カウンター **/
@media screen and (max-width: 740px) {
	#background article#mainImage {
		margin: 0 0 10px 0;
	}
	#background #mainImage figure {/*
		width: 100%; float: none;*/
		position: static;
		overflow: hidden;
	}
	#background #mainImage figure img {
		width: 160%;
		margin: 0 -30% 0 -30%;
	}
	#background #mainImage figure figcaption {
		top: auto; bottom: 10%;
		left: auto; right: 2%;
		display: block;
		max-width: 90%;
		margin: 0 0 0 0;
		padding: 5px 5px 5px 5px;
		font-size: 12px;
		font-weight: 400;
		line-height: 1.2em;;
	}
	#background #mainImage figure:first-of-type figcaption {
		top: 5%; bottom: auto;
		left: 2%; right: auto;
	}
	#background #mainImage figure:first-of-type span {
		display: inline-block;
	}
	#background #mainImage:before {
		min-width: 100%;
	}
}
/*------------------------------------
  チャイナ設定　ここから
-------------------------------------*/
#background.typeCn #mainImage figure:first-of-type figcaption {
	right: 0;
	width: 180px;
	margin-right: -90px;
}

/** チャイナSP用カウンター **/
@media screen and (max-width: 740px) {
	#background.typeCn #mainImage figure:first-of-type figcaption {
		top: auto; bottom: 10%;
		left: 5%; right: auto;
		width: 90%;
	}
}
/*===========================================================================

  共通テンプレート設定　ここから

===========================================================================*/
#background article h1 {
	width: 100%;
	text-align: center;
	font-size: 38px;
	line-height: 1em;
	padding: 20px 20px 20px 20px;
	background: #e69100;
	color: #fff;
}
#background article h2 {
	text-align: center;
	font-size: 40px;
	line-height: 1em;
	color: #e69100;
}
#background article h3 {
	font-size: 32px;
	line-height: 1.2em;
	color: #e69100;
	padding: 8px 10px 8px 50px;
	border-bottom: 2px solid #e69100;
	background: url(./images/icon11.svg) no-repeat 0 50%;
	background-size: 40px 40px;
}
#background article h4 {
	font-size: 26px;
	line-height: 1.2em;
	color: #e69100;
}
#background article p.attention {
	font-size: 14px;
}
#background article ul li {
	padding: 0 0 5px 16px;
}
#background article ul li:before {
	display: block; content: " ";
	width: 4px; height: 4px;
	background: #1f1f1f;
	border-radius: 2px 2px 2px 2px;
	position: absolute;
	top: 11px; left: 0;
}
/** スマートフォン用カウンター **/
@media screen and (max-width: 740px) {
	#background article h1 {
		font-size: 18px;
		line-height: 1.2em;
		padding: 8px 15px 8px 15px;
	}
	#background article h2 {
		text-align: left;
		font-size: 18px;
		line-height: 1.2em;
	}
	#background article h3 {
		font-size: 16px;
		padding: 4px 10px 4px 30px;
		background-size: 20px 20px;
	}
	#background article h4 {
		font-size: 14px;
	}
	#background article p {
		font-size: 14px;
	}
	#background article p.attention {
		font-size: 12px;
	}
	#background article ul li {
		font-size: 14px;
		padding: 0 0 3px 12px;
	}
	#background article ul li:before {
		top: 9px; left: 0;
	}
}
/*------------------------------------
  共通情報ボックス設定　ここから
-------------------------------------*/
#background .infoBox {
	background: #f5f5f5;
	width: 1160px;
	margin: 0 auto 30px auto;
	padding: 30px 30px 0 30px;
}
#background article .infoBox h4 {
	width: auto;
	font-size: 16px;
	line-height: 1.6em;
	margin-bottom: 1em;
}
#background article .infoBox p {
	width: auto;
}
/** スマートフォン用カウンター **/
@media screen and (max-width: 740px) {
	#background .infoBox {
		display: none;
		width: 100%;
		margin: 0 auto 15px auto;
		padding: 15px 15px 0 15px;
	}
	#background article .infoBox h4 {
		font-size: 14px;
		line-height: 1.2em;
		margin: 0 auto 0.5em auto;
	}
	#background article .infoBox p {
		margin: 0 auto 15px auto;
	}
}
/*------------------------------------
  共通情報ボックス開閉設定　ここから
-------------------------------------*/
#background article .showDetail {
	display: none;
}
#background article .showDetail a {
	display: block; position: relative;
	width: 100%;
	margin: 0 auto 0 auto;
	padding: 10px 50px 10px 15px;
	text-align: center;
	background: #1f1f1f;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	border-radius: 6px 6px 6px 6px;
}
#background article .showDetail a:last-of-type ,
#background article .showDetail.open a:first-of-type {
	display: none;}
#background article .showDetail.open a:last-of-type {
	display: block;}
#background article .showDetail a:before {
	display: block; content: " ";
	width: 20px; height: 20px;
	position: absolute;
	top: 50%; right: 15px;
	background: url(./images/icon02.svg) no-repeat 50% 50%;
	background-size: 100% 100%;
	margin-top: -10px;
	transform: rotate(90deg);
}
#background article .showDetail a:last-of-type:before {
	transform: rotate(-90deg);
}
/** スマートフォン用カウンター **/
@media screen and (max-width: 740px) {
	#background article .showDetail {
		display: block;
	}
}
/*------------------------------------
  ギャラリーボックス設定　ここから
-------------------------------------*/
#background article dl {
	width: 1160px;
	margin: 0 auto 40px auto;
	border: 3px solid #e69100;
	border-top: none;
}
#background article dl dt {
	margin: 0 auto 30px auto;
	padding: 10px 20px 10px 20px;
	background: #e69100;
	text-align: center;
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	line-height: 1em;
}
/** スマートフォン用カウンター **/
@media screen and (max-width: 740px) {
	#background article dl {
		width: 100%;
		margin: 0 auto 15px auto;
		border-width: 2px;
	}
	#background article dl dt {
		margin: 0 auto 0 auto;
		padding: 8px 8px 8px 8px;
		font-size: 14px;
	}
	#background article dl dd {
		padding: 8px 8px 15px 8px;
	}
	#background article div.photoBox {
		padding: 0 8px 15px 8px;
	}
}
/*------------------------------------
  テンプレートパターン設定　ここから

  ※ 2020/06/11 温泉・祭り設定追加
-------------------------------------*/
#background article#townscapeArea h1 {
	background-color: #12b061;
	margin-bottom: 40px;}
#background article#townscapeArea h2 ,
#background article#townscapeArea h3 ,
#background article#townscapeArea h4 {
	color: #12b061;
	border-color: #12b061;}
#background article#townscapeArea h2 {
	font-size: 34px;}
/** スマートフォン用カウンター **/
@media screen and (max-width: 740px) {
	#background article#townscapeArea h1 {
		margin-bottom: 15px;}
	#background article#townscapeArea h2 {
		font-size: 18px;}
}
/*-----------------------------------*/
#background article#townscapeArea dl {
	border-color: #12b061;}
#background article#townscapeArea dl dt {
	background-color: #12b061;}
/*-----------------------------------*/
#background article#hotspringArea h1 {
	background-color: #cf2e2e;
	margin-bottom: 40px;}
#background article#hotspringArea h2 ,
#background article#hotspringArea h3 ,
#background article#hotspringArea h4 {
	color: #cf2e2e;
	border-color: #cf2e2e;}
#background article#hotspringArea h2 {
	font-size: 34px;}
/** スマートフォン用カウンター **/
@media screen and (max-width: 740px) {
	#background article#hotspringArea h1 {
		margin-bottom: 15px;}
	#background article#hotspringArea h2 {
		font-size: 18px;}
}
/*-----------------------------------*/
#background article#hotspringArea dl {
	border-color: #cf2e2e;}
#background article#hotspringArea dl dt {
	background-color: #cf2e2e;}
/*-----------------------------------*/
#background article#festivalArea h1 {
	background-color: #297ccf;
	margin-bottom: 40px;}
#background article#festivalArea h2 ,
#background article#festivalArea h3 ,
#background article#festivalArea h4 {
	color: #297ccf;
	border-color: #297ccf;}
#background article#festivalArea h2 {
	font-size: 34px;}
/** スマートフォン用カウンター **/
@media screen and (max-width: 740px) {
	#background article#festivalArea h1 {
		margin-bottom: 15px;}
	#background article#festivalArea h2 {
		font-size: 18px;}
}
/*-----------------------------------*/
#background article#festivalArea dl {
	border-color: #297ccf;}
#background article#festivalArea dl dt {
	background-color: #297ccf;}
/*-----------------------------------*/
#background article #loungeArea h3		{background-image: url(./images/icon12.svg);}
#background article #trafficArea h3		{background-image: url(./images/icon13.svg);}
#background article #rulesArea h3		{background-image: url(./images/icon14.svg);}
#background article #islandArea h3		{background-image: url(./images/icon15.svg);}
#background article #accessArea2 h3		{background-image: url(./images/icon21.svg);}
#background article #pointArea h3		{background-image: url(./images/icon22.svg);}
#background article #cherry			{background-image: url(./images/icon31.svg);}
#background article #bamboo			{background-image: url(./images/icon32.svg);}
#background article #shokei			{background-image: url(./images/icon33.svg);}
#background article #hinadoll		{background-image: url(./images/icon34.svg);}
/*===========================================================================

  共通ギャラリー設定　ここから

===========================================================================*/
#background article ul.slideGallery li {
	margin: 0 30px 30px 0;
	padding: 0 0 0 0;
	width: 267px;
	float: left;
}
#background article ul.slideGallery li:before {
	display: none;
}
#background article ul.slideGallery li:nth-of-type(4n) {
	margin: 0 0 30px 0;
}
#background article dl ul.slideGallery {
	width: auto;
	margin-bottom: 0;
	padding-left: 30px;
}
#background article dl ul.slideGallery li {
	width: 251px;
}
#background article .slideGallery a {
	display: block;
	position: relative;
	filter: Alpha(opacity=100);
	opacity: 1;
}
#background article .slideGallery a:before {
	display: block; content: " ";
	width: 100%; height: 100%;
	position: absolute;
	top: 0; left: 0;
	background: rgba(0,0,0,0.3) url(./images/icon_photo.svg) no-repeat 50% 50%;
	background-size: 40px 40px;
	filter: Alpha(opacity=0);
	opacity: 0;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#background article .slideGallery a:hover:before {
	background-size: 50px 50px;
	filter: Alpha(opacity=100);
	opacity: 1;
}
/** スマートフォン用カウンター **/
@media screen and (max-width: 740px) {
	#background article ul.slideGallery ,
	#background article dl ul.slideGallery {
		width: auto;
		margin: 0 0 0 0;
		padding-left: 0;
	}
	#background article ul.slideGallery {
		margin: 0 0 8px 0;
	}
	#background article ul.slideGallery li {
		display: block;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		width: 33.33%;
		height: 100%;
		border-radius: 50% 50% 50% 50%;
		overflow: hidden;
		float: left;
	}
	#background article ul.slideGallery li img {
		width: 139.44%;
		margin: 0 -19.72% 0 -19.72%;
	}
	#background article ul.slideGallery li:before {
		display: none;
	}
	#background article ul.slideGallery li:nth-of-type(4n) {
		margin: 0 0 0 0;
	}
	#background article dl ul.slideGallery li {
		width: 33.33%;
	}
}
/*------------------------------------
  イメージスライダー設定　ここから

  ※ 2020/06/11 温泉・祭り設定追加
-------------------------------------*/
#background .bx-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding-top: 8px;
}
#background .bx-pager .bx-pager-item {
	margin: 0 5px 0 5px;
}
#background .bx-pager .bx-pager-item a {
	display: block; overflow: hidden;
	width: 10px; height: 10px;
	text-indent: -10em;
	border-radius: 5px 5px 5px 5px;
	background: #ccc;
}
#background .bx-pager .bx-pager-item a.active {
	background-color: #e69100;
}
#background #townscapeArea .bx-pager .bx-pager-item a.active {
	background-color: #12b061;
}
#background #hotspringArea .bx-pager .bx-pager-item a.active {
	background-color: #cf2e2e;
}
#background #festivalArea .bx-pager .bx-pager-item a.active {
	background-color: #297ccf;
}
/*===========================================================================

  ウサギ島マップ設定　ここから

===========================================================================*/
#background article p.islandMap {
	margin: 0 0 60px 0;
	width: 100%; height: 514px;
	background-image: url(./images/map.png), url(./images/background.svg);
	background-repeat: no-repeat, background-repeat;
	background-size: 2000px 513px, 49px 56px;
	background-position: 50% 50%, 50% 50%;
	border-bottom: 1px solid #12b061;
}
#background article p.islandMap span {
	display: block;
	margin: 0 auto 0 auto;
	width: 1160px;
	height: 513px;
	background: url(./images/map_attention.png) no-repeat 0 114px;
	overflow: hidden;
	text-indent: -20em;
}
/** スマートフォン用カウンター **/
@media screen and (max-width: 740px) {
	#background article p.islandMap {
		margin: 0 0 20px 0;
		width: 100%; height: auto;
		background: url(./images/background.svg);
		background-size: 49px 56px;
		border-bottom: none;
	}
	#background article p.islandMap span {
		width: 100%;
		height: auto;
		padding-top: 125%;
		font-size: 0.1em;
		line-height: 0.1em;
		background: url(./images/map_sp.png) no-repeat 0 0;
		background-size: 100% auto;
	}
}
/*------------------------------------
  英語2020設定　ここから ※2020/06/11追加
-------------------------------------*/
#background article p.islandMap2020 {
	margin: 0 0 60px 0;
	width: 100%; height: 514px;
	background-image: url(./images/map.png), url(./images/background.svg);
	background-repeat: no-repeat, background-repeat;
	background-size: 2000px 513px, 49px 56px;
	background-position: 50% 50%, 50% 50%;
	border-bottom: 1px solid #12b061;
}
#background article p.islandMap2020 span {
	display: block;
	margin: 0 auto 0 auto;
	width: 1160px;
	height: 513px;
	background: url(./images/map_attention_2020.png) no-repeat 0 114px;
	overflow: hidden;
	text-indent: -20em;
}
/** スマートフォン用カウンター **/
@media screen and (max-width: 740px) {
	#background article p.islandMap2020 {
		margin: 0 0 20px 0;
		width: 100%; height: auto;
		background: url(./images/background.svg);
		background-size: 49px 56px;
		border-bottom: none;
	}
	#background article p.islandMap2020 span {
		width: 100%;
		height: auto;
		padding-top: 125%;
		font-size: 0.1em;
		line-height: 0.1em;
		background: url(./images/map_sp_2020.png) no-repeat 0 0;
		background-size: 100% auto;
	}
}
/*------------------------------------
  チャイナ設定　ここから
-------------------------------------*/
#background.typeCn article p.islandMap {
	background-image: url(./images/map_cn.png), url(./images/background.svg);
}
#background.typeCn article p.islandMap span {
	background-image: url(./images/map_attention_cn.png);
}
/** チャイナSP用カウンター **/
@media screen and (max-width: 740px) {
	#background.typeCn article p.islandMap {
		background: url(./images/background.svg);
		background-size: 49px 56px;
	}
	#background.typeCn article p.islandMap span {
		background-image: url(./images/map_cn_sp.png);
	}
}
/*------------------------------------
  チャイナ2020設定　ここから ※2020/06/11追加
-------------------------------------*/
#background.typeCn article p.islandMap2020 {
	background-image: url(./images/map_cn.png), url(./images/background.svg);
}
#background.typeCn article p.islandMap2020 span {
	background-image: url(./images/map_attention_cn_2020.png);
}
/** チャイナSP用カウンター **/
@media screen and (max-width: 740px) {
	#background.typeCn article p.islandMap2020 {
		background: url(./images/background.svg);
		background-size: 49px 56px;
	}
	#background.typeCn article p.islandMap2020 span {
		background-image: url(./images/map_cn_sp_2020.png);
	}
}
/*===========================================================================

  ウサギふれあいルール設定　ここから

===========================================================================*/
#background article #rulesArea .photoSet {
	display: block;
	width: 1160px;
	margin: 0 auto 0 auto;
}
#background article #rulesArea .photoSet p ,
#background article #rulesArea .photoSet ul {
	width: 750px;
	float: left;
}
#background article #rulesArea .photoSet p.slideGallery {
	width: 370px;
	float: right;
}
#background article #rulesArea .photoSet p.more {
	text-align: left;
}
#background article #rulesArea .photoSet p.more a {
	display: inline-block;
	width: auto;
	text-align: left;
	margin: 0 0 0 0;
}
#background article #rulesArea .photoSet p.more a span {
	display: block;
}
/** スマートフォン用カウンター **/
@media screen and (max-width: 740px) {
	#background article #rulesArea .photoSet {
		width: 100%;
	}
	#background article #rulesArea .photoSet p ,
	#background article #rulesArea .photoSet ul ,
	#background article #rulesArea .photoSet p.slideGallery {
		width: auto;
		float: none;
	}
	#background article #rulesArea .photoSet p.more {
		text-align: center;
	}
	#background article #rulesArea .photoSet p.more a {
		display: block;
		width: auto;
		text-align: left;
	}
	#background article #rulesArea .photoSet p.more a span {
		display: inline;
	}
}
/*------------------------------------
  チャイナ設定　ここから
-------------------------------------*/

/** チャイナSP用カウンター **/
@media screen and (max-width: 740px) {
	#background.typeCn article #rulesArea .photoSet p.more a {
		text-align: center;
	}
}
/*===========================================================================

  追加トップバナー設定　ここから

===========================================================================*/
#background article.addBanner {
	margin: 60px 0;
}
#background article.addBanner.addBanner25 {
	margin-bottom: 0;
}
#background article.addBanner p {
	width: 840px;
	margin: auto;
	text-align: center;
}
#background article.addBanner p a {
	background: #12b061;
	display: block;
}
#background article.addBanner p em {
	display: inline-block;
	font-size: 32px;
	font-weight: bold;
	color: #fff;
	line-height: 1em;
	padding: 20px 60px;
	margin: auto;
	text-align: center;
	position: relative;
}
#background article.addBanner p em:after ,
#background article.addBanner p em:before {
	content: "";
	display: block;
	visibility: visible;
	width: 40px;
	height: 40px;
	background: url(./images/attractions/icon_att.svg) no-repeat 50% 50%;
	background-size: contain;
	position: absolute;
	left: 0;
	top: calc(50% - 20px);
}
#background article.addBanner p em:after {
	background-image: url(./images/icon02.svg);
	left: auto;
	right: 0;
}
/** スマートフォン用カウンター **/
@media screen and (max-width: 740px) {
	#background article.addBanner {
		margin: 20px 0;
	}
	#background article.addBanner p {
		width: 90%;
	}
	#background article.addBanner p em {
		font-size: 18px;
		padding: 15px 60px;
	}
	#background article.addBanner p em:after ,
	#background article.addBanner p em:before {
		width: 24px;
		height: 24px;
		left: 15px;
		top: calc(50% - 12px);
	}
	#background article.addBanner p em:after {
		left: auto;
		right: 15px;
	}
}

/*===========================================================================

  設定　ここから

===========================================================================*/
/*------------------------------------
  設定　ここから
-------------------------------------*/

/** スマートフォン用カウンター **/
@media screen and (max-width: 740px) {
}
/*-----------------------------------*/

/** スマートフォン用カウンター **/
@media screen and (max-width: 740px) {
}

/*------------------------------------
  設定　ここから
-------------------------------------*/

/** スマートフォン用カウンター **/
@media screen and (max-width: 740px) {
}
/*-----------------------------------*/

/** スマートフォン用カウンター **/
@media screen and (max-width: 740px) {
}