@charset "utf-8";

/*
	hopetourism-enjoyplus.jp　お知らせCSS
	https://hopetourism-enjoyplus.jp/info/

	create	20240207-

*/


/* ---------------------------------------------------------
	約568px未満の画面向けスタイル モバイルファースト
--------------------------------------------------------- */

/* メイン
---------------------------------------- */
main .infoTitle {
	margin: 0;
	padding: 50px 10px 10px;
}
main .infoTitle .infoTitleBox h2 {
	font-size: 2.4rem;
	margin: 0;
}
main .infoTitle .infoTitleBox h2 span {
	font-size: 1.4rem;
	margin: 3px 0 0 0;
	display: block;
}

/* お知らせ一覧 */
main .infoList {
	margin: 0;
	padding: 30px 10px 30px;
}
main .infoList h2 {
	font-size: 24px;
	margin: 0 0 30px;
	span {
		font-size: 14px;
		margin-top: 10px;
		display: block;
	}
}
main .infoList .count {
	font-size: 1.6rem;
	text-align: left;
	margin: 0 0 10px;
	padding: 0 10px;
}
main .infoList > ul {
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
	border-top: 3px solid #999;
	border-bottom: 3px solid #999;
}
main .infoList > ul li {
	font-size: 1.6rem;
	text-align: left;
	width: 100%;
	margin: 0;
	padding: 15px;
	border-bottom: 2px dotted #999;
}
main .infoList > ul li span.date {
	margin: 0 0 10px;
	display: block;
}
main .infoList > ul li span.new {
	color: #f00;
	font-weight: bold;
	margin: 0 0 0 5px;
	display: inline-block;
}
main .infoList > ul li:last-of-type {
	border: none;
}
main .infoList .btnMore {
	width: 300px;
	margin: 20px auto 0;
	padding: 0;
}
main .infoList .btnMore a {
	font-size: 2rem;
	text-align: center;
	text-decoration: none;
	width: 100%;
	color: #fff;
	margin: 0;
	padding: 15px 0;
	background-color: #349FD6;
	border-radius: 32px;
	display: block;
}
main .infoList .btnMore a:hover {
	background-color: #2F6F8F;
}

/* ページャー */
main .infoList .pager {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;
			justify-content: center;
	margin: 0 0 15px;
}
main .infoList .pager ul {
	list-style: none;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;
		justify-content: center;
	gap: 2px;
}
main .infoList .pager .pageStart a,
main .infoList .pager .pageEnd a{
	color: #333;
	text-decoration: none;
	width: 38px;
	height: 38px;
	margin: 0 2px;
	padding: 9px 0 0 0;
	background-color: #fff;
	border: 1px solid #999;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
		border-radius: 3px;
	cursor: pointer;
	display: none;
}
main .infoList .pager ul li a {
	color: #333;
	text-decoration: none;
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 9px 0 0 0;
	background-color: #fff;
	border: 1px solid #999;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
		border-radius: 3px;
	cursor: pointer;
	display: block;
}
main .infoList .pager .pageStart a:hover,
main .infoList .pager .pageEnd a:hover,
main .infoList .pager ul li a:hover {
	color: #fff;
	border: 1px solid #999;
	background-color: #2F6F8F;
}
main .infoList .pager .pageStart span,
main .infoList .pager .pageEnd span,
main .infoList .pager ul li span {
	color: #999;
	text-decoration: none;
	width: 38px;
	height: 38px;
	padding: 9px 0 0 0;
	background-color: #fff;
	border: 1px solid #999;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
		border-radius: 3px;
	display: block;
}
main .infoList .pager ul li.select span {
	color: #fff;
	text-decoration: none;
	width: 38px;
	height: 38px;
	padding: 9px 0 0 0;
	border: 1px solid #5CB2DE;
	background-color: #5CB2DE;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
			border-radius: 3px;
	display: block;
}

/* お知らせ詳細 */
main .infoMeisai {
	margin: 0;
	padding: 50px 10px;
}
main .infoMeisai h1 {
	font-size: 2rem;
	text-align: left;
	margin: 0 0 15px;
	padding: 0 5px 15px;
	border-bottom: 2px solid #999;
}
main .infoMeisai h1 span.date {
	font-size: 1.6rem;
	font-weight: normal;
	margin: 0 0 10px;
	display: block;
}
main .infoMeisai h1 span.new {
	color: #f00;
	margin: 0 0 0 5px;
	display: inline-block;
}
main .infoMeisai p {
	font-size: 1.6rem;
	line-height: 1.8;
	text-align: left;
	margin: 0 5px 50px;
	word-break: break-all;
}
main .infoMeisai figure.infoMeisaiPhoto {
	margin: 0 0 50px;
}
main .infoMeisai figure.infoMeisaiPhoto img {
	width: 100%;
}
main .infoMeisai figure.infoMeisaiPhoto figcaption {
	font-size: 1.4rem;
	text-align: center;
	margin: 0;
	padding: 5px 0 0 0;
}
main .infoMeisai .infoMeisaiData {
	font-size: 1.6rem;
	width: 100%;
	margin: 0 0 50px;
	padding: 20px;
	border: 1px solid #999;
	border-radius: 5px;
}
main .infoMeisai .infoMeisaiData ul {
	list-style: disc;
	margin: 0 0 0 20px;
}
main .infoMeisai .infoMeisaiData ul li {
	text-align: left;
	margin: 0 0 15px;
}
main .infoMeisai .infoMeisaiData ul li:last-of-type {
	margin: 0;
}
main .infoMeisai .infoMeisaiData ul li i {
	margin: 0 0 0 5px;
}
main .infoMeisai .infoMeisaiMovie {
	margin: 0 0 50px;
}
main .infoMeisai .infoMeisaiMovie iframe {
	width: 100%;
	max-width: 560px;
}
main .infoMeisai .infoMeisaiMap {
	margin: 0 0 50px;
}
main .infoMeisai .infoMeisaiMap iframe {
	width: 100%;
	height: 400px;
}


@media screen and (min-width: 375px){
	/*	約375px以上の画面向けスタイル second tablet */

	/* メイン
	---------------------------------------- */
}



@media screen and (min-width: 560px){
	/*	約560px以上の画面向けスタイル */

	/* メイン
	---------------------------------------- */
	main .infoList {
		margin: 0;
		padding: 50px 10px 50px;
	}
	main .infoList ul li a span {
		font-size: 1.6rem;
	}
	main .infoList .pager .pageStart a,
	main .infoList .pager .pageEnd a{
		display: block;
	}
	main .infoMeisai {
		margin: 0;
		padding: 50px 10px;
	}
	main .infoMeisai h1 {
		font-size: 2rem;
		padding: 0 10px 15px;
	}
	main .infoMeisai h1 span.date {
		font-size: 1.6rem;
	}
}





@media screen and (min-width: 980px){
	/*	約980px以上の画面向けスタイル */

	/* メイン
	---------------------------------------- */
	main .infoTitle .infoTitleBox h2 {
		font-size: 3rem;
	}
	main .infoList .btnMore {
		width: 350px;
	}
	main .infoList .btnMore a {
		font-size: 2.2rem;
		padding: 20px 0;
	}
}



@media screen and (min-width: 1200px){
	/*	約1200px以上の画面向けスタイル */

	/* メイン
	---------------------------------------- */
	main .infoTitle .infoTitleBox h2 {
		font-size: 3.6rem;
	}
	main .infoListTitle .infoListTitleBox h2 {
		font-size: 3.6rem;
	}
	main .infoListTitle .infoListTitleBox h2 span {
		font-size: 1.6rem;
	}
	main .infoListTitle .infoListTitleBox .category ul li {
		margin: 0 5px 10px;
		display: inline;
	}
	main .infoList {
		padding: 80px calc(50% - 600px);
	}
	main .infoList ul li a span {
		font-size: 2rem;
		padding: 20px;
	}
	main .infoList .btnMore {
		width: 400px;
	}
	main .infoList .btnMore a {
		font-size: 2.4rem;
		padding: 25px 0;
	}
	main .infoMeisai {
		padding: 50px calc(50% - 600px);
	}
	main .infoMeisai p {
		font-size: 1.6rem;
		margin: 0 10px 50px;
	}
	main .infoMeisai figure.infoMeisaiPhoto {
		margin: 0 auto 50px;
		max-width: 800px;
	}
	main .infoMeisai .infoMeisaiData {
		font-size: 1.6rem;
		margin: 0 10px 50px;
	}
	main .infoMeisai .infoMeisaiMovie {
		margin: 0 10px 50px;
	}
	main .infoMeisai .infoMeisaiMovie iframe {
		max-width: 800px;
		height: 450px;
	}
	main .infoMeisai .infoMeisaiMap {
		margin: 0 10px 50px;
	}
}



@media screen and (min-width: 1600px){
	/*	約1200px以上の画面向けスタイル */

	/* メイン
	---------------------------------------- */
}