@charset "utf-8";


:root {
	--color-line: #ccc;
	--color-red: #FF1514;
	--color-blue: #0000FF;
	--media-sp: 500px;
	--line-height: 1.7;

}

main{
	padding-bottom: 0;
}

/* layout-main  */
.layout-main{
	min-height: 60vh;
	font-size: 16px;
	font-family: "Noto Sans JP", sans-serif;
	p{
		margin-top: 1.5em;
		&.-white{
			color: white;
		}
		&.-dot{
			border-top: 1px dashed white;
			padding-top: 1em;
			margin-top: 1em;
		}
	}

}
.layout-wrapper{
	max-width: 1084px;
	margin: 0 auto;
	padding: 0 40px;
	width: 100%;
	box-sizing: border-box;
	@media (max-width: 500px) {
		padding: 0 20px;
	}	
}
.layout-wrapper-image{
    max-width: 100%;
	margin-left: 35px;
	@media (max-width: 500px) {
		margin-left: 0px;
		margin-top: 20px;
		margin-bottom: 40px;
	}	
}
.layout-wrapper-image img{
    display: block;
	width: 100%;

}
.layout-section{
	line-height: 1.8;
	p,blockquote, pre, address, dt, dd, li, th, td, figcaption, r-figcaption{
		line-height: 1.8;
	}
	&.-intro{
		background: url(/art-event/img/intro/bg.jpg);
		background-size: 1920px auto;
		background-position: 50% top;
		padding: 0 0 100px 0;
		@media (max-width: 840px) {
				padding: 0 0 60px 0;
			}
		@media (max-width: 500px) {
			background-size: 1420px auto;
			background-position: 45% top;
			padding: 0 0 40px 0;
		}
		.title{
			padding: 50px 0 0 0;
			@media (max-width: 500px) {
				padding-top: 30px;
			}
		}
		.season{
			padding: 50px 0 30px 0;
			width: calc( 50% - 25px );
			margin: 0 0 30px auto;
			@media (max-width: 500px) {
				padding: 30px 0 0px 0;
			}
		}
		.concept{
			margin: 40px 0 0 0;
			padding: 60px 0 0 0;
			@media (max-width: 840px) {
				margin-top: 0px;
			}
			@media (max-width: 500px) {
				padding: 40px 0 0 0;
			}
			dl{
				display: flex;
				dt{
					max-width: 80px;
					width: 100%;
					margin-right: 56px;
					@media (max-width: 840px) {
						max-width: 40px;
						margin-right: 20px;
					}
					@media (max-width: 500px) {
						max-width: 30px;
						margin-right: 8px;
					}
					img{
						display: block;
						width: 100%;
					}
				}
				dd{
					background: white;
					display:flex;
					align-items:center;
					.inner{
						padding: 50px;
						font-size: 20px;
						line-height: 2.2;
						@media (max-width: 840px) {
							padding: 35px;
							font-size: 18px;
							line-height: var(--line-height);
						}
						@media (max-width: 500px) {
							padding: 20px;
							font-size: 16px;
						}
					}
				}
			}
		}
	}
	&.-iris{
		.explain{
			margin-top: 40px;
			@media (max-width: 840px) {
				margin-top: 0px;
			}
		}
		.container-more{
			margin-top: 100px;
			@media (max-width: 840px) {
				margin-top: 50px;
			}
		}
	}
	&.-illumination{
		.layout-wrapper{
			padding-top: 80px;
			@media (max-width: 840px) {
				padding-top: 40px;
			}
		}
	}
	&.-specialpresent{
	}
	&.-ringpark{
		padding-top: 40px;
		margin-top: 40px;
		.container-more{
			.grid-block.-cols2{
				@media (max-width: 500px) {
					grid-template-columns: 1fr;
					img{
						object-fit: cover;
						height: 180px;
						width: 100%;
					}
				}
			}
		}
	}
}

.layout-sub{
	margin-top: 80px;
	@media (max-width: 840px) {
		margin-top: 45px;
	}
	@media (max-width: 500px) {
		margin-top: 30px;
	}
	&: first{
		margin-top: 0;
	}
}
.layout-image{
	overflow: hidden;
	img{
		transition: all .3s;
		display: block;
		margin: 0 auto;
		width: 100%;
		height: 700px;
		object-fit: cover;
		@media (max-width: 840px) {
			height: 450px;
		}
		@media (max-width: 500px) {
			height: 220px;
			margin-left: auto;
			object-position: center 50% ;
		}
	}
	&.-iris{
		
	}
	&.-illumination{
		margin-bottom: 0px;
	}
}

.layout-bg{
	overflow: hidden;
	padding-bottom: 80px;
	@media (max-width: 840px) {
		padding-bottom: 60px;
	}
	@media (max-width: 500px) {
		padding-bottom: 40px;
	}
	&.-padding{
		padding-top: 50px;
		@media (max-width: 840px) {
			padding-top: 60px;
		}
		@media (max-width: 500px) {
			padding-top: 40px;
		}
	}
	> img{
		transition: all .3s;
		display: block;
		margin: 0 auto;
		width: 100%;
		height: 700px;
		object-fit: cover;
		@media (max-width: 840px) {
			height: 450px;
		}
		@media (max-width: 500px) {
			height: 220px;
			margin-left: auto;
			object-position: right 50% ;
		}
	}
	&.-winterbloom{
		background: #e8e7e6;
	}

/* heading  */
._en{
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}
.ttl-wrapper{

}
.heading-section{
	font-size: 30px;
	line-height: 1.2;
	margin: 0 0 20px 0;
	@media (max-width: 840px) {
		font-size: 30px;
	}
	@media (max-width: 500px) {
		font-size: 22px;
	}
	.sub{
		font-size: 24px;
		display: block;
		margin: 0 0 10px 0;
	}
	&.-bgwhite{
		@media (max-width: 840px) {
			display: flex;
		}
		.wrap{
			background: white;
			padding: 4px 10px;
		}
	}
	&.-bgemerald{
		@media (max-width: 840px) {
			display: flex;
		}
		.wrap{
			background: #29EABE;
			padding: 4px 10px;
		}
	}
	&.-textred{
		.wrap{
			color: var(--color-red);
		}
	}
	.adjustment{
		@media (max-width: 840px) {
/*			padding-left: 10px;*/
		}
	}
}

.heading-section-insta{
	font-size: 46px;
	line-height: 1.2;
	margin: 0 0 20px 0;
	border: 2px solid #fff;
	background: #fff;
	display: inline-block;
	@media (max-width: 840px) {
		font-size: 39px;
	}
	@media (max-width: 500px) {
		font-size: 32px;
	}
	.sub{
		font-size: 24px;
		display: block;
		margin: 0 0 10px 0;
	}
	&.-bgwhite{
		@media (max-width: 840px) {
			display: flex;
		}
		.wrap-insta{
			padding: 4px 10px;
		}
	}
	&.-textred{
		.wrap-insta{
			color: var(--color-red);
		}
	}
	.adjustment{
		@media (max-width: 840px) {
/*			padding-left: 10px;*/
		}
	}
}

.heading-border{
	font-size: 24px;
	line-height: 1.2;
	border-bottom: 1px solid black;
	padding: 0 0 0.5em 0;
	text-align: center;
	@media (max-width: 840px) {
		font-size: 21px;
	}
	@media (max-width: 500px) {
		font-size: 18px;
	}
	&.-narrow{
		border-bottom:none;
		padding-bottom:0;
		.wrap{
			padding: 0 0 0.2em 0;
			border-bottom:1px solid black;
		}
	}
}

.heading-border-22{
	font-size: 22px;
	line-height: 1.2;
	border-bottom: 1px solid black;
	padding: 0 0 0.5em 0;
	text-align: center;
	@media (max-width: 840px) {
		font-size: 20px;
	}
	@media (max-width: 500px) {
		font-size: 18px;
	}
	&.-narrow{
		border-bottom:none;
		padding-bottom:0;
		.wrap{
			padding: 0 0 0.2em 0;
			border-bottom:1px solid black;
		}
	}
}

/* link */
.link-text{
	color: var(--color-blue);
	text-decoration: underline;
}

/* container */
.container-summary{
	display: flex;
	margin: 0 0  0;
	gap: 60px;
	@media (max-width: 840px) {
		display: block;
		gap: 30px;
	}
	> *{
		flex: 1;
		&.image{
			img{
				display: block;
				width: 100%;
				object-fit: cover;
				object-position: right 50%;
			}
		}
		&.main{
			.title{
				font-size: 200%;
			}
			p{
				margin-top: 1em;
			}

		}
	}
	&.-iris{
		> *{
			&.image{
				img{
					height: 540px;
					object-position: 50% 50%;
					@media (max-width: 840px) {
						height: auto;
					}
				}
			}
			&.main{
				@media (max-width: 840px) {
					padding: 50px 40px;
				}
				@media (max-width: 500px) {
					padding: 30px 20px;
				}
			}
		}
	}
	&.-illumination{
		> *{
			&.image{
				@media (max-width: 840px) {
					margin-top: 40px;
				}
				@media (max-width: 500px) {
					margin: 40px -20px 0 -20px;
				}
				img{
				}
			}
			&.main{

			}
		}
	}
	&.-white{
		color: white;
		.p-detail{
			border-color: white;
		}
	}
}
.container-more{
	margin-top: 30px;
	@media (max-width: 500px) {
		margin-top: 20px;
	}
	> dt{
		text-align: center;
		padding: 10px;
		font-size: 20px;
		cursor: pointer;
		line-height: 1.2;
		@media (max-width: 840px) {
			font-size: 16px;
			padding: 8px;
		}
		@media (max-width: 500px) {
			font-size: 12px;
			padding: 5px;
		}
		.wrap{
			position: relative;
			min-width: 120px;
			display: inline-block;
			i{
				position: absolute;
				right: -6vw;
				top: 25%;
				width: 20px;
				height: 20px;
/*				background: red;*/
				transition: all .3s;
				transform: rotate(90deg);
				transform-origin: center;
				@media (max-width: 840px) {
					width: 18px;
					height: 18px;
				}
				@media (max-width: 500px) {
					width: 12px;
					height: 12px;
					top: 15%;
					right: -15px;
				}
				&:after{
					content: '';
					display: inline-block;
					aspect-ratio: 1;
					height: 100%;
					line-height: 1;
					clip-path: polygon(0 7%, 7% 0, 57% 50%, 7% 100%, 0 93%, 43% 50%, 0 7%);
					background-color: black;
					vertical-align: middle;
					position: absolute;
					top: 0;
					left: 25%;

				}
			}

		}
		&.-open{
			.wrap{
				i{
					transform: rotate(-90deg);		
				}

			}
		}
	}
	> dd{
		display: none;
		.inner{
			padding: 48px 50px;
			@media (max-width: 840px) {
				padding: 30px;
			}
			@media (max-width: 500px) {
				padding: 25px 20px;
			}
			> *:first-child{
				margin-top: 0;
			}
			dl{
				margin-bottom: 50px;
				&:last-child{
					margin-bottom: 0;
				}
				dt{
					font-size: 28px;
					margin-bottom: 0.8em;
					@media (max-width: 840px) {
						font-size: 22px;
					}
					@media (max-width: 500px) {
						font-size: 16px;
					}
					.wrap{
						border-bottom: 1px solid;
						padding-bottom: 0.2em;
					}
				}
				dd{
					.summary{
						display: flex;
						@media (max-width: 500px) {
							display: block;
						}
						> *{
							&.image{
								max-width: 228px;
								min-width: 180px;
								width: 100%;
								margin-left: 35px;
								@media (max-width: 500px) {
									max-width: 70%;
									margin:20px auto 0 auto;
								}
								img{
									display: block;
									width: 100%;
								}
							}
						}
					}
				}
			}
		}
	}
}

.container-caution{
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	padding: 6px 0;
	text-align: center;
	font-size: 24px;
	margin-top: 20px;
	@media (max-width: 840px) {
		font-size: 20px;
	}
	@media (max-width: 500px) {
		font-size: 16px;
	}
}

.container-kitchencar{
	margin-top: 40px;
}

/* p  */

.p-detail{
	border-left: 1px solid black;
	padding-left: 20px;
	font-size: 20px;
	margin-top: 1.5em;
	@media (max-width: 840px) {
		font-size: 18px;
	}
	@media (max-width: 500px) {
		font-size: 16px;
	}
	&.-white{
		border-left-color: white;
		color: white;
	}
	.caption{
		font-size: 16px;
		@media (max-width: 500px) {
			font-size: 14px;
		}
	}
}

.p-detail-pc{
	border-left: 1px solid black;
	padding-left: 20px;
	font-size: 20px;
	margin-top: 1.5em;
	@media (max-width: 840px) {
		font-size: 18px;
	}
	@media (max-width: 500px) {
		display: none;
	}
	&.-white{
		border-left-color: white;
		color: white;
	}
	.caption{
		font-size: 16px;
		@media (max-width: 500px) {
			font-size: 14px;
		}
	}
}

.p-detail-sp{
	display: none;
	@media (max-width: 840px) {
		display: none;
	}
	@media (max-width: 500px) {
		display: block;
		font-size: 16px;
		border-left: 1px solid black;
		padding-left: 20px;
		margin-top: 1.5em;
	}
	&.-white{
		border-left-color: white;
		color: white;
	}
	.caption{
		font-size: 16px;
		@media (max-width: 500px) {
			font-size: 14px;
		}
	}
}


/* list  */
.list-disc{
	list-style-type: disc;
	margin-left:1.6em;
}


/* grid  */
.grid-block{
	display: grid;
	margin-top: 40px;
	@media (max-width: 500px) {
		display: block;
		margin-top: 10px;
	}
	&.-cols2{
		grid-template-columns: 1fr 1fr;
	}
	&.-cols3{
		grid-template-columns: 1fr 1fr 1fr;
	}
	&.-cols4{
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
	&.-cols5{
		grid-template-columns: 70% 30%;
	}
	.item{
		img{
			display: block;
			width: 100%;
		}
	}
	&.-nomargin{
		margin-top: 0;
	}
	&.-gap{
		gap: 40px;
		@media (max-width: 840px) {
			gap: 25px;
		}
		@media (max-width: 500px) {
			gap: 15px;
		}
	}
	&.-gap2{
		gap: 30px;
		@media (max-width: 840px) {
			gap: 25px;
		}
		@media (max-width: 500px) {
			gap: 15px;
		}
	}
	&.-colsTb1{
		@media (max-width: 840px) {
			grid-template-columns: 1fr;
		}	
	}
	&.-colsTb2{
		@media (max-width: 840px) {
			grid-template-columns: 1fr 1fr;
		}
	}
	&.-colsSp1{
		@media (max-width: 500px) {
			grid-template-columns: 1fr;
		}
	}
	&.-colsSp2{
		@media (max-width: 500px) {
			grid-template-columns: 1fr 1fr;
		}
	}
}
.grid-block-inner{
	margin-right: 35px;
	.item{
		img{
			display: block;
			width: 100%;
			margin-bottom: 35px;
			@media (max-width: 500px) {
				margin-bottom: 0px;
			}
		}
		@media (max-width: 500px) {
			margin-bottom: 20px;
		}
	}
	.item:first-child{
		@media (max-width: 500px) {
			margin-right: 5px;
		}
	}
	.item:nth-child(2){
		@media (max-width: 500px) {
			margin-left: 5px;
		}
	}
	@media (max-width: 500px) {
		margin-right: 0px;
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
}

/* card  */

.card-kitchen{
	>*{
		&.thumb{
			img{
				display: block;
				width: 100%;
			}
		}
		&.detail{
			margin-top:20px;
			@media (max-width: 500px) {
				margin-top:12px;
			}
			.shop{
				margin-top:0;
				font-size:24px;
				@media (max-width: 840px) {
					font-size: 20px;
				}
				@media (max-width: 500px) {
					font-size: 16px;
				}
			}
			.container-more{
				margin-top:20px;
				background-color: transparent;
				@media (max-width: 500px) {
					background-color: white;
					margin-top:10px;
				}
				& > dt {
					display: none;
					@media (max-width: 500px) {
						display: block;
					}
				}
				& > dd {
					display:block;
					@media (max-width: 500px) {
						display: none;
					}
					& .inner {
						padding: 0px;
						@media (max-width: 500px) {
							padding: 15px;
						}
					}
				}
			}
			.p-detail{
				font-size: 18px;
				margin:6px 0 0 0;
				padding-left:12px;
				@media (max-width: 500px) {
					font-size: 14px;
					padding-left: 10px;
				}
			}
			.caption{
				margin-top:15px;
				font-size: 16px;
				@media (max-width: 500px) {
					font-size: 14px;
				}
			}
		}

	}
}

/* フォーシーズンズホテルのcaption */
.caption-2{
	margin-top:15px;
	font-size: 16px;
	@media (max-width: 500px) {
		font-size: 14px;
	}
}

/* nav  */
.nav-anchor{
	display: block;
	white-space: nowrap;
	@media (max-width: 500px) {
		margin-left: auto;
		object-position: right 50% ;
	}
	ul{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 30px;
		@media (max-width: 840px) {
			gap: 15px;
			grid-template-columns: repeat(2, 1fr);
		}
		> li{
			> a{
				display: flex;
				align-items: center;
				justify-content: center;
				color: white;
				border-radius: 10px;
				padding: 0 40px 0 2px;
				height: 60px;
				font-weight: bold;
				line-height: 1.4;
				text-align: center;
				background-color: black;
				background-repeat: no-repeat;
				background-image: url(/art-event/img/arrow_w.svg?);
				background-position: top 50% right 8%;
				background-size: auto 50%;
				cursor: pointer;
				transition: background-color 0.3s;
				@media (max-width: 500px) {
					padding: 0 16px 0 2px;
					font-size : 10px;
					height: 38px;
					background-size: auto 40%;
					background-position: top 50% right 5%;
				}
				&:hover{
					background-color: white;
					color: var(--color-red);
					text-decoration: none;
					background-image: url(/art-event/img/arrow_r.svg?);
				}
			}
		}
	}
	&.-white{
		ul{
			> li{
				> a{
					background-image: url(/art-event/img/arrow_b.svg?);
					background-color: white;
					border: 1px solid black;
					color: black;
					&:hover{
						background-color: white;
						color: var(--color-red);
						border-color: var(--color-red);
						text-decoration: none;
						background-image: url(/art-event/img/arrow_r.svg?);
					}
				}
			}
		}
	}
	&.-park{
		& ul {
			@media (max-width: 500px) {
/*      	grid-template-columns: 1fr 1fr 1fr;*/
				grid-template-columns: 1fr 1fr ;
      }
      & > li {
        & > a {
        	@media (max-width: 500px) {
        		font-size: 12px;
        		background-position: right 8% top 50%;
        	}
        }
      }
    }
	}
}

/* image  */
.image-full{
	margin-top: 40px;
	@media (max-width: 850px) {
		margin-top: 30px;
	}
	@media (max-width: 500px) {
		margin-top: 20px;
	}
	img{
		display: block;
		width: 100%;
	}
}
.image-item{
	margin-bottom: 20px;
}
.image-item:last-child{
	margin-bottom: 40px;
}
.mt-30{
	margin-top: 30px;
}
.mt-80{
	margin-top: 80px;
}

._pc{
	display: block !important;
	@media (max-width: 840px) {
		display: none !important;
	}
}
._tb{
	display: none !important;
	@media (max-width: 840px) {
		display: block !important;
	}
	@media (max-width: 500px) {
		display: none !important;
	}
}
._sp{
	display: none !important;
	@media (max-width: 500px) {
		display: block !important;
	}
}

._nowrap{
	white-space: nowrap;
}

.r-figcaption{
	text-align: right;
	font-size: 12px;
}
.responsive{
	width: 100%;
    aspect-ratio: 16/9;
}
.movie-detail{
	margin-bottom: 10px;
}