@charset "utf-8";

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

	create	20240207-

*/


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

/* メイン
---------------------------------------- */
main .hopeTitle {
	margin: 0;
	padding: 50px 10px 10px;
}
main .hopeTitle .hopeTitleBox h2 {
	font-size: 2.4rem;
	text-align: center;
	margin: 0 0 20px;
}
main .hopeTitle .hopeTitleBox h2 span {
	font-size: 1.4rem;
	margin: 3px 0 0 0;
	display: block;
}

/* 説明文 */
main .hopeBlock {
	margin: 0;
	padding: 50px 0;
}
main .hopeBlock:nth-child(even) {
	background-color: #F3F3F3;
}
main .hopeBlock h3 {
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.3;
	text-align: center;
	margin: 0 0 30px;
}
main .hopeBlock h3 span {
	font-size: 1.6rem;
	margin: 0 0 10px;
	display: block;
}
main .hopeBlock h3.title01 {
	font-size: 2rem;
	line-height: 1.5;
	text-align: center;
	padding-bottom: 10px;
	background-image: url(../hope-tourism/img/titleBg.svg);
	background-repeat: no-repeat;
	background-position: center 85px;
	background-size: 220px;
}
main .hopeBlock h3.title01 span {
	font-size: 3rem;
	display: inline-block;
}
main .hopeBlock p {
	font-size: 1.6rem;
	line-height: 1.8;
	text-align: left;
	margin: 0 10px 30px;
}
main .hopeBlock figure {
	width: 100%;
	margin: 0 0 30px;
	padding: 0;
}
main .hopeBlock figure img {
	width: 100%;
}
main .hopeBlock .tokuBlock {
	margin: 0 10px 30px;
}
main .hopeBlock .tokuBlock .tokuBox figure {
	text-align: center;
	margin: 0 0 20px;
}
main .hopeBlock .tokuBlock .tokuBox figure img {
	width: 150px;
}
main .hopeBlock .tokuBlock .tokuBox h4 {
	color: #16C0F3;
	font-size: 2rem;
	text-align: left;
	line-height: 1.5;
	margin: 0 0 10px;
}
main .hopeBlock .tokuBlock .tokuBox h4.kiku {
	color: #88C765;
}
main .hopeBlock .tokuBlock .tokuBox h4.kangaeru {
	color: #F7955A;
}
main .hopeBlock .tokuBlock .tokuBox p {
	font-size: 1.4rem;
	text-align: left;
	line-height: 1.8;
	margin: 0 0 30px;
}
main .hopeBlock .tokuBlock .plus {
	width: 48px;
	margin: 0 auto 30px;
}
main .hopeBlock .tokuBlock .plus img {
	width: 100%;
}
main .hopeBlock .tokuBlock .yajirusi {
	width: 48px;
	margin: 0 auto 30px;
	transform: rotate(90deg);
}
main .hopeBlock .tokuBlock .yajirusi img {
	width: 100%;
}
main .hopeBlock .fpBlock h4 {
	color: #B7C7E6;
	font-size: 2rem;
	font-weight: bold;
	margin: 0 0 10px;
}
main .hopeBlock .fpBlock picture {
	margin: 0 auto 30px;
	display: block;
}
main .hopeBlock .fpBlock picture img {
	width: 100%;
	max-width: 300px;
}
main .hopeBlock .fpBlock .fpBox {
	margin: 0 10px 30px;
}
main .hopeBlock .fpBlock .fpBox h5 {
	font-size: 2rem;
	margin: 0 0 10px;
}
main .hopeBlock .fpBlock .fpBox h5 span {
	margin: 0 0 10px;
	padding: 10px 0;
	display: block;
	border-radius: 8px;
}
main .hopeBlock .fpBlock .fpBox h5.grayTitle span {
	color: #fff;
	background-color: #6D6E71;
}
main .hopeBlock .fpBlock .fpBox h5.orangeTitle {
	color: #F1843B;
}
main .hopeBlock .fpBlock .fpBox h5.orangeTitle span {
	color: #fff;
	background-color: #F1843B;
}
main .hopeBlock .fpBlock .fpBox ul {
	font-size: 1.6rem;
	text-align: left;
	list-style: none;
	margin: 0 0 20px;
}
main .hopeBlock .fpBlock .fpBox ul li {
	line-height: 1.8;
}
main .hopeBlock .fpBlock .fpBox ul li span {
	color: #6F93CC;
}
main .hopeInfoBlock {
	margin: 0;
	padding: 50px 0;
	background-color: #F3F3F3;
}
main .hopeInfoBlock .hopeInfoBox1 h3 {
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.3;
	text-align: center;
	margin: 0 0 30px;
}
main .hopeInfoBlock .hopeInfoBox1 h4 {
	color: #00ADEC;
	font-size: 2rem;
	margin: 0 0 25px;
}
main .hopeInfoBlock .hopeInfoBox1 h4 span {
	color: #333;
	font-size: 1.4rem;
}
main .hopeInfoBlock .hopeInfoBox1 p {
	font-size: 1.6rem;
	line-height: 1.8;
	text-align: left;
	margin: 0 10px 30px;
}
main .hopeInfoBlock .hopeInfoBox1 p.email {
	width: 100%;
	max-width: 350px;
	margin: 0 auto 10px;
}
main .hopeInfoBlock .hopeInfoBox1 p.email a img {
	width: 100%;
}
main .hopeInfoBlock .hopeInfoBox1 p.tel {
	width: 100%;
	max-width: 250px;
	margin: 0 auto 0;
}
main .hopeInfoBlock .hopeInfoBox1 p.tel a img {
	width: 100%;
}
main .hopeInfoBlock .hopeInfoBox1 p.comment {
	font-size: 1.6rem;
	text-align: center;
}
main .hopeInfoBlock .hopeInfoBox2 {
	margin: 0 10px;
	padding: 15px;
	background-color: #fff;
	border: 2px solid #5CB2DE;
	border-radius: 8px;
}
main .hopeInfoBlock .hopeInfoBox2 h4 {
	color: #00ADEC;
	font-size: 2rem;
	margin: 0 0 20px;
}
main .hopeInfoBlock .hopeInfoBox2 dl {
	font-size: 1.6rem;
	text-align: left;
	line-height: 1.6;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
main .hopeInfoBlock .hopeInfoBox2 dl dt {
	width: 20px;
	vertical-align: top;
}
main .hopeInfoBlock .hopeInfoBox2 dl dd {
	width: calc(100% - 30px);
	margin-bottom: 15px;
}
main .hopeInfoBlock .hopeInfoBox2 dl dd:last-of-type {
	margin-bottom: 0;
}
main .hopeBannerBlock {
	margin: 0;
	padding: 50px 0;
}
main .hopeBannerBlock h3 {
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.3;
	text-align: center;
	margin: 0 0 10px;
}
main .hopeBannerBlock h3 span {
	display: block;
}
main .hopeBannerBlock p a picture {
	text-align: center;
}
main .hopeBannerBlock p a picture img {
	width: 100%;
	max-width: 234px;
}



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

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



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

	/* メイン
	---------------------------------------- */
	main .hopeTitle {
		padding: 80px 10px 10px;
	}
	main .hopeBlock {
		padding: 80px 0;
	}
	main .hopeBlock h3 {
		font-size: 2.2rem;
	}
	main .hopeBlock .tokuBlock {
		display: flex;
		justify-content: space-between;
		position: relative;
	}
	main .hopeBlock .tokuBlock p {
		font-size: 1.6rem;
	}
	main .hopeBlock .tokuBlock .tokuBox {
		width: 30%;
	}
	main .hopeBlock .tokuBlock .tokuBox .figure {
		width: 120px;
	}
	main .hopeBlock .tokuBlock .plus {
		position: absolute;
		top: 70px;
		left: 30%;
	}
	main .hopeBlock .tokuBlock .yajirusi {
		width: 65px;
		position: absolute;
		top: 90px;
		right: 27%;
		transform: rotate(0deg);
	}
	main .hopeInfoBlock {
		padding: 80px 10px;
		display: flex;
		justify-content: space-between;
	}
	main .hopeInfoBlock .hopeInfoBox1 {
		width: calc(55% - 10px);
	}
	main .hopeInfoBlock .hopeInfoBox1 h3 {
		font-size: 2.2rem;
	}
	main .hopeInfoBlock .hopeInfoBox1 h4 {
		margin: 0 0 15px;
	}
	main .hopeInfoBlock .hopeInfoBox2 {
		width: calc(45% - 10px);
	}
	main .hopeBannerBlock {
		padding: 80px 0;
	}
	main .hopeBannerBlock p a picture img {
		max-width: 468px;
	}
}



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

	/* メイン
	---------------------------------------- */
	main .hopeTitle .hopeTitleBox h2 {
		font-size: 3rem;
	}
	main .hopeTitle .hopeTitleBox h2 span {
		font-size: 1.6rem;
	}
	main .hopeBlock h3.title01 {
		font-size: 3rem;
		background-position: center 94px;
		background-size: 340px;
	}
	main .hopeInfoBlock .hopeInfoBox1 h3 {
		font-size: 2.8rem;
	}
	main .hopeBlock {
		padding: 100px calc(50% - 500px);
	}
	main .hopeBlock h3 {
		font-size: 3rem;
	}
	main .hopeBlock .fpBlock {
		position: relative;
	}
	main .hopeBlock .fpBlock h4 {
		font-size: 2.2rem;
		text-align: left;
		margin: 0 10px 30px;
	}
	main .hopeBlock .fpBlock picture {
		position: absolute;
		top: -32px;
		right: 15px;
		width: 42%;
	}
	main .hopeBlock .fpBlock picture img {
		max-width: 360px;
	}
	main .hopeBlock .fpBlock .fpBox h5 {
		text-align: left;
	}
	main .hopeBlock .fpBlock .fpBox h5 span {
		width: 145px;
		text-align: center;
		margin-right: 10px;
		display: inline-block;
	}
	main .hopeBlock .fpBlock h4 {
		font-size: 3rem;
	}
	main .hopeInfoBlock {
		padding: 100px calc(50% - 500px);
	}
}



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

	/* メイン
	---------------------------------------- */
	main .hopeTitle {
		padding: 100px calc(50% - 500px) 10px;
	}
	main .hopeTitle .hopeTitleBox h2 {
		font-size: 3.6rem;
	}
	main .hopeTitle .hopeTitleBox h2 span {
		font-size: 1.6rem;
	}
}



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

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