@charset "utf-8";
/* font  "EB Garamond"*/
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&display=swap');

/* ========================
	common
========================== */
body {
	font-family: 'EB Garamond', serif;
}
p {
	font-size: 16px;
	line-height: 2.14;
}
#park {
	letter-spacing: 0.08em;
}
.w1000 {
	max-width: 1000px;
	width: 90%;
	margin: 0 auto;
}
.w680 {
	max-width: 680px;
	width: 90%;
	margin: 0 auto;
}
.w323 {
	max-width: 323px;
	width: 90%;
	margin: 0 auto;
}

/* 各テキスト フォントサイズ */
p.head_title {
	font-size: 35px;
}
p.head_text {
	font-size: 19px;
	line-height: 2.16;
}
h3 {
	width: fit-content;
	font-size: 25px;
	/*
	-moz-text-shadow: 0px 8px 50px rgba(206, 221, 205, 1);
	-webkit-text-shadow: 0px 8px 50px rgba(206, 221, 205, 1);
	-ms-text-shadow: 0px 8px 50px rgba(206, 221, 205, 1);
	text-shadow: 0px 8px 50px rgba(206, 221, 205, 1);
	*/
	margin: 0 auto 20px;
	position: relative;
}
h3::before {
	content: '';
	position: absolute;
	width: 80%;
	height: 20%;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	background-color: #85c780;
	opacity: 0.1;
	box-shadow: 0px 0px 20px 4px #296a24;
	z-index: -2;
}
p.note {
	font-size: 14px;
}
/* 幅ごとの改行用 */
.br_w1000 {
	display: none;
}
.br_w900 {
	display: none;
}
@media only screen and (max-width: 1130px) {
	p.head_text {
		font-size: 17px;
	}
	p {
		font-size: 14px;
	}
	p.note {
		font-size: 12px;
	}
}
@media only screen and (max-width: 1000px) {
	.br_w1000 {
		display: block;
	}
}
@media only screen and (max-width: 950px) {
	p.head_text {
		font-size: 15px;
		line-height: 2;
	}
}
@media only screen and (max-width: 900px) {
	.br_w900 {
		display: block;
	}
	p.head_text {
		font-size: 15px;
	}
}
@media only screen and (max-width: 768px) {
	.w680 {
		max-width: initial;
	}
	.w323 {
		max-width: initial;
		width: 80%;
	}
	p {
		text-align: initial;
		line-height: 1.65;
	}
	h3 {
		font-size: 20px;
	}
	p.head_title {
		text-align: center;
		font-size: 24px;
		margin-bottom: 10px;
	}
	p.head_text {
		font-size: 14px;
		line-height: 1.65;
	}
	p.note {
		font-size: 10px;
	}
}
#park .park_wrapper {
	padding: 240px 0 180px;
}
#park .park_wrapper .w1000 {
	position: relative;
}
#park .park_wrapper .w1000::before {
	content: '';
	position: absolute;
	background: url(../img/park/wavy_pink.png);
	background-size: cover;
	width: 48.75%;
	height: calc((100% + 200px + 180px));
	top: -200px;
	left: 50%;
	bottom: -180px;
	transform: translate(-50%, 0);
	z-index: -1;
}
#park span.scene_logo {
	display: inline-block;
	width: 100px;
	margin-bottom: 10px;
}
@media only screen and (max-width: 1000px) {
	#park .park_wrapper {
		padding: 220px 0 120px;
	}
	#park .park_wrapper .w1000::before {
		height: calc((100% + 140px + 120px));
		top: -140px;
		left: 50%;
		bottom: -120px;
		transform: translate(-50%, 0);
		z-index: -1;
	}
}
@media only screen and (max-width: 768px) {
	#park .park_wrapper {
		padding: 150px 0 80px;
	}
	#park .park_wrapper .w1000::before {
		content: '';
		position: absolute;
		background: url(../img/park/wavy_pink_sp.png);
		background-size: cover;
		width: 100%;
		height: calc((100% + 100px + 80px));
		top: -100px;
		left: 50%;
		bottom: -80px;
		transform: translate(-50%, 0);
		z-index: -1;
	}
}
/* ========================
	head_area
========================== */
#park h2 {
	max-width: 934px;
	margin: 0 auto;
}
#park .head_area {
	text-align: center;
	margin-bottom: 65px;
}
@media only screen and (max-width: 768px) {
	#park .head_area {
		margin-bottom: 30px;
	}
}
/* ========================
	park_img
========================== */
#park .park_img {
	margin-bottom: 65px;
}
@media only screen and (max-width: 768px) {
	#park .park_img {
		margin-bottom: 30px;
	}
}
/* ========================
	PICK UP
========================== */
#park .pic_up_area {
	margin-bottom: 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 45px;
}
#park .pic_up_area p.subtitle {
	width: fit-content;
	font-size: 22px;
	position: relative;
	padding: 0 32px;
}
#park .pic_up_area p.subtitle::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0, -50%);
	width: 20px;
	height: 20px;
	background-color: #81c0e9;
}
#park .pic_up_area p.subtitle::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0, -50%);
	width: 20px;
	height: 20px;
	background-color: #81c0e9;
}
#park .pic_up_area .img_area {
	display: flex;
	justify-content: center;
}
#park .pic_up_area .img_area figcaption {
	margin-top: 10px;
	text-align: center;
}
@media only screen and (max-width: 768px) {
	#park .pic_up_area {
		gap: 20px 0;
		margin-bottom: 40px;
	}
	#park .pic_up_area p.subtitle {
		font-size: 19px;
		padding: 0 20px;
	}
	#park .pic_up_area p.subtitle::before,
	#park .pic_up_area p.subtitle::after {
		width: 15px;
		height: 15px;
	}
	#park .pic_up_area .img_area {
		flex-direction: column;
	}
}
/* ========================
	scene_01
========================== */
section#scene_01 .clms {
	display: flex;
	align-items: center;
	gap: 6.25%;
	margin-bottom: 120px;
}
section#scene_01 .clms .left {
	width: 58.125%;
	text-align: center;
}
section#scene_01 .clms .right {
	width: calc((100% - 58.125% - 6.25%));
}
section#scene_01 .pic_up_area .img_area {
	gap: 3.75%;
}
@media only screen and (max-width: 768px) {
	section#scene_01 .clms {
		flex-direction: column;
		gap: 20px 0;
		margin-bottom: 35px;
	}
	section#scene_01 .clms .left,
	section#scene_01 .clms .right {
		width: 100%;
	}
	section#scene_01 .pic_up_area .img_area {
		gap: 10px 0;
		width: 80%;
	}
}
/* ========================
	scene_02
========================== */
section#scene_02 .clms {
	display: flex;
	align-items: center;
	gap: 8.55%;
	margin-bottom: 110px;
}
section#scene_02 .clms .left {
	width: 44.4%;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 22.5px 0;
}
section#scene_02 .clms .left figure {
	width: 70.25%;
}
section#scene_02 .clms .left figcaption {
	margin-top: 10px;
	text-align: center;
}
section#scene_02 .clms .right {
	width: calc((100% - 8.55% - 44.4%));
	text-align: center;
}
@media only screen and (max-width: 900px) {
	section#scene_02 .clms {
		gap: 6%;
	}
	section#scene_02 .clms .left {
		width: 38%;
	}
	section#scene_02 .clms .right {
		width: calc((100% - 6% - 38%));
		text-align: center;
	}
}
@media only screen and (max-width: 768px) {
	section#scene_02 .clms {
		flex-direction: column-reverse;
		gap: 20px 0;
		margin-bottom: 30px;
	}
	section#scene_02 .clms .left,
	section#scene_02 .clms .right {
		width: 100%;
	}
	section#scene_02 .clms .left .meal_img,
	section#scene_02 .clms .left figure{
		margin-inline: auto;
	}

}
/* ========================
	scene_03
========================== */
section#scene_03 .clms {
	display: flex;
	gap: 5.4%;
	margin-bottom: 75px;
}
section#scene_03 .clms .left {
	width: 59%;
	text-align: center;
}
section#scene_03 .clms .right {
	width: calc((100% - 59% - 5.4%));
}
section#scene_03 .clms .right > div {
	margin-top: 25px;
}
section#scene_03 .pic_up_area .img_area {
	gap: 5%;
}
section#scene_03 .pic_up_area .img_area figure {
	width: calc((100% - 5%)/2);
}
@media only screen and (max-width: 1000px) {
	section#scene_03 .clms {
		gap: 3.5%;
	}
	section#scene_03 .clms .left {
		width: 58%;
	}
	section#scene_03 .clms .right {
		width: calc((100% - 58% - 3.5%));
	}
}
@media only screen and (max-width: 900px) {
	section#scene_03 .clms .left {
		width: 62%;
	}
	section#scene_03 .clms .right {
		width: calc((100% - 62% - 3.5%));
	}
}
@media only screen and (max-width: 768px) {
	section#scene_03 .clms {
		flex-direction: column;
		gap: 20px 0;
		margin-bottom: 30px;
	}
	section#scene_03 .clms .left,
	section#scene_03 .clms .right {
		width: 100%;
	}
	section#scene_03 .clms .right > div {
		margin-top: 0;
	}
	section#scene_03 .pic_up_area .img_area {
		gap: 10px 0;
		align-items: center;
	}
	section#scene_03 .pic_up_area .img_area figure {
		width: 80%;
	}
}
/* ========================
	scene_04
========================== */
section#scene_04 .clms {
	display: flex;
	align-items: center;
	gap: 3.5%;
	margin-bottom: 80px;
}
section#scene_04 .clms .left {
	width: 34%;
	margin-top: 20px;
}
section#scene_04 .clms .left div img:first-child {
	margin-bottom: 22.5px;
}
section#scene_04 .clms .right {
	width: calc((100% - 3.5% - 34%));
	text-align: center;
}
section#scene_04 .pic_up_area .img_area {
	gap: 5%;
}
section#scene_04 .pic_up_area .img_area figure {
	width: calc((100% - 5%)/2);
}
@media only screen and (max-width: 1000px) {
	section#scene_04 .clms .left {
		width: 35%;
		margin-top: 0;
	}
	section#scene_04 .clms .right {
		width: calc((100% - 3.5% - 35%));
		text-align: center;
	}
}
@media only screen and (max-width: 900px) {
	section#scene_04 .clms .left {
		width: 30%;
	}
	section#scene_04 .clms .right {
		width: calc((100% - 3.5% - 30%));
	}
}
@media only screen and (max-width: 768px) {
	section#scene_04 .clms {
		flex-direction: column-reverse;
		gap: 20px 0;
		margin-bottom: 30px;
	}
	section#scene_04 .clms .left,
	section#scene_04 .clms .right {
		width: 100%;
	}
	section#scene_04 .pic_up_area .img_area {
		gap: 10px 0;
		align-items: center;
	}
	section#scene_04 .pic_up_area .img_area figure {
		width: 80%;
	}
}
/* ========================
	scene_05
========================== */
section#scene_05 .clms {
	display: flex;
	align-items: center;
	gap: 8.5%;
	margin-bottom: 80px;
}
section#scene_05 .clms .left {
	width: 51%;
	text-align: center;
}
section#scene_05 .clms .right {
	width: calc((100% - 8.5% - 51%));
	margin-top: 25px;
}
@media only screen and (max-width: 1000px) {
	section#scene_05 .clms {
		gap: 4.5%;
	}
	section#scene_05 .clms .left {
		width: 55%;
	}
	section#scene_05 .clms .right {
		width: calc((100% - 4.5% - 55%));
	}
}
@media only screen and (max-width: 900px) {
	section#scene_05 .clms .left {
		width: 58%;
	}
	section#scene_05 .clms .right {
		width: calc((100% - 4.5% - 58%));
	}
}
@media only screen and (max-width: 768px) {
	section#scene_05 .clms {
		flex-direction: column;
		gap: 20px 0;
		margin-bottom: 30px;
	}
	section#scene_05 .clms .left,
	section#scene_05 .clms .right {
		width: 100%;
	}
	section#scene_05 .clms .right {
		margin-top: 0;
	}
}
/* ========================
	scene_06
========================== */
section#scene_06 .clms {
	display: flex;
	gap: 6.95%;
	margin-bottom: 65px;
}
section#scene_06 .clms .left {
	width: 39%;
	margin-top: 40px;
}
section#scene_06 .clms .right {
	width: calc((100% - 39% - 6.95%));
	text-align: center;
}
section#scene_06 .pic_up_area {
	margin-bottom: 126px;
}
@media only screen and (max-width: 1000px) {
	section#scene_06 .clms {
		display: flex;
		gap: 4.5%;
		margin-bottom: 65px;
	}
	section#scene_06 .clms .left {
		width: 40%;
		margin-top: 40px;
	}
	section#scene_06 .clms .right {
		width: calc((100% - 40% - 4.5%));
		text-align: center;
	}
	section#scene_06 .pic_up_area {
		margin-bottom: 100px;
	}
}
@media only screen and (max-width: 768px) {
	section#scene_06 .clms {
		flex-direction: column-reverse;
		gap: 20px 0;
		margin-bottom: 30px;
	}
	section#scene_06 .clms .left,
	section#scene_06 .clms .right {
		width: 100%;
	}
	section#scene_06 .clms .left {
		margin-top: 0;
	}
	section#scene_06 .pic_up_area {
		margin-bottom: 50px;
	}
}

/* 最後の注釈 */
#park p.notion {
	width: fit-content;
	margin: 0 auto;
	line-height: 1.5;
	padding-left:1em;
	text-indent:-1em;
}
@media only screen and (max-width: 768px) {
	#park p.notion {
		font-size: 10px;
	}
}


/* 20250722追加 */
#scene_02_new .clms{
	display: flex;
	gap: 9%;
	margin-bottom: 110px;
}

#scene_02_new .clms .left{
	width: 51%;
	text-align: center;
}

#scene_02_new .clms .right,
#scene_08 .clms .right{
	flex: 1;
}

#scene_02_new .clms .right .meal_img{
	margin-bottom: 18px;
}

#scene_02_new .clms .right figure{
	width: 70.75%;
}

#scene_02_new .clms .right figure img,
#scene_08 .clms .right figure img{
	margin-bottom: 10px;
}

#scene_02_new .clms .right figcaption,
#scene_08 .clms .right figcaption{
	text-align: center;
}

#scene_08{
	margin-bottom: 72px;
}

#scene_08 .clms{
	display: flex;
	gap: 4%;
}

#scene_08 .clms .right figure{
	margin-top: 45px;
}

#scene_08 .clms .left{
	width: 52%;
	text-align: center;
}

@media screen and (max-width: 768px){
	#scene_02_new .clms,
	#scene_08 .clms{
		flex-direction: column;
		gap: 20px;
		margin-bottom: 40px;
	}
	#scene_02_new .clms .left,
	#scene_08 .clms .left{
		width: 100%;
	}
	#scene_02_new .clms .right figure{
		margin-inline: auto;
	}

	#scene_08 .clms .right figure{
		margin-top: 0;
	}
	#scene_02_new .clms img,
	#scene_08 .clms img{
		width: 100%;
	}
}