@charset "utf-8";
/* ------------------------------------------------------------ fv */
#fv {
	position: relative;
	background: url(../images/movie/fv_bg.jpg) no-repeat center center / cover;
}

#fv .logo {
	position: absolute;
	top: 30px;
	left: 30px;
}

#fv .lang {
	position: absolute;
	top: 0px;
	right: 0px;
	z-index: 2;
	background-color: rgba(0,154,229,0.85);
	padding: 14px 17px;
}

#fv .lang a {
	display: inline-block;
	font-size: 16px;
	color: #fff;
}

#fv .lang a:after {
	display: inline-block;
	content: "";
	background-color: #fff;
	border-radius: 5px;
	width: 2px;
	height: 16px;
	margin: 0 10px;
	vertical-align: -2px;	
}

#fv .lang a:last-child:after {
	display: none;
}

#fv .inner {
	height: 560px;
	position: relative;
}

#fv img.fv_text {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* ------------------------------------------------------------ movie */
#movie {
	background: #ffffca;
	margin: 0 0 230px;
}

#movie img {
	width: 100%;
	height: auto;
}

#movie .youtube {
	position: relative;
	top: 110px;
}

#movie .youtube-movie {
	text-align: center;
	padding: 30px 0;
}

/* ------------------------------------------------------------ city */
#city {
	padding: 0 0 100px;
	margin: 0 0 100px;
	background: url(../images/wavy-right.png) no-repeat center bottom;
}

#city .city {
	padding: 0 0 150px;
}

#city h2 {
	text-align: center;
	margin: 0 0 70px;
}

#city .flex_wrap {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 50px;
}

#city .flex_wrap li {
	width: calc((100% - 100px) / 2);
	margin-bottom: 40px;
}

#city .flex_wrap li:not(:nth-of-type(2n+2)) {
	margin-right: 100px;
}

#city .flex_wrap li figure {
	margin: 0 0 15px;
}

#city .flex_wrap li dl {
	display: flex;
	align-items: baseline;
}

#city .flex_wrap li dl dt {
	padding: 0 15px 30px 0;
	margin: 0 15px 0 0;
	border-right: solid 1px #dcdcdc;
	font-size: 20px;
}

#city .flex_wrap li dl dd h3 {
	font-size: 24px;
	font-family: 'Noto-Sans-JP-Medium';
	margin: 0 0 10px;
}

#city .flex_wrap li dl dd h4 {
	font-size: 16px;
	font-family: 'Noto-Sans-JP-Medium';
}

#city .bnr {
	text-align: center;
}

/* 御前崎市 */
#city #omaezaki {
	background: url(../images/omaezaki/map.png) no-repeat center center / auto 70%;
}

#city #omaezaki .flex_wrap li dl dt {
	background: url(../images/movie/icn_01.svg) no-repeat 3px bottom;
	color: #c8da88;
}

#city #omaezaki .flex_wrap li dl dd h4 {
	color: #c8da88;
}

/* 牧之原市 */
#city #makinohara {
	background: url(../images/makinohara/map.png) no-repeat center center / auto 70%;
}

#city #makinohara .flex_wrap li dl dt {
	background: url(../images/movie/icn_02.svg) no-repeat 3px bottom;
	color: #dc67b1;
}

#city #makinohara .flex_wrap li dl dd h4 {
	color: #dc67b1;
}

/* 掛川市 */
#city #kakegawa {
	background: url(../images/kakegawa/map.png) no-repeat center center / auto 70%;
}

#city #kakegawa .flex_wrap li dl dt {
	background: url(../images/movie/icn_03.svg) no-repeat 3px bottom;
	color: #e9bfd7;
}

#city #kakegawa .flex_wrap li dl dd h4 {
	color: #e9bfd7;
}

/* 菊川市 */
#city #kikugawa {
	background: url(../images/kikugawa/map.png) no-repeat center center / auto 70%;
}

#city #kikugawa .flex_wrap li dl dt {
	background: url(../images/movie/icn_04.svg) no-repeat 3px bottom;
	color: #e3a075;
}

#city #kikugawa .flex_wrap li dl dd h4 {
	color: #e3a075;
}

/* 島田市 */
#city #shimada {
	background: url(../images/shimada/map.png) no-repeat center center / auto 70%;
}

#city #shimada .flex_wrap li dl dt {
	background: url(../images/movie/icn_05.svg) no-repeat 3px bottom;
	color: #ecc16f;
}

#city #shimada .flex_wrap li dl dd h4 {
	color: #ecc16f;
}

/* 島田市 */
#city #kawanehontyou {
	background: url(../images/kawanehontyou/map.png) no-repeat center center / auto 70%;
}

#city #kawanehontyou .flex_wrap li dl dt {
	background: url(../images/movie/icn_06.svg) no-repeat 3px bottom;
	color: #6aa1d0;
}

#city #kawanehontyou .flex_wrap li dl dd h4 {
	color: #6aa1d0;
}

/* 藤枝市 */
#city #fujieda {
	background: url(../images/fujieda/map.png) no-repeat center center / auto 70%;
}

#city #fujieda .flex_wrap li dl dt {
	background: url(../images/movie/icn_07.svg) no-repeat 3px bottom;
	color: #a2cc91;
}

#city #fujieda .flex_wrap li dl dd h4 {
	color: #a2cc91;
}

/* 吉田町 */
#city #yoshida {
	background: url(../images/yoshida/map.png) no-repeat center center / auto 70%;
}

#city #yoshida .flex_wrap li dl dt {
	background: url(../images/movie/icn_08.svg) no-repeat 3px bottom;
	color: #9a79b6;
}

#city #yoshida .flex_wrap li dl dd h4 {
	color: #9a79b6;
}

/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 767px) {

/* ------------------------------------------------------------ fv */
	#fv {
		margin: 0 0 50px;
	}

	#fv .logo {
		top: 20px;
		left: 20px;
	}

	#fv .logo img {
		width: 90px;
		height: auto;
	}

	#fv .inner {
		height: 50vh;
	}

	#fv img.fv_text {
		width: 100%;
		height: auto;
	}
	
	#fv .lang{
		display: none;
	}

/* ------------------------------------------------------------ movie */
	#movie {
		margin: 50px 0 65px;
	}
	
	#movie img {
		position: inherit;
	}
	
	#movie .youtube {
		position: relative;
		top: 30px;
		width: 100%;
	}
	
	#movie .youtube-movie {
		padding: 15px 0;
		width: 100%;
	}
	
	#movie .youtube-movie .iflame {
		width: 77%;
		height: auto;
	}

/* ------------------------------------------------------------ city */
	#city {
		padding: 0 0 50px;
		margin: 0 0 50px;
		background: url(../images/wavy-right.png) no-repeat center bottom / 100% auto;
	}

	#city .city {
		padding: 0 0 50px;
	}

	#city h2 {
		margin: 0 0 170px;
	}

	#city h2 img {
		width: 110px;
	}

	#city .flex_wrap {
		display: block;
		margin: 0 0 30px;
	}

	#city .flex_wrap li {
		width: 100%;
		margin-bottom: 20px;
	}

	#city .flex_wrap li:not(:nth-of-type(2n+2)) {
		margin-right: 0;
	}

	#city .flex_wrap li dl {
		display: block;
	}

	#city .flex_wrap li dl dt {
		padding: 0 0px 10px 50px;
		margin: 0 0 10px;
		border-right: none;
		border-bottom: solid 1px #dcdcdc;
	}

	#city .flex_wrap li dl dd h3 {
		font-size: 21px;
		margin: 0 0 5px;
	}

	#city .flex_wrap li dl dd h4 {
		font-size: 14px;
	}

	/* 御前崎市 */
	#city #omaezaki {
		background: url(../images/omaezaki/map.png) no-repeat center top / 100% auto;
	}
	
	#city #omaezaki .flex_wrap li dl dt {
		background: url(../images/movie/icn_01.svg) no-repeat 3px 3px;
	}

	/* 牧之原市 */
	#city #makinohara {
		background: url(../images/makinohara/map.png) no-repeat center top / 100% auto;
	}
	
	#city #makinohara .flex_wrap li dl dt {
		background: url(../images/movie/icn_02.svg) no-repeat 3px 3px;
	}

	/* 掛川市 */
	#city #kakegawa {
		background: url(../images/kakegawa/map.png) no-repeat center top / 100% auto;
	}
	
	#city #kakegawa .flex_wrap li dl dt {
		background: url(../images/movie/icn_03.svg) no-repeat 3px 3px;
	}

	/* 菊川市 */
	#city #kikugawa {
		background: url(../images/kikugawa/map.png) no-repeat center top / 100% auto;
	}
	
	#city #kikugawa .flex_wrap li dl dt {
		background: url(../images/movie/icn_04.svg) no-repeat 3px 3px;
	}

	/* 島田市 */
	#city #shimada {
		background: url(../images/shimada/map.png) no-repeat center top / 100% auto;
	}
	
	#city #shimada .flex_wrap li dl dt {
		background: url(../images/movie/icn_05.svg) no-repeat 3px 3px;
	}

	/* 川根本町 */
	#city #kawanehontyou {
		background: url(../images/kawanehontyou/map.png) no-repeat center top / 100% auto;
	}
	
	#city #kawanehontyou .flex_wrap li dl dt {
		background: url(../images/movie/icn_06.svg) no-repeat 3px 3px;
	}

	/* 藤枝市 */
	#city #fujieda {
		background: url(../images/fujieda/map.png) no-repeat center top / 100% auto;
	}
	
	#city #fujieda .flex_wrap li dl dt {
		background: url(../images/movie/icn_07.svg) no-repeat 3px 3px;
	}

	/* 吉田町 */
	#city #yoshida {
		background: url(../images/yoshida/map.png) no-repeat center top / 100% auto;
	}
	
	#city #yoshida .flex_wrap li dl dt {
		background: url(../images/movie/icn_08.svg) no-repeat 3px 3px;
	}

}