@charset "utf-8";


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

}

main {
	padding-bottom: 0;
	background-color: #dee3ad;
}

/* 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-section {
	line-height: 1.8;

	p,
	blockquote,
	pre,
	address,
	dt,
	dd,
	li,
	th,
	td,
	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: 0px;

			@media (max-width: 840px) {
				margin-top: 0px;
			}
		}
	}

	&.-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: 60px;

	@media (max-width: 840px) {
		margin-top: 45px;
	}

	@media (max-width: 500px) {
		margin-top: 30px;
	}

	&: first {
		margin-top: 0;
	}
}

.layout-wrapper-image {
	max-width: 100%;
	margin-left: 60px;
	@media (max-width: 500px) {
        margin-left: 0px;
    }
}

.layout-wrapper-image img {
	width: 100%;
	@media (max-width: 500px) {
		margin-bottom: 40px;
	}
}

.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: 80px;

		@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%;
		}
	}

	&.-iris {
		margin-top: 40px;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 30%, rgba(41, 234, 190, 0.46) 100%);

		@media (max-width: 500px) {
			margin-top: 20px;
		}
	}

	&.-illumination {
		background: linear-gradient(to bottom, rgba(97, 165, 218, 1) 60%, rgba(0, 0, 255, 1) 100%);

		@media (max-width: 500px) {
			background: linear-gradient(to bottom, rgba(97, 165, 218, 1) 30%, rgba(0, 0, 255, 1) 100%);
		}
	}

	&.-winterglow {
		background: linear-gradient(to right, rgba(188, 249, 235, 1) 0%, rgba(176, 180, 253, 1) 100%);
	}

	&.-specialpresent {
		background: linear-gradient(to bottom, rgba(255, 68, 67, 1) 0%, rgba(52, 47, 232, 1) 100%);
	}

	&.-mapandpark {
		background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 30%, rgba(42, 234, 190, 1) 100%);
	}
}

/* headder  */
.header-area-art {
	background-size: 180px;
	box-sizing: border-box;
	height: 195px;
	padding-top: 35px;

	@media screen and (max-width: 768px) {
		padding-top: 22px;
		height: 144px;
	}
}

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

.heading-section {
	font-size: 38px;
	line-height: 1.45;
	margin: 0 0 20px 0;

	@media (max-width: 840px) {
		font-size: 38px;
	}

	@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;
		}
	}

	&.-textred {
		.wrap {
			color: var(--color-red);
		}
	}

	.adjustment {
		@media (max-width: 840px) {
			/*			padding-left: 10px;*/
		}
	}
}

.heading-section-insta {
	font-size: 38px;
	line-height: 1.45;
	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;
		line-height: 1.8;
	}

	&.-narrow {
		border-bottom: none;
		padding-bottom: 0;

		.wrap {
			padding: 0 0 0.2em 0;
			border-bottom: 1px solid black;
		}
	}
}

/* logo  */
.artbreak-logo {
	display: block;
	width: 100%;
	/* 親要素に対して100%の幅 */
	max-width: 250px;
	/* 元画像の幅に制限 */
	aspect-ratio: 614 / 212;
	/* 自動で高さを計算 */
	background-image: url("/art-event/img/artbreak.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
	margin: 0 auto;
}

/* 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 {
			padding-top: 30px;
			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;
		background-color: #fff;

		@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;
			background-color: #fff;

			@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;
	}
}

&.-gap3 {
	gap: 20px;

	@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;
	}
}
}

/* card  */

.card-kitchen {
	>* {
		&.thumb {
			img {
				display: block;
				width: 100%;
			}
		}

		&.detail {
			margin-top: 20px;

			@media (max-width: 500px) {
				margin-top: 12px;
				margin-bottom: 20px;
			}

			.shop {
				margin-top: 0;
				font-size: 16px;

				@media (max-width: 840px) {
					font-size: 20px;
				}

				@media (max-width: 500px) {
					font-size: 16px;
				}
			}
			.shop-date {
				margin-top:  10px;
				font-size: 14px;

				@media (max-width: 840px) {
					font-size: 26px;
				}

				@media (max-width: 500px) {
					font-size: 14px;
				}
			}

			.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: 14px;

				@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;
	margin-top: 80px;

	@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-black);
					text-decoration: none;
					background-image: url(/art-event/img/arrow_b.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%;
					}
				}
			}
		}
	}
}
.text{
	@media (max-width: 500px) {
		margin-bottom: 20px;
	}
}

.text:last-child{
	@media (max-width: 500px) {
		margin-bottom: 0px;
	}
}

/* image  */
.image-full {

	@media (max-width: 850px) {
	}

	@media (max-width: 500px) {
		margin-top: 20px;
	}

	img {
		display: block;
		width: 100%;
	}
}
.image-map {

	@media (max-width: 850px) {
	}

	@media (max-width: 500px) {
		margin-top: 20px;
	}

	img {
		display: block;
		width: 100%;
	}
}

._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;
}

.mt-80 {
	margin-top: 80px;
}
.mb-80{
	margin-bottom: 80px;
}

@media (max-width: 500px) {
		.sp-mb-80{
			margin-bottom: 80px;
		}
		.sp-mb-40{
			margin-bottom: 40px;
		}
	}