/* --リセットCSS-- */
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
    all: unset;
    display: revert;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

a, button {
    cursor: revert;
}

ol, ul, menu, summary {
    list-style: none;
}

img {
    max-inline-size: 100%;
    max-block-size: 100%;
	vertical-align: bottom;
}

table {
    border-collapse: collapse;
}

input, textarea {
    -webkit-user-select: auto;
}

textarea {
    white-space: revert;
}

meter {
    -webkit-appearance: revert;
    appearance: revert;
}

:where(pre) {
    all: revert;
    box-sizing: border-box;
}

::placeholder {
    color: unset;
}

:where([hidden]) {
    display: none;
}

:where([contenteditable]:not([contenteditable="false"])) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
    -webkit-user-select: auto;
}

:where([draggable="true"]) {
    -webkit-user-drag: element;
}

:where(dialog:modal) {
    all: revert;
    box-sizing: border-box;
}

::-webkit-details-marker {
    display: none;
}

/* --root関数-- */

:root {
	--accentColor: #d32b2b;
	--header-textColor: #784c29;
	--underlineColor: #ffef00;
}

body {
	border: 8px solid;
	border-image: linear-gradient(115deg, #bc811c, #ebcc7c) 1;
	background-color: #faf6ed;
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN","Hiragino Sans", "Noto Sans", Meiryo, sans-serif;
}

header {
	padding: 80px 30px 70px;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-image: url(images/20th/20th_schedule_page_header_bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position-x: 50%;
}

header img {
	height: auto;
}

header .logo20th {
	margin-bottom: 13px;
}

header .underLogo {
	margin-bottom: 30px;
}

header .campaignTitle {
	margin-bottom: 42px;
}

header p {
	font-family: "Noto Serif JP", serif;
	font-weight: 500;
	font-style: normal;
	font-size: 22px;
	line-height: 2.1;
	color:var(--header-textColor);
	text-align: center;
	letter-spacing: -0.2px;
}

header p span {
	font-size: 118%;
	color: #c90500;
}
br.sp {
	display: none;
}
main {
	margin-left: auto;
	margin-right: auto;
	width: 992px;
	padding: 0 30px;
}

main .cardWrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
	margin-top: 0;
	margin-bottom: 60px;
}

main .cardWrapper .card {
	width: calc((100% - 60px) / 3);
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 2.121px 2.121px 10px 0px rgba(0, 0, 0, 0.16);
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	container-type: inline-size;
}

main .cardWrapper .card img {
	width: 100%;
	height: auto;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	margin-bottom: 20px;
	border-top: 4px solid #fff;
	border-right: 4px solid #fff;
	border-left: 4px solid #fff;
}

main .cardWrapper .card .card_eventTitle {
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 16px;
	color: #444444;
	height: 32px;
	display: flex;
	align-items: center;
}

main .cardWrapper .card .card_eventDate {
	font-family: YakuHanJPs,sans-serif;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 19px;
	background-color: var(--accentColor);
	font-size: 15px;
	font-weight: bold;
	color: #fff;
	width: calc(100% - 40px);
	text-align: center;
	font-feature-settings: "palt";
	-webkit-font-feature-settings: "palt";
	border-radius: 26px;
	padding-top: 8px;
	padding-bottom: 8px;
}

main .cardWrapper .card .card_eventDate span {
	font-size: 13px;
}

main .cardWrapper .card .card_eventSummary {
	margin-bottom: 18px;
	padding-left: 20px;
	padding-right: 20px;
	font-size: 15px;
	font-size: min(16px, 5.2cqw);
}

main .cardWrapper .card .card_eventPage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(100% - 40px);
	height: 52px;
	border: 2px solid var(--accentColor);
	border-radius: 6px;
	text-align: center;
	color: var(--accentColor);
	font-weight: bold;
	margin-top: auto;
	margin-bottom: 25px;
	position: relative;
}

main .cardWrapper .card .card_eventPage::before {
	position: absolute;
	top: 46%;
	transform: rotate(45deg) translateY(-46%);
	right: 12px;
	content: "";
	width: 10px;
	height: 10px;
	border-top: 2px solid var(--accentColor);
	border-right: 2px solid var(--accentColor);
}

main .cardWrapper .card.is_before .card_eventPage {
	pointer-events: none;
	border: 2px solid #c79133;
	color: #c79133;
	background: #fff1da;
}
main .cardWrapper .card.is_before .card_eventPage::before {
	content: none;
}
main .cardWrapper .card.is_before .card_eventPage::after {
	content: "Coming Soon...";
}

main .cardWrapper .card .card_eventPage::after {
	content: "イベント詳細を見る";
}

main .cardWrapper .card.is_after .card_eventPage {
	pointer-events: none;
	border: 2px solid #bbb;
	color: #bbb;
	background: #eee;
}
main .cardWrapper .card.is_after .card_eventPage::before {
	content: none;
}
main .cardWrapper .card.is_after .card_eventPage::after {
	content: "終了しました";
}

@media(hover :hover) {
	main .cardWrapper .card .card_eventPage:hover {
		background-color: var(--accentColor);
		color: #fff;
		transition: all 0.3s ease-in-out;
		cursor: pointer;
	}

	main .cardWrapper .card .card_eventPage:hover::before {
		border-top-color: #fff;
		border-right-color: #fff;
		transition: all 0.3s ease-in-out;
	}
}

@media(hover :none) {
	main .cardWrapper .card .card_eventPage:active {
		background-color: var(--accentColor);
		color: #fff;
	}

	main .cardWrapper .card .card_eventPage:active::before {
		border-top-color: #fff;
		border-right-color: #fff;
	}
}

main .supplement {
	margin: 0 66px 96px;
	padding: 4px;
}

main .supplement .stirUp {
	font-family: "Noto Serif JP", serif;
	font-weight: 500;
	font-style: normal;
	font-size: 18px;
	line-height: 1.78;
	text-align: center;
	padding: 24px 10px;
	border: 1px solid #dbb85e;
	outline: 1px solid #dbb85e;
	outline-offset: 3px;
	margin-bottom: 53px;
}

main .supplement .stirUp span {
	background: linear-gradient(transparent 60%, #ffef00 40%);  
}

main .supplement .stirUp span.fs20 {
	font-size: 110%;
}

main .supplement .caution {
	margin-left: -4px;
}

main .supplement .caution h3 {
	font-size: 110%;
	font-weight: bold;
}

main .supplement .caution ul {
	text-indent: -1em;
	padding-left: 1em !important;
}

footer .copyright {
	text-align: center;
	color: #777;
	margin-bottom: 14px;
	font-size: min(15px, 3vw);
}

@media(max-width: 992px) {
	header {
		padding: 8vw 50px 6vw;
	}
	header .logo20th {
		width: 27%;
		margin-bottom: 1.5vw;
	}
	header .underLogo {
		width: 31%;
		margin-bottom: 3vw;
	}
	header .campaignTitle {
		width: 82%;
		margin-bottom: 4vw;
	}
	header p {
		font-size: min(22px, 2.2vw);
	}
	main {
		width: 100%;
		padding: 0 50px;
	}
	main .cardWrapper .card {
		width: calc((100% - 30px) / 2);
		transition: all 0.3s ease-in-out;
	}
	main .supplement {
		margin: 0 10px 60px;
	}
	main .supplement .stirUp {
		font-size: 2vw;
		padding: 3vw 1vw;
		margin-bottom: 53px;
	}
	main .supplement .caution {
		font-size: 14px;
	}
}

@media(max-width: 700px) {
	body {
		border-width: 5px;
	}
	header {
		padding: 8vw 20px;
	}
	header .logo20th {
		width: 43%;
		margin-bottom: 1.5vw;
	}
	header .underLogo {
		width: 47%;
		margin-bottom: 4vw;
	}
	header .campaignTitle {
		width: 96%;
		margin-bottom: 5.5vw;
	}
	header p {
		font-size: min(22px, 4.1vw);
		line-height: 1.9;
	}
	header p span {
		font-size: 100%;
	}
	br.sp {
		display: block;
	}
	main {
		padding: 0 20px;
	}
	main .cardWrapper {
		margin-bottom: 40px;
	}
	main .cardWrapper .card {
		width: 100%;
		transition: all 0.3s ease-in-out;
	}
	main .supplement {
		margin: 0 0 40px;
	}
	main .supplement .stirUp {
		font-size: min(16px, 3.5vw);
		margin-bottom: 40px;
		line-height: 1.7;
	}
}