@charset "UTF-8";
/*----------------------------------------

	+ content
		- movie
		- plaza
		- hydrangea
		- viewing
		- plum
		- garden
		- rose

-----------------------------------------*/

/*----------------------------------------
	content
-----------------------------------------*/
#content {
	overflow: hidden;
}
#content > h1 {
	position: relative;
	height: 400px;
}
#content > h1::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/i_tit_bg01.jpg) no-repeat center;
	background-size: cover;
}
#content > h1 > span {
	display: block;
	position: absolute;
	top: 0;
	right: 101px;
	width: 114px;
	height: 100%;
	background: url(../../img/c_bg06.gif) repeat left top;
}
#content > h1 > span > span:first-child {
	display: block;
	width: 33px;
	height: auto;
	margin: 39px 0 0 41px;
}
#content > h1 > span > span:nth-child(2) {
	display: none;
}
#content > h1 > span > span img {
	width: 100%;
	height: auto;
}
#content > h1 + p {
	min-width: 1000px;
	width: calc(100% - 200px);
	margin: 0 auto;
	padding: 56px 0;
}
#content > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	min-width: 1000px;
	width: calc(100% - 200px);
	margin: 0 auto;
}
#content > ul > li {
	min-width: 320px;
	width: calc((100%/3) - (40px/2));
}
#content > ul > li:nth-child(n+4) {
	margin-top: 40px;
}
#content > ul > li a {
	text-decoration: none;
}
#content > ul > li a figure img {
	width: 100%;
	height: auto;
}
#content > ul > li a figure figcaption {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 280px;
	min-height: 80px;
	margin-top: -40px;
	padding: 16px 20px;
	box-sizing: border-box;
	color: #fff;
	text-align: center;
	z-index: 1;
}
#content > ul > li:first-child a figure figcaption {
	background: #1f9985;
}
#content > ul > li:nth-child(2) a figure figcaption {
	background: #7a5c99;
}
#content > ul > li:nth-child(3) a figure figcaption {
	background: #268cbf;
}
#content > ul > li:nth-child(4) a figure figcaption {
	background: #995a45;
}
#content > ul > li:nth-child(5) a figure figcaption {
	background: #bfa34d;
}
#content > ul > li:nth-child(6) a figure figcaption {
	background: #b3477d;
}
@media only screen and (max-width:768px) {
	#content > h1 {
		height: 200px;
	}
	#content > h1 > span {
		position: relative;
		top: 200px;
		right: 0;
		width: 100%;
		height: 66px;
		background: url(../../img/c_bg04_sp.gif) repeat left top;
	}
	#content > h1 > span > span:first-child {
		display: none;
	}
	#content > h1 > span > span:nth-child(2) {
		display: block;
		width: 174px;
		height: auto;
		margin: 0 auto;
		padding-top: 20px;
	}
	#content > h1 + p {
		min-width: 300px;
		width: 300px;
		margin-top: 66px;
	}
	#content > ul {
		display: inherit;
		min-width: 300px;
		width: 300px;
	}
	#content > ul > li {
		min-width: 100%;
		width: 100%;
		overflow: hidden;
	}
	#content > ul > li:nth-child(n+2) {
		margin-top: 20px;
	}
	#content > ul > li a figure {
		position: relative;
		height: 120px;
	}
	#content > ul > li a figure::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 30px;
		height: 120px;
		background: #fff;
	}
	#content > ul > li a figure img {
		width: 320px;
		height: 120px;
		margin: 0 -25px;
	}
	#content > ul > li a figure figcaption {
		width: 180px;
		min-height: 74px;
		margin: -74px 0 0 auto;
		padding: 16px 10px;
	}
}

/*----------------------------------------
	movie
-----------------------------------------*/
#movie {
	display: flex;
	justify-content: center;
	margin-top: 60px;
  background: url(../../img/c_bg01.gif) repeat left top;
}
@media only screen and (max-width:768px) {
	#movie {
		display: inherit;
		position: relative;
		width: 100%;
		padding: calc(214 / 380 * 100%) 0 0;
	}
	#movie iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

/*----------------------------------------
	plaza
-----------------------------------------*/
#plaza {
	display: flex;
	position: relative;
	min-width: 1000px;
	width: calc(100% - 200px);
	margin: 60px auto 0;
	padding-top: 500px;
}
#plaza::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 500px;
	background: url(../img/i_p07.jpg) no-repeat center;
	background-size: cover;
}
#plaza > div {
	position: relative;
	width: 400px;
	margin-top: -180px;
	border-top: 10px solid #1f9985;
}
#plaza > div > h1 {
	padding: 80px 0;
	background: #fff;
}
#plaza > div > h1 img {
	display: block;
	width: 184px;
	height: auto;
	margin: 0 auto;
}
#plaza > div > div {
	padding: 36px 40px 60px;
	background: #1f9985;
}
#plaza > div > div > p:nth-child(2) {
	padding-top: 22px;
}
#plaza > div > div > p > a {
	display: block;
	width: 252px;
	margin-top: 36px;
	padding: 14px 10px;
	box-sizing: border-box;
	text-align: center;
}
#plaza > div > div > p:nth-child(4) > a {
	margin-top: 20px;
}
#plaza > figure {
	min-width: 600px;
	width: calc(100% - 400px);
}
#plaza > figure img {
	width: 100%;
	height: auto;
}
@media only screen and (max-width:768px) {
	#plaza {
		display: inherit;
		min-width: 100%;
		width: 100%;
		padding: 200px 0 40px;
		background: #1f9985;
	}
	#plaza::before {
		height: 200px;
	}
	#plaza > div {
		width: 100%;
		margin-top: 0;
	}
	#plaza > div > h1 {
		padding: 60px 0;
	}
	#plaza > div > h1 img {
		width: 148px;
	}
	#plaza > div > div {
		width: 300px;
		margin: 0 auto;
		padding-right: 0;
		padding-left: 0;
	}
	#plaza > div > div > p > a {
		margin-right: auto;
		margin-left: auto;
	}
	#plaza > figure {
		min-width: 300px;
		width: 300px;
		margin: 0 auto;
	}
}

/*----------------------------------------
	hydrangea
-----------------------------------------*/
#hydrangea {
	display: flex;
	flex-direction: row-reverse;
	position: relative;
	min-width: 1000px;
	width: calc(100% - 200px);
	margin: 60px auto 0;
	padding-top: 500px;
}
#hydrangea::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 500px;
	background: url(../img/i_p09.jpg) no-repeat center;
	background-size: cover;
}
#hydrangea > div {
	position: relative;
	width: 400px;
	margin-top: -180px;
	border-top: 10px solid #7a5c99;
}
#hydrangea > div > h1 {
	padding: 80px 0;
	background: #fff;
}
#hydrangea > div > h1 img {
	display: block;
	width: 269px;
	height: auto;
	margin: 0 auto;
}
#hydrangea > div > div {
	padding: 36px 40px 60px;
	background: #7a5c99;
}
#hydrangea > div > div > p:nth-child(2) {
	padding-top: 22px;
}
#hydrangea > div > div > p > a {
	display: block;
	width: 252px;
	margin-top: 36px;
	padding: 14px 10px;
	box-sizing: border-box;
	text-align: center;
}
#hydrangea > figure {
	min-width: 600px;
	width: calc(100% - 400px);
}
#hydrangea > figure img {
	width: 100%;
	height: auto;
}
@media only screen and (max-width:768px) {
	#hydrangea {
		display: inherit;
		min-width: 100%;
		width: 100%;
		padding: 200px 0 40px;
		background: #7a5c99;
	}
	#hydrangea::before {
		height: 200px;
	}
	#hydrangea > div {
		width: 100%;
		margin-top: 0;
	}
	#hydrangea > div > h1 {
		padding: 60px 0;
	}
	#hydrangea > div > h1 img {
		width: 215px;
	}
	#hydrangea > div > div {
		width: 300px;
		margin: 0 auto;
		padding-right: 0;
		padding-left: 0;
	}
	#hydrangea > div > div > p > a {
		margin-right: auto;
		margin-left: auto;
	}
	#hydrangea > figure {
		min-width: 300px;
		width: 300px;
		margin: 0 auto;
	}
}

/*----------------------------------------
	viewing
-----------------------------------------*/
#viewing {
	display: flex;
	position: relative;
	min-width: 1000px;
	width: calc(100% - 200px);
	margin: 60px auto 0;
	padding-top: 500px;
}
#viewing::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 500px;
	background: url(../img/i_p11.jpg) no-repeat center;
	background-size: cover;
}
#viewing > div {
	position: relative;
	width: 400px;
	margin-top: -180px;
	border-top: 10px solid #268cbf;
}
#viewing > div > h1 {
	padding: 80px 0;
	background: #fff;
}
#viewing > div > h1 img {
	display: block;
	width: 139px;
	height: auto;
	margin: 0 auto;
}
#viewing > div > div {
	padding: 36px 40px 60px;
	background: #268cbf;
}
#viewing > div > div > p:nth-child(2) {
	margin-top: 12px;
}
#viewing > figure {
	min-width: 600px;
	width: calc(100% - 400px);
}
#viewing > figure p {
	position: relative;
}
#viewing > figure p::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/i_p12_gra.png) no-repeat left bottom;
	background-size: 100% auto;
}
#viewing > figure p img {
	width: 100%;
	height: auto;
}
#viewing > figure p span {
	position: absolute;
	right: 10px;
	bottom: 6px;
}
#viewing > figure ul {
	display: flex;
}
#viewing > figure ul li {
	min-width: 150px;
	width: calc(100%/4);
}
#viewing > figure ul li img {
	width: 100%;
	height: auto;
}
@media only screen and (max-width:768px) {
	#viewing {
		display: inherit;
		min-width: 100%;
		width: 100%;
		padding: 200px 0 40px;
		background: #268cbf;
	}
	#viewing::before {
		height: 200px;
	}
	#viewing > div {
		width: 100%;
		margin-top: 0;
	}
	#viewing > div > h1 {
		padding: 60px 0;
	}
	#viewing > div > h1 img {
		width: 111px;
	}
	#viewing > div > div {
		width: 300px;
		margin: 0 auto;
		padding: 36px 0 56px;
	}
	#viewing > figure {
		min-width: 300px;
		width: 300px;
		margin: 0 auto;
	}
	#viewing > figure p {
		position: relative;
	}
	#viewing > figure p::before {
		display: none;
	}
	#viewing > figure p img {
		width: 100%;
		height: auto;
	}
	#viewing > figure p span {
		display: block;
		position: relative;
		right: auto;
		bottom: auto;
		padding: 16px 0;
	}
	#viewing > figure ul {
		flex-wrap: wrap;
	}
	#viewing > figure ul li {
		width: 50%;
	}
}

/*----------------------------------------
	plum
-----------------------------------------*/
#plum {
	display: flex;
	flex-direction: row-reverse;
	position: relative;
	min-width: 1000px;
	width: calc(100% - 200px);
	margin: 60px auto 0;
	padding-top: 500px;
}
#plum::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 500px;
	background: url(../img/i_p17.jpg) no-repeat center;
	background-size: cover;
}
#plum > div {
	position: relative;
	width: 400px;
	margin-top: -180px;
	border-top: 10px solid #995a45;
}
#plum > div > h1 {
	padding: 80px 0;
	background: #fff;
}
#plum > div > h1 img {
	display: block;
	width: 93px;
	height: auto;
	margin: 0 auto;
}
#plum > div > div {
	padding: 36px 40px 60px;
	background: #995a45;
}
#plum > div > div > p:nth-child(2) {
	margin-top: 12px;
}
#plum > div > div > p > a {
	display: block;
	width: 252px;
	margin-top: 36px;
	padding: 14px 10px;
	box-sizing: border-box;
	text-align: center;
}
#plum > figure {
	min-width: 600px;
	width: calc(100% - 400px);
}
#plum > figure img {
	width: 100%;
	height: auto;
}
@media only screen and (max-width:768px) {
	#plum {
		display: inherit;
		min-width: 100%;
		width: 100%;
		padding: 200px 0 40px;
		background: #995a45;
	}
	#plum::before {
		height: 200px;
	}
	#plum > div {
		width: 100%;
		margin-top: 0;
	}
	#plum > div > h1 {
		padding: 60px 0;
	}
	#plum > div > h1 img {
		width: 74px;
	}
	#plum > div > div {
		width: 300px;
		margin: 0 auto;
		padding-right: 0;
		padding-left: 0;
	}
	#plum > div > div > p > a {
		margin-right: auto;
		margin-left: auto;
	}
	#plum > figure {
		min-width: 300px;
		width: 300px;
		margin: 0 auto;
	}
}

/*----------------------------------------
	garden
-----------------------------------------*/
#garden {
	position: relative;
	width: 100%;
	margin: 60px auto 0;
	padding-top: 480px;
}
#garden::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 480px;
	background: url(../img/i_p19.jpg) no-repeat center;
	background-size: cover;
}
#garden > div {
	position: relative;
	min-width: 800px;
	width: calc(100% - 400px);
	margin: -120px auto 0;
	border-top: 10px solid #bfa34d;
}
#garden > div > h1 {
	padding: 40px 0;
	background: #fff;
}
#garden > div > h1 img {
	display: block;
	width: 321px;
	height: auto;
	margin: 0 auto;
}
#garden > div > div {
	display: flex;
	justify-content: space-between;
	padding: 40px;
	background: #bfa34d;
}
#garden > div > div > p:first-child {
	min-width: 408px;
	width: calc(100% - 312px);
}
#garden > div > div > p > a {
	display: block;
	width: 252px;
	padding: 14px 10px;
	box-sizing: border-box;
	text-align: center;
}
@media only screen and (max-width:768px) {
	#garden {
		min-width: 100%;
		width: 100%;
		padding: 200px 0 0;
	}
	#garden::before {
		height: 200px;
	}
	#garden > div {
		min-width: 100%;
		width: 100%;
		margin: 0;
		background: #bfa34d;
	}
	#garden > div > h1 {
		padding: 60px 0;
	}
	#garden > div > h1 img {
		width: 257px;
	}
	#garden > div > div {
		display: inherit;
		width: 300px;
		margin: 0 auto;
		padding: 36px 0 60px;
	}
	#garden > div > div > p:first-child {
		min-width: 100%;
		width: 100%;
	}
	#garden > div > div > p > a {
		margin: 36px auto 0;
	}
}

/*----------------------------------------
	rose
-----------------------------------------*/
#rose {
	display: flex;
	position: relative;
	min-width: 1000px;
	width: calc(100% - 200px);
	margin: 60px auto 0;
	padding-top: 500px;
}
#rose::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 500px;
	background: url(../img/i_p20.jpg) no-repeat center;
	background-size: cover;
}
#rose > div {
	position: relative;
	width: 400px;
	margin-top: -180px;
	border-top: 10px solid #b3477d;
}
#rose > div > h1 {
	padding: 80px 0;
	background: #fff;
}
#rose > div > h1 img {
	display: block;
	width: 217px;
	height: auto;
	margin: 0 auto;
}
#rose > div > div {
	padding: 36px 40px 60px;
	background: #b3477d;
}
#rose > div > div > p:nth-child(2) {
	margin: 12px 0;
}
#rose > div > div > p:nth-child(4) {
	margin-top: 22px;
}
#rose > div > div > p > a {
	display: block;
	width: 252px;
	margin-top: 36px;
	padding: 14px 10px;
	box-sizing: border-box;
	text-align: center;
}
#rose > figure {
	min-width: 600px;
	width: calc(100% - 400px);
}
#rose > figure img {
	width: 100%;
	height: auto;
}
@media only screen and (max-width:768px) {
	#rose {
		display: inherit;
		min-width: 100%;
		width: 100%;
		padding: 200px 0 40px;
		background: #b3477d;
	}
	#rose::before {
		height: 200px;
	}
	#rose > div {
		width: 100%;
		margin-top: 0;
	}
	#rose > div > h1 {
		padding: 60px 0;
	}
	#rose > div > h1 img {
		width: 174px;
	}
	#rose > div > div {
		width: 300px;
		margin: 0 auto;
		padding-right: 0;
		padding-left: 0;
	}
	#rose > div > div > p > a {
		margin-right: auto;
		margin-left: auto;
	}
	#rose > figure {
		min-width: 300px;
		width: 300px;
		margin: 0 auto;
	}
}