﻿#header,
footer {
	background: #fff;
}

.secWrap {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto 1em;
}

.secWrap a {
	opacity: 1;
	transition: .3s;
}

@media screen and (min-width: 768px){

	body {
		background: #f9d1cb url(/lalaport/mamawith/special/flowermemorydays/common/image/bg.png) repeat-y center;
		background-size: 1680px;
	}

	body article {
		background: url(/lalaport/mamawith/special/flowermemorydays/common/image/detail_bg.png) center top no-repeat;
		background-size: 572px;
	}

	._sp {
		display: none !important;
	}

	#header dl {
		max-width: 1200px;
		width: 100%;
		margin: 0 auto;
		padding: 10px 0;
		overflow: hidden;
	}

	#header dl dt {
		padding: 5px 0;
		float: left;
		width: 125px;
	}

	#header dl dd {
		margin: 0;
		float: right;
		width: 200px;
	}

	#header dl dd img {
		display: inline-block;
		margin: 10px 15px 0;
	}

	#header dl dd a.lalap {
		width: 80px;
	}

	#header dl dt img,
	#header dl dd img {
		width: 100%;
		vertical-align: middle;
	}

	#header dl dd img {
		width: 90%;
	}

	#catch ul {
		max-width: 900px;
		margin: 2em auto 0;
	}

	.pgtop {
		width: 50px;
		bottom: 1em;
		right: 1em;
	}

}

@media screen and (max-width: 768px){

	body {
		background: #f9d1cb url(/lalaport/mamawith/special/flowermemorydays/common/image/bg.png) repeat-y center;
		background-size: 150%;
	}

	body article {
		background: url(/lalaport/mamawith/special/flowermemorydays/common/image/detail_bg.png) center top no-repeat;
		background-size: 50%;
	}

	.secWrap {
		position: relative;
	}

	._pc {
		display: none !important;
	}

	.pgtop {
		width: 4em;
		bottom: 1em;
		right: 1em;
	}
	
	._clear {
		clear: both;
	}

/* header */

	#header dl {
		max-width: 1200px;
		width: 100%;
		margin: 0 auto;
		overflow: hidden;
	}

	#header dl dt {
		margin: 10px;
		float: left;
		width: 15%;
	}

	#header dl dd {
		margin: 10px;
		float: right;
		width: 20%;
	}

	#header dl dd a {
		display: inline-block;
		margin: 5px;
	}

	#header dl dd a.lalap {
		width: 60px;
	}

	#header dl dt img,
	#header dl dd img {
		width: 100%;
		vertical-align: middle;
	}


}

.footer:before {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background-image: -webkit-linear-gradient(left, #abc4fa, #bef3ea);
	background-image: -o-linear-gradient(left, #abc4fa, #bef3ea);
	background-image: linear-gradient(to right, #abc4fa, #bef3ea);
}

/*
↑ここまで修正不可
///////////////////////////////////////////////////////////////////////// */

.ev_wrap {
	background: url(/lalaport/mamawith/special/flowermemorydays/common/image/detail_wrap_t.png), url(/lalaport/mamawith/special/flowermemorydays/common/image/detail_wrap_b.png);
	background-position: top center, bottom center;
	background-repeat: no-repeat no-repeat;
	background-size: contain;
	padding: 5% 0;
}


.ev_wrap > div {
	background: url(/lalaport/mamawith/special/flowermemorydays/common/image/detail_wrap_m.png) repeat-y;
	background-size: contain;
	padding: 0 7%;
}

.spot_link {
	position: relative;
}

.spot_link a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	transition: .3s;
}

.spot_link a span {
	display: none;
}

.ev_wrap .btnWrap {
	position: relative;
}

.ev_wrap .btnWrap {
	margin: 1.5em 1.5em 3.5em;
}

.ev_wrap .btnWrap p.btn {
	position: absolute;
	bottom: 9%;
	margin: 0;
	right: 4.5%;
	width: 60.25%;
}

#event01 .ev_wrap .btnWrap p.btn {
	width: 70.75%;
	right: 0;
	bottom: 5%;
}

.ev_wrap .btnWrap p.btn a.btn01 {
	border: 4px solid #9c9c9c;
	text-align: center;
	opacity: 1;
	transition: .3s;
	overflow: hidden;
	position: relative;
	border-radius: 1em;
	display: block;
}

.ev_wrap .btnWrap p.btn a.btn01 img {
	z-index: 2;
	position: relative;
}

.ev_wrap .btnWrap p.btn a.btn01 span:after {
	content: "";
	display: block;
	position: absolute;
	background: #fed800;
	top: 0;
	z-index: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	transition: .3s;
}

.spot_link a:nth-child(2) { top: 12%; left: 6%; width: 42%; height: 15%; }
.spot_link a:nth-child(3) { top: 12%; left: 52%; width: 42%; height: 15%; }
.spot_link a:nth-child(4) { top: 31%; left: 6%; width: 42%; height: 22%; }
.spot_link a:nth-child(5) { top: 31%; left: 52%; width: 42%; height: 15%; }
.spot_link a:nth-child(6) { top: 53%; left: 6%; width: 42%; height: 8%; }
.spot_link a:nth-child(7) { top: 65%; left: 6%; width: 42%; height: 15%; }
.spot_link a:nth-child(8) { top: 65%; left: 52%; width: 42%; height: 15%; }
.spot_link a:nth-child(9) { top: 83%; left: 52%; width: 42%; height: 15%; }

@media screen and (min-width: 768px){

	.wrapper {
		background: #fff;
		width: 100%;
		max-width: 1200px;
		margin: 4.5em auto 2.5em;
		padding: 0 0 2.5em;
		box-sizing: border-box;
	}

/* visual */

	.ev_title {
		position: relative;
		width: 100%;
		margin: 0 auto;
	}

	.ev_title h1 {
		max-width: 1000px;
		width: 100%;
		margin: 0 auto;
		padding: 70px 0;
	}

	.ev_title ul li {
		position: absolute;
	}

	.ev_title ul li:nth-child(1) {
		top: 0;
		left: 0;
		max-width: 235px;
	}

	.ev_title ul li:nth-child(2) {
		top: 0;
		right: 0;
		max-width: 250px;
	}

	aside {
		margin: 2.5em auto 0;
		padding: 2.5em 0;
		background: #fff;
	}

	aside p {
		margin: 0 auto;
		max-width: 1200px;
	}

	aside h3 {
		font-weight: bold;
		margin: 2.5em 0 0.5em;
		font-size: 200%;
	}

	.secWrap p {
		margin: 3.5em 1.5em;
	}

	#sec02 .secWrap h2 {
		margin: 6em 0 3em;
	}

	#sec02 .secWrap p {
		margin: 3.5em 0;
	}

	#sec02 .secWrap h2 img {
		width: 96%;
		margin: 0 auto;
	}

	#sec03 .secWrap h3 {
		font-size: 115%;
		margin-top: 1.5em;
	}

	#sec03 .secWrap p {
		margin: 0.25em 0 3.5em;
	}

}

@media screen and (max-width: 768px){

	.ev_wrap .btnWrap {
		margin-bottom: 1.5em;
	}

	.ev_wrap .btnWrap p.btn a.btn01 {
		border-width: 2px;
		border-radius: 0.5em;
	}

	aside {
		padding: 1.5em;
		margin-top: 2.5em;
		background: #fff;
	}

	aside h3 {
		font-weight: bold;
		margin: 2.5em 0 0.5em;
		font-size: 125%;
	}

	.wrapper {
		background: #fff;
		margin: 4.5em 1.5em 1.5em;
		padding: 0 0 0.5em;
		box-sizing: border-box;
	}

	/* visual
	////////////////////////////////////////////////*/

/* visual */

	.ev_title {
		position: relative;
		width: 100%;
		overflow: hidden;
		margin: 0 auto;
	}

	.ev_title h1 {
		width: 74%;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 13%;
	}

	.ev_title ul li {
		position: lelative;
		z-index: 2;
	}

	.ev_title ul li:nth-child(1) {
		width: 10%;
		float: left;
	}

	.ev_title ul li:nth-child(2) {
		float: right;
		width: 12%;
	}

	.ev_title + .secWrap {
		margin-top: -0.5em;
	}

	.secWrap p {
		margin: 1.5em 0;
	}

	#sec01 .secWrap,
	#sec01 .secWrap p {
		margin-top: 0;
	}

	#sec02 .secWrap h2 {
		margin: 2.5em 0.5em 1em;
	}

	#sec02 .secWrap p {
		margin: 1.5em 0;
	}

	#sec02 .secWrap h2 img {
		width: 96%;
		margin: 0 auto;
	}

	#sec03 p.btn {
		bottom: 3%;
	}

	.ev_wrap a.button01,
	.ev_wrap a.button02,
	#sec03 p.btn a.button03 {
		border: 0.35em solid #ddd;
		text-align: center;
		opacity: 1;
		transition: .3s;
		position: relative;
		overflow: hidden;
		padding: 0.5em 0;
	}

	.ev_wrap a.button01 img,
	.ev_wrap a.button02 img,
	#sec03 p.btn a.button03 img {
		width: auto;
		height: 2em;
		margin: 0 auto;
		position: relative;
		z-index: 1;
		opacity: 1;
		transition: .3s;
	}

	.secWrap {
		width: auto;
		margin: 1.5em;
	}

	#sec03 h3 {
		font-wize: 3vw;
		martin-bottom: 0.25em;
	}

	#sec03 p {
		margin-top: 0.25em;
		font-size: 2.5vw;
	}


}

.secWrap {
	position: relative;
}

.ev_wrap > div p:first-child {
	margin-top: 0;
}

.ev_wrap > div p:last-child {
	margin-bottom: 0;
}

.pageTop {
	position: fixed;
	right: 1.5em;
	bottom: 1.5em;
}

.pageTop a {
	display: block;
	width: 3em;
	line-height: 1.0;
	height: 3em;
	background: #eb6678;
	border: 0.35em solid #eb6678;
	border-radius: 50%;
	position: relative;
	transition: .3s;
	text-align: center;
	float: left;
	margin-left: 1em;
}

.pageTop a span {
	position: absolute;
	color: #fff;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: .3s;
}

.pageTop a.back {
	transform: rotate(30deg);
}

.ws_link {
	position: relative;
}

.ws_link a.link {
	position: absolute;
	opacity: 0;
	transition: .3s;
}

.ws_link a.link span {
	display: none;
}

.ws_link a.link01 { top: 62%; left: 55.5%; width: 9%; height: 1.75%; }
.ws_link a.link02 { top: 53%; left: 6%; width: 41%; height: 33%; }
.ws_link a.link03 { top: 21%; left: 6%; width: 41%; height: 16%; }
.ws_link a.link04 { top: 21%; left: 53.5%; width: 41%; height: 24.75%; }
.ws_link a.link05 { top: 48%; left: 53.5%; width: 41%; height: 8%; }
.ws_link a.link06 { top: 61.5%; left: 6%; width: 41%; height: 13%; }
.ws_link a.link07 { top: 61.5%; left: 53.5%; width: 41%; height: 13%; }
.ws_link a.link08 { top: 80%; left: 6%; width: 41%; height: 13%; }
.ws_link a.link09 { top: 80%; left: 53.5%; width: 41%; height: 13%; }
.ws_link a.link10 { top: 45%; left: 53.5%; width: 41%; height: 8%; }
.ws_link a.link11 { top: 40%; left: 6%; width: 41%; height: 34%; }

/* hover
///////////////////////////////////////////////////////////// */


@media screen and (min-width: 768px){

.spot_link a:hover {
	background: rgba(255, 255, 255, 0.7);
	transition: .3s;
}

.secWrap a:hover {
	opacity: .5;
	transition: .3s;
}


.pageTop a:hover {
	background: #fff;
	transition: .3s;
}

.pageTop a:hover span {
	color: #eb6678;
	transition: .3s;
}



.ws_link a.link:hover {
	background: #fff;
	opacity: .5;
	transition: .3s;
}


.ev_wrap .btnWrap p.btn a.btn01:hover {
	border-color: #471d09;
	opacity: 1;
	transition: .3s;
}


.ev_wrap .btnWrap p.btn a.btn01:hover span:after {
	left: 0;
	opacity: 1;
	transition: .3s;
}



}
