@charset "UTF-8";
header{
	background: none!important;
		backdrop-filter:unset!important;
	-webkit-backdrop-filter:unset!important;
}
main{
	padding-top: 0;
}

/*------------------------
トップイメージ
------------------------*/
	.mv-sticky-wrap {
		position: relative;
		background: #000;
		isolation: isolate;
	}

	.mv {
		position: sticky;
		top: 0;
		height: 100vh;
		z-index: 0;
		overflow: hidden;
		background: #000;
	}

	.mv__content {
		position: relative;
		z-index: 1;
	}
/* PC */
@media screen and (min-width:768px) {
	.mv {
	min-height: 100vh;
	}
	.mv img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		object-position: center top;
	}
}
/* SP */
@media screen and (max-width:767px) {
.mv {
	width: 100%;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	background: #000;
}

.mv .mv__img {
	width: 100%;
	height: 83vh;
	object-fit: cover;
	object-position: top 60%;
	display: block;
	position: absolute;
	top: 11vh;
	object-position: 45%;
}


/* 上の黒グラデーション */
.mv::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 25vh;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 1) 0%,
		rgba(0, 0, 0, 0.85) 25%,
		rgba(0, 0, 0, 0.45) 60%,
		rgba(0, 0, 0, 0) 100%
	);
}

	/* 下の黒グラデーション */
	.mv::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height:32vh;
		z-index: 2;
		pointer-events: none;
		background: linear-gradient(
		to top,
		rgba(0, 0, 0, 1) 0%,
		rgba(0, 0, 0, 1) 22%,
		rgba(0, 0, 0, 0.2) 44%,
		rgba(0, 0, 0, 0) 100%
	);
	}
}
/*------------------------
スクロールガイド
------------------------*/
.scroll-guide {
	position: absolute;
	z-index: 3;
	color: #fff;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .08em;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	pointer-events: none;
	letter-spacing: 0.1em;
	transition:
		opacity .4s ease,
		visibility .4s ease,
		transform .4s ease;
}

/* 縦線 */
.scroll-guide::before {
	content: "";
	position: absolute;
	display: block;
	width: 1px;
	left: var(--scroll-line-left);
	top: var(--scroll-line-top);
	height: var(--scroll-line-min);
	background: #fff;
	animation: scrollGuideLine 1.5s ease-in-out infinite;
}

/* 直角三角形の矢印 */
.scroll-guide::after {
	content: "";
	position: absolute;
	display: block;
	width: var(--scroll-arrow-size);
	height: var(--scroll-arrow-size);
	left: var(--scroll-arrow-left);
	top: calc(var(--scroll-line-top) + var(--scroll-line-min));
	background: #fff;

	/*
		直角三角形。
		線の先端に付く矢印として使用。
	*/
	clip-path: polygon(0 0, 100% 0, 0 100%);

	animation: scrollGuideArrow 1.5s ease-in-out infinite;
}

/* スクロール後にふわっと消す */
body.is-scroll-guide-hide .scroll-guide {
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
}

/* 線：短い状態で出る → 伸びる → 長い状態で消える */
@keyframes scrollGuideLine {
	0% {
		height: var(--scroll-line-min);
		opacity: 0;
	}

	18% {
		height: var(--scroll-line-min);
		opacity: 1;
	}

	58% {
		height: var(--scroll-line-max);
		opacity: 1;
	}

	78% {
		height: var(--scroll-line-max);
		opacity: 0;
	}

	100% {
		height: var(--scroll-line-min);
		opacity: 0;
	}
}

/* 矢印：線の先端に合わせて下へ伸び、長くなったら消える */
@keyframes scrollGuideArrow {
	0% {
		top: calc(var(--scroll-line-top) + var(--scroll-line-min));
		opacity: 0;
	}

	18% {
		top: calc(var(--scroll-line-top) + var(--scroll-line-min));
		opacity: 1;
	}

	58% {
		top: calc(var(--scroll-line-top) + var(--scroll-line-max));
		opacity: 1;
	}

	78% {
		top: calc(var(--scroll-line-top) + var(--scroll-line-max));
		opacity: 0;
	}

	100% {
		top: calc(var(--scroll-line-top) + var(--scroll-line-min));
		opacity: 0;
	}
}

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

	.scroll-guide {
		--scroll-line-left: 0;
		--scroll-line-top: -16px;
		--scroll-line-min: 102px;
		--scroll-line-max: 122px;
		--scroll-arrow-size: 9px;
		--scroll-arrow-left: 0;
		right: 4vw;
		bottom: 9.5%;
		padding-left: 17px;
		font-size: 19px;
	}

}

/* SP */
@media screen and (max-width:767px) {

	.scroll-guide {
		--scroll-line-left:0;
		--scroll-line-top: -2.13vw;
		--scroll-line-min: 23vw;
		--scroll-line-max: 27vw;
		--scroll-arrow-size: 2vw;
		--scroll-arrow-left: 0;

		right: 5.333vw;
		bottom: 16vw;
		padding-left:3.2vw;
		font-size: 4.27vw;
	}

}



/* ==============================
 schedule 共通
============================== */

.schedule-area {
	position: relative;
	z-index: 1;
}

/* 閉じている間もトップイメージ1画面分の高さを保持
   透明な領域がOPENボタンのクリックを邪魔しないようにする */
.schedule-area.is-closed {
	min-height: 50vh;
	pointer-events: none;
}

#schedule {
	position: relative;
	z-index: 1;
	background: transparent;
}

/* SCHEDULE開閉時だけ使用 */
#schedule.is-schedule-fading {
	opacity: 0 !important;
	pointer-events: none;
	transition: opacity .3s ease !important;
}

#schedule[hidden] {
	display: none;
}

#schedule > .inner {
	background: rgba(18, 18, 18, .85);
	border-radius: 15px;
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
}

#schedule h2 {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	letter-spacing: 0.08em;
	line-height: 1;
	text-align: center;
}

#schedule h2::before,
#schedule h2::after {
	content: "";
	display: block;
	width: 30px;
	height: 1px;
	background: rgba(255, 255, 255, .2);
}

#schedule h2::before {
	margin-right: 12px;
}

#schedule h2::after {
	margin-left: 12px;
}

/* 通常表示側の閉じるボタン */
#schedule .schedule-head {
	position: relative;
}

#schedule .schedule-toggle {
	position: absolute;
	top: 50%;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	min-width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 50%;
	background: rgba(0, 0, 0, .35);
	color: #fff;
	cursor: pointer;
	transform: translateY(-50%);
	transition:
		background .25s ease,
		border-color .25s ease,
		opacity .25s ease;
}

#schedule .schedule-toggle:hover {
	background: rgba(255, 255, 255, .10);
	border-color: #fff;
}

/* − */
#schedule .schedule-toggle::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 14px;
	height: 1px;
	background: currentColor;
	transform: translate(-50%, -50%);
}

/* 閉じた時専用：MV上のSCHEDULE＋ */
.schedule-open {
	position: absolute;
	right: max(40px, calc((100vw - 1140px) / 2));
	bottom: 12%;
	z-index: 3;
	display: flex;
	align-items: center;
	width: 400px;
	height: 68px;
	padding: 0 22px 0 28px;
	border: 0;
	border-radius: 15px;
	background: rgba(18, 18, 18, .88);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	color: #fff;
	cursor: pointer;
	box-sizing: border-box;
	opacity: 1;
	pointer-events: auto;
	transition: opacity .3s ease;
}

.schedule-open.is-fading {
	opacity: 0;
	pointer-events: none;
}

.schedule-open[hidden] {
	display: none;
}

.schedule-open__text {
	font-size: 18px;
	line-height: 1;
	letter-spacing: .08em;
	text-align: left;
}

.schedule-open__icon {
	position: relative;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	margin-left: auto;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 50%;
	box-sizing: border-box;
}

.schedule-open__icon::before,
.schedule-open__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 14px;
	height: 1px;
	background: currentColor;
	transform: translate(-50%, -50%);
}

.schedule-open__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

#schedule .schedule-contents,
#schedule .schedule-contents-inner {
	display: block;
}

#schedule .list a {
	display: grid;
	align-items: center;
	width: 100%;
	background: rgba(0, 0, 0, .88);
	border-radius: 999px;
	text-decoration: none;
	transition: background .25s ease, opacity .25s ease;
}

#schedule .list a:hover {
	background: rgba(20, 20, 20, .96);
}

#schedule .date {
	display: block;
	letter-spacing: .04em;
	white-space: nowrap;
}

#schedule .cat {
	display: flex;
	align-items: center;
	justify-content: center;
	background:var(--red);
	line-height: 1;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-all;
}

#schedule .list p {
	margin: 0;
	letter-spacing: .06em;
	line-height: 1.5;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#schedule .list .week {
	letter-spacing: 0.08em;
}

#schedule .detail {
	display: block;
	text-decoration: underline;
	text-underline-offset: 3px;
	letter-spacing: .04em;
	white-space: nowrap;
	text-align: right;
}

#schedule .btn {
	text-align: center;
}

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

	#schedule {
		max-width:1320px;
		min-width: 1200px;
		margin: 0 auto;
		padding: 60px 0 70px;
	}

	#schedule > .inner {
		width:100%;
		margin: 0 auto;
		padding: 56px 30px 45px;
	}

	#schedule .schedule-head {
		margin-bottom: 28px;
	}

	#schedule h2 {
		margin-bottom: 0;
		font-size: 34px;
	}

	#schedule .list + .list {
		margin-top: 5px;
	}

	#schedule .list a {
		grid-template-columns: 186px 110px 28px minmax(0, 1fr) 28px 56px;
		column-gap: 0;
		min-height: 68px;
		padding: 0 30px;
		transition:
			background .25s ease,
			opacity .25s ease,
			transform .25s ease,
			box-shadow .25s ease;
	}

	#schedule .list a:hover {
		transform: translateY(-3px);
		box-shadow: 0 10px 20px rgba(0, 0, 0, .45);
		background: rgba(35, 35, 35, .96);
	}

	#schedule .date {
		grid-column: 1;
		font-size: 21px;
	}

	#schedule .cat {
		grid-column: 2;
		justify-self: start;
		width: fit-content;
		min-width: 88px;
		max-width: 110px;
		height: 24px;
		padding: 0 8px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	#schedule .list p {
		grid-column: 4;
		font-size: 16px;
	}

	#schedule .detail {
		grid-column: 6;
		font-size: 14px;
	}

	#schedule .list .week {
		font-size: 12px;
		margin-left: 7px;
		padding-top: 1px;
	}

	#schedule .list .sold-out {
		font-size: 17px;
		padding-right: 0.15em;
	}

	#schedule .list:hover .detail {
		text-decoration: none;
	}

	#schedule .btn {
		margin-top: 34px;
	}
}

/* SP */
@media screen and (max-width:767px) {

	.schedule-area.is-closed {
		min-height: 62svh;
		pointer-events: none;
	}

	#schedule {
		width: 100%;
		padding: 0 5.333vw;
		box-sizing: border-box;
	}

	#schedule > .inner {
		width: 100%;
		padding: 9.067vw 4.8vw 9.6vw;
		border-radius: 3.2vw;
		box-sizing: border-box;
		overflow: hidden;
		background: rgba(22, 22, 22, .80);
	}

	#schedule .schedule-head {
		margin-bottom: 6.4vw;
	}

	#schedule h2 {
		margin-bottom: 0;
		font-size: 6.4vw;
	}

	#schedule .schedule-toggle {
		width: 8.4vw;
		min-width: 8.4vw;
		height: 8.4vw;
		padding: 0;
	}

	#schedule .schedule-toggle::before {
		width: 3.2vw;
	}

	#schedule h2::before,
	#schedule h2::after {
		width: 5.8vw;
	}

	#schedule h2::before {
		margin-right: 3.2vw;
	}

	#schedule h2::after {
		margin-left: 3.2vw;
	}

	#schedule .list + .list {
		margin-top:1.6vw;
	}

	#schedule .list a {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
		min-width: 0;
		box-sizing: border-box;

		column-gap: 2.133vw;
		row-gap: 2.133vw;

		padding: 4.267vw 4.8vw;
		border-radius: 3.2vw;
		overflow: hidden;
	}

	#schedule .date {
		flex: 0 0 auto;
		width: 8.05em;
		font-size: 4.53vw;
		white-space: nowrap;
	}

	#schedule .list .week {
		padding-left: 0.4em;
		font-size: 3.2vw;
		vertical-align: .15em;
	}

	#schedule .cat {
		flex: 0 0 auto;
		width: max-content;
		max-width: 100%;
		min-width: 17.06vw;
		min-height: 5.33vw;
		height: auto;
		padding: 1vw 1.6vw;
		box-sizing: border-box;
		font-size: 3.2vw;
		line-height: 1.2;
		text-align: center;
		/* span自体が画面幅より長い場合だけ内部で改行 */
		white-space: normal;
		overflow-wrap: anywhere;
	}

	#schedule .list p {
		flex: 0 0 100%;
		width: 100%;
		min-width: 0;
		max-width: 100%;
		margin: 0;

		font-size: 3.733vw;
		line-height: 1.6;
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		word-break: break-all;
	}

	#schedule .detail {
		display: none;
	}

	#schedule .btn {
		margin-top: 7.467vw;
	}

	.schedule-open {
		left: 5.333vw;
		bottom: 16vw;
		width: 52%;
		height: 15vw;
		padding: 0 4.267vw 0 5.333vw;
		border-radius: 8vw;
				background: rgba(18, 18, 18, .6);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
	}

	.schedule-open__text {
		font-size: 4vw;
	}

	.schedule-open__icon {
		flex-basis: 8vw;
		width: 8vw;
		height: 8vw;
	}

	.schedule-open__icon::before,
	.schedule-open__icon::after {
		width: 3.2vw;
	}
}

@media (prefers-reduced-motion: reduce) {
	#schedule,
	.schedule-open {
		transition: none;
	}
}

/*スケジュールない時*/
.schedule-spacer {
	height: 140px;
}

@media screen and (max-width: 767px) {
	.schedule-spacer {
		height: 17.5vw;
	}
}


/*------------------------
next-contents
------------------------*/
.next-contents {
	position: relative;
	z-index: 1;
	background:var(--bgblack);
	margin-top: 24vh;
}
/* PC */
@media screen and (min-width:768px) {
}
/* SP */
@media screen and (max-width:767px) {
}


/* ==============================
 INFORMATION
============================== */

#info {
	position: relative;
	z-index: 1;
}

#info .inner {
	position: relative;
}

/* ==============================
 PICK UP
============================== */

#info .pickup {
	position: relative;
}

#info .pickup .catch {
	position: absolute;
	margin: 0;
	color: rgba(176, 28, 28, .65);
	letter-spacing: .02em;
	line-height: 1;
	writing-mode: vertical-rl;
	text-orientation: mixed;
}
#info .pickup .catch::after {
	content: "";
	position: absolute;
	left: calc(100% + clamp(10px, 1vw, 18px));
	top: 50%;
	width: clamp(24px, 2.4vw, 44px);
	height: 1px;
	background: currentColor;
	transform: translateY(-50%);
}
#info .block-wrap {
	display: grid;
}

#info .block a {
	display: block;
	transition:
		opacity .25s ease,
		transform .25s ease;
}

#info .block .img {
	overflow: hidden;
	background: #000;
	margin-bottom: 20px;
}

#info .block .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top; 
	transition: transform .35s ease;
}
#info .block .img .noimg {
	object-position: center center; 
}

#info .cat {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 88px;
	height: 30px;
	padding: 0 10px;
	border: 1px solid var(--opaW);
	color: #fff;
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
}

#info .block h3 {
	margin: 9px 0 0;
	font-weight: 700;
	line-height: 1.55;
	letter-spacing: .04em;
}

/* ==============================
 TAB
============================== */

#info .info-list-wrap {
}

#info .tab {
	display:flex;
	margin: 0 auto;
	justify-content:center;
}

#info .tab a {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: #000;
	line-height: 1;
	text-decoration: none;
	transition:
		background .25s ease,
		color .25s ease;
}

#info .tab a:first-child {
	border-left: 0;
}

#info .tab a.is-active {
	background: #000;
	color: #fff;
}

/* ==============================
 LIST
============================== */


#info .list-area ul[hidden] {
	display: none !important;
}

#info .list-area li a{
	border-top: 1px solid rgba(255, 255, 255, .12);
}
#info .list-area li:first-child a {
	border-top: none;
}
#info .list-area li:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

#info .list-area a {
	display: grid;
	align-items: center;
	width: 100%;
	transition: background .25s ease;
}

#info .list-area .date {
	white-space: nowrap;
}

#info .list-area .cat {
	justify-self: start;
	min-width: 82px;
	height: 28px;
	padding: 0 18px;
	font-size: 14px;
}

#info .list-area h3 {
	margin: 0;
	font-weight: 400;
	line-height: 1.5;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
#info .btn{
	text-align: center;
}


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

	#info {
		padding: 80px 0 80px;
	}

	#info .inner {
	}

	#info .pickup {
		margin-bottom: 70px;

		--pickup-catch-size: clamp(72px, calc(5vw + 12px), 88px);
		--pickup-left: clamp(82px, 7.25vw, 110px);
		--pickup-line-width: calc(clamp(8px, .8vw, 14px) + 3px);

		padding-left: var(--pickup-left);
		position: relative;
	}

	#info .pickup .catch {
		left: 0;
		top: -3px;
		font-size: var(--pickup-catch-size);
	}

	#info .pickup .catch::after {
		content: "";
		position: absolute;
		top: 43%;
		width: calc(var(--pickup-line-width) + 3px);
		height: 1px;
		background: currentColor;
		transform: translateY(-50%);
		left: calc(
		100% + (
			(var(--pickup-left) - 100% - (var(--pickup-line-width) + 3px)) / 2
		) - 7px
		);
	}

	#info .pickup .date-wrap {
		display: flex;
	}
	#info .pickup .date-wrap time{
		width: 100px;
		padding-top: 3px;
	}
	#info .cat-wrap {
		flex: 1;
	}

	#info .block-wrap {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: clamp(28px, 2.4vw, 46px);
	}

	#info .block .img {
		aspect-ratio: 1.24 / 1;
	}

	#info .block h3 {
		font-size:20px;
	}

	#info .info-list-wrap {
		padding:0 60px ;
	}

	#info .tab {
		width: 784px;
		height: clamp(40px, calc(1.25vw + 25px), 44px);
		gap: 1px;
		margin-bottom: 36px;
	}

	#info .tab a {
		width: calc((100% - 4px) / 5);
		font-size: clamp(18px, calc(0.625vw + 10.5px), 20px);
	}

	#info .list-area a {
		grid-template-columns: 115px 185px 10px minmax(0, 1fr);
		column-gap: 0;
		min-height: 66px;
		padding: 0 5px;
		position: relative;
		transition: background .25s ease, opacity .25s ease, transform .25s ease, box-shadow .25s ease;
				z-index: 1;
	}
	#info .list-area a:hover {
		transform: translateY(-3px);
		box-shadow: 0 10px 20px rgba(0, 0, 0, .45);
		background: rgba(35, 35, 35, 1);
		border-top: none;

	}

	#info .list-area .date {
		grid-column: 1;
	}

	#info .list-area .list-cat-wrap {
		grid-column: 2;
		display: flex;
	}
	.list-cat-wrap .cat:first-child:not(:last-child) {
		margin-right:5px;
	}

	#info .list-area h3 {
		grid-column: 4;
		font-size: 16px;
	}

	#info .btn {
		margin-top: 44px;
	}
}
@media screen and (min-width:768px) and (hover:hover) and (pointer:fine) {

	#info .block a:hover {
		transform: translateY(-4px);
		opacity: .88;
	}

	#info .block a:hover .img img {
		transform: scale(1.04);
	}

	#info .tab a:hover {
		background: #111;
		color: #fff;
	}
}


/* SP */
@media screen and (max-width:767px) {

	#info {
		padding: 18.66vw 5.333vw 17.33vw;
	}

	#info .inner {
		width: 100%;
	}

	#info .title h2 {
		font-size: 8vw;
	}

#info .pickup {
		--pickup-side-width: 11.8vw;
		--pickup-block-gap: 2.67vw;
		--pickup-line-width: calc(2.93vw);

		position: relative;
		display: grid;
		grid-template-columns: var(--pickup-side-width) 1fr;
		column-gap: 0;
		margin-top: 9.6vw;
		margin-left: -5.33vw;
		width: calc(100% + 5.33vw);
		padding-left: 0;
		align-items: start;
	}

	#info .pickup .catch {
		position: sticky;
		top: 0;
		left: auto;
		z-index: 5;
		align-self: start;
		height: max-content;
		margin: 0;
		font-size: 12.8vw;
		line-height: 1;
		writing-mode: vertical-rl;
		white-space: nowrap;
		color: rgba(176, 28, 28, .65);
	}

	#info .pickup .catch::after {
		content: "";
		position: absolute;
		top: 50%;
		left: calc(
			var(--pickup-side-width)
			+
			(
				var(--pickup-block-gap) - var(--pickup-line-width)
			) / 2
			- 1.067vw
		);
		width: var(--pickup-line-width);
		height: 1px;
		background: currentColor;
		transform: translateY(-50%);
	}

	#info .pickup .block-wrap {
		grid-column: 2;
		display: grid;
		grid-template-columns: 1fr;
		row-gap: 9vw;
		padding-left: var(--pickup-block-gap);
	}

#info .pickup .block {
		transform-origin: left top;
		will-change: transform;
		transition: none;
	}

	/* 1個目は元サイズ */
	/* #info .pickup .block:first-child {
		transform: scale(1);
	} */

	/* 2個目以降だけ小さく始める */
	/* #info .pickup .block:nth-child(n+2) {
		transform: scale(0.7);
	} */

	#info .block .img {
		aspect-ratio: 1.24 / 1;
	}
	#info .pickup .date-wrap {
		display: flex;
		margin-top: 3.2vw;	
	}
	#info .pickup .date-wrap time{
		font-size: 3.2vw;
		width: 20.5vw;
		padding-top: .9vw;
	}
	#info .cat-wrap {
		flex: 1;
	}
	#info .cat {
		min-width:19.73vw;
		height:6.93vw;
		padding: 0 2.13vw;
		font-size: 3.2vw;
	}

	#info .block h3 {
		margin-top: 2.13vw;
		font-size: 4.27vw;
	}

	#info .info-list-wrap {
		margin-top: 12vw;
	}

	#info .tab {
		width: 100%;
		height: 9.6vw;
		gap: 0 1px;
		margin-bottom: 2.1vw;
	}

	#info .tab a {
		width: calc((100% - 4px) / 5);
		font-size: 3.2vw;
	}

#info .list-area a {
	grid-template-columns: 18.5vw minmax(0, 1fr);
	grid-template-rows: auto auto;
	justify-content: start;
	align-items: center;
	column-gap: 2.133vw;
	row-gap: 2.133vw;
	padding: 5.33vw 0;
}

#info .list-area .date {
	grid-column: 1;
	grid-row: 1;
	width: 18.5vw;
	font-size: 3.2vw;
	white-space: nowrap;
}

#info .list-area .list-cat-wrap {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	align-items: center;
	min-width: 0;
	gap: 1.33vw;
}

#info .list-area .cat {
	justify-self: start;
	min-width: 19.3vw;
	height: 6.4vw;
	padding: 0 2.67vw;
	font-size: 2.93vw;
}

#info .list-area h3 {
	grid-column: 1 / -1;
	grid-row: 2;
	min-width: 0;
	font-size: 3.74vw;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	word-break: normal;
	overflow-wrap: anywhere;
}

	#info .btn {
		margin-top: 8vw;
	}
}


/*------------------------
bannerエリア
------------------------*/
	#banner-area .banner img{
		width: 100%;
		height: auto;
	}
	
/* PC */
@media screen and (min-width:768px) {
	#banner-area .banner{
		max-width: 1100px;
		margin: auto;
	}
	#banner-area.l-inner {
		padding: 0 100px;
	}
	#banner-area .banner:first-of-type {
		margin-bottom: 20px;
	}
}
/* SP */
@media screen and (max-width:767px) {
		#banner-area{
			padding: 0 5.33vw; 
	}
	#banner-area .banner + .banner{
		margin-top: 4vw;
	}
}


/*------------------------
header
------------------------*/
/* PC */
@media screen and (min-width:768px) {
}
/* SP */
@media screen and (max-width:767px) {
}