:root {
	--event-color: #F5F8FF;
	--event-accent-color: #D0DEFF;
	--event-gray: #F7F5F5;
	--color-subtext: #727272;
	--event-white: #FFFFFF;
}

/* class */
.event a.tag {
	background: var(--event-color);
}

article.event h2 {
	border-top: 1px solid var(--event-accent-color);
	border-bottom: 1px solid var(--event-accent-color);
}

.non-boder {
	border-top: none !important;
	border-bottom: none !important;
}

article.event h3 {
	border-left: 4px solid var(--event-accent-color);
}

article.event ol li::before {
	background: var(--event-accent-color);
}

article.event .button-area a.white {
	background: white;
	border: 2px solid var(--event-accent-color);
}

article.event .button-area a.color {
	background: var(--event-accent-color);
}

article.event .monthly-item-title span {
	border: 2px solid var(--event-accent-color);
}

h2.event-recipe {
	position: relative;
}

h2.event-recipe:after {}

.category.event span::before,
.category.event a::before {
	background: url(../../images/editors-blog/article/ic-beauty.svg) no-repeat center center/100%;
}

/* id */
#event .bg {
	background: var(--event-color);
}

#event .ranking-line {
	position: relative;
}

#event .ranking-line:before {
	content: "";
	display: block;
	width: 189px;
	height: 13px;
	background: url(../../images/event/article/event-ranking-line.svg) no-repeat center center/100%;
	z-index: 0;
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
}

/* #event .index-head{
	background: url(../../images/event/event-head-img.png) no-repeat left center/100%;
} */

/* color */
#event article h4 span {
	border-bottom: 1px solid var(--event-color);
}

#event article h5 span {
	background: var(--event-color);
}

#event article .talk-area .talk-cont>p.fukidashi {
	background: var(--event-color);
}

#event .special-title {
	background: var(--event-color);
}

/* accent-color */
#event article ul.article-list li::before {
	background: var(--event-accent-color);
}

#event article .faq .question:before {
	color: var(--event-accent-color);
}

#event article .faq .answer:before {
	color: var(--event-accent-color);
}

#event article details summary::marker {
	color: var(--event-accent-color);
}

#event article .talk-area .talk-cont:nth-of-type(2n)>p.fukidashi {
	border: 3px solid var(--event-accent-color);
}

#event article .talk-area .talk-cont:nth-of-type(2n)>p.fukidashi::before {
	border-color: transparent var(--event-accent-color) transparent transparent;
}

#event #cb~.more_btn::after {
	background: var(--event-accent-color);
}

#event .hover\:bg-subtext:hover {
	background-color: var(--color-subtext);
	border: 1px solid var(--color-subtext);
}

#event article .talk-area .talk-cont:nth-of-type(2n)>p.fukidashi {
	background-color: #fff;
}

/* Special */
.after\:bg-\[\#ECD9FF\]:after {
	content: var(--tw-content);
	background-color: var(--event-accent-color);
}

.bg-\[\#ECD9FF\] {
	background-color: var(--event-accent-color);
}

/* Diff */
#event .free-register {
	position: relative;
}

#event .free-register:before {
	content: "";
	display: block;
	width: 189px;
	height: 13px;
	background: url(../../images/event/article/event-ranking-line.svg) no-repeat center center/100%;
	z-index: 0;
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
}

.d-center {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

#event article {
	margin-bottom: 0;
}

#event .border-box {
	border: 1px solid #727272;
	border-radius: 16px 0 0 0;
	padding: 20px 24px;
}

#event .text-xl {
	font-size: 24px;
}

#event .text-custom {
	word-spacing: 14px;
	letter-spacing: 1px;
	line-height: 1.6;
}

#event .mlr-auto {
	margin-left: auto;
	margin-right: auto;
}

#event .sp-hidden {
	display: none;
}

#event .ranking-line::before {
	content: "";
	display: block;
	width: 189px;
	height: 13px;
	background: url(../../images/event/article/event-ranking-line.svg) no-repeat center center / 100%;
	z-index: 0;
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
}

#event .custom-button {
	background: var(--event-white);
	color: #262626;
}

#event .custom-button:hover {
	background: var(--color-subtext);
	color: var(--event-white);
	opacity: 1;
	border: 1px solid var(--color-subtext);
}

#event .pc-only {
	display: flex;
}

@media screen and (min-width: 768px) {
	#event .border-box {
		padding: 28px calc(var(--spacing)*10) 0 calc(var(--spacing)*15);
	}

	#event .px-8 {
		padding-left: 8px;
		padding-right: 8px;
	}
}

@media screen and (max-width: 767px) {
    #event .pc-only {
        display: none;
    }

	#event .button-area {
        width: 100%;
	}

	#event .event-join {
		margin-top: 0;
	}

	#event .text-top-banner {
		padding-bottom: 0;
	}
}

/* Special */
.event-banner {
	display: flex;
	text-align: center;
	justify-items: center;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

#event .ranking-line-free-register::before {
	background: url(../../images/event/article/event-banner-line.svg) no-repeat center center / 100%;
}

#event .articleDetailTxt .fes>header h1 img {
    width: 50%;
}

#event .articleDetailTxt h2 {
	border-top: none;
	border-bottom: none;
}

#event .articleDetailTxt .real h2 {
    border-bottom: 3px solid #bde1d5;
}

#event .articleDetailTxt .fes .real {
    padding: 3.1rem 5%;
}

#event .articleDetailTxt .fes .real ul li h3 {
	border: none;
	margin: 0;
}

#event .articleDetailTxt h3 {
	border: none;
}

#event article p {
	padding-bottom: 0
}

#event .articleDetailTxt .fes .intro ul li h2 {
	padding-top: 0
}

#event .articleDetailTxt .fes .intro ul li .badge {
	padding: .2rem 1.4rem
}

#event .articleDetailTxt .fes .program .pg-intro {
    margin-bottom: 3rem;
}

#event .pg-intro h3 {
	margin-top: 0
}

#event .articleDetailTxt .fes .program {
    padding: 3rem 4% 7rem;
}

#event .articleDetailTxt .fes #nippon .pg-list-w .pg-list-i {
	padding: 0 4% 0rem;
}

#event .articleDetailTxt .fes #cotolab .pg-list-w .pg-list-i {
	padding: 2rem 5%;
}

#event .articleDetailTxt .fes #nippon .pg-intro h3 {
    margin-top: 2rem;
}

#event .articleDetailTxt .badge.venue p,
#event .articleDetailTxt .badge.venue2 p,
#event .articleDetailTxt .badge.hybrid p,
#event .articleDetailTxt .badge.online p{
	line-height: 1.2rem;
}

#event .articleDetailTxt .fes #cotolab .pg-list-i.cotolab-tt ul li .tt-link {
    margin-top: 3rem;
}
@media screen and (max-width: 767px) {
	.cotolab-list{
		padding: 0 calc(var(--spacing)*5);
	}
}